Match diagram with underlying photo


I’m trying to use GoJs for creating “markings” on top of a photo. The way I’ve created the page is that the GoJs canvas is a section on the page (the size is set by percentage of the entire page) and the photo is centered behind it. My photo can be a “real” picture (JPG, etc.), or can be a PDF file (using JsPdf rendering).

The photo can be zoomed IN or OUT and dragged in 4 directions. When zoomed IN a lot, you can achieve “clipping” effect where only part of the whole photo is visible". I can remember the zooming setup at the time of placing the markings so that viewers would get the exact same view on their screen. There are cases when the photo is filling the entire canvas area, but there are cases when the photo proportions are not the same as the canvas, thus only the height (or width) fills the canvas while the other dimension doesn’t. It is OK that some markings are placed outside the photo area (as the canvas can be larger than the photo).

I have managed to create the main functionality with a toolbar that users can drag & drop tools from and place them at the desired positions. Eventually I’m converting the diagram to JSON and saving it that way.

The idea is that at all times those markings would appear exactly at the same spot on the photo. This should be regardless of the computer on which the result is viewed, which might have a different screen resolution, etc.

When the browser window is dragged to be larger or smaller, both the canvas and the photo change their size. It is important that the markings would keep the right location to match the photo. If the photo did not fill the entire width originally (it’s a narrow photo), it is possible that the canvas “shrinks” horizontally when the browser window size is reduced, but the photo remains at the SAME width, as there is still enough space on both sides and there’s no need for it to shrink. Same goes for wide & short photos when changing the browser window height.

The way I see it, I must start by limiting the size of the Document to the size of the Viewport and preventing any scrolling and/or zooming. I have already accomplished this. The next challenge is how to “normalize” the coordinates of the GoJs document to the photo size. I would like to keep the GoJs document as large as possible (dictated by the canvas size) and not force it to the photo dimensions.

Is there any “standard” approach that I can use here?


It sounds like you’ll probably need to use some binding conversion functions to keep the location of your nodes in sync with the size of the picture. Have you seen the Leaflet sample? It uses some conversion functions to make sure the node locations are properly updated as the map is panned and zoomed.