@vcmap/ui 6.1.0-rc.7 → 6.1.1

package/src/legend/legendHelper.js

@@ -1,6 +1,12 @@
 import { getShapeFromOptions } from '@vcmap/core';
 import { reactive } from 'vue';
 
+/**
+ * Symbol set a volatile legend property on a layer or style
+ * @type {symbol}
+ */
+export const legendSymbol = Symbol('legend');
+
 /**
  * @enum {string}
  * @property {string} Image - an image
@@ -109,6 +115,26 @@ export function getImageSrcFromShape(image) {
  * @property {Array<LegendItem>} legend - legend properties
  */
 
+/**
+ * @param {import("@vcmap/core").StyleItem|undefined} style
+ * @returns {Array<LegendItem>|undefined}
+ */
+export function getStyleLegend(style) {
+  return style?.[legendSymbol] ?? style?.properties?.legend;
+}
+
+/**
+ * @param {import("@vcmap/core").Layer|undefined} layer
+ * @returns {Array<LegendItem>|undefined}
+ */
+export function getLayerLegend(layer) {
+  return (
+    getStyleLegend(layer?.style) ??
+    layer?.[legendSymbol] ??
+    layer?.properties?.legend
+  );
+}
+
 /**
  *
  * @param {import("../vcsUiApp.js").default} app
@@ -149,8 +175,7 @@ export function getLegendEntries(app) {
     if (layer.active && layer.isSupported(app.maps.activeMap)) {
       const key = layer.name;
       const title = layer.properties.title || layer.name;
-      const legend =
-        layer.style?.properties?.legend ?? layer.properties?.legend;
+      const legend = getLayerLegend(layer);
       if (legend) {
         const legendEntry = { key, title, legend, open: true };
         entries.unshift(legendEntry);
@@ -186,7 +211,7 @@ export function getLegendEntries(app) {
     const uniqueVectorClusterGroups = [...new Set(vectorClusterGroups)];
     uniqueVectorClusterGroups.forEach((groupName) => {
       const group = app.vectorClusterGroups.getByKey(groupName);
-      if (group?.properties?.legend) {
+      if (group?.[legendSymbol] ?? group?.properties?.legend) {
         const title = group.properties.title || group.name;
         const { legend } = group.properties;
         if (!entries.some(({ key }) => key === group.name)) {

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -35,6 +35,7 @@
           <div class="d-flex align-center justify-space-between gc-1 w-100">
             <VcsToolButton
               v-for="{ id, action } in orderedButtons"
+              :data-action-name="action.name"
               :key="id"
               :tooltip="action.title"
               :icon="action.icon"

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -6,6 +6,7 @@
   >
     <VcsToolButton
       :key="group.action.tools[group.action.currentIndex].name"
+      :data-action-name="group.action.tools[group.action.currentIndex].name"
       :tooltip="group.action.tools[group.action.currentIndex].title"
       :icon="group.action.tools[group.action.currentIndex].icon"
       :active="group.action.active"
@@ -55,6 +56,7 @@
           <div class="d-flex align-center justify-space-between gc-1 w-100">
             <VcsToolButton
               v-for="(item, index) in group.action.tools"
+              :data-action-name="item.name"
               :key="`${item.name}-${index}`"
               :tooltip="item.title"
               :icon="item.icon"

package/src/manager/toolbox/ToolboxManagerComponent.vue

@@ -16,6 +16,7 @@
       <div
         class="d-flex align-center justify-space-between w-100"
         v-for="group in orderedGroups"
+        :data-toolbox-id="group.id"
         :key="group.id"
       >
         <ToolboxActionGroup

package/src/manager/window/windowManager.d.ts

@@ -76,7 +76,7 @@ export function isSlotPosition(windowPosition: WindowPosition): boolean;
  *   headerComponent?: import("vue").Component<T, unknown, unknown>,
  *   state : Partial<WindowState>,
  *   position : Partial<WindowPositionOptions>,
- *   slot: WindowSlot,
+ *   slot: import("vue").Ref<WindowSlot>,
  *   props: T,
  *   provides: Record<string, unknown>,
  *   zIndex: import("vue").ComputedGetter<number>
@@ -249,7 +249,7 @@ export type WindowComponent<T extends Object = Object> = {
     headerComponent?: import("vue").Component<T, unknown, unknown>;
     state: Partial<WindowState>;
     position: Partial<WindowPositionOptions>;
-    slot: WindowSlot;
+    slot: import("vue").Ref<WindowSlot>;
     props: T;
     provides: Record<string, unknown>;
     zIndex: import("vue").ComputedGetter<number>;

package/src/manager/window/windowManager.js

@@ -170,7 +170,7 @@ export function isSlotPosition(windowPosition) {
  *   headerComponent?: import("vue").Component<T, unknown, unknown>,
  *   state : Partial<WindowState>,
  *   position : Partial<WindowPositionOptions>,
- *   slot: WindowSlot,
+ *   slot: import("vue").Ref<WindowSlot>,
  *   props: T,
  *   provides: Record<string, unknown>,
  *   zIndex: import("vue").ComputedGetter<number>
@@ -545,15 +545,17 @@ class WindowManager {
    * @private
    */
   _cachePosition(windowComponent) {
-    const initialWindowPosition = windowPositionFromOptions(
-      windowComponent.initialPositionOptions,
-    );
-    if (
-      !compareWindowPositions(initialWindowPosition, windowComponent.position)
-    ) {
-      this._windowPositionsCache.set(windowComponent.id, {
-        ...windowComponent.position,
-      });
+    if (windowComponent.slot.value === WindowSlot.DETACHED) {
+      const initialWindowPosition = windowPositionFromOptions(
+        windowComponent.initialPositionOptions,
+      );
+      if (
+        !compareWindowPositions(initialWindowPosition, windowComponent.position)
+      ) {
+        this._windowPositionsCache.set(windowComponent.id, {
+          ...windowComponent.position,
+        });
+      }
     }
   }
 
@@ -744,12 +746,11 @@ class WindowManager {
    * @param {string|vcsAppSymbol} owner
    */
   removeOwner(owner) {
-    const componentIds = [...this.componentIds];
-    componentIds.forEach((id) => {
-      const { state } = this.get(id);
-      if (owner === state.owner) {
-        this.remove(id);
-      }
+    const toRemove = this.componentIds.filter(
+      (id) => this.get(id)?.state?.owner === owner,
+    );
+    toRemove.forEach((id) => {
+      this.remove(id);
     });
     this._externalZIndexIds.forEach((externalOwner, id) => {
       if (externalOwner === owner) {

package/src/navigation/MapNavigation.vue

@@ -57,7 +57,7 @@
         :disabled="movementApiCallsDisabled"
       />
     </v-row>
-    <template v-if="smAndUp && !mobileLandscape">
+    <template v-if="!mobileLandscape">
       <v-row justify="center">
         <OrientationToolsButton
           v-if="showOverviewButton"
@@ -188,6 +188,8 @@
           options.keyEvents === true &&
           options.apiCalls === true &&
           options.pointerEvents === true;
+
+        stopRotation = null;
       });
     return {
       action,

package/src/navigation/overviewMap.js

@@ -276,7 +276,7 @@ class OverviewMap {
         if (activeOnStartup && !hide && !this._active) {
           await this.activate();
         } else if (hide && this._active) {
-          await this.deactivate();
+          this.deactivate();
         }
         if (scaleFactor) {
           this._scaleFactor = scaleFactor;

package/src/notifier/NotifierComponent.vue

@@ -3,6 +3,7 @@
     <v-snackbar
       v-for="notification in notifications"
       :key="notification.id"
+      :data-notification-id="notification.id"
       v-model="notification.open"
       :timeout="notification.timeout"
       class="vcs-notifier"

package/src/search/ResultsComponent.vue

@@ -23,6 +23,7 @@
   import { inject, onUnmounted, ref, computed } from 'vue';
   import { VList } from 'vuetify/components';
   import { useDisplay } from 'vuetify';
+  import { getLogger } from '@vcsuite/logger';
   import ResultItem from './ResultItem.vue';
 
   /**
@@ -92,7 +93,15 @@
           const [index] = value;
           if (index >= 0) {
             const item = items.value[index];
-            item.clicked();
+            const p = item.clicked();
+            if (p instanceof Promise) {
+              p.catch((e) => {
+                getLogger('ResultComponent.vue').error(
+                  'Result item failed on click',
+                  e,
+                );
+              });
+            }
           }
         },
       });

package/src/search/SearchComponent.vue

@@ -149,12 +149,17 @@
             suggesting.value = requestId;
             queryPreSuggestion = trimmedInput;
             selectedSuggestion.value = -1;
-            app.search.suggest(trimmedInput).then((s) => {
-              if (suggesting.value === requestId) {
-                suggestions.value = s;
-                suggesting.value = '';
-              }
-            });
+            app.search
+              .suggest(trimmedInput)
+              .then((s) => {
+                if (suggesting.value === requestId) {
+                  suggestions.value = s;
+                  suggesting.value = '';
+                }
+              })
+              .catch(() => {
+                getLogger('SearchComponent.vue').warn('suggestion failed');
+              });
           }, 200);
         } else {
           selectedSuggestion.value = -1;

package/src/search/search.js

@@ -18,6 +18,7 @@ import {
   getDefaultPrimaryColor,
   getColorByKey,
 } from '../vuePlugins/vuetify.js';
+import { getColoredMapIcon } from '../components/icons/+all.js';
 import { getViewpointFromFeature } from '../actions/actionHelper.js';
 
 /**
@@ -40,20 +41,6 @@ import { getViewpointFromFeature } from '../actions/actionHelper.js';
  * @property {function():void} destroy
  */
 
-/**
- * @param {string} color
- * @returns {import("ol/style/Icon").Options}
- */
-function getPointResultIcon(color) {
-  return {
-    src: `data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' id='icon_24_poi' width='24' height='23.994' viewBox='0 0 24 23.994' sodipodi:docname='mapIcon.svg'%3E%3Cg id='Gruppe_1972' transform='translate(-571 -609.477)'%3E%3Cpath id='Pfad_773' d='M583,611a8.009,8.009,0,0,0-8,8c0,5.314,6.952,13.32,7.248,13.658a1,1,0,0,0,1.5,0c.3-.338,7.248-8.344,7.248-13.658A8.009,8.009,0,0,0,583,611Zm0,19.444c-2.18-2.685-6-8.09-6-11.444a6,6,0,0,1,12,0C589,622.354,585.18,627.759,583,630.444Z' fill='currentColor' /%3E%3Cpath id='Pfad_774' d='M583,615a4,4,0,1,0,4,4A4,4,0,0,0,583,615Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,583,621Z' fill='currentColor' /%3E%3C/g%3E%3Cpath fill='${encodeURIComponent(
-      color,
-    )}' d='M 11.672998,20.526286 C 8.5115524,16.526958 6.4310003,12.714969 6.0702695,10.260963 6.0109099,9.8571482 6.0115821,9.1201807 6.0716855,8.7084104 6.4424582,6.1682348 8.3335069,4.1603103 10.828528,3.6575721 c 1.904966,-0.383844 3.881822,0.1903514 5.289639,1.5364231 0.993092,0.9495349 1.610829,2.1488769 1.810148,3.5144152 0.0601,0.4117703 0.06077,1.1487378 0.0014,1.5525526 -0.357076,2.429138 -2.337816,6.081898 -5.487559,10.119822 -0.224045,0.287223 -0.415188,0.530536 -0.424763,0.540696 -0.0096,0.01016 -0.16456,-0.167678 -0.344411,-0.395195 z m 0.990366,-7.047968 c 0.894914,-0.146674 1.762065,-0.627065 2.349286,-1.301476 0.86707,-0.995812 1.194989,-2.3427819 0.880571,-3.6170541 -0.379849,-1.5394474 -1.596396,-2.6842781 -3.173401,-2.9863277 -0.368703,-0.070619 -1.070937,-0.070619 -1.43964,0 C 9.7056173,5.875042 8.48604,7.0227247 8.1067793,8.5597879 7.8410265,9.6368274 8.0329903,10.787029 8.6317551,11.705317 c 0.5717674,0.876885 1.4205679,1.474277 2.4457369,1.721329 0.47704,0.114961 1.079877,0.134602 1.585872,0.05167 z' id='path1432' /%3E%3C/svg%3E`,
-    scale: 1,
-    color,
-  };
-}
-
 /**
  * sets up result layer for displaying search results
  * @param {import("@src/vcsUiApp.js").default} app
@@ -75,7 +62,7 @@ function setupSearchResultLayer(app) {
   app.layers.add(resultLayer);
 
   const style = new VectorStyleItem({
-    image: getPointResultIcon(getDefaultPrimaryColor(app)),
+    image: getColoredMapIcon(getDefaultPrimaryColor(app)),
     fill: {
       color: 'rgba(237, 237, 237, 0.1)',
     },
@@ -89,7 +76,7 @@ function setupSearchResultLayer(app) {
   function setResultColor() {
     const color = getColorByKey(app, 'primary');
     style.stroke?.setColor(color);
-    style.image = new Icon(getPointResultIcon(color));
+    style.image = new Icon(getColoredMapIcon(color));
     resultLayer.forceRedraw();
   }
 

package/src/state.d.ts

@@ -66,7 +66,8 @@ export type AppState = {
 export type CachedAppState = AppState;
 /**
  * The URL state of the app is an array. To null parameters, pass in 0 instead.
- * The first entry is the viewpoint state, the second the active map name
+ * The first entry is the viewpoint state or an extent state
+ * The second the active map name
  * The third is an array of modules to apply the state to
  * the fourth is an array of layer states
  * the fifth is an array of plugin states

package/src/state.js

@@ -66,7 +66,8 @@ import {
 
 /**
  * The URL state of the app is an array. To null parameters, pass in 0 instead.
- * The first entry is the viewpoint state, the second the active map name
+ * The first entry is the viewpoint state or an extent state
+ * The second the active map name
  * The third is an array of modules to apply the state to
  * the fourth is an array of layer states
  * the fifth is an array of plugin states

package/src/uiConfig.d.ts

@@ -63,6 +63,10 @@ export type UiConfigObject = {
      * - an optional flag whether to activate feature info on startup (default active)
      */
     startingFeatureInfo?: boolean | undefined;
+    /**
+     * - an optional flag whether to enable deep picking via right click context menu (default active)
+     */
+    enableDeepPicking?: boolean | undefined;
     /**
      * - mouse event, when position display is updated. Either 'click' (default) or 'move'.
      */
@@ -229,6 +233,7 @@ export type UiConfigObject = {
  * @property {string} [appTitle] - an optional title to display next to the company logo
  * @property {string} [primaryColor] - an optional primary color to use in all themes, can be overwritten by `vuetifyTheme`
  * @property {boolean} [startingFeatureInfo] - an optional flag whether to activate feature info on startup (default active)
+ * @property {boolean} [enableDeepPicking] - an optional flag whether to enable deep picking via right click context menu (default active)
  * @property {string} [positionDisplayEventType] - mouse event, when position display is updated. Either 'click' (default) or 'move'.
  * @property {string} [obliqueFooterTemplate] - A template for rendering information of the current image in oblique mode, e.g. '{{ name }}' printing the image's name
  * @property {string} [helpBaseUrl='https://help.vc.systems/'] - an optional URL to a help landing page
@@ -313,6 +318,10 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
          * - an optional flag whether to activate feature info on startup (default active)
          */
         readonly startingFeatureInfo?: boolean | undefined;
+        /**
+         * - an optional flag whether to enable deep picking via right click context menu (default active)
+         */
+        readonly enableDeepPicking?: boolean | undefined;
         /**
          * - mouse event, when position display is updated. Either 'click' (default) or 'move'.
          */

package/src/uiConfig.js

@@ -54,6 +54,7 @@ import { reactive, readonly, ref } from 'vue';
  * @property {string} [appTitle] - an optional title to display next to the company logo
  * @property {string} [primaryColor] - an optional primary color to use in all themes, can be overwritten by `vuetifyTheme`
  * @property {boolean} [startingFeatureInfo] - an optional flag whether to activate feature info on startup (default active)
+ * @property {boolean} [enableDeepPicking] - an optional flag whether to enable deep picking via right click context menu (default active)
  * @property {string} [positionDisplayEventType] - mouse event, when position display is updated. Either 'click' (default) or 'move'.
  * @property {string} [obliqueFooterTemplate] - A template for rendering information of the current image in oblique mode, e.g. '{{ name }}' printing the image's name
  * @property {string} [helpBaseUrl='https://help.vc.systems/'] - an optional URL to a help landing page

package/src/vcsUiApp.js

@@ -656,7 +656,13 @@ class VcsUiApp extends VcsApp {
         const layer = this.layers.getByKey(layerState.name);
         if (layer) {
           if (layerState.active) {
-            layer.activate();
+            layer.activate().catch((e) => {
+              getLogger().warn(
+                'Failed to activate cached app state. layer failed: ',
+                layer.name,
+              );
+              getLogger().error(e);
+            });
           } else {
             layer.deactivate();
           }