@open-pioneer/measurement 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# @open-pioneer/measurement
+
+## 0.1.0
+
+### Minor Changes
+
+-   cd43c02: Initial release
+-   3c0d1b1: Initial release.
+
+### Patch Changes
+
+-   Updated dependencies [bb2f27a]
+-   Updated dependencies [182da1c]
+    -   @open-pioneer/map@0.1.0
+    -   @open-pioneer/react-utils@0.1.0

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/Measurement.d.ts

@@ -0,0 +1,24 @@
+import { CommonComponentProps } from "@open-pioneer/react-utils";
+import { StyleLike } from "ol/style/Style";
+import { FC } from "react";
+/**
+ * This is for special properties of the Measurement.
+ */
+export interface MeasurementProps extends CommonComponentProps {
+    /**
+     * The id of the map.
+     */
+    mapId: string;
+    /**
+     * The style for the active drawing feature's geometry.
+     */
+    activeFeatureStyle?: StyleLike;
+    /**
+     * The style for the finished drawn feature's geometry.
+     */
+    finishedFeatureStyle?: StyleLike;
+}
+/**
+ * The `Measurement` component can be used in an app to switch between distance and area measurements and to delete all current measurements.
+ */
+export declare const Measurement: FC<MeasurementProps>;

package/Measurement.js

@@ -0,0 +1,153 @@
+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 { 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 { 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]);
+  useEffect(() => {
+    if (!controller) {
+      return;
+    }
+    controller.startMeasurement(selectedMeasurement);
+    return () => {
+      controller.stopMeasurement();
+    };
+  }, [controller, selectedMeasurement]);
+  function changeMeasurement(measurementType) {
+    if (measurementType === "distance" || measurementType === "area") {
+      setMeasurement(measurementType);
+    } else {
+      throw new Error(`Unexpected measurement type: '${measurementType}'.`);
+    }
+  }
+  function removeMeasurements() {
+    controller?.clearMeasurements();
+  }
+  return /* @__PURE__ */ jsxs(Box, { ...containerProps, children: [
+    /* @__PURE__ */ jsx(Text, { width: "340px", mb: 3, children: intl.formatMessage({ id: "measurementInfoText" }) }),
+    /* @__PURE__ */ jsx(FormControl, { mb: 4, alignItems: "center", children: /* @__PURE__ */ jsxs(HStack, { mb: 2, children: [
+      /* @__PURE__ */ jsx(FormLabel, { mb: 1, children: label("measurementLabel") }),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: selectedMeasurement,
+          onChange: (e) => changeMeasurement(e.target.value),
+          className: "measurement-select",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "distance", children: label("distance") }),
+            /* @__PURE__ */ jsx("option", { value: "area", children: label("area") })
+          ]
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        padding: 2,
+        className: "measurement-delete-button",
+        onClick: removeMeasurements,
+        width: "100%",
+        children: label("deleteMeasurementLabel")
+      }
+    )
+  ] });
+};
+function useController(map, intl) {
+  const [controller, setController] = useState(void 0);
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+    const controller2 = new MeasurementController(map.olMap, {
+      getContinueMessage() {
+        return intl.formatMessage({ id: "tooltips.continue" });
+      },
+      getHelpMessage() {
+        return intl.formatMessage({ id: "tooltips.help" });
+      },
+      formatNumber(value) {
+        return intl.formatNumber(value, {
+          maximumFractionDigits: 2
+        });
+      }
+    });
+    setController(controller2);
+    return () => {
+      controller2.destroy();
+      setController(void 0);
+    };
+  }, [map, intl]);
+  return controller;
+}
+function getDefaultActiveFeatureStyle() {
+  return [
+    new Style({
+      stroke: new Stroke({
+        color: "#fff",
+        lineDash: [10, 10],
+        width: 5
+      })
+    }),
+    new Style({
+      fill: new Fill({
+        color: "rgba(0,0,0,0.15)"
+      }),
+      stroke: new Stroke({
+        color: "rgba(0, 0, 0, 0.7)",
+        lineDash: [10, 10],
+        width: 3
+      }),
+      image: new Circle({
+        radius: 5,
+        stroke: new Stroke({
+          color: "rgba(0, 0, 0, 0.7)",
+          width: 2
+        }),
+        fill: new Fill({
+          color: "rgba(255, 255, 255, 0.2)"
+        })
+      })
+    })
+  ];
+}
+function getDefaultFinishedFeatureStyle() {
+  return [
+    new Style({
+      stroke: new Stroke({
+        color: "#fff",
+        width: 5
+      })
+    }),
+    new Style({
+      stroke: new Stroke({
+        color: "#0b96fc",
+        width: 3
+      }),
+      fill: new Fill({
+        color: "rgba(11,150,252,0.15)"
+      })
+    })
+  ];
+}
+
+export { Measurement };
+//# sourceMappingURL=Measurement.js.map

package/Measurement.js.map

@@ -0,0 +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 width=\"340px\" mb={3}>\n                {intl.formatMessage({ id: \"measurementInfoText\" })}\n            </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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"}

package/MeasurementController.d.ts

@@ -0,0 +1,65 @@
+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";
+export type MeasurementType = "area" | "distance";
+export interface Messages {
+    getContinueMessage(): string;
+    getHelpMessage(): string;
+    formatNumber(value: number): string;
+}
+export declare class MeasurementController {
+    private olMap;
+    private messages;
+    private activeFeatureStyle;
+    /**
+     * The layer rendering the measurement "features".
+     */
+    private layer;
+    /**
+     * Source of {@link layer}.
+     */
+    private source;
+    /**
+     * Stores the current `Draw` interaction.
+     */
+    private draw;
+    /**
+     * Currently drawn feature.
+     */
+    private sketch;
+    /**
+     * The help tooltip element.
+     */
+    private helpTooltip;
+    /**
+     * The current measurement tooltip (if any).
+     */
+    private measureTooltip;
+    /**
+     * Overlays/Tooltip containing the tooltip for finished drawings.
+     */
+    private overlayTooltips;
+    /**
+     * Keeps track of registered event handlers.
+     */
+    private resources;
+    constructor(olMap: OlMap, messages: Messages);
+    destroy(): void;
+    /** Returns the vector layer used for finished features. */
+    getVectorLayer(): VectorLayer<VectorSource<Feature<import("ol/geom/Geometry").default>>>;
+    /** Updates the style used for finished features. */
+    setFinishedFeatureStyle(style: StyleLike): void;
+    /** Updates the style used for active measurements. */
+    setActiveFeatureStyle(style: StyleLike): void;
+    /** Removes all finished measurements. */
+    clearMeasurements(): void;
+    /** Starts measuring using the provided type. */
+    startMeasurement(type: MeasurementType): void;
+    /** Stops the current measuring started by `startMeasurement`. */
+    stopMeasurement(): void;
+    private createMeasureTooltip;
+    private createHelpTooltip;
+    private handlePointerMove;
+}

package/MeasurementController.js

@@ -0,0 +1,273 @@
+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 { TOPMOST_LAYER_Z } from '@open-pioneer/map';
+
+class MeasurementController {
+  olMap;
+  messages;
+  activeFeatureStyle;
+  /**
+   * The layer rendering the measurement "features".
+   */
+  layer;
+  /**
+   * Source of {@link layer}.
+   */
+  source;
+  /**
+   * Stores the current `Draw` interaction.
+   */
+  draw = void 0;
+  /**
+   * Currently drawn feature.
+   */
+  sketch = void 0;
+  /**
+   * The help tooltip element.
+   */
+  helpTooltip;
+  /**
+   * The current measurement tooltip (if any).
+   */
+  measureTooltip;
+  /**
+   * Overlays/Tooltip containing the tooltip for finished drawings.
+   */
+  overlayTooltips = [];
+  /**
+   * Keeps track of registered event handlers.
+   */
+  resources = [];
+  constructor(olMap, messages) {
+    this.olMap = olMap;
+    this.messages = messages;
+    const source = this.source = new Vector();
+    this.layer = new Vector$1({
+      source
+    });
+    this.layer.setZIndex(TOPMOST_LAYER_Z);
+    olMap.addLayer(this.layer);
+    const pointerMoveKey = olMap.on("pointermove", this.handlePointerMove.bind(this));
+    this.resources.push({
+      destroy() {
+        unByKey(pointerMoveKey);
+      }
+    });
+    const mouseOutHandler = () => {
+      this.helpTooltip.element.classList.add("hidden");
+    };
+    olMap.getViewport().addEventListener("mouseout", mouseOutHandler);
+    this.resources.push({
+      destroy() {
+        olMap.getViewport().removeEventListener("mouseout", mouseOutHandler);
+      }
+    });
+    this.helpTooltip = this.createHelpTooltip();
+  }
+  destroy() {
+    this.stopMeasurement();
+    for (const resource of this.resources) {
+      resource.destroy();
+    }
+    this.resources = [];
+    this.helpTooltip.destroy();
+    this.measureTooltip?.destroy();
+    for (const tooltip of this.overlayTooltips) {
+      tooltip.destroy();
+    }
+    this.overlayTooltips = [];
+    this.olMap.removeLayer(this.layer);
+    this.layer.dispose();
+    this.source.dispose();
+  }
+  /** Returns the vector layer used for finished features. */
+  getVectorLayer() {
+    return this.layer;
+  }
+  /** Updates the style used for finished features. */
+  setFinishedFeatureStyle(style) {
+    this.layer.setStyle(style);
+  }
+  /** Updates the style used for active measurements. */
+  setActiveFeatureStyle(style) {
+    const styleFunction = toFunction(style);
+    this.activeFeatureStyle = (feature, ...args) => {
+      const ft = feature?.getGeometry()?.getType();
+      if (ft === "Polygon" || ft === "LineString" || ft === "Point") {
+        return styleFunction(feature, ...args);
+      }
+    };
+    this.draw?.getOverlay().setStyle(this.activeFeatureStyle);
+  }
+  /** Removes all finished measurements. */
+  clearMeasurements() {
+    this.source.clear();
+    for (const tooltip of this.overlayTooltips) {
+      tooltip.destroy();
+    }
+    this.overlayTooltips = [];
+  }
+  /** Starts measuring using the provided type. */
+  startMeasurement(type) {
+    if (this.draw) {
+      throw new Error("Internal error: another measurement interaction is still active.");
+    }
+    const geometryType = type === "area" ? "Polygon" : "LineString";
+    const draw = this.draw = new Draw({
+      source: this.source,
+      type: geometryType,
+      style: this.activeFeatureStyle
+    });
+    this.olMap.addInteraction(draw);
+    let measureTooltip;
+    let changeListenerKey = void 0;
+    draw.on("drawstart", (evt) => {
+      measureTooltip = this.measureTooltip = this.createMeasureTooltip();
+      const sketch = this.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);
+          }
+        }
+      });
+    });
+    draw.on("drawend", () => {
+      if (measureTooltip) {
+        const classes = measureTooltip.element.classList;
+        classes.remove("measurement-active-tooltip");
+        classes.add("measurement-finished-tooltip");
+        measureTooltip.overlay.setOffset([0, -7]);
+        this.overlayTooltips.push(measureTooltip);
+        this.measureTooltip = measureTooltip = void 0;
+      }
+      this.sketch = void 0;
+      if (changeListenerKey) {
+        unByKey(changeListenerKey);
+      }
+    });
+    draw.on("drawabort", () => {
+      if (measureTooltip) {
+        measureTooltip.destroy();
+        this.measureTooltip = measureTooltip = void 0;
+      }
+      this.sketch = void 0;
+      if (changeListenerKey) {
+        unByKey(changeListenerKey);
+      }
+    });
+  }
+  /** Stops the current measuring started by `startMeasurement`. */
+  stopMeasurement() {
+    if (this.draw) {
+      this.olMap.removeInteraction(this.draw);
+      this.draw.abortDrawing();
+      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";
+    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 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);
+      }
+    };
+  }
+  handlePointerMove(evt) {
+    if (evt.dragging) {
+      return;
+    }
+    const tooltip = this.helpTooltip;
+    const helpMessage = getHelpMessage(this.messages, this.sketch);
+    tooltip.element.textContent = helpMessage;
+    tooltip.overlay.setPosition(evt.coordinate);
+    tooltip.element.classList.remove("hidden");
+  }
+}
+function getHelpMessage(messages, sketch) {
+  if (sketch) {
+    const geom = sketch.getGeometry();
+    if (geom instanceof Polygon || geom instanceof LineString) {
+      return messages.getContinueMessage();
+    }
+  }
+  return messages.getHelpMessage();
+}
+function formatArea(polygon, projection, messages) {
+  const area = getArea(polygon, { projection });
+  let output;
+  if (area >= 1e6) {
+    output = `${messages.formatNumber(area / 1e6)} km<sup>2</sup>`;
+  } else {
+    output = `${messages.formatNumber(area)} m<sup>2</sup>`;
+  }
+  return output;
+}
+function formatLength(line, projection, messages) {
+  const length = getLength(line, { projection });
+  let output;
+  if (length >= 1e3) {
+    output = `${messages.formatNumber(length / 1e3)} km`;
+  } else {
+    output = `${messages.formatNumber(length)} m`;
+  }
+  return output;
+}
+
+export { MeasurementController };
+//# sourceMappingURL=MeasurementController.js.map

package/MeasurementController.js.map

@@ -0,0 +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.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\";\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 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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"}

package/README.md

@@ -0,0 +1,65 @@
+# @open-pioneer/measurement
+
+This package provides a UI component that allows the user to perform area and distance measurements on the map.
+
+The UI contains a dropdown to switch between distance and area measurements and a button to delete all current measurements. The measurement unit is automatically selected appropriately.
+
+## Usage
+
+To integrate the measurement in your app, insert the following snippet and reference a map ID:
+
+```tsx
+<Measurement mapId="map_id" />
+```
+
+### Configuring feature styles
+
+To configure the style of the features drawn on the map, configure the optional `activeFeatureStyle` (for features that are currently being drawn) or `finishedFeatureStyle` (for completed features) properties:
+
+```tsx
+<Measurement mapId="map_id" activeFeatureStyle={...} finishedFeatureStyle={...} />
+```
+
+Both properties support arbitrary OpenLayers [`StyleLike`](https://openlayers.org/en/latest/apidoc/module-ol_style_Style.html#~StyleLike) values: you can configure either a single [Style](https://openlayers.org/en/latest/apidoc/module-ol_style_Style.html) instance, an array of them or a function computing such values.
+
+As an example, the following configuration will render completed features using black color and active ones using red color:
+
+```tsx
+import { Fill, Stroke, Style } from "ol/style";
+import { Measurement } from "@open-pioneer/measurement";
+
+const BLACK_STYLE = new Style({
+    stroke: new Stroke({
+        color: "black",
+        width: 5
+    }),
+    fill: new Fill({
+        color: "rgba(0, 0, 0, 0.25)"
+    })
+});
+
+const RED_STYLE = new Style({
+    stroke: new Stroke({
+        color: "red",
+        width: 5
+    }),
+    fill: new Fill({
+        color: "rgba(255, 0, 0, 0.25)"
+    })
+});
+
+function AppUI() {
+    return (
+        // ...
+        <Measurement
+            mapId={MAP_ID}
+            activeFeatureStyle={RED_STYLE}
+            finishedFeatureStyle={BLACK_STYLE}
+        />
+    );
+}
+```
+
+## License
+
+Apache-2.0 (see `LICENSE` file)

package/_virtual/_virtual-pioneer-module_react-hooks.js

@@ -0,0 +1,7 @@
+import { useIntlInternal } from '@open-pioneer/runtime/react-integration';
+
+const PACKAGE_NAME = "@open-pioneer/measurement";
+const useIntl = /*@__PURE__*/ useIntlInternal.bind(undefined, PACKAGE_NAME);
+
+export { useIntl };
+//# sourceMappingURL=_virtual-pioneer-module_react-hooks.js.map

package/_virtual/_virtual-pioneer-module_react-hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_virtual-pioneer-module_react-hooks.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/i18n/de.yaml

@@ -0,0 +1,9 @@
+messages:
+  measurementLabel: "Modus"
+  distance: "Strecke"
+  area: "Fläche"
+  deleteMeasurementLabel: "Messungen löschen"
+  measurementInfoText: "Klicken Sie in die Karte, um eine Messung zu beginnen."
+  tooltips:
+    help: "Klicken, um mit der Messung zu beginnen."
+    continue: "Doppelt klicken, um die Messung zu beenden."

package/i18n/en.yaml

@@ -0,0 +1,9 @@
+messages:
+  measurementLabel: "Mode"
+  distance: "Distance"
+  area: "Area"
+  deleteMeasurementLabel: "Delete measurements"
+  measurementInfoText: "Click in the map to start a measurement."
+  tooltips:
+    help: "Click to start measuring."
+    continue: "Double click to end the measurement."

package/index.d.ts

@@ -0,0 +1 @@
+export { Measurement, type MeasurementProps } from "./Measurement";

package/index.js

@@ -0,0 +1,2 @@
+export { Measurement } from './Measurement.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/measurement.css

@@ -0,0 +1,41 @@
+.measurement-tooltip {
+    position: relative;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 4px;
+    color: black;
+    padding: 4px 8px;
+    opacity: 1;
+    white-space: nowrap;
+    font-size: 12px;
+    cursor: default;
+    user-select: none;
+    font-weight: bold;
+}
+.measurement-active-tooltip {
+    background: rgba(0, 0, 0, 0.9);
+    border-radius: 4px;
+    border-color: rgba(0, 0, 0, 0.9);
+    opacity: 0.9;
+    color: white;
+}
+.measurement-finished-tooltip {
+    background-color: rgba(76, 179, 255, 0.9);
+    color: black;
+    border: 1px solid white;
+}
+.measurement-active-tooltip:before,
+.measurement-finished-tooltip:before {
+    border-top: 6px solid rgba(0, 0, 0, 0.9);
+    border-right: 6px solid transparent;
+    border-left: 6px solid transparent;
+    content: "";
+    position: absolute;
+    bottom: -6px;
+    margin-left: -7px;
+    left: 50%;
+}
+.measurement-finished-tooltip:before {
+    border-top-color: #4cb3ff;
+}
+
+/*# sourceMappingURL=measurement.css.map */

package/measurement.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["measurement.css"],"names":[],"mappings":"AAAA;IACI,kBAAkB;IAClB,oCAAoC;IACpC,kBAAkB;IAClB,YAAY;IACZ,gBAAgB;IAChB,UAAU;IACV,mBAAmB;IACnB,eAAe;IACf,eAAe;IACf,iBAAiB;IACjB,iBAAiB;AACrB;AACA;IACI,8BAA8B;IAC9B,kBAAkB;IAClB,gCAAgC;IAChC,YAAY;IACZ,YAAY;AAChB;AACA;IACI,yCAAyC;IACzC,YAAY;IACZ,uBAAuB;AAC3B;AACA;;IAEI,wCAAwC;IACxC,mCAAmC;IACnC,kCAAkC;IAClC,WAAW;IACX,kBAAkB;IAClB,YAAY;IACZ,iBAAiB;IACjB,SAAS;AACb;AACA;IACI,yBAAyB;AAC7B","file":"measurement.css","sourcesContent":[".measurement-tooltip {\n    position: relative;\n    background: rgba(255, 255, 255, 0.8);\n    border-radius: 4px;\n    color: black;\n    padding: 4px 8px;\n    opacity: 1;\n    white-space: nowrap;\n    font-size: 12px;\n    cursor: default;\n    user-select: none;\n    font-weight: bold;\n}\n.measurement-active-tooltip {\n    background: rgba(0, 0, 0, 0.9);\n    border-radius: 4px;\n    border-color: rgba(0, 0, 0, 0.9);\n    opacity: 0.9;\n    color: white;\n}\n.measurement-finished-tooltip {\n    background-color: rgba(76, 179, 255, 0.9);\n    color: black;\n    border: 1px solid white;\n}\n.measurement-active-tooltip:before,\n.measurement-finished-tooltip:before {\n    border-top: 6px solid rgba(0, 0, 0, 0.9);\n    border-right: 6px solid transparent;\n    border-left: 6px solid transparent;\n    content: \"\";\n    position: absolute;\n    bottom: -6px;\n    margin-left: -7px;\n    left: 50%;\n}\n.measurement-finished-tooltip:before {\n    border-top-color: #4cb3ff;\n}\n"]}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "type": "module",
+  "name": "@open-pioneer/measurement",
+  "version": "0.1.0",
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "@open-pioneer/chakra-integration": "^1.1.0",
+    "@open-pioneer/runtime": "^1.1.0",
+    "ol": "^8.2.0",
+    "react": "^18.2.0",
+    "classnames": "^2.3.2",
+    "@open-pioneer/map": "^0.1.0",
+    "@open-pioneer/react-utils": "^0.1.0"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./index.js",
+      "types": "./index.d.ts"
+    },
+    "./measurement.css": "./measurement.css"
+  },
+  "openPioneerFramework": {
+    "styles": "./measurement.css",
+    "services": [],
+    "i18n": {
+      "languages": [
+        "en",
+        "de"
+      ]
+    },
+    "ui": {
+      "references": []
+    },
+    "properties": [],
+    "packageFormatVersion": "1.0.0"
+  }
+}