# HG changeset patch # User robcast # Date 1296585059 -3600 # Node ID 25f2898696a2a7a211a5cb7ae3ec8ff3a18fd77d # Parent 55f2dd197ca996b2390910f8c107ff97a630772f fixed setupZoomDrag diff -r 55f2dd197ca9 -r 25f2898696a2 client/digitallibrary/jquery/dlGeometry.js --- 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; diff -r 55f2dd197ca9 -r 25f2898696a2 client/digitallibrary/jquery/jquery.digilib.js --- 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)