feat: allow drawing colour and fill to be customisable (#379)

Co-authored-by: Benjamin Baumann <[email protected]>
theopensystemslab · Aug 30, 2023 · 5fc5678 · 5fc5678
1 parent bacc954
commit 5fc5678
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 72 deletions.
diff --git a/src/components/my-map/docs/my-map-draw.doc.js b/src/components/my-map/docs/my-map-draw.doc.js
@@ -28,6 +28,16 @@ module.exports = {
       type: "Number",
       values: "100 (default)",
     },
+    {
+      name: "drawColor",
+      type: "String",
+      values: "#ff0000 (default)",
+    },
+    {
+      name: "drawFillColor",
+      type: "String",
+      values: "rgba(255, 0, 0, 0.1) (default)",
+    },
     {
       name: "areaUnits",
       type: "String",

diff --git a/src/components/my-map/drawing.ts b/src/components/my-map/drawing.ts
@@ -11,78 +11,91 @@ export type DrawTypeEnum = "Polygon" | "Point"; // ref https://openlayers.org/en
 export type DrawPointerEnum = "crosshair" | "dot";
 
 // drawPointer styles
-const crosshair = new RegularShape({
-  stroke: new Stroke({
-    color: "red",
-    width: 2,
-  }),
-  points: 4, // crosshair aka star
-  radius1: 15, // outer radius
-  radius2: 1, // inner radius
-});
-
-const dot = new CircleStyle({
-  radius: 6,
-  fill: new Fill({
-    color: "#ff0000",
-  }),
-});
-
-// feature style: red-line site boundary
-const redLineBase = {
-  color: "#ff0000",
-  width: 3,
-};
-
-const redLineStroke = new Stroke(redLineBase);
-
-const redDashedStroke = new Stroke({
-  ...redLineBase,
-  lineDash: [2, 8],
-});
-
-const redLineFill = new Fill({
-  color: "rgba(255, 0, 0, 0.1)",
-});
+function crosshair(drawColor: string) {
+  return new RegularShape({
+    stroke: new Stroke({
+      color: drawColor,
+      width: 2,
+    }),
+    points: 4, // crosshair aka star
+    radius1: 15, // outer radius
+    radius2: 1, // inner radius
+  });
+}
 
-const polygonVertices = new Style({
-  image: new RegularShape({
+function dot(drawColor: string) {
+  return new CircleStyle({
+    radius: 6,
     fill: new Fill({
-      color: "#fff",
+      color: drawColor,
     }),
-    stroke: new Stroke({
-      color: "#ff0000",
-      width: 2,
+  });
+}
+
+function polygonVertices(drawColor: string) {
+  return new Style({
+    image: new RegularShape({
+      fill: new Fill({
+        color: "#fff",
+      }),
+      stroke: new Stroke({
+        color: drawColor,
+        width: 2,
+      }),
+      points: 4, // squares
+      radius: 5,
+      angle: Math.PI / 4,
     }),
-    points: 4, // squares
-    radius: 5,
-    angle: Math.PI / 4,
-  }),
-  geometry: function (feature) {
-    const geom = feature.getGeometry();
-    if (geom instanceof Polygon) {
-      // return the coordinates of the drawn polygon
-      const coordinates: number[][] = geom.getCoordinates()[0];
-      return new MultiPoint(coordinates);
-    } else {
-      return;
-    }
-  },
-});
+    geometry: function (feature) {
+      const geom = feature.getGeometry();
+      if (geom instanceof Polygon) {
+        // return the coordinates of the drawn polygon
+        const coordinates = geom.getCoordinates()[0];
+        return new MultiPoint(coordinates);
+      } else {
+        return;
+      }
+    },
+  });
+}
 
-const boundaryLayerStyle: StyleLike = [
-  new Style({
-    fill: redLineFill,
-    stroke: redLineStroke,
-  }),
-  polygonVertices,
-];
+function boundaryLayerStyle(
+  drawColor: string,
+  drawColorFill: string,
+): StyleLike {
+  return [
+    new Style({
+      fill: new Fill({
+        color: drawColorFill,
+      }),
+      stroke: new Stroke({
+        color: drawColor,
+        width: 3,
+      }),
+    }),
+    polygonVertices(drawColor),
+  ];
+}
 
-function configureBoundaryDrawStyle(pointerStyle: DrawPointerEnum) {
+function configureBoundaryDrawStyle(
+  pointerStyle: DrawPointerEnum,
+  drawColor: string,
+  drawFillColor: string,
+) {
   return new Style({
-    stroke: redDashedStroke,
-    fill: redLineFill,
-    image: pointerStyle === "crosshair" ? crosshair : dot,
+    stroke: configureDashedStroke(drawColor),
+    fill: new Fill({
+      color: drawFillColor,
+    }),
+    image: pointerStyle === "crosshair" ? crosshair(drawColor) : dot(drawColor),
+  });
+}
+
+function configureDashedStroke(drawColor: string) {
+  return new Stroke({
+    color: drawColor,
+    width: 3,
+    lineDash: [2, 8],
   });
 }
 
@@ -106,13 +119,15 @@ export const drawingSource = new VectorSource();
 
 export function configureDrawingLayer(
   drawType: DrawTypeEnum,
-  pointColor: string
+  pointColor: string,
+  drawColor: string,
+  drawFillColor: string,
 ) {
   return new VectorLayer({
     source: drawingSource,
     style:
       drawType === "Polygon"
-        ? boundaryLayerStyle
+        ? boundaryLayerStyle(drawColor, drawFillColor)
         : configurePointLayerStyle(pointColor),
   });
 }
@@ -121,14 +136,16 @@ export function configureDrawingLayer(
 export function configureDraw(
   drawType: DrawTypeEnum,
   pointerStyle: DrawPointerEnum,
-  pointColor: string
+  pointColor: string,
+  drawColor: string,
+  drawFillColor: string,
 ) {
   return new Draw({
     source: drawingSource,
     type: drawType,
     style:
       drawType === "Polygon"
-        ? configureBoundaryDrawStyle(pointerStyle)
+        ? configureBoundaryDrawStyle(pointerStyle, drawColor, drawFillColor)
         : configurePointDrawStyle(pointColor),
   });
 }
@@ -138,11 +155,15 @@ export const snap = new Snap({
   pixelTolerance: 15,
 });
 
-export function configureModify(pointerStyle: DrawPointerEnum) {
+export function configureModify(
+  pointerStyle: DrawPointerEnum,
+  drawColor: string,
+) {
   return new Modify({
     source: drawingSource,
     style: new Style({
-      image: pointerStyle === "crosshair" ? crosshair : dot,
+      image:
+        pointerStyle === "crosshair" ? crosshair(drawColor) : dot(drawColor),
     }),
   });
 }
diff --git a/src/components/my-map/index.ts b/src/components/my-map/index.ts
@@ -108,6 +108,12 @@ export class MyMap extends LitElement {
   @property({ type: Boolean })
   clickFeatures = false;
 
+  @property({ type: String })
+  drawColor = "#ff0000";
+
+  @property({ type: String })
+  drawFillColor = "rgba(255, 0, 0, 0.1)";
+
   @property({ type: String })
   featureColor = "#0000ff";
 
@@ -282,8 +288,10 @@ export class MyMap extends LitElement {
       this.drawType,
       this.drawPointer,
       this.drawPointColor,
+      this.drawColor,
+      this.drawFillColor,
     );
-    const modify = configureModify(this.drawPointer);
+    const modify = configureModify(this.drawPointer, this.drawColor);
 
     // add custom scale line and north arrow controls to the map
     let scale: ScaleLine;
@@ -396,6 +404,8 @@ export class MyMap extends LitElement {
     const drawingLayer = configureDrawingLayer(
       this.drawType,
       this.drawPointColor,
+      this.drawColor,
+      this.drawFillColor,
     );
     if (this.drawMode) {
       // make sure drawingSource is cleared upfront, even if drawGeojsonData is provided