Merge pull request #1209 from OpenGeoscience/annotation-options

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.10
 

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.
  */
 
 /**
@@ -94,7 +100,7 @@ var annotation = function (type, args) {
   }
 
   var m_this = this,
-      m_options = $.extend({}, {showLabel: true}, args || {}),
+      m_options = $.extend(true, {}, this.constructor.defaults, args || {}),
       m_id = m_options.annotationId;
   delete m_options.annotationId;
   if (m_id === undefined || (m_options.layer && m_options.layer.annotationById(m_id))) {
@@ -797,10 +803,14 @@ var annotation = function (type, args) {
       key = styles[i];
       value = util.ensureFunction(objStyle[key])();
       if (value !== undefined) {
+        let defvalue = ((m_this.constructor.defaults || {}).style || {})[key];
         if (key.toLowerCase().match(/color$/)) {
           value = util.convertColorToHex(value, 'needed');
+          defvalue = defvalue !== undefined ? util.convertColorToHex(defvalue, 'needed') : defvalue;
+        }
+        if (value !== defvalue) {
+          obj.properties[key] = value;
         }
-        obj.properties[key] = value;
       }
     }
     for (i = 0; i < textFeature.usedStyles.length; i += 1) {
@@ -1408,6 +1418,13 @@ function constrainAspectRatio(ratio) {
   return constraintFunction;
 }
 
+/**
+ * This object contains the default options to initialize the class.
+ */
+annotation.defaults = {
+  showLabel: true
+};
+
 module.exports = {
   state: annotationState,
   actionOwner: annotationActionOwner,

src/annotation/circleAnnotation.js

@@ -19,13 +19,20 @@ const ellipseAnnotation = require('./ellipseAnnotation');
  */
 var circleAnnotation = function (args, annotationName) {
   'use strict';
-  args = $.extend({}, args, {constraint: 1});
   if (!(this instanceof circleAnnotation)) {
     return new circleAnnotation(args, annotationName);
   }
+  args = $.extend(true, {}, this.constructor.defaults, args, {constraint: 1});
   ellipseAnnotation.call(this, args, annotationName || 'circle');
 };
 inherit(circleAnnotation, ellipseAnnotation);
+
+/**
+ * This object contains the default options to initialize the class.
+ */
+circleAnnotation.defaults = $.extend({}, ellipseAnnotation.defaults, {
+});
+
 var circleRequiredFeatures = {};
 circleRequiredFeatures[markerFeature.capabilities.feature] = true;
 registerAnnotation('circle', circleAnnotation, circleRequiredFeatures);

src/annotation/ellipseAnnotation.js

@@ -23,7 +23,7 @@ var ellipseAnnotation = function (args, annotationName) {
   if (!(this instanceof ellipseAnnotation)) {
     return new ellipseAnnotation(args, annotationName);
   }
-
+  args = $.extend(true, {}, this.constructor.defaults, args);
   rectangleAnnotation.call(this, args, annotationName || 'ellipse');
 
   var m_this = this;
@@ -117,6 +117,12 @@ var ellipseAnnotation = function (args, annotationName) {
 };
 inherit(ellipseAnnotation, rectangleAnnotation);
 
+/**
+ * This object contains the default options to initialize the class.
+ */
+ellipseAnnotation.defaults = $.extend({}, rectangleAnnotation.defaults, {
+});
+
 var ellipseRequiredFeatures = {};
 ellipseRequiredFeatures[markerFeature.capabilities.feature] = true;
 registerAnnotation('ellipse', ellipseAnnotation, ellipseRequiredFeatures);

src/annotation/lineAnnotation.js

@@ -37,8 +37,7 @@ var lineAnnotation = function (args) {
   if (!(this instanceof lineAnnotation)) {
     return new lineAnnotation(args);
   }
-
-  args = $.extend(true, {}, {
+  args = $.extend(true, {}, this.constructor.defaults, {
     style: {
       line: function (d) {
         /* Return an array that has the same number of items as we have
@@ -48,16 +47,7 @@ var lineAnnotation = function (args) {
       },
       position: function (d, i) {
         return m_this.options('vertices')[i];
-      },
-      strokeColor: {r: 0, g: 0, b: 0},
-      strokeOpacity: 1,
-      strokeWidth: 3,
-      closed: false,
-      lineCap: 'butt',
-      lineJoin: 'miter'
-    },
-    highlightStyle: {
-      strokeWidth: 5
+      }
     },
     createStyle: {
       line: function (d) {
@@ -68,15 +58,9 @@ var lineAnnotation = function (args) {
       },
       position: function (d, i) {
         return m_this.options('vertices')[i];
-      },
-      strokeColor: {r: 0, g: 0, b: 1},
-      strokeOpacity: 1,
-      strokeWidth: 3,
-      closed: false,
-      lineCap: 'butt',
-      lineJoin: 'miter'
+      }
     }
-  }, args || {});
+  }, args);
   args.vertices = args.vertices || args.coordinates || [];
   delete args.coordinates;
   annotation.call(this, 'line', args);
@@ -337,6 +321,31 @@ var lineAnnotation = function (args) {
 };
 inherit(lineAnnotation, annotation);
 
+/**
+ * This object contains the default options to initialize the class.
+ */
+lineAnnotation.defaults = $.extend({}, annotation.defaults, {
+  style: {
+    strokeColor: {r: 0, g: 0, b: 0},
+    strokeOpacity: 1,
+    strokeWidth: 3,
+    closed: false,
+    lineCap: 'butt',
+    lineJoin: 'miter'
+  },
+  highlightStyle: {
+    strokeWidth: 5
+  },
+  createStyle: {
+    strokeColor: {r: 0, g: 0, b: 1},
+    strokeOpacity: 1,
+    strokeWidth: 3,
+    closed: false,
+    lineCap: 'butt',
+    lineJoin: 'miter'
+  }
+});
+
 var lineRequiredFeatures = {};
 lineRequiredFeatures[lineFeature.capabilities.basic] = [annotationState.create];
 registerAnnotation('line', lineAnnotation, lineRequiredFeatures);

src/annotation/pointAnnotation.js

@@ -40,29 +40,7 @@ var pointAnnotation = function (args) {
     return new pointAnnotation(args);
   }
 
-  args = $.extend(true, {}, {
-    style: {
-      fill: true,
-      fillColor: {r: 0, g: 1, b: 0},
-      fillOpacity: 0.25,
-      radius: 10,
-      scaled: false,
-      stroke: true,
-      strokeColor: {r: 0, g: 0, b: 0},
-      strokeOpacity: 1,
-      strokeWidth: 3
-    },
-    createStyle: {
-      fillColor: {r: 0.3, g: 0.3, b: 0.3},
-      fillOpacity: 0.25,
-      strokeColor: {r: 0, g: 0, b: 1}
-    },
-    highlightStyle: {
-      fillColor: {r: 0, g: 1, b: 1},
-      fillOpacity: 0.5,
-      strokeWidth: 5
-    }
-  }, args || {});
+  args = $.extend(true, {}, this.constructor.defaults, args);
   args.position = args.position || (args.coordinates ? args.coordinates[0] : undefined);
   delete args.coordinates;
   annotation.call(this, 'point', args);
@@ -201,6 +179,33 @@ var pointAnnotation = function (args) {
 };
 inherit(pointAnnotation, annotation);
 
+/**
+ * This object contains the default options to initialize the class.
+ */
+pointAnnotation.defaults = $.extend({}, annotation.defaults, {
+  style: {
+    fill: true,
+    fillColor: {r: 0, g: 1, b: 0},
+    fillOpacity: 0.25,
+    radius: 10,
+    scaled: false,
+    stroke: true,
+    strokeColor: {r: 0, g: 0, b: 0},
+    strokeOpacity: 1,
+    strokeWidth: 3
+  },
+  createStyle: {
+    fillColor: {r: 0.3, g: 0.3, b: 0.3},
+    fillOpacity: 0.25,
+    strokeColor: {r: 0, g: 0, b: 1}
+  },
+  highlightStyle: {
+    fillColor: {r: 0, g: 1, b: 1},
+    fillOpacity: 0.5,
+    strokeWidth: 5
+  }
+});
+
 var pointRequiredFeatures = {};
 pointRequiredFeatures[pointFeature.capabilities.feature] = true;
 registerAnnotation('point', pointAnnotation, pointRequiredFeatures);

src/annotation/polygonAnnotation.js

@@ -43,27 +43,11 @@ var polygonAnnotation = function (args) {
     return new polygonAnnotation(args);
   }
 
-  args = $.extend(true, {}, {
+  args = $.extend(true, {}, this.constructor.defaults, {
     style: {
-      fill: true,
-      fillColor: {r: 0, g: 1, b: 0},
-      fillOpacity: 0.25,
-      polygon: function (d) { return d.polygon; },
-      stroke: true,
-      strokeColor: {r: 0, g: 0, b: 0},
-      strokeOpacity: 1,
-      strokeWidth: 3,
-      uniformPolygon: true
-    },
-    highlightStyle: {
-      fillColor: {r: 0, g: 1, b: 1},
-      fillOpacity: 0.5,
-      strokeWidth: 5
+      polygon: function (d) { return d.polygon; }
     },
     createStyle: {
-      closed: false,
-      fillColor: {r: 0.3, g: 0.3, b: 0.3},
-      fillOpacity: 0.25,
       line: function (d) {
         const coord = m_this._coordinates();
         /* Return an array that has the same number of items as we have
@@ -76,11 +60,9 @@ var polygonAnnotation = function (args) {
           return d.x;
         }
         return m_this.options('vertices')[i];
-      },
-      stroke: false,
-      strokeColor: {r: 0, g: 0, b: 1}
+      }
     }
-  }, args || {});
+  }, args);
   args.vertices = args.vertices || args.coordinates || [];
   delete args.coordinates;
   annotation.call(this, 'polygon', args);
@@ -324,6 +306,35 @@ var polygonAnnotation = function (args) {
 };
 inherit(polygonAnnotation, annotation);
 
+/**
+ * This object contains the default options to initialize the class.
+ */
+polygonAnnotation.defaults = $.extend({}, annotation.defaults, {
+  style: {
+    fill: true,
+    fillColor: {r: 0, g: 1, b: 0},
+    fillOpacity: 0.25,
+    stroke: true,
+    strokeColor: {r: 0, g: 0, b: 0},
+    strokeOpacity: 1,
+    strokeWidth: 3,
+    uniformPolygon: true
+  },
+  highlightStyle: {
+    fillColor: {r: 0, g: 1, b: 1},
+    fillOpacity: 0.5,
+    strokeWidth: 5
+  },
+  createStyle: {
+    closed: false,
+    fillColor: {r: 0.3, g: 0.3, b: 0.3},
+    fillOpacity: 0.25,
+    stroke: false,
+    strokeColor: {r: 0, g: 0, b: 1}
+  },
+  allowBooleanOperations: true
+});
+
 var polygonRequiredFeatures = {};
 polygonRequiredFeatures[polygonFeature.capabilities.feature] = true;
 polygonRequiredFeatures[lineFeature.capabilities.basic] = [annotationState.create];

src/annotation/rectangleAnnotation.js

@@ -48,29 +48,7 @@ var rectangleAnnotation = function (args, annotationName) {
     return new rectangleAnnotation(args, annotationName);
   }
 
-  args = $.extend(true, {}, {
-    style: {
-      fill: true,
-      fillColor: {r: 0, g: 1, b: 0},
-      fillOpacity: 0.25,
-      polygon: function (d) { return d.polygon; },
-      stroke: true,
-      strokeColor: {r: 0, g: 0, b: 0},
-      strokeOpacity: 1,
-      strokeWidth: 3,
-      uniformPolygon: true
-    },
-    highlightStyle: {
-      fillColor: {r: 0, g: 1, b: 1},
-      fillOpacity: 0.5,
-      strokeWidth: 5
-    },
-    createStyle: {
-      fillColor: {r: 0.3, g: 0.3, b: 0.3},
-      fillOpacity: 0.25,
-      strokeColor: {r: 0, g: 0, b: 1}
-    }
-  }, args || {});
+  args = $.extend(true, {}, this.constructor.defaults, args);
   args.corners = args.corners || args.coordinates || [];
   delete args.coordinates;
   annotation.call(this, annotationName || 'rectangle', args);
@@ -408,6 +386,34 @@ var rectangleAnnotation = function (args, annotationName) {
 };
 inherit(rectangleAnnotation, annotation);
 
+/**
+ * This object contains the default options to initialize the class.
+ */
+rectangleAnnotation.defaults = $.extend({}, annotation.defaults, {
+  style: {
+    fill: true,
+    fillColor: {r: 0, g: 1, b: 0},
+    fillOpacity: 0.25,
+    polygon: function (d) { return d.polygon; },
+    stroke: true,
+    strokeColor: {r: 0, g: 0, b: 0},
+    strokeOpacity: 1,
+    strokeWidth: 3,
+    uniformPolygon: true
+  },
+  highlightStyle: {
+    fillColor: {r: 0, g: 1, b: 1},
+    fillOpacity: 0.5,
+    strokeWidth: 5
+  },
+  createStyle: {
+    fillColor: {r: 0.3, g: 0.3, b: 0.3},
+    fillOpacity: 0.25,
+    strokeColor: {r: 0, g: 0, b: 1}
+  },
+  allowBooleanOperations: true
+});
+
 var rectangleRequiredFeatures = {};
 rectangleRequiredFeatures[polygonFeature.capabilities.feature] = true;
 registerAnnotation('rectangle', rectangleAnnotation, rectangleRequiredFeatures);