refactor offset to displacement

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);

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<number>} [offset=[0,0]] offset
+ * @property {Array<number>} [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());

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<number>} [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<number>} [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<number>}
+     */
+    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_;
   }

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<number>} offset
+ * @property {Array<number>} displacement
  */
 
 
@@ -56,7 +56,7 @@ class ImageStyle {
      * @private
      * @type {Array<number>}
      */
-    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
+   * Get the displacement of the shape
-   * @return {Array<number>} Shape's center offset
+   * @return {Array<number>} Shape's center displacement
    * @api
    */
-  getOffset() {
+  getDisplacement() {
-    return this.offset_;
+    return this.displacement_;
   }
 
   /**

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<number>} [offset=[0,0]] Offset of the shape
+ * @property {Array<number>} [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];
   }

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.getDisplacement()).to.an('array');
-      expect(style.getOffset()[0]).to.eql(0);
+      expect(style.getDisplacement()[0]).to.eql(0);
-      expect(style.getOffset()[1]).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.getDisplacement()).to.an('array');
-      expect(style.getOffset()[0]).to.eql(10);
+      expect(style.getDisplacement()[0]).to.eql(10);
-      expect(style.getOffset()[1]).to.eql(20);
+      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.getDisplacement()[0]).to.eql(clone.getDisplacement()[0]);
-      expect(original.getOffset()[1]).to.eql(clone.getOffset()[1]);
+      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');