@vcmap/ui 6.3.5 → 6.3.7

package/dist/assets/ui.js

@@ -1 +1 @@
-export * from "./ui-d660ba07.js";
+export * from "./ui-130549f1.js";

package/dist/assets/vue.js

@@ -1 +1 @@
-export * from "./vue-d940072f.js";
+export * from "./vue-d93cd563.js";

package/dist/assets/{vuetify-bc604361.js → vuetify-6d0e90c9.js}

@@ -10,7 +10,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify-bc604361.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-d940072f.js";
+} await loadCss('./assets/vuetify-6d0e90c9.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-d93cd563.js";
 function rt(e, n) {
   let t;
   function a() {

package/dist/assets/vuetify.js

@@ -1 +1 @@
-export * from "./vuetify-bc604361.js";
+export * from "./vuetify-6d0e90c9.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "6.3.5",
+  "version": "6.3.7",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -50,12 +50,12 @@
     "fast-deep-equal": "^3.1.3",
     "marked": "^15.0.7",
     "semver": "^7.6.3",
-    "uuid": "^11.1.0",
+    "uuid": "^14.0.0",
     "vue-i18n": "^9.13.1"
   },
   "peerDependencies": {
     "@vcmap-cesium/engine": "^11.0.5",
-    "@vcmap/core": "^6.3.4",
+    "@vcmap/core": "^6.3.7",
     "ol": "^10.4.0",
     "vue": "~3.4.38",
     "vuetify": "~3.7.14"

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/vuePlugins/vuetify.js

@@ -358,11 +358,9 @@ export function useFontSize() {
 export function isMobileLandscape() {
   const display = useDisplay();
   return computed(() => {
-    // Check if the device is a mobile platform (e.g., Android, iOS, or touch-based)
+    // Check if the device is a mobile platform (e.g., Android, iOS)
     const isMobilePlatform =
-      display.platform.value.android ||
-      display.platform.value.ios ||
-      display.platform.value.touch;
+      display.platform.value.android || display.platform.value.ios;
 
     // Check if the device height is less than the threshold for SM
     const isHeightXs = display.height.value <= display.thresholds.value.sm;