Edit annotations.

When enabled, hovering over an annotation will highlight it.  Clicking
on the annotation will place it in edit mode.  Dragging the edit handles
will alter the annotation.  Escape or clicking outside of edit handles
will exit from edit mode.

This PR can stand on its own, but there are a number of future
improvements that are desired:
- escape should revert the edit rather than just exit edit mode (and
  enter should exit edit mode, keeping the edit)
- tab should switch between annotations; when an annotation is selected
  via the enter key, tab would switch between edit handles.
- edit handles should be adjustable with the arrow keys
- meta keys (shift, ctrl) should affect how moving edit handles is
  controlled (for instance, shift might constrain a rectangle's aspect
  ratio, or ensure 90 degree rotations).  I'm not sure of the specifics.
- the edit handles should be fancier than just points.  I'd rather see
  squares on the vertices, a curved double-headed arrow on the rotation
  handle, and a double-headed arrow on the resize handle.  This would
  benefit from a more generic marker option for points.
- we should test with a touch device.
- for lines, the ability to break or join a line could be disabled.
- There could be other constraints, too, like discrete rotations or
  scales.

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') ✜
           a.entry-edit(action='edit', title='Edit name and properties') ✎
           a.entry-remove(action='remove', title='Delete this annotation') ✖
     .form-group

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;

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;

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;