From 601bd7bae6d7619a434f36e1a959823e2cd2b7bd Mon Sep 17 00:00:00 2001 From: jkonieczny Date: Mon, 16 Dec 2019 21:22:34 +0100 Subject: [PATCH] add offset option to RegularShape --- src/ol/style/RegularShape.js | 21 +++++++++++++++++++-- test/spec/ol/style/regularshape.test.js | 23 ++++++++++++++++++++++- 2 files changed, 41 insertions(+), 3 deletions(-) diff --git a/src/ol/style/RegularShape.js b/src/ol/style/RegularShape.js index b313c07ab7..2b464d5c9b 100644 --- a/src/ol/style/RegularShape.js +++ b/src/ol/style/RegularShape.js @@ -20,6 +20,7 @@ import ImageStyle from './Image.js'; * @property {number} [radius1] Outer radius of a star. * @property {number} [radius2] Inner radius of a star. * @property {number} [angle=0] Shape's angle in radians. A value of 0 will have one of the shape's point facing up. + * @property {Array} [offset] Offset of the shape * @property {import("./Stroke.js").default} [stroke] Stroke style. * @property {number} [rotation=0] Rotation in radians (positive rotation clockwise). * @property {boolean} [rotateWithView=false] Whether to rotate the shape with the view. @@ -88,6 +89,12 @@ class RegularShape extends ImageStyle { */ this.origin_ = [0, 0]; + /** + * @private + * @type {Array} + */ + this.offset_ = options.offset ? options.offset : [0, 0]; + /** * @private * @type {number} @@ -160,7 +167,8 @@ class RegularShape extends ImageStyle { angle: this.getAngle(), stroke: this.getStroke() ? this.getStroke().clone() : undefined, rotation: this.getRotation(), - rotateWithView: this.getRotateWithView() + rotateWithView: this.getRotateWithView(), + offset: this.getOffset() }); style.setOpacity(this.getOpacity()); style.setScale(this.getScale()); @@ -184,6 +192,15 @@ class RegularShape extends ImageStyle { return this.angle_; } + /** + * Get the offset of the shape + * @return {Array} Shape's center offset + * @api + */ + getOffset() { + return this.offset_; + } + /** * Get the fill style for the shape. * @return {import("./Fill.js").default} Fill style. @@ -354,7 +371,7 @@ class RegularShape extends ImageStyle { size = this.canvas_.width; const imageSize = size; - this.draw_(renderOptions, context, 0, 0); + this.draw_(renderOptions, context, this.offset_[0], this.offset_[1]); this.createHitDetectionCanvas_(renderOptions); diff --git a/test/spec/ol/style/regularshape.test.js b/test/spec/ol/style/regularshape.test.js index aaff4b2d7d..76b4a39aff 100644 --- a/test/spec/ol/style/regularshape.test.js +++ b/test/spec/ol/style/regularshape.test.js @@ -82,6 +82,24 @@ describe('ol.style.RegularShape', function() { expect(style.getHitDetectionImageSize()).to.eql([21, 21]); }); + it('sets default offset [0, 0]', function() { + const style = new RegularShape({ + radius: 5 + }); + expect(style.getOffset()).to.an('array'); + expect(style.getOffset()[0]).to.eql(0); + expect(style.getOffset()[1]).to.eql(0); + }); + + it('can use offset', function() { + const style = new RegularShape({ + radius: 5, + offset: [10, 20] + }); + expect(style.getOffset()).to.an('array'); + expect(style.getOffset()[0]).to.eql(10); + expect(style.getOffset()[1]).to.eql(20); + }); }); describe('#clone', function() { @@ -108,7 +126,8 @@ describe('ol.style.RegularShape', function() { color: '#319FD3' }), rotation: 2, - rotateWithView: true + rotateWithView: true, + offest: [10, 20] }); original.setOpacity(0.5); original.setScale(1.5); @@ -123,6 +142,8 @@ describe('ol.style.RegularShape', function() { expect(original.getRotateWithView()).to.eql(clone.getRotateWithView()); expect(original.getScale()).to.eql(clone.getScale()); expect(original.getStroke().getColor()).to.eql(clone.getStroke().getColor()); + expect(original.getOffset()[0]).to.eql(clone.getOffset()[0]); + expect(original.getOffset()[1]).to.eql(clone.getOffset()[1]); }); it('the clone does not reference the same objects as the original', function() {