Survive external DOM manipulations

[rsimon]

Some pages may manipulate the DOM dynamically, via JavaScript. An example is here, where a click on the "expand" icon will...

• remove the IMG from it's parent DIV
• append it to a different parent DIV
• replace the SRC with a different image that is larger

http://ajw.asahi.com/article/0311disaster/fukushima/AJ201311030016

Ideally, Annotorious should be able to handle such cases. The only way to achieve this is to listen to DOM Tree Events (see also here) and then re-initialize the affected canvases.

[rsimon]

Note: while the above example is quite extreme, a simpler case where JavaScript is used to resize the image (e.g. to toggle a thumbnail/fullscreen view, or as part of a responsive layout) could be quite common.

[jmosney]

Hi, this bug/fix is important to my project. We have the image we're annotating in a responsive container, so the image changes size with the window size. I think ideally there would be a method on Annotorius you could call to recalculate the position of the canvas/other DOM/annotation layers. As for redrawing layers it would work easiest with the default normalized coordinate system, but if the data was in px the layer geometry could be derived from the raw image size.

Please let me know if there's any progress on this or a canonical way to handle responsive layouts.