added Grid shape

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

@@ -707,10 +707,8 @@
         lineColor : 'red',
         // color while the line is drawn
         drawColor : 'green',
-        // color of selected objects
-        selectColor : 'red',
         // implemented measuring shape types, for select widget
-        implementedShapes : ['Line', 'LineString', 'Proportion', 'Rect', 'Rectangle', 'Polygon', 'Circle', 'Ellipse'],
+        implementedShapes : ['Line', 'LineString', 'Proportion', 'Rect', 'Rectangle', 'Polygon', 'Circle', 'Ellipse', 'Grid'],
         // all measuring shape types
         shapeInfo : {
             Line :       { name : 'line',           display : 'length', },
@@ -863,6 +861,18 @@
         return Math.round(num * 10000 + 0.00001) / 10000
         };
 
+    // radians of angle between line and the positive X axis
+    var rad = function (p1, p2) {
+        var dx = p2.x - p1.x;
+        var dy = p2.y - p1.y;
+        return Math.atan2(dy, dx);
+        }
+
+    // degree of angle between line and the positive X axis
+    var deg = function (p1, p2) {
+        return rad(p1, p2) / Math.PI * 180;
+        }
+
     // calculate the distance of the first 2 points of a shape (rectified digilib coords)
     var rectifiedDist = function(data, shape) {
         var coords = shape.geometry.coordinates;
@@ -976,6 +986,7 @@
                 'editable' : true,
                 'selected' : false,
                 'stroke' : getSelectedStroke(data),
+                'stroke-width' : 1,
                 'cssclass' : shapeClass(shapeType)
                 // 'center' : data.settings.drawFromCenter
                 }
@@ -1033,7 +1044,7 @@
     // return line color from settings (TODO: chosen by user)
     var getSelectedStroke = function(data) {
         // TODO: colorpicker
-        return data.settings.linecolor;
+        return data.settings.lineColor;
     };
 
     // load shape types into select element
@@ -1207,6 +1218,28 @@
                 };
             return $s;
             };
+        factory['Grid'] = function (shape) {
+            var $s = factory['Line'](shape);
+            var place = $s.place;
+            var props = shape.properties;
+            props.maxvtx = 2;
+            var $g = $(fn.svgElement('g'));
+            var $defs = $(fn.svgElement('defs'));
+            var $pat = $(fn.svgElement('pattern', {'id': 'grid', 'height': '10%', 'width': '10%', 'patternUnits': 'objectBoundingBox'}));
+            var $path = $(fn.svgElement('path', {'d': "M100,0 L0,0 0,100", 'fill': 'none', 'stroke': props.stroke, 'stroke-width': '1'}));
+            var $r = $(fn.svgElement('rect', {stroke: props.stroke, fill: 'url(#grid)'}));
+            $g.append($defs.append($pat.append($path))).append($r).append($s);
+            $g.place = function () {
+                place.call($s);
+                var p = props.screenpos;
+                var d = p[0].distance(p[1]);
+                var angle = mRound(deg(p[0], p[1]));
+                var rotate = 'rotate('+angle+' '+p[0].x+' '+p[0].y+')';
+                $r.attr({x:p[0].x, y:p[0].y, height:d, width:d, transform:rotate});
+                $pat.attr({patternTransform:rotate});
+                };
+            return $g;
+            };
         };
 
     // set up a div for accessing the measuring functionality
@@ -1280,6 +1313,7 @@
         data.measureFactor = 1.0,
         setupMeasureBar(data);
         setupSvgFactory(data);
+        data.vectorLayers[0].handleType = 'diamond';
         };
 
     // event handler for scaler update
@@ -1292,7 +1326,7 @@
     var install = function (plugin) {
         digilib = plugin;
         if (digilib.plugins.vector == null) {
-            console.debug('measure plugin: vector plugin is missing, aborting installation.');
+            console.error('measure: jquery.digilib.vector.js is missing, aborting installation.');
             return;
             }
         console.debug('installing measure plugin. digilib:', digilib);

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

@@ -207,6 +207,7 @@
         $.extend(digilib.actions, actions);
         // export functions
         digilib.fn.vectorDefaultRenderFn = renderShapes;
+        digilib.fn.svgElement = svgElement;
     };
 
     /**