changeset 733:25f2898696a2 jquery

fixed setupZoomDrag
author robcast
date Tue, 01 Feb 2011 19:30:59 +0100
parents 55f2dd197ca9
children 609e5bf29d1a 790a7673bef0
files client/digitallibrary/jquery/dlGeometry.js client/digitallibrary/jquery/jquery.digilib.js
diffstat 2 files changed, 61 insertions(+), 41 deletions(-) [+]
line wrap: on
line diff
--- a/client/digitallibrary/jquery/dlGeometry.js	Tue Feb 01 16:30:38 2011 +0100
+++ b/client/digitallibrary/jquery/dlGeometry.js	Tue Feb 01 19:30:59 2011 +0100
@@ -48,6 +48,12 @@
             that.equals = function (other) {
                 return (this.x === other.x  &&  this.y === other.y);
             };
+            // add position other to this
+            that.add = function (other) {
+                this.x += other.x;
+                this.y += other.y;
+                return this;
+            };
             // returns new position that is the difference between this and other
             that.delta = function (other) {
                 return position(other.x - this.x, other.y - this.y);
@@ -56,6 +62,15 @@
             that.adjustDiv = function ($elem) {
                 $elem.offset({left : this.x, top : this.y});
             };
+            // returns distance of this position to pos (length if pos == null)
+            that.distance = function (pos) {
+                if (pos == null) {
+                    pos = {x : 0, y : 0};
+                }
+                var dx = pos.x - this.x;
+                var dy = pos.y - this.y;
+                return Math.sqrt(dx * dx + dy * dy);
+            };
             that.toString = function() {
                 return (this.x + "," + this.y);
             };
@@ -107,14 +122,15 @@
             that.getPt2 = function() {
                 return position(this.x + this.width, this.y + this.height);
             };
-            // sets the upper left corner to position pos
-            that.setPt1 = function(pos) {
+            // sets the upper left corner position to pos
+            that.setPosition = function(pos) {
                 this.x = pos.x;
                 this.y = pos.y;
                 return this;
             };
-            // adds pos to the upper left corner
-            that.addPt1 = function(pos) {
+            that.setPt1 = that.setPosition; // TODO: not really the same
+            // adds pos to the position
+            that.addPosition = function(pos) {
                 this.x += pos.x;
                 this.y += pos.y;
                 return this;
--- a/client/digitallibrary/jquery/jquery.digilib.js	Tue Feb 01 16:30:38 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js	Tue Feb 01 19:30:59 2011 +0100
@@ -1110,12 +1110,12 @@
             data.imgTrafo = getImgTrafo($img, data.zoomArea,
                     data.settings.rot, data.scalerFlags.hmir, data.scalerFlags.vmir);
             console.debug("imgTrafo=", data.imgTrafo);
-            // set scaler div size explicitly in case $img is hidden (for zoomDrag)
-            var $imgRect = geom.rectangle(data.$img);
-            console.debug("imgrect=", $imgRect);
-            $imgRect.adjustDiv(data.$scaler);
+            // adjust scaler div size
+            var imgRect = geom.rectangle(data.$img);
+            console.debug("imgrect=", imgRect);
+            imgRect.adjustDiv(data.$scaler);
             // show image in case it was hidden (for example in zoomDrag)
-            $img.show();
+            $img.css('visibility', 'visible');
             // display marks
             renderMarks(data);
             // TODO: digilib.showArrows(); // show arrow overlays for zoom navigation
@@ -1286,21 +1286,21 @@
         var $document = $(document);
         var startPos, newRect, birdImgRect, birdZoomRect;
 
+        // mousemove handler: drag
         var birdZoomMove = function(evt) {
-            // mousemove handler: drag
             var pos = geom.position(evt);
             var delta = startPos.delta(pos);
             // move birdZoom div, keeping size
             newRect = birdZoomRect.copy();
-            newRect.addPt1(delta);
+            newRect.addPosition(delta);
             // stay within birdimage
             newRect.stayInside(birdImgRect);
             newRect.adjustDiv($birdZoom);
             return false;
         };
 
+        // mouseup handler: reload page
         var birdZoomEndDrag = function(evt) {
-            // mouseup handler: reload page
             var settings = data.settings;
             $document.unbind("mousemove.dlBirdMove", birdZoomMove);
             $document.unbind("mouseup.dlBirdMove", birdZoomEndDrag);
@@ -1317,8 +1317,8 @@
             return false;
         };
 
+        // mousedown handler: start dragging bird zoom to a new position
         var birdZoomStartDrag = function(evt) {
-            // mousedown handler: start dragging bird zoom to a new position
             startPos = geom.position(evt);
             // position may have changed
             data.birdTrafo = getImgTrafo($birdImg, MAX_ZOOMAREA);
@@ -1343,22 +1343,17 @@
     };
 
     var setupZoomDrag = function(data) {
-    // setup handlers for dragging the zoomed image
-        var pt1, pt2;
-        var dx = 0;
-        var dy = 0;
+        // setup handlers for dragging the zoomed image
+        var startPos, delta;
+        var $document = $(document);
         var $elem = data.$elem;
         var $scaler = data.$scaler;
         var $img = data.$img;
 
+        // drag the image and load a new detail on mouse up
         var dragStart = function (evt) {
-        // drag the image and load a new detail on mouse up
-            // useless if not zoomed
-            if (isFullArea(data.zoomArea)) return false;
-            pt1 = geom.position(evt);
+            startPos = geom.position(evt);
             $imgRect = geom.rectangle($img);
-            // keep scaler div size while $img is hidden (for embedded mode)
-            $imgRect.adjustDiv($scaler); 
             // hide the scaler image, show it as background of div instead
             $scaler.css({
                 'background-image' : 'url(' + $img.attr('src') + ')',
@@ -1367,44 +1362,53 @@
                 'cursor' : 'move'
                 });
             $img.css('visibility', 'hidden');
-            $(document).bind("mousemove.digilib", dragMove);
-            $(document).bind("mouseup.digilib", dragEnd);
+            $document.bind("mousemove.dlZoomDrag", dragMove);
+            $document.bind("mouseup.dlZoomDrag", dragEnd);
             return false;
             };
 
+        // mousemove handler: drag zoomed image
         var dragMove = function (evt) {
-        // mousemove handler: drag zoomed image
             var pos = geom.position(evt);
-            dx = pos.x - pt1.x;
-            dy = pos.y - pt1.y;
+            delta = pos.delta(startPos);
             // move the background image to the new position
             $scaler.css({
-                'background-position' : dx + "px " + dy + "px"
+                'background-position' : (-delta.x) + "px " + (-delta.y) + "px"
                 });
             return false;
             };
 
+        // mouseup handler: reload zoomed image in new position
         var dragEnd = function (evt) {
-        // mouseup handler: reload zoomed image in new position
             $scaler.css({
                 'background-image' : 'none',
                 'cursor' : 'default'
                 });
-            $(document).unbind("mousemove.digilib", dragMove);
-            $(document).unbind("mouseup.digilib", dragEnd);
-            // calculate relative offset
-            if (dx === 0 && dy === 0) return false; // no movement
-            // reload with scaler image showing the new ausschnitt
-            // digilib.moveBy(x, y);
-            var pos = geom.position(-dx, -dy);
-            var newPos = data.imgTrafo.invtransform(pos);
-            var newArea = data.zoomArea.setPt1(newPos);
+            $document.unbind("mousemove.dlZoomDrag", dragMove);
+            $document.unbind("mouseup.dlZoomDrag", dragEnd);
+            if (delta == null || delta.distance() < 2) {
+                // no movement
+                $img.css('visibility', 'visible');
+                return false; 
+            }
+            // get old zoom area (screen coordinates)
+            var za = data.imgTrafo.transform(data.zoomArea);
+            // move
+            za.addPosition(delta);
+            // transform back
+            var newArea = data.imgTrafo.invtransform(za);
             data.zoomArea = MAX_ZOOMAREA.fit(newArea);
             redisplay(data);
             return false;
             };
-
-        $scaler.bind("mousedown.digilib", dragStart);
+            
+        // clear old handler
+        $document.unbind(".dlZoomDrag");
+        $scaler.unbind(".dlBirdMove");
+        if (! isFullArea(data.zoomArea)) {
+            // set new handler
+            $scaler.bind("mousedown.dlZoomDrag", dragStart);
+        }
     };
 
     // get image quality as a number (0..2)