From 4ef584b4107783fc634ef7fa0d0859182747e45b Mon Sep 17 00:00:00 2001
From: Duck <dan.little@planet.com>
Date: Thu, 9 Jun 2022 08:30:16 -0700
Subject: [PATCH 1/3] Add setFill and setStroke to Shapes

This rounds out the shape style sto be more
consistent and make the `setFill` and `setStroke`
methods available.
---
 src/ol/style/RegularShape.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/ol/style/RegularShape.js b/src/ol/style/RegularShape.js
index e04f0bc579..587877ec47 100644
--- a/src/ol/style/RegularShape.js
+++ b/src/ol/style/RegularShape.js
@@ -200,6 +200,15 @@ 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;
+  }
+
   /**
    * @return {HTMLCanvasElement} Image element.
    */
@@ -309,6 +318,15 @@ 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;
+  }
+
   /**
    * @param {function(import("../events/Event.js").default): void} listener Listener function.
    */

From c182bbf66b09c4d90fa82e7e05b4b0c7e9f47853 Mon Sep 17 00:00:00 2001
From: Duck <dan.little@planet.com>
Date: Thu, 16 Jun 2022 07:56:03 -0700
Subject: [PATCH 2/3] Show an example of changing the color with setfill

---
 examples/regularshape.html   |  3 +++
 examples/regularshape.js     | 11 +++++++++++
 src/ol/style/RegularShape.js |  2 ++
 3 files changed, 16 insertions(+)

diff --git a/examples/regularshape.html b/examples/regularshape.html
index 59cbf4b762..138ae58ac4 100644
--- a/examples/regularshape.html
+++ b/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>
diff --git a/examples/regularshape.js b/examples/regularshape.js
index 91279aea76..5fa56f8edb 100644
--- a/examples/regularshape.js
+++ b/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++;
+});
diff --git a/src/ol/style/RegularShape.js b/src/ol/style/RegularShape.js
index 587877ec47..06564fb5e5 100644
--- a/src/ol/style/RegularShape.js
+++ b/src/ol/style/RegularShape.js
@@ -207,6 +207,7 @@ class RegularShape extends ImageStyle {
    */
   setFill(fill) {
     this.fill_ = fill;
+    this.render();
   }
 
   /**
@@ -325,6 +326,7 @@ class RegularShape extends ImageStyle {
    */
   setStroke(stroke) {
     this.stroke_ = stroke;
+    this.render();
   }
 
   /**

From bd620bdf93f7f8b47b0c6bb80f77bb2b46ba0c29 Mon Sep 17 00:00:00 2001
From: Duck <dan.little@planet.com>
Date: Thu, 23 Jun 2022 06:39:05 -0700
Subject: [PATCH 3/3] Add rendering test for the setFill/setStroke

---
 .../regularshape-style-setters/expected.png   | Bin 0 -> 1122 bytes
 .../cases/regularshape-style-setters/main.js  |  48 ++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 test/rendering/cases/regularshape-style-setters/expected.png
 create mode 100644 test/rendering/cases/regularshape-style-setters/main.js

diff --git a/test/rendering/cases/regularshape-style-setters/expected.png b/test/rendering/cases/regularshape-style-setters/expected.png
new file mode 100644
index 0000000000000000000000000000000000000000..291026fdd4888211929e560ec7ce6b88368e1986
GIT binary patch
literal 1122
zcmeAS@N?(olHy`uVBq!ia0y~yU<5K5893O0R7}x|G!U;i$lZxy-8q?;3=AwXo-U3d
z6?5L++UpygDAD$Cy3YZQfF<WRJp0u>CbMpGKEW5+(8l>@UXO#XVE+L&KgTB`93QnM
z=l<U1^?Q#0^2)rM)B4MH-_2`S!rxxU@SuQ&;m|0eRR}2L8sENsdFD--Uyc?6j3;iL
zIg_QgZoBbjDZvb(h9$c{uGdRHw>~Xwy0Ov)6$Z=y$M^62`TbNcM+m3GslOlJ-xq9D
zVLVY$@#nX;i-J3YkevMge_nzff(=KjfBpDg-r>;3pmXc<@%{UQS%g>;Hpbcg`^%}c
zp~4*)yX7z1AH2=Y_kaGV%KCZudi&RZPM_KCuU=gA=lR$6kLx%NB<=kteBjKPo5yE<
zy*_j1*E4hWo?ZMg?+4e0h;-x4^S)l+Ex7*$%j0+(#)vJ`-4FbbW=Z%sPoDAddx3_Q
z<v@Nki^AiN91`{Y3`=Ze7$4^gHO%=fXz)+(Kl6!Qzvmw~f8W^N?z}|(WQHZVY1O}L
r{rc*AKbmtgwEW~9O>Q&`fqzVL{S$U@v`$C@78(qmu6{1-oD!M<ZdQ0$

literal 0
HcmV?d00001

diff --git a/test/rendering/cases/regularshape-style-setters/main.js b/test/rendering/cases/regularshape-style-setters/main.js
new file mode 100644
index 0000000000..5e97d7e624
--- /dev/null
+++ b/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();