Add canvas renderer

src/ol/renderer/canvas/canvasmaprenderer.js

@@ -0,0 +1,178 @@
+// FIXME offset panning
+
+goog.provide('ol.renderer.canvas.Map');
+
+goog.require('goog.dom');
+goog.require('goog.style');
+goog.require('goog.vec.Mat4');
+goog.require('ol.Size');
+goog.require('ol.layer.TileLayer');
+goog.require('ol.renderer.Map');
+goog.require('ol.renderer.canvas.TileLayer');
+
+
+
+/**
+ * @constructor
+ * @extends {ol.renderer.Map}
+ * @param {Element} container Container.
+ * @param {ol.Map} map Map.
+ */
+ol.renderer.canvas.Map = function(container, map) {
+
+  goog.base(this, container, map);
+
+  /**
+   * @private
+   * @type {ol.Size}
+   */
+  this.canvasSize_ = new ol.Size(container.clientHeight, container.clientWidth);
+
+  /**
+   * @private
+   * @type {Element}
+   */
+  this.canvas_ = goog.dom.createElement(goog.dom.TagName.CANVAS);
+  this.canvas_.height = this.canvasSize_.height;
+  this.canvas_.width = this.canvasSize_.width;
+  this.canvas_.className = 'ol-unselectable';
+  goog.dom.insertChildAt(container, this.canvas_, 0);
+
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.renderedVisible_ = true;
+
+  /**
+   * @private
+   * @type {CanvasRenderingContext2D}
+   */
+  this.context_ = this.canvas_.getContext('2d');
+
+};
+goog.inherits(ol.renderer.canvas.Map, ol.renderer.Map);
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.canvas.Map.prototype.createLayerRenderer = function(layer) {
+  if (layer instanceof ol.layer.TileLayer) {
+    return new ol.renderer.canvas.TileLayer(this, layer);
+  } else {
+    goog.asserts.assert(false);
+    return null;
+  }
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.canvas.Map.prototype.handleBackgroundColorChanged = function() {
+  this.getMap().render();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.canvas.Map.prototype.handleViewPropertyChanged = function() {
+  goog.base(this, 'handleViewPropertyChanged');
+  this.getMap().render();
+};
+
+
+/**
+ * @param {goog.events.Event} event Event.
+ * @protected
+ */
+ol.renderer.canvas.Map.prototype.handleLayerRendererChange = function(event) {
+  this.getMap().render();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.canvas.Map.prototype.handleSizeChanged = function() {
+  goog.base(this, 'handleSizeChanged');
+  this.getMap().render();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.canvas.Map.prototype.handleViewChanged = function() {
+  goog.base(this, 'handleViewChanged');
+  this.getMap().render();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.canvas.Map.prototype.renderFrame = function(frameState) {
+
+  if (goog.isNull(frameState)) {
+    if (this.renderedVisible_) {
+      goog.style.showElement(this.canvas_, false);
+      this.renderedVisible_ = false;
+    }
+    return;
+  }
+
+  var size = frameState.size;
+  if (!this.canvasSize_.equals(size)) {
+    this.canvas_.width = size.width;
+    this.canvas_.height = size.height;
+    this.canvasSize_ = size;
+  }
+
+  // FIXME filling the background doesn't seem to work
+  var context = this.context_;
+  context.setTransform(1, 0, 1, 0, 0, 0);
+  var backgroundColor = frameState.backgroundColor;
+  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);
+
+  goog.array.forEach(frameState.layersArray, function(layer) {
+
+    var layerState = frameState.layerStates[goog.getUid(layer)];
+    if (!layerState.visible) {
+      return;
+    } else if (!layerState.ready) {
+      frameState.animate = true;
+      return;
+    }
+    var layerRenderer = this.getLayerRenderer(layer);
+    layerRenderer.renderFrame(frameState, layerState);
+
+    var transform = layerRenderer.getTransform();
+    context.setTransform(
+        goog.vec.Mat4.getElement(transform, 0, 0),
+        goog.vec.Mat4.getElement(transform, 1, 0),
+        goog.vec.Mat4.getElement(transform, 0, 1),
+        goog.vec.Mat4.getElement(transform, 1, 1),
+        goog.vec.Mat4.getElement(transform, 0, 3),
+        goog.vec.Mat4.getElement(transform, 1, 3));
+
+    context.globalAlpha = layerState.opacity;
+    context.drawImage(layerRenderer.getImage(), 0, 0);
+
+  }, this);
+
+  if (!this.renderedVisible_) {
+    goog.style.showElement(this.canvas_, true);
+    this.renderedVisible_ = true;
+  }
+
+  this.calculateMatrices2D(frameState);
+
+};