Misregistration between paper.js and OpenSeadragon

[rdvincent]

On the current master branch (85c22a0), I am experiencing a number of situations in which the registration of objects drawn on the paper.js view are not properly saved and loaded across slices.

For example, here's a simple recipe that produces a strange result for me every time:

1. load a fresh copy of microdraw
2. select the drawing tool
3. draw a region
4. zoom and/or pan
5. switch to an adjacent slice
6. switch back to the original slice

In all cases I have observed, the outline and the fill area of the region are now out of alignment. Further drawing on the original slice will show the same misregistration, where the outline and the fill area are not aligned. Further panning or zooming will produce unexpected results.

My guess is that we are missing some key bit of registration that needs to be performed as we switch slices. One other clue is that the order of operations 4 and 5 do not seem to matter - you can zoom, then switch, or switch, them zoom. Either way registration is lost.

[r03ert0]

I have the impression that the misalignment appears only in computers with Retina displays. Is that your case?

[rdvincent]

My machine is definitely not a true "Retina" display, but I don't know the exact resolution. I will try to reproduce it on some other platforms as I get a chance. It looks like an issue with paper.js.

[r03ert0]

try this in the console:

window.devicePixelRatio

In a retina display you get 2.
I think that I found a fix. The thing is that the width value as an attribute is not the same as the width value as a style (one is twice the other). I'll try to implement the fix and push it asap.

[r03ert0]

The misregistration issue disappears when this line is commented our in initAnnotationOverlay (around line 1080):

magicV = viewer.world.getItemAt(0).getContentSize().x;

@hspitzer : You explained me what that line did but I don't remember what it was. Could you explain again please?

[hspitzer]

This line gets the size of the currently opened tileSource and sets the resolution of the paper.js canvas accordingly (using the magicV). The getContententSize() function gets the size of the image in pixels.

I wanted to set the resolution of the canvas to always have the size of the underlying image, so that you can always take the annotations as pixel values. Especially if the image sizes change (when not using the big brain) this is very important.

However, if retina displays display pixels differently, it makes sense that this line might be the culprit for the misregistation.

[r03ert0]

Commit dcd4f9c fixes the mis-alignment bug. The main point was to comment out line 1080 in the initAnnotationOverlay function (it's still left in the code).
I changed the way in which the canvas elements are created to make sure that we get the right canvas. This wasn't the case in the previous version, which produced a bug were drawing was performed in an invisible canvas.
I also changed the updateRegionList function to use jquery and make sure that no extraneous regions are left from one slice to the other.