Mercurial > hg > digilib
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); + } }; /**