# HG changeset patch
# User robcast
# Date 1295974056 -3600
# Node ID 7f7536a5b6d9ef07423f1da3ae73419ba08dd7c7
# Parent  a53c3e12995ab3965533915734588d3827637d27
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

diff -r a53c3e12995a -r 7f7536a5b6d9 client/digitallibrary/jquery/dlGeometry.js
--- 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 = '[';
diff -r a53c3e12995a -r 7f7536a5b6d9 client/digitallibrary/jquery/jquery.digilib.js
--- 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;
         };