From c561f1587b4624410a1ce93c9116003ae4ef0197 Mon Sep 17 00:00:00 2001
From: simonseyock <simonseyock@googlemail.com>
Date: Thu, 1 Sep 2016 16:19:56 +0100
Subject: [PATCH] Add clone methods to styles

---
 src/ol/style/circle.js       | 27 +++++++++++++++++++++++++-
 src/ol/style/fill.js         | 12 ++++++++++++
 src/ol/style/icon.js         | 37 +++++++++++++++++++++++++++++++++---
 src/ol/style/regularshape.js | 33 +++++++++++++++++++++++++++++++-
 src/ol/style/stroke.js       | 17 +++++++++++++++++
 src/ol/style/style.js        | 20 +++++++++++++++++++
 src/ol/style/text.js         | 22 +++++++++++++++++++++
 7 files changed, 163 insertions(+), 5 deletions(-)

diff --git a/src/ol/style/circle.js b/src/ol/style/circle.js
index 072472ffbd..26e5b6ea24 100644
--- a/src/ol/style/circle.js
+++ b/src/ol/style/circle.js
@@ -89,7 +89,13 @@ ol.style.Circle = function(opt_options) {
    */
   this.hitDetectionImageSize_ = null;
 
-  this.render_(options.atlasManager);
+  /**
+   * @private
+   * @type {ol.style.AtlasManager|undefined}
+   */
+  this.atlasManager_ = options.atlasManager;
+
+  this.render_(this.atlasManager_);
 
   /**
    * @type {boolean}
@@ -109,6 +115,25 @@ ol.style.Circle = function(opt_options) {
 ol.inherits(ol.style.Circle, ol.style.Image);
 
 
+/**
+ * Clones the style.
+ * @return {ol.style.Image} The cloned style.
+ * @api
+ */
+ol.style.Circle.prototype.clone = function() {
+  var style = new ol.style.Circle({
+    fill: this.getFill() ? this.getFill().clone() : undefined,
+    stroke: this.getStroke() ? this.getStroke().clone() : undefined,
+    radius: this.getRadius(),
+    snapToPixel: this.getSnapToPixel(),
+    atlasManager: this.atlasManager_
+  });
+  style.setOpacity(this.getOpacity());
+  style.setScale(this.getScale());
+  return style;
+};
+
+
 /**
  * @inheritDoc
  */
diff --git a/src/ol/style/fill.js b/src/ol/style/fill.js
index 5b503bc023..73dabf5654 100644
--- a/src/ol/style/fill.js
+++ b/src/ol/style/fill.js
@@ -30,6 +30,18 @@ ol.style.Fill = function(opt_options) {
 };
 
 
+/**
+ * Clones the style.
+ * @return {ol.style.Fill} The cloned style.
+ * @api
+ */
+ol.style.Fill.prototype.clone = function() {
+  return new ol.style.Fill({
+    color: (this.getColor() instanceof Array) ? this.getColor().slice(0) : this.getColor()
+  });
+};
+
+
 /**
  * Get the fill color.
  * @return {ol.Color|ol.ColorLike} Color.
diff --git a/src/ol/style/icon.js b/src/ol/style/icon.js
index 156a470eea..02dbbcd97f 100644
--- a/src/ol/style/icon.js
+++ b/src/ol/style/icon.js
@@ -57,9 +57,10 @@ ol.style.Icon = function(opt_options) {
       options.anchorYUnits : ol.style.Icon.AnchorUnits.FRACTION;
 
   /**
+   * @private
    * @type {?string}
    */
-  var crossOrigin =
+  this.crossOrigin_ =
       options.crossOrigin !== undefined ? options.crossOrigin : null;
 
   /**
@@ -95,9 +96,10 @@ ol.style.Icon = function(opt_options) {
       ol.Image.State.IDLE : ol.Image.State.LOADED;
 
   /**
+   * @private
    * @type {ol.Color}
    */
-  var color = options.color !== undefined ? ol.color.asArray(options.color) :
+  this.color_ = options.color !== undefined ? ol.color.asArray(options.color) :
       null;
 
   /**
@@ -105,7 +107,7 @@ ol.style.Icon = function(opt_options) {
    * @type {ol.style.IconImage}
    */
   this.iconImage_ = ol.style.IconImage.get(
-      image, /** @type {string} */ (src), imgSize, crossOrigin, imageState, color);
+      image, /** @type {string} */ (src), imgSize, this.crossOrigin_, imageState, this.color_);
 
   /**
    * @private
@@ -171,6 +173,35 @@ ol.style.Icon = function(opt_options) {
 ol.inherits(ol.style.Icon, ol.style.Image);
 
 
+/**
+ * Clones the style.
+ * @return {ol.style.Icon} The cloned style.
+ * @api
+ */
+ol.style.Icon.prototype.clone = function() {
+  var useImg = (this.iconImage_.getImageState() === ol.Image.State.LOADED);
+  return new ol.style.Icon({
+    anchor: this.getAnchor().slice(0),
+    anchorOrigin: this.anchorOrigin_.slice(0),
+    anchorXUnits: this.anchorXUnits_,
+    anchorYUnits: this.anchorYUnits_,
+    crossOrigin: this.crossOrigin_,
+    color: this.color_.slice(0),
+    img: useImg ? this.getImage(1) : undefined,
+    imgSize: useImg ? this.iconImage_.getSize().slice(0) : undefined,
+    src: useImg ? undefined : this.getSrc(),
+    offset: this.offset_.slice(0),
+    offsetOrigin: this.offsetOrigin_,
+    size: this.getSize().slice(0),
+    opacity: this.getOpacity(),
+    scale: this.getScale(),
+    snapToPixel: this.getSnapToPixel(),
+    rotation: this.getRotation(),
+    rotateWithView: this.getRotateWithView()
+  });
+};
+
+
 /**
  * @inheritDoc
  * @api
diff --git a/src/ol/style/regularshape.js b/src/ol/style/regularshape.js
index b96a992895..db2c3cff3a 100644
--- a/src/ol/style/regularshape.js
+++ b/src/ol/style/regularshape.js
@@ -113,7 +113,13 @@ ol.style.RegularShape = function(options) {
    */
   this.hitDetectionImageSize_ = null;
 
-  this.render_(options.atlasManager);
+  /**
+   * @private
+   * @type {ol.style.AtlasManager|undefined}
+   */
+  this.atlasManager_ = options.atlasManager;
+
+  this.render_(this.atlasManager_);
 
   /**
    * @type {boolean}
@@ -139,6 +145,31 @@ ol.style.RegularShape = function(options) {
 ol.inherits(ol.style.RegularShape, ol.style.Image);
 
 
+/**
+ * Clones the style.
+ * @return {ol.style.RegularShape} The cloned style.
+ * @api
+ */
+ol.style.RegularShape.prototype.clone = function() {
+  var style = new ol.style.RegularShape({
+    fill: this.getFill() ? this.getFill().clone() : undefined,
+    points: this.getPoints(),
+    radius: this.getRadius(),
+    radius2: this.getRadius2(),
+    angle: this.getAngle(),
+    snapToPixel: this.getSnapToPixel(),
+    stroke: this.getStroke() ?  this.getStroke().clone() : undefined,
+    rotation: this.getRotation(),
+    rotateWithView: this.getRotateWithView(),
+    atlasManager: this.atlasManager_
+  });
+
+  this.setOpacity(this.getOpacity());
+  this.setScale(this.getScale());
+  return style;
+};
+
+
 /**
  * @inheritDoc
  * @api
diff --git a/src/ol/style/stroke.js b/src/ol/style/stroke.js
index 5ff9211ab2..2ded636f69 100644
--- a/src/ol/style/stroke.js
+++ b/src/ol/style/stroke.js
@@ -62,6 +62,23 @@ ol.style.Stroke = function(opt_options) {
 };
 
 
+/**
+ * Clones the style.
+ * @return {ol.style.Stroke} The cloned style.
+ * @api
+ */
+ol.style.Stroke.prototype.clone = function() {
+  return new ol.style.Stroke({
+    color: (this.getColor() instanceof Array) ? this.getColor().slice(0) : this.getColor(),
+    lineCap: this.getLineCap(),
+    lineDash: this.getLineDash() ? this.getLineDash().slice(0) : undefined,
+    lineJoin: this.getLineJoin(),
+    miterLimit: this.getMiterLimit(),
+    width: this.getWidth()
+  });
+};
+
+
 /**
  * Get the stroke color.
  * @return {ol.Color|string} Color.
diff --git a/src/ol/style/style.js b/src/ol/style/style.js
index 17b9a43d5e..e8479dc9d6 100644
--- a/src/ol/style/style.js
+++ b/src/ol/style/style.js
@@ -71,6 +71,26 @@ ol.style.Style = function(opt_options) {
 };
 
 
+/**
+ * Clones the style.
+ * @return {ol.style.Style} The cloned style.
+ * @api
+ */
+ol.style.Style.prototype.clone = function() {
+  var geometry = this.getGeometry();
+  if (geometry && geometry.clone) {
+    geometry = geometry.clone();
+  }
+  return new ol.style.Style({
+    geometry: geometry,
+    fill: this.getFill() ? this.getFill().clone() : undefined,
+    stroke: this.getStroke() ? this.getStroke().clone() : undefined,
+    text: this.getText() ? this.getText().clone() : undefined,
+    zIndex: this.getZIndex()
+  });
+};
+
+
 /**
  * Get the geometry to be rendered.
  * @return {string|ol.geom.Geometry|ol.StyleGeometryFunction}
diff --git a/src/ol/style/text.js b/src/ol/style/text.js
index 8a8e31106c..b6af84c848 100644
--- a/src/ol/style/text.js
+++ b/src/ol/style/text.js
@@ -95,6 +95,28 @@ ol.style.Text = function(opt_options) {
 ol.style.Text.DEFAULT_FILL_COLOR_ = '#333';
 
 
+/**
+ * Clones the style.
+ * @return {ol.style.Text} The cloned style.
+ * @api
+ */
+ol.style.Text.prototype.clone = function() {
+  return new ol.style.Text({
+    font: this.getFont(),
+    rotation: this.getRotation(),
+    rotateWithView: this.getRotateWithView(),
+    scale: this.getScale(),
+    text: this.getText(),
+    textAlign: this.getTextAlign(),
+    textBaseline: this.getTextBaseline(),
+    fill: this.getFill() ? this.getFill().clone() : undefined,
+    stroke: this.getStroke() ? this.getStroke().clone() : undefined,
+    offsetX: this.getOffsetX(),
+    offsetY: this.getOffsetY()
+  });
+};
+
+
 /**
  * Get the font name.
  * @return {string|undefined} Font.