neo4j-labs / arrows.app

A graph drawing application
https://arrows.app
Apache License 2.0
107 stars 16 forks source link

Add background image for tracing the graph #37

Closed jarrodpirtle closed 2 years ago

jarrodpirtle commented 3 years ago

We often have the need to translate real-world objects into our graphs, and we generally have a good reference document which could be easily traced using arrows. If we could add PNGs or PDFs to the background of an arrows instance then it would greatly improve the efficiency of these simple tracing tasks.

Ideally multiple images could be placed onto an infinite background and arranged and scaled to setup the environment.

Would something like this be easy enough to implement?

adamsma commented 3 years ago

I would second the usefulness of this feature. We were evaluating a couple of programs to do just the use case mentioned. Arrows was great for its ease of use and multiple export formats (png, json, and especially cypher). The biggest down side for Arrows was there was no way (via the UI) to add a background image.

The workaround I'm using is to use the browser's developer's tool to manually edit the CSS for the canvas tag. Add something like background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/5b/6n-graf.svg);. You might need to also adjust the position with something like background-position: center; This is fine for me, but having this be configurable from the UI would be helpful for my colleagues who aren't familiar with CSS (and quicker/easier even for those that do).

apcj commented 3 years ago

Hi @jarrodpirtle thanks for the great suggestion. Also @adamsma - amazing to hear that you've found a way to do this already - although I know it would be a lot better if this was built into the software!

I have wondered in the past whether this would be a useful feature. Thank you for explaining your motivations. I hope that we'll get to this soon.

apcj commented 2 years ago

Hi @jarrodpirtle @adamsma this feature is now implemented. See screenshot:

image

You can insert a background image by setting the background-image attribute. Because of CORS, using an http(s) URL very rarely works, so you might find it easier to paste an image from your clipboard, which will be converted automatically into a data URL. You can also paste SVG text. Finally, you can paste an image (or SVG text) straight onto the graph when nothing is selected.

You can adjust the size of the background with the background-size attribute, but you can't move it. Move the nodes instead!

Would you be able to try this out and give me some feedback? Thanks!