Merge pull request #13747 from theduckylittle/feature/add-setters-to-shape-styles

Add setFill and setStroke to Shapes

examples/regularshape.html

@@ -12,3 +12,6 @@ docs: >
 tags: "vector, symbol, regularshape, style, square, rectangle, cross, star, triangle, x"
 ---
 <div id="map" class="map"></div>
+<div>
+  <button id="color-changer">Change Square Colors</button>
+</div>

examples/regularshape.js

@@ -129,3 +129,14 @@ const map = new Map({
     zoom: 2,
   }),
 });
+
+const colors = ['blue', 'green', 'yellow', 'aqua', 'red'];
+let currentColor = 0;
+
+document.getElementById('color-changer').addEventListener('click', function () {
+  styles.square
+    .getImage()
+    .setFill(new Fill({color: colors[currentColor % colors.length]}));
+  vectorLayer.changed();
+  currentColor++;
+});

src/ol/style/RegularShape.js

@@ -200,6 +200,16 @@ class RegularShape extends ImageStyle {
     return this.fill_;
   }
 
+  /**
+   * Set the fill style.
+   * @param {import("./Fill.js").default} fill Fill style.
+   * @api
+   */
+  setFill(fill) {
+    this.fill_ = fill;
+    this.render();
+  }
+
   /**
    * @return {HTMLCanvasElement} Image element.
    */
@@ -309,6 +319,16 @@ class RegularShape extends ImageStyle {
     return this.stroke_;
   }
 
+  /**
+   * Set the stroke style.
+   * @param {import("./Stroke.js").default} stroke Stroke style.
+   * @api
+   */
+  setStroke(stroke) {
+    this.stroke_ = stroke;
+    this.render();
+  }
+
   /**
    * @param {function(import("../events/Event.js").default): void} listener Listener function.
    */

test/rendering/cases/regularshape-style-setters/main.js

@@ -0,0 +1,48 @@
+import Feature from '../../../../src/ol/Feature.js';
+import Fill from '../../../../src/ol/style/Fill.js';
+import Map from '../../../../src/ol/Map.js';
+import Point from '../../../../src/ol/geom/Point.js';
+import RegularShape from '../../../../src/ol/style/RegularShape.js';
+import Stroke from '../../../../src/ol/style/Stroke.js';
+import Style from '../../../../src/ol/style/Style.js';
+import VectorLayer from '../../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import View from '../../../../src/ol/View.js';
+
+const vectorSource = new VectorSource({
+  features: [
+    new Feature({
+      geometry: new Point([0, 0]),
+    }),
+  ],
+});
+
+const regularShapeStyle = new RegularShape({
+  fill: new Fill({color: 'red'}),
+  stroke: new Stroke({color: 'blue'}),
+  points: 4,
+  radius: 10,
+});
+
+const vectorLayer = new VectorLayer({
+  source: vectorSource,
+  style: new Style({
+    image: regularShapeStyle,
+  }),
+});
+
+const map = new Map({
+  target: 'map',
+  layers: [vectorLayer],
+  view: new View({
+    center: [0, 0],
+    resolution: 1,
+  }),
+});
+map.renderSync();
+
+regularShapeStyle.setFill(new Fill({color: 'green'}));
+regularShapeStyle.setStroke(new Stroke({color: 'yellow'}));
+vectorLayer.changed();
+
+render();