@open-pioneer/measurement 0.4.2 → 0.4.4

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @open-pioneer/measurement
 
+## 0.4.4
+
+### Patch Changes
+
+-   b152428: Update trails dependencies
+-   23b48ad: Add two new optional properties:
+
+    -   `predefinedMeasurements`: an array of measurements that will be added to the map (without user interaction)
+    -   `onMeasurementsChange`: an event listener that will be called when measurements are added or removed
+
+    ```tsx
+    const predefinedMeasurements = useMemo(
+        () => [
+            new LineString([
+                [398657.97, 5755696.26],
+                [402570.98, 5757547.78]
+            ])
+        ],
+        []
+    );
+
+    <Measurement
+        mapId={MAP_ID}
+        onMeasurementsChange={(e) => console.log(e.kind, e.geometry)}
+        predefinedMeasurements={predefinedMeasurements}
+    />;
+    ```
+
+-   Updated dependencies [b152428]
+-   Updated dependencies [291ccb6]
+    -   @open-pioneer/map@0.6.1
+
+## 0.4.3
+
+### Patch Changes
+
+-   28e092a: Update dependencies
+-   484ad86: Add tooltip role to tooltip divs (See https://github.com/open-pioneer/trails-openlayers-base-packages/issues/309).
+-   Updated dependencies [28e092a]
+-   Updated dependencies [0d51d2f]
+-   Updated dependencies [76f8863]
+    -   @open-pioneer/map@0.6.0
+
 ## 0.4.2
 
 ### Patch Changes

package/Measurement.d.ts

@@ -1,6 +1,28 @@
 import { CommonComponentProps } from "@open-pioneer/react-utils";
 import { StyleLike } from "ol/style/Style";
 import { FC } from "react";
+import LineString from "ol/geom/LineString";
+import Polygon from "ol/geom/Polygon";
+/** Emitted when a new measurement is being added to the map. */
+export interface MeasurementsAddEvent {
+    kind: "add-measurement";
+    geometry: MeasurementGeometry;
+}
+/** Emitted when a measurement is being removed from the map. */
+export interface MeasurementsRemoveEvent {
+    kind: "remove-measurement";
+    geometry: MeasurementGeometry;
+}
+/**
+ * A change event emitted by {@link Measurement} when measurements change.
+ *
+ * NOTE: Non-exhaustive. More event types may be added in a future version.
+ **/
+export type MeasurementsChangeEvent = MeasurementsAddEvent | MeasurementsRemoveEvent;
+/**
+ * Represents the geometry of a measurement.
+ */
+export type MeasurementGeometry = LineString | Polygon;
 /**
  * This is for special properties of the Measurement.
  */
@@ -17,8 +39,16 @@ export interface MeasurementProps extends CommonComponentProps {
      * The style for the finished drawn feature's geometry.
      */
     finishedFeatureStyle?: StyleLike;
+    /**
+     * List of measurements to be rendered when the component is initialized.
+     */
+    predefinedMeasurements?: MeasurementGeometry[];
+    /**
+     * Event handler that is called whenever a measurement is added or removed.
+     */
+    onMeasurementsChange?: (event: MeasurementsChangeEvent) => void;
 }
 /**
- * The `Measurement` component can be used in an app to switch between distance and area measurements and to delete all current measurements.
+ * The `Measurement` component can be used in an app to measure geometries (areas or lines) on the map.
  */
 export declare const Measurement: FC<MeasurementProps>;

package/Measurement.js

@@ -2,27 +2,19 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Box, Text, FormControl, HStack, FormLabel, Select, Button } from '@open-pioneer/chakra-integration';
 import { useMapModel } from '@open-pioneer/map';
 import { useCommonComponentProps } from '@open-pioneer/react-utils';
-import { Style, Stroke, Fill, Circle } from 'ol/style';
+import { Style, Stroke, Fill, Circle } from 'ol/style.js';
 import { useIntl } from './_virtual/_virtual-pioneer-module_react-hooks.js';
 import { useState, useEffect } from 'react';
 import { MeasurementController } from './MeasurementController.js';
 
 const Measurement = (props) => {
   const intl = useIntl();
-  const { mapId, activeFeatureStyle, finishedFeatureStyle } = props;
+  const { mapId } = props;
   const { containerProps } = useCommonComponentProps("measurement", props);
   const [selectedMeasurement, setMeasurement] = useState("distance");
   const label = (id) => intl.formatMessage({ id });
   const mapState = useMapModel(mapId);
-  const controller = useController(mapState.map, intl);
-  useEffect(() => {
-    controller?.setActiveFeatureStyle(activeFeatureStyle ?? getDefaultActiveFeatureStyle());
-  }, [controller, activeFeatureStyle]);
-  useEffect(() => {
-    controller?.setFinishedFeatureStyle(
-      finishedFeatureStyle ?? getDefaultFinishedFeatureStyle()
-    );
-  }, [controller, finishedFeatureStyle]);
+  const controller = useController(mapState.map, props, intl);
   useEffect(() => {
     if (!controller) {
       return;
@@ -71,7 +63,13 @@ const Measurement = (props) => {
     )
   ] });
 };
-function useController(map, intl) {
+function useController(map, props, intl) {
+  const {
+    activeFeatureStyle,
+    finishedFeatureStyle,
+    onMeasurementsChange,
+    predefinedMeasurements
+  } = props;
   const [controller, setController] = useState(void 0);
   useEffect(() => {
     if (!map) {
@@ -96,6 +94,20 @@ function useController(map, intl) {
       setController(void 0);
     };
   }, [map, intl]);
+  useEffect(() => {
+    controller?.setActiveFeatureStyle(activeFeatureStyle ?? getDefaultActiveFeatureStyle());
+  }, [controller, activeFeatureStyle]);
+  useEffect(() => {
+    controller?.setFinishedFeatureStyle(
+      finishedFeatureStyle ?? getDefaultFinishedFeatureStyle()
+    );
+  }, [controller, finishedFeatureStyle]);
+  useEffect(() => {
+    controller?.setMeasurementSourceChangedHandler(onMeasurementsChange);
+  }, [controller, onMeasurementsChange]);
+  useEffect(() => {
+    controller?.setPredefinedMeasurements(predefinedMeasurements ?? []);
+  }, [controller, predefinedMeasurements]);
   return controller;
 }
 function getDefaultActiveFeatureStyle() {

package/Measurement.js.map

@@ -1 +1 @@
-{"version":3,"file":"Measurement.js","sources":["Measurement.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport {\n    Box,\n    Button,\n    FormControl,\n    FormLabel,\n    HStack,\n    Select,\n    Text\n} from \"@open-pioneer/chakra-integration\";\nimport { MapModel, useMapModel } from \"@open-pioneer/map\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport { Circle as CircleStyle, Fill, Stroke, Style } from \"ol/style\";\nimport { StyleLike } from \"ol/style/Style\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, useEffect, useState } from \"react\";\nimport { MeasurementController, MeasurementType } from \"./MeasurementController\";\n\n/**\n * This is for special properties of the Measurement.\n */\nexport interface MeasurementProps extends CommonComponentProps {\n    /**\n     * The id of the map.\n     */\n    mapId: string;\n\n    /**\n     * The style for the active drawing feature's geometry.\n     */\n    activeFeatureStyle?: StyleLike;\n\n    /**\n     * The style for the finished drawn feature's geometry.\n     */\n    finishedFeatureStyle?: StyleLike;\n}\n\n/**\n * The `Measurement` component can be used in an app to switch between distance and area measurements and to delete all current measurements.\n */\nexport const Measurement: FC<MeasurementProps> = (props) => {\n    const intl = useIntl();\n\n    const { mapId, activeFeatureStyle, finishedFeatureStyle } = props;\n    const { containerProps } = useCommonComponentProps(\"measurement\", props);\n    const [selectedMeasurement, setMeasurement] = useState<MeasurementType>(\"distance\");\n    const label = (id: string) => intl.formatMessage({ id: id });\n\n    const mapState = useMapModel(mapId);\n    const controller = useController(mapState.map, intl);\n\n    // Synchronize styles with controller\n    useEffect(() => {\n        controller?.setActiveFeatureStyle(activeFeatureStyle ?? getDefaultActiveFeatureStyle());\n    }, [controller, activeFeatureStyle]);\n    useEffect(() => {\n        controller?.setFinishedFeatureStyle(\n            finishedFeatureStyle ?? getDefaultFinishedFeatureStyle()\n        );\n    }, [controller, finishedFeatureStyle]);\n\n    // Start / Stop measurement on selection change\n    useEffect(() => {\n        if (!controller) {\n            return;\n        }\n\n        controller.startMeasurement(selectedMeasurement);\n        return () => {\n            controller.stopMeasurement();\n        };\n    }, [controller, selectedMeasurement]);\n\n    function changeMeasurement(measurementType: string) {\n        if (measurementType === \"distance\" || measurementType === \"area\") {\n            setMeasurement(measurementType);\n        } else {\n            throw new Error(`Unexpected measurement type: '${measurementType}'.`);\n        }\n    }\n\n    function removeMeasurements() {\n        controller?.clearMeasurements();\n    }\n\n    return (\n        <Box {...containerProps}>\n            <Text mb={3}>{intl.formatMessage({ id: \"measurementInfoText\" })}</Text>\n            <FormControl mb={4} alignItems=\"center\">\n                <HStack mb={2}>\n                    <FormLabel mb={1}>{label(\"measurementLabel\")}</FormLabel>\n                    <Select\n                        value={selectedMeasurement}\n                        onChange={(e) => changeMeasurement(e.target.value)}\n                        className=\"measurement-select\"\n                    >\n                        <option value={\"distance\"}>{label(\"distance\")}</option>\n                        <option value={\"area\"}>{label(\"area\")}</option>\n                    </Select>\n                </HStack>\n            </FormControl>\n            <Button\n                padding={2}\n                className=\"measurement-delete-button\"\n                onClick={removeMeasurements}\n                width=\"100%\"\n            >\n                {label(\"deleteMeasurementLabel\")}\n            </Button>\n        </Box>\n    );\n};\n\n/** Creates a MeasurementController instance for the given map. */\nfunction useController(map: MapModel | undefined, intl: PackageIntl) {\n    const [controller, setController] = useState<MeasurementController | undefined>(undefined);\n    useEffect(() => {\n        if (!map) {\n            return;\n        }\n\n        const controller = new MeasurementController(map.olMap, {\n            getContinueMessage() {\n                return intl.formatMessage({ id: \"tooltips.continue\" });\n            },\n            getHelpMessage() {\n                return intl.formatMessage({ id: \"tooltips.help\" });\n            },\n            formatNumber(value) {\n                return intl.formatNumber(value, {\n                    maximumFractionDigits: 2\n                });\n            }\n        });\n        setController(controller);\n        return () => {\n            controller.destroy();\n            setController(undefined);\n        };\n    }, [map, intl]);\n    return controller;\n}\n\nfunction getDefaultActiveFeatureStyle() {\n    return [\n        new Style({\n            stroke: new Stroke({\n                color: \"#fff\",\n                lineDash: [10, 10],\n                width: 5\n            })\n        }),\n        new Style({\n            fill: new Fill({\n                color: \"rgba(0,0,0,0.15)\"\n            }),\n            stroke: new Stroke({\n                color: \"rgba(0, 0, 0, 0.7)\",\n                lineDash: [10, 10],\n                width: 3\n            }),\n            image: new CircleStyle({\n                radius: 5,\n                stroke: new Stroke({\n                    color: \"rgba(0, 0, 0, 0.7)\",\n                    width: 2\n                }),\n                fill: new Fill({\n                    color: \"rgba(255, 255, 255, 0.2)\"\n                })\n            })\n        })\n    ];\n}\n\nfunction getDefaultFinishedFeatureStyle() {\n    return [\n        new Style({\n            stroke: new Stroke({\n                color: \"#fff\",\n                width: 5\n            })\n        }),\n        new Style({\n            stroke: new Stroke({\n                color: \"#0b96fc\",\n                width: 3\n            }),\n            fill: new Fill({\n                color: \"rgba(11,150,252,0.15)\"\n            })\n        })\n    ];\n}\n"],"names":["controller","CircleStyle"],"mappings":"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"}
+{"version":3,"file":"Measurement.js","sources":["Measurement.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport {\n    Box,\n    Button,\n    FormControl,\n    FormLabel,\n    HStack,\n    Select,\n    Text\n} from \"@open-pioneer/chakra-integration\";\nimport { MapModel, useMapModel } from \"@open-pioneer/map\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport { Circle as CircleStyle, Fill, Stroke, Style } from \"ol/style\";\nimport { StyleLike } from \"ol/style/Style\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, useEffect, useState } from \"react\";\nimport { MeasurementController, MeasurementType } from \"./MeasurementController\";\nimport LineString from \"ol/geom/LineString\";\nimport Polygon from \"ol/geom/Polygon\";\n\n/** Emitted when a new measurement is being added to the map. */\nexport interface MeasurementsAddEvent {\n    kind: \"add-measurement\";\n    geometry: MeasurementGeometry;\n}\n\n/** Emitted when a measurement is being removed from the map. */\nexport interface MeasurementsRemoveEvent {\n    kind: \"remove-measurement\";\n    geometry: MeasurementGeometry;\n}\n\n/**\n * A change event emitted by {@link Measurement} when measurements change.\n *\n * NOTE: Non-exhaustive. More event types may be added in a future version.\n **/\nexport type MeasurementsChangeEvent = MeasurementsAddEvent | MeasurementsRemoveEvent;\n\n/**\n * Represents the geometry of a measurement.\n */\nexport type MeasurementGeometry = LineString | Polygon;\n\n/**\n * This is for special properties of the Measurement.\n */\nexport interface MeasurementProps extends CommonComponentProps {\n    /**\n     * The id of the map.\n     */\n    mapId: string;\n\n    /**\n     * The style for the active drawing feature's geometry.\n     */\n    activeFeatureStyle?: StyleLike;\n\n    /**\n     * The style for the finished drawn feature's geometry.\n     */\n    finishedFeatureStyle?: StyleLike;\n\n    /**\n     * List of measurements to be rendered when the component is initialized.\n     */\n    predefinedMeasurements?: MeasurementGeometry[];\n\n    /**\n     * Event handler that is called whenever a measurement is added or removed.\n     */\n    onMeasurementsChange?: (event: MeasurementsChangeEvent) => void;\n}\n\n/**\n * The `Measurement` component can be used in an app to measure geometries (areas or lines) on the map.\n */\nexport const Measurement: FC<MeasurementProps> = (props) => {\n    const intl = useIntl();\n    const { mapId } = props;\n    const { containerProps } = useCommonComponentProps(\"measurement\", props);\n    const [selectedMeasurement, setMeasurement] = useState<MeasurementType>(\"distance\");\n    const label = (id: string) => intl.formatMessage({ id: id });\n    const mapState = useMapModel(mapId);\n    const controller = useController(mapState.map, props, intl);\n\n    // Start / Stop measurement on selection change\n    useEffect(() => {\n        if (!controller) {\n            return;\n        }\n\n        controller.startMeasurement(selectedMeasurement);\n        return () => {\n            controller.stopMeasurement();\n        };\n    }, [controller, selectedMeasurement]);\n\n    function changeMeasurement(measurementType: string) {\n        if (measurementType === \"distance\" || measurementType === \"area\") {\n            setMeasurement(measurementType);\n        } else {\n            throw new Error(`Unexpected measurement type: '${measurementType}'.`);\n        }\n    }\n\n    function removeMeasurements() {\n        controller?.clearMeasurements();\n    }\n\n    return (\n        <Box {...containerProps}>\n            <Text mb={3}>{intl.formatMessage({ id: \"measurementInfoText\" })}</Text>\n            <FormControl mb={4} alignItems=\"center\">\n                <HStack mb={2}>\n                    <FormLabel mb={1}>{label(\"measurementLabel\")}</FormLabel>\n                    <Select\n                        value={selectedMeasurement}\n                        onChange={(e) => changeMeasurement(e.target.value)}\n                        className=\"measurement-select\"\n                    >\n                        <option value={\"distance\"}>{label(\"distance\")}</option>\n                        <option value={\"area\"}>{label(\"area\")}</option>\n                    </Select>\n                </HStack>\n            </FormControl>\n            <Button\n                padding={2}\n                className=\"measurement-delete-button\"\n                onClick={removeMeasurements}\n                width=\"100%\"\n            >\n                {label(\"deleteMeasurementLabel\")}\n            </Button>\n        </Box>\n    );\n};\n\n/** Creates a MeasurementController instance for the given map. */\nfunction useController(map: MapModel | undefined, props: MeasurementProps, intl: PackageIntl) {\n    const {\n        activeFeatureStyle,\n        finishedFeatureStyle,\n        onMeasurementsChange,\n        predefinedMeasurements\n    } = props;\n    const [controller, setController] = useState<MeasurementController | undefined>(undefined);\n    useEffect(() => {\n        if (!map) {\n            return;\n        }\n        const controller = new MeasurementController(map.olMap, {\n            getContinueMessage() {\n                return intl.formatMessage({ id: \"tooltips.continue\" });\n            },\n            getHelpMessage() {\n                return intl.formatMessage({ id: \"tooltips.help\" });\n            },\n            formatNumber(value) {\n                return intl.formatNumber(value, {\n                    maximumFractionDigits: 2\n                });\n            }\n        });\n\n        setController(controller);\n        return () => {\n            controller.destroy();\n            setController(undefined);\n        };\n    }, [map, intl]);\n\n    // Synchronize styles with controller\n    useEffect(() => {\n        controller?.setActiveFeatureStyle(activeFeatureStyle ?? getDefaultActiveFeatureStyle());\n    }, [controller, activeFeatureStyle]);\n    useEffect(() => {\n        controller?.setFinishedFeatureStyle(\n            finishedFeatureStyle ?? getDefaultFinishedFeatureStyle()\n        );\n    }, [controller, finishedFeatureStyle]);\n    useEffect(() => {\n        controller?.setMeasurementSourceChangedHandler(onMeasurementsChange);\n    }, [controller, onMeasurementsChange]);\n\n    useEffect(() => {\n        controller?.setPredefinedMeasurements(predefinedMeasurements ?? []);\n    }, [controller, predefinedMeasurements]);\n    return controller;\n}\n\nfunction getDefaultActiveFeatureStyle() {\n    return [\n        new Style({\n            stroke: new Stroke({\n                color: \"#fff\",\n                lineDash: [10, 10],\n                width: 5\n            })\n        }),\n        new Style({\n            fill: new Fill({\n                color: \"rgba(0,0,0,0.15)\"\n            }),\n            stroke: new Stroke({\n                color: \"rgba(0, 0, 0, 0.7)\",\n                lineDash: [10, 10],\n                width: 3\n            }),\n            image: new CircleStyle({\n                radius: 5,\n                stroke: new Stroke({\n                    color: \"rgba(0, 0, 0, 0.7)\",\n                    width: 2\n                }),\n                fill: new Fill({\n                    color: \"rgba(255, 255, 255, 0.2)\"\n                })\n            })\n        })\n    ];\n}\n\nfunction getDefaultFinishedFeatureStyle() {\n    return [\n        new Style({\n            stroke: new Stroke({\n                color: \"#fff\",\n                width: 5\n            })\n        }),\n        new Style({\n            stroke: new Stroke({\n                color: \"#0b96fc\",\n                width: 3\n            }),\n            fill: new Fill({\n                color: \"rgba(11,150,252,0.15)\"\n            })\n        })\n    ];\n}\n"],"names":["controller","CircleStyle"],"mappings":"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"}

package/MeasurementController.d.ts

@@ -1,8 +1,9 @@
 import Feature from "ol/Feature";
 import OlMap from "ol/Map";
 import { Vector as VectorLayer } from "ol/layer";
-import { Vector as VectorSource } from "ol/source";
 import { StyleLike } from "ol/style/Style";
+import type { MeasurementGeometry, MeasurementProps } from "./Measurement";
+type MeasurementsChangeHandler = NonNullable<MeasurementProps["onMeasurementsChange"]>;
 export type MeasurementType = "area" | "distance";
 export interface Messages {
     getContinueMessage(): string;
@@ -10,8 +11,8 @@ export interface Messages {
     formatNumber(value: number): string;
 }
 export declare class MeasurementController {
-    private olMap;
-    private messages;
+    readonly olMap: OlMap;
+    readonly messages: Messages;
     private activeFeatureStyle;
     /**
      * The layer rendering the measurement "features".
@@ -26,31 +27,40 @@ export declare class MeasurementController {
      */
     private draw;
     /**
-     * Currently drawn feature.
+     * The active measurement manipulated by the `draw` interaction.
      */
-    private sketch;
+    private activeMeasurement;
     /**
-     * The help tooltip element.
+     * Map that is used to track all predefined measurements currently added to the source.
+     * It associates the measurement geometry (key) with the corresponding measurement instance.
+     *
+     * The measurement instances here must also be contained in `finishedMeasurements`.
      */
-    private helpTooltip;
+    private predefinedMeasurements;
     /**
-     * The current measurement tooltip (if any).
+     * Measurement instances that were finished.
      */
-    private measureTooltip;
+    private finishedMeasurements;
     /**
-     * Overlays/Tooltip containing the tooltip for finished drawings.
+     * The help tooltip element.
      */
-    private overlayTooltips;
+    private helpTooltip;
     /**
      * Keeps track of registered event handlers.
      */
     private resources;
+    /**
+     * Called when a measurement is added to or removed from the source.
+     */
+    private measurementChangedHandler;
     constructor(olMap: OlMap, messages: Messages);
     destroy(): void;
     /** Returns the vector layer used for finished features. */
-    getVectorLayer(): VectorLayer<VectorSource<Feature<import("ol/geom/Geometry").default>>>;
+    getVectorLayer(): VectorLayer<Feature<import("ol/geom").Geometry>>;
     /** Updates the style used for finished features. */
     setFinishedFeatureStyle(style: StyleLike): void;
+    setMeasurementSourceChangedHandler(handler: MeasurementsChangeHandler | undefined): void;
+    setPredefinedMeasurements(geometries: MeasurementGeometry[]): void;
     /** Updates the style used for active measurements. */
     setActiveFeatureStyle(style: StyleLike): void;
     /** Removes all finished measurements. */
@@ -59,7 +69,8 @@ export declare class MeasurementController {
     startMeasurement(type: MeasurementType): void;
     /** Stops the current measuring started by `startMeasurement`. */
     stopMeasurement(): void;
-    private createMeasureTooltip;
-    private createHelpTooltip;
     private handlePointerMove;
+    private updatePredefinedMeasurements;
+    private raiseMeasurementsChangeEvent;
 }
+export {};

package/MeasurementController.js

@@ -1,12 +1,14 @@
-import { unByKey } from 'ol/Observable';
-import Overlay from 'ol/Overlay';
-import { Polygon, LineString } from 'ol/geom';
-import Draw from 'ol/interaction/Draw';
-import { Vector as Vector$1 } from 'ol/layer';
-import { Vector } from 'ol/source';
-import { getArea, getLength } from 'ol/sphere';
-import { toFunction } from 'ol/style/Style';
+import { destroyResource } from '@open-pioneer/core';
 import { TOPMOST_LAYER_Z } from '@open-pioneer/map';
+import Feature from 'ol/Feature.js';
+import { unByKey } from 'ol/Observable.js';
+import Overlay from 'ol/Overlay.js';
+import { Polygon, LineString } from 'ol/geom.js';
+import Draw from 'ol/interaction/Draw.js';
+import { Vector as Vector$1 } from 'ol/layer.js';
+import { Vector } from 'ol/source.js';
+import { getArea, getLength } from 'ol/sphere.js';
+import { toFunction } from 'ol/style/Style.js';
 
 class MeasurementController {
   olMap;
@@ -25,33 +27,43 @@ class MeasurementController {
    */
   draw = void 0;
   /**
-   * Currently drawn feature.
+   * The active measurement manipulated by the `draw` interaction.
    */
-  sketch = void 0;
+  activeMeasurement;
   /**
-   * The help tooltip element.
+   * Map that is used to track all predefined measurements currently added to the source.
+   * It associates the measurement geometry (key) with the corresponding measurement instance.
+   *
+   * The measurement instances here must also be contained in `finishedMeasurements`.
    */
-  helpTooltip;
+  predefinedMeasurements = /* @__PURE__ */ new Map();
   /**
-   * The current measurement tooltip (if any).
+   * Measurement instances that were finished.
    */
-  measureTooltip;
+  finishedMeasurements = /* @__PURE__ */ new Set();
   /**
-   * Overlays/Tooltip containing the tooltip for finished drawings.
+   * The help tooltip element.
    */
-  overlayTooltips = [];
+  helpTooltip;
   /**
    * Keeps track of registered event handlers.
    */
   resources = [];
+  /**
+   * Called when a measurement is added to or removed from the source.
+   */
+  measurementChangedHandler;
   constructor(olMap, messages) {
     this.olMap = olMap;
     this.messages = messages;
     const source = this.source = new Vector();
     this.layer = new Vector$1({
-      source
+      source,
+      zIndex: TOPMOST_LAYER_Z,
+      properties: {
+        name: "measurement-layer"
+      }
     });
-    this.layer.setZIndex(TOPMOST_LAYER_Z);
     olMap.addLayer(this.layer);
     const pointerMoveKey = olMap.on("pointermove", this.handlePointerMove.bind(this));
     this.resources.push({
@@ -68,7 +80,7 @@ class MeasurementController {
         olMap.getViewport().removeEventListener("mouseout", mouseOutHandler);
       }
     });
-    this.helpTooltip = this.createHelpTooltip();
+    this.helpTooltip = createHelpTooltip(this.olMap);
   }
   destroy() {
     this.stopMeasurement();
@@ -76,15 +88,17 @@ class MeasurementController {
       resource.destroy();
     }
     this.resources = [];
-    this.helpTooltip.destroy();
-    this.measureTooltip?.destroy();
-    for (const tooltip of this.overlayTooltips) {
-      tooltip.destroy();
+    this.activeMeasurement = destroyResource(this.activeMeasurement);
+    for (const measurement of this.finishedMeasurements) {
+      measurement.destroy();
     }
-    this.overlayTooltips = [];
+    this.finishedMeasurements.clear();
+    this.helpTooltip.destroy();
     this.olMap.removeLayer(this.layer);
     this.layer.dispose();
     this.source.dispose();
+    this.measurementChangedHandler = void 0;
+    this.predefinedMeasurements.clear();
   }
   /** Returns the vector layer used for finished features. */
   getVectorLayer() {
@@ -94,6 +108,12 @@ class MeasurementController {
   setFinishedFeatureStyle(style) {
     this.layer.setStyle(style);
   }
+  setMeasurementSourceChangedHandler(handler) {
+    this.measurementChangedHandler = handler;
+  }
+  setPredefinedMeasurements(geometries) {
+    this.updatePredefinedMeasurements(geometries);
+  }
   /** Updates the style used for active measurements. */
   setActiveFeatureStyle(style) {
     const styleFunction = toFunction(style);
@@ -107,11 +127,16 @@ class MeasurementController {
   }
   /** Removes all finished measurements. */
   clearMeasurements() {
+    const currentFeatures = this.source.getFeatures();
     this.source.clear();
-    for (const tooltip of this.overlayTooltips) {
-      tooltip.destroy();
+    currentFeatures.forEach((feature) => {
+      this.raiseMeasurementsChangeEvent("remove-measurement", feature);
+    });
+    this.predefinedMeasurements.clear();
+    for (const measurement of this.finishedMeasurements) {
+      measurement.destroy();
     }
-    this.overlayTooltips = [];
+    this.finishedMeasurements.clear();
   }
   /** Starts measuring using the provided type. */
   startMeasurement(type) {
@@ -125,55 +150,40 @@ class MeasurementController {
       style: this.activeFeatureStyle
     });
     this.olMap.addInteraction(draw);
-    let measureTooltip;
+    let measurement;
     let changeListenerKey = void 0;
     draw.on("drawstart", (evt) => {
-      measureTooltip = this.measureTooltip = this.createMeasureTooltip();
-      const sketch = this.sketch = evt.feature;
+      const sketch = evt.feature;
       if (!sketch) {
         return;
       }
-      let tooltipCoord;
-      changeListenerKey = sketch.getGeometry()?.on("change", (evt2) => {
-        const geom = evt2.target;
-        const projection = this.olMap.getView().getProjection();
-        let output = "";
-        if (geom instanceof Polygon) {
-          output = formatArea(geom, projection, this.messages);
-          tooltipCoord = geom.getInteriorPoint().getCoordinates() || null;
-        } else if (geom instanceof LineString) {
-          output = formatLength(geom, projection, this.messages);
-          tooltipCoord = geom.getLastCoordinate() || null;
-        }
-        if (measureTooltip) {
-          measureTooltip.element.innerHTML = output;
-          if (tooltipCoord) {
-            measureTooltip?.overlay.setPosition(tooltipCoord);
-          }
-        }
+      measurement = this.activeMeasurement = new MeasurementInstance("active", sketch, this);
+      changeListenerKey = sketch.getGeometry()?.on("change", () => {
+        measurement?.updateTooltipContent();
+        measurement?.updateTooltipPosition();
       });
     });
     draw.on("drawend", () => {
-      if (measureTooltip) {
-        const classes = measureTooltip.element.classList;
-        classes.remove("measurement-active-tooltip");
-        classes.remove("printing-hide");
-        classes.add("measurement-finished-tooltip");
-        measureTooltip.overlay.setOffset([0, -7]);
-        this.overlayTooltips.push(measureTooltip);
-        this.measureTooltip = measureTooltip = void 0;
+      if (measurement && measurement === this.activeMeasurement) {
+        const newMeasurement = measurement;
+        newMeasurement.updateState("finished");
+        this.finishedMeasurements.add(newMeasurement);
+        this.raiseMeasurementsChangeEvent("add-measurement", newMeasurement.feature);
+        this.activeMeasurement = measurement = void 0;
       }
-      this.sketch = void 0;
+      measurement = void 0;
       if (changeListenerKey) {
         unByKey(changeListenerKey);
       }
     });
     draw.on("drawabort", () => {
-      if (measureTooltip) {
-        measureTooltip.destroy();
-        this.measureTooltip = measureTooltip = void 0;
+      if (measurement) {
+        measurement.destroy();
+        if (measurement === this.activeMeasurement) {
+          this.activeMeasurement = void 0;
+        }
+        measurement = void 0;
       }
-      this.sketch = void 0;
       if (changeListenerKey) {
         unByKey(changeListenerKey);
       }
@@ -187,62 +197,192 @@ class MeasurementController {
       this.draw.dispose();
       this.draw = void 0;
     }
-    this.sketch = void 0;
-    this.measureTooltip?.destroy();
-    this.measureTooltip = void 0;
-  }
-  createMeasureTooltip() {
-    const element = document.createElement("div");
-    element.className = "measurement-tooltip measurement-active-tooltip printing-hide";
-    const overlay = new Overlay({
-      element,
-      offset: [0, -15],
-      positioning: "bottom-center",
-      stopEvent: false,
-      insertFirst: false
-    });
-    const olMap = this.olMap;
-    olMap.addOverlay(overlay);
-    return {
-      overlay,
-      element,
-      destroy() {
-        olMap.removeOverlay(overlay);
-      }
-    };
-  }
-  createHelpTooltip() {
-    const element = document.createElement("div");
-    element.className = "measurement-tooltip printing-hide hidden";
-    const overlay = new Overlay({
-      element,
-      offset: [15, 0],
-      positioning: "center-left"
-    });
-    const olMap = this.olMap;
-    olMap.addOverlay(overlay);
-    return {
-      overlay,
-      element,
-      destroy() {
-        olMap.removeOverlay(overlay);
-      }
-    };
+    this.activeMeasurement = destroyResource(this.activeMeasurement);
   }
   handlePointerMove(evt) {
     if (evt.dragging) {
       return;
     }
     const tooltip = this.helpTooltip;
-    const helpMessage = getHelpMessage(this.messages, this.sketch);
-    tooltip.element.textContent = helpMessage;
+    const helpMessage = getHelpMessage(this.messages, this.activeMeasurement);
+    tooltip.setText(helpMessage);
     tooltip.overlay.setPosition(evt.coordinate);
     tooltip.element.classList.remove("hidden");
   }
+  updatePredefinedMeasurements(geometries) {
+    const addedMeasurements = geometries.filter(
+      (geom) => !this.predefinedMeasurements.has(geom)
+    );
+    const removedMeasurements = [];
+    for (const geom of this.predefinedMeasurements.keys()) {
+      if (!geometries.includes(geom)) {
+        removedMeasurements.push(geom);
+      }
+    }
+    addedMeasurements.forEach((geom) => {
+      const measurementFeature = new Feature(geom);
+      this.source.addFeature(measurementFeature);
+      const measurement = new MeasurementInstance("finished", measurementFeature, this);
+      this.finishedMeasurements.add(measurement);
+      this.predefinedMeasurements.set(geom, measurement);
+      this.raiseMeasurementsChangeEvent("add-measurement", measurementFeature);
+    });
+    removedMeasurements.forEach((geom) => {
+      const measurement = this.predefinedMeasurements.get(geom);
+      if (measurement) {
+        this.source.removeFeature(measurement.feature);
+        this.finishedMeasurements.delete(measurement);
+        measurement.destroy();
+        this.raiseMeasurementsChangeEvent("remove-measurement", measurement.feature);
+      }
+      this.predefinedMeasurements.delete(geom);
+    });
+  }
+  raiseMeasurementsChangeEvent(kind, measurementFeature) {
+    const measurementGeom = measurementFeature.getGeometry();
+    if (this.measurementChangedHandler && measurementGeom) {
+      this.measurementChangedHandler({
+        kind,
+        geometry: measurementGeom instanceof Polygon ? measurementGeom : measurementGeom
+      });
+    }
+  }
+}
+class MeasurementInstance {
+  controller;
+  feature;
+  _state;
+  tooltip;
+  constructor(state, feature, controller) {
+    this.controller = controller;
+    this._state = state;
+    this.feature = feature;
+    this.tooltip = createMeasureTooltip(this.olMap);
+    this.updateTooltipContent();
+    this.updateTooltipPosition();
+    this.tooltip.setActive(state === "active");
+  }
+  destroy() {
+    this.tooltip.destroy();
+  }
+  get state() {
+    return this._state;
+  }
+  updateState(state) {
+    if (this._state === state) {
+      return;
+    }
+    this._state = state;
+    this.tooltip.setActive(state === "active");
+  }
+  // Updates the tooltip content based on the current state and the feature's geometry.
+  updateTooltipContent() {
+    const geometry = this.feature.getGeometry();
+    if (!geometry) {
+      return;
+    }
+    const projection = this.olMap.getView().getProjection();
+    let outputHtml;
+    if (geometry instanceof Polygon) {
+      outputHtml = formatArea(geometry, projection, this.messages);
+    } else if (geometry instanceof LineString) {
+      outputHtml = formatLength(geometry, projection, this.messages);
+    }
+    if (outputHtml) {
+      this.tooltip.setHtml(outputHtml);
+    }
+  }
+  // Updates the tooltip's position.
+  updateTooltipPosition() {
+    const geometry = this.feature.getGeometry();
+    if (!geometry) {
+      return;
+    }
+    let tooltipCoord;
+    if (geometry instanceof Polygon) {
+      tooltipCoord = geometry.getInteriorPoint().getCoordinates() || null;
+    } else if (geometry instanceof LineString) {
+      tooltipCoord = geometry.getLastCoordinate() || null;
+    } else {
+      return;
+    }
+    this.tooltip.overlay.setPosition(tooltipCoord);
+  }
+  get olMap() {
+    return this.controller.olMap;
+  }
+  get messages() {
+    return this.controller.messages;
+  }
+}
+const DEFAULT_MEASUREMENT_OFFSET = [0, -15];
+const FINISHED_MEASUREMENT_OFFSET = [0, -7];
+function createHelpTooltip(olMap) {
+  const element = document.createElement("div");
+  element.className = "measurement-tooltip printing-hide hidden";
+  element.role = "tooltip";
+  const content = document.createElement("span");
+  element.appendChild(content);
+  const overlay = new Overlay({
+    element,
+    offset: [15, 0],
+    positioning: "center-left"
+  });
+  olMap.addOverlay(overlay);
+  return {
+    overlay,
+    element,
+    destroy() {
+      olMap.removeOverlay(overlay);
+    },
+    setText(value) {
+      content.textContent = value;
+    },
+    setHtml(value) {
+      content.innerHTML = value;
+    }
+  };
+}
+function createMeasureTooltip(olMap) {
+  const element = document.createElement("div");
+  element.role = "tooltip";
+  element.className = "measurement-tooltip measurement-active-tooltip printing-hide";
+  const content = document.createElement("span");
+  element.appendChild(content);
+  const overlay = new Overlay({
+    element,
+    offset: DEFAULT_MEASUREMENT_OFFSET,
+    positioning: "bottom-center",
+    stopEvent: false,
+    insertFirst: false
+  });
+  olMap.addOverlay(overlay);
+  return {
+    overlay,
+    element,
+    destroy() {
+      olMap.removeOverlay(overlay);
+    },
+    setActive(active) {
+      if (active) {
+        element.className = "measurement-tooltip measurement-active-tooltip printing-hide";
+        overlay.setOffset(DEFAULT_MEASUREMENT_OFFSET);
+      } else {
+        element.className = "measurement-tooltip measurement-finished-tooltip";
+        overlay.setOffset(FINISHED_MEASUREMENT_OFFSET);
+      }
+    },
+    setText(value) {
+      content.textContent = value;
+    },
+    setHtml(value) {
+      content.innerHTML = value;
+    }
+  };
 }
-function getHelpMessage(messages, sketch) {
-  if (sketch) {
-    const geom = sketch.getGeometry();
+function getHelpMessage(messages, activeMeasurement) {
+  if (activeMeasurement) {
+    const geom = activeMeasurement.feature.getGeometry();
     if (geom instanceof Polygon || geom instanceof LineString) {
       return messages.getContinueMessage();
     }

package/MeasurementController.js.map

@@ -1 +1 @@
-{"version":3,"file":"MeasurementController.js","sources":["MeasurementController.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Resource } from \"@open-pioneer/core\";\nimport Feature from \"ol/Feature\";\nimport OlMap from \"ol/Map\";\nimport MapBrowserEvent from \"ol/MapBrowserEvent\";\nimport { unByKey } from \"ol/Observable\";\nimport Overlay from \"ol/Overlay\";\nimport { Coordinate } from \"ol/coordinate\";\nimport { EventsKey } from \"ol/events\";\nimport { LineString, Polygon } from \"ol/geom\";\nimport Draw from \"ol/interaction/Draw\";\nimport { Vector as VectorLayer } from \"ol/layer\";\nimport { Vector as VectorSource } from \"ol/source\";\nimport { getArea, getLength } from \"ol/sphere\";\nimport { Projection } from \"ol/proj\";\nimport { StyleFunction, StyleLike, toFunction as toStyleFunction } from \"ol/style/Style\";\nimport { TOPMOST_LAYER_Z } from \"@open-pioneer/map\";\n\nexport type MeasurementType = \"area\" | \"distance\";\n\nexport interface Messages {\n    getContinueMessage(): string;\n    getHelpMessage(): string;\n    formatNumber(value: number): string;\n}\n\nexport class MeasurementController {\n    private olMap: OlMap;\n    private messages: Messages;\n    private activeFeatureStyle: StyleFunction | undefined;\n\n    /**\n     * The layer rendering the measurement \"features\".\n     */\n    private layer: VectorLayer<VectorSource>;\n\n    /**\n     * Source of {@link layer}.\n     */\n    private source: VectorSource;\n\n    /**\n     * Stores the current `Draw` interaction.\n     */\n    private draw: Draw | undefined = undefined;\n\n    /**\n     * Currently drawn feature.\n     */\n    private sketch: Feature | undefined = undefined;\n\n    /**\n     * The help tooltip element.\n     */\n    private helpTooltip: Tooltip;\n\n    /**\n     * The current measurement tooltip (if any).\n     */\n    private measureTooltip: Tooltip | undefined;\n\n    /**\n     * Overlays/Tooltip containing the tooltip for finished drawings.\n     */\n    private overlayTooltips: Tooltip[] = [];\n\n    /**\n     * Keeps track of registered event handlers.\n     */\n    private resources: Resource[] = [];\n\n    constructor(olMap: OlMap, messages: Messages) {\n        this.olMap = olMap;\n        this.messages = messages;\n        const source = (this.source = new VectorSource());\n        this.layer = new VectorLayer({\n            source\n        });\n        this.layer.setZIndex(TOPMOST_LAYER_Z);\n        olMap.addLayer(this.layer);\n\n        const pointerMoveKey = olMap.on(\"pointermove\", this.handlePointerMove.bind(this));\n        this.resources.push({\n            destroy() {\n                unByKey(pointerMoveKey);\n            }\n        });\n\n        const mouseOutHandler = () => {\n            this.helpTooltip.element.classList.add(\"hidden\");\n        };\n        olMap.getViewport().addEventListener(\"mouseout\", mouseOutHandler);\n        this.resources.push({\n            destroy() {\n                olMap.getViewport().removeEventListener(\"mouseout\", mouseOutHandler);\n            }\n        });\n\n        this.helpTooltip = this.createHelpTooltip();\n    }\n\n    destroy() {\n        this.stopMeasurement();\n\n        // Cleanup registered event handlers etc.\n        for (const resource of this.resources) {\n            resource.destroy();\n        }\n        this.resources = [];\n\n        // Cleanup tooltips\n        this.helpTooltip.destroy();\n        this.measureTooltip?.destroy();\n        for (const tooltip of this.overlayTooltips) {\n            tooltip.destroy();\n        }\n        this.overlayTooltips = [];\n\n        // Cleanup layer\n        this.olMap.removeLayer(this.layer);\n        this.layer.dispose();\n        this.source.dispose();\n    }\n\n    /** Returns the vector layer used for finished features. */\n    getVectorLayer() {\n        return this.layer;\n    }\n\n    /** Updates the style used for finished features. */\n    setFinishedFeatureStyle(style: StyleLike) {\n        this.layer.setStyle(style);\n    }\n\n    /** Updates the style used for active measurements. */\n    setActiveFeatureStyle(style: StyleLike) {\n        const styleFunction = toStyleFunction(style);\n        this.activeFeatureStyle = (feature, ...args) => {\n            const ft = feature?.getGeometry()?.getType();\n            if (ft === \"Polygon\" || ft === \"LineString\" || ft === \"Point\") {\n                return styleFunction(feature, ...args);\n            }\n        };\n        // Update style on current draw instance (if any)\n        this.draw?.getOverlay().setStyle(this.activeFeatureStyle);\n    }\n\n    /** Removes all finished measurements. */\n    clearMeasurements() {\n        this.source.clear();\n        for (const tooltip of this.overlayTooltips) {\n            tooltip.destroy();\n        }\n        this.overlayTooltips = [];\n    }\n\n    /** Starts measuring using the provided type. */\n    startMeasurement(type: MeasurementType) {\n        if (this.draw) {\n            throw new Error(\"Internal error: another measurement interaction is still active.\");\n        }\n\n        const geometryType = type === \"area\" ? \"Polygon\" : \"LineString\";\n        const draw = (this.draw = new Draw({\n            source: this.source,\n            type: geometryType,\n            style: this.activeFeatureStyle\n        }));\n        this.olMap.addInteraction(draw);\n\n        let measureTooltip: Tooltip | undefined;\n        let changeListenerKey: EventsKey | undefined = undefined;\n        draw.on(\"drawstart\", (evt) => {\n            measureTooltip = this.measureTooltip = this.createMeasureTooltip();\n\n            // set sketch\n            const sketch = (this.sketch = evt.feature);\n            if (!sketch) {\n                return;\n            }\n\n            let tooltipCoord: Coordinate | undefined;\n            changeListenerKey = sketch.getGeometry()?.on(\"change\", (evt) => {\n                const geom = evt.target;\n                const projection = this.olMap.getView().getProjection();\n\n                let output = \"\";\n                if (geom instanceof Polygon) {\n                    output = formatArea(geom, projection, this.messages);\n                    tooltipCoord = geom.getInteriorPoint().getCoordinates() || null;\n                } else if (geom instanceof LineString) {\n                    output = formatLength(geom, projection, this.messages);\n                    tooltipCoord = geom.getLastCoordinate() || null;\n                }\n\n                if (measureTooltip) {\n                    measureTooltip.element.innerHTML = output;\n                    if (tooltipCoord) {\n                        measureTooltip?.overlay.setPosition(tooltipCoord);\n                    }\n                }\n            });\n        });\n\n        draw.on(\"drawend\", () => {\n            if (measureTooltip) {\n                // Make the tooltip (which was previously following the mouse)\n                // static instead, next to the feature (last known overlay coordinate).\n                const classes = measureTooltip.element.classList;\n                classes.remove(\"measurement-active-tooltip\");\n                classes.remove(\"printing-hide\");\n                classes.add(\"measurement-finished-tooltip\");\n                measureTooltip.overlay.setOffset([0, -7]);\n\n                this.overlayTooltips.push(measureTooltip);\n                this.measureTooltip = measureTooltip = undefined;\n            }\n\n            // unset sketch\n            this.sketch = undefined;\n            if (changeListenerKey) {\n                unByKey(changeListenerKey);\n            }\n        });\n\n        draw.on(\"drawabort\", () => {\n            if (measureTooltip) {\n                measureTooltip.destroy();\n                this.measureTooltip = measureTooltip = undefined;\n            }\n\n            this.sketch = undefined;\n            if (changeListenerKey) {\n                unByKey(changeListenerKey);\n            }\n        });\n    }\n\n    /** Stops the current measuring started by `startMeasurement`. */\n    stopMeasurement() {\n        if (this.draw) {\n            this.olMap.removeInteraction(this.draw);\n            this.draw.abortDrawing();\n            this.draw.dispose();\n            this.draw = undefined;\n        }\n\n        this.sketch = undefined;\n        this.measureTooltip?.destroy();\n        this.measureTooltip = undefined;\n    }\n\n    private createMeasureTooltip(): Tooltip {\n        const element = document.createElement(\"div\");\n        element.className = \"measurement-tooltip measurement-active-tooltip printing-hide\";\n\n        const overlay = new Overlay({\n            element: element,\n            offset: [0, -15],\n            positioning: \"bottom-center\",\n            stopEvent: false,\n            insertFirst: false\n        });\n\n        const olMap = this.olMap;\n        olMap.addOverlay(overlay);\n        return {\n            overlay,\n            element,\n            destroy() {\n                olMap.removeOverlay(overlay);\n            }\n        };\n    }\n\n    private createHelpTooltip(): Tooltip {\n        const element = document.createElement(\"div\");\n        element.className = \"measurement-tooltip printing-hide hidden\";\n\n        const overlay = new Overlay({\n            element: element,\n            offset: [15, 0],\n            positioning: \"center-left\"\n        });\n\n        const olMap = this.olMap;\n        olMap.addOverlay(overlay);\n        return {\n            overlay,\n            element,\n            destroy() {\n                olMap.removeOverlay(overlay);\n            }\n        };\n    }\n\n    private handlePointerMove(evt: MapBrowserEvent<UIEvent>) {\n        if (evt.dragging) {\n            return;\n        }\n\n        const tooltip = this.helpTooltip;\n        const helpMessage = getHelpMessage(this.messages, this.sketch);\n        tooltip.element.textContent = helpMessage;\n        tooltip.overlay.setPosition(evt.coordinate);\n        tooltip.element.classList.remove(\"hidden\");\n    }\n}\n\n/** Represents a tooltip rendered on the OpenLayers map. */\ninterface Tooltip extends Resource {\n    overlay: Overlay;\n    element: HTMLDivElement;\n}\n\nfunction getHelpMessage(messages: Messages, sketch: Feature | undefined) {\n    if (sketch) {\n        const geom = sketch.getGeometry();\n        if (geom instanceof Polygon || geom instanceof LineString) {\n            return messages.getContinueMessage();\n        }\n    }\n    return messages.getHelpMessage();\n}\n\nfunction formatArea(polygon: Polygon, projection: Projection, messages: Messages) {\n    const area = getArea(polygon, { projection });\n    let output;\n    if (area >= 1000000) {\n        output = `${messages.formatNumber(area / 1000000)} km<sup>2</sup>`;\n    } else {\n        output = `${messages.formatNumber(area)} m<sup>2</sup>`;\n    }\n    return output;\n}\n\nfunction formatLength(line: LineString, projection: Projection, messages: Messages) {\n    const length = getLength(line, { projection });\n    let output;\n    if (length >= 1000) {\n        output = `${messages.formatNumber(length / 1000)} km`;\n    } else {\n        output = `${messages.formatNumber(length)} m`;\n    }\n    return output;\n}\n"],"names":["VectorSource","VectorLayer","toStyleFunction","evt"],"mappings":"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"}
+{"version":3,"file":"MeasurementController.js","sources":["MeasurementController.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { destroyResource, Resource } from \"@open-pioneer/core\";\nimport { TOPMOST_LAYER_Z } from \"@open-pioneer/map\";\nimport Feature from \"ol/Feature\";\nimport OlMap from \"ol/Map\";\nimport MapBrowserEvent from \"ol/MapBrowserEvent\";\nimport { unByKey } from \"ol/Observable\";\nimport Overlay from \"ol/Overlay\";\nimport { Coordinate } from \"ol/coordinate\";\nimport { EventsKey } from \"ol/events\";\nimport { LineString, Polygon } from \"ol/geom\";\nimport Draw from \"ol/interaction/Draw\";\nimport { Vector as VectorLayer } from \"ol/layer\";\nimport { Projection } from \"ol/proj\";\nimport { Vector as VectorSource } from \"ol/source\";\nimport { getArea, getLength } from \"ol/sphere\";\nimport { StyleFunction, StyleLike, toFunction as toStyleFunction } from \"ol/style/Style\";\nimport type { MeasurementsChangeEvent, MeasurementGeometry, MeasurementProps } from \"./Measurement\";\n\ntype MeasurementsChangeHandler = NonNullable<MeasurementProps[\"onMeasurementsChange\"]>;\n\nexport type MeasurementType = \"area\" | \"distance\";\n\nexport interface Messages {\n    getContinueMessage(): string;\n    getHelpMessage(): string;\n    formatNumber(value: number): string;\n}\n\nexport class MeasurementController {\n    readonly olMap: OlMap;\n    readonly messages: Messages;\n\n    private activeFeatureStyle: StyleFunction | undefined;\n    /**\n     * The layer rendering the measurement \"features\".\n     */\n    private layer: VectorLayer<Feature>;\n\n    /**\n     * Source of {@link layer}.\n     */\n    private source: VectorSource;\n\n    /**\n     * Stores the current `Draw` interaction.\n     */\n    private draw: Draw | undefined = undefined;\n\n    /**\n     * The active measurement manipulated by the `draw` interaction.\n     */\n    private activeMeasurement: MeasurementInstance | undefined;\n\n    /**\n     * Map that is used to track all predefined measurements currently added to the source.\n     * It associates the measurement geometry (key) with the corresponding measurement instance.\n     *\n     * The measurement instances here must also be contained in `finishedMeasurements`.\n     */\n    private predefinedMeasurements = new Map<MeasurementGeometry, MeasurementInstance>();\n\n    /**\n     * Measurement instances that were finished.\n     */\n    private finishedMeasurements = new Set<MeasurementInstance>();\n\n    /**\n     * The help tooltip element.\n     */\n    private helpTooltip: Tooltip;\n\n    /**\n     * Keeps track of registered event handlers.\n     */\n    private resources: Resource[] = [];\n\n    /**\n     * Called when a measurement is added to or removed from the source.\n     */\n    private measurementChangedHandler: MeasurementsChangeHandler | undefined;\n\n    constructor(olMap: OlMap, messages: Messages) {\n        this.olMap = olMap;\n        this.messages = messages;\n        const source = (this.source = new VectorSource());\n        this.layer = new VectorLayer({\n            source: source,\n            zIndex: TOPMOST_LAYER_Z,\n            properties: {\n                name: \"measurement-layer\"\n            }\n        });\n        olMap.addLayer(this.layer);\n\n        const pointerMoveKey = olMap.on(\"pointermove\", this.handlePointerMove.bind(this));\n        this.resources.push({\n            destroy() {\n                unByKey(pointerMoveKey);\n            }\n        });\n\n        const mouseOutHandler = () => {\n            this.helpTooltip.element.classList.add(\"hidden\");\n        };\n        olMap.getViewport().addEventListener(\"mouseout\", mouseOutHandler);\n        this.resources.push({\n            destroy() {\n                olMap.getViewport().removeEventListener(\"mouseout\", mouseOutHandler);\n            }\n        });\n\n        this.helpTooltip = createHelpTooltip(this.olMap);\n    }\n\n    destroy() {\n        this.stopMeasurement();\n\n        // Cleanup registered event handlers etc.\n        for (const resource of this.resources) {\n            resource.destroy();\n        }\n        this.resources = [];\n\n        // Cleanup measurements and tooltips.\n        this.activeMeasurement = destroyResource(this.activeMeasurement);\n        for (const measurement of this.finishedMeasurements) {\n            measurement.destroy();\n        }\n        this.finishedMeasurements.clear();\n        this.helpTooltip.destroy();\n\n        // Cleanup layer\n        this.olMap.removeLayer(this.layer);\n        this.layer.dispose();\n        this.source.dispose();\n\n        this.measurementChangedHandler = undefined;\n        this.predefinedMeasurements.clear();\n    }\n\n    /** Returns the vector layer used for finished features. */\n    getVectorLayer() {\n        return this.layer;\n    }\n\n    /** Updates the style used for finished features. */\n    setFinishedFeatureStyle(style: StyleLike) {\n        this.layer.setStyle(style);\n    }\n\n    setMeasurementSourceChangedHandler(handler: MeasurementsChangeHandler | undefined) {\n        this.measurementChangedHandler = handler;\n    }\n\n    setPredefinedMeasurements(geometries: MeasurementGeometry[]) {\n        this.updatePredefinedMeasurements(geometries);\n    }\n\n    /** Updates the style used for active measurements. */\n    setActiveFeatureStyle(style: StyleLike) {\n        const styleFunction = toStyleFunction(style);\n        this.activeFeatureStyle = (feature, ...args) => {\n            const ft = feature?.getGeometry()?.getType();\n            if (ft === \"Polygon\" || ft === \"LineString\" || ft === \"Point\") {\n                return styleFunction(feature, ...args);\n            }\n        };\n        // Update style on current draw instance (if any)\n        this.draw?.getOverlay().setStyle(this.activeFeatureStyle);\n    }\n\n    /** Removes all finished measurements. */\n    clearMeasurements() {\n        const currentFeatures = this.source.getFeatures(); //returns snapshot copy of the features on the source\n        this.source.clear();\n        currentFeatures.forEach((feature) => {\n            //raise remove-measurement event for each measurement after the source was cleared\n            this.raiseMeasurementsChangeEvent(\"remove-measurement\", feature);\n        });\n        this.predefinedMeasurements.clear();\n        for (const measurement of this.finishedMeasurements) {\n            measurement.destroy();\n        }\n        this.finishedMeasurements.clear();\n    }\n\n    /** Starts measuring using the provided type. */\n    startMeasurement(type: MeasurementType) {\n        if (this.draw) {\n            throw new Error(\"Internal error: another measurement interaction is still active.\");\n        }\n\n        const geometryType = type === \"area\" ? \"Polygon\" : \"LineString\";\n        const draw = (this.draw = new Draw({\n            source: this.source,\n            type: geometryType,\n            style: this.activeFeatureStyle\n        }));\n        this.olMap.addInteraction(draw);\n\n        let measurement: MeasurementInstance | undefined;\n        let changeListenerKey: EventsKey | undefined = undefined;\n        draw.on(\"drawstart\", (evt) => {\n            // set sketch\n            const sketch = evt.feature;\n            if (!sketch) {\n                return;\n            }\n\n            measurement = this.activeMeasurement = new MeasurementInstance(\"active\", sketch, this);\n            changeListenerKey = sketch.getGeometry()?.on(\"change\", () => {\n                measurement?.updateTooltipContent();\n                measurement?.updateTooltipPosition();\n            });\n        });\n\n        draw.on(\"drawend\", () => {\n            if (measurement && measurement === this.activeMeasurement) {\n                const newMeasurement = measurement;\n                newMeasurement.updateState(\"finished\");\n                this.finishedMeasurements.add(newMeasurement);\n                this.raiseMeasurementsChangeEvent(\"add-measurement\", newMeasurement.feature);\n                this.activeMeasurement = measurement = undefined;\n            }\n\n            measurement = undefined;\n            if (changeListenerKey) {\n                unByKey(changeListenerKey);\n            }\n        });\n\n        draw.on(\"drawabort\", () => {\n            if (measurement) {\n                measurement.destroy();\n                if (measurement === this.activeMeasurement) {\n                    this.activeMeasurement = undefined;\n                }\n                measurement = undefined;\n            }\n            if (changeListenerKey) {\n                unByKey(changeListenerKey);\n            }\n        });\n    }\n\n    /** Stops the current measuring started by `startMeasurement`. */\n    stopMeasurement() {\n        if (this.draw) {\n            this.olMap.removeInteraction(this.draw);\n            this.draw.abortDrawing();\n            this.draw.dispose();\n            this.draw = undefined;\n        }\n\n        this.activeMeasurement = destroyResource(this.activeMeasurement);\n    }\n\n    private handlePointerMove(evt: MapBrowserEvent<UIEvent>) {\n        if (evt.dragging) {\n            return;\n        }\n\n        const tooltip = this.helpTooltip;\n        const helpMessage = getHelpMessage(this.messages, this.activeMeasurement);\n        tooltip.setText(helpMessage);\n        tooltip.overlay.setPosition(evt.coordinate);\n        tooltip.element.classList.remove(\"hidden\");\n    }\n\n    private updatePredefinedMeasurements(geometries: MeasurementGeometry[]) {\n        const addedMeasurements = geometries.filter(\n            (geom) => !this.predefinedMeasurements.has(geom)\n        );\n        const removedMeasurements: MeasurementGeometry[] = [];\n        for (const geom of this.predefinedMeasurements.keys()) {\n            if (!geometries.includes(geom)) {\n                removedMeasurements.push(geom);\n            }\n        }\n\n        addedMeasurements.forEach((geom) => {\n            const measurementFeature = new Feature(geom);\n            this.source.addFeature(measurementFeature);\n\n            const measurement = new MeasurementInstance(\"finished\", measurementFeature, this);\n            this.finishedMeasurements.add(measurement);\n            this.predefinedMeasurements.set(geom, measurement);\n            this.raiseMeasurementsChangeEvent(\"add-measurement\", measurementFeature);\n        });\n\n        removedMeasurements.forEach((geom) => {\n            const measurement = this.predefinedMeasurements.get(geom);\n            if (measurement) {\n                //remove measurement feature from source and destroy associated tooltip\n                this.source.removeFeature(measurement.feature);\n                this.finishedMeasurements.delete(measurement);\n                measurement.destroy();\n                this.raiseMeasurementsChangeEvent(\"remove-measurement\", measurement.feature);\n            }\n            this.predefinedMeasurements.delete(geom);\n        });\n    }\n\n    private raiseMeasurementsChangeEvent(\n        kind: MeasurementsChangeEvent[\"kind\"],\n        measurementFeature: Feature\n    ) {\n        const measurementGeom = measurementFeature.getGeometry();\n        if (this.measurementChangedHandler && measurementGeom) {\n            this.measurementChangedHandler({\n                kind: kind,\n                geometry:\n                    measurementGeom instanceof Polygon\n                        ? (measurementGeom as Polygon)\n                        : (measurementGeom as LineString)\n            });\n        }\n    }\n}\n\n// Encapsulates the display state of a measurement.\n//\n// More ideas for further improvements:\n// - Resolve duplicate source of truths (feature source and map of measurements).\n// - Add and remove the feature here as well (instead of in the controller).\n// - Perhaps use reactivity API and watch for state consistency.\n//   The current implementations relies on the update*() functions being called at the correct time.\nclass MeasurementInstance {\n    readonly controller: MeasurementController;\n    readonly feature: Feature;\n\n    private _state: \"active\" | \"finished\";\n    private readonly tooltip: ReturnType<typeof createMeasureTooltip>;\n\n    constructor(state: \"active\" | \"finished\", feature: Feature, controller: MeasurementController) {\n        this.controller = controller;\n        this._state = state;\n        this.feature = feature;\n        this.tooltip = createMeasureTooltip(this.olMap);\n        this.updateTooltipContent();\n        this.updateTooltipPosition();\n        this.tooltip.setActive(state === \"active\");\n    }\n\n    destroy() {\n        this.tooltip.destroy();\n    }\n\n    get state(): \"active\" | \"finished\" {\n        return this._state;\n    }\n\n    updateState(state: \"active\" | \"finished\") {\n        if (this._state === state) {\n            return;\n        }\n\n        this._state = state;\n        this.tooltip.setActive(state === \"active\");\n    }\n\n    // Updates the tooltip content based on the current state and the feature's geometry.\n    updateTooltipContent() {\n        const geometry = this.feature.getGeometry();\n        if (!geometry) {\n            return;\n        }\n\n        const projection = this.olMap.getView().getProjection();\n        let outputHtml;\n        if (geometry instanceof Polygon) {\n            outputHtml = formatArea(geometry, projection, this.messages);\n        } else if (geometry instanceof LineString) {\n            outputHtml = formatLength(geometry, projection, this.messages);\n        }\n        if (outputHtml) {\n            this.tooltip.setHtml(outputHtml);\n        }\n    }\n\n    // Updates the tooltip's position.\n    updateTooltipPosition() {\n        const geometry = this.feature.getGeometry();\n        if (!geometry) {\n            return;\n        }\n\n        let tooltipCoord: Coordinate;\n        if (geometry instanceof Polygon) {\n            tooltipCoord = geometry.getInteriorPoint().getCoordinates() || null;\n        } else if (geometry instanceof LineString) {\n            tooltipCoord = geometry.getLastCoordinate() || null;\n        } else {\n            return;\n        }\n        this.tooltip.overlay.setPosition(tooltipCoord);\n    }\n\n    private get olMap(): OlMap {\n        return this.controller.olMap;\n    }\n\n    private get messages(): Messages {\n        return this.controller.messages;\n    }\n}\n\nconst DEFAULT_MEASUREMENT_OFFSET = [0, -15];\nconst FINISHED_MEASUREMENT_OFFSET = [0, -7];\n\n/** Represents a tooltip rendered on the OpenLayers map. */\ninterface Tooltip extends Resource {\n    overlay: Overlay;\n    element: HTMLDivElement;\n\n    setText(value: string): void;\n    setHtml(value: string): void;\n}\n\nfunction createHelpTooltip(olMap: OlMap): Tooltip {\n    const element = document.createElement(\"div\");\n    element.className = \"measurement-tooltip printing-hide hidden\";\n    element.role = \"tooltip\";\n\n    const content = document.createElement(\"span\");\n    element.appendChild(content);\n\n    const overlay = new Overlay({\n        element: element,\n        offset: [15, 0],\n        positioning: \"center-left\"\n    });\n\n    olMap.addOverlay(overlay);\n    return {\n        overlay,\n        element,\n        destroy() {\n            olMap.removeOverlay(overlay);\n        },\n        setText(value) {\n            content.textContent = value;\n        },\n        setHtml(value) {\n            content.innerHTML = value;\n        }\n    };\n}\n\nfunction createMeasureTooltip(olMap: OlMap): Tooltip & { setActive(active: boolean): void } {\n    const element = document.createElement(\"div\");\n    element.role = \"tooltip\";\n    element.className = \"measurement-tooltip measurement-active-tooltip printing-hide\";\n\n    const content = document.createElement(\"span\");\n    element.appendChild(content);\n\n    const overlay = new Overlay({\n        element: element,\n        offset: DEFAULT_MEASUREMENT_OFFSET,\n        positioning: \"bottom-center\",\n        stopEvent: false,\n        insertFirst: false\n    });\n\n    olMap.addOverlay(overlay);\n    return {\n        overlay,\n        element,\n        destroy() {\n            olMap.removeOverlay(overlay);\n        },\n        setActive(active) {\n            if (active) {\n                element.className = \"measurement-tooltip measurement-active-tooltip printing-hide\";\n                overlay.setOffset(DEFAULT_MEASUREMENT_OFFSET);\n            } else {\n                element.className = \"measurement-tooltip measurement-finished-tooltip\";\n                overlay.setOffset(FINISHED_MEASUREMENT_OFFSET);\n            }\n        },\n        setText(value) {\n            content.textContent = value;\n        },\n        setHtml(value) {\n            content.innerHTML = value;\n        }\n    };\n}\n\nfunction getHelpMessage(messages: Messages, activeMeasurement: MeasurementInstance | undefined) {\n    if (activeMeasurement) {\n        const geom = activeMeasurement.feature.getGeometry();\n        if (geom instanceof Polygon || geom instanceof LineString) {\n            return messages.getContinueMessage();\n        }\n    }\n    return messages.getHelpMessage();\n}\n\nfunction formatArea(polygon: Polygon, projection: Projection, messages: Messages) {\n    const area = getArea(polygon, { projection });\n    let output;\n    if (area >= 1000000) {\n        output = `${messages.formatNumber(area / 1000000)} km<sup>2</sup>`;\n    } else {\n        output = `${messages.formatNumber(area)} m<sup>2</sup>`;\n    }\n    return output;\n}\n\nfunction formatLength(line: LineString, projection: Projection, messages: Messages) {\n    const length = getLength(line, { projection });\n    let output;\n    if (length >= 1000) {\n        output = `${messages.formatNumber(length / 1000)} km`;\n    } else {\n        output = `${messages.formatNumber(length)} m`;\n    }\n    return output;\n}\n"],"names":["VectorSource","VectorLayer","toStyleFunction"],"mappings":"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"}

package/README.md

@@ -60,6 +60,44 @@ function AppUI() {
 }
 ```
 
+### Adding predefined measurements
+
+The optional property `predefinedMeasurements` can be used to add predefined measurement geometries (line strings and polygons).
+The predefined measurements will have the same style and tooltip as measurements created by a user.
+
+Note that predefined measurements are re-applied when the array changes.
+To prevent accidental updates, wrap the array in a `useMemo` hook or store it somewhere outside the render function.
+
+```tsx
+import LineString from "ol/geom/LineString";
+import { MeasurementGeometry } from "@open-pioneer/measurement/MeasurementController";
+
+const measurements = useMemo(
+    () => [
+        new LineString([
+            [398657.97, 5755696.26],
+            [402570.98, 5757547.78]
+        ])
+    ],
+    []
+);
+
+<Measurement predefinedMeasurements={measurements} />;
+```
+
+### Listen for changes
+
+The optional property `onMeasurementsChange` can be used to register an event handler function.
+This function is called whenever the set of measurements changes (i.e. add or remove actions).
+
+Changes include both user actions or updates triggered by `predefinedMeasurements`.
+Unmounting the component will not trigger a change event.
+
+```tsx
+// outputs either add-measurement or remove-measurement and the measurement geometry
+<Measurement onMeasurementsChange={(e) => console.log(e.kind, e.geometry)} />
+```
+
 ## License
 
 Apache-2.0 (see `LICENSE` file)

package/index.d.ts

@@ -1 +1 @@
-export { Measurement, type MeasurementProps } from "./Measurement";
+export { Measurement, type MeasurementProps, type MeasurementsAddEvent, type MeasurementsRemoveEvent, type MeasurementsChangeEvent, type MeasurementGeometry } from "./Measurement";

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/measurement",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "This package provides a UI component that allows the user to perform area and distance measurements on the map.",
   "keywords": [
     "open-pioneer-trails"
@@ -14,13 +14,14 @@
     "directory": "src/packages/measurement"
   },
   "peerDependencies": {
-    "@open-pioneer/chakra-integration": "^1.1.3",
-    "@open-pioneer/runtime": "^2.1.5",
-    "ol": "^9.0.0",
-    "react": "^18.3.1",
+    "@open-pioneer/chakra-integration": "^1.1.4",
+    "@open-pioneer/core": "^1.3.0",
+    "@open-pioneer/react-utils": "^1.0.1",
+    "@open-pioneer/runtime": "^2.1.7",
     "classnames": "^2.3.2",
-    "@open-pioneer/map": "^0.5.1",
-    "@open-pioneer/react-utils": "^0.2.3"
+    "ol": "^9.2.4",
+    "react": "^18.3.1",
+    "@open-pioneer/map": "^0.6.1"
   },
   "exports": {
     "./package.json": "./package.json",