Openseadragon: Is there a solved method of synchronizing zooming while panning between two instances of viewports?

[SignificantOtter]

(I'm not sure how to add the question label, but this is a question about functionality rather than an issue)

I'm attempting to create dynamic OpenSeadragon Instances that are opened and closed, each with their own individual viewports and viewers. However, I'm now trying to link them together so that any movement on one is reflected on the other. There's a big problem with this, though. The images are not a standard size, and need to be locked together from different viewport/zoom locations. Therefore, I can't just use zoomTo and panTo with hard values that are self-correcting, I need to use dynamic delta based values for zoomBy and panBy

If I capture pan events, and just rebroadcast a new panBy with the difference between the last viewport target and the current viewport target, I can easily synchronize panning between them. The same goes for zooming. However, there's a major issue when panning while zooming, and that's what I'm trying to solve.

If you try to pan while zooming, the rebroadcast zoom event will cycle through almost invariably at a different rate than the zoom event from the original viewport. Therefore, when the pan event occurs, the two viewports are at different stages of the zoom, so the image either moves farther or less far than it should in a true synchronization.

The current solution that I'm working on for this, after wracking my brain and trying several failed ideas (such as converting to dx dy image coordinates, then reconverting those dx dy image coordinates back to viewport coordinates using the other viewer's viewport conversion, but this doesn't actually fix the discrepancy with zoom because these conversions still happen from asynchronous zoom levels with viewports) is to calculate image distance vectors based on the first pan event's target position in image pixel coordinates in each synchronized viewport system and the new target position points (both done as delta from the initial point rather than hard coordinates), then subtracting the normalized vectors to get the delta target image coordinate vector between them at each point that a pan event fires. That vector is converted to viewport coordinates and fed into a panBy.

However, in doing this, even though it solves my major problem of the different zoom levels not resulting in the real expected viewport dx dy shift at any given firing of the pan event, I no longer allow simple viewport level synchronized movement between different sized images. If I have a high resolution triangle and a low resolution triangle, the low resolution triangle will jet off of the screen with a flicker of movement of the high resolution triangle that's synchronized with it. So, while that fixes the big problem, it has an unsavory side effect of requiring everything to be the exact same size in order to be able to be linked. A viewport coordinate based solution would let me keep them interacting in a more expected manner.

Is there a known way to solve this discrepancy between viewport pans during zooms that, due to zoom animation asynchronicity even on images of the same size, end up with different real movements of the viewports?

[iangilman]

Are these images different sizes but the same aspect ratio? That's no problem... You just need to align their viewport coordinates. If image A is 400x300 and image B is 4000x3000, they can still both be presented with viewport coordinates of 4x3 or whatever.

If they are different aspect ratios, (e.g. 4x3 vs. 3x4) that gets more challenging... you basically need to decide which part of the image to align.

At any rate, here's our basic synchronous viewer example:

https://codepen.io/iangilman/pen/BpwBJe

Let me know if that helps, or if there are specific cases that it doesn't cover, or if you need help aligning your viewport coordinates as mentioned above.