From 601bd7bae6d7619a434f36e1a959823e2cd2b7bd Mon Sep 17 00:00:00 2001 From: jkonieczny Date: Mon, 16 Dec 2019 21:22:34 +0100 Subject: [PATCH 1/7] 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() { From 1506e13b601605804f9a6bd8964fc94c905aaee5 Mon Sep 17 00:00:00 2001 From: jkonieczny Date: Mon, 16 Dec 2019 23:24:31 +0100 Subject: [PATCH 2/7] use anchor for offsetting --- rendering/cases/regularshape-style/main.js | 7 ++++--- src/ol/style/RegularShape.js | 4 ++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/rendering/cases/regularshape-style/main.js b/rendering/cases/regularshape-style/main.js index 9d98bcd573..625fe9265c 100644 --- a/rendering/cases/regularshape-style/main.js +++ b/rendering/cases/regularshape-style/main.js @@ -13,16 +13,17 @@ const vectorSource = new VectorSource(); function createFeatures(stroke, fill, offSet = [0, 0]) { let feature; feature = new Feature({ - geometry: new Point([-15 + offSet[0], 15 + offSet[1]]) + geometry: new Point([offSet[0], offSet[1]]) }); - // square + // square with offset feature.setStyle(new Style({ image: new RegularShape({ fill: fill, stroke: stroke, points: 4, radius: 10, - angle: Math.PI / 4 + angle: Math.PI / 4, + offset: [-15, 15] }) })); vectorSource.addFeature(feature); diff --git a/src/ol/style/RegularShape.js b/src/ol/style/RegularShape.js index 2b464d5c9b..42b4063fe7 100644 --- a/src/ol/style/RegularShape.js +++ b/src/ol/style/RegularShape.js @@ -371,11 +371,11 @@ class RegularShape extends ImageStyle { size = this.canvas_.width; const imageSize = size; - this.draw_(renderOptions, context, this.offset_[0], this.offset_[1]); + this.draw_(renderOptions, context, 0, 0); this.createHitDetectionCanvas_(renderOptions); - this.anchor_ = [size / 2, size / 2]; + this.anchor_ = [size / 2 - this.offset_[0], size / 2 + this.offset_[1]]; this.size_ = [size, size]; this.imageSize_ = [imageSize, imageSize]; } From ee1b038714e701053dab6276c4a114e679c73e81 Mon Sep 17 00:00:00 2001 From: jkonieczny Date: Tue, 17 Dec 2019 09:06:19 +0100 Subject: [PATCH 3/7] add example to regularshape --- examples/regularshape.html | 4 +++- examples/regularshape.js | 27 ++++++++++++++++++++++++--- 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/examples/regularshape.html b/examples/regularshape.html index 1e3430a20a..990a9ec148 100644 --- a/examples/regularshape.html +++ b/examples/regularshape.html @@ -5,7 +5,9 @@ shortdesc: Example of some Regular Shape styles. docs: > This example shows how several regular shapes or symbols (representing `x`, `cross`, `star`, - `triangle` and `square`) can be created. + `triangle`, `square` and `stacked`) can be created. + + Style `stacked` represents possility to stack multiple shapes with offset tags: "vector, symbol, regularshape, style, square, cross, star, triangle, x" ---
diff --git a/examples/regularshape.js b/examples/regularshape.js index 6d26f9d3e3..4431efcd25 100644 --- a/examples/regularshape.js +++ b/examples/regularshape.js @@ -59,18 +59,39 @@ const styles = { radius2: 0, angle: Math.PI / 4 }) - }) + }), + 'stacked': [ + new Style({ + image: new RegularShape({ + fill: fill, + stroke: stroke, + points: 4, + radius: 5, + angle: Math.PI / 4, + offset: [0, 10] + }) + }), + new Style({ + image: new RegularShape({ + fill: fill, + stroke: stroke, + points: 4, + radius: 10, + angle: Math.PI / 4 + }) + }) + ] }; -const styleKeys = ['x', 'cross', 'star', 'triangle', 'square']; +const styleKeys = ['x', 'cross', 'star', 'triangle', 'square', 'stacked']; const count = 250; const features = new Array(count); const e = 4500000; for (let i = 0; i < count; ++i) { const coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e]; features[i] = new Feature(new Point(coordinates)); - features[i].setStyle(styles[styleKeys[Math.floor(Math.random() * 5)]]); + features[i].setStyle(styles[styleKeys[Math.floor(Math.random() * 6)]]); } const source = new VectorSource({ From 4c7f52c8a426c548e024a3ecdaca66f63b47e0e4 Mon Sep 17 00:00:00 2001 From: jkonieczny Date: Wed, 18 Dec 2019 08:22:40 +0100 Subject: [PATCH 4/7] Offset for ImageStyle --- src/ol/style/Circle.js | 7 +++++-- src/ol/style/Icon.js | 7 +------ src/ol/style/Image.js | 19 ++++++++++++++++++- src/ol/style/RegularShape.js | 22 ++++------------------ 4 files changed, 28 insertions(+), 27 deletions(-) diff --git a/src/ol/style/Circle.js b/src/ol/style/Circle.js index 59161e0456..9ac4a5939e 100644 --- a/src/ol/style/Circle.js +++ b/src/ol/style/Circle.js @@ -10,6 +10,7 @@ import RegularShape from './RegularShape.js'; * @property {import("./Fill.js").default} [fill] Fill style. * @property {number} radius Circle radius. * @property {import("./Stroke.js").default} [stroke] Stroke style. + * @property {Array} [offset=[0,0]] offset */ @@ -30,7 +31,8 @@ class CircleStyle extends RegularShape { points: Infinity, fill: options.fill, radius: options.radius, - stroke: options.stroke + stroke: options.stroke, + offset: options.offset !== undefined ? options.offset : [0, 0] }); } @@ -45,7 +47,8 @@ class CircleStyle extends RegularShape { const style = new CircleStyle({ fill: this.getFill() ? this.getFill().clone() : undefined, stroke: this.getStroke() ? this.getStroke().clone() : undefined, - radius: this.getRadius() + radius: this.getRadius(), + offset: this.getOffset().slice() }); style.setOpacity(this.getOpacity()); style.setScale(this.getScale()); diff --git a/src/ol/style/Icon.js b/src/ol/style/Icon.js index b918487247..100f8892e8 100644 --- a/src/ol/style/Icon.js +++ b/src/ol/style/Icon.js @@ -84,6 +84,7 @@ class Icon extends ImageStyle { opacity: opacity, rotation: rotation, scale: scale, + offset: options.offset !== undefined ? options.offset : [0, 0], rotateWithView: rotateWithView }); @@ -172,12 +173,6 @@ class Icon extends ImageStyle { this.iconImage_ = getIconImage( image, /** @type {string} */ (src), imgSize, this.crossOrigin_, imageState, this.color_); - /** - * @private - * @type {Array} - */ - this.offset_ = options.offset !== undefined ? options.offset : [0, 0]; - /** * @private * @type {import("./IconOrigin.js").default} diff --git a/src/ol/style/Image.js b/src/ol/style/Image.js index 6d8fd421b0..a5d552b197 100644 --- a/src/ol/style/Image.js +++ b/src/ol/style/Image.js @@ -10,6 +10,7 @@ import {abstract} from '../util.js'; * @property {boolean} rotateWithView * @property {number} rotation * @property {number} scale + * @property {Array} offset */ @@ -51,6 +52,12 @@ class ImageStyle { */ this.scale_ = options.scale; + /** + * @private + * @type {Array} + */ + this.offset_ = options.offset; + } /** @@ -63,7 +70,8 @@ class ImageStyle { opacity: this.getOpacity(), scale: this.getScale(), rotation: this.getRotation(), - rotateWithView: this.getRotateWithView() + rotateWithView: this.getRotateWithView(), + offset: this.getOffset().slice() }); } @@ -103,6 +111,15 @@ class ImageStyle { return this.scale_; } + /** + * Get the offset of the shape + * @return {Array} Shape's center offset + * @api + */ + getOffset() { + return this.offset_; + } + /** * Get the anchor point in pixels. The anchor determines the center point for the * symbolizer. diff --git a/src/ol/style/RegularShape.js b/src/ol/style/RegularShape.js index 42b4063fe7..1ab5ab500d 100644 --- a/src/ol/style/RegularShape.js +++ b/src/ol/style/RegularShape.js @@ -20,7 +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 {Array} [offset=[0,0]] 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. @@ -62,7 +62,8 @@ class RegularShape extends ImageStyle { opacity: 1, rotateWithView: rotateWithView, rotation: options.rotation !== undefined ? options.rotation : 0, - scale: 1 + scale: 1, + offset: options.offset !== undefined ? options.offset : [0, 0] }); /** @@ -89,12 +90,6 @@ class RegularShape extends ImageStyle { */ this.origin_ = [0, 0]; - /** - * @private - * @type {Array} - */ - this.offset_ = options.offset ? options.offset : [0, 0]; - /** * @private * @type {number} @@ -168,7 +163,7 @@ class RegularShape extends ImageStyle { stroke: this.getStroke() ? this.getStroke().clone() : undefined, rotation: this.getRotation(), rotateWithView: this.getRotateWithView(), - offset: this.getOffset() + offset: this.getOffset().slice() }); style.setOpacity(this.getOpacity()); style.setScale(this.getScale()); @@ -192,15 +187,6 @@ 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. From 78378f02537477131a58329fd94b04058fe23d84 Mon Sep 17 00:00:00 2001 From: jkonieczny Date: Thu, 26 Dec 2019 21:41:43 +0100 Subject: [PATCH 5/7] refactor `offset` to `displacement` --- rendering/cases/regularshape-style/main.js | 2 +- src/ol/style/Circle.js | 6 ++--- src/ol/style/Icon.js | 11 ++++++++- src/ol/style/Image.js | 14 ++++++------ src/ol/style/RegularShape.js | 9 ++++---- test/spec/ol/style/regularshape.test.js | 26 ++++++++++++---------- 6 files changed, 40 insertions(+), 28 deletions(-) diff --git a/rendering/cases/regularshape-style/main.js b/rendering/cases/regularshape-style/main.js index 625fe9265c..eec94e8c25 100644 --- a/rendering/cases/regularshape-style/main.js +++ b/rendering/cases/regularshape-style/main.js @@ -23,7 +23,7 @@ function createFeatures(stroke, fill, offSet = [0, 0]) { points: 4, radius: 10, angle: Math.PI / 4, - offset: [-15, 15] + displacement: [-15, 15] }) })); vectorSource.addFeature(feature); diff --git a/src/ol/style/Circle.js b/src/ol/style/Circle.js index 9ac4a5939e..64dc96cd3a 100644 --- a/src/ol/style/Circle.js +++ b/src/ol/style/Circle.js @@ -10,7 +10,7 @@ import RegularShape from './RegularShape.js'; * @property {import("./Fill.js").default} [fill] Fill style. * @property {number} radius Circle radius. * @property {import("./Stroke.js").default} [stroke] Stroke style. - * @property {Array} [offset=[0,0]] offset + * @property {Array} [displacement=[0,0]] displacement */ @@ -32,7 +32,7 @@ class CircleStyle extends RegularShape { fill: options.fill, radius: options.radius, stroke: options.stroke, - offset: options.offset !== undefined ? options.offset : [0, 0] + displacement: options.displacement !== undefined ? options.displacement : [0, 0] }); } @@ -48,7 +48,7 @@ class CircleStyle extends RegularShape { fill: this.getFill() ? this.getFill().clone() : undefined, stroke: this.getStroke() ? this.getStroke().clone() : undefined, radius: this.getRadius(), - offset: this.getOffset().slice() + displacement: this.getDisplacement().slice() }); style.setOpacity(this.getOpacity()); style.setScale(this.getScale()); diff --git a/src/ol/style/Icon.js b/src/ol/style/Icon.js index 100f8892e8..9206227430 100644 --- a/src/ol/style/Icon.js +++ b/src/ol/style/Icon.js @@ -33,6 +33,7 @@ import ImageStyle from './Image.js'; * to provide the size of the image, with the `imgSize` option. * @property {Array} [offset=[0, 0]] Offset, which, together with the size and the offset origin, define the * sub-rectangle to use from the original icon image. + * @property {Array} [displacement=[0,0]] Displacement the icon from the center * @property {import("./IconOrigin.js").default} [offsetOrigin='top-left'] Origin of the offset: `bottom-left`, `bottom-right`, * `top-left` or `top-right`. * @property {number} [opacity=1] Opacity of the icon. @@ -84,7 +85,7 @@ class Icon extends ImageStyle { opacity: opacity, rotation: rotation, scale: scale, - offset: options.offset !== undefined ? options.offset : [0, 0], + displacement: options.displacement !== undefined ? options.displacement : [0, 0], rotateWithView: rotateWithView }); @@ -173,6 +174,11 @@ class Icon extends ImageStyle { this.iconImage_ = getIconImage( image, /** @type {string} */ (src), imgSize, this.crossOrigin_, imageState, this.color_); + /** + * @private + * @type {Array} + */ + this.offset_ = options.offset !== undefined ? options.offset : [0, 0]; /** * @private * @type {import("./IconOrigin.js").default} @@ -331,6 +337,7 @@ class Icon extends ImageStyle { return this.origin_; } let offset = this.offset_; + const displacement = this.getDisplacement(); if (this.offsetOrigin_ != IconOrigin.TOP_LEFT) { const size = this.getSize(); @@ -348,6 +355,8 @@ class Icon extends ImageStyle { offset[1] = iconImageSize[1] - size[1] - offset[1]; } } + offset[0] += displacement[0]; + offset[1] += displacement[1]; this.origin_ = offset; return this.origin_; } diff --git a/src/ol/style/Image.js b/src/ol/style/Image.js index a5d552b197..3e01ddc84f 100644 --- a/src/ol/style/Image.js +++ b/src/ol/style/Image.js @@ -10,7 +10,7 @@ import {abstract} from '../util.js'; * @property {boolean} rotateWithView * @property {number} rotation * @property {number} scale - * @property {Array} offset + * @property {Array} displacement */ @@ -56,7 +56,7 @@ class ImageStyle { * @private * @type {Array} */ - this.offset_ = options.offset; + this.displacement_ = options.displacement; } @@ -71,7 +71,7 @@ class ImageStyle { scale: this.getScale(), rotation: this.getRotation(), rotateWithView: this.getRotateWithView(), - offset: this.getOffset().slice() + displacement: this.getDisplacement().slice() }); } @@ -112,12 +112,12 @@ class ImageStyle { } /** - * Get the offset of the shape - * @return {Array} Shape's center offset + * Get the displacement of the shape + * @return {Array} Shape's center displacement * @api */ - getOffset() { - return this.offset_; + getDisplacement() { + return this.displacement_; } /** diff --git a/src/ol/style/RegularShape.js b/src/ol/style/RegularShape.js index 1ab5ab500d..579008e11c 100644 --- a/src/ol/style/RegularShape.js +++ b/src/ol/style/RegularShape.js @@ -20,7 +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=[0,0]] Offset of the shape + * @property {Array} [displacement=[0,0]] 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. @@ -63,7 +63,7 @@ class RegularShape extends ImageStyle { rotateWithView: rotateWithView, rotation: options.rotation !== undefined ? options.rotation : 0, scale: 1, - offset: options.offset !== undefined ? options.offset : [0, 0] + displacement: options.displacement !== undefined ? options.displacement : [0, 0] }); /** @@ -163,7 +163,7 @@ class RegularShape extends ImageStyle { stroke: this.getStroke() ? this.getStroke().clone() : undefined, rotation: this.getRotation(), rotateWithView: this.getRotateWithView(), - offset: this.getOffset().slice() + displacement: this.getDisplacement().slice() }); style.setOpacity(this.getOpacity()); style.setScale(this.getScale()); @@ -356,12 +356,13 @@ class RegularShape extends ImageStyle { // canvas.width and height are rounded to the closest integer size = this.canvas_.width; const imageSize = size; + const displacement = this.getDisplacement(); this.draw_(renderOptions, context, 0, 0); this.createHitDetectionCanvas_(renderOptions); - this.anchor_ = [size / 2 - this.offset_[0], size / 2 + this.offset_[1]]; + this.anchor_ = [size / 2 - displacement[0], size / 2 + displacement[1]]; this.size_ = [size, size]; this.imageSize_ = [imageSize, imageSize]; } diff --git a/test/spec/ol/style/regularshape.test.js b/test/spec/ol/style/regularshape.test.js index 76b4a39aff..3b2c81cb1f 100644 --- a/test/spec/ol/style/regularshape.test.js +++ b/test/spec/ol/style/regularshape.test.js @@ -82,23 +82,23 @@ describe('ol.style.RegularShape', function() { expect(style.getHitDetectionImageSize()).to.eql([21, 21]); }); - it('sets default offset [0, 0]', function() { + it('sets default displacement [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); + expect(style.getDisplacement()).to.an('array'); + expect(style.getDisplacement()[0]).to.eql(0); + expect(style.getDisplacement()[1]).to.eql(0); }); it('can use offset', function() { const style = new RegularShape({ radius: 5, - offset: [10, 20] + displacement: [10, 20] }); - expect(style.getOffset()).to.an('array'); - expect(style.getOffset()[0]).to.eql(10); - expect(style.getOffset()[1]).to.eql(20); + expect(style.getDisplacement()).to.an('array'); + expect(style.getDisplacement()[0]).to.eql(10); + expect(style.getDisplacement()[1]).to.eql(20); }); }); @@ -127,7 +127,7 @@ describe('ol.style.RegularShape', function() { }), rotation: 2, rotateWithView: true, - offest: [10, 20] + displacement: [10, 20] }); original.setOpacity(0.5); original.setScale(1.5); @@ -142,8 +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]); + expect(original.getDisplacement()[0]).to.eql(clone.getDisplacement()[0]); + expect(original.getDisplacement()[1]).to.eql(clone.getDisplacement()[1]); }); it('the clone does not reference the same objects as the original', function() { @@ -153,11 +153,13 @@ describe('ol.style.RegularShape', function() { }), stroke: new Stroke({ color: '#319FD3' - }) + }), + displacement: [0, 5] }); const clone = original.clone(); expect(original.getFill()).to.not.be(clone.getFill()); expect(original.getStroke()).to.not.be(clone.getStroke()); + expect(original.getDisplacement()).to.not.be(clone.getDisplacement()); clone.getFill().setColor('#012345'); clone.getStroke().setColor('#012345'); From 2112478b6b75efabab487e16eaef90ed2b337340 Mon Sep 17 00:00:00 2001 From: jkonieczny Date: Thu, 26 Dec 2019 22:07:05 +0100 Subject: [PATCH 6/7] Added test + jsdoc --- src/ol/style/Icon.js | 2 +- src/ol/style/RegularShape.js | 2 +- test/spec/ol/style/icon.test.js | 18 +++++++++++++++++- 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/src/ol/style/Icon.js b/src/ol/style/Icon.js index 9206227430..9882e4e274 100644 --- a/src/ol/style/Icon.js +++ b/src/ol/style/Icon.js @@ -33,7 +33,7 @@ import ImageStyle from './Image.js'; * to provide the size of the image, with the `imgSize` option. * @property {Array} [offset=[0, 0]] Offset, which, together with the size and the offset origin, define the * sub-rectangle to use from the original icon image. - * @property {Array} [displacement=[0,0]] Displacement the icon from the center + * @property {Array} [displacement=[0,0]] Displacement the icon * @property {import("./IconOrigin.js").default} [offsetOrigin='top-left'] Origin of the offset: `bottom-left`, `bottom-right`, * `top-left` or `top-right`. * @property {number} [opacity=1] Opacity of the icon. diff --git a/src/ol/style/RegularShape.js b/src/ol/style/RegularShape.js index 579008e11c..30f017ef91 100644 --- a/src/ol/style/RegularShape.js +++ b/src/ol/style/RegularShape.js @@ -20,7 +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} [displacement=[0,0]] Offset of the shape + * @property {Array} [displacement=[0,0]] Displacement 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. diff --git a/test/spec/ol/style/icon.test.js b/test/spec/ol/style/icon.test.js index 6c790e32a1..b8e9cc35d2 100644 --- a/test/spec/ol/style/icon.test.js +++ b/test/spec/ol/style/icon.test.js @@ -97,22 +97,26 @@ describe('ol.style.Icon', function() { color: [1, 2, 3, 0.4], src: src, offset: [1, 2], - size: [10, 12] + size: [10, 12], + displacement: [5, 6] }); const clone = original.clone(); expect(original.getAnchor()).not.to.be(clone.getAnchor()); expect(original.offset_).not.to.be(clone.offset_); expect(original.getColor()).not.to.be(clone.getColor()); expect(original.getSize()).not.to.be(clone.getSize()); + expect(original.getDisplacement()).not.to.be(clone.getDisplacement()); clone.anchor_[0] = 0; clone.offset_[0] = 0; clone.color_[0] = 0; clone.size_[0] = 5; + clone.displacement_[0] = 10; expect(original.anchor_).not.to.eql(clone.anchor_); expect(original.offset_).not.to.eql(clone.offset_); expect(original.color_).not.to.eql(clone.color_); expect(original.size_).not.to.eql(clone.size_); + expect(original.displacement_).not.to.eql(clone.displacement_); }); }); @@ -229,6 +233,18 @@ describe('ol.style.Icon', function() { iconStyle.iconImage_.size_ = imageSize; expect(iconStyle.getOrigin()).to.eql([92, 20]); }); + + it('uses a top right offset origin + displacement', function() { + const iconStyle = new Icon({ + src: 'test.png', + size: size, + offset: offset, + offsetOrigin: 'top-right', + displacement: [20, 10] + }); + iconStyle.iconImage_.size_ = imageSize; + expect(iconStyle.getOrigin()).to.eql([92 + 20, 20 + 10]); + }); }); describe('#getImageSize', function() { From df710e4d6f2b9bdd4907e25a0a1188dcb779d8c8 Mon Sep 17 00:00:00 2001 From: jkonieczny Date: Mon, 13 Jan 2020 17:24:12 +0100 Subject: [PATCH 7/7] fix example with displacement --- examples/regularshape.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/regularshape.js b/examples/regularshape.js index 4431efcd25..0c194892d3 100644 --- a/examples/regularshape.js +++ b/examples/regularshape.js @@ -68,7 +68,7 @@ const styles = { points: 4, radius: 5, angle: Math.PI / 4, - offset: [0, 10] + displacement: [0, 10] }) }), new Style({