@vcmap/ui 6.2.1 → 6.2.2

package/src/i18n/de.d.ts

@@ -458,6 +458,9 @@ declare namespace messages {
             let notValid: string;
             let required: string;
         }
+        export namespace layerSwap {
+            let deleteButton: string;
+        }
     }
     export namespace settings {
         let title_15: string;

package/src/i18n/de.js

@@ -320,6 +320,9 @@ const messages = {
       notValid: 'Eingabe nicht gültig',
       required: 'Eingabe ist erforderlich',
     },
+    layerSwap: {
+      deleteButton: 'Ebene deaktivieren',
+    },
   },
   settings: {
     title: 'Einstellungen',

package/src/i18n/en.d.ts

@@ -458,6 +458,9 @@ declare namespace messages {
             let notValid: string;
             let required: string;
         }
+        export namespace layerSwap {
+            let deleteButton: string;
+        }
     }
     export namespace settings {
         let title_15: string;

package/src/i18n/en.js

@@ -320,6 +320,9 @@ const messages = {
       notValid: 'Input not valid',
       required: 'Input is required',
     },
+    layerSwap: {
+      deleteButton: 'Deactivate layer',
+    },
   },
   settings: {
     title: 'Settings',

package/src/legend/legendHelper.js

@@ -233,6 +233,10 @@ export function getLegendEntries(app) {
       syncVectorClusterGroups([...app.layers]);
     },
   );
+  const destroyAddedListener = app.layers.added.addEventListener((l) => {
+    syncLayerLegendEntries(l);
+    syncVectorClusterGroups([...app.layers]);
+  });
   const destroyRemovedListener = app.layers.removed.addEventListener((l) => {
     removeEntryForLayer(l);
     syncVectorClusterGroups([...app.layers]);
@@ -246,6 +250,7 @@ export function getLegendEntries(app) {
   const destroy = () => {
     destroyMapListener();
     destroyChangedListener();
+    destroyAddedListener();
     destroyRemovedListener();
     Object.values(styleChangedListener).forEach((cb) => cb());
   };

package/src/manager/collectionManager/CollectionComponentContent.vue

@@ -9,7 +9,15 @@
       :show-title="false"
       @item-moved="move"
     />
-    <v-sheet v-if="items.length > limit" class="ma-2 pl-2">
+    <v-sheet v-if="page && pageSize && totalCount && items.length !== 0">
+      <v-pagination
+        class="px-2"
+        v-model="page"
+        :length="Math.ceil(totalCount / pageSize)"
+        density="compact"
+      ></v-pagination>
+    </v-sheet>
+    <v-sheet v-else-if="items.length > limit" class="ma-2 pl-2">
       <VcsButton @click="openCollectionComponentList">
         {{ $t('collectionManager.more') }}
       </VcsButton>
@@ -21,8 +29,9 @@
 </template>
 
 <script>
-  import { computed, inject } from 'vue';
-  import { VSheet, VContainer } from 'vuetify/components';
+  import { computed, inject, onUnmounted, ref, watch } from 'vue';
+  import { VSheet, VContainer, VPagination } from 'vuetify/components';
+  import { getLogger } from '@vcsuite/logger';
   import { createSelectionActions } from '../../components/lists/listHelper.js';
   import VcsList from '../../components/lists/VcsList.vue';
   import VcsButton from '../../components/buttons/VcsButton.vue';
@@ -41,6 +50,7 @@
       VcsList,
       VSheet,
       VContainer,
+      VPagination,
     },
     emits: ['openList'],
     setup(_props, { emit }) {
@@ -57,6 +67,57 @@
 
       const actions = collectionComponent.getActions();
 
+      const { pagination } = collectionComponent;
+      const page = ref();
+      const pageSize = ref();
+      const totalCount = ref();
+      let destroyPaginationListeners;
+
+      async function updatePagination() {
+        destroyPaginationListeners?.();
+        if (pagination.value && !pagination.value.initialized) {
+          await pagination.value.initialize();
+        }
+
+        page.value = pagination.value?.getPage();
+        pageSize.value = pagination.value?.getPageSize();
+        totalCount.value = pagination.value?.totalCount;
+        const listeners = [
+          pagination.value?.pageChanged.addEventListener((newPage) => {
+            page.value = newPage;
+          }),
+          pagination.value?.pageSizeChanged.addEventListener((newPageSize) => {
+            pageSize.value = newPageSize;
+          }),
+        ];
+        destroyPaginationListeners = () => {
+          listeners.forEach((l) => l?.());
+        };
+      }
+
+      if (pagination.value) {
+        updatePagination().catch((e) => {
+          getLogger('CollectionComponentContent').error(
+            'setting up pagination failed',
+            e,
+          );
+        });
+      }
+
+      onUnmounted(() => {
+        destroyPaginationListeners?.();
+      });
+
+      watch(pagination, async () => {
+        await updatePagination();
+      });
+
+      watch(page, async () => {
+        if (pagination.value && page.value !== pagination.value.getPage()) {
+          await pagination.value.setPage(page.value);
+        }
+      });
+
       return {
         title: collectionComponent.title,
         items: collectionComponent.items,
@@ -81,6 +142,9 @@
         openCollectionComponentList() {
           emit('openList', collectionComponent.id);
         },
+        page,
+        pageSize,
+        totalCount,
       };
     },
   };

package/src/manager/collectionManager/CollectionComponentContent.vue.d.ts

@@ -10,6 +10,9 @@ declare const _default: import("vue").DefineComponent<{}, {
     actions: import("vue").ComputedRef<any>;
     move(event: any): void;
     openCollectionComponentList(): void;
+    page: import("vue").Ref<any>;
+    pageSize: import("vue").Ref<any>;
+    totalCount: import("vue").Ref<any>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "openList"[], "openList", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
     onOpenList?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;

package/src/manager/collectionManager/collectionComponentClass.d.ts

@@ -6,11 +6,43 @@
  */
 export function createSupportedMapMappingFunction<T extends Object | import("@vcmap/core").VcsObject>(supportedMaps: string[] | ((arg0: T) => string[]), mapCollection: import("@vcmap/core").MapCollection): import("./collectionManager.js").MappingFunction<T>;
 export default CollectionComponentClass;
+export type Pagination<T> = {
+    initialize: () => Promise<void>;
+    initialized: boolean;
+    /**
+     * - Total number of items.
+     */
+    totalCount: number;
+    getPage: () => number;
+    setPage: (page: number) => Promise<void>;
+    getPageSize: () => number;
+    setPageSize: (pageSize: number) => Promise<void>;
+    getPageItems: () => T[];
+    pageChanged: VcsEvent<number>;
+    pageSizeChanged: VcsEvent<number>;
+};
+export type PaginationOptions<T> = {
+    /**
+     * - Async loader returning items slice and total count.
+     */
+    getItems: (startIndex: number, count: number) => Promise<{
+        items: T[];
+        total: number;
+    }>;
+    /**
+     * - Initial page size.
+     */
+    defaultPageSize?: number | undefined;
+    /**
+     * - Initial page which is applied on initialize.
+     */
+    initialPage?: number | undefined;
+};
 export type CollectionComponentUiOptions = {
     id?: string | undefined;
     title?: string | undefined;
     /**
-     * - only supported for IndexedCollections
+     * - only supported for IndexedCollections.
      */
     draggable?: boolean | undefined;
     /**
@@ -34,6 +66,7 @@ export type CollectionComponentUiOptions = {
     removeTitle?: string | undefined;
     bulkRemoveTitle?: string | undefined;
     renameTitle?: string | undefined;
+    pagination?: PaginationOptions<unknown> | undefined;
 };
 export type CollectionComponentClassOptions<T extends Object> = CollectionComponentUiOptions & {
     collection: import("@vcmap/core").Collection<T>;
@@ -142,6 +175,11 @@ declare class CollectionComponentClass<T extends Object | import("@vcmap/core").
      * @private
      */
     private _actionTitles;
+    /**
+     * @type {import("vue").ShallowRef<Pagination<T> | undefined>}
+     * @readonly
+     */
+    readonly pagination: import("vue").ShallowRef<Pagination<T> | undefined>;
     /**
      * @tyep {() => void}
      * @private
@@ -266,6 +304,10 @@ declare class CollectionComponentClass<T extends Object | import("@vcmap/core").
      * @param {string | symbol} owner
      */
     removeOwner(owner: string | symbol): void;
+    /**
+     * @param {PaginationOptions<T> | undefined} options
+     */
+    setPagination(options: PaginationOptions<T> | undefined): void;
     /**
      * resets this collection component by destroying all list items and
      * re-adding them from the collection applying current filter and mapping functions
@@ -273,3 +315,4 @@ declare class CollectionComponentClass<T extends Object | import("@vcmap/core").
     reset(): void;
     destroy(): void;
 }
+import { VcsEvent } from '@vcmap/core';

package/src/manager/collectionManager/collectionComponentClass.js

@@ -1,4 +1,4 @@
-import { IndexedCollection, isOverrideCollection } from '@vcmap/core';
+import { IndexedCollection, isOverrideCollection, VcsEvent } from '@vcmap/core';
 import { getLogger } from '@vcsuite/logger';
 import { v4 as uuidv4 } from 'uuid';
 import { computed, reactive, ref, shallowRef, watch } from 'vue';
@@ -12,11 +12,139 @@ import {
 } from '../../actions/listActions.js';
 import { sortByOwner } from '../navbarManager.js';
 
+/**
+ * @template T
+ * @typedef {Object} Pagination
+ * @property {() => Promise<void>} initialize
+ * @property {boolean} initialized
+ * @property {number} totalCount - Total number of items.
+ * @property {() => number} getPage
+ * @property {(page: number) => Promise<void>} setPage
+ * @property {() => number} getPageSize
+ * @property {(pageSize: number) => Promise<void>} setPageSize
+ * @property {() => T[]} getPageItems
+ * @property {VcsEvent<number>} pageChanged
+ * @property {VcsEvent<number>} pageSizeChanged
+ */
+
+/**
+ * @template T
+ * @typedef {Object} PaginationOptions
+ * @property {(startIndex: number, count: number) => Promise<{ items: T[], total: number }>} getItems - Async loader returning items slice and total count.
+ * @property {number} [defaultPageSize=10] - Initial page size.
+ * @property {number} [initialPage=1] - Initial page which is applied on initialize.
+ */
+
+/**
+ * Create a simple pagination helper that loads items into the provided collection.
+ * The collection is cleared and refilled whenever the page (or page size) changes.
+ * @template {Object} T
+ * @param {import("@vcmap/core").Collection<T>} collection - Target collection to populate.
+ * @param {PaginationOptions<T>} options - Pagination options.
+ * @returns {Promise<Pagination<T>>}
+ */
+function createPagination(
+  collection,
+  { getItems, defaultPageSize = 10, initialPage = 1 },
+) {
+  let initialized = false;
+  let initializePromise;
+  let totalCount;
+  let currentPage;
+  let currentPageSize = defaultPageSize;
+
+  const pageChanged = new VcsEvent();
+  const pageSizeChanged = new VcsEvent();
+
+  /**
+   * @param {number} page
+   * @param {number} [size]
+   * @returns {Promise<void>}
+   */
+  async function setPage(page, size) {
+    const pageSize = size || currentPageSize;
+
+    if (currentPage === page && currentPageSize === pageSize) {
+      return;
+    }
+
+    const prevPage = currentPage;
+    const prevPageSize = currentPageSize;
+
+    const result = await getItems((page - 1) * pageSize, pageSize);
+    // If another request finished in the meantime, ignore the result (stale)
+    if (currentPage !== prevPage || currentPageSize !== prevPageSize) {
+      return;
+    }
+    const { items, total } = result;
+    totalCount = total;
+    collection.clear();
+    items.forEach((i) => {
+      collection.add(i);
+    });
+
+    currentPage = page;
+    pageChanged.raiseEvent(currentPage);
+    if (pageSize && pageSize !== currentPageSize) {
+      currentPageSize = pageSize;
+      pageSizeChanged.raiseEvent(currentPageSize);
+    }
+    if (!initialized) {
+      initialized = true;
+    }
+  }
+
+  return {
+    initialize() {
+      if (!initializePromise) {
+        initializePromise = setPage(initialPage, defaultPageSize);
+      }
+      return initializePromise;
+    },
+    get initialized() {
+      return initialized;
+    },
+    get totalCount() {
+      if (!initialized) {
+        throw new Error(
+          'No initial request send yet. Please initialize/setPage first',
+        );
+      }
+      return totalCount;
+    },
+    getPage() {
+      if (!initialized) {
+        throw new Error(
+          'No initial request send yet. Please initialize/setPage first',
+        );
+      }
+      return currentPage;
+    },
+    setPage,
+    getPageSize() {
+      return currentPageSize;
+    },
+    async setPageSize(size) {
+      await setPage(1, size);
+    },
+    getPageItems() {
+      if (!initialized) {
+        throw new Error(
+          'No initial request send yet. Please initialize/setPage first',
+        );
+      }
+      return [...collection];
+    },
+    pageChanged,
+    pageSizeChanged,
+  };
+}
+
 /**
  * @typedef {Object} CollectionComponentUiOptions
  * @property {string} [id]
  * @property {string} [title]
- * @property {boolean} [draggable=false] - only supported for IndexedCollections
+ * @property {boolean} [draggable=false] - only supported for IndexedCollections.
  * @property {boolean} [renamable=false] - adds actions to rename items from list. Sets a default titleChanged callback on all list items, which can be overwritten in the mapping function, if necessary.
  * @property {boolean} [removable=false] - adds actions to remove items from list. Also adds a header action to delete selected, if selectable is set to true.
  * @property {boolean} [selectable=false]
@@ -26,6 +154,7 @@ import { sortByOwner } from '../navbarManager.js';
  * @property {string} [removeTitle="list.deleteItem"]
  * @property {string} [bulkRemoveTitle="list.delete"]
  * @property {string} [renameTitle="list.renameItem"]
+ * @property {PaginationOptions<unknown>} [pagination]
  */
 
 /**
@@ -205,6 +334,15 @@ class CollectionComponentClass {
       renameTitle: options.renameTitle ?? 'list.renameItem',
     };
 
+    /**
+     * @type {import("vue").ShallowRef<Pagination<T> | undefined>}
+     * @readonly
+     */
+    this.pagination = shallowRef();
+    if (options.pagination) {
+      this.setPagination(options.pagination);
+    }
+
     /**
      * @tyep {() => void}
      * @private
@@ -651,6 +789,18 @@ class CollectionComponentClass {
     this._actions.value = actions;
   }
 
+  /**
+   * @param {PaginationOptions<T> | undefined} options
+   */
+  setPagination(options) {
+    if (options) {
+      this.pagination.value = createPagination(this.collection, options);
+    } else {
+      this.pagination.value = undefined;
+      this.collection.clear();
+    }
+  }
+
   /**
    * resets this collection component by destroying all list items and
    * re-adding them from the collection applying current filter and mapping functions

package/src/manager/panel/PanelComponent.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-  import { computed, getCurrentInstance } from 'vue';
+  import { computed, inject, provide, getCurrentInstance } from 'vue';
   import { PanelLocation } from './panelManager.js';
 
   export default {
@@ -31,6 +31,14 @@
     },
     emits: ['resize'],
     setup(props, { emit }) {
+      const app = inject('vcsApp');
+      const panel = app.panelManager.get(props.panelState.id);
+      if (panel?.provides) {
+        Object.entries(panel.provides).forEach(([key, value]) => {
+          provide(key, value);
+        });
+      }
+
       return {
         appIsDark: computed(() => {
           return getCurrentInstance().proxy.$vuetify.theme.dark || !1;

package/src/state.js

@@ -324,13 +324,26 @@ function writeUrlAppState(state, maxLength) {
    */
   const urlState = new Array(7).fill(0);
   if (state.activeViewpoint) {
+    const { cameraPosition, groundPosition, distance, heading, pitch, roll } =
+      state.activeViewpoint;
+    function toFixed(num, digits) {
+      return Math.round(num * 10 ** digits) / 10 ** digits;
+    }
+    function formatCoord(coord) {
+      if (coord[2] === undefined) {
+        return [toFixed(coord[0], 6), toFixed(coord[1], 6)];
+      }
+      return [toFixed(coord[0], 6), toFixed(coord[1], 6), toFixed(coord[2], 2)];
+    }
+    const overwriteRoll =
+      !roll || Math.abs(roll - 360) < 1e-4 || Math.abs(roll) < 1e-4;
     urlState[0] = [
-      state.activeViewpoint.cameraPosition?.slice() ?? 0,
-      state.activeViewpoint.groundPosition?.slice() ?? 0,
-      state.activeViewpoint.distance ?? 0,
-      state.activeViewpoint.heading,
-      state.activeViewpoint.pitch,
-      state.activeViewpoint.roll,
+      cameraPosition ? formatCoord(cameraPosition) : 0,
+      groundPosition ? formatCoord(groundPosition) : 0,
+      distance ? toFixed(distance, 2) : 0,
+      heading ? toFixed(heading, 4) : 0,
+      pitch ? toFixed(pitch, 4) : -90,
+      overwriteRoll ? 0 : toFixed(roll, 4),
     ];
   }