@vcmap/ui 6.1.0-rc.7 → 6.1.0

package/src/actions/deepPickingAction.js

@@ -0,0 +1,399 @@
+import {
+  cartesianToMercator,
+  FeatureProviderInteraction,
+  getFeatureFromPickObject,
+  isProvidedClusterFeature,
+  isProvidedFeature,
+  markVolatile,
+  maxZIndex,
+  mercatorProjection,
+  mercatorToCartesian,
+  moduleIdSymbol,
+  originalFeatureSymbol,
+  vcsLayerName,
+  vectorClusterGroupName,
+  VectorLayer,
+  VectorStyleItem,
+  volatileModuleId,
+} from '@vcmap/core';
+import { Feature } from 'ol';
+import { Point, LineString } from 'ol/geom.js';
+import { Icon } from 'ol/style.js';
+import { Cartesian3, Ray } from '@vcmap-cesium/engine';
+import { watch } from 'vue';
+import { getColorByKey } from '../vuePlugins/vuetify.js';
+import ClusterFeatureComponent from '../featureInfo/ClusterFeatureComponent.vue';
+import { WindowSlot } from '../manager/window/windowManager.js';
+import { vcsAppSymbol } from '../pluginHelper.js';
+import {
+  featureInfoViewSymbol,
+  getFeatureInfoViewForFeature,
+  getGroupedFeatureList,
+} from '../featureInfo/featureInfo.js';
+import { getColoredMapIcon } from '../components/icons/+all.js';
+
+const scratchCartesian = new Cartesian3();
+const pickingZOffset = 10.0;
+const iconScale = 1.5;
+
+export const deepPickingWindowId = 'deep-picking-window';
+
+/**
+ * @param {import("@vcmap/ui").VcsUiApp} app
+ * @returns {{ layer: import("@vcmap/core").VectorLayer, destroy: () => void }}
+ */
+export function setupDeepPickingLayer(app) {
+  const layer = new VectorLayer({
+    zIndex: maxZIndex,
+    projection: mercatorProjection.toJSON(),
+    vectorProperties: {
+      altitudeMode: 'absolute',
+      eyeOffset: [0, 0, -200],
+    },
+    allowPicking: false,
+  });
+  markVolatile(layer);
+  app.layers.add(layer);
+  layer.activate();
+
+  const style = new VectorStyleItem({
+    image: {
+      ...getColoredMapIcon(getColorByKey(app, 'primary')),
+      scale: iconScale,
+    },
+    fill: {
+      color: 'rgba(237, 237, 237, 0.1)',
+    },
+    stroke: {
+      color: getColorByKey(app, 'primary'),
+      width: 5,
+    },
+  });
+  layer.setStyle(style);
+
+  function setIconColor() {
+    const color = getColorByKey(app, 'primary');
+    style.stroke?.setColor(color);
+    style.image = new Icon({ ...getColoredMapIcon(color), scale: iconScale });
+    layer.forceRedraw();
+  }
+
+  const themChangedListener = app.themeChanged.addEventListener(setIconColor);
+
+  const destroy = () => {
+    layer.deactivate();
+    app.layers.remove(layer);
+    layer.destroy();
+    themChangedListener();
+  };
+
+  return { layer, destroy };
+}
+
+/**
+ * Retrieves features from an OpenLayers map at a given pixel.
+ * @param {import("ol/Map.js").OLMap} map
+ * @param {[number, number]} pixel
+ * @param {number} hitTolerance
+ * @param {number} drill
+ * @returns {import("ol").Feature[]}
+ */
+function getFeaturesFromOlMap(map, pixel, hitTolerance, drill) {
+  const features = [];
+  let i = 0;
+  map.forEachFeatureAtPixel(
+    pixel,
+    (feat) => {
+      if (
+        feat &&
+        (feat.get('olcs_allowPicking') == null ||
+          feat.get('olcs_allowPicking') === true)
+      ) {
+        const feature = feat[originalFeatureSymbol] || feat;
+        if (!feature[vectorClusterGroupName]) {
+          features.push(feature);
+        }
+      }
+      i += 1;
+      return i >= drill;
+    },
+    { hitTolerance },
+  );
+
+  return features;
+}
+
+/**
+ * Retrieves features from a Cesium scene at a given window position.
+ * @param {import("@vcmap-cesium/engine").Scene} scene
+ * @param {import("@vcmap-cesium/engine").Ray} ray
+ * @param {number} hitTolerance
+ * @param {number} drill
+ * @returns {Promise<{ features: import("@vcmap/core").EventFeature[], minZ: number }>}
+ */
+async function getFeaturesFromScene(scene, ray, hitTolerance, drill) {
+  const { depthTestAgainstTerrain } = scene.globe;
+  scene.globe.depthTestAgainstTerrain = false;
+
+  let minZ = 0;
+  const objects = await scene.drillPickFromRay(
+    ray,
+    drill,
+    undefined,
+    hitTolerance,
+  );
+
+  scene.globe.depthTestAgainstTerrain = depthTestAgainstTerrain;
+
+  const features = objects
+    .map(({ object, position }) => {
+      let feature;
+      if (object) {
+        if (position) {
+          const z = cartesianToMercator(position)[2];
+          minZ = Math.min(minZ, z);
+        }
+        feature = getFeatureFromPickObject(object);
+        if (feature?.[vectorClusterGroupName]) {
+          const clusterFeatures = feature.get('features');
+          return [...clusterFeatures];
+        }
+      }
+      return feature;
+    })
+    .filter((f, i, a) => !!f && a.indexOf(f) === i);
+  return { features, minZ };
+}
+
+/**
+ * @param {import("@vcmap/core").InteractionEvent} event
+ * @param {number} [hitTolerance=10]
+ * @param {number} [drillLimit]
+ * @returns {Promise<{ features: import("@vcmap/core").EventFeature[], minZ: number }>}
+ */
+async function getDeepPickingFeatures(
+  event,
+  hitTolerance = 10,
+  drillLimit = undefined,
+) {
+  let features = [];
+  let minZ = 0;
+  if (
+    event.map.className === 'OpenlayersMap' ||
+    event.map.className === 'ObliqueMap'
+  ) {
+    features = getFeaturesFromOlMap(
+      event.map.olMap,
+      [event.windowPosition.x, event.windowPosition.y],
+      hitTolerance,
+      drillLimit,
+    );
+  } else if (event.map.className === 'CesiumMap') {
+    const cesiumMap = event.map;
+    const scene = cesiumMap.getScene();
+
+    if (!scene) {
+      return features;
+    }
+
+    const [x, y, z] = event.position;
+    const origin = mercatorToCartesian([
+      x,
+      y,
+      Number.isNaN(z) ? pickingZOffset : z + pickingZOffset,
+    ]);
+    const direction = Cartesian3.normalize(
+      Cartesian3.negate(origin, scratchCartesian),
+      scratchCartesian,
+    );
+    const ray = new Ray(origin, direction);
+
+    ({ features, minZ } = await getFeaturesFromScene(
+      scene,
+      ray,
+      hitTolerance,
+      drillLimit,
+    ));
+  }
+
+  if (
+    event.feature &&
+    !event.feature[isProvidedFeature] && // provided features will be provided again.
+    !features.includes(event.feature)
+  ) {
+    features.unshift(event.feature);
+  }
+
+  return { features, minZ };
+}
+
+/**
+ * @param {import("@vcmap/core").AbstractInteraction} interaction
+ * @param {import("@vcmap/core").InteractionEvent} event
+ * @returns {Promise<import("@vcmap/core").EventFeature[]>}
+ */
+async function getInteractionFeatures(interaction, event) {
+  const pipedEvent = await interaction.pipe({
+    ...event,
+    feature: undefined,
+  });
+  const { feature } = pipedEvent;
+  if (feature) {
+    if (feature[isProvidedClusterFeature]) {
+      return feature.get('features');
+    }
+    return [feature];
+  }
+  return [];
+}
+
+/**
+ * @returns {{ collectFeatures: (event: import("@vcmap/core").InteractionEvent) => Promise<{ features: import("@vcmap/core").EventFeature[], minZ: number }>, destroy: () => void}}
+ */
+function createCollectFeatures() {
+  const featureProviderInteraction = new FeatureProviderInteraction();
+  return {
+    async collectFeatures(event) {
+      const { features: deepPickingFeatures, minZ } =
+        await getDeepPickingFeatures(event);
+      return {
+        features: [
+          ...deepPickingFeatures,
+          ...(await getInteractionFeatures(featureProviderInteraction, event)),
+        ],
+        minZ,
+      };
+    },
+    destroy() {
+      featureProviderInteraction.destroy();
+    },
+  };
+}
+
+/**
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("ol/Feature").default} f
+ * @returns {boolean}
+ */
+function featurePredicate(app, f) {
+  if (f[featureInfoViewSymbol]) {
+    return true;
+  }
+
+  const l = app.layers.getByKey(f[vcsLayerName]);
+  if (l?.[moduleIdSymbol] === volatileModuleId) {
+    return !!getFeatureInfoViewForFeature(app, f);
+  }
+
+  return !!l;
+}
+
+/**
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("@vcmap/core").VectorLayer} layer
+ * @param {(event: import("@vcmap/core").InteractionEvent) => Promise<import("@vcmap/core").EventFeature[]>} collectFeatures
+ * @param {import("@vcmap/core").InteractionEvent} event
+ * @returns {import("./actionHelper.js").VcsAction}
+ */
+export function createDeepPickingAction(app, layer, collectFeatures, event) {
+  return {
+    name: 'featureInfo.deepPicking.title',
+    icon: '$vcsInfo',
+    async callback() {
+      const { features, minZ } = await collectFeatures(event);
+      const { items, groups } = getGroupedFeatureList(
+        app,
+        features.filter((f) => featurePredicate(app, f)),
+        event.position,
+      );
+
+      if (app.windowManager.has(deepPickingWindowId)) {
+        app.windowManager.remove(deepPickingWindowId);
+      }
+
+      app.windowManager.add(
+        {
+          id: deepPickingWindowId,
+          component: ClusterFeatureComponent,
+          props: {
+            items,
+            groups,
+          },
+          state: {
+            headerTitle: 'featureInfo.deepPicking.headerTitle',
+            headerIcon: '$vcsInfo',
+          },
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        vcsAppSymbol,
+      );
+
+      const windowListener = app.windowManager.removed.addEventListener(
+        ({ id: windowId }) => {
+          if (windowId === deepPickingWindowId) {
+            layer.removeAllFeatures();
+            windowListener();
+          }
+        },
+      );
+
+      const [x, y, z] = event.position;
+      const coordinate = [
+        x,
+        y,
+        Number.isNaN(z) ? pickingZOffset : z + pickingZOffset,
+      ];
+      const pickFeature = new Feature({
+        geometry: new Point(coordinate),
+      });
+      const rayFeature = new Feature({
+        geometry: new LineString([coordinate, [x, y, minZ]]),
+      });
+      layer.addFeatures([pickFeature, rayFeature]);
+    },
+  };
+}
+
+/**
+ * This adds deep picking action to the context menu, if not disabled in uiConfig
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {() => void}
+ */
+export function setupDeepPicking(app) {
+  const { layer, destroy: destroyLayer } = setupDeepPickingLayer(app);
+  const { collectFeatures, destroy: destroyCollectFeatures } =
+    createCollectFeatures();
+
+  const handler = async (event) => {
+    if (event.windowPosition) {
+      return [createDeepPickingAction(app, layer, collectFeatures, event)];
+    }
+    return [];
+  };
+
+  if (app.uiConfig.enableDeepPicking !== false) {
+    app.contextMenuManager.addEventHandler(handler, vcsAppSymbol);
+  }
+
+  const stopWatching = watch(
+    () => app.uiConfig.config.enableDeepPicking,
+    (value, oldValue) => {
+      if (value !== false) {
+        if (!(oldValue !== false)) {
+          app.contextMenuManager.addEventHandler(handler, vcsAppSymbol);
+        }
+      } else {
+        app.contextMenuManager.removeHandler(handler);
+      }
+    },
+  );
+
+  return () => {
+    stopWatching();
+    destroyLayer();
+    destroyCollectFeatures();
+    layer.deactivate();
+    layer.destroy();
+    app.layers.remove(layer);
+  };
+}

package/src/application/VcsApp.vue

@@ -79,6 +79,7 @@
     createMapButtonAction,
     createToggleAction,
   } from '../actions/actionHelper.js';
+  import { setupDeepPicking } from '../actions/deepPickingAction.js';
   import VcsSettings from './VcsSettings.vue';
   import { WindowSlot } from '../manager/window/windowManager.js';
   import CollectionManager from '../manager/collectionManager/CollectionManager.vue';
@@ -814,6 +815,7 @@
       const destroyDisplayQualityListener = setupUiConfigDisplayQuality(app);
       const { attributionEntries, attributionAction, destroyAttributions } =
         setupAttributions(app);
+      const destroyDeepPicking = setupDeepPicking(app);
 
       let pluginMountedListener;
       onMounted(() => {
@@ -853,6 +855,7 @@
         destroyThemingListener();
         destroyDisplayQualityListener();
         destroyAttributions();
+        destroyDeepPicking();
       });
 
       const { smAndUp, xs } = useDisplay();

package/src/application/VcsApp.vue.d.ts

@@ -112,6 +112,10 @@ declare const _default: import("vue").DefineComponent<{
          * - 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/application/VcsAttributionsFooter.vue

@@ -15,6 +15,7 @@
     </div>
     <VcsButton
       class="flex-shrink-0"
+      :data-action-name="attributionAction.name"
       :key="attributionAction.name"
       :tooltip="attributionAction.title"
       :icon="attributionAction.icon"

package/src/application/VcsContainer.vue

@@ -22,6 +22,7 @@
     </template>
     <VcsButton
       v-if="!smAndUp"
+      :data-action-name="attributionAction.name"
       :key="attributionAction.name"
       :tooltip="attributionAction.title"
       icon="mdi-copyright"

package/src/application/VcsContainer.vue.d.ts

@@ -26,6 +26,10 @@ declare const _default: import("vue").DefineComponent<{
          * - 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/application/VcsMobileMenuList.vue

@@ -1,5 +1,5 @@
 <script setup>
-  import { computed, inject } from 'vue';
+  import { inject } from 'vue';
   import { VDivider, VList, VListItem } from 'vuetify/components';
   import {
     ButtonLocation,
@@ -9,56 +9,48 @@
   import VcsTextPageFooter from './VcsTextPageFooter.vue';
   import { getDataProtection, getImprint } from './uiConfigHelper.js';
   import { toolboxComponentId } from '../manager/toolbox/ToolboxManagerComponent.vue';
-  import { defaultContentTreeComponentId } from '../contentTree/contentTreeCollection.js';
-  import { legendComponentId } from './VcsApp.vue';
 
   const app = inject('vcsApp');
 
-  const mobileButtonComponents = computed(() =>
-    app.navbarManager.componentIds
-      .map((id) => app.navbarManager.get(id))
-      .filter((buttonComponent) => {
-        return buttonComponent[deviceSymbol].mobile;
-      }),
-  );
-
-  const getActions = (location) =>
-    computed(() =>
-      getActionsByLocation(
-        mobileButtonComponents.value,
-        location,
-        [...app.plugins].map((p) => p.name),
-      ),
-    );
+  const mobileButtonComponents = app.navbarManager.componentIds
+    .map((id) => app.navbarManager.get(id))
+    .filter((buttonComponent) => {
+      return buttonComponent[deviceSymbol].mobile;
+    });
 
   // Actions from the content overflow are put in Menu
-  const defaultContentTreeComponentIdAction = app.navbarManager.get(
-    defaultContentTreeComponentId,
-  ).action;
-  const legendComponentIdAction =
-    app.navbarManager.get(legendComponentId).action;
-  const contentOverflowActions = computed(() => {
-    return getActions(ButtonLocation.CONTENT).value.filter(
-      (action) =>
-        action.name !== defaultContentTreeComponentIdAction.name &&
-        action.name !== legendComponentIdAction.name,
-    );
-  });
+  const contentOverflowActions = getActionsByLocation(
+    mobileButtonComponents,
+    ButtonLocation.CONTENT,
+    [...app.plugins].map((p) => p.name),
+  )?.slice(2);
 
   const toolboxToggleAction = app.navbarManager.get(toolboxComponentId).action;
 
-  const toolboxOverflowActions = computed(() =>
-    getActions(ButtonLocation.TOOL).value.filter(
-      (action) => action.name !== toolboxToggleAction.name,
-    ),
-  );
+  const toolboxOverflowActions = getActionsByLocation(
+    mobileButtonComponents,
+    ButtonLocation.TOOL,
+    [...app.plugins].map((p) => p.name),
+  )?.filter((action) => action.name !== toolboxToggleAction.name);
 
   const mobileMenuActions = [
-    ...getActions(ButtonLocation.MENU).value,
-    ...getActions(ButtonLocation.SHARE).value,
-    ...getActions(ButtonLocation.PROJECT).value,
-    ...toolboxOverflowActions.value,
-    ...contentOverflowActions.value,
+    ...getActionsByLocation(
+      mobileButtonComponents,
+      ButtonLocation.MENU,
+      [...app.plugins].map((p) => p.name),
+    ),
+    ...getActionsByLocation(
+      mobileButtonComponents,
+      ButtonLocation.SHARE,
+      [...app.plugins].map((p) => p.name),
+    ),
+    ...getActionsByLocation(
+      mobileButtonComponents,
+      ButtonLocation.PROJECT,
+      [...app.plugins].map((p) => p.name),
+    ),
+    ...toolboxOverflowActions,
+    ...contentOverflowActions,
   ];
 
   const dataProtection = getDataProtection(app.uiConfig?.config);
@@ -70,6 +62,7 @@
     <div v-for="action in mobileMenuActions" :key="action.name">
       <v-list-item
         @click="action.callback()"
+        :data-action-name="action.name"
         :title="$t(action.name)"
         :prepend-icon="action.icon"
       >

package/src/application/VcsNavbar.vue

@@ -85,6 +85,7 @@
                       v-bind="props"
                       tooltip="navbar.share.tooltip"
                       icon="$vcsShare"
+                      id="vcs-navbar-share-menu-activator"
                     />
                   </template>
                   <VcsActionList
@@ -96,6 +97,7 @@
                 <VcsToolButton
                   class="d-flex"
                   v-if="searchAction"
+                  :data-action-name="searchAction.name"
                   :key="searchAction.name"
                   :tooltip="searchAction.title"
                   :icon="searchAction.icon"
@@ -108,6 +110,7 @@
                     <VcsToolButton
                       v-bind="props"
                       tooltip="navbar.menu.tooltip"
+                      id="vcs-navbar-burger-menu-activator"
                       icon="$vcsMenu"
                     />
                   </template>

package/src/application/VcsNavbarMobile.vue

@@ -1,7 +1,7 @@
 <template>
   <v-toolbar
     absolute
-    :density="density"
+    density="comfortable"
     elevation="0"
     class="px-4 vcs-navbar-mobile"
     :height="toolbarHeight"
@@ -14,6 +14,7 @@
               <VcsToolButton
                 v-if="mobileMenuAction"
                 :key="mobileMenuAction.name"
+                :data-action-name="mobileMenuAction.name"
                 :tooltip="mobileMenuAction.title"
                 :icon="mobileMenuAction.icon"
                 :active="mobileMenuAction.active"
@@ -22,6 +23,7 @@
               />
               <VcsToolButton
                 v-if="searchAction"
+                :data-action-name="searchAction.name"
                 :key="searchAction.name"
                 :tooltip="searchAction.title"
                 :icon="searchAction.icon"
@@ -76,7 +78,7 @@
 </style>
 
 <script>
-  import { inject, computed, onUnmounted, shallowRef } from 'vue';
+  import { computed, inject, onUnmounted, shallowRef } from 'vue';
   import {
     VCol,
     VContainer,
@@ -100,8 +102,6 @@
   import { WindowSlot } from '../manager/window/windowManager.js';
   import MapsGroupMobileMenu from './MapsGroupMobileMenu.vue';
   import { toolboxComponentId } from '../manager/toolbox/ToolboxManagerComponent.vue';
-  import { defaultContentTreeComponentId } from '../contentTree/contentTreeCollection.js';
-  import { legendComponentId } from './VcsApp.vue';
 
   export const mobileMenuListId = 'mobileMenuList';
 
@@ -148,10 +148,6 @@
         destroySearchAction();
       });
 
-      const density = computed(() => {
-        return 'comfortable';
-      });
-
       const fontSize = useFontSize();
       const toolbarHeight = computed(() => {
         return fontSize.value * 3 + 1;
@@ -178,16 +174,9 @@
         vcsAppSymbol,
       );
 
-      // only show the ContentTree and Legend actions, rest handled in VcsMobileMenuList
+      // only show the first two actions, rest handled in VcsMobileMenuList
       const contentActions = computed(() => {
-        return getActions(ButtonLocation.CONTENT).value.filter(
-          (action) =>
-            action.name ===
-              app.navbarManager.get(defaultContentTreeComponentId).action
-                .name ||
-            action.name ===
-              app.navbarManager.get(legendComponentId).action.name,
-        );
+        return getActions(ButtonLocation.CONTENT)?.value?.slice(0, 2);
       });
 
       const toolboxToggleAction = shallowRef(
@@ -210,7 +199,6 @@
         contentActions,
         toolboxToggleAction,
         searchAction,
-        density,
         toolbarHeight,
       };
     },

package/src/application/VcsNavbarMobile.vue.d.ts

@@ -37,7 +37,6 @@ declare const _default: import("vue").DefineComponent<{}, {
          */
         disabled?: boolean | undefined;
     } | null>;
-    density: import("vue").ComputedRef<string>;
     toolbarHeight: import("vue").ComputedRef<number>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/application/VcsPositionDisplay.vue

@@ -4,6 +4,7 @@
     :class="{ active: positionDisplayAction.active }"
   >
     <VcsButton
+      :data-action-name="positionDisplayAction.name"
       :tooltip="positionDisplayAction.title"
       :icon="positionDisplayAction.icon"
       @click.stop="positionDisplayAction.callback($event)"

package/src/components/buttons/VcsActionButtonList.vue

@@ -10,6 +10,7 @@
         class="d-flex"
         v-for="(btn, index) in buttons"
         :key="`${btn.name}-${index}`"
+        :data-action-name="btn.name"
         :tooltip="btn.title"
         :tooltip-position="tooltipPosition"
         :icon="btn.icon"