@open-pioneer/measurement 0.4.4 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @open-pioneer/measurement
 
+## 0.7.0
+
+### Minor Changes
+
+-   310800c: Switch from `peerDependencies` to normal `dependencies`. Peer dependencies have some usability problems when used at scale.
+
+### Patch Changes
+
+-   310800c: Update core packages version.
+-   583f1d6: The `mapId` or `map` properties are now optional on individual components.
+    You can use the `DefaultMapProvider` to configure an implicit default value.
+
+    Note that configuring _neither_ a default _nor_ an explicit `map` or `mapId` will trigger a runtime error.
+
+-   583f1d6: All UI components in this project now accept the `mapId` (a `string`) _or_ the `map` (a `MapModel`) directly.
+-   a8b3449: Switch to a new versioning strategy.
+    From now on, packages released by this repository share a common version number.
+-   900eb11: Update dependencies.
+-   Updated dependencies [310800c]
+-   Updated dependencies [2502050]
+-   Updated dependencies [583f1d6]
+-   Updated dependencies [583f1d6]
+-   Updated dependencies [397d617]
+-   Updated dependencies [a8b3449]
+-   Updated dependencies [310800c]
+-   Updated dependencies [900eb11]
+-   Updated dependencies [583f1d6]
+-   Updated dependencies [397d617]
+    -   @open-pioneer/map@0.7.0
+
 ## 0.4.4
 
 ### Patch Changes

package/Measurement.d.ts

@@ -1,3 +1,4 @@
+import { MapModelProps } from "@open-pioneer/map";
 import { CommonComponentProps } from "@open-pioneer/react-utils";
 import { StyleLike } from "ol/style/Style";
 import { FC } from "react";
@@ -26,11 +27,7 @@ export type MeasurementGeometry = LineString | Polygon;
 /**
  * This is for special properties of the Measurement.
  */
-export interface MeasurementProps extends CommonComponentProps {
-    /**
-     * The id of the map.
-     */
-    mapId: string;
+export interface MeasurementProps extends CommonComponentProps, MapModelProps {
     /**
      * The style for the active drawing feature's geometry.
      */

package/Measurement.js

@@ -9,11 +9,10 @@ import { MeasurementController } from './MeasurementController.js';
 
 const Measurement = (props) => {
   const intl = useIntl();
-  const { mapId } = props;
   const { containerProps } = useCommonComponentProps("measurement", props);
   const [selectedMeasurement, setMeasurement] = useState("distance");
   const label = (id) => intl.formatMessage({ id });
-  const mapState = useMapModel(mapId);
+  const mapState = useMapModel(props);
   const controller = useController(mapState.map, props, intl);
   useEffect(() => {
     if (!controller) {

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\";\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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"}
+{"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, MapModelProps, 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, MapModelProps {\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 { containerProps } = useCommonComponentProps(\"measurement\", props);\n    const [selectedMeasurement, setMeasurement] = useState<MeasurementType>(\"distance\");\n    const label = (id: string) => intl.formatMessage({ id: id });\n    const mapState = useMapModel(props);\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/README.md

@@ -70,7 +70,7 @@ To prevent accidental updates, wrap the array in a `useMemo` hook or store it so
 
 ```tsx
 import LineString from "ol/geom/LineString";
-import { MeasurementGeometry } from "@open-pioneer/measurement/MeasurementController";
+import { MeasurementGeometry } from "@open-pioneer/measurement";
 
 const measurements = useMemo(
     () => [

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/measurement",
-  "version": "0.4.4",
+  "version": "0.7.0",
   "description": "This package provides a UI component that allows the user to perform area and distance measurements on the map.",
   "keywords": [
     "open-pioneer-trails"
@@ -13,15 +13,15 @@
     "url": "https://github.com/open-pioneer/trails-openlayers-base-packages",
     "directory": "src/packages/measurement"
   },
-  "peerDependencies": {
-    "@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",
+  "dependencies": {
+    "@open-pioneer/chakra-integration": "^2.3.0",
+    "@open-pioneer/core": "^2.3.0",
+    "@open-pioneer/react-utils": "^2.3.0",
+    "@open-pioneer/runtime": "^2.3.0",
     "classnames": "^2.3.2",
     "ol": "^9.2.4",
     "react": "^18.3.1",
-    "@open-pioneer/map": "^0.6.1"
+    "@open-pioneer/map": "^0.7.0"
   },
   "exports": {
     "./package.json": "./package.json",