Feature/1526 measurer select feature

apps/client/src/models/DrawModel.js

@@ -159,6 +159,40 @@ class DrawModel {
     this.#createDrawTooltip();
   }
 
+  // Generates a random string that can be used as an ID.
+  generateRandomString = () => {
+    return Math.random().toString(36).slice(2, 9);
+  };
+
+  createHighlightStyle = () => {
+    return new Style({
+      stroke: new Stroke({
+        color: "rgba(255, 0, 0, 1)",
+        width: 3,
+      }),
+      fill: new Fill({
+        color: "rgba(255, 0, 0, 0.1)",
+      }),
+    });
+  };
+
+  // Creates a new feature with the same geometry as the supplied one. The new
+  // feature can be used an an highlight, to show where the supplied feature is.
+  createHighlightFeature = (feature) => {
+    // If no feature (or a feature with no get-geometry) is supplied, we abort.
+    if (feature && feature.getGeometry()) {
+      // Otherwise we create a new feature...
+      const highlightFeature = new Feature({
+        geometry: feature.getGeometry().clone(),
+      });
+      // ...set an id and a highlight-style...
+      highlightFeature.setId(this.generateRandomString());
+      highlightFeature.setStyle(this.createHighlightStyle());
+      // Finally we return the feature so that we can add it to the map etc.
+      return highlightFeature;
+    }
+  };
+
   // Returns the supplied observerPrefix from the supplied settings or null if none was supplied.
   #getObserverPrefix = (settings) => {
     return typeof settings.observerPrefix === "string"

apps/client/src/plugins/Measurer/Measurer.js

@@ -273,7 +273,7 @@ function Measurer(props) {
         title: state.title || "Mät",
         description: "Mät längder och ytor",
         height: "dynamic",
-        width: 360,
+        width: 400,
         customPanelHeaderButtons: customHeaderButtons,
 
         onWindowHide: onWindowHide,

apps/client/src/plugins/Measurer/MeasurerView.js

@@ -13,9 +13,11 @@ import {
 
 import { IconPolygon, IconPoint, IconLine, IconCircle } from "./MeasurerIcons";
 import DeleteIcon from "@mui/icons-material/Delete";
+import TouchAppIcon from "@mui/icons-material/TouchApp";
 import ConfirmationDialog from "../../components/ConfirmationDialog";
 import { useEffect, useState } from "react";
 import HajkToolTip from "components/HajkToolTip";
+import SelectFeaturesDialog from "utils/SelectFeaturesDialog";
 
 const SvgImg = styled("img")(({ theme }) => ({
   height: "24px",
@@ -149,6 +151,11 @@ function MeasurerView(props) {
                 <SvgImg src={IconCircle()} />
               </StyledToggleButton>
             </HajkToolTip>
+            <HajkToolTip title="Välj på kartan">
+              <StyledToggleButton value="Select">
+                <TouchAppIcon />
+              </StyledToggleButton>
+            </HajkToolTip>
             <HajkToolTip title="Ta bort enskild mätning">
               <StyledToggleButton value="Delete">
                 <DeleteIcon />
@@ -184,6 +191,10 @@ function MeasurerView(props) {
         }}
       />
       <HelpDialog open={showHelp} setShowHelp={setShowHelp} />
+      <SelectFeaturesDialog
+        localObserver={props.localObserver}
+        drawModel={drawModel}
+      />
     </>
   );
 }

apps/client/src/plugins/Sketch/models/SketchModel.js

@@ -218,18 +218,6 @@ class SketchModel {
     });
   };
 
-  #createHighlightStyle = () => {
-    return new Style({
-      stroke: new Stroke({
-        color: "rgba(255, 0, 0, 1)",
-        width: 3,
-      }),
-      fill: new Fill({
-        color: "rgba(255, 0, 0, 0.1)",
-      }),
-    });
-  };
-
   // Accepts a feature with a Circle-geometry and updates the feature-geometry
   // to a Point-geometry along with an additional property ("CIRCLE_RADIUS") that can
   // be used to construct a "real" Circle-geometry when the feature is to be added to
@@ -484,23 +472,6 @@ class SketchModel {
     return s1.toLowerCase() === s2.toLowerCase();
   };
 
-  // Creates a new feature with the same geometry as the supplied one. The new
-  // feature can be used an an highlight, to show where the supplied feature is.
-  createHighlightFeature = (feature) => {
-    // If no feature (or a feature with no get-geometry) is supplied, we abort.
-    if (feature && feature.getGeometry()) {
-      // Otherwise we create a new feature...
-      const highlightFeature = new Feature({
-        geometry: feature.getGeometry().clone(),
-      });
-      // ...set an id and a highlight-style...
-      highlightFeature.setId(this.generateRandomString());
-      highlightFeature.setStyle(this.#createHighlightStyle());
-      // Finally we return the feature so that we can add it to the map etc.
-      return highlightFeature;
-    }
-  };
-
   // Returns wether helper-snacks should be shown or not
   getShowHelperSnacks = () => {
     return this.#showHelperSnacks;

apps/client/src/plugins/Sketch/views/AddView.js

@@ -5,7 +5,7 @@ import DrawTypeSelector from "../components/DrawTypeSelector";
 import Information from "../components/Information";
 import FeatureStyleSelector from "../components/featureStyle/FeatureStyleSelector";
 import FeatureTextSetter from "../components/FeatureTextSetter";
-import SelectFeaturesDialog from "../components/SelectFeaturesDialog";
+import SelectFeaturesDialog from "utils/SelectFeaturesDialog";
 
 const AddView = (props) => {
   // Let's destruct some properties from the props

apps/client/src/plugins/Sketch/components/SelectFeaturesDialog.js → apps/client/src/utils/SelectFeaturesDialog.js

@@ -14,11 +14,7 @@ import {
   ListItemText,
 } from "@mui/material";
 
-export default function SelectFeaturesDialog({
-  localObserver,
-  drawModel,
-  model,
-}) {
+export default function SelectFeaturesDialog({ localObserver, drawModel }) {
   // Let's keep everything in one state here since all properties are
   // changing at the same time (almost).
   const [state, setState] = React.useState({
@@ -81,7 +77,7 @@ export default function SelectFeaturesDialog({
     // Let's get the clicked feature we're currently hoovering.
     const hoveredFeature = state.clickedFeatures[index];
     // Then we can create a corresponding highlight-feature.
-    const highlightFeature = model.createHighlightFeature(hoveredFeature);
+    const highlightFeature = drawModel.createHighlightFeature(hoveredFeature);
     // We'll add the highlight-feature to the draw-layer...
     drawModel.addFeature(highlightFeature, { silent: true });
     // ...and update the state so that we can keep track of what we are highlighting.
@@ -105,8 +101,16 @@ export default function SelectFeaturesDialog({
   // (If there's zero or one, the drawModel will take care of it).
   React.useEffect(() => {
     localObserver.subscribe("drawModel.select.click", handleDrawSelectClick);
+    localObserver.subscribe(
+      "measure.drawModel.select.click",
+      handleDrawSelectClick
+    );
     return () => {
       localObserver.unsubscribe("drawModel.select.click");
+      localObserver.unsubscribe(
+        "measure.drawModel.select.click",
+        handleDrawSelectClick
+      );
     };
   }, [localObserver, handleDrawSelectClick]);