support Ellipse

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

@@ -15,9 +15,16 @@ div#dl-measure-toolbar {
     z-index: 20;
 }
 
-div#dl-measure-toolbar input {
+input#dl-measure-value1 {
     font-size: 100%;
     width: 8em;
+    text-align: right;
+}
+
+input#dl-measure-value1:disabled {
+    color: black;
+	background-color: silver;
+    border: none;
 }
 
 span.dl-measure-label {
@@ -27,6 +34,7 @@ span.dl-measure-label {
 span#dl-measure-shapeinfo {
     display: inline-block;
     width: 5em;
+    text-align: right;
     }
 
 span#dl-measure-value2 {

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

@@ -702,7 +702,7 @@
         // color of selected objects
         selectColor : 'red',
         // implemented measuring shape types, for select widget
-        implementedShapes : ['Line', 'LineString', 'Rectangle', 'Polygon', 'Circle'],
+        implementedShapes : ['Line', 'LineString', 'Rectangle', 'Polygon', 'Circle', 'Ellipse'],
         // all measuring shape types
         shapeInfo : {
             Line :       { name : 'line',           display : 'length', },
@@ -711,6 +711,7 @@
             Square :     { name : 'square',         display : 'length'  },
             Polygon :    { name : 'polygon',        display : 'area'    },
             Circle :     { name : 'circle',         display : 'radius'  },
+            Ellipse :    { name : 'ellipse',        display : 'area'    },
             Arch :       { name : 'arch',           display : 'radius'  },
             Ratio :      { name : 'ratio',          display : 'ratio'   },
             Grid :       { name : 'linegrid',       display : 'spacing' },
@@ -854,11 +855,14 @@
             return geom.position(ar * c[0], c[1]);
             };
         var coords = $.map(shape.geometry.coordinates, rectifyPoint);
-        var area = 0;
-        j = coords.length-1;
+        if (shape.geometry.type === 'Ellipse') { // ellipse formula
+            return Math.abs((coords[0].x-coords[1].x) * (coords[0].y-coords[1].y) * Math.PI);
+            }
+        var area = 0; // polygon area algorithm
+        j = coords.length-1; // set j to the last vertex
         for (i = 0; i < coords.length; i++) {
             area += (coords[j].x + coords[i].x) * (coords[j].y - coords[i].y); 
-            j = i;  //j is previous vertex to i
+            j = i;  // set j to the current vertex, i increments
             }
         return Math.abs(area/2);
         };
@@ -869,7 +873,6 @@
         var val = parseFloat(widgets.value1.val());
         var fac = val / data.lastMeasuredValue;
         data.measureFactor = fac;
-        setActiveShapeType(data, 'Line');
         updateCalculation(data);
     };
 
@@ -887,7 +890,6 @@
         widgets.shape.val(type);
         widgets.value1.val(fn.cropFloatStr(mRound(val)));
         widgets.value2.text(fn.cropFloatStr(mRound(result)));
-        widgets.info.text(display);
         };
 
     // recalculate with new units
@@ -929,6 +931,16 @@
             };
         };
 
+    // dusable the calibration acccording to shapeType
+    var setInputState = function(data) {
+        var widgets = data.measureWidgets;
+        var type = getActiveShapeType(data);
+        var display = data.settings.shapeInfo[type].display;
+        var state = display !== 'length' && display !== 'radius';
+        widgets.value1.prop('disabled', state);
+        widgets.info.text(display);
+        };
+
     // return the currently selected shape type
     var getActiveShapeType = function(data) {
         return data.settings.activeShapeType;
@@ -937,11 +949,13 @@
     // set the currently selected shape type
     var changeShapeType = function(data) {
         data.settings.activeShapeType = data.measureWidgets.shape.val();
+        setInputState(data);
         };
 
     // set the currently selected shape type
     var setActiveShapeType = function(data, type) {
         data.settings.activeShapeType = type;
+        setInputState(data);
         };
 
     // return line color chosen by user

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

@@ -56,7 +56,7 @@
     // SVG namespace
     var svgNS = 'http://www.w3.org/2000/svg';
     // implemented shape types
-    var supportedShapeTypes = ['Line', 'Rectangle', 'LineString', 'Polygon', 'Circle'];
+    var supportedShapeTypes = ['Line', 'Rectangle', 'LineString', 'Polygon', 'Circle', 'Ellipse'];
 
     var defaults = {
         // is vector active?
@@ -426,6 +426,17 @@
                 'cx': p1.x, 'cy': p1.y, 'r' : p1.distance(p2),
                 'fill' : 'none', 'stroke': stroke, 'stroke-width': strokeWidth, 
                 'style': style}));
+        } else if (gt === 'Ellipse') {
+            /*
+             * Ellipse
+             */
+            $elem = $(svgElement('ellipse', {
+                'id': id, 'class': cssclass,
+                'cx': p1.x, 'cy': p1.y,
+                'rx' : Math.abs(p1.x - p2.x),
+                'ry' : Math.abs(p1.y - p2.y),
+                'fill' : 'none', 'stroke': stroke, 'stroke-width': strokeWidth, 
+                'style': style}));
         } else {
         	console.error("Unable to render shape type:", gt);
         	return;
@@ -480,7 +491,7 @@
             // cancel if not left-click
             if (evt.which != 1) return;
             pt0 = geom.position(evt);
-            if (shapeType === 'Rectangle' || shapeType === 'Circle') {
+            if ($.inArray(shapeType, ['Rectangle', 'Circle', 'Ellipse']) > -1) {
                 // save screen points of coordinates
                 pt1 = data.imgTrafo.transform(geom.position(shape.geometry.coordinates[0]));
                 pt2 = data.imgTrafo.transform(geom.position(shape.geometry.coordinates[1]));
@@ -523,6 +534,14 @@
                 } else if (vtx == 1) {
                     $shape.attr({'r': pt.distance(pt1)});
                 }
+            } else if (shapeType === 'Ellipse') {
+                if (vtx == 0) {
+                    $shape.attr({'cx': pt.x, 'cy': pt.y,
+                        'rx': Math.abs(pt.x - pt2.x),
+                        'ry': Math.abs(pt.y - pt2.y)});
+                } else if (vtx == 1) {
+                    $shape.attr({'rx': Math.abs(pt.x - pt1.x), 'ry': Math.abs(pt.y - pt1.y)});
+                }
             }
             // update shape object and trigger drag event
             if (isSupported(shapeType)) {
@@ -570,7 +589,7 @@
      * @param shapeType shapeType to test
      */
     var isSupported = function(shapeType) {
-        return supportedShapeTypes.indexOf(shapeType) > -1;
+        return $.inArray(shapeType, supportedShapeTypes) > -1;
     };
 
     /**