Add ol.Color

src/ol/color.js

@@ -0,0 +1,56 @@
+goog.provide('ol.Color');
+
+goog.require('goog.color');
+
+
+
+/**
+ * @constructor
+ * @param {number} r Red.
+ * @param {number} g Green.
+ * @param {number} b Blue.
+ * @param {number} a Alpha.
+ */
+ol.Color = function(r, g, b, a) {
+
+  /**
+   * @type {number}
+   */
+  this.r = r;
+
+  /**
+   * @type {number}
+   */
+  this.g = g;
+
+  /**
+   * @type {number}
+   */
+  this.b = b;
+
+  /**
+   * @type {number}
+   */
+  this.a = a;
+
+};
+
+
+/**
+ * @param {string} str String.
+ * @param {number=} opt_a Alpha.
+ * @return {ol.Color} Color.
+ */
+ol.Color.createFromString = function(str, opt_a) {
+  var rgb = goog.color.hexToRgb(goog.color.parse(str).hex);
+  var a = goog.isDef(opt_a) ? opt_a : 255;
+  return new ol.Color(rgb[0], rgb[1], rgb[2], a);
+};
+
+
+/**
+ * @return {ol.Color} Clone.
+ */
+ol.Color.prototype.clone = function() {
+  return new ol.Color(this.r, this.g, this.b, this.a);
+};

src/ol/map.js

@@ -4,7 +4,6 @@ goog.provide('ol.Map');
 goog.provide('ol.MapProperty');
 
 goog.require('goog.array');
-goog.require('goog.color');
 goog.require('goog.dom.ViewportSizeMonitor');
 goog.require('goog.events');
 goog.require('goog.events.BrowserEvent');
@@ -17,6 +16,7 @@ goog.require('goog.fx.anim');
 goog.require('goog.fx.anim.Animated');
 goog.require('goog.object');
 goog.require('ol.Array');
+goog.require('ol.Color');
 goog.require('ol.Control');
 goog.require('ol.Coordinate');
 goog.require('ol.Extent');
@@ -257,10 +257,10 @@ ol.Map.prototype.forEachVisibleLayer = function(f, opt_obj) {
 
 
 /**
- * @return {string|undefined} Background color.
+ * @return {ol.Color|undefined} Background color.
  */
 ol.Map.prototype.getBackgroundColor = function() {
-  return /** @type {string|undefined} */ (
+  return /** @type {ol.Color|undefined} */ (
       this.get(ol.MapProperty.BACKGROUND_COLOR));
 };
 
@@ -672,10 +672,9 @@ ol.Map.prototype.removeLayerRenderer = function(layer) {
 
 
 /**
- * @param {string} backgroundColor Background color.
+ * @param {ol.Color} backgroundColor Background color.
  */
 ol.Map.prototype.setBackgroundColor = function(backgroundColor) {
-  goog.color.parse(backgroundColor);
   this.set(ol.MapProperty.BACKGROUND_COLOR, backgroundColor);
 };
 

src/ol/webgl/map.js

@@ -7,7 +7,6 @@
 goog.provide('ol.webgl.Map');
 goog.provide('ol.webgl.map.shader');
 
-goog.require('goog.color');
 goog.require('goog.dispose');
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
@@ -121,6 +120,12 @@ ol.webgl.Map = function(target, opt_values) {
   goog.events.listen(this.canvas_, ol.webgl.WebGLContextEventType.RESTORED,
       this.handleWebGLContextRestored, false, this);
 
+  /**
+   * @private
+   * @type {ol.Color}
+   */
+  this.clearColor_ = new ol.Color(1, 1, 1, 1);
+
   /**
    * @private
    * @type {{aPosition: number,
@@ -312,6 +317,12 @@ ol.webgl.Map.prototype.getTileTexture = function(tile) {
  * @inheritDoc
  */
 ol.webgl.Map.prototype.handleBackgroundColorChanged = function() {
+  var backgroundColor = this.getBackgroundColor();
+  this.clearColor_ = new ol.Color(
+      backgroundColor.r / 255,
+      backgroundColor.g / 255,
+      backgroundColor.b / 255,
+      backgroundColor.a / 255);
   this.redraw();
 };
 
@@ -429,17 +440,8 @@ ol.webgl.Map.prototype.redrawInternal = function() {
 
   gl.bindFramebuffer(goog.webgl.FRAMEBUFFER, null);
 
-  var red, green, blue;
+  gl.clearColor(this.clearColor_.r, this.clearColor_.g, this.clearColor_.b,
-  var backgroundColor = this.getBackgroundColor();
+      this.clearColor_.a);
-  if (goog.isDef(backgroundColor)) {
-    var rgb = goog.color.hexToRgb(goog.color.parse(backgroundColor).hex);
-    red = rgb[0] / 255;
-    green = rgb[1] / 255;
-    blue = rgb[2] / 255;
-  } else {
-    red = green = blue = 1;
-  }
-  gl.clearColor(red, green, blue, 1);
   gl.clear(goog.webgl.COLOR_BUFFER_BIT);
   gl.enable(goog.webgl.BLEND);
   gl.blendFunc(goog.webgl.SRC_ALPHA, goog.webgl.ONE_MINUS_SRC_ALPHA);