Use cheerpjCreateDisplay

[arnaudroques]

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]

@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]

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]

@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:

• the red line are drawing by me (in the Java code) to help debug. Of course, it will be removed latter. This red rectangle cover the whole graphic area.
• The "Loading in progress" is not shown by me. It is the CheerpJ runtime which shows it sometimes, not sure exactly when. Probably when it is loading something :-D

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]

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]

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 ( #45 (comment) ) I set myself as a review in that PR just not to skip it

[sakirtemel]

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

[sakirtemel]

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