@vcmap/ui 6.1.0-rc.1 → 6.1.0-rc.3

package/src/featureInfo/featureInfoInteraction.js

@@ -2,6 +2,8 @@ import {
   AbstractInteraction,
   EventType,
   ModificationKeyType,
+  vectorClusterGroupName,
+  isProvidedClusterFeature,
 } from '@vcmap/core';
 
 /**
@@ -28,9 +30,22 @@ class FeatureInfoInteraction extends AbstractInteraction {
    */
   async pipe(event) {
     if (event.feature) {
-      if (
+      const featureId = event.feature.getId();
+      const isClusterFeature = !!(
+        event.feature[vectorClusterGroupName] ||
+        event.feature[isProvidedClusterFeature]
+      );
+      if (isClusterFeature) {
+        if (
+          !this._featureInfo.selectedClusterFeature ||
+          featureId !== this._featureInfo.selectedClusterFeatureId
+        ) {
+          event.stopPropagation = true;
+          await this._featureInfo.selectClusterFeature(event.feature);
+        }
+      } else if (
         !this._featureInfo.selectedFeature ||
-        event.feature.getId() !== this._featureInfo.selectedFeatureId
+        featureId !== this._featureInfo.selectedFeatureId
       ) {
         event.stopPropagation = true;
         await this._featureInfo.selectFeature(event.feature, event.position, [
@@ -39,7 +54,7 @@ class FeatureInfoInteraction extends AbstractInteraction {
         ]);
       }
     } else {
-      await this._featureInfo.clear();
+      await this._featureInfo.clearSelection();
     }
     return event;
   }

package/src/featureInfo/iframeFeatureInfoView.js

@@ -1,4 +1,4 @@
-import { renderTemplate } from '../components/form-output/markdownHelper.js';
+import { renderTemplate } from '@vcmap/core';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
 import IframeComponent from './IframeComponent.vue';
 

package/src/featureInfo/markdownBalloonFeatureInfoView.js

@@ -1,7 +1,5 @@
-import {
-  parseAndSanitizeMarkdown,
-  renderTemplate,
-} from '../components/form-output/markdownHelper.js';
+import { renderTemplate } from '@vcmap/core';
+import { parseAndSanitizeMarkdown } from '../components/form-output/markdownHelper.js';
 import BalloonFeatureInfoView from './balloonFeatureInfoView.js';
 import MarkdownBalloonComponent from './MarkdownBalloonComponent.vue';
 

package/src/featureInfo/markdownFeatureInfoView.js

@@ -1,4 +1,4 @@
-import { renderTemplate } from '../components/form-output/markdownHelper.js';
+import { renderTemplate } from '@vcmap/core';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
 import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
 

package/src/i18n/de.d.ts

@@ -73,6 +73,11 @@ declare namespace messages {
             counter: string;
             counterSize: string;
         };
+        fileUpload: {
+            title: string;
+            divider: string;
+            browse: string;
+        };
         timePicker: {
             am: string;
             pm: string;
@@ -278,6 +283,7 @@ declare namespace messages {
             export { name_2 as name };
             export let checkBoxText: string;
             export let buttonTitle: string;
+            export let dontShowAgain: string;
         }
         export namespace customScreen {
             let name_3: string;
@@ -457,14 +463,21 @@ declare namespace messages {
     export namespace featureInfo {
         let activateToolTitle: string;
         let deactivateToolTitle: string;
+        namespace cluster {
+            export let headerTitle: string;
+            export let expand: string;
+            export let collapse: string;
+            let empty_2: string;
+            export { empty_2 as empty };
+        }
     }
     export namespace legend {
         let title_17: string;
         export { title_17 as title };
         let tooltip_5: string;
         export { tooltip_5 as tooltip };
-        let empty_2: string;
-        export { empty_2 as empty };
+        let empty_3: string;
+        export { empty_3 as empty };
         export let openInNew: string;
         export let defaultLabelText: string;
     }
@@ -495,8 +508,8 @@ declare namespace messages {
             export { title_21 as title };
             let tooltip_7: string;
             export { tooltip_7 as tooltip };
-            let empty_3: string;
-            export { empty_3 as empty };
+            let empty_4: string;
+            export { empty_4 as empty };
         }
         export namespace imprint {
             let title_22: string;

package/src/i18n/de.js

@@ -172,6 +172,7 @@ const messages = {
       checkBoxText:
         'Bitte akzeptieren sie die [Bedingungen](https://vc.systems/) um Fortzufahren',
       buttonTitle: 'Weiter',
+      dontShowAgain: 'Diese Nachricht nicht erneut anzeigen',
     },
     customScreen: {
       name: 'Benutzerdefinierter Screen',
@@ -325,6 +326,12 @@ const messages = {
   featureInfo: {
     activateToolTitle: 'Informationen abfragen',
     deactivateToolTitle: 'Informationen abfragen',
+    cluster: {
+      headerTitle: 'Gruppeninformationen',
+      expand: 'Informationsliste anzeigen',
+      collapse: 'Informationsliste minimieren',
+      empty: 'Keine Informationen verfügbar',
+    },
   },
   legend: {
     title: 'Legende',

package/src/i18n/en.d.ts

@@ -73,6 +73,11 @@ declare namespace messages {
             counter: string;
             counterSize: string;
         };
+        fileUpload: {
+            title: string;
+            divider: string;
+            browse: string;
+        };
         timePicker: {
             am: string;
             pm: string;
@@ -278,6 +283,7 @@ declare namespace messages {
             export { name_2 as name };
             export let checkBoxText: string;
             export let buttonTitle: string;
+            export let dontShowAgain: string;
         }
         export namespace customScreen {
             let name_3: string;
@@ -457,14 +463,21 @@ declare namespace messages {
     export namespace featureInfo {
         let activateToolTitle: string;
         let deactivateToolTitle: string;
+        namespace cluster {
+            export let headerTitle: string;
+            export let expand: string;
+            export let collapse: string;
+            let empty_2: string;
+            export { empty_2 as empty };
+        }
     }
     export namespace legend {
         let title_17: string;
         export { title_17 as title };
         let tooltip_5: string;
         export { tooltip_5 as tooltip };
-        let empty_2: string;
-        export { empty_2 as empty };
+        let empty_3: string;
+        export { empty_3 as empty };
         export let openInNew: string;
         export let defaultLabelText: string;
     }
@@ -495,8 +508,8 @@ declare namespace messages {
             export { title_21 as title };
             let tooltip_7: string;
             export { tooltip_7 as tooltip };
-            let empty_3: string;
-            export { empty_3 as empty };
+            let empty_4: string;
+            export { empty_4 as empty };
         }
         export namespace imprint {
             let title_22: string;

package/src/i18n/en.js

@@ -172,6 +172,7 @@ const messages = {
       checkBoxText:
         'Please accept the [Conditions](https://vc.systems/) to continue',
       buttonTitle: 'Continue',
+      dontShowAgain: "Don't show this message again",
     },
     customScreen: {
       name: 'Custom Screen',
@@ -325,6 +326,12 @@ const messages = {
   featureInfo: {
     activateToolTitle: 'Query information',
     deactivateToolTitle: 'Query information',
+    cluster: {
+      headerTitle: 'Group information',
+      expand: 'Show information list',
+      collapse: 'Collapse information list',
+      empty: 'No information available',
+    },
   },
   legend: {
     title: 'Legend',

package/src/legend/VcsLegend.vue

@@ -19,7 +19,7 @@
             <div v-if="item.type === LegendType.Image">
               <img
                 :src="$st(item.src)"
-                :alt="item.src"
+                :alt="$st(item.src)"
                 class="legend-image"
                 :title="item.tooltip"
               />

package/src/legend/legendHelper.d.ts

@@ -70,7 +70,7 @@ export function getImageSrcFromShape(image: import("ol/style/Image.js").Options)
  * @param {Array<LegendItem>} legend
  * @returns {LegendEntry}
  */
-export function createLayerLegendEntry(key: string, title: string, legend: Array<LegendItem>): LegendEntry;
+export function createLegendEntry(key: string, title: string, legend: Array<LegendItem>): LegendEntry;
 /**
  *
  * @param {import("../vcsUiApp.js").default} app

package/src/legend/legendHelper.js

@@ -117,7 +117,7 @@ export function getImageSrcFromShape(image) {
  * @param {Array<LegendItem>} legend
  * @returns {LegendEntry}
  */
-export function createLayerLegendEntry(key, title, legend) {
+export function createLegendEntry(key, title, legend) {
   const actions = [];
   legend.forEach((item) => {
     // XXX only one popout button allowed. Rethink if use case for multiple popout buttons comes up.
@@ -176,7 +176,7 @@ export function getLegendEntries(app) {
       const legend =
         layer.style?.properties?.legend ?? layer.properties?.legend;
       if (legend) {
-        const legendEntry = createLayerLegendEntry(key, title, legend);
+        const legendEntry = createLegendEntry(key, title, legend);
         entries.unshift(legendEntry);
       }
       if (layer.styleChanged) {
@@ -187,17 +187,60 @@ export function getLegendEntries(app) {
     }
   }
 
-  const destroyMapListener = app.maps.mapActivated.addEventListener(() =>
-    [...app.layers].forEach(syncLayerLegendEntries),
-  );
+  /**
+   * @param {import("@vcmap/core").VectorClusterGroup} group
+   */
+  function removeEntryForGroup(group) {
+    const groupName = group.name;
+    const entryIndex = entries.findIndex(({ key }) => key === groupName);
+    if (entryIndex >= 0) {
+      entries.splice(entryIndex, 1);
+    }
+  }
+
+  /**
+   * Handles addition or removal of VectorClusterGroups
+   * @param {import("@vcmap/core").Layer[]} layers
+   */
+  function syncVectorClusterGroups(layers) {
+    [...app.vectorClusterGroups].forEach(removeEntryForGroup);
+    const vectorClusterGroups = layers
+      .filter((layer) => layer.active && layer.isSupported)
+      .map((layer) => layer.vectorClusterGroup);
+    const uniqueVectorClusterGroups = [...new Set(vectorClusterGroups)];
+    uniqueVectorClusterGroups.forEach((groupName) => {
+      const group = app.vectorClusterGroups.getByKey(groupName);
+      if (group?.properties?.legend) {
+        const title = group.properties.title || group.name;
+        const { legend } = group.properties;
+        if (!entries.some(({ key }) => key === group.name)) {
+          const legendEntry = createLegendEntry(group.name, title, legend);
+          entries.unshift(legendEntry);
+        }
+      }
+    });
+  }
+
+  const destroyMapListener = app.maps.mapActivated.addEventListener(() => {
+    [...app.layers].forEach(syncLayerLegendEntries);
+    syncVectorClusterGroups([...app.layers]);
+  });
 
   const destroyChangedListener = app.layers.stateChanged.addEventListener(
-    syncLayerLegendEntries,
+    (l) => {
+      syncLayerLegendEntries(l);
+      syncVectorClusterGroups([...app.layers]);
+    },
   );
-  const destroyRemovedListener =
-    app.layers.removed.addEventListener(removeEntryForLayer);
+  const destroyRemovedListener = app.layers.removed.addEventListener((l) => {
+    removeEntryForLayer(l);
+    syncVectorClusterGroups([...app.layers]);
+  });
 
-  [...app.layers].forEach(syncLayerLegendEntries);
+  [...app.layers].forEach((l) => {
+    syncLayerLegendEntries(l);
+  });
+  syncVectorClusterGroups([...app.layers]);
 
   const destroy = () => {
     destroyMapListener();

package/src/localStorage.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @param {string} prefix The prefix to append to the key.
+ * @param {string} key The key to obtain the value.
+ * @returns {string|null} The value of the passed key, or null.
+ */
+export function getFromLocalStorage(prefix: string, key: string): string | null;
+/**
+ * Associates a value with the key in the LocalStorage.
+ * @param {string} prefix The prefix to append to the key.
+ * @param {string} key The key whose value must be defined.
+ * @param {string} value The value to associate with the key.
+ */
+export function setToLocalStorage(prefix: string, key: string, value: string): void;
+/**
+ * Removes a key from the LocalStorage.
+ * @param {string} prefix The prefix to append to the key.
+ * @param {string} key The key to remove.
+ */
+export function removeFromLocalStorage(prefix: string, key: string): void;
+/** The key, to which must be appended `_{moduleId}`, used in the LocalStorage to hide the SplashScreen when user checked the 'Remember me' checkbox. The value must be the hashed config. */
+export const hideSplashScreenKey: "hideSplashScreen";

package/src/localStorage.js

@@ -0,0 +1,51 @@
+import { getLogger } from '@vcsuite/logger';
+
+/** The key, to which must be appended `_{moduleId}`, used in the LocalStorage to hide the SplashScreen when user checked the 'Remember me' checkbox. The value must be the hashed config. */
+export const hideSplashScreenKey = 'hideSplashScreen';
+
+/**
+ * @param {string} prefix The prefix to append to the key.
+ * @param {string} key The key to obtain the value.
+ * @returns {string|null} The value of the passed key, or null.
+ */
+export function getFromLocalStorage(prefix, key) {
+  try {
+    return localStorage.getItem(`${prefix}_${key}`);
+  } catch (error) {
+    getLogger().warning(
+      `An error occured while getting the key "${key}": ${error}`,
+    );
+    return null;
+  }
+}
+
+/**
+ * Associates a value with the key in the LocalStorage.
+ * @param {string} prefix The prefix to append to the key.
+ * @param {string} key The key whose value must be defined.
+ * @param {string} value The value to associate with the key.
+ */
+export function setToLocalStorage(prefix, key, value) {
+  try {
+    localStorage.setItem(`${prefix}_${key}`, value);
+  } catch (error) {
+    getLogger().warning(
+      `An error occured while setting the key "${key}": ${error}`,
+    );
+  }
+}
+
+/**
+ * Removes a key from the LocalStorage.
+ * @param {string} prefix The prefix to append to the key.
+ * @param {string} key The key to remove.
+ */
+export function removeFromLocalStorage(prefix, key) {
+  try {
+    localStorage.removeItem(`${prefix}_${key}`);
+  } catch (error) {
+    getLogger().warning(
+      `An error occured while removing the key "${key}": ${error}`,
+    );
+  }
+}

package/src/manager/collectionManager/CollectionComponent.vue

@@ -19,8 +19,8 @@
 <script>
   import { computed, inject } from 'vue';
   import VcsExpansionPanel from '../../components/section/VcsExpansionPanel.vue';
-  import { createSelectionActions } from '../../components/lists/VcsList.vue';
   import CollectionComponentContent from './CollectionComponentContent.vue';
+  import { createSelectionActions } from '../../components/lists/listHelper.js';
 
   /**
    * @typedef {Object} FormSectionOptions

package/src/manager/collectionManager/CollectionComponentContent.vue

@@ -23,9 +23,8 @@
 <script>
   import { computed, inject } from 'vue';
   import { VSheet, VContainer } from 'vuetify/components';
-  import VcsList, {
-    createSelectionActions,
-  } from '../../components/lists/VcsList.vue';
+  import { createSelectionActions } from '../../components/lists/listHelper.js';
+  import VcsList from '../../components/lists/VcsList.vue';
   import VcsButton from '../../components/buttons/VcsButton.vue';
   import { moveItem } from './CollectionComponentList.vue';
 

package/src/manager/collectionManager/CollectionComponentList.vue

@@ -38,9 +38,8 @@
   import { computed, inject } from 'vue';
   import { IndexedCollection } from '@vcmap/core';
   import { VSheet } from 'vuetify/components';
-  import VcsList, {
-    createSelectionActions,
-  } from '../../components/lists/VcsList.vue';
+  import { createSelectionActions } from '../../components/lists/listHelper.js';
+  import VcsList from '../../components/lists/VcsList.vue';
   import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
   import VcsButton from '../../components/buttons/VcsButton.vue';
 

package/src/manager/collectionManager/CollectionComponentStandalone.vue

@@ -17,8 +17,8 @@
 
 <script>
   import { computed, getCurrentInstance, inject, ref } from 'vue';
+  import { createSelectionActions } from '../../components/lists/listHelper.js';
   import VcsFormSection from '../../components/section/VcsFormSection.vue';
-  import { createSelectionActions } from '../../components/lists/VcsList.vue';
   import CollectionComponentList from './CollectionComponentList.vue';
   import CollectionComponentContent from './CollectionComponentContent.vue';
 

package/src/manager/navbarManager.js

@@ -101,15 +101,20 @@ class NavbarManager extends ButtonManager {
    * @param {string} id
    * @param {boolean} [active]
    */
-  toggle(id, active = undefined) {
+  toggle(id, active) {
     check(id, String);
     if (this.has(id)) {
       const { action } = this.get(id);
-      if (active !== undefined) {
-        if (action?.active !== active) {
+      if (action.disabled) {
+        return;
+      }
+
+      if (active != null) {
+        const isActionActive = action.active && !action.background;
+        if (isActionActive !== active) {
           action.callback();
         }
-      } else if (action) {
+      } else {
         action.callback();
       }
     }

package/src/manager/toolbox/ToolboxManagerComponent.vue

@@ -1,6 +1,6 @@
 <template>
   <v-toolbar
-    v-if="toolboxOpen && orderedGroups.length > 0 && mdAndUp"
+    v-if="toolboxOpen && orderedGroups.length > 0 && smAndUp"
     class="vcs-toolbox mx-auto elevation-4 opacity-80 toolbox-manager-component"
     :class="{
       'rounded-b': !open,
@@ -90,6 +90,8 @@
    * @property {function(number):void} [selectCb]
    */
 
+  export const toolboxComponentId = 'toolbox';
+
   /**
    * @description ToolboxManager component rendering toolbox different kind of Toolbox buttons:
    * - Single toggle button
@@ -125,7 +127,7 @@
         });
 
       const zIndex = app.windowManager.addExternalIdToZIndex(
-        'toolbox',
+        toolboxComponentId,
         vcsAppSymbol,
       );
 
@@ -150,7 +152,7 @@
           .filter(filterFunc),
       );
 
-      const toolboxOpen = ref(true);
+      const toolboxOpen = app.toolboxManager.open;
       const toolboxToggleAction = {
         name: 'toolboxToggleAction',
         icon: '$vcsTools',
@@ -164,10 +166,10 @@
 
       function handleToolboxButton() {
         if (orderedGroups.value.length > 0) {
-          if (!app.navbarManager.has('toolbox')) {
+          if (!app.navbarManager.has(toolboxComponentId)) {
             app.navbarManager.add(
               {
-                id: 'toolbox',
+                id: toolboxComponentId,
                 action: toolboxToggleAction,
               },
               vcsAppSymbol,
@@ -175,7 +177,7 @@
             );
           }
         } else {
-          app.navbarManager.remove('toolbox');
+          app.navbarManager.remove(toolboxComponentId);
         }
       }
       handleToolboxButton();
@@ -184,28 +186,28 @@
 
       onUnmounted(() => {
         nameChangeListener();
-        app.windowManager.removeExternalIdFromZIndex('toolbox');
-        app.navbarManager.remove('toolbox');
+        app.windowManager.removeExternalIdFromZIndex(toolboxComponentId);
+        app.navbarManager.remove(toolboxComponentId);
       });
 
       watch(toolboxOpen, () => {
         if (toolboxOpen.value) {
-          app.windowManager.bringWindowToTop('toolbox');
+          app.windowManager.bringWindowToTop(toolboxComponentId);
         }
       });
 
       const open = ref(false);
       const bringToTop = () => {
-        app.windowManager.bringWindowToTop('toolbox');
+        app.windowManager.bringWindowToTop(toolboxComponentId);
       };
 
-      const { mdAndUp } = useDisplay();
+      const { smAndUp } = useDisplay();
       const fontSize = useFontSize();
       const toolboxHeight = computed(() => {
         return fontSize.value * 3 + 1;
       });
       return {
-        mdAndUp,
+        smAndUp,
         toolboxOpen,
         orderedGroups,
         zIndex,

package/src/manager/toolbox/ToolboxManagerComponent.vue.d.ts

@@ -1,6 +1,17 @@
+/**
+ * @typedef {Object} ToolboxButtonGroup
+ * @property {string} id
+ * @property {string} type
+ * @property {string} icon
+ * @property {string} title
+ * @property {Array<import("../buttonManager.js").ButtonComponent>} buttons
+ * @property {string} [selected]
+ * @property {function(number):void} [selectCb]
+ */
+export const toolboxComponentId: "toolbox";
 declare const _default: import("vue").DefineComponent<{}, {
-    mdAndUp: import("vue").Ref<boolean>;
-    toolboxOpen: import("vue").Ref<boolean>;
+    smAndUp: import("vue").Ref<boolean>;
+    toolboxOpen: any;
     orderedGroups: import("vue").ComputedRef<(import("../buttonManager.js", { with: { "resolution-mode": "import" } }).ButtonComponent | import("./toolboxManager.js", { with: { "resolution-mode": "import" } }).ToolboxComponent)[]>;
     zIndex: any;
     isDefaultToolbox: import("vue").ComputedRef<boolean>;

package/src/manager/toolbox/toolboxManager.d.ts

@@ -117,6 +117,11 @@ declare class ToolboxManager implements IToolboxManager {
      * @type {import("vue").UnwrapRef<string[]>}
      */
     componentIds: import("vue").UnwrapRef<string[]>;
+    /**
+     * reative boolean to show or hide the toolbox
+     * @type {import("vue").Ref<boolean>}
+     */
+    open: import("vue").Ref<boolean>;
     /**
      * @type {Map<string, ToolboxComponent>}
      * @private

package/src/manager/toolbox/toolboxManager.js

@@ -1,7 +1,7 @@
 import { VcsEvent } from '@vcmap/core';
 import { check, maybe, ofEnum, oneOf, optional } from '@vcsuite/check';
 import { v4 as uuidv4 } from 'uuid';
-import { reactive, shallowReactive } from 'vue';
+import { reactive, ref, shallowReactive } from 'vue';
 import { vcsAppSymbol } from '../../pluginHelper.js';
 import ButtonManager from '../buttonManager.js';
 import { ActionPattern } from '../../components/lists/VcsActionList.vue';
@@ -207,6 +207,12 @@ class ToolboxManager {
      * @type {import("vue").UnwrapRef<string[]>}
      */
     this.componentIds = reactive([]);
+
+    /**
+     * reative boolean to show or hide the toolbox
+     * @type {import("vue").Ref<boolean>}
+     */
+    this.open = ref(true);
     /**
      * @type {Map<string, ToolboxComponent>}
      * @private

package/src/manager/window/WindowComponent.vue

@@ -9,6 +9,7 @@
     :class="{
       rounded: !isDocked,
       marginToTop: isDocked || !isChild,
+      marginToTopTablet: isTabletWithOpenToolbar,
       'rounded-be': isDynamicLeft,
       'rounded-bs': isDynamicRight,
     }"
@@ -41,11 +42,15 @@
   .marginToTop {
     margin-top: 2px;
   }
+  .marginToTopTablet {
+    margin-top: calc(var(--v-vcs-font-size) * 3 + 6px);
+  }
 </style>
 
 <script>
   import { computed, inject, provide, ref } from 'vue';
   import { VDivider, VSheet } from 'vuetify/components';
+  import { useDisplay } from 'vuetify';
   import { WindowSlot } from './windowManager.js';
 
   /**
@@ -95,6 +100,10 @@
       const isDocked = computed(
         () => props.slotWindow.value !== WindowSlot.DETACHED,
       );
+      const display = useDisplay();
+      const isTabletWithOpenToolbar = computed(
+        () => app.toolboxManager.open.value && display.sm.value,
+      );
       const isDockedLeft = computed(() => {
         return (
           props.slotWindow.value === WindowSlot.STATIC ||
@@ -156,6 +165,7 @@
         isDynamic,
         isChild,
         isDocked,
+        isTabletWithOpenToolbar,
         isDynamicLeft: isDockedLeft,
         isDynamicRight: isDockedRight,
         isDraggable,