viz-js icon indicating copy to clipboard operation
viz-js copied to clipboard

Get image and image map

Open cwellsx opened this issue 5 months ago • 2 comments

I'd like to have both, an image (e.g. svg) and image map (e.g. cmapx) -- so that the resulting image can have clickable areas.

Graphviz's image map is useful because it's about 5 pixels in width along/around each edge -- i.e. much wider than the 1-pixel edge itself, and therefore easier to hit/click with the mouse.

My problem is that the API lets me specify one format at a time, not two:

  • So to get both outputs I must call the API twice -- so that's slower than it might be.
  • So I'd like it if the format parameter would accept an array of strings as well as accepting a string.
  • I'm not sure how you'd also change the API to return two strings instead of one -- do it any way you like afaic.

When I do the same by invoking dot.exe from the command-line, I can tell it to output both at once:

const args = [dotFilename, "-Tpng", `-o${pngFilename}`, "-Tcmapx", `-o${mapFilename}`];

By the way, thank you for doing this project. Even without the optimization I'm asking for, it's faster (and so more interactive) than the command-line -- taking an unreasonably complicated graph of 50+ nodes, for example:

  • 300 msec for the SVG, plus 200 msec for the MAP (500 msec total)
  • 1500 msec to get both by spawning dot.exe

Given that I currently need to do it in two operations, I could reduce the apparent delay by making it progressive: display the SVG a.s.a.p., and then the image map a bit later when it's ready.

cwellsx avatar Aug 26 '24 21:08 cwellsx