antlr4-lab icon indicating copy to clipboard operation
antlr4-lab copied to clipboard

[feature] add zoom ability to svg parse tree

Open parrt opened this issue 3 years ago • 5 comments

or make it an img tag referring to url so users can open in another tab?

Hmm... can use window zoom now...maybe don't need.

parrt avatar Sep 23 '22 21:09 parrt

I have something that you might look at and refine to add pan and zoom of the parse tree. Basically, it replaces the <div id="svgtree"> with a <canvas>. When the parse is done, it creates an Image control, sets the source with the svg, and draws it. https://github.com/kaby76/antlr4-lab/tree/combined

Working over at http://134.209.209.215/

kaby76 avatar Oct 15 '22 16:10 kaby76

Hmm...sounds good but downloaded image is now png not svg and lower quality. Hmm...let me see about just scroll bars. Now we can "open in another tab" so expanding is no problem.

download

parrt avatar Oct 15 '22 21:10 parrt

ok, i'm gonna leave as-is and close this. Can expand window to see more. zoom of browser gives us the functionality we need. can also open in new tab for more control.

parrt avatar Oct 15 '22 22:10 parrt

Browser-level pan and zoom work, but I think it would be better with a pan and zoom on the graph that doesn't also affect all other controls in the UI, e.g., the text boxes. Yes, "open in new tab" works, but it's not an obvious workaround (I overlooked trying that). Will play around with it further for my edification.

kaby76 avatar Oct 15 '22 23:10 kaby76

Hmm...yes, let's keep this open as something interesting my pop-up. The previous iframe solution was terrible but possibly just setting the width or something might work.

parrt avatar Oct 16 '22 18:10 parrt