feat: Add controls to combine and change annotations.

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Features
 
 - Polygon operations ([#1198](../../pull/1198))
+- Use meta keys to modify annotations ([#1209](../../pull/1209))
 
 ## Version 1.8.8
 

src/annotation/annotation.js

@@ -74,6 +74,12 @@ var editHandleFeatureLevel = 3;
  * @property {boolean|string[]} [showLabel=true] `true` to show the annotation
  *    label on annotations in done or edit states.  Alternately, a list of
  *    states in which to show the label.  Falsy to not show the label.
+ * @property {boolean} [allowBooleanOperations] This defaults to `true` for
+ *    annotations that have area and `false` for those without area (e.g.,
+ *    false for lines and points).  If it is truthy, then, when the annotation
+ *    is being created, it checks the metakeys on the first click that defines
+ *    a coordinate to determine what boolean polygon operation should be
+ *    performaned on the completion of the annotation.
  */
 
 /**

src/annotation/polygonAnnotation.js

@@ -79,7 +79,8 @@ var polygonAnnotation = function (args) {
       },
       stroke: false,
       strokeColor: {r: 0, g: 0, b: 1}
-    }
+    },
+    allowBooleanOperations: true
   }, args || {});
   args.vertices = args.vertices || args.coordinates || [];
   delete args.coordinates;

src/annotation/rectangleAnnotation.js

@@ -69,7 +69,8 @@ var rectangleAnnotation = function (args, annotationName) {
       fillColor: {r: 0.3, g: 0.3, b: 0.3},
       fillOpacity: 0.25,
       strokeColor: {r: 0, g: 0, b: 1}
-    }
+    },
+    allowBooleanOperations: true
   }, args || {});
   args.corners = args.corners || args.coordinates || [];
   delete args.coordinates;

src/annotationLayer.js

@@ -181,6 +181,27 @@ var annotationLayer = function (arg) {
     m_this._updateFromEvent(update);
   };
 
+  /**
+   * Check if the map is currently in a mode where we are adding an annotation
+   * with a boolean operation.  If so, remove the current annotation from the
+   * layer, then apply it via the boolean operation.
+   */
+  this._handleBooleanOperation = function () {
+    const mapNode = m_this.map().node();
+    let op;
+    Object.values(m_this._booleanClasses).forEach((c) => {
+      if (mapNode.hasClass(c)) {
+        op = c.split('-')[1];
+      }
+    });
+    if (!op || !m_this.currentAnnotation || !m_this.currentAnnotation.toPolygonList) {
+      return;
+    }
+    const newAnnot = m_this.currentAnnotation;
+    m_this.removeAnnotation(m_this.currentAnnotation, false);
+    util.polyops[op](m_this, newAnnot.toPolygonList(), {correspond: {}, keepAnnotations: 'exact', style: m_this});
+  };
+
   /**
    * Handle updating the current annotation based on an update state.
    *
@@ -196,6 +217,7 @@ var annotationLayer = function (arg) {
         m_this.mode(null);
         break;
       case 'done':
+        m_this._handleBooleanOperation();
         m_this.mode(null);
         break;
     }
@@ -213,6 +235,15 @@ var annotationLayer = function (arg) {
    */
   this._handleMouseMove = function (evt) {
     if (m_this.mode() && m_this.currentAnnotation) {
+      if (m_this.mode() !== m_this.modes.edit && m_this.currentAnnotation.options('allowBooleanOperations') && m_this.currentAnnotation._coordinates().length < 2) {
+        if (evt.modifiers) {
+          const mod = (evt.modifiers.shift ? 's' : '') + (evt.modifiers.ctrl ? 'c' : '') + (evt.modifiers.meta || evt.modifiers.alt ? 'a' : '');
+          const mapNode = m_this.map().node();
+          Object.values(m_this._booleanClasses).forEach((c) => {
+            mapNode.toggleClass(c, m_this._booleanClasses[mod] === c);
+          });
+        }
+      }
       var update = m_this.currentAnnotation.mouseMove(evt);
       if (update) {
         m_this.modified();
@@ -518,6 +549,15 @@ var annotationLayer = function (arg) {
     edit: 'edit'
   };
 
+  /* Keys are short-hand for preferred event modifiers.  Values are classes to
+   * apply to the map node. */
+  this._booleanClasses = {
+    s: 'annotation-union',
+    sc: 'annotation-intersect',
+    c: 'annotation-difference',
+    sa: 'annotation-xor'
+  };
+
   /**
    * Get or set the current mode.
    *
@@ -542,6 +582,9 @@ var annotationLayer = function (arg) {
           mapNode = m_this.map().node(), oldMode = m_mode;
       m_mode = arg;
       mapNode.toggleClass('annotation-input', !!(m_mode && m_mode !== m_this.modes.edit));
+      if (!m_mode || m_mode === m_this.modes.edit) {
+        Object.values(m_this._booleanClasses).forEach((c) => mapNode.toggleClass(c, false));
+      }
       if (!m_keyHandler) {
         m_keyHandler = Mousetrap(mapNode[0]);
       }

src/main.styl

@@ -49,6 +49,14 @@
 
   &.annotation-input
     cursor crosshair
+    &.annotation-intersect
+      cursor embedurl("./css/cursor-crosshair-intersect.svg") 12 12,crosshair
+    &.annotation-difference
+      cursor embedurl("./css/cursor-crosshair-difference.svg") 12 12,crosshair
+    &.annotation-union
+      cursor embedurl("./css/cursor-crosshair-union.svg") 12 12,crosshair
+    &.annotation-xor
+      cursor embedurl("./css/cursor-crosshair-xor.svg") 12 12,crosshair
 
   &.highlight-focus
     &:after