feature: add configurable highlight to measure line for visibility (#…

…2034) * feature: add configurable highlight to measure line for visibility * fix: make buffer tool work
origo-map · Aug 21, 2024 · 60bb6e2 · 60bb6e2
1 parent aeec21d
commit 60bb6e2
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 20 deletions.
diff --git a/src/controls/measure.js b/src/controls/measure.js
@@ -23,7 +23,8 @@ const Measure = function Measure({
   snap = false,
   snapIsActive = true,
   snapLayers,
-  snapRadius = 15
+  snapRadius = 15,
+  highlightColor
 } = {}) {
   let map;
   let activeButton;
@@ -74,7 +75,7 @@ const Measure = function Measure({
   function styleFunction(feature, segments, drawType, tip) {
     const styleScale = feature.get('styleScale') || 1;
     const labelStyle = drawStyles.getLabelStyle(styleScale);
-    let styles = [measureStyle(styleScale)];
+    let styles = measureStyle({ styleScale, highlightColor });
     const geometry = feature.getGeometry();
     const geomType = geometry.getType();
     let point; let line; let label;
@@ -206,8 +207,12 @@ const Measure = function Measure({
     }
     const pointCenter = feature.getGeometry().getCoordinates();
     const bufferCircle = new Circle(pointCenter, bufferSize);
+
+    feature.setStyle((feat) => {
+      const [styleColl, ...styles] = drawStyles.bufferStyleFunction(feat, highlightColor);
+      return [...styleColl, ...styles];
+    });
     feature.setGeometry(bufferCircle);
-    feature.setStyle((feat) => drawStyles.bufferStyleFunction(feat));
   }
 
   function clearSnapInteractions() {

diff --git a/src/style/drawstyles.js b/src/style/drawstyles.js
@@ -10,6 +10,11 @@ import {
 import { getArea, getLength } from 'ol/sphere';
 import { LineString, MultiPoint, Point } from 'ol/geom';
 
+function isValidRgbaString(colorString) {
+  const regex = /^rgba\(\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d+(?:\.\d+)?)\s*\)$/;
+  return regex.test(colorString);
+}
+
 function createRegularShape(type, pointSize, pointFill, pointStroke, pointRotation) {
   let style;
   const size = pointSize || 10;
@@ -219,26 +224,45 @@ const selectionStyle = new Style({
   }
 });
 
-const measureStyle = function measureStyle(scale = 1) {
-  return new Style({
-    fill: new Fill({
-      color: 'rgba(255, 255, 255, 0.4)'
-    }),
-    stroke: new Stroke({
-      color: 'rgba(0, 0, 0, 0.8)',
-      lineDash: [10 * scale, 10 * scale],
-      width: 2 * scale
+const measureStyle = function measureStyle({ scale = 1, highlightColor } = {}) {
+  const highlight = isValidRgbaString(highlightColor) ? highlightColor : 'rgba(133, 193, 233, 0.8)';
+  return [
+    new Style({
+      fill: new Fill({
+        color: 'rgba(255, 255, 255, 0.4)'
+      }),
+      stroke: new Stroke({
+        color: highlight,
+        lineDash: [10 * scale, 10 * scale],
+        width: 5 * scale
+      }),
+      image: new CircleStyle({
+        radius: 7 * scale,
+        stroke: new Stroke({
+          color: highlight
+        }),
+        fill: new Fill({
+          color: 'rgba(255, 255, 255, 0.2)'
+        })
+      })
     }),
-    image: new CircleStyle({
-      radius: 5 * scale,
+    new Style({
       stroke: new Stroke({
-        color: 'rgba(0, 0, 0, 0.7)'
+        color: 'rgba(0, 0, 0, 0.8)',
+        lineDash: [10 * scale, 10 * scale],
+        width: 2 * scale
       }),
-      fill: new Fill({
-        color: 'rgba(255, 255, 255, 0.2)'
+      image: new CircleStyle({
+        radius: 5 * scale,
+        stroke: new Stroke({
+          color: 'rgba(0, 0, 0, 0.7)'
+        }),
+        fill: new Fill({
+          color: 'rgba(255, 255, 255, 0.2)'
+        })
       })
     })
-  });
+  ];
 };
 
 const labelStyle = function labelStyle(scale = 1) {
@@ -412,11 +436,11 @@ function getBufferPointStyle(scale = 1) {
   });
 }
 
-function bufferStyleFunction(feature) {
+function bufferStyleFunction(feature, highlightColor) {
   const styleScale = feature.get('styleScale') || 1;
   const bufferLabelStyle = getBufferLabelStyle(`${formatRadius(feature)}`, styleScale);
   const pointStyle = getBufferPointStyle(styleScale);
-  return [measureStyle(styleScale), bufferLabelStyle, pointStyle];
+  return [measureStyle({ scale: styleScale, highlightColor }), bufferLabelStyle, pointStyle];
 }
 
 const measure = {