@open-pioneer/spatial-bookmarks 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# @open-pioneer/spatial-bookmarks
+
+## 0.1.0
+
+### Minor Changes
+
+- 3ca8a25: Initial release
+
+### Patch Changes
+
+- Updated dependencies [08bffbc]
+- Updated dependencies [a58546b]
+- Updated dependencies [3ca8a25]
+- Updated dependencies [a58546b]
+- Updated dependencies [0c4ce04]
+  - @open-pioneer/map@0.1.1
+  - @open-pioneer/local-storage@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/README.md

@@ -0,0 +1,18 @@
+# @open-pioneer/spatial-bookmarks
+
+This package provides a UI component that allows the user to store, manage, and easily navigate between different map extents by creating bookmarks. The bookmarks are stored locally in the browser's local storage.
+
+The UI presents a list view that displays stored bookmarks and allows the user to easily interact with them. The widget contains an input field that allows the user to create a bookmark with the given name.
+Users can also delete individual bookmarks directly from the list.
+
+## Usage
+
+To integrate the spatial bookmarks component in your app, insert the following snippet and reference a map ID:
+
+```tsx
+<SpatialBookmarks mapId={MAP_ID} />
+```
+
+## License
+
+Apache-2.0 (see `LICENSE` file)

package/SpatialBookmarks.d.ts

@@ -0,0 +1,12 @@
+import { CommonComponentProps } from "@open-pioneer/react-utils";
+import { FC } from "react";
+export interface SpatialBookmarksProps extends CommonComponentProps {
+    /**
+     * The id of the map.
+     */
+    mapId: string;
+}
+/**
+ * A component that allows the user to manage a set of spatial bookmarks.
+ */
+export declare const SpatialBookmarks: FC<SpatialBookmarksProps>;

package/SpatialBookmarks.js

@@ -0,0 +1,290 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Flex, VStack, Alert, AlertIcon, Input, List, Box, Center, Text, Spacer, Tooltip, Button } from '@open-pioneer/chakra-integration';
+import { useMapModel } from '@open-pioneer/map';
+import { useCommonComponentProps } from '@open-pioneer/react-utils';
+import classNames from 'classnames';
+import { Provider, useAtomValue } from 'jotai';
+import { useService, useIntl } from './_virtual/_virtual-pioneer-module_react-hooks.js';
+import { useRef, useState, useEffect } from 'react';
+import { PiMapTrifold, PiTrashSimpleLight } from 'react-icons/pi';
+import { SpatialBookmarkViewModel } from './SpatialBookmarksViewModel.js';
+
+const SpatialBookmarks = (props) => {
+  const { map } = useMapModel(props.mapId);
+  const localStorageService = useService(
+    "local-storage.LocalStorageService"
+  );
+  const viewModel = useViewModel(map, localStorageService);
+  return viewModel && // Makes the store accessible to useAtom() etc. in the UI
+  /* @__PURE__ */ jsx(Provider, { store: viewModel.store, children: /* @__PURE__ */ jsx(SpatialBookmarkUI, { ...props, viewModel }) });
+};
+function SpatialBookmarkUI(props) {
+  const { viewModel } = props;
+  const intl = useIntl();
+  const listItemNodes = useRef([]);
+  const [scrollToLastItem, setScrollToLastItem] = useState(false);
+  const bookmarks = useAtomValue(viewModel.bookmarks);
+  const [bookmarkName, setBookmarkName] = useState("");
+  const isValidBookmarkName = bookmarkName.trim().length > 0;
+  const { containerProps } = useCommonComponentProps("spatial-bookmarks", props);
+  const [uiMode, setUiMode] = useState("list");
+  const clearBookmarks = () => {
+    viewModel.deleteAllBookmarks();
+    setUiMode("list");
+  };
+  const addBookmark = () => {
+    if (isValidBookmarkName) {
+      viewModel.createBookmark(bookmarkName);
+      setUiMode("list");
+      setBookmarkName("");
+      setScrollToLastItem(true);
+    }
+  };
+  useEffect(() => {
+    if (scrollToLastItem) {
+      const listItems = listItemNodes.current;
+      if (listItems) {
+        const lastItem = listItems[bookmarks.length - 1];
+        lastItem?.scrollIntoView?.();
+      }
+      setScrollToLastItem(false);
+    }
+  }, [bookmarks, scrollToLastItem]);
+  const deleteContent = () => /* @__PURE__ */ jsxs(VStack, { children: [
+    /* @__PURE__ */ jsxs(Alert, { rounded: "md", status: "warning", children: [
+      /* @__PURE__ */ jsx(AlertIcon, {}),
+      intl.formatMessage({ id: "bookmark.alert.delete" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      RemoveControls,
+      {
+        intl,
+        onClear: clearBookmarks,
+        onCancel: () => setUiMode("list")
+      }
+    )
+  ] });
+  const createContent = () => /* @__PURE__ */ jsxs(VStack, { children: [
+    /* @__PURE__ */ jsxs(Alert, { rounded: "md", status: "info", children: [
+      /* @__PURE__ */ jsx(AlertIcon, {}),
+      intl.formatMessage({ id: "bookmark.alert.create" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        "aria-label": intl.formatMessage({ id: "bookmark.input.label" }),
+        placeholder: intl.formatMessage({ id: "bookmark.input.placeholder" }),
+        value: bookmarkName,
+        onChange: (event) => {
+          setBookmarkName(event.target.value);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            addBookmark();
+          }
+        },
+        isRequired: true,
+        isInvalid: !isValidBookmarkName,
+        autoFocus: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CreateControls,
+      {
+        intl,
+        isInvalid: !isValidBookmarkName,
+        onCancel: () => {
+          setBookmarkName("");
+          setUiMode("list");
+        },
+        onSave: addBookmark
+      }
+    )
+  ] });
+  const listContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    bookmarks.length ? createList(bookmarks, viewModel, intl, listItemNodes) : /* @__PURE__ */ jsxs(Alert, { rounded: "md", status: "info", children: [
+      /* @__PURE__ */ jsx(AlertIcon, {}),
+      intl.formatMessage({ id: "bookmark.alert.noSaved" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ListControls,
+      {
+        intl,
+        bookmarks,
+        showCreate: () => setUiMode("create"),
+        showDelete: () => setUiMode("delete")
+      }
+    )
+  ] });
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    uiMode === "list" && listContent(),
+    uiMode === "create" && createContent(),
+    uiMode === "delete" && deleteContent()
+  ] });
+  return /* @__PURE__ */ jsx(Flex, { flexDirection: "column", ...containerProps, children: content });
+}
+function createList(bookmarks, viewModel, intl, listRef) {
+  const deleteBtnLabel = intl.formatMessage({
+    id: "bookmark.button.deleteOne"
+  });
+  const bookmarkItems = bookmarks.map((bookmark, idx) => /* @__PURE__ */ jsx(
+    BookmarkItem,
+    {
+      index: idx,
+      listItemNodes: listRef,
+      bookmark,
+      onActivate: () => viewModel.activateBookmark(bookmark),
+      onDelete: () => viewModel.deleteBookmark(bookmark.id),
+      deleteBtnLabel
+    },
+    bookmark.id
+  ));
+  return /* @__PURE__ */ jsx(
+    List,
+    {
+      as: "ul",
+      className: "spatial-bookmark-list",
+      role: "listbox",
+      "aria-label": intl.formatMessage({
+        id: "bookmark.list.label"
+      }),
+      flexShrink: 1,
+      flexGrow: 1,
+      p: 1,
+      spacing: 1,
+      overflowY: "auto",
+      listStyleType: "none",
+      children: bookmarkItems
+    }
+  );
+}
+const ARROW_INDEX_MAP = {
+  ArrowDown: 1,
+  ArrowUp: -1
+};
+function BookmarkItem(props) {
+  const { index, listItemNodes, bookmark, onDelete, onActivate, deleteBtnLabel } = props;
+  const title = bookmark.title;
+  const onKeyDown = (evt) => {
+    const key = evt.key;
+    if (key === "Enter") {
+      if (evt.target === evt.currentTarget) {
+        onActivate();
+      }
+      return;
+    }
+    if (ARROW_INDEX_MAP[key] != null) {
+      const len = listItemNodes.current?.length;
+      if (!len) {
+        return;
+      }
+      let nextIndex = (index + ARROW_INDEX_MAP[key]) % len;
+      if (nextIndex < 0) {
+        nextIndex = len - 1;
+      }
+      listItemNodes.current[nextIndex]?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "li",
+      p: 1,
+      ref: (el) => {
+        if (!el) {
+          listItemNodes.current.splice(index, 1);
+          return;
+        }
+        listItemNodes.current[index] = el;
+      },
+      className: classNames("spatial-bookmarks-item"),
+      tabIndex: 0,
+      rounded: "md",
+      role: "option",
+      cursor: "pointer",
+      outline: 0,
+      _hover: { background: "trails.50" },
+      _focusVisible: { boxShadow: "outline" },
+      onKeyDown,
+      onClick: onActivate,
+      children: /* @__PURE__ */ jsxs(Flex, { width: "100%", flexDirection: "row", align: "center", gap: 1, children: [
+        /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(PiMapTrifold, {}) }),
+        /* @__PURE__ */ jsx(Text, { ps: 2, noOfLines: 1, children: title }),
+        /* @__PURE__ */ jsx(Spacer, {}),
+        /* @__PURE__ */ jsx(Tooltip, { hasArrow: true, label: deleteBtnLabel, placement: "right", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "spatial-bookmarks-item-delete",
+            "aria-label": deleteBtnLabel,
+            borderRadius: "full",
+            iconSpacing: 0,
+            padding: 0,
+            colorScheme: "red",
+            variant: "ghost",
+            leftIcon: /* @__PURE__ */ jsx(PiTrashSimpleLight, {}),
+            onClick: (event) => {
+              onDelete();
+              event.stopPropagation();
+            }
+          }
+        ) }, index)
+      ] })
+    }
+  );
+}
+function ListControls(props) {
+  const { intl, bookmarks, showCreate, showDelete } = props;
+  return /* @__PURE__ */ jsxs(ButtonContainer, { children: [
+    /* @__PURE__ */ jsx(
+      DialogButton,
+      {
+        isDisabled: bookmarks.length === 0,
+        colorScheme: "red",
+        width: void 0,
+        iconSpacing: 0,
+        leftIcon: /* @__PURE__ */ jsx(PiTrashSimpleLight, {}),
+        onClick: showDelete,
+        "aria-label": intl.formatMessage({ id: "bookmark.button.deleteAll" }),
+        variant: "outline"
+      }
+    ),
+    /* @__PURE__ */ jsx(DialogButton, { onClick: showCreate, width: "100%", children: intl.formatMessage({ id: "bookmark.button.create" }) })
+  ] });
+}
+function RemoveControls(props) {
+  const { intl, onCancel, onClear } = props;
+  return /* @__PURE__ */ jsxs(ButtonContainer, { children: [
+    /* @__PURE__ */ jsx(DialogButton, { variant: "outline", onClick: onCancel, children: intl.formatMessage({ id: "bookmark.button.cancelDelete" }) }),
+    /* @__PURE__ */ jsx(DialogButton, { onClick: onClear, children: intl.formatMessage({ id: "bookmark.button.confirmDelete" }) })
+  ] });
+}
+function CreateControls(props) {
+  const { intl, onCancel, onSave, isInvalid } = props;
+  return /* @__PURE__ */ jsxs(ButtonContainer, { children: [
+    /* @__PURE__ */ jsx(DialogButton, { variant: "outline", onClick: () => onCancel(), children: intl.formatMessage({ id: "bookmark.button.cancel" }) }),
+    /* @__PURE__ */ jsx(DialogButton, { isDisabled: isInvalid, onClick: () => onSave(), children: intl.formatMessage({ id: "bookmark.button.save" }) })
+  ] });
+}
+function ButtonContainer(props) {
+  return /* @__PURE__ */ jsx(Flex, { width: "100%", flexDirection: "row", mt: 2, gap: 1, flexGrow: 0, flexShrink: 0, children: props.children });
+}
+function DialogButton(props) {
+  return /* @__PURE__ */ jsx(Button, { width: "100%", ...props });
+}
+function useViewModel(map, localStorageService) {
+  const [viewModel, setViewModel] = useState();
+  useEffect(() => {
+    let viewModel2;
+    if (!map) {
+      viewModel2 = void 0;
+    } else {
+      viewModel2 = new SpatialBookmarkViewModel(map, localStorageService);
+    }
+    setViewModel(viewModel2);
+    return () => viewModel2?.destroy();
+  }, [map, localStorageService]);
+  return viewModel;
+}
+
+export { SpatialBookmarks };
+//# sourceMappingURL=SpatialBookmarks.js.map

package/SpatialBookmarks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpatialBookmarks.js","sources":["SpatialBookmarks.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport {\n    Alert,\n    AlertIcon,\n    Box,\n    Button,\n    ButtonProps,\n    Flex,\n    Input,\n    List,\n    Spacer,\n    Text,\n    Tooltip,\n    VStack,\n    Center\n} from \"@open-pioneer/chakra-integration\";\nimport { LocalStorageService } from \"@open-pioneer/local-storage\";\nimport { MapModel, useMapModel } from \"@open-pioneer/map\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport classNames from \"classnames\";\nimport { Provider as JotaiProvider, useAtomValue } from \"jotai\";\nimport { useIntl, useService } from \"open-pioneer:react-hooks\";\nimport { FC, KeyboardEvent, ReactNode, useEffect, useRef, useState } from \"react\";\nimport { PiMapTrifold, PiTrashSimpleLight } from \"react-icons/pi\";\nimport { Bookmark, SpatialBookmarkViewModel } from \"./SpatialBookmarksViewModel\";\n\ntype UIMode = \"list\" | \"create\" | \"delete\";\n\nexport interface SpatialBookmarksProps extends CommonComponentProps {\n    /**\n     * The id of the map.\n     */\n    mapId: string;\n}\n\n/**\n * A component that allows the user to manage a set of spatial bookmarks.\n */\nexport const SpatialBookmarks: FC<SpatialBookmarksProps> = (props) => {\n    const { map } = useMapModel(props.mapId);\n    const localStorageService = useService<LocalStorageService>(\n        \"local-storage.LocalStorageService\"\n    );\n    const viewModel = useViewModel(map, localStorageService);\n    return (\n        viewModel && (\n            // Makes the store accessible to useAtom() etc. in the UI\n            <JotaiProvider store={viewModel.store}>\n                <SpatialBookmarkUI {...props} viewModel={viewModel} />\n            </JotaiProvider>\n        )\n    );\n};\n\nfunction SpatialBookmarkUI(props: SpatialBookmarksProps & { viewModel: SpatialBookmarkViewModel }) {\n    const { viewModel } = props;\n    const intl = useIntl();\n    const listItemNodes = useRef<HTMLElement[]>([]);\n    const [scrollToLastItem, setScrollToLastItem] = useState(false);\n\n    const bookmarks = useAtomValue(viewModel.bookmarks);\n    const [bookmarkName, setBookmarkName] = useState<string>(\"\");\n    const isValidBookmarkName = bookmarkName.trim().length > 0; // use trim to avoid bookmarks with space character only\n    const { containerProps } = useCommonComponentProps(\"spatial-bookmarks\", props);\n    const [uiMode, setUiMode] = useState<UIMode>(\"list\");\n\n    const clearBookmarks = () => {\n        viewModel.deleteAllBookmarks();\n        setUiMode(\"list\");\n    };\n\n    const addBookmark = () => {\n        if (isValidBookmarkName) {\n            viewModel.createBookmark(bookmarkName);\n            setUiMode(\"list\");\n            setBookmarkName(\"\");\n            setScrollToLastItem(true);\n        }\n    };\n\n    // Scroll to newly created bookmark after render\n    useEffect(() => {\n        if (scrollToLastItem) {\n            const listItems = listItemNodes.current;\n            if (listItems) {\n                const lastItem = listItems[bookmarks.length - 1];\n                lastItem?.scrollIntoView?.();\n            }\n            setScrollToLastItem(false);\n        }\n    }, [bookmarks, scrollToLastItem]);\n\n    const deleteContent = () => (\n        <VStack>\n            <Alert rounded=\"md\" status=\"warning\">\n                <AlertIcon />\n                {intl.formatMessage({ id: \"bookmark.alert.delete\" })}\n            </Alert>\n            <RemoveControls\n                intl={intl}\n                onClear={clearBookmarks}\n                onCancel={() => setUiMode(\"list\")}\n            />\n        </VStack>\n    );\n\n    const createContent = () => (\n        <VStack>\n            <Alert rounded=\"md\" status=\"info\">\n                <AlertIcon />\n                {intl.formatMessage({ id: \"bookmark.alert.create\" })}\n            </Alert>\n            <Input\n                aria-label={intl.formatMessage({ id: \"bookmark.input.label\" })}\n                placeholder={intl.formatMessage({ id: \"bookmark.input.placeholder\" })}\n                value={bookmarkName}\n                onChange={(event) => {\n                    setBookmarkName(event.target.value);\n                }}\n                onKeyDown={(e) => {\n                    // add bookmark only, if valid bookmark name exists\n                    if (e.key === \"Enter\") {\n                        addBookmark();\n                    }\n                }}\n                isRequired\n                isInvalid={!isValidBookmarkName}\n                autoFocus // eslint-disable-line jsx-a11y/no-autofocus\n            />\n            <CreateControls\n                intl={intl}\n                isInvalid={!isValidBookmarkName}\n                onCancel={() => {\n                    setBookmarkName(\"\");\n                    setUiMode(\"list\");\n                }}\n                onSave={addBookmark}\n            />\n        </VStack>\n    );\n\n    const listContent = () => (\n        <>\n            {bookmarks.length ? (\n                createList(bookmarks, viewModel, intl, listItemNodes)\n            ) : (\n                <Alert rounded=\"md\" status=\"info\">\n                    <AlertIcon />\n                    {intl.formatMessage({ id: \"bookmark.alert.noSaved\" })}\n                </Alert>\n            )}\n            <ListControls\n                intl={intl}\n                bookmarks={bookmarks}\n                showCreate={() => setUiMode(\"create\")}\n                showDelete={() => setUiMode(\"delete\")}\n            />\n        </>\n    );\n\n    const content = (\n        <>\n            {uiMode === \"list\" && listContent()}\n            {uiMode === \"create\" && createContent()}\n            {uiMode === \"delete\" && deleteContent()}\n        </>\n    );\n\n    return (\n        <Flex flexDirection=\"column\" {...containerProps}>\n            {content}\n        </Flex>\n    );\n}\n\nfunction createList(\n    bookmarks: Bookmark[],\n    viewModel: SpatialBookmarkViewModel,\n    intl: PackageIntl,\n    listRef: React.MutableRefObject<HTMLElement[]>\n) {\n    const deleteBtnLabel = intl.formatMessage({\n        id: \"bookmark.button.deleteOne\"\n    });\n\n    const bookmarkItems = bookmarks.map((bookmark, idx) => (\n        <BookmarkItem\n            key={bookmark.id}\n            index={idx}\n            listItemNodes={listRef}\n            bookmark={bookmark}\n            onActivate={() => viewModel.activateBookmark(bookmark)}\n            onDelete={() => viewModel.deleteBookmark(bookmark.id)}\n            deleteBtnLabel={deleteBtnLabel}\n        />\n    ));\n\n    return (\n        <List\n            as=\"ul\"\n            className=\"spatial-bookmark-list\"\n            role=\"listbox\"\n            aria-label={intl.formatMessage({\n                id: \"bookmark.list.label\"\n            })}\n            flexShrink={1}\n            flexGrow={1}\n            p={1} // Some padding for children's box shadow\n            spacing={1}\n            overflowY=\"auto\"\n            listStyleType=\"none\"\n        >\n            {bookmarkItems}\n        </List>\n    );\n}\n\n// key name -> index\nconst ARROW_INDEX_MAP: Record<string, number> = {\n    ArrowDown: 1,\n    ArrowUp: -1\n};\n\nfunction BookmarkItem(props: {\n    index: number;\n    listItemNodes: React.MutableRefObject<HTMLElement[]>;\n    bookmark: Bookmark;\n    onActivate: () => void;\n    onDelete: () => void;\n    deleteBtnLabel: string;\n}): JSX.Element {\n    const { index, listItemNodes, bookmark, onDelete, onActivate, deleteBtnLabel } = props;\n    const title = bookmark.title;\n    const onKeyDown = (evt: KeyboardEvent) => {\n        const key = evt.key;\n        if (key === \"Enter\") {\n            // Ignore enter from child components (buttons)\n            if (evt.target === evt.currentTarget) {\n                onActivate();\n            }\n            return;\n        }\n\n        if (ARROW_INDEX_MAP[key] != null) {\n            const len = listItemNodes.current?.length;\n            if (!len) {\n                return;\n            }\n\n            let nextIndex = (index + ARROW_INDEX_MAP[key]!) % len;\n            if (nextIndex < 0) {\n                nextIndex = len - 1;\n            }\n            listItemNodes.current[nextIndex]?.focus();\n        }\n    };\n    return (\n        <Box\n            as=\"li\"\n            p={1}\n            ref={(el: HTMLDivElement | null) => {\n                if (!el) {\n                    listItemNodes.current.splice(index, 1);\n                    return;\n                }\n                listItemNodes.current[index] = el;\n            }}\n            className={classNames(\"spatial-bookmarks-item\")}\n            tabIndex={0}\n            rounded=\"md\"\n            role=\"option\"\n            cursor=\"pointer\"\n            outline={0}\n            _hover={{ background: \"trails.50\" }}\n            _focusVisible={{ boxShadow: \"outline\" }}\n            onKeyDown={onKeyDown}\n            onClick={onActivate}\n        >\n            <Flex width=\"100%\" flexDirection=\"row\" align=\"center\" gap={1}>\n                <Center>\n                    <PiMapTrifold />\n                </Center>\n                <Text ps={2} noOfLines={1}>\n                    {title}\n                </Text>\n                <Spacer />\n                <Tooltip key={index} hasArrow label={deleteBtnLabel} placement=\"right\">\n                    <Button\n                        className=\"spatial-bookmarks-item-delete\"\n                        aria-label={deleteBtnLabel}\n                        borderRadius=\"full\"\n                        iconSpacing={0}\n                        padding={0}\n                        colorScheme=\"red\"\n                        variant=\"ghost\"\n                        leftIcon={<PiTrashSimpleLight />}\n                        onClick={(event) => {\n                            onDelete();\n                            event.stopPropagation();\n                        }}\n                    />\n                </Tooltip>\n            </Flex>\n        </Box>\n    );\n}\n\nfunction ListControls(props: {\n    intl: PackageIntl;\n    bookmarks: Bookmark[];\n    showCreate: () => void;\n    showDelete: () => void;\n}): JSX.Element {\n    const { intl, bookmarks, showCreate, showDelete } = props;\n\n    return (\n        <ButtonContainer>\n            <DialogButton\n                isDisabled={bookmarks.length === 0}\n                colorScheme=\"red\"\n                width={undefined}\n                iconSpacing={0}\n                leftIcon={<PiTrashSimpleLight />}\n                onClick={showDelete}\n                aria-label={intl.formatMessage({ id: \"bookmark.button.deleteAll\" })}\n                variant=\"outline\"\n            />\n            <DialogButton onClick={showCreate} width=\"100%\">\n                {intl.formatMessage({ id: \"bookmark.button.create\" })}\n            </DialogButton>\n        </ButtonContainer>\n    );\n}\n\nfunction RemoveControls(props: { intl: PackageIntl; onClear: () => void; onCancel: () => void }) {\n    const { intl, onCancel, onClear } = props;\n    return (\n        <ButtonContainer>\n            <DialogButton variant=\"outline\" onClick={onCancel}>\n                {intl.formatMessage({ id: \"bookmark.button.cancelDelete\" })}\n            </DialogButton>\n            <DialogButton onClick={onClear}>\n                {intl.formatMessage({ id: \"bookmark.button.confirmDelete\" })}\n            </DialogButton>\n        </ButtonContainer>\n    );\n}\n\nfunction CreateControls(props: {\n    intl: PackageIntl;\n    isInvalid: boolean;\n    onCancel: () => void;\n    onSave: () => void;\n}) {\n    const { intl, onCancel, onSave, isInvalid } = props;\n    return (\n        <ButtonContainer>\n            <DialogButton variant=\"outline\" onClick={() => onCancel()}>\n                {intl.formatMessage({ id: \"bookmark.button.cancel\" })}\n            </DialogButton>\n            <DialogButton isDisabled={isInvalid} onClick={() => onSave()}>\n                {intl.formatMessage({ id: \"bookmark.button.save\" })}\n            </DialogButton>\n        </ButtonContainer>\n    );\n}\n\nfunction ButtonContainer(props: { children: ReactNode }) {\n    return (\n        <Flex width=\"100%\" flexDirection=\"row\" mt={2} gap={1} flexGrow={0} flexShrink={0}>\n            {props.children}\n        </Flex>\n    );\n}\n\nfunction DialogButton(props?: ButtonProps): JSX.Element {\n    return <Button width=\"100%\" {...props} />;\n}\n\nfunction useViewModel(map: MapModel | undefined, localStorageService: LocalStorageService) {\n    const [viewModel, setViewModel] = useState<SpatialBookmarkViewModel>();\n    useEffect(() => {\n        let viewModel: SpatialBookmarkViewModel | undefined;\n        if (!map) {\n            viewModel = undefined;\n        } else {\n            viewModel = new SpatialBookmarkViewModel(map, localStorageService);\n        }\n\n        setViewModel(viewModel);\n        return () => viewModel?.destroy();\n    }, [map, localStorageService]);\n\n    return viewModel;\n}\n"],"names":["JotaiProvider","viewModel"],"mappings":"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"}

package/SpatialBookmarksViewModel.d.ts

@@ -0,0 +1,64 @@
+import { MapModel } from "@open-pioneer/map";
+import { Atom, createStore } from "jotai";
+import { LocalStorageService } from "@open-pioneer/local-storage";
+interface Extent {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+export interface Bookmark {
+    id: string;
+    title: string;
+    extent: Extent;
+    projection: string;
+}
+type Store = ReturnType<typeof createStore>;
+export declare class SpatialBookmarkViewModel {
+    private map;
+    private packageNamespace;
+    private writableBookmarks;
+    private stopBookmarksListener;
+    /** Contains the jotai state (atoms + store === value). */
+    readonly store: Store;
+    /**
+     * Provides read-only access to the bookmarks array.
+     * The UI simply renders the contents of the store and
+     * uses the methods below to modify the state.
+     */
+    get bookmarks(): Atom<Bookmark[]>;
+    constructor(map: MapModel, localStorageService: LocalStorageService);
+    destroy(): void;
+    /**
+     * Creates a new bookmark with the `title` provided by the UI.
+     * The current map extent is used for the new bookmark's extent.
+     */
+    createBookmark(title: string): void;
+    /**
+     * Activates the bookmark with the given id by zooming
+     * to the bookmark's extent.
+     */
+    activateBookmark(bookmark: Bookmark): void;
+    /**
+     * Deletes the bookmark with the given id.
+     */
+    deleteBookmark(id: string): void;
+    /**
+     * Deletes all bookmarks.
+     */
+    deleteAllBookmarks(): void;
+    /**
+     * Loads the bookmarks from local storage.
+     * If the bookmarks are not valid, the initial state (empty array) is restored.
+     */
+    private loadState;
+    /**
+     * Saves the bookmarks to local storage.
+     */
+    private saveState;
+    /** Computes an OpenLayers extent for the given bookmark. */
+    private getBookmarkExtent;
+    /** Moves the map to the given extent. */
+    private applyExtent;
+}
+export {};

package/SpatialBookmarksViewModel.js

@@ -0,0 +1,163 @@
+import { atom, createStore } from 'jotai';
+import { v4 } from 'uuid';
+import { getCenter } from 'ol/extent';
+import { transformExtent } from 'ol/proj';
+import { createLogger } from '@open-pioneer/core';
+
+const LOG = createLogger("spatial-bookmark:SpatialBookmarkViewModel");
+class SpatialBookmarkViewModel {
+  map;
+  packageNamespace;
+  writableBookmarks = atom([]);
+  stopBookmarksListener;
+  /** Contains the jotai state (atoms + store === value). */
+  store;
+  // contains jotai state
+  /**
+   * Provides read-only access to the bookmarks array.
+   * The UI simply renders the contents of the store and
+   * uses the methods below to modify the state.
+   */
+  get bookmarks() {
+    return this.writableBookmarks;
+  }
+  constructor(map, localStorageService) {
+    this.map = map;
+    this.packageNamespace = localStorageService.getNamespace("spatial-bookmarks");
+    this.store = createStore();
+    this.loadState();
+    this.stopBookmarksListener = this.store.sub(this.bookmarks, () => {
+      this.saveState();
+    });
+  }
+  destroy() {
+    this.stopBookmarksListener();
+  }
+  /**
+   * Creates a new bookmark with the `title` provided by the UI.
+   * The current map extent is used for the new bookmark's extent.
+   */
+  createBookmark(title) {
+    const olMap = this.map.olMap;
+    const olExtent = olMap.getView().calculateExtent();
+    const projection = olMap.getView().getProjection().getCode();
+    const extent = {
+      minX: olExtent[0],
+      minY: olExtent[1],
+      maxX: olExtent[2],
+      maxY: olExtent[3]
+    };
+    const bookmark = {
+      id: v4(),
+      title,
+      extent,
+      projection
+    };
+    LOG.debug("Created a new bookmark", bookmark);
+    const bookmarks = this.writableBookmarks;
+    this.store.set(bookmarks, [...this.store.get(bookmarks), bookmark]);
+  }
+  /**
+   * Activates the bookmark with the given id by zooming
+   * to the bookmark's extent.
+   */
+  activateBookmark(bookmark) {
+    LOG.debug("Activating bookmark", bookmark);
+    const extent = this.getBookmarkExtent(bookmark);
+    LOG.debug("Attempting to apply extent", extent);
+    this.applyExtent(extent);
+  }
+  /**
+   * Deletes the bookmark with the given id.
+   */
+  deleteBookmark(id) {
+    LOG.debug("Deleting bookmark", id);
+    const bookmarks = this.writableBookmarks;
+    this.store.set(bookmarks, [...this.store.get(bookmarks).filter((b) => b.id !== id)]);
+  }
+  /**
+   * Deletes all bookmarks.
+   */
+  deleteAllBookmarks() {
+    LOG.debug("Deleting all bookmarks");
+    this.store.set(this.writableBookmarks, []);
+  }
+  /**
+   * Loads the bookmarks from local storage.
+   * If the bookmarks are not valid, the initial state (empty array) is restored.
+   */
+  loadState() {
+    LOG.debug("Restoring bookmarks from local storage");
+    const rawBookmarks = this.packageNamespace.get("bookmarks") ?? [];
+    try {
+      validateBookmarks(rawBookmarks);
+      this.store.set(this.writableBookmarks, rawBookmarks);
+    } catch (e) {
+      LOG.error("Bookmarks data in local storage is invalid, resetting to default value.", e);
+      this.store.set(this.writableBookmarks, []);
+      this.saveState();
+    }
+  }
+  /**
+   * Saves the bookmarks to local storage.
+   */
+  saveState() {
+    LOG.debug("Saving bookmarks to local storage");
+    this.packageNamespace.set("bookmarks", this.store.get(this.bookmarks));
+  }
+  /** Computes an OpenLayers extent for the given bookmark. */
+  getBookmarkExtent(bookmark) {
+    const olMap = this.map.olMap;
+    const olView = olMap.getView();
+    const extent = bookmark.extent;
+    const olExtent = [extent.minX, extent.minY, extent.maxX, extent.maxY];
+    const viewProjection = olView.getProjection();
+    const extentProjection = bookmark.projection;
+    return transformExtent(olExtent, extentProjection, viewProjection);
+  }
+  /** Moves the map to the given extent. */
+  applyExtent(olExtent) {
+    const olMap = this.map.olMap;
+    const olView = olMap.getView();
+    const center = getCenter(olExtent);
+    const resolution = olView.getResolutionForExtent(olExtent);
+    olView.setCenter(center);
+    olView.setResolution(resolution);
+  }
+}
+function validateBookmarks(rawBookmarks) {
+  if (!Array.isArray(rawBookmarks)) {
+    throw new Error(`Expected bookmarks from local storage to be an array.`);
+  }
+  for (const rawBookmark of rawBookmarks) {
+    validateBookmark(rawBookmark);
+  }
+}
+function validateBookmark(rawBookmark) {
+  if (!rawBookmark || typeof rawBookmark !== "object") {
+    throw new Error(`Expected bookmark from local storage to be an object.`);
+  }
+  const bookmark = rawBookmark;
+  if (typeof bookmark.id !== "string") {
+    throw new Error("Bookmark does not have a valid id.");
+  }
+  if (typeof bookmark.title !== "string") {
+    throw new Error("Bookmark does not have a valid title.");
+  }
+  validateExtent(bookmark.extent);
+  if (typeof bookmark.projection !== "string") {
+    throw new Error("Bookmark does not have a valid projection value.");
+  }
+}
+function validateExtent(rawExtent) {
+  if (!rawExtent || typeof rawExtent !== "object") {
+    throw new Error(`Expected bookmark extent from local storage to be an object.`);
+  }
+  const extent = rawExtent;
+  if (typeof extent.minX !== "number" || typeof extent.minY !== "number" || typeof extent.maxX !== "number" || typeof extent.maxY !== "number") {
+    throw new Error("Expected bookmark extent from local storage to have valid coordinates.");
+  }
+}
+
+export { SpatialBookmarkViewModel };
+//# sourceMappingURL=SpatialBookmarksViewModel.js.map

package/SpatialBookmarksViewModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpatialBookmarksViewModel.js","sources":["SpatialBookmarksViewModel.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 { Atom, atom, createStore } from \"jotai\";\nimport { LocalStorageNamespace, LocalStorageService } from \"@open-pioneer/local-storage\";\nimport { v4 as uuid4v } from \"uuid\";\nimport { Extent as OlExtent, getCenter } from \"ol/extent\";\nimport { transformExtent } from \"ol/proj\";\nimport { createLogger } from \"@open-pioneer/core\";\n\nconst LOG = createLogger(\"spatial-bookmark:SpatialBookmarkViewModel\");\n\ninterface Extent {\n    minX: number;\n    minY: number;\n    maxX: number;\n    maxY: number;\n}\n\nexport interface Bookmark {\n    id: string;\n    title: string;\n    extent: Extent;\n    projection: string;\n}\n\ntype Store = ReturnType<typeof createStore>;\n\nexport class SpatialBookmarkViewModel {\n    private map: MapModel;\n    private packageNamespace: LocalStorageNamespace;\n    private writableBookmarks = atom<Bookmark[]>([]);\n    private stopBookmarksListener: () => void;\n\n    /** Contains the jotai state (atoms + store === value). */\n    readonly store: Store; // contains jotai state\n\n    /**\n     * Provides read-only access to the bookmarks array.\n     * The UI simply renders the contents of the store and\n     * uses the methods below to modify the state.\n     */\n    get bookmarks(): Atom<Bookmark[]> {\n        return this.writableBookmarks;\n    }\n\n    constructor(map: MapModel, localStorageService: LocalStorageService) {\n        this.map = map;\n        this.packageNamespace = localStorageService.getNamespace(\"spatial-bookmarks\");\n        this.store = createStore();\n\n        // Load from local storage on start; save changes whenever bookmarks change.\n        this.loadState();\n        this.stopBookmarksListener = this.store.sub(this.bookmarks, () => {\n            this.saveState();\n        });\n    }\n\n    destroy() {\n        this.stopBookmarksListener();\n    }\n\n    /**\n     * Creates a new bookmark with the `title` provided by the UI.\n     * The current map extent is used for the new bookmark's extent.\n     */\n    createBookmark(title: string) {\n        const olMap = this.map.olMap;\n        // minx, miny, maxx, maxy\n        const olExtent = olMap.getView().calculateExtent();\n        const projection = olMap.getView().getProjection().getCode();\n        const extent: Extent = {\n            minX: olExtent[0]!,\n            minY: olExtent[1]!,\n            maxX: olExtent[2]!,\n            maxY: olExtent[3]!\n        };\n        const bookmark: Bookmark = {\n            id: uuid4v(),\n            title,\n            extent,\n            projection\n        };\n        LOG.debug(\"Created a new bookmark\", bookmark);\n\n        const bookmarks = this.writableBookmarks;\n        this.store.set(bookmarks, [...this.store.get(bookmarks), bookmark]);\n    }\n\n    /**\n     * Activates the bookmark with the given id by zooming\n     * to the bookmark's extent.\n     */\n    activateBookmark(bookmark: Bookmark) {\n        LOG.debug(\"Activating bookmark\", bookmark);\n        const extent = this.getBookmarkExtent(bookmark);\n\n        LOG.debug(\"Attempting to apply extent\", extent);\n        this.applyExtent(extent);\n    }\n\n    /**\n     * Deletes the bookmark with the given id.\n     */\n    deleteBookmark(id: string) {\n        LOG.debug(\"Deleting bookmark\", id);\n        const bookmarks = this.writableBookmarks;\n        this.store.set(bookmarks, [...this.store.get(bookmarks).filter((b) => b.id !== id)]);\n    }\n\n    /**\n     * Deletes all bookmarks.\n     */\n    deleteAllBookmarks() {\n        LOG.debug(\"Deleting all bookmarks\");\n        this.store.set(this.writableBookmarks, []);\n    }\n\n    /**\n     * Loads the bookmarks from local storage.\n     * If the bookmarks are not valid, the initial state (empty array) is restored.\n     */\n    private loadState() {\n        LOG.debug(\"Restoring bookmarks from local storage\");\n\n        const rawBookmarks = this.packageNamespace.get(\"bookmarks\") ?? [];\n        try {\n            validateBookmarks(rawBookmarks);\n            this.store.set(this.writableBookmarks, rawBookmarks);\n        } catch (e) {\n            LOG.error(\"Bookmarks data in local storage is invalid, resetting to default value.\", e);\n            this.store.set(this.writableBookmarks, []);\n            this.saveState();\n        }\n    }\n\n    /**\n     * Saves the bookmarks to local storage.\n     */\n    private saveState() {\n        LOG.debug(\"Saving bookmarks to local storage\");\n        this.packageNamespace.set(\"bookmarks\", this.store.get(this.bookmarks));\n    }\n\n    /** Computes an OpenLayers extent for the given bookmark. */\n    private getBookmarkExtent(bookmark: Bookmark) {\n        const olMap = this.map.olMap;\n        const olView = olMap.getView();\n        const extent = bookmark.extent;\n        const olExtent = [extent.minX, extent.minY, extent.maxX, extent.maxY];\n        const viewProjection = olView.getProjection();\n        const extentProjection = bookmark.projection;\n        return transformExtent(olExtent, extentProjection, viewProjection);\n    }\n\n    /** Moves the map to the given extent. */\n    private applyExtent(olExtent: OlExtent) {\n        const olMap = this.map.olMap;\n        const olView = olMap.getView();\n        const center = getCenter(olExtent);\n        const resolution = olView.getResolutionForExtent(olExtent);\n        olView.setCenter(center);\n        olView.setResolution(resolution);\n    }\n}\n\nfunction validateBookmarks(rawBookmarks: unknown): asserts rawBookmarks is Bookmark[] {\n    if (!Array.isArray(rawBookmarks)) {\n        throw new Error(`Expected bookmarks from local storage to be an array.`);\n    }\n    for (const rawBookmark of rawBookmarks) {\n        validateBookmark(rawBookmark);\n    }\n}\n\nfunction validateBookmark(rawBookmark: unknown): asserts rawBookmark is Bookmark {\n    if (!rawBookmark || typeof rawBookmark !== \"object\") {\n        throw new Error(`Expected bookmark from local storage to be an object.`);\n    }\n\n    const bookmark = rawBookmark as Record<keyof Bookmark, unknown>;\n    if (typeof bookmark.id !== \"string\") {\n        throw new Error(\"Bookmark does not have a valid id.\");\n    }\n    if (typeof bookmark.title !== \"string\") {\n        throw new Error(\"Bookmark does not have a valid title.\");\n    }\n    validateExtent(bookmark.extent);\n    if (typeof bookmark.projection !== \"string\") {\n        throw new Error(\"Bookmark does not have a valid projection value.\");\n    }\n}\n\nfunction validateExtent(rawExtent: unknown): asserts rawExtent is Extent {\n    if (!rawExtent || typeof rawExtent !== \"object\") {\n        throw new Error(`Expected bookmark extent from local storage to be an object.`);\n    }\n\n    const extent = rawExtent as Record<keyof Extent, unknown>;\n    if (\n        typeof extent.minX !== \"number\" ||\n        typeof extent.minY !== \"number\" ||\n        typeof extent.maxX !== \"number\" ||\n        typeof extent.maxY !== \"number\"\n    ) {\n        throw new Error(\"Expected bookmark extent from local storage to have valid coordinates.\");\n    }\n}\n"],"names":["uuid4v"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+import { useServiceInternal, useIntlInternal } from '@open-pioneer/runtime/react-integration';
+
+const PACKAGE_NAME = "@open-pioneer/spatial-bookmarks";
+const useService = /*@__PURE__*/ useServiceInternal.bind(undefined, PACKAGE_NAME);
+const useIntl = /*@__PURE__*/ useIntlInternal.bind(undefined, PACKAGE_NAME);
+
+export { useIntl, useService };
+//# 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,19 @@
+messages:
+  bookmark:
+    button:
+      create: "Neues Lesezeichen hinzufügen"
+      deleteAll: "Alle Lesezeichen löschen"
+      deleteOne: "Lesezeichen löschen"
+      save: "Speichern"
+      cancel: "Abbrechen"
+      cancelDelete: "Nein"
+      confirmDelete: "Ja"
+    input:
+      label: "Name"
+      placeholder: "Name des Lesezeichens"
+    alert:
+      create: "Nach der Eingabe eines Namens können Sie das neue Lesezeichen speichern. Dabei wird der aktuelle Kartenausschnitt als Grundlage für die Position verwendet."
+      delete: "Möchten Sie wirklich alle räumlichen Lesezeichen löschen?"
+      noSaved: "Sie haben keine gespeicherten Lesezeichen"
+    list:
+      label: "Räumliche Lesezeichen"

package/i18n/en.yaml

@@ -0,0 +1,19 @@
+messages:
+  bookmark:
+    button:
+      create: "Add new bookmark"
+      deleteAll: "Delete all bookmarks"
+      deleteOne: "Delete bookmark"
+      save: "Save"
+      cancel: "Cancel"
+      cancelDelete: "No"
+      confirmDelete: "Yes"
+    input:
+      label: "Name"
+      placeholder: "Enter bookmark name"
+    alert:
+      create: "After entering a name you can save the new bookmark. The current map extent is used as the basis for the position."
+      delete: "Do you really want to delete all spatial bookmarks?"
+      noSaved: "No bookmarks saved"
+    list:
+      label: "Spatial bookmarks"

package/index.d.ts

@@ -0,0 +1 @@
+export { SpatialBookmarks, type SpatialBookmarksProps } from "./SpatialBookmarks";

package/index.js

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

package/index.js.map

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

package/package.json

@@ -0,0 +1,49 @@
+{
+  "type": "module",
+  "name": "@open-pioneer/spatial-bookmarks",
+  "version": "0.1.0",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "jotai": "^2.6.0",
+    "uuid": "^9.0.1"
+  },
+  "peerDependencies": {
+    "@chakra-ui/icons": "^2.1.1",
+    "@open-pioneer/chakra-integration": "^1.1.1",
+    "@open-pioneer/core": "^1.2.1",
+    "@open-pioneer/runtime": "^2.0.2",
+    "classnames": "^2.3.2",
+    "ol": "^8.2.0",
+    "react": "^18.2.0",
+    "react-icons": "^4.12.0",
+    "@open-pioneer/local-storage": "^0.1.0",
+    "@open-pioneer/map": "^0.1.1",
+    "@open-pioneer/react-utils": "^0.1.0"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./index.js",
+      "types": "./index.d.ts"
+    }
+  },
+  "openPioneerFramework": {
+    "services": [],
+    "i18n": {
+      "languages": [
+        "en",
+        "de"
+      ]
+    },
+    "ui": {
+      "references": [
+        {
+          "type": "unique",
+          "interfaceName": "local-storage.LocalStorageService"
+        }
+      ]
+    },
+    "properties": [],
+    "packageFormatVersion": "1.0.0"
+  }
+}