@open-pioneer/map-navigation 0.4.3 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @open-pioneer/map-navigation
 
+## 0.7.0
+
+### Minor Changes
+
+-   440b165: Create new tool buttons that allow the user to navigate the history of map views (e.g. jump back to previous map extent):
+
+    ```jsx
+    <HistoryBackward /* ... */  />
+    <HistoryForward /* ... */ />
+    ```
+
+-   310800c: Switch from `peerDependencies` to normal `dependencies`. Peer dependencies have some usability problems when used at scale.
+
+### Patch Changes
+
+-   310800c: Update core packages version.
+-   483c416: Don't attempt to zoom past configured zoom limits (#356).
+    As a side effect of this change, clicks on the zoom in/out buttons are ignored during the brief animation period (currently 200ms).
+-   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-ui-components@0.7.0
+    -   @open-pioneer/map@0.7.0
+
+## 0.4.4
+
+### Patch Changes
+
+-   b152428: Update trails dependencies
+-   Updated dependencies [b152428]
+-   Updated dependencies [291ccb6]
+    -   @open-pioneer/map-ui-components@0.1.1
+    -   @open-pioneer/map@0.6.1
+
 ## 0.4.3
 
 ### Patch Changes

package/History.d.ts

@@ -0,0 +1,29 @@
+import { MapModelProps } from "@open-pioneer/map";
+import { CommonComponentProps } from "@open-pioneer/react-utils";
+import { FC, RefAttributes } from "react";
+export type HistoryForwardProps = Omit<HistoryProps, "viewDirection">;
+/**
+ * Provides a button by which the user can navigate to the next map view.
+ *
+ * This component composes {@link History}.
+ */
+export declare const HistoryForward: FC<HistoryForwardProps>;
+export type HistoryBackwardProps = HistoryForwardProps;
+/**
+ * Provides a button by which the user can navigate to the previous map view.
+ *
+ * This component composes {@link History}.
+ */
+export declare const HistoryBackward: FC<HistoryBackwardProps>;
+export interface HistoryProps extends CommonComponentProps, RefAttributes<HTMLButtonElement>, MapModelProps {
+    /**
+     * The view direction.
+     *
+     * The button will either view forward or view backward depending on this value.
+     */
+    viewDirection: "forward" | "backward";
+}
+/**
+ * Provides a button by which the user can navigate forward or backward in the view history of the map.
+ */
+export declare const History: FC<HistoryProps>;

package/History.js

@@ -0,0 +1,75 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMapModel } from '@open-pioneer/map';
+import { ToolButton } from '@open-pioneer/map-ui-components';
+import { useCommonComponentProps } from '@open-pioneer/react-utils';
+import { useReactiveSnapshot } from '@open-pioneer/reactivity';
+import classNames from 'classnames';
+import { useIntl } from './_virtual/_virtual-pioneer-module_react-hooks.js';
+import { forwardRef } from 'react';
+import { FiCornerUpLeft, FiCornerUpRight } from 'react-icons/fi';
+import { useHistoryViewModel } from './ViewHistoryModel.js';
+
+const HistoryForward = forwardRef(function HistoryForward2(props, ref) {
+  return /* @__PURE__ */ jsx(History, { viewDirection: "forward", ref, ...props });
+});
+const HistoryBackward = forwardRef(function HistoryBackward2(props, ref) {
+  return /* @__PURE__ */ jsx(History, { viewDirection: "backward", ref, ...props });
+});
+const History = forwardRef(function History2(props, ref) {
+  const intl = useIntl();
+  const { viewDirection } = props;
+  const { map } = useMapModel(props);
+  const viewModel = useHistoryViewModel(map);
+  const { defaultClassName, buttonLabel, buttonIcon } = getDirectionProps(intl, viewDirection);
+  const { containerProps } = useCommonComponentProps(classNames("view", defaultClassName), props);
+  const canNavigate = useReactiveSnapshot(() => {
+    if (!viewModel) {
+      return false;
+    }
+    if (viewDirection === "forward") {
+      return viewModel.canForward;
+    } else {
+      return viewModel.canBackward;
+    }
+  }, [viewModel, viewDirection]);
+  const navigate = () => {
+    if (!viewModel) {
+      return;
+    }
+    if (viewDirection === "forward") {
+      viewModel.forward();
+    } else {
+      viewModel.backward();
+    }
+  };
+  return viewModel && /* @__PURE__ */ jsx(
+    ToolButton,
+    {
+      ref,
+      ...containerProps,
+      label: buttonLabel,
+      icon: buttonIcon,
+      onClick: navigate,
+      isDisabled: !canNavigate
+    }
+  );
+});
+function getDirectionProps(intl, viewDirection) {
+  switch (viewDirection) {
+    case "forward":
+      return {
+        defaultClassName: "view-forward",
+        buttonLabel: intl.formatMessage({ id: "view-forward.title" }),
+        buttonIcon: /* @__PURE__ */ jsx(FiCornerUpRight, {})
+      };
+    case "backward":
+      return {
+        defaultClassName: "view-backward",
+        buttonLabel: intl.formatMessage({ id: "view-backward.title" }),
+        buttonIcon: /* @__PURE__ */ jsx(FiCornerUpLeft, {})
+      };
+  }
+}
+
+export { History, HistoryBackward, HistoryForward };
+//# sourceMappingURL=History.js.map

package/History.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"History.js","sources":["History.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { MapModelProps, useMapModel } from \"@open-pioneer/map\";\nimport { ToolButton } from \"@open-pioneer/map-ui-components\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport classNames from \"classnames\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, ForwardedRef, forwardRef, RefAttributes } from \"react\";\nimport { FiCornerUpLeft, FiCornerUpRight } from \"react-icons/fi\";\nimport { useHistoryViewModel } from \"./ViewHistoryModel\";\n\nexport type HistoryForwardProps = Omit<HistoryProps, \"viewDirection\">;\n\n/**\n * Provides a button by which the user can navigate to the next map view.\n *\n * This component composes {@link History}.\n */\nexport const HistoryForward: FC<HistoryForwardProps> = forwardRef(function HistoryForward(\n    props: HistoryForwardProps,\n    ref: ForwardedRef<HTMLButtonElement>\n) {\n    return <History viewDirection=\"forward\" ref={ref} {...props} />;\n});\n\nexport type HistoryBackwardProps = HistoryForwardProps;\n\n/**\n * Provides a button by which the user can navigate to the previous map view.\n *\n * This component composes {@link History}.\n */\nexport const HistoryBackward: FC<HistoryBackwardProps> = forwardRef(function HistoryBackward(\n    props: HistoryBackwardProps,\n    ref: ForwardedRef<HTMLButtonElement>\n) {\n    return <History viewDirection=\"backward\" ref={ref} {...props} />;\n});\n\nexport interface HistoryProps\n    extends CommonComponentProps,\n        RefAttributes<HTMLButtonElement>,\n        MapModelProps {\n    /**\n     * The view direction.\n     *\n     * The button will either view forward or view backward depending on this value.\n     */\n    viewDirection: \"forward\" | \"backward\";\n}\n\n/**\n * Provides a button by which the user can navigate forward or backward in the view history of the map.\n */\nexport const History: FC<HistoryProps> = forwardRef(function History(\n    props: HistoryProps,\n    ref: ForwardedRef<HTMLButtonElement>\n) {\n    const intl = useIntl();\n    const { viewDirection } = props;\n    const { map } = useMapModel(props);\n    const viewModel = useHistoryViewModel(map);\n    const { defaultClassName, buttonLabel, buttonIcon } = getDirectionProps(intl, viewDirection);\n    const { containerProps } = useCommonComponentProps(classNames(\"view\", defaultClassName), props);\n\n    const canNavigate = useReactiveSnapshot(() => {\n        if (!viewModel) {\n            return false;\n        }\n\n        if (viewDirection === \"forward\") {\n            return viewModel.canForward;\n        } else {\n            return viewModel.canBackward;\n        }\n    }, [viewModel, viewDirection]);\n    const navigate = () => {\n        if (!viewModel) {\n            return;\n        }\n\n        if (viewDirection === \"forward\") {\n            viewModel.forward();\n        } else {\n            viewModel.backward();\n        }\n    };\n\n    return (\n        viewModel && (\n            <ToolButton\n                ref={ref}\n                {...containerProps}\n                label={buttonLabel}\n                icon={buttonIcon}\n                onClick={navigate}\n                isDisabled={!canNavigate}\n            />\n        )\n    );\n});\n\nfunction getDirectionProps(intl: PackageIntl, viewDirection: \"forward\" | \"backward\") {\n    switch (viewDirection) {\n        case \"forward\":\n            return {\n                defaultClassName: \"view-forward\",\n                buttonLabel: intl.formatMessage({ id: \"view-forward.title\" }),\n                buttonIcon: <FiCornerUpRight />\n            };\n        case \"backward\":\n            return {\n                defaultClassName: \"view-backward\",\n                buttonLabel: intl.formatMessage({ id: \"view-backward.title\" }),\n                buttonIcon: <FiCornerUpLeft />\n            };\n    }\n}\n"],"names":["HistoryForward","HistoryBackward","History"],"mappings":";;;;;;;;;;;AAoBO,MAAM,cAA0C,GAAA,UAAA,CAAW,SAASA,eAAAA,CACvE,OACA,GACF,EAAA;AACE,EAAA,2BAAQ,OAAQ,EAAA,EAAA,aAAA,EAAc,SAAU,EAAA,GAAA,EAAW,GAAG,KAAO,EAAA,CAAA,CAAA;AACjE,CAAC,EAAA;AASM,MAAM,eAA4C,GAAA,UAAA,CAAW,SAASC,gBAAAA,CACzE,OACA,GACF,EAAA;AACE,EAAA,2BAAQ,OAAQ,EAAA,EAAA,aAAA,EAAc,UAAW,EAAA,GAAA,EAAW,GAAG,KAAO,EAAA,CAAA,CAAA;AAClE,CAAC,EAAA;AAiBM,MAAM,OAA4B,GAAA,UAAA,CAAW,SAASC,QAAAA,CACzD,OACA,GACF,EAAA;AACE,EAAA,MAAM,OAAO,OAAQ,EAAA,CAAA;AACrB,EAAM,MAAA,EAAE,eAAkB,GAAA,KAAA,CAAA;AAC1B,EAAA,MAAM,EAAE,GAAA,EAAQ,GAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AACjC,EAAM,MAAA,SAAA,GAAY,oBAAoB,GAAG,CAAA,CAAA;AACzC,EAAA,MAAM,EAAE,gBAAkB,EAAA,WAAA,EAAa,YAAe,GAAA,iBAAA,CAAkB,MAAM,aAAa,CAAA,CAAA;AAC3F,EAAM,MAAA,EAAE,gBAAmB,GAAA,uBAAA,CAAwB,WAAW,MAAQ,EAAA,gBAAgB,GAAG,KAAK,CAAA,CAAA;AAE9F,EAAM,MAAA,WAAA,GAAc,oBAAoB,MAAM;AAC1C,IAAA,IAAI,CAAC,SAAW,EAAA;AACZ,MAAO,OAAA,KAAA,CAAA;AAAA,KACX;AAEA,IAAA,IAAI,kBAAkB,SAAW,EAAA;AAC7B,MAAA,OAAO,SAAU,CAAA,UAAA,CAAA;AAAA,KACd,MAAA;AACH,MAAA,OAAO,SAAU,CAAA,WAAA,CAAA;AAAA,KACrB;AAAA,GACD,EAAA,CAAC,SAAW,EAAA,aAAa,CAAC,CAAA,CAAA;AAC7B,EAAA,MAAM,WAAW,MAAM;AACnB,IAAA,IAAI,CAAC,SAAW,EAAA;AACZ,MAAA,OAAA;AAAA,KACJ;AAEA,IAAA,IAAI,kBAAkB,SAAW,EAAA;AAC7B,MAAA,SAAA,CAAU,OAAQ,EAAA,CAAA;AAAA,KACf,MAAA;AACH,MAAA,SAAA,CAAU,QAAS,EAAA,CAAA;AAAA,KACvB;AAAA,GACJ,CAAA;AAEA,EAAA,OACI,SACI,oBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACG,GAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACJ,KAAO,EAAA,WAAA;AAAA,MACP,IAAM,EAAA,UAAA;AAAA,MACN,OAAS,EAAA,QAAA;AAAA,MACT,YAAY,CAAC,WAAA;AAAA,KAAA;AAAA,GACjB,CAAA;AAGZ,CAAC,EAAA;AAED,SAAS,iBAAA,CAAkB,MAAmB,aAAuC,EAAA;AACjF,EAAA,QAAQ,aAAe;AAAA,IACnB,KAAK,SAAA;AACD,MAAO,OAAA;AAAA,QACH,gBAAkB,EAAA,cAAA;AAAA,QAClB,aAAa,IAAK,CAAA,aAAA,CAAc,EAAE,EAAA,EAAI,sBAAsB,CAAA;AAAA,QAC5D,UAAA,sBAAa,eAAgB,EAAA,EAAA,CAAA;AAAA,OACjC,CAAA;AAAA,IACJ,KAAK,UAAA;AACD,MAAO,OAAA;AAAA,QACH,gBAAkB,EAAA,eAAA;AAAA,QAClB,aAAa,IAAK,CAAA,aAAA,CAAc,EAAE,EAAA,EAAI,uBAAuB,CAAA;AAAA,QAC7D,UAAA,sBAAa,cAAe,EAAA,EAAA,CAAA;AAAA,OAChC,CAAA;AAAA,GACR;AACJ;;;;"}

package/InitialExtent.d.ts

@@ -1,10 +1,7 @@
+import { MapModelProps } from "@open-pioneer/map";
 import { CommonComponentProps } from "@open-pioneer/react-utils";
 import { FC, RefAttributes } from "react";
-export interface InitialExtentProps extends CommonComponentProps, RefAttributes<HTMLButtonElement> {
-    /**
-     * The map id.
-     */
-    mapId: string;
+export interface InitialExtentProps extends CommonComponentProps, RefAttributes<HTMLButtonElement>, MapModelProps {
 }
 /**
  * Provides a simple button that switches the view to its initial viewpoint.

package/InitialExtent.js

@@ -7,9 +7,8 @@ import { forwardRef } from 'react';
 import { FiHome } from 'react-icons/fi';
 
 const InitialExtent = forwardRef(function InitialExtent2(props, ref) {
-  const { mapId } = props;
   const { containerProps } = useCommonComponentProps("initial-extent", props);
-  const { map } = useMapModel(mapId);
+  const { map } = useMapModel(props);
   const intl = useIntl();
   function setInitExtent() {
     const initialExtent = map?.initialExtent;

package/InitialExtent.js.map

@@ -1 +1 @@
-{"version":3,"file":"InitialExtent.js","sources":["InitialExtent.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { useMapModel } from \"@open-pioneer/map\";\nimport { ToolButton } from \"@open-pioneer/map-ui-components\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { Extent } from \"ol/extent\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, ForwardedRef, RefAttributes, forwardRef } from \"react\";\nimport { FiHome } from \"react-icons/fi\";\n\nexport interface InitialExtentProps extends CommonComponentProps, RefAttributes<HTMLButtonElement> {\n    /**\n     * The map id.\n     */\n    mapId: string;\n}\n\n/**\n * Provides a simple button that switches the view to its initial viewpoint.\n */\nexport const InitialExtent: FC<InitialExtentProps> = forwardRef(function InitialExtent(\n    props: InitialExtentProps,\n    ref: ForwardedRef<HTMLButtonElement>\n) {\n    const { mapId } = props;\n    const { containerProps } = useCommonComponentProps(\"initial-extent\", props);\n    const { map } = useMapModel(mapId);\n    const intl = useIntl();\n\n    function setInitExtent() {\n        const initialExtent = map?.initialExtent;\n        const olMap = map?.olMap;\n\n        if (initialExtent && olMap) {\n            const newExtent: Extent = [\n                initialExtent.xMin,\n                initialExtent.yMin,\n                initialExtent.xMax,\n                initialExtent.yMax\n            ];\n\n            olMap.getView().fit(newExtent, { duration: 200 });\n        }\n    }\n\n    return (\n        <ToolButton\n            ref={ref}\n            label={intl.formatMessage({ id: \"initial-extent.title\" })}\n            icon={<FiHome />}\n            onClick={setInitExtent}\n            {...containerProps}\n        />\n    );\n});\n"],"names":["InitialExtent"],"mappings":";;;;;;;;AAoBO,MAAM,aAAwC,GAAA,UAAA,CAAW,SAASA,cAAAA,CACrE,OACA,GACF,EAAA;AACE,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA,CAAA;AAClB,EAAA,MAAM,EAAE,cAAA,EAAmB,GAAA,uBAAA,CAAwB,kBAAkB,KAAK,CAAA,CAAA;AAC1E,EAAA,MAAM,EAAE,GAAA,EAAQ,GAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AACjC,EAAA,MAAM,OAAO,OAAQ,EAAA,CAAA;AAErB,EAAA,SAAS,aAAgB,GAAA;AACrB,IAAA,MAAM,gBAAgB,GAAK,EAAA,aAAA,CAAA;AAC3B,IAAA,MAAM,QAAQ,GAAK,EAAA,KAAA,CAAA;AAEnB,IAAA,IAAI,iBAAiB,KAAO,EAAA;AACxB,MAAA,MAAM,SAAoB,GAAA;AAAA,QACtB,aAAc,CAAA,IAAA;AAAA,QACd,aAAc,CAAA,IAAA;AAAA,QACd,aAAc,CAAA,IAAA;AAAA,QACd,aAAc,CAAA,IAAA;AAAA,OAClB,CAAA;AAEA,MAAA,KAAA,CAAM,SAAU,CAAA,GAAA,CAAI,WAAW,EAAE,QAAA,EAAU,KAAK,CAAA,CAAA;AAAA,KACpD;AAAA,GACJ;AAEA,EACI,uBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACG,GAAA;AAAA,MACA,OAAO,IAAK,CAAA,aAAA,CAAc,EAAE,EAAA,EAAI,wBAAwB,CAAA;AAAA,MACxD,IAAA,sBAAO,MAAO,EAAA,EAAA,CAAA;AAAA,MACd,OAAS,EAAA,aAAA;AAAA,MACR,GAAG,cAAA;AAAA,KAAA;AAAA,GACR,CAAA;AAER,CAAC;;;;"}
+{"version":3,"file":"InitialExtent.js","sources":["InitialExtent.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { MapModelProps, useMapModel } from \"@open-pioneer/map\";\nimport { ToolButton } from \"@open-pioneer/map-ui-components\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { Extent } from \"ol/extent\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, ForwardedRef, RefAttributes, forwardRef } from \"react\";\nimport { FiHome } from \"react-icons/fi\";\n\nexport interface InitialExtentProps\n    extends CommonComponentProps,\n        RefAttributes<HTMLButtonElement>,\n        MapModelProps {}\n\n/**\n * Provides a simple button that switches the view to its initial viewpoint.\n */\nexport const InitialExtent: FC<InitialExtentProps> = forwardRef(function InitialExtent(\n    props: InitialExtentProps,\n    ref: ForwardedRef<HTMLButtonElement>\n) {\n    const { containerProps } = useCommonComponentProps(\"initial-extent\", props);\n    const { map } = useMapModel(props);\n    const intl = useIntl();\n\n    function setInitExtent() {\n        const initialExtent = map?.initialExtent;\n        const olMap = map?.olMap;\n\n        if (initialExtent && olMap) {\n            const newExtent: Extent = [\n                initialExtent.xMin,\n                initialExtent.yMin,\n                initialExtent.xMax,\n                initialExtent.yMax\n            ];\n\n            olMap.getView().fit(newExtent, { duration: 200 });\n        }\n    }\n\n    return (\n        <ToolButton\n            ref={ref}\n            label={intl.formatMessage({ id: \"initial-extent.title\" })}\n            icon={<FiHome />}\n            onClick={setInitExtent}\n            {...containerProps}\n        />\n    );\n});\n"],"names":["InitialExtent"],"mappings":";;;;;;;;AAkBO,MAAM,aAAwC,GAAA,UAAA,CAAW,SAASA,cAAAA,CACrE,OACA,GACF,EAAA;AACE,EAAA,MAAM,EAAE,cAAA,EAAmB,GAAA,uBAAA,CAAwB,kBAAkB,KAAK,CAAA,CAAA;AAC1E,EAAA,MAAM,EAAE,GAAA,EAAQ,GAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AACjC,EAAA,MAAM,OAAO,OAAQ,EAAA,CAAA;AAErB,EAAA,SAAS,aAAgB,GAAA;AACrB,IAAA,MAAM,gBAAgB,GAAK,EAAA,aAAA,CAAA;AAC3B,IAAA,MAAM,QAAQ,GAAK,EAAA,KAAA,CAAA;AAEnB,IAAA,IAAI,iBAAiB,KAAO,EAAA;AACxB,MAAA,MAAM,SAAoB,GAAA;AAAA,QACtB,aAAc,CAAA,IAAA;AAAA,QACd,aAAc,CAAA,IAAA;AAAA,QACd,aAAc,CAAA,IAAA;AAAA,QACd,aAAc,CAAA,IAAA;AAAA,OAClB,CAAA;AAEA,MAAA,KAAA,CAAM,SAAU,CAAA,GAAA,CAAI,WAAW,EAAE,QAAA,EAAU,KAAK,CAAA,CAAA;AAAA,KACpD;AAAA,GACJ;AAEA,EACI,uBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACG,GAAA;AAAA,MACA,OAAO,IAAK,CAAA,aAAA,CAAc,EAAE,EAAA,EAAI,wBAAwB,CAAA;AAAA,MACxD,IAAA,sBAAO,MAAO,EAAA,EAAA,CAAA;AAAA,MACd,OAAS,EAAA,aAAA;AAAA,MACR,GAAG,cAAA;AAAA,KAAA;AAAA,GACR,CAAA;AAER,CAAC;;;;"}

package/README.md

@@ -4,6 +4,7 @@ This package provides a collection of the following map navigation controls:
 
 -   [Initial extent](#initial-extent): A button that allows the user to reset the map to the initial view.
 -   [Zoom](#zoom): Two buttons that allow the user to zoom in and zoom out of the map.
+-   [Navigate history forward and backward](#navigate-history-forward-and-backward): Two separate buttons that allow the user to navigate in the history of map views (e.g. jump back to previous map extent).
 
 ## Usage
 
@@ -30,6 +31,21 @@ You can also use the generic `Zoom` component:
 <Zoom mapId="map_id" zoomDirection="in" />
 ```
 
+### View history forward and backward
+
+To integrate the component in your app, insert the following snippet and reference a view Model:
+
+```jsx
+<HistoryBackward mapId="map_id" />
+<HistoryForward mapId="map_id" />
+```
+
+#### Limitations
+
+The history tools use a shared history of previous map states.
+Map states are tracked while at least one history tool is mounted into the application.
+If all history tools are unmounted, the history of previous map states is discarded.
+
 ## License
 
 Apache-2.0 (see `LICENSE` file)

package/ViewHistoryModel.d.ts

@@ -0,0 +1,36 @@
+import { MapModel } from "@open-pioneer/map";
+import { ReactiveMap } from "@conterra/reactivity-core";
+import { Coordinate } from "ol/coordinate";
+interface MapViewState {
+    /** Map resolution */
+    resolution: number;
+    /** Map center */
+    center: Coordinate;
+}
+export declare class ViewHistoryModel {
+    #private;
+    private olMap;
+    private handle;
+    private _mapViews;
+    private _activeViewId;
+    constructor(map: MapModel);
+    destroy(): void;
+    get activeViewId(): number;
+    get mapViews(): ReactiveMap<number, MapViewState>;
+    get canBackward(): boolean;
+    get canForward(): boolean;
+    backward: () => void;
+    forward: () => void;
+}
+/**
+ * An internal hook that returns a shared HistoryViewModel.
+ * History tools that are active at the same time share a single model.
+ *
+ * The model is destroyed when the last tool is unmounted.
+ *
+ * TODO: `undefined` only because the map can be undefined at the moment (loading).
+ *
+ * NOTE: May be useful to have this a general solution in the future; but this is the only usage right now.
+ */
+export declare function useHistoryViewModel(map: MapModel | undefined): ViewHistoryModel | undefined;
+export {};

package/ViewHistoryModel.js

@@ -0,0 +1,124 @@
+import { View } from 'ol';
+import { unByKey } from 'ol/Observable.js';
+import { reactiveMap, reactive } from '@conterra/reactivity-core';
+import { useState, useEffect } from 'react';
+
+const SIZE_LIMIT = 200;
+class ViewHistoryModel {
+  olMap;
+  handle;
+  _mapViews = reactiveMap();
+  _activeViewId = reactive(0);
+  constructor(map) {
+    this.olMap = map.olMap;
+    this.handle = this.#subscribeToMapEvents();
+  }
+  destroy() {
+    this.handle && unByKey(this.handle);
+    this.handle = void 0;
+  }
+  get activeViewId() {
+    return this._activeViewId.value;
+  }
+  get mapViews() {
+    return this._mapViews;
+  }
+  get canBackward() {
+    return this.mapViews.get(this.activeViewId - 1) != null;
+  }
+  get canForward() {
+    return this.mapViews.get(this.activeViewId + 1) != null;
+  }
+  backward = () => {
+    if (this.canBackward) {
+      this.#setActiveView(this.activeViewId - 1);
+      this.#goto(this.activeViewId);
+    } else throw new Error("Backward is not possible at the moment");
+  };
+  forward = () => {
+    if (this.canForward) {
+      this.#setActiveView(this.activeViewId + 1);
+      this.#goto(this.activeViewId);
+    } else throw new Error("Forward is not possible at the moment");
+  };
+  #goto(activeViewId) {
+    const view = this.olMap.getView();
+    this.olMap.setView(
+      new View({
+        center: this.mapViews.get(activeViewId).center,
+        resolution: this.mapViews.get(activeViewId).resolution,
+        projection: view.getProjection()
+      })
+    );
+  }
+  #setActiveView(activeViewId) {
+    this._activeViewId.value = activeViewId;
+  }
+  #subscribeToMapEvents() {
+    const eventsKey = this.olMap.on("moveend", () => {
+      onCenterResChange();
+    });
+    const onCenterResChange = () => {
+      const olMap = this.olMap;
+      const mapViews = this.mapViews;
+      const view = olMap.getView();
+      const resolution = view.getResolution();
+      const center = view.getCenter();
+      if (resolution != null && center != null) {
+        if (center !== mapViews.get(this.activeViewId)?.center || resolution !== mapViews.get(this.activeViewId)?.resolution) {
+          const mapState = {
+            resolution,
+            center
+          };
+          const nextViewId = this.activeViewId + 1;
+          for (const k of mapViews.keys()) {
+            if (k > nextViewId) {
+              mapViews.delete(k);
+            }
+          }
+          for (const k of mapViews.keys()) {
+            if (mapViews.size < SIZE_LIMIT) {
+              break;
+            }
+            mapViews.delete(k);
+          }
+          this.#setActiveView(nextViewId);
+          mapViews.set(nextViewId, mapState);
+        }
+      }
+    };
+    return eventsKey;
+  }
+}
+const VIEW_MODELS = /* @__PURE__ */ new WeakMap();
+function useHistoryViewModel(map) {
+  const [vm, setVm] = useState();
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+    let state = VIEW_MODELS.get(map);
+    if (state == null) {
+      state = {
+        vm: new ViewHistoryModel(map),
+        useCount: 1
+      };
+      VIEW_MODELS.set(map, state);
+    } else {
+      state.useCount++;
+    }
+    setVm(state.vm);
+    return () => {
+      setVm(void 0);
+      state.useCount--;
+      if (state.useCount === 0) {
+        state.vm.destroy();
+        VIEW_MODELS.delete(map);
+      }
+    };
+  }, [map]);
+  return vm;
+}
+
+export { ViewHistoryModel, useHistoryViewModel };
+//# sourceMappingURL=ViewHistoryModel.js.map

package/ViewHistoryModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewHistoryModel.js","sources":["ViewHistoryModel.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { MapModel } from \"@open-pioneer/map\";\nimport { View } from \"ol\";\nimport { EventsKey } from \"ol/events\";\nimport { unByKey } from \"ol/Observable\";\nimport OlMap from \"ol/Map\";\nimport { Reactive, reactive, ReactiveMap, reactiveMap } from \"@conterra/reactivity-core\";\nimport { Coordinate } from \"ol/coordinate\";\nimport { useEffect, useState } from \"react\";\n\ninterface MapViewState {\n    /** Map resolution */\n    resolution: number;\n\n    /** Map center */\n    center: Coordinate;\n}\n\nconst SIZE_LIMIT = 200;\n\nexport class ViewHistoryModel {\n    private olMap: OlMap;\n    private handle: EventsKey | undefined;\n\n    private _mapViews: ReactiveMap<number, MapViewState> = reactiveMap<number, MapViewState>();\n    private _activeViewId: Reactive<number> = reactive(0);\n\n    constructor(map: MapModel) {\n        this.olMap = map.olMap;\n        this.handle = this.#subscribeToMapEvents();\n    }\n\n    destroy() {\n        this.handle && unByKey(this.handle);\n        this.handle = undefined;\n    }\n\n    get activeViewId(): number {\n        return this._activeViewId.value;\n    }\n\n    get mapViews(): ReactiveMap<number, MapViewState> {\n        return this._mapViews;\n    }\n\n    get canBackward(): boolean {\n        return this.mapViews.get(this.activeViewId - 1) != null;\n    }\n\n    get canForward(): boolean {\n        return this.mapViews.get(this.activeViewId + 1) != null;\n    }\n\n    backward = () => {\n        if (this.canBackward) {\n            this.#setActiveView(this.activeViewId - 1);\n            this.#goto(this.activeViewId);\n        } else throw new Error(\"Backward is not possible at the moment\");\n    };\n\n    forward = () => {\n        if (this.canForward) {\n            this.#setActiveView(this.activeViewId + 1);\n            this.#goto(this.activeViewId);\n        } else throw new Error(\"Forward is not possible at the moment\");\n    };\n\n    #goto(activeViewId: number) {\n        const view = this.olMap.getView();\n        this.olMap.setView(\n            new View({\n                center: this.mapViews.get(activeViewId)!.center,\n                resolution: this.mapViews.get(activeViewId)!.resolution,\n                projection: view.getProjection()\n            })\n        );\n    }\n\n    #setActiveView(activeViewId: number) {\n        this._activeViewId.value = activeViewId;\n    }\n\n    #subscribeToMapEvents() {\n        const eventsKey: EventsKey = this.olMap.on(\"moveend\", () => {\n            onCenterResChange();\n        });\n\n        const onCenterResChange = () => {\n            const olMap = this.olMap;\n            const mapViews = this.mapViews;\n            const view = olMap.getView();\n            const resolution = view.getResolution();\n            const center = view.getCenter();\n            if (resolution != null && center != null) {\n                if (\n                    center !== mapViews.get(this.activeViewId)?.center ||\n                    resolution !== mapViews.get(this.activeViewId)?.resolution\n                ) {\n                    const mapState = {\n                        resolution: resolution,\n                        center: center\n                    };\n                    const nextViewId = this.activeViewId + 1;\n\n                    // Remove keys in the \"future\". Note: an array would probably be more efficient.\n                    for (const k of mapViews.keys()) {\n                        if (k > nextViewId) {\n                            mapViews.delete(k);\n                        }\n                    }\n\n                    // Remove old keys above limit (maps are sorted by insertion order, so this removes the oldest entries)\n                    for (const k of mapViews.keys()) {\n                        if (mapViews.size < SIZE_LIMIT) {\n                            break;\n                        }\n                        mapViews.delete(k);\n                    }\n\n                    this.#setActiveView(nextViewId);\n                    mapViews.set(nextViewId, mapState);\n                }\n            }\n        };\n\n        return eventsKey;\n    }\n}\n\ninterface ViewModelState {\n    vm: ViewHistoryModel;\n    useCount: number; // 0 -> must destroy\n}\n\nconst VIEW_MODELS = new WeakMap<MapModel, ViewModelState>();\n\n/**\n * An internal hook that returns a shared HistoryViewModel.\n * History tools that are active at the same time share a single model.\n *\n * The model is destroyed when the last tool is unmounted.\n *\n * TODO: `undefined` only because the map can be undefined at the moment (loading).\n *\n * NOTE: May be useful to have this a general solution in the future; but this is the only usage right now.\n */\nexport function useHistoryViewModel(map: MapModel | undefined): ViewHistoryModel | undefined {\n    const [vm, setVm] = useState<ViewHistoryModel>();\n    useEffect(() => {\n        if (!map) {\n            return;\n        }\n\n        let state = VIEW_MODELS.get(map);\n        if (state == null) {\n            state = {\n                vm: new ViewHistoryModel(map),\n                useCount: 1\n            };\n            VIEW_MODELS.set(map, state);\n        } else {\n            state.useCount++;\n        }\n        setVm(state.vm);\n\n        return () => {\n            setVm(undefined);\n\n            state.useCount--;\n            if (state.useCount === 0) {\n                state.vm.destroy();\n                VIEW_MODELS.delete(map);\n            }\n        };\n    }, [map]);\n    return vm;\n}\n"],"names":[],"mappings":"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"}

package/Zoom.d.ts

@@ -1,3 +1,4 @@
+import { MapModelProps } from "@open-pioneer/map";
 import { CommonComponentProps } from "@open-pioneer/react-utils";
 import { FC, RefAttributes } from "react";
 export type ZoomInProps = Omit<ZoomProps, "zoomDirection">;
@@ -14,11 +15,7 @@ export type ZoomOutProps = ZoomInProps;
  * This component composes {@link Zoom}.
  */
 export declare const ZoomOut: FC<ZoomOutProps>;
-export interface ZoomProps extends CommonComponentProps, RefAttributes<HTMLButtonElement> {
-    /**
-     * The map id.
-     */
-    mapId: string;
+export interface ZoomProps extends CommonComponentProps, RefAttributes<HTMLButtonElement>, MapModelProps {
     /**
      * The zoom direction.
      *

package/Zoom.js

@@ -4,7 +4,7 @@ import { ToolButton } from '@open-pioneer/map-ui-components';
 import { useCommonComponentProps } from '@open-pioneer/react-utils';
 import classNames from 'classnames';
 import { useIntl } from './_virtual/_virtual-pioneer-module_react-hooks.js';
-import { forwardRef } from 'react';
+import { forwardRef, useState } from 'react';
 import { FiMinus, FiPlus } from 'react-icons/fi';
 
 const ZoomIn = forwardRef(function ZoomIn2(props, ref) {
@@ -14,21 +14,28 @@ const ZoomOut = forwardRef(function ZoomOut2(props, ref) {
   return /* @__PURE__ */ jsx(Zoom, { zoomDirection: "out", ref, ...props });
 });
 const Zoom = forwardRef(function Zoom2(props, ref) {
-  const { mapId, zoomDirection } = props;
-  const { map } = useMapModel(mapId);
+  const { zoomDirection } = props;
+  const { map } = useMapModel(props);
   const intl = useIntl();
+  const [disabled, setDisabled] = useState(false);
   const { defaultClassName, buttonLabel, buttonIcon } = getDirectionProps(intl, zoomDirection);
   const { containerProps } = useCommonComponentProps(classNames("zoom", defaultClassName), props);
   function zoom() {
+    if (disabled) {
+      return;
+    }
+    setDisabled(true);
     const view = map?.olMap.getView();
     let currZoom = view?.getZoom();
+    const maxZoom = view?.getMaxZoom() || Number.MAX_SAFE_INTEGER;
+    const minZoom = view?.getMinZoom() || 0;
     if (view && currZoom !== void 0) {
-      if (zoomDirection === "in") {
+      if (zoomDirection === "in" && currZoom < maxZoom) {
         ++currZoom;
-      } else {
+      } else if (zoomDirection === "out" && currZoom > minZoom) {
         --currZoom;
       }
-      view.animate({ zoom: currZoom, duration: 200 });
+      view.animate({ zoom: currZoom, duration: 200 }, () => setDisabled(false));
     }
   }
   return /* @__PURE__ */ jsx(

package/Zoom.js.map

@@ -1 +1 @@
-{"version":3,"file":"Zoom.js","sources":["Zoom.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { useMapModel } from \"@open-pioneer/map\";\nimport { ToolButton } from \"@open-pioneer/map-ui-components\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport classNames from \"classnames\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, ForwardedRef, RefAttributes, forwardRef } from \"react\";\nimport { FiMinus, FiPlus } from \"react-icons/fi\";\n\nexport type ZoomInProps = Omit<ZoomProps, \"zoomDirection\">;\n\n/**\n * Provides a button by which the user can zoom into the map.\n *\n * This component composes {@link Zoom}.\n */\nexport const ZoomIn: FC<ZoomInProps> = forwardRef(function ZoomIn(props, ref) {\n    return <Zoom zoomDirection=\"in\" ref={ref} {...props} />;\n});\n\nexport type ZoomOutProps = ZoomInProps;\n\n/**\n * Provides a button by which the user can zoom out of the map.\n *\n * This component composes {@link Zoom}.\n */\nexport const ZoomOut: FC<ZoomOutProps> = forwardRef(function ZoomOut(props, ref) {\n    return <Zoom zoomDirection=\"out\" ref={ref} {...props} />;\n});\n\nexport interface ZoomProps extends CommonComponentProps, RefAttributes<HTMLButtonElement> {\n    /**\n     * The map id.\n     */\n    mapId: string;\n\n    /**\n     * The zoom direction.\n     *\n     * The button will either zoom in or zoom out depending on this value.\n     */\n    zoomDirection: \"in\" | \"out\";\n}\n\n/**\n * Provides a button by which the user can zoom in or zoom out of the map.\n */\nexport const Zoom: FC<ZoomProps> = forwardRef(function Zoom(\n    props: ZoomProps,\n    ref: ForwardedRef<HTMLButtonElement>\n) {\n    const { mapId, zoomDirection } = props;\n    const { map } = useMapModel(mapId);\n    const intl = useIntl();\n    const { defaultClassName, buttonLabel, buttonIcon } = getDirectionProps(intl, zoomDirection);\n\n    const { containerProps } = useCommonComponentProps(classNames(\"zoom\", defaultClassName), props);\n\n    function zoom() {\n        const view = map?.olMap.getView();\n        let currZoom = view?.getZoom();\n\n        if (view && currZoom !== undefined) {\n            if (zoomDirection === \"in\") {\n                ++currZoom;\n            } else {\n                --currZoom;\n            }\n\n            view.animate({ zoom: currZoom, duration: 200 });\n        }\n    }\n\n    return (\n        <ToolButton\n            ref={ref}\n            label={buttonLabel}\n            icon={buttonIcon}\n            onClick={zoom}\n            {...containerProps}\n        />\n    );\n});\n\nfunction getDirectionProps(intl: PackageIntl, zoomDirection: \"in\" | \"out\") {\n    switch (zoomDirection) {\n        case \"in\":\n            return {\n                defaultClassName: \"zoom-in\",\n                buttonLabel: intl.formatMessage({ id: \"zoom-in.title\" }),\n                buttonIcon: <FiPlus />\n            };\n        case \"out\":\n            return {\n                defaultClassName: \"zoom-out\",\n                buttonLabel: intl.formatMessage({ id: \"zoom-out.title\" }),\n                buttonIcon: <FiMinus />\n            };\n    }\n}\n"],"names":["ZoomIn","ZoomOut","Zoom"],"mappings":";;;;;;;;;AAkBO,MAAM,MAA0B,GAAA,UAAA,CAAW,SAASA,OAAAA,CAAO,OAAO,GAAK,EAAA;AAC1E,EAAA,2BAAQ,IAAK,EAAA,EAAA,aAAA,EAAc,IAAK,EAAA,GAAA,EAAW,GAAG,KAAO,EAAA,CAAA,CAAA;AACzD,CAAC,EAAA;AASM,MAAM,OAA4B,GAAA,UAAA,CAAW,SAASC,QAAAA,CAAQ,OAAO,GAAK,EAAA;AAC7E,EAAA,2BAAQ,IAAK,EAAA,EAAA,aAAA,EAAc,KAAM,EAAA,GAAA,EAAW,GAAG,KAAO,EAAA,CAAA,CAAA;AAC1D,CAAC,EAAA;AAmBM,MAAM,IAAsB,GAAA,UAAA,CAAW,SAASC,KAAAA,CACnD,OACA,GACF,EAAA;AACE,EAAM,MAAA,EAAE,KAAO,EAAA,aAAA,EAAkB,GAAA,KAAA,CAAA;AACjC,EAAA,MAAM,EAAE,GAAA,EAAQ,GAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AACjC,EAAA,MAAM,OAAO,OAAQ,EAAA,CAAA;AACrB,EAAA,MAAM,EAAE,gBAAkB,EAAA,WAAA,EAAa,YAAe,GAAA,iBAAA,CAAkB,MAAM,aAAa,CAAA,CAAA;AAE3F,EAAM,MAAA,EAAE,gBAAmB,GAAA,uBAAA,CAAwB,WAAW,MAAQ,EAAA,gBAAgB,GAAG,KAAK,CAAA,CAAA;AAE9F,EAAA,SAAS,IAAO,GAAA;AACZ,IAAM,MAAA,IAAA,GAAO,GAAK,EAAA,KAAA,CAAM,OAAQ,EAAA,CAAA;AAChC,IAAI,IAAA,QAAA,GAAW,MAAM,OAAQ,EAAA,CAAA;AAE7B,IAAI,IAAA,IAAA,IAAQ,aAAa,KAAW,CAAA,EAAA;AAChC,MAAA,IAAI,kBAAkB,IAAM,EAAA;AACxB,QAAE,EAAA,QAAA,CAAA;AAAA,OACC,MAAA;AACH,QAAE,EAAA,QAAA,CAAA;AAAA,OACN;AAEA,MAAA,IAAA,CAAK,QAAQ,EAAE,IAAA,EAAM,QAAU,EAAA,QAAA,EAAU,KAAK,CAAA,CAAA;AAAA,KAClD;AAAA,GACJ;AAEA,EACI,uBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACG,GAAA;AAAA,MACA,KAAO,EAAA,WAAA;AAAA,MACP,IAAM,EAAA,UAAA;AAAA,MACN,OAAS,EAAA,IAAA;AAAA,MACR,GAAG,cAAA;AAAA,KAAA;AAAA,GACR,CAAA;AAER,CAAC,EAAA;AAED,SAAS,iBAAA,CAAkB,MAAmB,aAA6B,EAAA;AACvE,EAAA,QAAQ,aAAe;AAAA,IACnB,KAAK,IAAA;AACD,MAAO,OAAA;AAAA,QACH,gBAAkB,EAAA,SAAA;AAAA,QAClB,aAAa,IAAK,CAAA,aAAA,CAAc,EAAE,EAAA,EAAI,iBAAiB,CAAA;AAAA,QACvD,UAAA,sBAAa,MAAO,EAAA,EAAA,CAAA;AAAA,OACxB,CAAA;AAAA,IACJ,KAAK,KAAA;AACD,MAAO,OAAA;AAAA,QACH,gBAAkB,EAAA,UAAA;AAAA,QAClB,aAAa,IAAK,CAAA,aAAA,CAAc,EAAE,EAAA,EAAI,kBAAkB,CAAA;AAAA,QACxD,UAAA,sBAAa,OAAQ,EAAA,EAAA,CAAA;AAAA,OACzB,CAAA;AAAA,GACR;AACJ;;;;"}
+{"version":3,"file":"Zoom.js","sources":["Zoom.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { MapModelProps, useMapModel } from \"@open-pioneer/map\";\nimport { ToolButton } from \"@open-pioneer/map-ui-components\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport classNames from \"classnames\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, ForwardedRef, RefAttributes, forwardRef, useState } from \"react\";\nimport { FiMinus, FiPlus } from \"react-icons/fi\";\n\nexport type ZoomInProps = Omit<ZoomProps, \"zoomDirection\">;\n\n/**\n * Provides a button by which the user can zoom into the map.\n *\n * This component composes {@link Zoom}.\n */\nexport const ZoomIn: FC<ZoomInProps> = forwardRef(function ZoomIn(props, ref) {\n    return <Zoom zoomDirection=\"in\" ref={ref} {...props} />;\n});\n\nexport type ZoomOutProps = ZoomInProps;\n\n/**\n * Provides a button by which the user can zoom out of the map.\n *\n * This component composes {@link Zoom}.\n */\nexport const ZoomOut: FC<ZoomOutProps> = forwardRef(function ZoomOut(props, ref) {\n    return <Zoom zoomDirection=\"out\" ref={ref} {...props} />;\n});\n\nexport interface ZoomProps\n    extends CommonComponentProps,\n        RefAttributes<HTMLButtonElement>,\n        MapModelProps {\n    /**\n     * The zoom direction.\n     *\n     * The button will either zoom in or zoom out depending on this value.\n     */\n    zoomDirection: \"in\" | \"out\";\n}\n\n/**\n * Provides a button by which the user can zoom in or zoom out of the map.\n */\nexport const Zoom: FC<ZoomProps> = forwardRef(function Zoom(\n    props: ZoomProps,\n    ref: ForwardedRef<HTMLButtonElement>\n) {\n    const { zoomDirection } = props;\n    const { map } = useMapModel(props);\n    const intl = useIntl();\n    const [disabled, setDisabled] = useState<boolean>(false);\n    const { defaultClassName, buttonLabel, buttonIcon } = getDirectionProps(intl, zoomDirection);\n\n    const { containerProps } = useCommonComponentProps(classNames(\"zoom\", defaultClassName), props);\n\n    function zoom() {\n        if (disabled) {\n            return;\n        }\n        setDisabled(true);\n        const view = map?.olMap.getView();\n        let currZoom = view?.getZoom();\n\n        const maxZoom = view?.getMaxZoom() || Number.MAX_SAFE_INTEGER;\n        const minZoom = view?.getMinZoom() || 0;\n        if (view && currZoom !== undefined) {\n            if (zoomDirection === \"in\" && currZoom < maxZoom) {\n                ++currZoom;\n            } else if (zoomDirection === \"out\" && currZoom > minZoom) {\n                --currZoom;\n            }\n\n            view.animate({ zoom: currZoom, duration: 200 }, () => setDisabled(false));\n        }\n    }\n\n    return (\n        <ToolButton\n            ref={ref}\n            label={buttonLabel}\n            icon={buttonIcon}\n            onClick={zoom}\n            {...containerProps}\n        />\n    );\n});\n\nfunction getDirectionProps(intl: PackageIntl, zoomDirection: \"in\" | \"out\") {\n    switch (zoomDirection) {\n        case \"in\":\n            return {\n                defaultClassName: \"zoom-in\",\n                buttonLabel: intl.formatMessage({ id: \"zoom-in.title\" }),\n                buttonIcon: <FiPlus />\n            };\n        case \"out\":\n            return {\n                defaultClassName: \"zoom-out\",\n                buttonLabel: intl.formatMessage({ id: \"zoom-out.title\" }),\n                buttonIcon: <FiMinus />\n            };\n    }\n}\n"],"names":["ZoomIn","ZoomOut","Zoom"],"mappings":";;;;;;;;;AAkBO,MAAM,MAA0B,GAAA,UAAA,CAAW,SAASA,OAAAA,CAAO,OAAO,GAAK,EAAA;AAC1E,EAAA,2BAAQ,IAAK,EAAA,EAAA,aAAA,EAAc,IAAK,EAAA,GAAA,EAAW,GAAG,KAAO,EAAA,CAAA,CAAA;AACzD,CAAC,EAAA;AASM,MAAM,OAA4B,GAAA,UAAA,CAAW,SAASC,QAAAA,CAAQ,OAAO,GAAK,EAAA;AAC7E,EAAA,2BAAQ,IAAK,EAAA,EAAA,aAAA,EAAc,KAAM,EAAA,GAAA,EAAW,GAAG,KAAO,EAAA,CAAA,CAAA;AAC1D,CAAC,EAAA;AAiBM,MAAM,IAAsB,GAAA,UAAA,CAAW,SAASC,KAAAA,CACnD,OACA,GACF,EAAA;AACE,EAAM,MAAA,EAAE,eAAkB,GAAA,KAAA,CAAA;AAC1B,EAAA,MAAM,EAAE,GAAA,EAAQ,GAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AACjC,EAAA,MAAM,OAAO,OAAQ,EAAA,CAAA;AACrB,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAkB,KAAK,CAAA,CAAA;AACvD,EAAA,MAAM,EAAE,gBAAkB,EAAA,WAAA,EAAa,YAAe,GAAA,iBAAA,CAAkB,MAAM,aAAa,CAAA,CAAA;AAE3F,EAAM,MAAA,EAAE,gBAAmB,GAAA,uBAAA,CAAwB,WAAW,MAAQ,EAAA,gBAAgB,GAAG,KAAK,CAAA,CAAA;AAE9F,EAAA,SAAS,IAAO,GAAA;AACZ,IAAA,IAAI,QAAU,EAAA;AACV,MAAA,OAAA;AAAA,KACJ;AACA,IAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAChB,IAAM,MAAA,IAAA,GAAO,GAAK,EAAA,KAAA,CAAM,OAAQ,EAAA,CAAA;AAChC,IAAI,IAAA,QAAA,GAAW,MAAM,OAAQ,EAAA,CAAA;AAE7B,IAAA,MAAM,OAAU,GAAA,IAAA,EAAM,UAAW,EAAA,IAAK,MAAO,CAAA,gBAAA,CAAA;AAC7C,IAAM,MAAA,OAAA,GAAU,IAAM,EAAA,UAAA,EAAgB,IAAA,CAAA,CAAA;AACtC,IAAI,IAAA,IAAA,IAAQ,aAAa,KAAW,CAAA,EAAA;AAChC,MAAI,IAAA,aAAA,KAAkB,IAAQ,IAAA,QAAA,GAAW,OAAS,EAAA;AAC9C,QAAE,EAAA,QAAA,CAAA;AAAA,OACK,MAAA,IAAA,aAAA,KAAkB,KAAS,IAAA,QAAA,GAAW,OAAS,EAAA;AACtD,QAAE,EAAA,QAAA,CAAA;AAAA,OACN;AAEA,MAAK,IAAA,CAAA,OAAA,CAAQ,EAAE,IAAA,EAAM,QAAU,EAAA,QAAA,EAAU,KAAO,EAAA,MAAM,WAAY,CAAA,KAAK,CAAC,CAAA,CAAA;AAAA,KAC5E;AAAA,GACJ;AAEA,EACI,uBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACG,GAAA;AAAA,MACA,KAAO,EAAA,WAAA;AAAA,MACP,IAAM,EAAA,UAAA;AAAA,MACN,OAAS,EAAA,IAAA;AAAA,MACR,GAAG,cAAA;AAAA,KAAA;AAAA,GACR,CAAA;AAER,CAAC,EAAA;AAED,SAAS,iBAAA,CAAkB,MAAmB,aAA6B,EAAA;AACvE,EAAA,QAAQ,aAAe;AAAA,IACnB,KAAK,IAAA;AACD,MAAO,OAAA;AAAA,QACH,gBAAkB,EAAA,SAAA;AAAA,QAClB,aAAa,IAAK,CAAA,aAAA,CAAc,EAAE,EAAA,EAAI,iBAAiB,CAAA;AAAA,QACvD,UAAA,sBAAa,MAAO,EAAA,EAAA,CAAA;AAAA,OACxB,CAAA;AAAA,IACJ,KAAK,KAAA;AACD,MAAO,OAAA;AAAA,QACH,gBAAkB,EAAA,UAAA;AAAA,QAClB,aAAa,IAAK,CAAA,aAAA,CAAc,EAAE,EAAA,EAAI,kBAAkB,CAAA;AAAA,QACxD,UAAA,sBAAa,OAAQ,EAAA,EAAA,CAAA;AAAA,OACzB,CAAA;AAAA,GACR;AACJ;;;;"}

package/i18n/de.yaml

@@ -5,3 +5,7 @@ messages:
     title: Karte vergrößern
   zoom-out:
     title: Karte verkleinern
+  view-backward:
+    title: Eine Kartenansicht zurück
+  view-forward:
+    title: Eine Kartenansicht vor

package/i18n/en.yaml

@@ -5,3 +5,7 @@ messages:
     title: Zoom in map
   zoom-out:
     title: Zoom out map
+  view-backward:
+    title: One map view back
+  view-forward:
+    title: One map view ahead

package/index.d.ts

@@ -1,2 +1,3 @@
 export { InitialExtent, type InitialExtentProps } from "./InitialExtent";
 export { Zoom, type ZoomProps, ZoomIn, type ZoomInProps, ZoomOut, type ZoomOutProps } from "./Zoom";
+export { HistoryForward, type HistoryForwardProps, HistoryBackward, type HistoryBackwardProps, History, type HistoryProps } from "./History";

package/index.js

@@ -1,3 +1,4 @@
 export { InitialExtent } from './InitialExtent.js';
 export { Zoom, ZoomIn, ZoomOut } from './Zoom.js';
+export { History, HistoryBackward, HistoryForward } from './History.js';
 //# sourceMappingURL=index.js.map

package/index.js.map

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/map-navigation",
-  "version": "0.4.3",
+  "version": "0.7.0",
   "description": "This package provides a collection of map navigation controls.",
   "keywords": [
     "open-pioneer-trails"
@@ -13,16 +13,18 @@
     "url": "https://github.com/open-pioneer/trails-openlayers-base-packages",
     "directory": "src/packages/map-navigation"
   },
-  "peerDependencies": {
-    "@open-pioneer/chakra-integration": "^1.1.3",
-    "@open-pioneer/react-utils": "^1.0.0",
-    "@open-pioneer/runtime": "^2.1.6",
+  "dependencies": {
+    "@conterra/reactivity-core": "^0.4.3",
+    "@open-pioneer/chakra-integration": "^2.3.0",
+    "@open-pioneer/react-utils": "^2.3.0",
+    "@open-pioneer/reactivity": "^2.3.0",
+    "@open-pioneer/runtime": "^2.3.0",
     "classnames": "^2.3.2",
     "ol": "^9.2.4",
     "react": "^18.3.1",
-    "react-icons": "^5.2.1",
-    "@open-pioneer/map": "^0.6.0",
-    "@open-pioneer/map-ui-components": "^0.1.0"
+    "react-icons": "^5.3.0",
+    "@open-pioneer/map-ui-components": "^0.7.0",
+    "@open-pioneer/map": "^0.7.0"
   },
   "exports": {
     "./package.json": "./package.json",