search

UC-Davis-molecular-computing / scadnano

Web application for designing DNA structures such as DNA origami.
https://scadnano.org
MIT License
22 stars 13 forks source link

make export SVG styles match the UI #250

Open UnHumbleBen opened 4 years ago

UnHumbleBen commented 4 years ago

The SVG styles do not quite match the UI, specifically the helix circles and text.

dave-doty commented 4 years ago

Do you mean that they look different in a viewer? Or that the exported SVG is actually different? Can you post screenshots?

One way they are different is that in the export, all styles are inline, whereas in the browser, they are a combination of inline and applied from the CSS file. I didn't see any way to have a CSS file as part of an SVG file, so this code:

https://github.com/UC-Davis-molecular-computing/scadnano/blob/master/lib/src/middleware/export_svg.dart#L104

seeks out relevant CSS styles that were applied to an element and puts them inline before exporting. I didn't see a way to iterate over all the styles that actually were explicitly listed in the CSS file. In the element, there's just a huge dictionary containing every possible style key, and it doesn't give any indication which ones are unnecessary because they are just equal to their default.

So instead, there's an explicit list of style keys to put inline (if they are not inline already):

https://github.com/UC-Davis-molecular-computing/scadnano/blob/master/lib/src/middleware/export_svg.dart#L94

But it may be that some relevant key is not there and should be added.

UnHumbleBen commented 4 years ago

Sorry I was getting confused because the svgs looked different when I imported into the paper, but the svg files would look the same if open at a sufficiently large size. In the paper, some of the text in the helix circles are bulging out. I wonder if there is a way to change make the size of the svg auto adjust so that the text stays the same size relative to the helix:

bad_circle

dave-doty commented 4 years ago

This could be a problem exporting, or it could just be a problem with your SVG viewer.

Is this the example 16-helix rectangle? When I export from the main view, and I open that SVG file in Chrome, I see this:

image

When I open the same file in Inkscape, I see this:

image

As you can see, both of them look different than yours. They also look different than each other (see font inside the helices), presumably due to different fonts available to Chrome versus Inkscape.