use proper line geometry

webapp/src/main/webapp/jquery/jquery.digilib.geometry.js

@@ -121,8 +121,13 @@
         };
         // add position other to this
         that.add = function(other) {
-            this.x += other.x;
-            this.y += other.y;
+            if ($.isArray(other)) {
+                this.x += other[0];
+                this.y += other[1];
+            } else {
+                this.x += other.x;
+                this.y += other.y;
+            }
             return this;
         };
         // returns negative position
@@ -195,6 +200,70 @@
         };
         return that;
     };
+
+    /*
+     * Line class (for on-screen geometry)
+     */
+    var line = function(p, q) {
+        var that = { // definition point
+            x: p.x,
+            y: p.y
+            };
+        if (q.x != null) {
+            that.dx = q.x - that.x;
+            that.dy = q.y - that.y;
+        } else if ($.isArray(q)) {
+            that.dx = q[0]+0;
+            that.dy = q[1]+0;
+        } else if (q === 0) {
+            that.dx = 0;
+            that.dy = 1;
+        } else if (q === Infinity) {
+            that.dx = 1;
+            that.dy = 0;
+        } else if (q === -Infinity) {
+            that.dx = -1;
+            that.dy = 0;
+        } else if (typeof q === 'number' && isFinite(q)) {
+            that.dx = 1;
+            that.dy = 1/q;
+        } else {
+            that.dx = 1;
+            that.dy = 1;
+        }
+        that.ratio = that.dx/that.dy; // slope
+
+        // return a copy
+        that.copy = function() {
+            return line(position(this.x, this.y), this.ratio);
+        };
+        // return orthogonal line
+        that.orthogonal = function() {
+            return (this.ratio === Infinity || this.ratio === -Infinity)
+                ? line(position(this.x, this.y), 0)
+                : line(position(this.x, this.y), [-this.dy, this.dx]);
+        };
+        // return a point (position) by adding a vector to the definition point
+        that.add = function(q) {
+            return $.isArray(q)
+                ? position(this.x + q[0], this.y + q[1])
+                : position(this.x + q.x, this.y + q.y);
+        };
+        // point on line
+        that.point = function(factor) {
+            return position(this.x + factor*this.dx, this.y + factor*this.dy)
+        };
+        // intersection point with other line
+        that.intersection = function(other) {
+            var det = this.dy*other.dx - this.dx*other.dy
+            if (det === 0) { // parallel
+                return null; }
+            var c = this.dx*(other.y - this. y) + this.dy*(this.x - other.x);
+            return other.point(c/det);
+        };
+        return that;
+    };
+
     /*
      * Rectangle class
      */
@@ -588,6 +657,7 @@
     var geometry = {
             size : size,
             position : position,
+            line : line,
             rectangle : rectangle,
             transform : transform
     };

webapp/src/main/webapp/jquery/jquery.digilib.measure.js

@@ -1177,7 +1177,6 @@
             console.error("No SVG factory found: jquery.digilib.vector not loaded?");
             return;
             }
-        var trafo = data.imgTrafo;
         factory['Proportion'] = function (shape) {
             var $s = factory['LineString'](shape);
             shape.properties.maxvtx = 3;
@@ -1185,24 +1184,22 @@
             };
         factory['Rect'] = function (shape) {
             var $s = factory['Polygon'](shape);
+            var trafo = data.imgTrafo;
             var props = shape.properties;
             props.maxvtx = 3;
             $s.place = function () {
                 var p = props.screenpos;
+                var g = shape.geometry;
                 var vtx = props.vtx;
                 if (vtx > 1 || p.length > 2) {
-                    var dx = p[2].x - p[1].x;
-                    var dy = p[1].y - p[2].y
-                    var d = p[0].delta(p[1]);
-                    var ratio = d.x/d.y;
-                    var inv = d.y/d.x;
-                    var z = Math.abs(d.y) > Math.abs(d.x)
-                        ? geom.position(dx, ratio * -dx)
-                        : geom.position(inv * dy, -dy);
-                    p[2] = p[1].copy().add(z);
-                    p[3] = p[0].copy().add(z);
-                    shape.geometry.coordinates[2] = data.imgTrafo.invtransform(p[2]).toArray();
-                    shape.geometry.coordinates[3] = data.imgTrafo.invtransform(p[3]).toArray();
+                    var d = p[0].delta(p[1]).toArray();
+                    var line1 = geom.line(p[0], d);
+                    var line2 = geom.line(p[2], d); // parallel (same slope)
+                    var orth = line1.orthogonal();
+                    p[3] = orth.intersection(line2);
+                    p[2] = p[3].copy().add(d);
+                    g.coordinates[2] = trafo.invtransform(p[2]).toArray();
+                    g.coordinates[3] = trafo.invtransform(p[3]).toArray();
                     }
                 this.attr({'points': p.join(" ")});
                 };