changeset 1589:6892f39c1fdb

Merge with 107159069baf23478295ede170c22d7b88bc18b2
author robcast
date Wed, 08 Feb 2017 14:52:46 +0100
parents e9ad60c4fb0c (current diff) 107159069baf (diff)
children bd71cb53e1a3
files
diffstat 5 files changed, 190 insertions(+), 12 deletions(-) [+]
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/annotator-dl.js	Wed Feb 08 13:26:07 2017 +0100
+++ b/webapp/src/main/webapp/jquery/annotator-dl.js	Wed Feb 08 14:52:46 2017 +0100
@@ -2277,6 +2277,7 @@
       var _this = this;
       if (__indexOf.call(this.annotations, annotation) >= 0) {
         return this._apiRequest('destroy', annotation, (function() {
+          _this.publish("annotationDestroyed", [annotation]);
           return _this.unregisterAnnotation(annotation);
         }));
       }
@@ -2296,6 +2297,7 @@
       } else {
         $.extend(annotation, data);
       }
+      this.publish("annotationStored", [data]);
       return $(annotation.highlights).data('annotation', annotation);
     };
 
@@ -2305,6 +2307,7 @@
 
     Store.prototype._onLoadAnnotations = function(data) {
       var a, annotation, annotationMap, newData, _k, _l, _len2, _len3, _ref3;
+      this.publish("annotationRead", [this.annotations, data]);
       if (data == null) {
         data = [];
       }
@@ -2336,6 +2339,7 @@
       if (data == null) {
         data = {};
       }
+      this.publish("annotationSearchResult", [this.annotations, data]);
       return this._onLoadAnnotations(data.rows || []);
     };
 
--- a/webapp/src/main/webapp/jquery/jquery.digilib.annotator.js	Wed Feb 08 13:26:07 2017 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.annotator.js	Wed Feb 08 14:52:46 2017 +0100
@@ -307,7 +307,7 @@
     
     
     /**
-     * Show editor and save annotation.
+     * Show editor, edit and save new annotation.
      */
     var addAnnotationContent = function (data, shape, screenPos) {
       var annotator = data.annotator;
@@ -316,23 +316,36 @@
       var annotation = annotator.createAnnotation();
       annotation.editing = true;
       var cleanup = function () {
+        annotator.unsubscribe('annotationStore', store);
         annotator.unsubscribe('annotationEditorSubmit', save);
         annotator.unsubscribe('annotationEditorHidden', cancel);
         delete annotation.editing;
       };
       var save = function () {
-        console.log("annotation save.");
+        console.log("annotation save");
         cleanup();
         annotator.setupAnnotation(annotation);
-        // Fire annotationCreated events so that plugins can react to them
+        // UGLY: depends on data.annotations(side effect of setupAnnotation)
+        var annoWrapper = data.annotations[data.annotations.length -1];
+        // calculate shape coordinates
+        createShape(data, annoWrapper);
+        // Fire annotationCreated events so that the Annotator Store plugin saves the annotation in the Db 
         annotator.publish('annotationCreated', [annotation]);
+      };
+      var store = function (stored) {
+        if (stored == null) {
+          console.warn('Annotation Store did not return the stored annotation');
+          stored = annotation;
+          }
+        console.debug("annotation stored", stored);
         renderAnnotations(data);
       };
       var cancel = function () {
-        console.log("annotation cancel.");
+        console.log("annotation cancel");
         cleanup();
         renderAnnotations(data);
       };
+      annotator.subscribe('annotationStored', store);
       annotator.subscribe('annotationEditorSubmit', save);
       annotator.subscribe('annotationEditorHidden', cancel);
       annotator.showEditor(annotation, screenPos.getAsCss());
--- a/webapp/src/main/webapp/jquery/jquery.digilib.css	Wed Feb 08 13:26:07 2017 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.css	Wed Feb 08 14:52:46 2017 +0100
@@ -440,4 +440,12 @@
 	right: 0px;
 }
 
+#dl-polygonPointWidget { display: none; background-color: rgba(255, 255, 255, 0.7); border: 1px solid grey; border-radius: 5px; width: 23px; z-index: 200; }
+#dl-polygonPointWidget > div { height: 23px }
+#dl-polygonPointWidget > div:hover { background-color: rgba(0, 255, 255, 0.3); }
 
+.plus.icon { color: grey; position: absolute; margin-left: 5px; margin-top: 10px; }
+.plus.icon:before { content: ''; position: absolute; width: 12px; height: 2px; background-color: currentColor; }
+.plus.icon:after { content: '';  position: absolute; width: 12px; height: 2px; background-color: currentColor; -webkit-transform: rotate(90deg); transform: rotate(90deg); }
+.minus.icon { color: grey; position: absolute; margin-left: 5px; margin-top: 10px; width: 12px; height: 2px; background-color: currentColor; }
+
--- a/webapp/src/main/webapp/jquery/jquery.digilib.pluginstub.js	Wed Feb 08 13:26:07 2017 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.pluginstub.js	Wed Feb 08 14:52:46 2017 +0100
@@ -20,6 +20,7 @@
  * #L%
  * Authors: Robert Casties, Martin Raspe
  */
+
 /**
 digilib plugin stub
  */
@@ -74,10 +75,10 @@
         console.debug('initialising STUB plugin. data:', data);
         var $data = $(data);
         // install event handlers
-        $data.bind('setup', handleSetup);
-        $data.bind('update', handleUpdate);
-        $data.bind('redisplay', handleRedisplay);
-        $data.bind('dragZoom', handleDragZoom);
+        $data.on('setup', handleSetup);
+        $data.on('update', handleUpdate);
+        $data.on('redisplay', handleRedisplay);
+        $data.on('dragZoom', handleDragZoom);
     };
 
 
@@ -97,6 +98,7 @@
     };
 
     var handleDragZoom = function (evt, zoomArea) {
+        console.debug("STUB: handleDragZoom");
         var data = this;
     };
 
--- a/webapp/src/main/webapp/jquery/jquery.digilib.vector.js	Wed Feb 08 13:26:07 2017 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.vector.js	Wed Feb 08 14:52:46 2017 +0100
@@ -68,7 +68,9 @@
         // grab handle size
         'editHandleSize' : 10,
         // handle type (square, diamond, circle, cross)
-        'editHandleType' : 'square'
+        'editHandleType' : 'square',
+        // add or remove polygon points?
+        'editPolygonPoints' : true
     };
 
     var actions = {
@@ -217,8 +219,9 @@
             svgElement: svgElement,
             svgAttr: svgAttr,
             createScreenCoords: createScreenCoords,
-            editShapeBegin: addEditHandles,
-            editShapeEnd: removeEditHandles,
+            startShapeEdit: startShapeEdit,
+            undoShapeEdit: undoShapeEdit,
+            finishShapeEdit: finishShapeEdit,
             redrawShape: redrawShape
             });
     };
@@ -566,7 +569,7 @@
         var insertHandle = function (i, item) {
             var p = trafo.transform(geom.position(item));
             var $handle = createHandle();
-            $handle.attr('vertex', i);
+            $handle.data('vertex', i);
             $handle.moveTo(p);
             handles.push($handle);
             $svg.append($handle);
@@ -602,6 +605,148 @@
     	};
 
     /**
+     * make shape editable, add handles and events
+     * 
+     * @param data
+     * @param shape
+     */
+    var startShapeEdit = function (data, shape) {
+        shape.properties.editable = true;
+        shape.savecoords = shape.geometry.coordinates.slice(0); // clone coords
+        redrawShape(data, shape);
+        };
+
+    /**
+     * end editing shape
+     * 
+     * @param data
+     * @param shape
+     */
+    var finishShapeEdit = function (data, shape) {
+        shape.properties.editable = false;
+        redrawShape(data, shape);
+        };
+
+    /**
+     * restore edited shape to previous state
+     * 
+     * @param data
+     * @param shape
+     */
+    var undoShapeEdit = function (data, shape) {
+        shape.geometry.coordinates = shape.savecoords;
+        finishShapeEdit(data, shape);
+    	  };
+
+    /**
+     * shape has a polygon type
+     * 
+     * @param shape
+     */
+    var hasPolygonType = function  (shape) {
+        var type = shape.geometry.type;
+        return (type === 'Polygon' || type === 'LineString');
+        };
+
+    /**
+     * activate polygon edit (add/remove points)
+     * 
+     * @param data
+     * @param shape
+     */
+    var enablePolygonEdit = function (data, shape) {
+        var $w = polygonPointWidget(data);
+        var onHandleMouseDown = function (event) {
+          $w.fadeOut();
+          };
+        var onHandleMouseLeave = function (event) {
+          $w.data.timer = setTimeout(onHandleMouseDown, 500);
+          };
+        var onHandleMouseEnter = function (event) {
+          $w.data({ vertex: $(this).data('vertex'), shape: shape, timer: false });
+          $w.fadeIn().offset({
+            left : event.pageX + 5,
+            top  : event.pageY + 5
+          });
+        };
+        var addEventsToHandle = function(i, $handle) {
+            $handle
+              .on('mouseenter.handle', onHandleMouseEnter)
+              .on('mouseleave.handle', onHandleMouseLeave)
+              .on('mousedown.handle', onHandleMouseDown);
+              };
+        $.each(shape.$vertexElems, addEventsToHandle);
+        };
+
+    /**
+     * deactivate polygon edit (add/remove points)
+     * 
+     * @param data
+     * @param shape
+     */
+    var disablePolygonEdit = function (data) {
+        var $w = data.$polygonPointWidget;
+        if ($w == null) {
+          return;
+        }
+        $w.data({ vertex: null, shape: null, timer: false });
+        $w.fadeOut();
+        };
+
+    /**
+     * create HTML div to add/remove polygon points
+     * 
+     * @param data
+     */
+    var polygonPointWidget = function (data)	{
+        var css = data.settings.cssPrefix;
+        var $w = data.$polygonPointWidget;
+        if ($w == null) {
+          // setup html
+          var html = '\
+            <div id="'+css+'polygonPointWidget">\
+              <div id="'+css+'iconplus"><div class="icon plus" /></div>\
+              <div id="'+css+'iconminus"><div class="icon minus" /></div>\
+            </div>';
+          $w = $(html);
+          $w.appendTo(data.$elem);
+          // setup mouse bindings
+          var onPlusClick = function (event) {
+            var vertex = $w.data('vertex');
+            var shape = $w.data('shape');
+            var coords = shape.geometry.coordinates;
+            var v1 = parseInt(vertex) > 0 ? vertex-1 : coords.length-1;
+            var pt = geom.position(coords[vertex]).mid(geom.position(coords[v1]));
+            console.debug('+ point', coords[vertex], pt);
+            coords.splice(vertex, 0, pt);
+            redrawShape(data, shape);
+            };
+          var onMinusClick = function (event) {
+            var vertex = $w.data('vertex');
+            var shape = $w.data('shape');
+            var coords = shape.geometry.coordinates;
+            if (vertex == null || coords.length < 4) { return; }
+            console.debug('- point', coords[vertex]);
+            coords.splice(vertex, 1);
+            redrawShape(data, shape);
+            };
+          var onEnter = function (event) {
+            clearTimeout($w.data.timer);
+            };
+          var onLeave = function (event) {
+            $w.fadeOut();
+            };
+          var $plus = $w.children().first();
+          var $minus = $w.children().last();
+          $plus.on('click', onPlusClick);
+          $minus.on('click', onMinusClick);
+          $w.on('mouseenter', onEnter).on('mouseleave', onLeave);
+          data.$polygonPointWidget = $w;
+        }
+        return $w;
+        };
+
+    /**
      * calculate screen positions from coordinates for a shape.
      * 
      * @param data
@@ -673,6 +818,9 @@
         // add adjustment handles
         if (shape.properties.editable) {
             addEditHandles(data, shape, layer);
+            if (hasPolygonType(shape) && data.settings.editPolygonPoints) {
+                enablePolygonEdit(data, shape);
+            }
         }
         $(data).trigger("renderShape", shape);
     };
@@ -692,6 +840,9 @@
     		shape.$elem.remove();
     		delete shape.$elem;
     	}
+      if (hasPolygonType(shape) && data.settings.editPolygonPoints) {
+        disablePolygonEdit(data);
+      }
     };
 
     /**