update to viewport coordinates to support multiple images (warning: b…

…reaking changes if your coordinates are dependant on image size)
altert · Jul 24, 2017 · 19767f5 · 19767f5
1 parent 9baa560
commit 19767f5
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 27 deletions.
diff --git a/changelog.txt b/changelog.txt
@@ -2,6 +2,10 @@ OPENSEADRAGON FABRICJS OVERLAY CHANGELOG
 ======================================
 
 
+0.2.0:
+
+* BREAKING CHANGE: switching to Viewport coordinates from image cooridnates, that way multiple images is supported
+
 0.1.0:
 
 * Multiple overlays support

diff --git a/demo.html b/demo.html
@@ -7,7 +7,7 @@
 
 
         <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
-        <script src="fabric/fabric.min.js"></script>
+        <script src="fabric/fabric.adapted.js"></script>
         <style type="text/css">
 
             html,
@@ -40,15 +40,33 @@
                             }
                         }
                     };
+                    var tileSourceIIIF = {
+                        "@context": "http://iiif.io/api/image/2/context.json",
+                        "@id": "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000001.jp2",
+                        "height": 7200,
+                        "width": 5233,
+                        "profile": [ "http://iiif.io/api/image/2/level2.json" ],
+                        "protocol": "http://iiif.io/api/image",
+                        "tiles": [{
+                          "scaleFactors": [ 1, 2, 4, 8, 16, 32 ],
+                          "width": 1024
+                        }]
+                    };
 
                     this.viewer = OpenSeadragon({
                         id: "contentDiv",
                         prefixUrl: "openseadragon/images/",
                         tileSources: [{
                             tileSource: tileSource,
-                            width: 2,
+                            width: 1,
                             y: 0,
                             x: 0
+                        },
+                        {
+                            tileSource: tileSourceIIIF,
+                            width: 1,
+                            y: 0,
+                            x: 1.1
                         }]
                     });
 
@@ -62,19 +80,19 @@
                       left: 0,
                       top: 0,
                       fill: 'red',
-                      width: 1000,
-                      height: 1000
+                      width: 200,
+                      height: 200
                     });
 
                     overlay.fabricCanvas().add(rect);
 
                     // add fabric circle
 
                     var circle = new fabric.Circle({
-                       left: 6000,
-                       top: 300,
+                       left: overlay.fabricCanvas().width*2-200,
+                       top: 0,
                        fill: 'green',
-                       radius: 300,
+                       radius: 100,
                        selectable: true,
                        action: 'gravity'
                      });
@@ -83,7 +101,7 @@
 
                     // create circle falling animation
 
-                    circle.animate('top', '+=8400', {
+                    circle.animate('top', '+='+(overlay.fabricCanvas().height+530), {
                       onChange: overlay.fabricCanvas().renderAll.bind(overlay.fabricCanvas()),
                       duration: 2000,
                       easing: fabric.util.ease.easeOutBounce
@@ -98,9 +116,9 @@
 
                     overlay.fabricCanvas().on('mouse:up', function (options) {
                         if (options.target&&(options.target.action=='gravity')) {
-                           delta=9300-2*(options.target.radius*options.target.scaleY)-options.target.top;
+                           delta=overlay.fabricCanvas().height-options.target.top;
                            if (delta>0) {
-                               circle.animate('top', '+='+delta, {
+                               circle.animate('top', '+='+(delta+550), {
                                  onChange: overlay.fabricCanvas().renderAll.bind(overlay.fabricCanvas()),
                                  duration: 2000,
                                  easing: fabric.util.ease.easeOutBounce
@@ -117,10 +135,10 @@
                     // add fabric circle with text
 
                     var circle2 = new fabric.Circle({
-                       left: 3000,
-                       top: 245,
+                       left: overlay.fabricCanvas().width-60,
+                       top: 100,
                        fill: 'lightgray',
-                       radius: 330,
+                       radius: 120,
                        selectable: false,
                        action: 'button'
                      });
@@ -129,9 +147,9 @@
 
 
                      var text = new fabric.Text('Start\n drawing', {
-                        left: 3070,
-                        top: 410,
-                        fontSize: 130,
+                        left: overlay.fabricCanvas().width-40,
+                        top: 150,
+                        fontSize: 50,
                         fontFamily: 'Helvetica',
                         textAlign: 'center',
                         fill: 'black',

diff --git a/openseadragon-fabricjs-overlay.js b/openseadragon-fabricjs-overlay.js
@@ -52,7 +52,7 @@
         // prevent OSD click elements on fabric objects
         this._fabricCanvas.on('mouse:down', function (options) {
             if (options.target) {
-              
+
                 options.e.preventDefaultAction = true;
                 options.e.preventDefault();
                 options.e.stopPropagation();
@@ -74,7 +74,7 @@
             self.resizecanvas();
         });
 
-        this.resize();
+
     };
 
     // ----------
@@ -109,16 +109,12 @@
 
            var origin = new OpenSeadragon.Point(0, 0);
            var viewportZoom = this._viewer.viewport.getZoom(true);
-           var image1 = this._viewer.world.getItemAt(0);
-           var zoom = image1.viewportToImageZoom(viewportZoom);
-
            this._fabricCanvas.setWidth(this._containerWidth);
            this._fabricCanvas.setHeight(this._containerHeight);
-           this._fabricCanvas.setZoom(zoom);
-
-           var image1WindowPoint = image1.imageToWindowCoordinates(origin);
-           var x=Math.round(image1WindowPoint.x);
-           var y=Math.round(image1WindowPoint.y);
+           this._fabricCanvas.setZoom(viewportZoom);
+           var viewportWindowPoint = this._viewer.viewport.viewportToWindowCoordinates(origin);
+           var x=Math.round(viewportWindowPoint.x);
+           var y=Math.round(viewportWindowPoint.y);
            var canvasOffset=this._canvasdiv.getBoundingClientRect();
 
            var pageScroll = OpenSeadragon.getPageScroll();

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "openseadragon-fabricjs-overlay",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "description": "An OpenSeadragon plugin that adds fabricjs canvas overlay capability.",
   "main": "openseadragon-fabricjs-overlay.js",
   "dependencies": {
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,10 @@ OPENSEADRAGON FABRICJS OVERLAY CHANGELOG @@
     ======================================
+.2.0:
+    * BREAKING CHANGE: switching to Viewport coordinates from image cooridnates, that way multiple images is supported
 .1.0:
     * Multiple overlays support
@@ Expand Down @@