Adding "Export SVG" button

ondras / wwwsqldesigner

WWW SQL Designer, your online SQL diagramming tool

https://sql.toad.cz/?keyword=online_library

BSD 3-Clause "New" or "Revised" License

2.86k stars 722 forks source link

Adding "Export SVG" button #269

Open denilsonsa opened 6 years ago

denilsonsa commented 6 years ago

This is a very basic implementation of SVG export.

It looks into DOM elements to figure out the positions and dimensions, and then re-creates the tables as plain SVG and .

Works fine on both Firefox and Chrome.

Known issues:

The positions are incorrect if the browser has some zoom applied. In fact, the display is already incorrect in the browser itself (the SVG paths are not correctly aligned with the elements).
Rounded corners are not supported. Implementing that (properly) would require SVG clipping or some extra tricks. Not worth the extra trouble for now.
The borders are 2-pixel wide because otherwise they would not align to the pixel grid (1-pixel border would cover two half pixels).
There are no translations for other languages.

Related issues:

denilsonsa commented 6 years ago

Idea for future refactoring (that I am not going to do):

Completely replace the HTML elements (the <div class="table"> and <table>) with SVG ones. This way, the display would always be correct, independent of the zoom, and exporting to SVG would become trivial.

For editing a table, we still need HTML elements, and that could be handled by a modal window. This way, the "diagram" will be 100% rendered through SVG, while the interactions are still HTML.

As bonus, it would be trivial (using the <use> element) to generate the minimap and keep it in-sync.

ondras commented 6 years ago

Hi @denilsonsa,

thanks a lot! This looks great. I am now packing for vacation, so I will completely review and merge this PR once I return.

Some initial observations:

The borders are 2-pixel wide because otherwise they would not align to the pixel grid (1-pixel border would cover two half pixels).

What about the trick with 1-pixel border and positions offset by 0.5 pixels?

Completely replace the HTML elements (the <div class="table"> and <table>) with SVG ones. This way, the display would always be correct, independent of the zoom, and exporting to SVG would become trivial.

Yes, this would be the best approach. This is probably the first thing to do if I had time to maintain this more.

For editing a table, we still need HTML elements, and that could be handled by a modal window. This way, the "diagram" will be 100% rendered through SVG, while the interactions are still HTML.

Perhaps the <foreignElement> SVG feature would enable inline HTML?

denilsonsa commented 6 years ago

Perhaps the <foreignElement> SVG feature would enable inline HTML?

<foreignObject>? Never used it, but seems like a good idea.

What about the trick with 1-pixel border and positions offset by 0.5 pixels?

I forgot to try that. But maybe that can/should be done if/when the entire rendering is moved to SVG.

I also forgot to add stroke-linejoin="round", that should make the border a bit rounded.

if I had time to maintain this more.

I know that feeling. ;)

Zeldri commented 4 years ago

Any news on it ? Would be a cool feature :D

ondras commented 3 years ago

Any news on it ? Would be a cool feature :D

Dammit, I have completely forgotten about this. @denilsonsa, is your code still working agains the current master branch? Is is safe to merge this?

denilsonsa commented 3 years ago

It's been two years since I last touched the code, so I don't know. We have to rebase/merge the code and test. I'm not gonna do that right now, so feel free to check it if you have some time.