Mercurial > hg > digilib

changeset 1359:647bd1686fa6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
added Rect shape (rectangle drawn from a base line)
author hertzhaft
date Sun, 15 Feb 2015 19:54:46 +0100
parents 23ea5ccda21a
children 4fc016838175
files webapp/src/main/webapp/jquery/jquery.digilib.geometry.js webapp/src/main/webapp/jquery/jquery.digilib.measure.js webapp/src/main/webapp/jquery/jquery.digilib.vector.js
diffstat 3 files changed, 52 insertions(+), 17 deletions(-) [+]
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery.digilib.geometry.js	Sun Feb 15 16:09:50 2015 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.geometry.js	Sun Feb 15 19:54:46 2015 +0100
@@ -175,9 +175,14 @@
                 top : this.y
             };
         };
+        // return as string
         that.toString = function() {
             return (this.x + "," + this.y);
         };
+        // return as array
+        that.toArray = function() {
+            return [this.x, this.y];
+        };
         return that;
     };
     /*
--- a/webapp/src/main/webapp/jquery/jquery.digilib.measure.js	Sun Feb 15 16:09:50 2015 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.measure.js	Sun Feb 15 19:54:46 2015 +0100
@@ -710,7 +710,7 @@
         // color of selected objects
         selectColor : 'red',
         // implemented measuring shape types, for select widget
-        implementedShapes : ['Line', 'LineString', 'Proportion', 'Rectangle', 'Polygon', 'Circle', 'Ellipse'],
+        implementedShapes : ['Line', 'LineString', 'Proportion', 'Rect', 'Rectangle', 'Polygon', 'Circle', 'Ellipse'],
         // all measuring shape types
         shapeInfo : {
             Line :       { name : 'line',           display : 'length', },
@@ -969,15 +969,15 @@
     var newShape = function(data) {
         var shapeType = getActiveShapeType(data);
         return {
-            geometry : {
-                type : shapeType
+            'geometry' : {
+                'type' : shapeType
                 },
-            properties : {
-                stroke : getSelectedStroke(data),
-                editable : true,
-                cssclass : shapeClass(shapeType),
-                center : data.settings.drawFromCenter,
-                selected : false
+            'properties' : {
+                'editable' : true,
+                'selected' : false,
+                'stroke' : getSelectedStroke(data),
+                'cssclass' : shapeClass(shapeType)
+                // 'center' : data.settings.drawFromCenter
                 }
             };
         };
@@ -1179,11 +1179,34 @@
             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;
             return $s;
-            }
+            };
+        factory['Rect'] = function (shape) {
+            var $s = factory['Polygon'](shape);
+            var props = shape.properties;
+            props.maxvtx = 3;
+            $s.place = function () {
+                var p = props.screenpos;
+                var vtx = props.vtx;
+                if (vtx > 1 || p.length > 2) {
+                    var pv = p[2];
+                    var pd = geom.position(p[1].x - p[0].x, p[1].y - p[0].y);
+                    var pe = (Math.abs(pd.y) > Math.abs(pd.x))
+                        ? geom.position(pv.x - p[1].x, pd.x/pd.y * (pv.x - p[1].x))
+                        : geom.position(pd.y/pd.x * (p[1].y - pv.y), p[1].y - pv.y);
+                    p[2] = geom.position(p[1].x + pe.x, p[1].y - pe.y);
+                    p[3] = geom.position(p[0].x + pe.x, p[0].y - pe.y);
+                    shape.geometry.coordinates[2] = data.imgTrafo.invtransform(p[2]).toArray();
+                    shape.geometry.coordinates[3] = data.imgTrafo.invtransform(p[3]).toArray();
+                    }
+                this.attr({'points': p.join(" ")});
+                };
+            return $s;
+            };
         };
 
     // set up a div for accessing the measuring functionality
--- a/webapp/src/main/webapp/jquery/jquery.digilib.vector.js	Sun Feb 15 16:09:50 2015 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.vector.js	Sun Feb 15 19:54:46 2015 +0100
@@ -479,8 +479,12 @@
         $.each(coords, createHandle);
         // vertexElems must be defined before calling getVertexDragHandler()
         shape.$vertexElems = handles;
+        var done = function (data, shape, evt) {
+            unrenderShape(data, shape);
+            renderShape(data, shape, layer);
+            }
         var attachEvent = function (i, item) {
-            item.one("mousedown.dlVertexDrag", getVertexDragHandler(data, shape, i));
+            item.one("mousedown.dlVertexDrag", getVertexDragHandler(data, shape, i, done));
             };
         $.each(handles, attachEvent);
     };
@@ -592,15 +596,14 @@
             pt.clipTo(imgRect);
             shape.properties.screenpos[vtx] = pt;
             $(data).trigger('positionShape', shape);
-            $handle.moveTo(pt);
             if (isSupported(data, shapeType)) {
                 // update shape object and trigger drag event
-                var p = data.imgTrafo.invtransform(pt);
-                shape.geometry.coordinates[vtx] = [p.x, p.y];
+                shape.geometry.coordinates[vtx] = data.imgTrafo.invtransform(pt).toArray();
                 // update shape SVG element
                 shape.$elem.place();
                 $(data).trigger('dragShape', shape);
             }
+            $handle.moveTo(pt);
             return false;
         };
 
@@ -666,12 +669,13 @@
         var shapeStart = function (evt) {
             var pt = geom.position(evt);
             // setup shape
-            var p = data.imgTrafo.invtransform(pt);
+            var p1 = data.imgTrafo.invtransform(pt).toArray();
+            var p2 = p1.slice(0);
             var vtx = 1;
             if (shapeType === 'Point') {
-                shape.geometry.coordinates = [[p.x, p.y]];
+                shape.geometry.coordinates = [p1];
             } else if (isSupported(data, shapeType)) {
-                shape.geometry.coordinates = [[p.x, p.y], [p.x, p.y]];
+                shape.geometry.coordinates = [p1, p2];
             } else {
                 console.error("defineShape: unsupported shape type: "+shapeType);
                 $overlayDiv.remove();
@@ -683,6 +687,7 @@
                 }
             // save first mousedown position
             shape.properties.screenpos = [pt];
+            shape.properties.vtx = vtx;
             // draw shape
             renderShape(data, shape, layer);
             // vertex drag end handler
@@ -698,6 +703,7 @@
 	            		coords.push(coords[vtx].slice());
 	            		vtx += 1;
 	                    // draw shape
+	                    shape.properties.vtx = vtx;
 	                    renderShape(data, shape, layer);
 	                    // execute vertex drag handler on next vertex
 	            		getVertexDragHandler(data, shape, vtx, vertexDragDone)(evt);
@@ -714,6 +720,7 @@
 	            		}
 	            		if (rerender) {
 	            		    unrenderShape(data, shape);
+	            		    shape.properties.vtx = vtx;
 	            		    renderShape(data, shape, layer);
 	            		}
             		} else {