search

plantuml / plantuml.js

PlantUML that runs completely on javascript without needing java/servers
https://plantuml.github.io/plantuml.js/
MIT License
188 stars 25 forks source link

Use cheerpjCreateDisplay #45

Open arnaudroques opened 1 year ago

arnaudroques commented 1 year ago

The actual behavior not very efficient:

1) A graphic is created "in memory" in Java/JS 2) It is then compressed in PNG in Java/JS in "result.png" 3) "result.png" is finally uncompressed in JS to be displayed

Fortunately, it could be possible to use cheerpjCreateDisplay. I've created a branch where this cheerpjCreateDisplay function is called.

My understanding is that it create a Canvas in the HTML page. Right now, a simple blue rectangle is drawn in Java, but in the future, we could draw the real diagram. (See the demo!)

@sakirtemel could you remove the actual drawing (we won't need it any more) and rearrange the Canvas position (which is below content) to that it is displayed on the left? (By working on the branch panel2, it's not ready to be merged at all!) Thanks!

sakirtemel commented 1 year ago

@sakirtemel could you remove the actual drawing (we won't need it any more) and rearrange the Canvas position (which is >below content) to that it is displayed on the left? (By working on the branch panel2, it's not ready to be merged at all!)

just done it, let me know if it works good for you

The actual behavior not very efficient:

interesting finding, it really can speed the things up as the things are now going to be done closer to the java/cheerpj level, where the actual code is running

A graphic is created "in memory" in Java/JS

I didn't know that, somehow I assume the png generation is always there by default. let's see the impact of it!

arnaudroques commented 1 year ago

just done it, let me know if it works good for you

It works fine! Many thanks

interesting finding, it really can speed the things up as the things are now going to be done closer to the java/cheerpj level, where the actual code is running I didn't know that, somehow I assume the png generation is always there by default. let's see the impact of it!

Yes, I'm very curious to see the result. It has some impact on the Java code, so we have to wait several days (weeks?)... I'm very confident that it will speed up, the big question is, how much :-)

arnaudroques commented 1 year ago

@sakirtemel I've integrated this "cheerpjCreateDisplay" into main with this link.

The good news is that it's really faster :-D

There are still some issue. You have to wait and to enter several keys to see something. I think it's because I'm doing the initialization in some bad way.

Things to known:

In the online version, I really did it badly, in the sense that I am using a public static int convertCanvas(int width, int height, String text) method that should NOT be used and that I will remove latter.

@sakirtemel Could you change it and rather than calling convertCanvas(), we should:

  1. First call initCanvas(int width, int height) to initialize the drawing area. This should be done only once, sometimes after CheerpJ initialization, and before any diagram drawing.
  2. Then call convert(String text) to draw any diagrams. This method could be called several times.

On big issue is that I think it's impossible to change the drawing area size within Java (so to resize the canvas). I made a lot of tests and it really does not think possible in Java.

Would it be possible for you that, in Javascript, you figure out what is exactly this object (I call it Canvas, but not sure it is a real Canvas) and that you search for method to resize it ?

On my side, I'm going to create an index-svg.html. My goal is to have several methods of using plantuml.js shown in the main branch.

Thanks!

arnaudroques commented 1 year ago

On my side, I'm going to create an index-svg.html. My goal is to have several methods of using plantuml.js shown in the main branch.

Ok, this almost work... https://plantuml.github.io/plantuml-wasm-dev/pr-49/index.html

The image is not displayed, but if you see source in new tab (with Chrome), you'll see the SVG source. It looks like img is expecting PNG. Not sure how to make it work with svg

sakirtemel commented 1 year ago

It looks like img is expecting PNG. Not sure how to make it work with svg

Yeah, I figured that svgs are not like images at all recently :D I'm going to do a quick research.

By the way, congrats for making it work 🎉 it works significantly fast for a complex diagram that is in the examples(~1 second).

I'm going to take a look at the code overall for the things you mentioned ( https://github.com/plantuml/plantuml.js/issues/45#issuecomment-1417389223 ) I set myself as a review in that PR just not to skip it

sakirtemel commented 1 year ago

@arnaudroques sorry that it took some time, I'll take a look at the things this week

sakirtemel commented 1 year ago

I can see that here's an implementation: https://plantuml.github.io/plantuml-core/raw.html . it's so fast!

I'm going to slowly move that #4 svg rendering here