changeset 730:fec653a3094e jquery

better birdMoveArea, now called setupBirdDrag.
author robcast
date Tue, 01 Feb 2011 16:03:57 +0100
parents 84ad95fd3202
children d69a72e8562f
files client/digitallibrary/jquery/dlGeometry.js client/digitallibrary/jquery/jquery.digilib.js
diffstat 2 files changed, 61 insertions(+), 45 deletions(-) [+]
line wrap: on
line diff
--- a/client/digitallibrary/jquery/dlGeometry.js	Tue Feb 01 12:46:22 2011 +0100
+++ b/client/digitallibrary/jquery/dlGeometry.js	Tue Feb 01 16:03:57 2011 +0100
@@ -45,9 +45,17 @@
                         y : parseFloat(y)
                 };
             }
-            that.equals = function(other) {
+            that.equals = function (other) {
                 return (this.x === other.x  &&  this.y === other.y);
             };
+            // 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);
+            };
+            // adjusts position $elem to this position
+            that.adjustDiv = function ($elem) {
+                $elem.offset({left : this.x, top : this.y});
+            };
             that.toString = function() {
                 return (this.x + "," + this.y);
             };
@@ -105,24 +113,30 @@
                 this.y = pos.y;
                 return this;
             };
+            // adds pos to the upper left corner
+            that.addPt1 = function(pos) {
+                this.x += pos.x;
+                this.y += pos.y;
+                return this;
+            };
+            // sets the lower right corner to position pos
             that.setPt2 = function(pos) {
-                // sets the lower right corner to position pos
                 this.width = pos.x - this.x;
                 this.height = pos.y - this.y;
                 return this;
             };
+            // returns the center position of this Rectangle
             that.getCenter = function() {
-                // returns the center position of this Rectangle
                 return position(this.x + this.width / 2, this.y + this.height / 2);
             };
+            // moves this Rectangle's center to position pos
             that.setCenter = function(pos) {
-                // moves this Rectangle's center to position pos
                 this.x = pos.x - this.width / 2;
                 this.y = pos.y - this.height / 2;
                 return this;
             };
+            // returns the size of this Rectangle
             that.getSize = function() {
-                // returns the size of this Rectangle
                 return size(this.width, this.height);
             };
             that.equals = function(other) {
@@ -131,12 +145,12 @@
                         this.width === other.width);
                 return eq;
             };
+            // returns the area of this Rectangle
             that.getArea = function() {
-                // returns the area of this Rectangle
                 return (this.width * this.height);
             };
+            // eliminates negative width and height
             that.normalize = function() {
-                // eliminates negative width and height
                 var p = this.getPt2();
                 this.x = Math.min(this.x, p.x);
                 this.y = Math.min(this.y, p.y);
@@ -144,19 +158,19 @@
                 this.height = Math.abs(this.height);
                 return this;
             };
+            // returns if Position "pos" lies inside of this rectangle
             that.containsPosition = function(pos) {
-                // returns if Position "pos" lies inside of this rectangle
                 var ct = ((pos.x >= this.x) && (pos.y >= this.y) && 
                         (pos.x <= this.x + this.width) && (pos.y <= this.y + this.height));
                 return ct;
             };
+            // returns if rectangle "rect" is contained in this rectangle
             that.containsRect = function(rect) {
-                // returns if rectangle "rect" is contained in this rectangle
                 return (this.containsPosition(rect.getPt1()) && this.containsPosition(rect.getPt2()));
             };
+            // changes this rectangle's x/y values so it stays inside of rectangle rect
+            // keeping the proportions
             that.stayInside = function(rect) {
-                // changes this rectangle's x/y values so it stays inside of rectangle rect
-                // keeping the proportions
                 if (this.x < rect.x) {
                     this.x = rect.x;
                 }
@@ -171,8 +185,8 @@
                 }
                 return this;
             };
+            // clips this rectangle so it stays inside of rectangle rect
             that.clipTo = function(rect) {
-                // clips this rectangle so it stays inside of rectangle rect
                 var p1 = rect.getPt1();
                 var p2 = rect.getPt2();
                 var this2 = this.getPt2();
@@ -180,8 +194,8 @@
                 this.setPt2(position(Math.min(this2.x, p2.x), Math.min(this2.y, p2.y)));
                 return this;
             };
+            // returns the intersection of the given Rectangle and this one
             that.intersect = function(rect) {
-                // returns the intersection of the given Rectangle and this one
                 // FIX ME: not really, it should return null if there is no overlap 
                 var sec = rect.copy();
                 if (sec.x < this.x) {
@@ -200,8 +214,8 @@
                 }
                 return sec;
             };
+            // returns a Rectangle that fits into this one (by moving first)
             that.fit = function(rect) {
-                // returns a Rectangle that fits into this one (by moving first)
                 var sec = rect.copy();
                 sec.x = Math.max(sec.x, this.x);
                 sec.y = Math.max(sec.y, this.x);
--- a/client/digitallibrary/jquery/jquery.digilib.js	Tue Feb 01 12:46:22 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js	Tue Feb 01 16:03:57 2011 +0100
@@ -985,6 +985,8 @@
         } else {
             // re-render
             renderBirdArea(data);
+            // enable click and drag
+            birdMoveArea(data);
         }
     };
     
@@ -1164,6 +1166,8 @@
         } else {
             $birdZoom.show();
         }
+        // position may have changed
+        data.birdTrafo = getImgTrafo(data.$birdImg, MAX_ZOOMAREA);
         var indRect = data.birdTrafo.transform(zoomArea);
         var coords = {
             left : indRect.x-2, // acount for frame width
@@ -1279,45 +1283,36 @@
     var birdMoveArea = function(data) {
         var $birdImg = data.$birdImg;
         var $birdZoom = data.$birdZoom;
+        var $document = $(document);
         var startPos, newRect, birdImgRect, birdZoomRect;
 
         var birdZoomMove = function(evt) {
             // mousemove handler: drag
             var pos = geom.position(evt);
-            var dx = pos.x - startPos.x;
-            var dy = pos.y - startPos.y;
+            var delta = startPos.delta(pos);
             // move birdZoom div, keeping size
-            newRect = geom.rectangle(
-                birdZoomRect.x + dx,
-                birdZoomRect.y + dy,
-                birdZoomRect.width,
-                birdZoomRect.height);
+            newRect = birdZoomRect.copy();
+            newRect.addPt1(delta);
             // stay within birdimage
             newRect.stayInside(birdImgRect);
-            $birdZoom.offset({left : newRect.x, top : newRect.y});
-            // $birdZoom.show();
+            newRect.adjustDiv($birdZoom);
             return false;
         };
 
         var birdZoomEndDrag = function(evt) {
             // mouseup handler: reload page
             var settings = data.settings;
-            $(document).unbind("mousemove.digilib", birdZoomMove);
-            $(document).unbind("mouseup.digilib", birdZoomEndDrag);
-            $birdZoom.unbind("mousemove.digilib", birdZoomMove);
-            $birdZoom.unbind("mouseup.digilib", birdZoomEndDrag);
-            if (newRect == null) { // no movement happened
+            $document.unbind("mousemove.dlBirdMove", birdZoomMove);
+            $document.unbind("mouseup.dlBirdMove", birdZoomEndDrag);
+            $birdZoom.unbind("mousemove.dlBirdMove", birdZoomMove);
+            $birdZoom.unbind("mouseup.dlBirdMove", birdZoomEndDrag);
+            if (newRect == null) { 
+                // no movement happened - set center to click position
                 startPos = birdZoomRect.getCenter();
-                birdZoomMove(evt); // set center to click position
+                birdZoomMove(evt); 
                 }
-            if (data.zoomArea) {
-                // should always be true
-                var x = cropFloat((newRect.x - birdImgRect.x + 2) / birdImgRect.width);
-                var y = cropFloat((newRect.y - birdImgRect.y + 2) / birdImgRect.height);
-                data.zoomArea.x = x;
-                data.zoomArea.y = y;
-                }
-            settings.ws = 1; // zoomed is always fit
+            var newArea = data.birdTrafo.invtransform(newRect);
+            data.zoomArea = newArea;
             redisplay(data);
             return false;
         };
@@ -1325,17 +1320,24 @@
         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);
             birdImgRect = geom.rectangle($birdImg);
             birdZoomRect = geom.rectangle($birdZoom);
-            $(document).bind("mousemove.digilib", birdZoomMove);
-            $(document).bind("mouseup.digilib", birdZoomEndDrag);
-            $birdZoom.bind("mousemove.digilib", birdZoomMove);
-            $birdZoom.bind("mouseup.digilib", birdZoomEndDrag);
+            $document.bind("mousemove.dlBirdMove", birdZoomMove);
+            $document.bind("mouseup.dlBirdMove", birdZoomEndDrag);
+            $birdZoom.bind("mousemove.dlBirdMove", birdZoomMove);
+            $birdZoom.bind("mouseup.dlBirdMove", birdZoomEndDrag);
             return false;
         };
-
-        $birdImg.bind("mousedown.digilib", birdZoomStartDrag);
-        $birdZoom.bind("mousedown.digilib", birdZoomStartDrag);
+        
+        // clear old handler
+        $document.unbind(".dlBirdMove");
+        $birdImg.unbind(".dlBirdMove");
+        $birdZoom.unbind(".dlBirdMove");
+        // set new handler
+        $birdImg.bind("mousedown.dlBirdMove", birdZoomStartDrag);
+        $birdZoom.bind("mousedown.dlBirdMove", birdZoomStartDrag);
     };
 
     var setupZoomDrag = function(data) {
@@ -1362,7 +1364,7 @@
                 'background-position' : 'top left',
                 'cursor' : 'move'
                 });
-            $img.hide(); 
+            $img.css('visibility', 'hidden');
             $(document).bind("mousemove.digilib", dragMove);
             $(document).bind("mouseup.digilib", dragEnd);
             return false;