Merge pull request #769 from OpenGeoscience/edit-annotations

Edit annotations
OpenGeoscience · Feb 20, 2018 · 2854ccb · 2854ccb
2 parents 6e069c2 + c765b62
commit 2854ccb
Show file tree

Hide file tree

Showing 11 changed files with 1,578 additions and 103 deletions.
diff --git a/examples/annotations/index.pug b/examples/annotations/index.pug
@@ -16,8 +16,11 @@ block append mainContent
         .annotation.point Left click to create a point.
         .annotation.line Left-click points in the line.  Double click, right click, or click the starting point to end the line.
     .form-group(title='If enabled, left-click to add another annotation, and right-click to switch annotation type.  Otherwise, you must click a button above.')
-      label(for='clickadd') Click to add annotation
-      input#clickadd(param-name='clickadd', type='checkbox', placeholder='true', checked='checked')
+      label(for='clickmode') Click mode
+      select#clickmode(param-name='clickmode', placeholder='edit')
+        option(value='edit') Select and Edit
+        option(value='add') Add New
+        option(value='none') None
     .form-group(title='If enabled, immediately after adding one annotation, you can add another without either left-clicking or selecting a button.')
       label(for='keepadding') Keep adding annotations
       input#keepadding(param-name='keepadding', type='checkbox', placeholder='false')
@@ -31,6 +34,7 @@ block append mainContent
       #annotationlist
         .entry#sample
           span.entry-name Sample
+          a.entry-adjust(action='adjust', title='Modify geometry') &#x271c;
           a.entry-edit(action='edit', title='Edit name and properties') &#x270e;
           a.entry-remove(action='remove', title='Delete this annotation') &#x2716;
     .form-group

diff --git a/examples/annotations/main.css b/examples/annotations/main.css
@@ -66,16 +66,14 @@
   display: inline-block;
 }
 .entry .entry-name {
-  width: 86%;
+  width: 82%;
 }
-.entry .entry-edit {
-  width: 7%;
+.entry a {
+  width: 6%;
   text-align: right;
-  font-weight: bold;
 }
-.entry .entry-remove {
-  width: 7%;
-  text-align: right;
+.entry .entry-edit {
+  font-weight: bold;
 }
 .entry-remove-all {
   float: right;

diff --git a/examples/annotations/main.js b/examples/annotations/main.js
@@ -10,7 +10,7 @@ $(function () {
 
   // get the query parameters and set controls appropriately
   var query = utils.getQuery();
-  $('#clickadd').prop('checked', query.clickadd !== 'false');
+  $('#clickmode').val(query.clickmode || 'edit');
   $('#keepadding').prop('checked', query.keepadding === 'true');
   $('#showLabels').prop('checked', query.labels !== 'false');
   if (query.lastannotation) {
@@ -54,7 +54,8 @@ $(function () {
   layer = map.createLayer('annotation', {
     renderer: query.renderer ? (query.renderer === 'html' ? null : query.renderer) : undefined,
     annotations: query.renderer ? undefined : geo.listAnnotations(),
-    showLabels: query.labels !== 'false'
+    showLabels: query.labels !== 'false',
+    clickToEdit: !query.clickmode || query.clickmode === 'edit'
   });
   // bind to the mouse click and annotation mode events
   layer.geoOn(geo.event.mouseclick, mouseClickToStart);
@@ -92,7 +93,7 @@ $(function () {
    * @param {geo.event} evt geojs event.
    */
   function mouseClickToStart(evt) {
-    if (evt.handled || query.clickadd === 'false') {
+    if (evt.handled || query.clickmode !== 'add') {
       return;
     }
     if (evt.buttonsDown.left) {
@@ -129,6 +130,10 @@ $(function () {
         layer.options('showLabels', '' + value !== 'false');
         layer.draw();
         break;
+      case 'clickmode':
+        layer.options('clickToEdit', value === 'edit');
+        layer.draw();
+        break;
     }
     query[param] = value;
     if (value === '' || (ctl.attr('placeholder') &&
@@ -274,6 +279,10 @@ $(function () {
         id = ctl.closest('.entry').attr('annotation-id'),
         annotation = layer.annotationById(id);
     switch (action) {
+      case 'adjust':
+        layer.mode(layer.modes.edit, annotation);
+        layer.draw();
+        break;
       case 'edit':
         show_edit_dialog(id, annotation);
         break;

diff --git a/src/action.js b/src/action.js
@@ -15,7 +15,8 @@ var geo_action = {
   // annotation actions
   annotation_line: 'geo_annotation_line',
   annotation_polygon: 'geo_annotation_polygon',
-  annotation_rectangle: 'geo_annotation_rectangle'
+  annotation_rectangle: 'geo_annotation_rectangle',
+  annotation_edit_handle: 'geo_annotation_edit_handle'
 };
 
 module.exports = geo_action;