diff --git a/src/ol/style/regularshape.js b/src/ol/style/regularshape.js index db2c3cff3a..080e8e2ab6 100644 --- a/src/ol/style/regularshape.js +++ b/src/ol/style/regularshape.js @@ -163,9 +163,8 @@ ol.style.RegularShape.prototype.clone = function() { rotateWithView: this.getRotateWithView(), atlasManager: this.atlasManager_ }); - - this.setOpacity(this.getOpacity()); - this.setScale(this.getScale()); + style.setOpacity(this.getOpacity()); + style.setScale(this.getScale()); return style; }; @@ -432,11 +431,12 @@ ol.style.RegularShape.prototype.draw_ = function(renderOptions, context, x, y) { context.translate(x, y); context.beginPath(); + var points = this.points_; if (this.radius2_ !== this.radius_) { - this.points_ = 2 * this.points_; + points = 2 * points; } - for (i = 0; i <= this.points_; i++) { - angle0 = i * 2 * Math.PI / this.points_ - Math.PI / 2 + this.angle_; + for (i = 0; i <= points; i++) { + angle0 = i * 2 * Math.PI / points - Math.PI / 2 + this.angle_; radiusC = i % 2 === 0 ? this.radius_ : this.radius2_; context.lineTo(renderOptions.size / 2 + radiusC * Math.cos(angle0), renderOptions.size / 2 + radiusC * Math.sin(angle0)); @@ -496,12 +496,13 @@ ol.style.RegularShape.prototype.drawHitDetectionCanvas_ = function(renderOptions context.translate(x, y); context.beginPath(); + var points = this.points_; if (this.radius2_ !== this.radius_) { - this.points_ = 2 * this.points_; + points = 2 * points; } var i, radiusC, angle0; - for (i = 0; i <= this.points_; i++) { - angle0 = i * 2 * Math.PI / this.points_ - Math.PI / 2 + this.angle_; + for (i = 0; i <= points; i++) { + angle0 = i * 2 * Math.PI / points - Math.PI / 2 + this.angle_; radiusC = i % 2 === 0 ? this.radius_ : this.radius2_; context.lineTo(renderOptions.size / 2 + radiusC * Math.cos(angle0), renderOptions.size / 2 + radiusC * Math.sin(angle0)); diff --git a/src/ol/style/style.js b/src/ol/style/style.js index e8479dc9d6..1c0406b787 100644 --- a/src/ol/style/style.js +++ b/src/ol/style/style.js @@ -84,6 +84,7 @@ ol.style.Style.prototype.clone = function() { return new ol.style.Style({ geometry: geometry, fill: this.getFill() ? this.getFill().clone() : undefined, + image: this.getImage() ? this.getImage().clone() : undefined, stroke: this.getStroke() ? this.getStroke().clone() : undefined, text: this.getText() ? this.getText().clone() : undefined, zIndex: this.getZIndex() diff --git a/test/spec/ol/style/circle.test.js b/test/spec/ol/style/circle.test.js index 8bb95568d7..9845ab0171 100644 --- a/test/spec/ol/style/circle.test.js +++ b/test/spec/ol/style/circle.test.js @@ -81,11 +81,11 @@ describe('ol.style.Circle', function() { it('creates a new ol.style.Circle', function() { var original = new ol.style.Circle(); var clone = original.clone(); - expect(clone instanceof ol.style.Circle).to.eql(true); + expect(clone).to.be.an(ol.style.Circle); expect(clone).to.not.be(original); }); - it('clones all values', function() { + it('copies all values', function() { var original = new ol.style.Circle({ fill: new ol.style.Fill({ color: '#319FD3' @@ -99,15 +99,33 @@ describe('ol.style.Circle', function() { original.setOpacity(0.5); original.setScale(1.5); var clone = original.clone(); - expect(original.getFill()).to.not.be(clone.getFill()); expect(original.getFill().getColor()).to.eql(clone.getFill().getColor()); expect(original.getOpacity()).to.be(clone.getOpacity()); expect(original.getRadius()).to.be(clone.getRadius()); expect(original.getScale()).to.be(clone.getScale()); expect(original.getSnapToPixel()).to.be(clone.getSnapToPixel()); - expect(original.getStroke()).to.not.be(clone.getStroke()); expect(original.getStroke().getColor()).to.eql(clone.getStroke().getColor()); }); + + it('the clone does not reference the same objects as the original', function() { + var original = new ol.style.Circle({ + fill: new ol.style.Fill({ + color: '#319FD3' + }), + stroke: new ol.style.Stroke({ + color: '#319FD3' + }) + }); + var clone = original.clone(); + expect(original.getFill()).to.not.be(clone.getFill()); + expect(original.getStroke()).to.not.be(clone.getStroke()); + + clone.getFill().setColor('#012345'); + clone.getStroke().setColor('#012345'); + expect(original.getFill().getColor()).to.not.eql(clone.getFill().getColor()); + expect(original.getStroke().getColor()).to.not.eql(clone.getStroke().getColor()); + }); + }); describe('#getChecksum', function() { diff --git a/test/spec/ol/style/fill.test.js b/test/spec/ol/style/fill.test.js index 3857e657f5..17f189ac2c 100644 --- a/test/spec/ol/style/fill.test.js +++ b/test/spec/ol/style/fill.test.js @@ -9,16 +9,28 @@ describe('ol.style.Fill', function() { it('creates a new ol.style.Fill', function() { var original = new ol.style.Fill(); var clone = original.clone(); - expect(clone instanceof ol.style.Fill).to.eql(true); + expect(clone).to.be.an(ol.style.Fill); expect(clone).to.not.be(original); }); - it('clones all values', function() { + it('copies all values', function() { var original = new ol.style.Fill({ color: '#319FD3' }); var clone = original.clone(); expect(original.getColor()).to.eql(clone.getColor()); }); + + it('the clone does not reference the same objects as the original', function() { + var original = new ol.style.Fill({ + color: [63, 255, 127, 0.7] + }); + var clone = original.clone(); + expect(original.getColor()).to.not.be(clone.getColor()); + + clone.getColor()[2] = 0; + expect(original.getColor()).to.not.eql(clone.getColor()); + }); + }); }); diff --git a/test/spec/ol/style/icon.test.js b/test/spec/ol/style/icon.test.js index 7e98c41172..667ea2420a 100644 --- a/test/spec/ol/style/icon.test.js +++ b/test/spec/ol/style/icon.test.js @@ -45,11 +45,11 @@ describe('ol.style.Icon', function() { src: src }); var clone = original.clone(); - expect(clone instanceof ol.style.Icon).to.be(true); + expect(clone).to.be.an(ol.style.Icon); expect(clone).to.not.be(original); }); - it('clones all values ', function() { + it('copies all values ', function() { var canvas = document.createElement('canvas'); var original = new ol.style.Icon({ anchor: [1, 0], @@ -70,23 +70,18 @@ describe('ol.style.Icon', function() { }); var clone = original.clone(); - expect(original.getAnchor()).to.not.be(clone.getAnchor()); expect(original.getAnchor()).to.eql(clone.getAnchor()); expect(original.anchorOrigin_).to.be(clone.anchorOrigin_); expect(original.anchorXUnits_).to.be(clone.anchorXUnits_); expect(original.anchorYUnits_).to.be(clone.anchorYUnits_); expect(original.crossOrigin_).to.be(clone.crossOrigin_); - expect(original.color_).to.not.be(clone.color_); expect(original.color_).to.eql(clone.color_); - expect(original.getImage(1)).not.to.be(clone.getImage(1)); expect(original.getImage(1).src).to.be(clone.getImage(1).src); expect(original.getImage(1).toDataURL()).to.be(original.getImage(1).toDataURL()); - expect(original.offset_).to.not.be(clone.offset_); expect(original.offset_).to.eql(clone.offset_); expect(original.offsetOrigin_).to.be(clone.offsetOrigin_); - expect(original.getSize()).not.to.be(clone.getSize()); expect(original.getSize()).to.eql(clone.getSize()); - expect(original.getSrc()).to.not.eql(clone.getSrc()); + expect(original.getSrc()).not.to.eql(clone.getSrc()); expect(original.getOpacity()).to.be(clone.getOpacity()); expect(original.getRotation()).to.be(clone.getRotation()); expect(original.getRotateWithView()).to.be(clone.getRotateWithView()); @@ -98,6 +93,35 @@ describe('ol.style.Icon', function() { var clone2 = original2.clone(); expect(original2.getSrc()).to.be(clone2.getSrc()); }); + + it('the clone does not reference the same objects as the original', function() { + var canvas = document.createElement('canvas'); + var original = new ol.style.Icon({ + anchor: [1, 0], + color: [1, 2, 3, 0.4], + img: canvas, + imgSize: size, + offset: [1, 2], + size: [10, 12] + }); + var clone = original.clone(); + expect(original.getAnchor()).not.to.be(clone.getAnchor()); + expect(original.getImage(1)).not.to.be(clone.getImage(1)); + expect(original.offset_).not.to.be(clone.offset_); + expect(original.color_).not.to.be(clone.color_); + expect(original.getSize()).not.to.be(clone.getSize()); + + clone.anchor_[0] = 0; + clone.getImage(1).width = 50; + clone.offset_[0] = 0; + clone.color_[0] = 0; + clone.size_[0] = 5; + expect(original.anchor_).not.to.eql(clone.anchor_); + expect(original.getImage(1).width).not.to.eql(clone.getImage(1).width); + expect(original.offset_).not.to.eql(clone.offset_); + expect(original.color_).not.to.eql(clone.color_); + expect(original.size_).not.to.eql(clone.size_); + }); }); describe('#getAnchor', function() { diff --git a/test/spec/ol/style/regularshape.test.js b/test/spec/ol/style/regularshape.test.js index 2f53c24201..2a10c4242c 100644 --- a/test/spec/ol/style/regularshape.test.js +++ b/test/spec/ol/style/regularshape.test.js @@ -119,6 +119,69 @@ describe('ol.style.RegularShape', function() { }); }); + describe('#clone', function() { + + it('creates a new ol.style.RegularShape', function() { + var original = new ol.style.RegularShape({ + points: 5 + }); + var clone = original.clone(); + expect(clone).to.be.an(ol.style.RegularShape); + expect(clone).to.not.be(original); + }); + + it('copies all values', function() { + var original = new ol.style.RegularShape({ + fill: new ol.style.Fill({ + color: '#319FD3' + }), + points: 5, + radius: 4, + radius2: 6, + angle: 1, + snapToPixel: false, + stroke: new ol.style.Stroke({ + color: '#319FD3' + }), + rotation: 2, + rotateWithView: true + }); + original.setOpacity(0.5); + original.setScale(1.5); + var clone = original.clone(); + expect(original.getAngle()).to.eql(clone.getAngle()); + expect(original.getFill().getColor()).to.eql(clone.getFill().getColor()); + expect(original.getOpacity()).to.eql(clone.getOpacity()); + expect(original.getPoints()).to.eql(clone.getPoints()); + expect(original.getRadius()).to.eql(clone.getRadius()); + expect(original.getRadius2()).to.eql(clone.getRadius2()); + expect(original.getRotation()).to.eql(clone.getRotation()); + expect(original.getRotateWithView()).to.eql(clone.getRotateWithView()); + expect(original.getScale()).to.eql(clone.getScale()); + expect(original.getSnapToPixel()).to.eql(clone.getSnapToPixel()); + expect(original.getStroke().getColor()).to.eql(clone.getStroke().getColor()); + }); + + it('the clone does not reference the same objects as the original', function() { + var original = new ol.style.RegularShape({ + fill: new ol.style.Fill({ + color: '#319FD3' + }), + stroke: new ol.style.Stroke({ + color: '#319FD3' + }) + }); + var clone = original.clone(); + expect(original.getFill()).to.not.be(clone.getFill()); + expect(original.getStroke()).to.not.be(clone.getStroke()); + + clone.getFill().setColor('#012345'); + clone.getStroke().setColor('#012345'); + expect(original.getFill().getColor()).to.not.eql(clone.getFill().getColor()); + expect(original.getStroke().getColor()).to.not.eql(clone.getStroke().getColor()); + }); + }); + describe('#getChecksum', function() { diff --git a/test/spec/ol/style/stroke.test.js b/test/spec/ol/style/stroke.test.js index 239e9a7b11..a7b51657f7 100644 --- a/test/spec/ol/style/stroke.test.js +++ b/test/spec/ol/style/stroke.test.js @@ -9,16 +9,16 @@ describe('ol.style.Stroke', function() { it('creates a new ol.style.Stroke', function() { var original = new ol.style.Stroke(); var clone = original.clone(); - expect(clone instanceof ol.style.Stroke).to.eql(true); + expect(clone).to.be.an(ol.style.Stroke); expect(clone).to.not.be(original); }); - it('clones all values', function() { + it('copies all values', function() { var original = new ol.style.Stroke({ color: '#319FD3', lineCap: 'square', lineJoin: 'miter', - lineDash: [1,2,3], + lineDash: [1, 2, 3], miterLimit: 20, width: 5 }); @@ -31,5 +31,21 @@ describe('ol.style.Stroke', function() { expect(original.getMiterLimit()).to.be(clone.getMiterLimit()); expect(original.getWidth()).to.be(clone.getWidth()); }); + + it('the clone does not reference the same objects as the original', function() { + var original = new ol.style.Stroke({ + color: [1, 2, 3, 0.4], + lineDash: [1, 2, 3] + }); + var clone = original.clone(); + expect(original.getColor()).to.not.be(clone.getColor()); + expect(original.getLineDash()).to.not.be(clone.getLineDash()); + + clone.getColor()[0] = 0; + clone.getLineDash()[0] = 0; + expect(original.getColor()).to.not.eql(clone.getColor()); + expect(original.getLineDash()).to.not.eql(clone.getLineDash()); + }); }); + }); diff --git a/test/spec/ol/style/style.test.js b/test/spec/ol/style/style.test.js index 90986b8eab..7b265e2777 100644 --- a/test/spec/ol/style/style.test.js +++ b/test/spec/ol/style/style.test.js @@ -3,10 +3,85 @@ goog.provide('ol.test.style.Style'); goog.require('ol.Feature'); goog.require('ol.geom.Point'); goog.require('ol.style.Style'); +goog.require('ol.style.Fill'); +goog.require('ol.style.Circle'); +goog.require('ol.style.Stroke'); +goog.require('ol.style.Text'); describe('ol.style.Style', function() { + describe('#clone', function() { + + it('creates a new ol.style.Style', function() { + var original = new ol.style.Style(); + var clone = original.clone(); + expect(clone).to.be.an(ol.style.Style); + expect(clone).to.not.be(original); + }); + + it('copies all values', function() { + var original = new ol.style.Style({ + geometry: new ol.geom.Point([0,0,0]), + fill: new ol.style.Fill({ + color: '#319FD3' + }), + image: new ol.style.Circle({ + radius: 5 + }), + stroke: new ol.style.Stroke({ + color: '#319FD3' + }), + text: new ol.style.Text({ + text: 'test' + }), + zIndex: 2 + }); + var clone = original.clone(); + expect(original.getGeometry().getCoordinates()).to.eql(clone.getGeometry().getCoordinates()); + expect(original.getFill().getColor()).to.eql(clone.getFill().getColor()); + expect(original.getImage().getRadius()).to.eql(clone.getImage().getRadius()); + expect(original.getStroke().getColor()).to.eql(clone.getStroke().getColor()); + expect(original.getText().getText()).to.eql(clone.getText().getText()); + expect(original.getZIndex()).to.eql(clone.getZIndex()); + }); + + it('the clone does not reference the same objects as the original', function() { + var original = new ol.style.Style({ + geometry: new ol.geom .Point([0,0,0]), + fill: new ol.style.Fill({ + color: '#319FD3' + }), + image: new ol.style.Circle({ + radius: 5 + }), + stroke: new ol.style.Stroke({ + color: '#319FD3' + }), + text: new ol.style.Text({ + text: 'test' + }) + }); + var clone = original.clone(); + expect(original.getGeometry()).not.to.be(clone.getGeometry()); + expect(original.getFill()).not.to.be(clone.getFill()); + expect(original.getImage()).not.to.be(clone.getImage()); + expect(original.getStroke()).not.to.be(clone.getStroke()); + expect(original.getText()).not.to.be(clone.getText()); + + clone.getGeometry().setCoordinates([1,1,1]); + clone.getFill().setColor('#012345'); + clone.getImage().setScale(2); + clone.getStroke().setColor('#012345'); + clone.getText().setText('other'); + expect(original.getGeometry().getCoordinates()).not.to.eql(clone.getGeometry().getCoordinates()); + expect(original.getFill().getColor()).not.to.eql(clone.getFill().getColor()); + expect(original.getImage().getScale()).not.to.eql(clone.getImage().getScale()); + expect(original.getStroke().getColor()).not.to.eql(clone.getStroke().getColor()); + expect(original.getText().getText()).not.to.eql(clone.getText().getText()); + }); + }); + describe('#setZIndex', function() { it('sets the zIndex', function() { diff --git a/test/spec/ol/style/text.test.js b/test/spec/ol/style/text.test.js index fb281cb92f..4b40c579ce 100644 --- a/test/spec/ol/style/text.test.js +++ b/test/spec/ol/style/text.test.js @@ -28,4 +28,66 @@ describe('ol.style.Text', function() { }); + describe('#clone', function() { + + it('creates a new ol.style.Text', function() { + var original = new ol.style.Text(); + var clone = original.clone(); + expect(clone).to.be.an(ol.style.Text); + expect(clone).to.not.be(original); + }); + + it('copies all values', function() { + var original = new ol.style.Text({ + font: '12px serif', + offsetX: 4, + offsetY: 10, + scale: 2, + rotateWithView: true, + rotation: 1.5, + text: 'test', + textAlign: 'center', + textBaseline: 'top', + fill: new ol.style.Fill({ + color: '#319FD3' + }), + stroke: new ol.style.Stroke({ + color: '#319FD3' + }) + }); + var clone = original.clone(); + expect(original.getFont()).to.eql(clone.getFont()); + expect(original.getOffsetX()).to.be(clone.getOffsetX()); + expect(original.getOffsetY()).to.be(clone.getOffsetY()); + expect(original.getScale()).to.be(clone.getScale()); + expect(original.getRotateWithView()).to.be(clone.getRotateWithView()); + expect(original.getRotation()).to.be(clone.getRotation()); + expect(original.getText()).to.be(clone.getText()); + expect(original.getTextAlign()).to.be(clone.getTextAlign()); + expect(original.getTextBaseline()).to.be(clone.getTextBaseline()); + expect(original.getStroke().getColor()).to.eql(clone.getStroke().getColor()); + expect(original.getFill().getColor()).to.eql(clone.getFill().getColor()); + }); + + it('the clone does not reference the same objects as the original', function() { + var original = new ol.style.Text({ + fill: new ol.style.Fill({ + color: '#319FD3' + }), + stroke: new ol.style.Stroke({ + color: '#319FD3' + }) + }); + var clone = original.clone(); + expect(original.getFill()).to.not.be(clone.getFill()); + expect(original.getStroke()).to.not.be(clone.getStroke()); + + clone.getFill().setColor('#012345'); + clone.getStroke().setColor('#012345'); + expect(original.getFill().getColor()).to.not.eql(clone.getFill().getColor()); + expect(original.getStroke().getColor()).to.not.eql(clone.getStroke().getColor()); + }); + + }); + });