Mercurial > hg > digilib-old
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;