@vcmap/ui 6.3.6 → 6.3.8

package/dist/assets/ui.js

@@ -1 +1 @@
-export * from "./ui-a2ca1d03.js";
+export * from "./ui-2b2de3ce.js";

package/dist/assets/vue.js

@@ -1 +1 @@
-export * from "./vue-1a9cf873.js";
+export * from "./vue-a7d70c19.js";

package/dist/assets/{vuetify-e536bde6.js → vuetify-5d94bb1a.js}

@@ -10,7 +10,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify-e536bde6.css');import { watch as Q, onScopeDispose as Ze, effectScope as Zl, shallowRef as K, reactive as it, computed as b, watchEffect as Fe, toRefs as Yt, capitalize as Nn, unref as ot, Fragment as ie, isVNode as Rc, Comment as Nc, warn as ja, getCurrentInstance as Hc, ref as j, provide as De, inject as ye, defineComponent as zc, h as Gt, camelize as Ir, toRaw as Be, createVNode as r, mergeProps as O, onBeforeUnmount as Qe, readonly as Ql, onMounted as Ye, onDeactivated as _r, onActivated as Wc, nextTick as we, TransitionGroup as Jl, Transition as jt, isRef as Tn, toRef as $, onBeforeMount as ra, withDirectives as $e, resolveDirective as gt, vShow as Ct, onUpdated as jc, Text as Uc, resolveDynamicComponent as Yc, markRaw as Gc, Teleport as Kc, cloneVNode as qc, createTextVNode as Tt, onUnmounted as Tr, onBeforeUpdate as Xc, withModifiers as Tl, toDisplayString as Zc, vModelText as Qc, resolveComponent as Jc, render as Ar } from "./vue-1a9cf873.js";
+} await loadCss('./assets/vuetify-5d94bb1a.css');import { watch as Q, onScopeDispose as Ze, effectScope as Zl, shallowRef as K, reactive as it, computed as b, watchEffect as Fe, toRefs as Yt, capitalize as Nn, unref as ot, Fragment as ie, isVNode as Rc, Comment as Nc, warn as ja, getCurrentInstance as Hc, ref as j, provide as De, inject as ye, defineComponent as zc, h as Gt, camelize as Ir, toRaw as Be, createVNode as r, mergeProps as O, onBeforeUnmount as Qe, readonly as Ql, onMounted as Ye, onDeactivated as _r, onActivated as Wc, nextTick as we, TransitionGroup as Jl, Transition as jt, isRef as Tn, toRef as $, onBeforeMount as ra, withDirectives as $e, resolveDirective as gt, vShow as Ct, onUpdated as jc, Text as Uc, resolveDynamicComponent as Yc, markRaw as Gc, Teleport as Kc, cloneVNode as qc, createTextVNode as Tt, onUnmounted as Tr, onBeforeUpdate as Xc, withModifiers as Tl, toDisplayString as Zc, vModelText as Qc, resolveComponent as Jc, render as Ar } from "./vue-a7d70c19.js";
 function rt(e, n) {
   let t;
   function a() {

package/dist/assets/vuetify.js

@@ -1 +1 @@
-export * from "./vuetify-e536bde6.js";
+export * from "./vuetify-5d94bb1a.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "6.3.6",
+  "version": "6.3.8",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -55,7 +55,7 @@
   },
   "peerDependencies": {
     "@vcmap-cesium/engine": "^11.0.5",
-    "@vcmap/core": "^6.3.5",
+    "@vcmap/core": "^6.3.8",
     "ol": "^10.4.0",
     "vue": "~3.4.38",
     "vuetify": "~3.7.14"

package/plugins/@vcmap-show-case/form-inputs-example/src/FormInputsExample.vue

@@ -243,6 +243,7 @@
             :max="100"
             :step="0.001"
             allow-text-input
+            text-input-cols="3"
           />
           <v-row no-gutters>
             <v-col>

package/plugins/@vcmap-show-case/tileset-feature-visibility/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/tileset-feature-visibility",
+  "version": "1.0.0",
+  "mapVersion": "^6.0"
+}

package/plugins/@vcmap-show-case/tileset-feature-visibility/src/TilesetFeatureVisibilityComponent.vue

@@ -0,0 +1,349 @@
+<template>
+  <v-sheet>
+    <VcsFormSection heading="Tileset Layer" expandable start-open>
+      <v-container class="py-0 px-1">
+        <v-row no-gutters>
+          <v-col>
+            <VcsLabel html-for="layer-select">Layer</VcsLabel>
+          </v-col>
+          <v-col>
+            <VcsSelect
+              id="layer-select"
+              :items="layerItems"
+              v-model="selectedLayerName"
+              placeholder="Select a CesiumTilesetLayer"
+            />
+          </v-col>
+        </v-row>
+      </v-container>
+    </VcsFormSection>
+
+    <VcsFormSection heading="Interaction" expandable start-open>
+      <v-container class="py-1 px-2">
+        <v-row no-gutters class="align-center">
+          <v-col>
+            Click to highlight, Ctrl+Click to hide, Shift+Click to hide globally
+          </v-col>
+        </v-row>
+        <v-row no-gutters class="mt-2">
+          <v-col>
+            <VcsFormButton
+              :variant="interactionActive ? 'filled' : 'outlined'"
+              :disabled="!selectedLayerName"
+              @click="toggleInteraction"
+            >
+              {{
+                interactionActive
+                  ? 'Deactivate Interaction'
+                  : 'Activate Interaction'
+              }}
+            </VcsFormButton>
+          </v-col>
+        </v-row>
+      </v-container>
+    </VcsFormSection>
+
+    <VcsFormSection
+      v-if="highlightedIds.length > 0"
+      heading="Highlighted Features"
+      expandable
+      start-open
+      :header-actions="highlightedHeaderActions"
+    >
+      <VcsList :items="highlightedListItems" :show-title="false" />
+    </VcsFormSection>
+
+    <VcsFormSection
+      v-if="globallyHiddenIds.length > 0"
+      heading="Globally Hidden Features"
+      expandable
+      start-open
+      :header-actions="globallyHiddenHeaderActions"
+    >
+      <VcsList :items="globallyHiddenListItems" :show-title="false" />
+    </VcsFormSection>
+
+    <VcsFormSection
+      v-if="hiddenIds.length > 0"
+      heading="Hidden Features"
+      expandable
+      start-open
+      :header-actions="hiddenHeaderActions"
+    >
+      <VcsList :items="hiddenListItems" :show-title="false" />
+    </VcsFormSection>
+  </v-sheet>
+</template>
+
+<script>
+  import { computed, inject, onUnmounted, ref, watch } from 'vue';
+  import {
+    CesiumTilesetLayer,
+    I3SLayer,
+    VectorLayer,
+    VectorTileLayer,
+  } from '@vcmap/core';
+  import {
+    VcsFormButton,
+    VcsFormSection,
+    VcsList,
+    VcsLabel,
+    VcsSelect,
+  } from '@vcmap/ui';
+  import { VSheet, VContainer, VRow, VCol } from 'vuetify/components';
+  import { name } from '../package.json';
+
+  export const windowId = 'tileset-feature-visibility-window';
+
+  export default {
+    name: 'TilesetFeatureVisibilityComponent',
+    components: {
+      VSheet,
+      VContainer,
+      VRow,
+      VCol,
+      VcsFormButton,
+      VcsFormSection,
+      VcsList,
+      VcsLabel,
+      VcsSelect,
+    },
+    setup() {
+      /** @type {import('@vcmap/ui').VcsUiApp} */
+      const app = inject('vcsApp');
+      const plugin = app.plugins.getByKey(name);
+
+      const selectedLayerName = ref(null);
+      const interactionActive = ref(false);
+      const highlightedIds = ref([]);
+      const hiddenIds = ref([]);
+      const { globallyHiddenIds } = plugin;
+
+      let visibilityListener = null;
+
+      function buildLayerItems() {
+        return [...app.layers]
+          .filter(
+            (l) =>
+              l instanceof CesiumTilesetLayer ||
+              l instanceof I3SLayer ||
+              l instanceof VectorLayer ||
+              l instanceof VectorTileLayer,
+          )
+          .map((l) => ({ title: l.properties.title || l.name, value: l.name }));
+      }
+
+      const layerItems = ref(buildLayerItems());
+      const layerListeners = [
+        app.layers.added.addEventListener(() => {
+          layerItems.value = buildLayerItems();
+        }),
+        app.layers.removed.addEventListener(() => {
+          layerItems.value = buildLayerItems();
+        }),
+      ];
+
+      /** @returns {import('@vcmap/core').CesiumTilesetLayer|null} */
+      function getSelectedLayer() {
+        if (!selectedLayerName.value) return null;
+        return /** @type {import('@vcmap/core').CesiumTilesetLayer} */ (
+          app.layers.getByKey(selectedLayerName.value)
+        );
+      }
+
+      function syncVisibilityState() {
+        const layer = getSelectedLayer();
+        if (!layer) {
+          highlightedIds.value = [];
+          hiddenIds.value = [];
+          return;
+        }
+        highlightedIds.value = Object.keys(
+          layer.featureVisibility.highlightedObjects,
+        );
+        hiddenIds.value = Object.keys(layer.featureVisibility.hiddenObjects);
+      }
+
+      watch(selectedLayerName, () => {
+        // Deactivate interaction when layer changes
+        if (interactionActive.value) {
+          plugin.deactivateInteraction();
+          interactionActive.value = false;
+        }
+
+        // Remove old listener
+        if (visibilityListener) {
+          visibilityListener();
+          visibilityListener = null;
+        }
+
+        // Set up new listener
+        const layer = getSelectedLayer();
+        if (layer) {
+          visibilityListener = layer.featureVisibility.changed.addEventListener(
+            () => {
+              syncVisibilityState();
+            },
+          );
+          syncVisibilityState();
+        } else {
+          highlightedIds.value = [];
+          hiddenIds.value = [];
+        }
+      });
+
+      function toggleInteraction() {
+        if (!selectedLayerName.value) return;
+        if (interactionActive.value) {
+          plugin.deactivateInteraction();
+          interactionActive.value = false;
+        } else {
+          const layer = getSelectedLayer();
+          if (layer) {
+            plugin.activateInteraction(layer, () => {
+              // Called when the interaction is forcefully removed by another tool
+              interactionActive.value = false;
+            });
+            interactionActive.value = true;
+          }
+        }
+      }
+
+      function showAllFeatures() {
+        const layer = getSelectedLayer();
+        if (layer) {
+          layer.featureVisibility.clearHiddenObjects();
+        }
+      }
+
+      function clearHighlights() {
+        const layer = getSelectedLayer();
+        if (layer) {
+          layer.featureVisibility.clearHighlighting();
+        }
+      }
+
+      function unhighlightFeature(id) {
+        const layer = getSelectedLayer();
+        if (layer) {
+          layer.featureVisibility.unHighlight([id]);
+        }
+      }
+
+      function showFeature(id) {
+        const layer = getSelectedLayer();
+        if (layer) {
+          layer.featureVisibility.showObjects([id]);
+        }
+      }
+
+      function globalShowObject(id) {
+        plugin.globalShowObject(id);
+      }
+
+      function clearGloballyHidden() {
+        plugin.clearGloballyHidden();
+      }
+
+      const highlightedListItems = computed(() =>
+        highlightedIds.value.map((id) => ({
+          name: id,
+          title: id,
+          actions: [
+            {
+              name: 'unhighlight',
+              icon: 'mdi-eye-off-outline',
+              tooltip: 'Unhighlight feature',
+              callback: () => unhighlightFeature(id),
+            },
+          ],
+        })),
+      );
+
+      const hiddenListItems = computed(() =>
+        hiddenIds.value.map((id) => ({
+          name: id,
+          title: id,
+          actions: [
+            {
+              name: 'show',
+              icon: 'mdi-eye-outline',
+              tooltip: 'Show feature',
+              callback: () => showFeature(id),
+            },
+          ],
+        })),
+      );
+
+      const globallyHiddenListItems = computed(() =>
+        globallyHiddenIds.value.map((id) => ({
+          name: id,
+          title: id,
+          actions: [
+            {
+              name: 'globalShow',
+              icon: 'mdi-eye-outline',
+              tooltip: 'Show feature globally',
+              callback: () => globalShowObject(id),
+            },
+          ],
+        })),
+      );
+
+      const highlightedHeaderActions = computed(() => [
+        {
+          name: 'clearHighlights',
+          icon: 'mdi-close-circle-outline',
+          tooltip: 'Clear All Highlights',
+          callback: clearHighlights,
+        },
+      ]);
+
+      const hiddenHeaderActions = computed(() => [
+        {
+          name: 'showAllHidden',
+          icon: 'mdi-eye-outline',
+          tooltip: 'Show All Hidden Features',
+          callback: showAllFeatures,
+        },
+      ]);
+
+      const globallyHiddenHeaderActions = computed(() => [
+        {
+          name: 'clearGloballyHidden',
+          icon: 'mdi-eye-outline',
+          tooltip: 'Show All Globally Hidden',
+          callback: clearGloballyHidden,
+        },
+      ]);
+
+      onUnmounted(() => {
+        layerListeners.forEach((cb) => cb());
+        if (visibilityListener) {
+          visibilityListener();
+          visibilityListener = null;
+        }
+        if (interactionActive.value) {
+          plugin.deactivateInteraction();
+          interactionActive.value = false;
+        }
+      });
+
+      return {
+        layerItems,
+        selectedLayerName,
+        interactionActive,
+        highlightedIds,
+        hiddenIds,
+        globallyHiddenIds,
+        toggleInteraction,
+        highlightedListItems,
+        hiddenListItems,
+        globallyHiddenListItems,
+        highlightedHeaderActions,
+        hiddenHeaderActions,
+        globallyHiddenHeaderActions,
+      };
+    },
+  };
+</script>

package/plugins/@vcmap-show-case/tileset-feature-visibility/src/TilesetFeatureVisibilityInteraction.js

@@ -0,0 +1,66 @@
+import {
+  AbstractInteraction,
+  EventType,
+  ModificationKeyType,
+  vcsLayerName,
+  VectorStyleItem,
+} from '@vcmap/core';
+
+/** @type {import('@vcmap/core').VectorStyleItem} */
+const defaultHighlightStyle = new VectorStyleItem({
+  fill: { color: [255, 215, 0, 0.8] },
+});
+
+/**
+ * Interaction that allows highlighting and hiding features of a CesiumTilesetLayer.
+ * - Click on a feature: toggle highlight
+ * - Ctrl/Cmd + Click on a feature: hide the feature via featureVisibility
+ * - Shift + Click on a feature: hide the feature globally via globalHider
+ */
+export default class TilesetFeatureVisibilityInteraction extends AbstractInteraction {
+  /**
+   * @param {import('@vcmap/core').CesiumTilesetLayer} layer
+   * @param {function(string):void} globalHideCallback - called with the feature id when globally hiding
+   */
+  constructor(layer, globalHideCallback) {
+    super(EventType.CLICK, ModificationKeyType.ALL);
+    /** @type {import('@vcmap/core').CesiumTilesetLayer} */
+    this._layer = layer;
+    /** @type {function(string):void} */
+    this._globalHideCallback = globalHideCallback;
+  }
+
+  /**
+   * @param {import('@vcmap/core').InteractionEvent} event
+   * @returns {Promise<import('@vcmap/core').InteractionEvent>}
+   */
+  pipe(event) {
+    const { feature } = event;
+    if (feature && feature[vcsLayerName] === this._layer.name) {
+      const id = String(feature.getId());
+      const { featureVisibility } = this._layer;
+
+      if (event.key === ModificationKeyType.CTRL) {
+        // Ctrl/Cmd + Click: hide the feature via featureVisibility
+        featureVisibility.hideObjects([id]);
+        event.stopPropagation = true;
+      } else if (event.key === ModificationKeyType.SHIFT) {
+        // Shift + Click: hide the feature globally via globalHider
+        this._globalHideCallback(id);
+        event.stopPropagation = true;
+      } else if (event.key === ModificationKeyType.NONE) {
+        // Click: toggle highlight
+        if (featureVisibility.highlightedObjects[id]) {
+          featureVisibility.unHighlight([id]);
+        } else {
+          const highlightStyle =
+            this._layer.highlightStyle ?? defaultHighlightStyle;
+          featureVisibility.highlight({ [id]: highlightStyle });
+        }
+        event.stopPropagation = true;
+      }
+    }
+
+    return Promise.resolve(event);
+  }
+}

package/plugins/@vcmap-show-case/tileset-feature-visibility/src/index.js

@@ -0,0 +1,135 @@
+import { ref } from 'vue';
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import { name, version, mapVersion } from '../package.json';
+import TilesetFeatureVisibilityComponent, {
+  windowId,
+} from './TilesetFeatureVisibilityComponent.vue';
+import TilesetFeatureVisibilityInteraction from './TilesetFeatureVisibilityInteraction.js';
+
+export default function tilesetFeatureVisibilityPlugin() {
+  /** @type {(() => number)|null} */
+  let removeInteraction = null;
+  /** @type {TilesetFeatureVisibilityInteraction|null} */
+  let interaction = null;
+  /** @type {import('@vcmap/ui').VcsUiApp|null} */
+  let vcsApp = null;
+  /** @type {import('vue').Ref<string[]>} */
+  const globallyHiddenIds = ref([]);
+
+  return {
+    get name() {
+      return name;
+    },
+    get version() {
+      return version;
+    },
+    get mapVersion() {
+      return mapVersion;
+    },
+
+    /**
+     * Activate the tileset feature visibility interaction for the given layer.
+     * @param {import('@vcmap/core').CesiumTilesetLayer} layer
+     * @param {function():void} [onRemoved] - called if the interaction is forcefully removed
+     */
+    activateInteraction(layer, onRemoved) {
+      if (removeInteraction) {
+        removeInteraction();
+        removeInteraction = null;
+      }
+      interaction = new TilesetFeatureVisibilityInteraction(layer, (id) => {
+        vcsApp.layers.globalHider.hideObjects([id]);
+        if (!globallyHiddenIds.value.includes(id)) {
+          globallyHiddenIds.value = [...globallyHiddenIds.value, id];
+        }
+      });
+      removeInteraction = vcsApp.maps.eventHandler.addExclusiveInteraction(
+        interaction,
+        () => {
+          interaction = null;
+          removeInteraction = null;
+          onRemoved?.();
+        },
+        undefined,
+        name,
+      );
+    },
+
+    /**
+     * Deactivate the tileset feature visibility interaction.
+     */
+    deactivateInteraction() {
+      if (removeInteraction) {
+        removeInteraction();
+        removeInteraction = null;
+      }
+      interaction = null;
+    },
+
+    /**
+     * Show a feature that was globally hidden by this plugin.
+     * @param {string} id
+     */
+    globalShowObject(id) {
+      vcsApp.layers.globalHider.showObjects([id]);
+      globallyHiddenIds.value = globallyHiddenIds.value.filter((i) => i !== id);
+    },
+
+    /**
+     * Show all features that were globally hidden by this plugin.
+     */
+    clearGloballyHidden() {
+      const ids = [...globallyHiddenIds.value];
+      vcsApp.layers.globalHider.showObjects(ids);
+      globallyHiddenIds.value = [];
+    },
+
+    /**
+     * Reactive ref of feature ids globally hidden by this plugin.
+     * @type {import('vue').Ref<string[]>}
+     */
+    get globallyHiddenIds() {
+      return globallyHiddenIds;
+    },
+
+    /**
+     * @param {import('@vcmap/ui').VcsUiApp} app
+     */
+    initialize(app) {
+      vcsApp = app;
+
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Tileset Feature Visibility',
+          title: 'Tileset Feature Visibility',
+          icon: 'mdi-layers-search',
+        },
+        {
+          id: windowId,
+          state: {
+            headerTitle: 'Tileset Feature Visibility',
+            headerIcon: 'mdi-layers-search',
+          },
+          component: TilesetFeatureVisibilityComponent,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        app.windowManager,
+        name,
+      );
+
+      app.navbarManager.add(
+        { id: 'tileset-feature-visibility', action },
+        name,
+        ButtonLocation.TOOL,
+      );
+
+      this._destroy = destroy;
+    },
+
+    destroy() {
+      this.deactivateInteraction();
+      this.clearGloballyHidden();
+      this._destroy?.();
+    },
+  };
+}

package/plugins/package.json

@@ -2,17 +2,17 @@
   "dependencies": {
     "@vcmap/print": "^4.0.0",
     "@vcmap/walk": "^2.0.0",
-    "@vcmap/clipping-tool": "^3.0.0",
+    "@vcmap/clipping-tool": "^4.0.0",
     "@vcmap/transparent-terrain": "^3.0.0",
     "@vcmap/height-profile": "^3.0.0",
     "@vcmap/flight": "^3.0.0",
     "@vcmap/swipe-tool": "^4.0.0",
-    "@vcmap/export": "^2.0.0",
-    "@vcmap/viewshed": "^4.0.0",
+    "@vcmap/export": "^2.1.0",
+    "@vcmap/viewshed": "^4.1.0",
     "@vcmap/measurement": "^5.0.0",
     "@vcmap/multi-view": "^3.0.0",
     "@vcmap/draw": "^5.0.0",
-    "@vcmap/shadow": "^3.0.0",
+    "@vcmap/shadow": "^3.1.0",
     "@vcmap/search-wfs": "^2.1.0",
     "@vcmap/search-esri": "^3.0.0",
     "@vcmap/search-coordinate": "^2.0.0",

package/src/callback/activateLayersCallback.d.ts

@@ -21,7 +21,7 @@ declare class ActivateLayersCallback extends VcsCallback {
      * @private
      */
     private _layerNames;
-    callback(): void;
+    callback(): Promise<void>;
     /**
      * @returns {ActivateLayersOptions}
      */

package/src/callback/activateLayersCallback.js

@@ -31,11 +31,11 @@ class ActivateLayersCallback extends VcsCallback {
     this._layerNames = options.layerNames;
   }
 
-  callback() {
-    this._layerNames
+  async callback() {
+    const layerPromises = this._layerNames
       .map((n) => this._app.layers.getByKey(n))
       .filter((l) => l)
-      .forEach((l) =>
+      .map((l) =>
         l.activate().catch((e) => {
           getLogger('ActivateLayersCallback').error(
             `Could not activate layer: ${l.name}`,
@@ -43,6 +43,8 @@ class ActivateLayersCallback extends VcsCallback {
           );
         }),
       );
+
+    await Promise.all(layerPromises);
   }
 
   /**

package/src/callback/activateMapCallback.d.ts

@@ -25,7 +25,7 @@ declare class ActivateMapCallback extends VcsCallback {
     /**
      * Activates the map with the given name.
      */
-    callback(): void;
+    callback(): Promise<void>;
     /**
      * @returns {ActivateMapCallbackOptions}
      */

package/src/callback/activateMapCallback.js

@@ -28,14 +28,16 @@ class ActivateMapCallback extends VcsCallback {
   /**
    * Activates the map with the given name.
    */
-  callback() {
+  async callback() {
     if (this._mapName) {
-      this._app.maps.setActiveMap(this._mapName).catch((error) => {
+      try {
+        await this._app.maps.setActiveMap(this._mapName);
+      } catch (error) {
         getLogger(ActivateMapCallback.className).error(
           `Failed to activate map "${this._mapName}":`,
           error,
         );
-      });
+      }
     }
   }