refactor offset to displacement

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