Merge pull request #4194 from bjornharrtell/remove-goog-color

Remove usage of goog.color and closure named colors

changelog/upgrade-notes.md

@@ -1,5 +1,9 @@
 ## Upgrade notes
 
+#### Removal of `ol.ENABLE_NAMED_COLORS`
+
+This option was previously needed to use named colors with the WebGL renderer but is no longer needed.
+
 ### v3.17.0
 
 #### `ol.source.MapQuest` removal

src/ol/color/color.js

@@ -1,13 +1,6 @@
-// We can't use goog.color or goog.color.alpha because they interally use a hex
-// string representation that encodes each channel in a single byte.  This
-// causes occasional loss of precision and rounding errors, especially in the
-// alpha channel.
-
 goog.provide('ol.color');
 
 goog.require('goog.asserts');
-goog.require('goog.color');
-goog.require('goog.color.names');
 goog.require('ol');
 goog.require('ol.math');
 
@@ -22,7 +15,7 @@ ol.color.hexColorRe_ = /^#(?:[0-9a-f]{3}){1,2}$/i;
 
 
 /**
- * @see goog.color.rgbColorRe_
+ * Regular expression for matching and capturing RGB style strings.
  * @const
  * @type {RegExp}
  * @private
@@ -32,7 +25,7 @@ ol.color.rgbColorRe_ =
 
 
 /**
- * @see goog.color.alpha.rgbaColorRe_
+ * Regular expression for matching and capturing RGBA style strings.
  * @const
  * @type {RegExp}
  * @private
@@ -41,6 +34,16 @@ ol.color.rgbaColorRe_ =
     /^(?:rgba)?\((0|[1-9]\d{0,2}),\s?(0|[1-9]\d{0,2}),\s?(0|[1-9]\d{0,2}),\s?(0|1|0\.\d{0,10})\)$/i;
 
 
+/**
+ * Regular expression for matching potential named color style strings.
+ * @const
+ * @type {RegExp}
+ * @private
+ */
+ol.color.namedColorRe_ =
+    /^([a-z]*)$/i;
+
+
 /**
  * Return the color as an array. This function maintains a cache of calculated
  * arrays which means the result should not be modified.
@@ -73,6 +76,20 @@ ol.color.asString = function(color) {
   }
 };
 
+/**
+ * Return named color as an rgba string.
+ * @param {string} color Named color.
+ * @return {string} Rgb string.
+ */
+ol.color.fromNamed = function(color) {
+  var el = document.createElement('div');
+  el.style.color = color;
+  document.body.appendChild(el);
+  var rgb = window.getComputedStyle(el).color;
+  document.body.removeChild(el);
+  return rgb;
+};
+
 
 /**
  * @param {string} s String.
@@ -137,15 +154,13 @@ ol.color.fromString = (
  * @return {ol.Color} Color.
  */
 ol.color.fromStringInternal_ = function(s) {
+  var r, g, b, a, color, match;
 
-  var isHex = false;
-  if (ol.ENABLE_NAMED_COLORS && goog.color.names.hasOwnProperty(s)) {
-    s = goog.color.names[s];
-    isHex = true;
+  if (ol.color.namedColorRe_.exec(s)) {
+    s = ol.color.fromNamed(s);
   }
 
-  var r, g, b, a, color, match;
-  if (isHex || (match = ol.color.hexColorRe_.exec(s))) { // hex
+  if (ol.color.hexColorRe_.exec(s)) { // hex
     var n = s.length - 1; // number of hex digits
     goog.asserts.assert(n == 3 || n == 6,
         'Color string length should be 3 or 6');

src/ol/ol.js

@@ -78,16 +78,6 @@ ol.ENABLE_DOM = true;
 ol.ENABLE_IMAGE = true;
 
 
-/**
- * @define {boolean} Enable Closure named colors (`goog.color.names`).
- *     Enabling these colors adds about 3KB uncompressed / 1.5KB compressed to
- *     the final build size.  Default is `false`. This setting has no effect
- *     with Canvas renderer, which uses its own names, whether this is true or
- *     false.
- */
-ol.ENABLE_NAMED_COLORS = false;
-
-
 /**
  * @define {boolean} Enable integration with the Proj4js library.  Default is
  *     `true`.

test/spec/ol/color.test.js

@@ -81,15 +81,13 @@ describe('ol.color', function() {
           [255, 255, 0, 0.1]);
     });
 
-    if (ol.ENABLE_NAMED_COLORS) {
-      it('caches parsed values', function() {
-        var count = ol.color.fromStringInternal_.callCount;
-        ol.color.fromString('aquamarine');
-        expect(ol.color.fromStringInternal_.callCount).to.be(count + 1);
-        ol.color.fromString('aquamarine');
-        expect(ol.color.fromStringInternal_.callCount).to.be(count + 1);
-      });
-    }
+    it('caches parsed values', function() {
+      var count = ol.color.fromStringInternal_.callCount;
+      ol.color.fromString('aquamarine');
+      expect(ol.color.fromStringInternal_.callCount).to.be(count + 1);
+      ol.color.fromString('aquamarine');
+      expect(ol.color.fromStringInternal_.callCount).to.be(count + 1);
+    });
 
     it('throws an error on invalid colors', function() {
       var invalidColors = ['tuesday', '#1234567', 'rgb(255.0,0,0)'];