Mercurial > hg > digilib-old

changeset 672:7f7536a5b6d9 jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
image transform works now under rotation!!! (at least for multiples of 90deg) rectangle has adjustDiv to postition and size a jQuery object rectangle constructor with two positions always returns a rectangle with positive width
author robcast
date Tue, 25 Jan 2011 17:47:36 +0100
parents a53c3e12995a
children 6ca57779e740
files client/digitallibrary/jquery/dlGeometry.js client/digitallibrary/jquery/jquery.digilib.js
diffstat 2 files changed, 33 insertions(+), 61 deletions(-) [+]
line wrap: on
line diff
--- a/client/digitallibrary/jquery/dlGeometry.js	Tue Jan 25 11:01:45 2011 +0100
+++ b/client/digitallibrary/jquery/dlGeometry.js	Tue Jan 25 17:47:36 2011 +0100
@@ -71,10 +71,10 @@
                 } else {
                     // assume x and y are Position
                     that = {
-                            x : x.x,
-                            y : x.y,
-                            width : y.x - x.x,
-                            height : y.y - x.y
+                            x : Math.min(x.x, y.x),
+                            y : Math.min(x.y, y.y),
+                            width : Math.abs(y.x - x.x),
+                            height : Math.abs(y.y - x.y)
                     };
                 }
             } else {
@@ -213,6 +213,11 @@
                 }
                 return sec.intersect(this);
             };
+            // adjusts position and size of $elem to this rectangle
+            that.adjustDiv = function ($elem) {
+                $elem.offset({left : this.x, top : this.y});
+                $elem.width(this.width).height(this.height);
+            };
             that.toString = function() {
                 return this.width+"x"+this.height+"@"+this.x+","+this.y;
             };
@@ -239,50 +244,45 @@
             if (spec) {
                 jQuery.extend(that, spec);
             };
-            that.concat = function(traf) {
-                // add Transform traf to this Transform
+            that.concat = function(trafA) {
+                // add Transform trafA to this Transform (i.e. this = trafC = trafA * this)
+                var trafC = {};
                 for (var i = 0; i < 3; i++) {
                     for (var j = 0; j < 3; j++) {
                         var c = 0.0;
                         for (var k = 0; k < 3; k++) {
-                            c += traf["m"+i+k] * this["m"+k+j];
-                            //c += this["m"+i.toString()+k.toString()] * traf["m"+k.toString()+j.toString()];
+                            c += trafA["m"+i+k] * this["m"+k+j];
                         }
-                        this["m"+i+j] = c;
+                        trafC["m"+i+j] = c;
                     }
                 }
+                jQuery.extend(this, trafC);
                 return this;
             };
             that.transform = function(rect) {
                 // returns transformed Rectangle or Position with this Transform applied
                 var x = this.m00 * rect.x + this.m01 * rect.y + this.m02;
                 var y = this.m10 * rect.x + this.m11 * rect.y + this.m12;
+                var pt = position(x, y);
                 if (rect.width) {
-                    // transform the other corner points
-                    var pt2 = rect.getPt2();
-                    var x2 = this.m00 * pt2.x + this.m01 * pt2.y + this.m02;
-                    var y2 = this.m10 * pt2.x + this.m11 * pt2.y + this.m12;
-                    var width = x2 - x;
-                    var height = y2 - y;
-                    return rectangle(x, y, width, height);
+                    // transform the other corner point
+                    var pt2 = this.transform(rect.getPt2());
+                    return rectangle(pt, pt2);
                 }
-                return position(x, y);
+                return pt;
             };
             that.invtransform = function(rect) {
                 // returns transformed Rectangle or Position with the inverse of this Transform applied
                 var det = this.m00 * this.m11 - this.m01 * this.m10;
                 var x = (this.m11 * rect.x - this.m01 * rect.y - this.m11 * this.m02 + this.m01 * this.m12) / det;
-                var y = (- this.m10 * rect.x + this.m00 * rect.y + this.m10 * this.m02 - this.m00 * this.m12) / det;
+                var y = (-this.m10 * rect.x + this.m00 * rect.y + this.m10 * this.m02 - this.m00 * this.m12) / det;
+                var pt = position(x, y);
                 if (rect.width) {
-                    // transform the other corner points
-                    var pt2 = rect.getPt2();
-                    var x2 = (this.m11 * pt2.x - this.m01 * pt2.y - this.m11 * this.m02 + this.m01 * this.m12) / det;
-                    var y2 = (- this.m10 * pt2.x + this.m00 * pt2.y + this.m10 * this.m02 - this.m00 * this.m12) / det;
-                    var width = x2 - x;
-                    var height = y2 - y;
-                    return rectangle(x, y, width, height);
+                    // transform the other corner point
+                    var pt2 = this.invtransform(rect.getPt2());
+                    return rectangle(pt, pt2);
                 }
-                return position(x, y);
+                return pt;
             };
             that.toString = function (pretty) {
                 var s = '[';
--- a/client/digitallibrary/jquery/jquery.digilib.js	Tue Jan 25 11:01:45 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js	Tue Jan 25 17:47:36 2011 +0100
@@ -672,7 +672,7 @@
         var $buttonsDiv = $('<div class="buttons"></div>');
         $elem.append($buttonsDiv);
         var mode = settings.interactionMode;
-        var buttonSettings = settings.buttonSettings[mode]
+        var buttonSettings = settings.buttonSettings[mode];
         var actionNames = buttonSettings[actionGroup];
         for (var i = 0; i < actionNames.length; i++) {
             var actionName = actionNames[i];
@@ -734,9 +734,6 @@
         $birdDiv.append($birdzoomDiv);
         $birdDiv.append($birdImg);
         $birdzoomDiv.css(data.settings.birdIndicatorStyle);
-        // $birdzoomDiv.offset($birdDiv.offset());
-        // $birdzoomDiv.width($birdDiv.width());
-        // $birdzoomDiv.height($birdDiv.height());
         data.$birdDiv = $birdDiv;
         data.$birdImg = $birdImg;
         $birdImg.load(birdImgLoadedHandler(data));
@@ -800,26 +797,13 @@
         if (data) {
             /* var rot = trafo.getRotationAround(parseFloat(data.settings.rot), 
                     geom.position(0.5 * area.width + area.x, 0.5 * area.height + area.y)); */
-            var rot = trafo.getRotation(parseFloat(data.settings.rot));
-            var trans1 = trafo.getTranslation(geom.position(-0.5 * area.width + area.x, -0.5 * area.height + area.y));
-            var trans2 = trafo.getTranslation(geom.position(0.5 * area.width + area.x, 0.5 * area.height + area.y));
-            trafo.concat(trans1);
+            var rot = trafo.getRotationAround(parseFloat(data.settings.rot), 
+                    geom.position(0.5, 0.5));
             trafo.concat(rot);
-            trafo.concat(trans2);
         }
         // scale to screen position and size
         trafo.concat(trafo.getScale(picrect));
         trafo.concat(trafo.getTranslation(picrect));
-        /* if (data && data.settings.rot) {
-            var rot = trafo.getRotationAround(-data.settings.rot, 
-                    geom.position(0.5 * picrect.width + picrect.x, 0.5 * picrect.height + picrect.y));
-            //var trans1 = trafo.getTranslation(geom.position(-0.5*picrect.width, -0.5*picrect.height));
-            //var rot = trafo.getRotation(data.settings.rot);
-            //var trans2 = trafo.getTranslation(geom.position(0.5*picrect.width, 0.5*pirect.height));
-            //trafo.concat(trans1);
-            trafo.concat(rot);
-            //trafo.concat(trans2);
-        } */
         return trafo;
     };
     
@@ -895,7 +879,8 @@
         // nice animation for embedded mode :-)
         var makeCompleteFunction = function($ind, normalSize) {
             return function() { 
-                if (normalSize) $ind.hide(); }
+                if (normalSize) $ind.hide(); 
+                };
             };
         var opts = {
             'complete' : makeCompleteFunction($ind, normalSize)
@@ -922,12 +907,10 @@
     // add a mark where clicked
     var setMark = function (data) {
         var $scaler = data.$scaler;
-        console.debug("setmark");
         // start event capturing
         $scaler.one('click.digilib', function (evt) {
             // event handler adding a new mark
-            console.debug("setmark.click evt=",evt);
-            var mpos = geom.position(evt.pageX, evt.pageY);
+            var mpos = geom.position(evt);
             var pos = data.imgTrafo.invtransform(mpos);
             data.marks.push(pos);
             redisplay(data);
@@ -942,17 +925,10 @@
         var $zoomDiv = $('<div class="zoomrect" style="display:none"/>');
         $elem.append($zoomDiv);
         $zoomDiv.css(data.settings.zoomrectStyle);
-        //var overlay = getElement("overlay");
-        // use overlay div to avoid <img> mousemove problems
         var picRect = geom.rectangle($scaler);
         // FIX ME: is there a way to query the border width from CSS info?
         // rect.x -= 2; // account for overlay borders
         // rect.y -= 2;
-        //moveElement(overlay, picRect);
-        //showElement(overlay, true);
-        // start event capturing
-        //registerEvent("mousedown", overlay, zoomStart);
-        //registerEvent("mousedown", this.scalerImg, zoomStart);
 
         var zoomStart = function (evt) {
             pt1 = geom.position(evt);
@@ -972,8 +948,6 @@
             pt2 = geom.position(evt);
             // assume a click and continue if the area is too small
             var clickRect = geom.rectangle(pt1, pt2);
-            clickRect.normalize();
-            console.debug("clickRect.getArea()=",clickRect.getArea());
             if (clickRect.getArea() <= 5) {
                 return false;
             }
@@ -996,11 +970,9 @@
         var zoomMove = function (evt) {
             pt2 = geom.position(evt);
             var rect = geom.rectangle(pt1, pt2);
-            rect.normalize();
             rect.clipTo(picRect);
             // update zoom div
-            $zoomDiv.offset({left : rect.x, top : rect.y});
-            $zoomDiv.width(rect.width).height(rect.height);
+            rect.adjustDiv($zoomDiv);
             return false;
         };