Icon images are handled by a separate class

2014-02-03 13:58:20 +01:00
parent e0db06c39a
commit 3626ff5b16
3 changed files with 315 additions and 137 deletions
@@ -8,6 +8,7 @@ goog.require('goog.asserts');
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
 goog.require('goog.events');
+goog.require('goog.events.EventTarget');
 goog.require('goog.events.EventType');
 goog.require('ol.style.Image');
 goog.require('ol.style.ImageState');
@@ -32,49 +33,11 @@ ol.style.Icon = function(opt_options) {

  var options = goog.isDef(opt_options) ? opt_options : {};

-  /**
-   * @private
-   * @type {Image|HTMLCanvasElement}
-   */
-  this.hitDetectionImage_ = null;
-
-  /**
-   * @private
-   * @type {Image}
-   */
-  this.image_ = new Image();
-
-  /**
-   * @type {?string}
-   */
-  var crossOrigin =
-      goog.isDef(options.crossOrigin) ? options.crossOrigin : null;
-  if (!goog.isNull(crossOrigin)) {
-    this.image_.crossOrigin = crossOrigin;
-  }
-
  /**
   * @private
   * @type {Array.<number>}
   */
-  this.imageListenerKeys_ = null;
-
-  /**
-   * @private
-   * @type {string|undefined}
-   */
-  this.src_ = options.src;
-
-  /**
-   * @private
-   * @type {boolean}
-   */
-  this.tainting_ = false;
-
-  /**
-   * @type {ol.Size}
-   */
-  var size = goog.isDef(options.size) ? options.size : null;
+  this.anchor_ = goog.isDef(options.anchor) ? options.anchor : [0.5, 0.5];

  /**
   * @private
@@ -91,9 +54,22 @@ ol.style.Icon = function(opt_options) {
      options.anchorYUnits : ol.style.IconAnchorUnits.FRACTION;

  /**
-   * @type {Array.<number>}
+   * @type {?string}
   */
-  var anchor = goog.isDef(options.anchor) ? options.anchor : [0.5, 0.5];
+  var crossOrigin =
+      goog.isDef(options.crossOrigin) ? options.crossOrigin : null;
+
+  /**
+   * @private
+   * @type {ol.style.IconImage_}
+   */
+  this.iconImage_ = new ol.style.IconImage_(options.src, crossOrigin);
+
+  /**
+   * @private
+   * @type {ol.Size}
+   */
+  this.size_ = goog.isDef(options.size) ? options.size : null;

  /**
   * @type {number}
@@ -106,11 +82,8 @@ ol.style.Icon = function(opt_options) {
  var scale = goog.isDef(options.scale) ? options.scale : 1;

  goog.base(this, {
-    anchor: anchor,
-    imageState: ol.style.ImageState.IDLE,
    rotation: rotation,
    scale: scale,
-    size: size,
    snapToPixel: undefined,
    subtractViewRotation: false
  });
@@ -120,9 +93,176 @@ goog.inherits(ol.style.Icon, ol.style.Image);


 /**
+ * @inheritDoc
+ */
+ol.style.Icon.prototype.getAnchor = function() {
+  var anchor = this.anchor_;
+  if (this.anchorXUnits_ == ol.style.IconAnchorUnits.FRACTION ||
+      this.anchorYUnits_ == ol.style.IconAnchorUnits.FRACTION) {
+    var size = this.getSize();
+    if (goog.isNull(size)) {
+      return null;
+    }
+    anchor = [this.anchor_[0], this.anchor_[1]];
+    if (this.anchorXUnits_ == ol.style.IconAnchorUnits.FRACTION) {
+      anchor[0] *= size[0];
+    }
+    if (this.anchorYUnits_ == ol.style.IconAnchorUnits.FRACTION) {
+      anchor[1] *= size[1];
+    }
+  }
+  return anchor;
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.style.Icon.prototype.getImage = function(pixelRatio) {
+  return this.iconImage_.getImage(pixelRatio);
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.style.Icon.prototype.getImageState = function() {
+  return this.iconImage_.getImageState();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.style.Icon.prototype.getHitDetectionImage = function(pixelRatio) {
+  return this.iconImage_.getHitDetectionImage(pixelRatio);
+};
+
+
+/**
+ * @return {string|undefined} Image src.
+ */
+ol.style.Icon.prototype.getSrc = function() {
+  return this.iconImage_.getSrc();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.style.Icon.prototype.getSize = function() {
+  return goog.isNull(this.size_) ? this.iconImage_.getSize() : this.size_;
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.style.Icon.prototype.listenImageChange = function(listener, thisArg) {
+  return goog.events.listen(this.iconImage_, goog.events.EventType.CHANGE,
+      listener, false, thisArg);
+};
+
+
+/**
+ * Load not yet loaded URI.
+ */
+ol.style.Icon.prototype.load = function() {
+  this.iconImage_.load();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.style.Icon.prototype.unlistenImageChange = function(listener, thisArg) {
+  goog.events.unlisten(this.iconImage_, goog.events.EventType.CHANGE,
+      listener, false, thisArg);
+};
+
+
+
+/**
+ * @constructor
+ * @param {string} src Src.
+ * @param {?string} crossOrigin Cross origin.
+ * @extends {goog.events.EventTarget}
 * @private
 */
-ol.style.Icon.prototype.determineTainting_ = function() {
+ol.style.IconImage_ = function(src, crossOrigin) {
+
+  goog.base(this);
+
+  /**
+   * @private
+   * @type {Image|HTMLCanvasElement}
+   */
+  this.hitDetectionImage_ = null;
+
+  /**
+   * @private
+   * @type {Image}
+   */
+  this.image_ = new Image();
+
+  if (!goog.isNull(crossOrigin)) {
+    this.image_.crossOrigin = crossOrigin;
+  }
+
+  /**
+   * @private
+   * @type {Array.<number>}
+   */
+  this.imageListenerKeys_ = null;
+
+  /**
+   * @private
+   * @type {ol.style.ImageState}
+   */
+  this.imageState_ = ol.style.ImageState.IDLE;
+
+  /**
+   * @private
+   * @type {ol.Size}
+   */
+  this.size_ = null;
+
+  /**
+   * @private
+   * @type {string}
+   */
+  this.src_ = src;
+
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.tainting_ = false;
+
+};
+goog.inherits(ol.style.IconImage_, goog.events.EventTarget);
+
+
+/**
+ * @param {string} src Src.
+ * @param {?string} crossOrigin Cross origin.
+ * @return {ol.style.IconImage_} Icon image.
+ */
+ol.style.IconImage_.get = function(src, crossOrigin) {
+  var iconImageCache = ol.style.IconImageCache.getInstance();
+  var iconImage = iconImageCache.get(src, crossOrigin);
+  if (goog.isNull(iconImage)) {
+    iconImage = new ol.style.IconImage_(src, crossOrigin);
+    iconImageCache.set(src, crossOrigin, iconImage);
+  }
+  return iconImage;
+};
+
+
+/**
+ * @private
+ */
+ol.style.IconImage_.prototype.determineTainting_ = function() {
  var canvas = /** @type {HTMLCanvasElement} */
      (goog.dom.createElement(goog.dom.TagName.CANVAS));
  canvas.width = 1;
@@ -141,51 +281,61 @@ ol.style.Icon.prototype.determineTainting_ = function() {
 /**
 * @private
 */
-ol.style.Icon.prototype.handleImageError_ = function() {
-  this.imageState = ol.style.ImageState.ERROR;
-  this.unlistenImage_();
-  this.dispatchChangeEvent();
+ol.style.IconImage_.prototype.dispatchChangeEvent_ = function() {
+  this.dispatchEvent(goog.events.EventType.CHANGE);
 };


 /**
 * @private
 */
-ol.style.Icon.prototype.handleImageLoad_ = function() {
-  this.imageState = ol.style.ImageState.LOADED;
-  if (goog.isNull(this.size)) {
-    this.size = [this.image_.width, this.image_.height];
-  }
-  if (this.anchorXUnits_ == ol.style.IconAnchorUnits.FRACTION) {
-    this.anchor[0] = this.size[0] * this.anchor[0];
-  }
-  if (this.anchorYUnits_ == ol.style.IconAnchorUnits.FRACTION) {
-    this.anchor[1] = this.size[1] * this.anchor[1];
-  }
+ol.style.IconImage_.prototype.handleImageError_ = function() {
+  this.imageState_ = ol.style.ImageState.ERROR;
  this.unlistenImage_();
-  this.determineTainting_();
-  this.dispatchChangeEvent();
+  this.dispatchChangeEvent_();
 };


 /**
- * @inheritDoc
+ * @private
 */
-ol.style.Icon.prototype.getImage = function(pixelRatio) {
+ol.style.IconImage_.prototype.handleImageLoad_ = function() {
+  this.imageState_ = ol.style.ImageState.LOADED;
+  this.size_ = [this.image_.width, this.image_.height];
+  this.unlistenImage_();
+  this.determineTainting_();
+  this.dispatchChangeEvent_();
+};
+
+
+/**
+ * @param {number} pixelRatio Pixel ratio.
+ * @return {Image} Image element.
+ */
+ol.style.IconImage_.prototype.getImage = function(pixelRatio) {
  return this.image_;
 };


 /**
- * @inheritDoc
+ * @return {ol.style.ImageState} Image state.
 */
-ol.style.Icon.prototype.getHitDetectionImage = function(pixelRatio) {
+ol.style.IconImage_.prototype.getImageState = function() {
+  return this.imageState_;
+};
+
+
+/**
+ * @param {number} pixelRatio Pixel ratio.
+ * @return {Image|HTMLCanvasElement} Image element.
+ */
+ol.style.IconImage_.prototype.getHitDetectionImage = function(pixelRatio) {
  if (goog.isNull(this.hitDetectionImage_)) {
    if (this.tainting_) {
      var canvas = /** @type {HTMLCanvasElement} */
          (goog.dom.createElement(goog.dom.TagName.CANVAS));
-      var width = this.size[0];
-      var height = this.size[1];
+      var width = this.size_[0];
+      var height = this.size_[1];
      canvas.width = width;
      canvas.height = height;
      var context = /** @type {CanvasRenderingContext2D} */
@@ -200,10 +350,18 @@ ol.style.Icon.prototype.getHitDetectionImage = function(pixelRatio) {
 };


+/**
+ * @return {ol.Size} Image size.
+ */
+ol.style.IconImage_.prototype.getSize = function() {
+  return this.size_;
+};
+
+
 /**
 * @return {string|undefined} Image src.
 */
-ol.style.Icon.prototype.getSrc = function() {
+ol.style.IconImage_.prototype.getSrc = function() {
  return this.src_;
 };

@@ -211,11 +369,11 @@ ol.style.Icon.prototype.getSrc = function() {
 /**
 * Load not yet loaded URI.
 */
-ol.style.Icon.prototype.load = function() {
-  if (this.imageState == ol.style.ImageState.IDLE) {
+ol.style.IconImage_.prototype.load = function() {
+  if (this.imageState_ == ol.style.ImageState.IDLE) {
    goog.asserts.assert(goog.isDef(this.src_));
    goog.asserts.assert(goog.isNull(this.imageListenerKeys_));
-    this.imageState = ol.style.ImageState.LOADING;
+    this.imageState_ = ol.style.ImageState.LOADING;
    this.imageListenerKeys_ = [
      goog.events.listenOnce(this.image_, goog.events.EventType.ERROR,
          this.handleImageError_, false, this),
@@ -232,7 +390,7 @@ ol.style.Icon.prototype.load = function() {
 *
 * @private
 */
-ol.style.Icon.prototype.unlistenImage_ = function() {
+ol.style.IconImage_.prototype.unlistenImage_ = function() {
  goog.asserts.assert(!goog.isNull(this.imageListenerKeys_));
  goog.array.forEach(this.imageListenerKeys_, goog.events.unlistenByKey);
  this.imageListenerKeys_ = null;