feat(FillStyle): Add controls for fill color and opacity for shapes

src/os/command/feature/abstractfeaturestylecmd.js

@@ -1,5 +1,7 @@
 goog.provide('os.command.AbstractFeatureStyle');
+
 goog.require('goog.events.Event');
+goog.require('os.action.EventType');
 goog.require('os.command.AbstractStyle');
 goog.require('os.command.ICommand');
 goog.require('os.command.State');
@@ -67,7 +69,7 @@ os.command.AbstractFeatureStyle.prototype.applyValue = function(configs, value)
  * @inheritDoc
  */
 os.command.AbstractFeatureStyle.prototype.finish = function(configs) {
-  os.dispatcher.dispatchEvent(new goog.events.Event(plugin.file.kml.KMLNodeLayerUICtrl.UIEventType.REFRESH));
+  os.dispatcher.dispatchEvent(new goog.events.Event(os.action.EventType.REFRESH));
   var feature = /** @type {ol.Feature} */ (this.getFeature());
   var layer = os.MapContainer.getInstance().getLayer(this.layerId);
   goog.asserts.assert(layer, 'layer must be defined');

src/os/command/feature/featurecolorcmd.js

@@ -1,8 +1,10 @@
 goog.provide('os.command.FeatureColor');
 
 goog.require('os.command.AbstractFeatureStyle');
+goog.require('os.command.style');
 goog.require('os.events.PropertyChangeEvent');
 goog.require('os.metrics');
+goog.require('os.style');
 
 
 
@@ -13,13 +15,39 @@ goog.require('os.metrics');
  * @param {string} layerId
  * @param {string} featureId
  * @param {Array<number>|string} color
- * @param {(Array<number>|string)=} opt_oldColor
+ * @param {(Array<number>|string|null)=} opt_oldColor
+ * @param {os.command.style.ColorChangeType=} opt_changeMode
  * @constructor
  */
-os.command.FeatureColor = function(layerId, featureId, color, opt_oldColor) {
+os.command.FeatureColor = function(layerId, featureId, color, opt_oldColor, opt_changeMode) {
+  /**
+   * The color change mode. Determines how the config color is set.
+   * @type {os.command.style.ColorChangeType}
+   * @protected
+   */
+  this.changeMode = opt_changeMode || os.command.style.ColorChangeType.COMBINED;
+
+  // intentionally called after changeMode is set so getOldValue has the correct value
   os.command.FeatureColor.base(this, 'constructor', layerId, featureId, color, opt_oldColor);
-  this.title = 'Change Feature Color';
-  this.metricKey = os.metrics.Layer.FEATURE_COLOR;
+
+  switch (this.changeMode) {
+    case os.command.style.ColorChangeType.FILL:
+      this.title = 'Change Feature Fill Color';
+      this.metricKey = os.metrics.Layer.FEATURE_FILL_COLOR;
+      this.defaultColor = os.command.FeatureColor.DEFAULT_FILL_COLOR;
+      break;
+    case os.command.style.ColorChangeType.STROKE:
+      this.title = 'Change Feature Color';
+      this.metricKey = os.metrics.Layer.FEATURE_COLOR;
+      this.defaultColor = os.command.FeatureColor.DEFAULT_COLOR;
+      break;
+    case os.command.style.ColorChangeType.COMBINED:
+    default:
+      this.title = 'Change Feature Color';
+      this.metricKey = os.metrics.Layer.FEATURE_COLOR;
+      this.defaultColor = os.command.FeatureColor.DEFAULT_COLOR;
+      break;
+  }
 
   if (!color) {
     var feature = /** @type {ol.Feature} */ (this.getFeature());
@@ -49,6 +77,13 @@ goog.inherits(os.command.FeatureColor, os.command.AbstractFeatureStyle);
 os.command.FeatureColor.DEFAULT_COLOR = 'rgba(255,255,255,1)';
 
 
+/**
+ * @type {string}
+ * @const
+ */
+os.command.FeatureColor.DEFAULT_FILL_COLOR = 'rgba(255,255,255,0)';
+
+
 /**
  * @inheritDoc
  */
@@ -59,14 +94,31 @@ os.command.FeatureColor.prototype.getOldValue = function() {
     config = config[0];
   }
 
-  return config ? os.style.getConfigColor(config) : os.command.FeatureColor.DEFAULT_COLOR;
+  var ret = this.defaultColor;
+
+  if (config) {
+    switch (this.changeMode) {
+      case os.command.style.ColorChangeType.FILL:
+        ret = os.style.getConfigColor(config, false, os.style.StyleField.FILL);
+        break;
+      case os.command.style.ColorChangeType.STROKE:
+        ret = os.style.getConfigColor(config, false, os.style.StyleField.STROKE);
+        break;
+      case os.command.style.ColorChangeType.COMBINED:
+      default:
+        ret = os.style.getConfigColor(config);
+        break;
+    }
+  }
+
+  return ret;
 };
 
 
 /**
  * Gets the old label color
  *
- * @return {Array<number>|string|undefined}
+ * @return {Array<number>|string}
  */
 os.command.FeatureColor.prototype.getLabelValue = function() {
   var feature = /** @type {ol.Feature} */ (this.getFeature());
@@ -80,13 +132,46 @@ os.command.FeatureColor.prototype.getLabelValue = function() {
  */
 os.command.FeatureColor.prototype.applyValue = function(configs, value) {
   var color = os.style.toRgbaString(/** @type {string} */ (value));
-  for (var i = 0; i < configs.length; i++) {
-    os.style.setConfigColor(configs[i], color);
-  }
 
-  if (this.oldValue == this.getLabelValue()) {
-    this.applyLabelValue(configs, value);
+  // ignore opacity when comparing the label color to the current color
+  var labelColor = os.color.toHexString(this.getLabelValue());
+  var currentColor = os.color.toHexString(this.state === os.command.State.EXECUTING ? this.oldValue : this.value);
+
+  switch (this.changeMode) {
+    case os.command.style.ColorChangeType.FILL:
+      for (var i = 0; i < configs.length; i++) {
+        os.style.setFillColor(configs[i], color);
+      }
+      break;
+    case os.command.style.ColorChangeType.STROKE:
+      for (var i = 0; i < configs.length; i++) {
+        var fillColor = os.style.getConfigColor(configs[i], true, os.style.StyleField.FILL);
+
+        os.style.setConfigColor(configs[i], color);
+
+        if (fillColor) {
+          os.style.setFillColor(configs[i], fillColor);
+        }
+      }
+
+      // if the label color matches the style color, change it as well
+      if (labelColor == currentColor) {
+        this.applyLabelValue(configs, color);
+      }
+      break;
+    case os.command.style.ColorChangeType.COMBINED:
+    default:
+      for (var i = 0; i < configs.length; i++) {
+        os.style.setConfigColor(configs[i], color);
+      }
+
+      // if the label color matches the style color, change it as well
+      if (labelColor == currentColor) {
+        this.applyLabelValue(configs, color);
+      }
+      break;
   }
+
   os.command.FeatureColor.base(this, 'applyValue', configs, value);
 };
 
@@ -112,14 +197,9 @@ os.command.FeatureColor.prototype.applyLabelValue = function(configs, value) {
  */
 os.command.FeatureColor.prototype.finish = function(configs) {
   // dispatch the color change event on the source for the histogram
-  var feature = /** @type {ol.Feature} */ (this.getFeature());
-  var source = /** @type {plugin.file.kml.KMLSource} */ (os.feature.getSource(feature));
-  var rootNode = source.getRootNode();
-  var children = rootNode.getChildren();
+  var feature = this.getFeature();
 
-  for (var i = 0; i < children.length; i++) { // update icon color
-    children[i].dispatchEvent(new os.events.PropertyChangeEvent('icons'));
-  }
+  feature.dispatchEvent(new os.events.PropertyChangeEvent('colors'));
 
   os.command.FeatureColor.base(this, 'finish', configs);
 };

src/os/command/feature/featureopacitycmd.js

@@ -1,8 +1,11 @@
 goog.provide('os.command.FeatureOpacity');
 
+goog.require('goog.asserts');
 goog.require('os.command.AbstractFeatureStyle');
+goog.require('os.command.style');
+goog.require('os.events.PropertyChangeEvent');
 goog.require('os.metrics');
-goog.require('os.ui');
+goog.require('os.style');
 
 
 
@@ -13,59 +16,142 @@ goog.require('os.ui');
  * @param {string} layerId
  * @param {string} featureId
  * @param {number} opacity
- * @param {number=} opt_oldOpacity
+ * @param {number|null=} opt_oldOpacity
+ * @param {os.command.style.ColorChangeType=} opt_changeMode
  * @constructor
  */
-os.command.FeatureOpacity = function(layerId, featureId, opacity, opt_oldOpacity) {
-  os.command.FeatureOpacity.base(this, 'constructor', layerId, featureId, opacity, opt_oldOpacity);
-  this.title = 'Change Feature Opacity';
-  this.metricKey = os.metrics.Layer.FEATURE_OPACITY;
+os.command.FeatureOpacity = function(layerId, featureId, opacity, opt_oldOpacity, opt_changeMode) {
+  goog.asserts.assert(opacity != null, 'opacity must be defined');
 
-  if (!opacity) {
-    var feature = /** @type {ol.Feature} */ (this.getFeature());
-    var config = /** @type {Object|undefined} */ (feature.get(os.style.StyleType.FEATURE));
+  /**
+   * The opacity change mode. Determines how the config opacity is set.
+   * @type {os.command.style.ColorChangeType}
+   * @protected
+   */
+  this.changeMode = opt_changeMode || os.command.style.ColorChangeType.COMBINED;
 
-    if (config) {
-      if (goog.isArray(config)) {
-        config = config[0];
-      }
-      opacity = /** @type {number} */ (os.style.getConfigOpacityColor(config));
-    }
-  }
+  // intentionally called after changeMode is set so getOldValue has the correct value
+  os.command.FeatureOpacity.base(this, 'constructor', layerId, featureId, opacity, opt_oldOpacity);
 
-  this.value = opacity;
+  switch (this.changeMode) {
+    case os.command.style.ColorChangeType.FILL:
+      this.title = 'Change Feature Fill Opacity';
+      this.metricKey = os.metrics.Layer.FEATURE_FILL_OPACITY;
+      break;
+    case os.command.style.ColorChangeType.STROKE:
+      this.title = 'Change Feature Opacity';
+      this.metricKey = os.metrics.Layer.FEATURE_OPACITY;
+      break;
+    case os.command.style.ColorChangeType.COMBINED:
+    default:
+      this.title = 'Change Feature Opacity';
+      this.metricKey = os.metrics.Layer.FEATURE_OPACITY;
+      break;
+  }
 };
 goog.inherits(os.command.FeatureOpacity, os.command.AbstractFeatureStyle);
 
 
-/**
- * @type {number}
- * @const
- */
-os.command.FeatureOpacity.DEFAULT_OPACITY = 1;
-
-
 /**
  * @inheritDoc
  */
 os.command.FeatureOpacity.prototype.getOldValue = function() {
+  var ret;
   var feature = /** @type {ol.Feature} */ (this.getFeature());
   var config = /** @type {Array<Object>|Object|undefined} */ (this.getFeatureConfigs(feature));
-  if (goog.isArray(config)) {
+  if (Array.isArray(config)) {
     config = config[0];
   }
 
-  return config ? os.style.getConfigOpacityColor(config) : os.command.FeatureOpacity.DEFAULT_OPACITY;
+  if (config) {
+    var color;
+    switch (this.changeMode) {
+      case os.command.style.ColorChangeType.FILL:
+        color = os.style.getConfigColor(config, true, os.style.StyleField.FILL);
+        ret = color && color.length === 4 ? color[3] : os.style.DEFAULT_FILL_ALPHA;
+        break;
+      case os.command.style.ColorChangeType.STROKE:
+        color = os.style.getConfigColor(config, true, os.style.StyleField.STROKE);
+        ret = color && color.length === 4 ? color[3] : os.style.DEFAULT_ALPHA;
+        break;
+      case os.command.style.ColorChangeType.COMBINED:
+      default:
+        color = os.style.getConfigColor(config, true);
+        ret = color && color.length === 4 ? color[3] : os.style.DEFAULT_ALPHA;
+        break;
+    }
+  }
+
+  return ret;
 };
 
 
 /**
  * @inheritDoc
  */
 os.command.FeatureOpacity.prototype.applyValue = function(configs, value) {
-  for (var i = 0; i < configs.length; i++) {
-    os.style.setConfigOpacityColor(configs[i], value);
+  var color;
+  var colorValue;
+  var i;
+
+  switch (this.changeMode) {
+    case os.command.style.ColorChangeType.FILL:
+      for (i = 0; i < configs.length; i++) {
+        color = os.style.getConfigColor(configs[i], true, os.style.StyleField.FILL) ||
+            os.style.getConfigColor(configs[i], true);
+
+        if (color) {
+          color[3] = value;
+          colorValue = os.style.toRgbaString(color);
+          os.style.setFillColor(configs[i], colorValue);
+        }
+      }
+      break;
+    case os.command.style.ColorChangeType.STROKE:
+      for (i = 0; i < configs.length; i++) {
+        color = os.style.getConfigColor(configs[i], true, os.style.StyleField.STROKE) ||
+            os.style.getConfigColor(configs[i], true);
+
+        if (color) {
+          var fillColor = os.style.getConfigColor(configs[i], true, os.style.StyleField.FILL);
+
+          color[3] = value;
+          colorValue = os.style.toRgbaString(color);
+          os.style.setConfigColor(configs[i], colorValue);
+
+          // preserve the original fill color when changing the stroke
+          if (fillColor) {
+            os.style.setFillColor(configs[i], fillColor);
+          }
+        }
+      }
+      break;
+    case os.command.style.ColorChangeType.COMBINED:
+    default:
+      for (i = 0; i < configs.length; i++) {
+        color = os.style.getConfigColor(configs[i], true);
+
+        if (color) {
+          color[3] = value;
+          colorValue = os.style.toRgbaString(color);
+          os.style.setConfigColor(configs[i], colorValue);
+        }
+      }
+      break;
   }
 
   os.command.FeatureOpacity.base(this, 'applyValue', configs, value);
 };
+
+
+/**
+ * @inheritDoc
+ */
+os.command.FeatureOpacity.prototype.finish = function(configs) {
+  // dispatch the color change event on the source for the histogram
+  var feature = this.getFeature();
+
+  feature.dispatchEvent(new os.events.PropertyChangeEvent('colors'));
+
+  os.command.FeatureOpacity.base(this, 'finish', configs);
+};

src/os/command/stylecommand.js

@@ -0,0 +1,12 @@
+goog.provide('os.command.style');
+
+
+/**
+ * Change types for color commands. Determines how color/opacity is set in style configs.
+ * @enum {string}
+ */
+os.command.style.ColorChangeType = {
+  COMBINED: 'combined',
+  FILL: 'fill',
+  STROKE: 'stroke'
+};