Mercurial > hg > digilib

changeset 1544:020739227ffd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
measure plugin: define the event interactor element for composite svg elements
author hertzhaft
date Wed, 19 Oct 2016 02:09:36 +0200
parents 57747297dea2
children 9dc9042cea47
files webapp/src/main/webapp/jquery/jquery.digilib.measure.js webapp/src/main/webapp/jquery/jquery.digilib.vector.js
diffstat 2 files changed, 39 insertions(+), 31 deletions(-) [+]
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery.digilib.measure.js	Wed Oct 19 00:27:23 2016 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.measure.js	Wed Oct 19 02:09:36 2016 +0200
@@ -733,7 +733,7 @@
                 },
             selected : {
                 stroke : 'cyan',
-                'stroke-width' : 4,
+                'stroke-width' : 3,
                 fill : 'none'
                 },
             handle : {
@@ -893,7 +893,7 @@
     var onRenderShape = function(event, shape) {
         var data = this;
         var select = function(event) {
-            selectShape(data, shape);
+            selectShape(data, this, shape);
             updateInfo(data, shape);
             _debug_shape('onClick', shape);
             };
@@ -901,9 +901,7 @@
             showInfoDiv(event, data, shape);
             _debug_shape('showInfoDiv', shape);
             };
-        var $elem = shape.geometry.type === 'Oval'
-            ? shape.$elem.children('path')
-            : shape.$elem;
+        var $elem = shape.$interactor || shape.$elem;
         $elem.on('mouseover.measureinfo', info);
         $elem.on('click.measureselect', select);
         _debug_shape('onRenderShape', shape);
@@ -1040,11 +1038,12 @@
         };
 
     // select/unselect shape (or toggle)
-    var selectShape = function(data, shape, select) {
+    var selectShape = function(data, elem, shape, select) {
         var css = CSS+'selected';
         if (select == null) { // toggle
             select = !shape.properties.selected }
-        var cssclass = shapeClass(shape.geometry.type, select ? css : null)
+        var cssclass = shapeClass(shape.geometry.type, select ? css : null);
+        $(elem).attr("class", cssclass);
         shape.$elem.attr("class", cssclass);
         shape.properties.cssclass = cssclass;
         shape.properties.selected = select;
@@ -1323,9 +1322,9 @@
     // attach/detach keyup/down event handlers
     var attachKeyHandlers = function(data, on) {
         if (on) {
-            $(document.body).on('keydown.measure', 
+            $(document.body).on('keydown.measure',
                 function(evt) { onKeyDown(evt, data) });
-            $(document.body).on('keyup.measure', 
+            $(document.body).on('keyup.measure',
                 function(evt) { onKeyUp(evt, data) });
             }
         else {
@@ -1377,7 +1376,8 @@
                             $c2.attr({cx: m2.x, cy: m2.y, r: rad});
                         }
                     }
-                 return $g;
+                    shape.$interactor = $s;
+                    return $g;
                 }
             };
         factory['Rect'] = {
@@ -1425,8 +1425,8 @@
                     var $c2 = $(fn.svgElement('circle', {'id': shape.id + '-circ2', 'class': guide }));
                     var $p1 = $(fn.svgElement('path',   {'id': shape.id + '-lines', 'class': guide }));
                     var $p2 = $(fn.svgElement('path',   {'id': shape.id + '-constr', 'class': constr })); // debug construction
-
-                    var $arc = $(fn.svgElement('path',   {'id': shape.id + '-arc', 'class': shapeClass, stroke: props.stroke, 'stroke-width': styles.shape['stroke-width'], fill: 'none' }));
+                    props['stroke-width'] = styles.shape['stroke-width'];
+                    var $arc = $(fn.svgElement('path',  fn.svgAttr(data, shape)));
                     $g.append($s).append($c1).append($c2).append($p1).append($p2).append($arc);
                     $g.place = function () {
                         var p = props.screenpos;
@@ -1492,6 +1492,7 @@
                             props.measures = { rad1: rad1, rad2: rad2, axis1: axis1.length(), axis2: axis2.length() }; // use for info
                             }
                         };
+                    shape.$interactor = $arc;
                     return $g;
                 }
             };
@@ -1523,6 +1524,7 @@
                         $r.attr({x:x, y:y, height:d*scale, width:d*scale, transform:transform});
                         $pat.attr({patternTransform:transform});
                         };
+                    shape.$interactor = $s;
                     return $g;
                 }
             };
--- a/webapp/src/main/webapp/jquery/jquery.digilib.vector.js	Wed Oct 19 00:27:23 2016 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.vector.js	Wed Oct 19 02:09:36 2016 +0200
@@ -213,6 +213,7 @@
         $.extend(digilib.fn, {
             vectorDefaultRenderFn: renderShapes,
             svgElement: svgElement,
+            svgAttr: svgAttr,
             createScreenCoords: createScreenCoords,
             editShapeBegin: addEditHandles,
             editShapeEnd: removeEditHandles
@@ -333,6 +334,23 @@
     };
 
     /**
+     * set standard SVG attributes
+     * 
+     * @param data
+     */
+    var svgAttr = function (data, shape) {
+        var settings = data.settings;
+        var props = shape.properties;
+        return {
+            'id': shape.id || digilib.fn.createId(shape.id, css+'svg-'),
+            'stroke': props['stroke'] || settings.defaultStroke,
+            'stroke-width' : props['stroke-width'] || settings.defaultStrokeWidth,
+            'fill' : props['fill'] || settings.defaultFill,
+            'class' : props['cssclass'],
+            'style' : props['style']
+            };
+        };
+    /**
      * setup Shape SVG creation functions
      * (more functions can be plugged into data.settings.ShapeFactory)
      * 
@@ -342,18 +360,6 @@
         var settings = data.settings;
         var css = settings.cssPrefix;
         var hs = settings.editHandleSize;
-        // set standard SVG attributes
-        var svgAttr = function (shape) {
-            var props = shape.properties;
-            return {
-                'id': shape.id || digilib.fn.createId(shape.id, css+'svg-'),
-                'stroke': props['stroke'] || settings.defaultStroke,
-                'stroke-width' : props['stroke-width'] || settings.defaultStrokeWidth,
-                'fill' : props['fill'] || settings.defaultFill,
-                'class' : props['cssclass'],
-                'style' : props['style']
-                };
-            };
         var factory = {
             'Point' : {
                 'setup' : function (data, shape) {
@@ -362,7 +368,7 @@
                     shape.properties.sorta = 0;
                 },
                 'svg' : function (shape) {
-                    var $s = $(svgElement('path', svgAttr(shape)));
+                    var $s = $(svgElement('path', svgAttr(data, shape)));
                     $s.place = function () {
                         // point uses pin-like path of size 3*pu
                         var p = shape.properties.screenpos[0];
@@ -380,7 +386,7 @@
                     shape.properties.sorta = 0;
                 },
                 'svg' : function (shape) {
-                    var $s = $(svgElement('line', svgAttr(shape)));
+                    var $s = $(svgElement('line', svgAttr(data, shape)));
                     $s.place = function () {
                         var p = shape.properties.screenpos;
                         this.attr({'x1': p[0].x, 'y1': p[0].y, 'x2': p[1].x, 'y2': p[1].y});
@@ -398,7 +404,7 @@
                     }
                 },
                 'svg' : function (shape) {
-                    var $s = $(svgElement('rect', svgAttr(shape)));
+                    var $s = $(svgElement('rect', svgAttr(data, shape)));
                     $s.place = function () {
                         var p = shape.properties.screenpos;
                         var r = geom.rectangle(p[0], p[1]);
@@ -416,7 +422,7 @@
                     }
                 },
                 'svg' : function (shape) {
-                    var $s = $(svgElement('polygon', svgAttr(shape)));
+                    var $s = $(svgElement('polygon', svgAttr(data, shape)));
                     $s.place = function () {
                         var p = shape.properties.screenpos;
                         this.attr({'points': p.join(" ")});
@@ -433,7 +439,7 @@
                     }
                 },
                 'svg' : function (shape) {
-                    var $s = $(svgElement('polyline', svgAttr(shape)));
+                    var $s = $(svgElement('polyline', svgAttr(data, shape)));
                     $s.place = function () {
                         var p = shape.properties.screenpos;
                         this.attr({'points': p.join(" ")});
@@ -452,7 +458,7 @@
                     }
                 },
                 'svg' : function (shape) {
-                    var $s = $(svgElement('circle', svgAttr(shape)));
+                    var $s = $(svgElement('circle', svgAttr(data, shape)));
                     $s.place = function () {
                         var p = shape.properties.screenpos;
                         this.attr({'cx': p[0].x, 'cy': p[0].y, 'r': p[0].distance(p[1])});
@@ -471,7 +477,7 @@
                     }
                 },
                 'svg' : function (shape) {
-                    var $s = $(svgElement('ellipse', svgAttr(shape)));
+                    var $s = $(svgElement('ellipse', svgAttr(data, shape)));
                     $s.place = function () {
                         var p = shape.properties.screenpos;
                         this.attr({'cx': p[0].x, 'cy': p[0].y,