Merge pull request #653 from fredj/background-color

Remove BACKGROUND_COLOR from ol.Map

resources/layout.css

@@ -6,6 +6,7 @@ body {
 .map {
   height: 400px;
   width: 100%;
+  background: url(textured_paper.jpeg) repeat;
 }
 .ol-attribution {
   max-width: 50%;

src/ol/framestate.js

@@ -7,7 +7,6 @@ goog.provide('ol.PreRenderFunction');
 
 goog.require('goog.vec.Mat4');
 goog.require('ol.Attribution');
-goog.require('ol.Color');
 goog.require('ol.Extent');
 goog.require('ol.Size');
 goog.require('ol.TileQueue');
@@ -20,7 +19,6 @@ goog.require('ol.layer.LayerState');
 /**
  * @typedef {{animate: boolean,
  *            attributions: Object.<string, ol.Attribution>,
- *            backgroundColor: ol.Color,
  *            coordinateToPixelMatrix: goog.vec.Mat4.Number,
  *            extent: (null|ol.Extent),
  *            focus: ol.Coordinate,

src/ol/map.js

@@ -31,7 +31,6 @@ goog.require('ol.BrowserFeature');
 goog.require('ol.Collection');
 goog.require('ol.CollectionEvent');
 goog.require('ol.CollectionEventType');
-goog.require('ol.Color');
 goog.require('ol.FrameState');
 goog.require('ol.IView');
 goog.require('ol.MapBrowserEvent');
@@ -109,7 +108,6 @@ ol.DEFAULT_RENDERER_HINTS = [
  * @enum {string}
  */
 ol.MapProperty = {
-  BACKGROUND_COLOR: 'backgroundColor',
   LAYERS: 'layers',
   SIZE: 'size',
   TARGET: 'target',
@@ -314,9 +312,6 @@ ol.Map = function(options) {
       this.handleSizeChanged_, false, this);
   goog.events.listen(this, ol.Object.getChangedEventType(ol.MapProperty.TARGET),
       this.handleTargetChanged_, false, this);
-  goog.events.listen(
-      this, ol.Object.getChangedEventType(ol.MapProperty.BACKGROUND_COLOR),
-      this.handleBackgroundColorChanged_, false, this);
 
   // setValues will trigger the rendering of the map if the map
   // is "defined" already.
@@ -394,19 +389,6 @@ ol.Map.prototype.freezeRendering = function() {
 };
 
 
-/**
- * @return {ol.Color|undefined} Background color.
- */
-ol.Map.prototype.getBackgroundColor = function() {
-  return /** @type {ol.Color|undefined} */ (
-      this.get(ol.MapProperty.BACKGROUND_COLOR));
-};
-goog.exportProperty(
-    ol.Map.prototype,
-    'getBackgroundColor',
-    ol.Map.prototype.getBackgroundColor);
-
-
 /**
  * @return {ol.renderer.Map} Renderer.
  */
@@ -671,14 +653,6 @@ ol.Map.prototype.handlePostRender = function() {
 };
 
 
-/**
- * @private
- */
-ol.Map.prototype.handleBackgroundColorChanged_ = function() {
-  this.render();
-};
-
-
 /**
  * @private
  */
@@ -813,7 +787,6 @@ ol.Map.prototype.renderFrame_ = function(time) {
   var frameState = null;
   if (goog.isDef(layersArray) && goog.isDef(size) && goog.isDef(view2D) &&
       view2D.isDef()) {
-    var backgroundColor = this.getBackgroundColor();
     var viewHints = view.getHints();
     var layerStates = {};
     var layer;
@@ -825,8 +798,6 @@ ol.Map.prototype.renderFrame_ = function(time) {
     frameState = {
       animate: false,
       attributions: {},
-      backgroundColor: goog.isDef(backgroundColor) ?
-          backgroundColor : new ol.Color(255, 255, 255, 1),
       coordinateToPixelMatrix: this.coordinateToPixelMatrix_,
       extent: null,
       focus: goog.isNull(this.focus_) ? view2DState.center : this.focus_,
@@ -884,18 +855,6 @@ ol.Map.prototype.renderFrame_ = function(time) {
 };
 
 
-/**
- * @param {ol.Color} backgroundColor Background color.
- */
-ol.Map.prototype.setBackgroundColor = function(backgroundColor) {
-  this.set(ol.MapProperty.BACKGROUND_COLOR, backgroundColor);
-};
-goog.exportProperty(
-    ol.Map.prototype,
-    'setBackgroundColor',
-    ol.Map.prototype.setBackgroundColor);
-
-
 /**
  * @param {ol.Collection} layers Layers.
  */

src/ol/renderer/canvas/canvasmaprenderer.js

@@ -108,13 +108,7 @@ ol.renderer.canvas.Map.prototype.renderFrame = function(frameState) {
 
   var context = this.context_;
   context.setTransform(1, 0, 0, 1, 0, 0);
-  var backgroundColor = frameState.backgroundColor;
+  context.clearRect(0, 0, size.width, size.height);
-  context.fillStyle = 'rgb(' +
-      backgroundColor.r.toFixed(0) + ',' +
-      backgroundColor.g.toFixed(0) + ',' +
-      backgroundColor.b.toFixed(0) + ')';
-  context.globalAlpha = 1;
-  context.fillRect(0, 0, size.width, size.height);
 
   this.calculateMatrices2D(frameState);
 

src/ol/renderer/webgl/webglmaprenderer.js

@@ -89,7 +89,6 @@ ol.renderer.webgl.Map = function(container, map) {
    * @type {WebGLRenderingContext}
    */
   this.gl_ = ol.webgl.getContext(this.canvas_, {
-    alpha: false,
     antialias: true,
     depth: false,
     preserveDrawingBuffer: false,
@@ -484,7 +483,9 @@ ol.renderer.webgl.Map.prototype.handleWebGLContextRestored = function() {
 ol.renderer.webgl.Map.prototype.initializeGL_ = function() {
   var gl = this.gl_;
   gl.activeTexture(goog.webgl.TEXTURE0);
-  gl.blendFunc(goog.webgl.SRC_ALPHA, goog.webgl.ONE_MINUS_SRC_ALPHA);
+  gl.blendFuncSeparate(
+      goog.webgl.SRC_ALPHA, goog.webgl.ONE_MINUS_SRC_ALPHA,
+      goog.webgl.ONE, goog.webgl.ONE_MINUS_SRC_ALPHA);
   gl.disable(goog.webgl.CULL_FACE);
   gl.disable(goog.webgl.DEPTH_TEST);
   gl.disable(goog.webgl.SCISSOR_TEST);
@@ -545,9 +546,7 @@ ol.renderer.webgl.Map.prototype.renderFrame = function(frameState) {
 
   gl.bindFramebuffer(goog.webgl.FRAMEBUFFER, null);
 
-  var clearColor = frameState.backgroundColor;
+  gl.clearColor(0, 0, 0, 0);
-  gl.clearColor(clearColor.r / 255, clearColor.g / 255,
-      clearColor.b / 255, clearColor.a);
   gl.clear(goog.webgl.COLOR_BUFFER_BIT);
   gl.enable(goog.webgl.BLEND);
   gl.viewport(0, 0, size.width, size.height);