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

copy image of selected objects #740

Closed dave-doty closed 1 year ago

dave-doty commented 2 years ago

Currently one can copy strands or other objects. This puts a JSON representation of them in the system clipboard that can be used to paste into a text file, and if pasted into scadnano, it is interpreted to mean paste the objects somewhere in the scadnano design.

It is also possible to export SVG, but this exports the entire main or side view as a giant SVG object.

Make a new copy option (with a keyboard shortcut such as Ctrl+I) that reads the selected objects and copies to the system clipboard an image of them that can be pasted into programs such as slide presentation software. This might be done through SVG? Not sure. One should be able to select a strand, press Ctrl+I, then open Powerpoint and press Ctrl+V, and have an image of the strand be pasted into Powerpoint.

UPDATE: See comments on PR #769 for some information for why this feature is so difficult to implement. Seems to be browser security restrictions prevent putting certain types of data (e.g., SVG images) on the system clipboard.

dave-doty commented 2 years ago

This might require hackery to find the SVG components that need to be exported, based on string id lookup in the rendered HTML. (i.e., reaching outside the React abstraction)

Maybe check out code for rectangle select for ideas.

Also look at current SVG export (all of main and side views) for how to export the CSS styles inline that are necessary for the exported SVG to be styled correctly.

dave-doty commented 1 year ago

Release notes

Copy bitmap image of selected strands to clipboard

You can select some strands: and copy a (PNG bitmap) image of them to the clipboard by pressing Ctrl+I (or Edit-->Copy image),

image

which can be pasted into other image programs such as Powerpoint or Inkscape:

image

However, since this is a bitmap image, it will be pixelated on zoom-in:

image

To save a vector graphics image (which will not pixelate on zoom-in), use Export-->SVG of selected strands. This is a bit more effort since it saves to a file, which then needs to be imported into Powerpoint/Inkscape/other image programs, but it will retain sharpness on zoom-in.