@vcmap/ui 6.3.6 → 6.3.7

package/dist/assets/core-workers/panoramaImageWorker.js

@@ -1 +1 @@
-import './panoramaImageWorker.js-1169c1e6.js';
+import './panoramaImageWorker.js-1e5adc77.js';

package/dist/assets/core.js

@@ -1 +1 @@
-export * from "./core-b552e43f.js";
+export * from "./core-a6684686.js";

package/dist/assets/ol.js

@@ -1 +1 @@
-export * from "./ol-bb6d9ab8.js";
+export * from "./ol-15bf8646.js";

package/dist/assets/{ui-a2ca1d03.js → ui-130549f1.js}

@@ -10,17 +10,17 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/ui-a2ca1d03.css');await loadCss('./assets/@mdi/font/css/materialdesignicons.min-680621ca.css');var hg = Object.defineProperty;
+} await loadCss('./assets/ui-130549f1.css');await loadCss('./assets/@mdi/font/css/materialdesignicons.min-680621ca.css');var hg = Object.defineProperty;
 var mg = (t, e, o) => e in t ? hg(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
 var Re = (t, e, o) => mg(t, typeof e != "symbol" ? e + "" : e, o);
-import { FeatureLayer as ea, VcsEvent as et, Viewpoint as tn, PanoramaMap as fo, Extent as Yo, mercatorProjection as kt, MapCollection as vu, Collection as Qa, LayerState as Wi, AbstractInteraction as sr, EventType as io, ModificationKeyType as _u, vectorClusterGroupName as Na, isProvidedClusterFeature as yu, VcsObject as pg, renderTemplate as Pa, VectorProperties as bu, getHeightInfo as gg, isRelativeHeightReference as vg, getGeometryHeight as _g, isAbsoluteHeightReference as yg, cartesianToMercator as Ra, CesiumMap as fn, OpenlayersMap as rr, ObliqueMap as xt, transformToImage as Mh, Projection as qn, getMetersPerDegreeAtCoordinate as bg, ClassRegistry as wu, fromCesiumColor as Nh, VectorStyleItem as Zn, getDefaultVectorStyleItemOptions as Ph, VectorLayer as Eo, maxZIndex as Xa, markVolatile as ta, vcsLayerName as An, originalFeatureSymbol as Au, isProvidedFeature as Rh, hidden as il, alreadyTransformedToImage as wg, panoramaFeature as e1, mercatorToCartesian as Oh, moduleIdSymbol as yt, volatileModuleId as $i, FeatureProviderInteraction as Ag, getFeatureFromPickObject as Sg, startCreateFeatureSession as Ig, GeometryType as In, wgs84Projection as vi, startEditFeaturesSession as Eg, startEditGeometrySession as Cg, isSameOrigin as kg, createFlightVisualization as Su, parseFlightOptionsFromGeoJson as Tg, FlightInstance as Os, exportFlightPathAsGeoJson as xg, exportFlightAsGeoJson as Lg, createFlightPlayer as Vg, createFlightMovie as Mg, parseGeoJSON as Ng, rotationMapControlSymbol as Sc, startRotation as Dh, PanoramaImageSelection as Pg, EventHandler as Rg, deserializeLayer as Og, DataState as Dg, emptyStyle as t1, maxZIndexMin50 as fs, ObliqueViewDirection as Ao, DisplayQualityLevel as al, getStringColor as Ic, parseColor as Ec, PatternType as Ri, getShapeFromOptions as Fg, getDefaultProjection as Oa, getVcsAppById as Bg, getInitForUrl as $g, WMSLayer as Cc, IndexedCollection as hi, makeOverrideCollection as xa, getObjectFromClassRegistry as Fh, isOverrideCollection as Gg, defaultDynamicModuleId as fi, PointerKeyType as n1, BaseOLMap as Ug, VcsApp as Hg, OverrideClassRegistry as sl, destroyCollection as hs, VcsModule as kc, DefaultObliqueCollection as Wg, getImageStyleFromOptions as Bh, anchorFromViewpoint as $h, anchorToViewpoint as Gh, getSplineAndTimesForInstance as Zg, getTextFromOptions as jg, highlighted as Uh, originalStyle as Iu, getStyleOptions as zg, vectorStyleSymbol as Yg, getImageStyleOptions as qg, getTextOptions as Jg, TransformationMode as so, placeGeometryOnSurface as Qg, SessionType as Ho, snapTypes as Xg, is2DLayout as Kg } from "./core-b552e43f.js";
-import { renderTemplate as kU } from "./core-b552e43f.js";
-import { resolveComponent as b, openBlock as g, createBlock as A, withCtx as v, createVNode as p, createElementBlock as k, Fragment as re, renderList as ge, withModifiers as Me, normalizeClass as pe, createTextVNode as H, toDisplayString as $, createCommentVNode as M, inject as fe, ref as B, onUnmounted as Be, computed as w, reactive as ce, watch as ie, nextTick as xn, toRaw as It, mergeProps as X, createSlots as wt, renderSlot as ne, normalizeProps as Ce, guardReactiveProps as ke, getCurrentInstance as en, shallowRef as Ue, onBeforeMount as Hh, onMounted as Vn, effectScope as Wh, isRef as ho, defineComponent as Ka, h as xo, Text as Zh, onScopeDispose as ev, watchEffect as Eu, toRefs as lr, capitalize as jh, warn as tv, unref as K, provide as mn, camelize as zh, createStaticVNode as nn, createElementVNode as S, resolveDynamicComponent as Lo, withKeys as Qt, useSlots as Yh, isReactive as nv, normalizeStyle as kn, shallowReactive as ov, pushScopeId as cr, popScopeId as ur, readonly as Cu, createApp as iv, toRef as Qe, onBeforeUnmount as es, onUpdated as av, withDirectives as qo, TransitionGroup as ku, Transition as Tu, resolveDirective as dr, vShow as xu, useCssVars as sv, useAttrs as rv, toHandlers as lv, useModel as cv } from "./vue-1a9cf873.js";
-import { VListItemTitle as Mn, VListItem as Rt, VList as Qn, VSheet as ht, VTextField as uv, VTooltip as lt, VSvgIcon as dv, VIcon as Ze, VBtn as na, VSpacer as fr, VMenu as Po, VCol as st, VRow as ft, VDivider as Tn, VProgressLinear as fv, VCardText as qh, VCardTitle as Jh, VCard as ki, VDialog as Qh, VExpansionPanel as hv, VExpansionPanelTitle as mv, VExpansionPanelText as pv, VExpansionPanels as Lu, VCheckbox as gv, VDataTableServer as vv, VDataTable as _v, VListItemSubtitle as Vu, VFileInput as yv, VSlider as Xh, VContainer as ct, VToolbarItems as oa, VToolbar as ia, VSnackbar as bv, VSelect as wv, VRadio as Av, VRadioGroup as Sv, VPagination as Iv, VImg as Ev, VCardActions as Cv, VFooter as kv, VApp as Tv, VExpandTransition as xv, VChip as Lv, VTextarea as Vv, VDatePicker as Mv, VColorPicker as Kh, VTab as Nv, VTabs as Pv, VForm as Rv } from "./vuetify-e536bde6.js";
-import { Feature as Vo, ol$Feature as Tc, ol$geom$Point as ts, ol$extent$getCenter as Ov, ol$Observable$unByKey as Ji, ol$proj$getTransform as Dv, ol$proj$get as Fv, ol$geom$LineString as Bv, ol$style$Icon as hr, ol$proj$transformExtent as em, ol$geom$Polygon$fromExtent as $v, ol$geom$Polygon as Gv, ol$extent$createOrUpdateFromCoordinates as Uv, ol$style$Circle as Hv, ol$style$Stroke as tm, ol$style$Fill as nm, ol$geom$Circle as Wv, ol$source$Vector as rl, ol$format$WMSCapabilities as Zv, ol$render$toContext as jv, ol$style$Style as zv } from "./ol-bb6d9ab8.js";
-import { useTheme as om, createVuetify as Yv, useDisplay as Ct } from "./vuetify-e536bde6.js";
-import "./vuetify-e536bde6.js";
-import { HeightReference as Ds, Entity as im, Cartesian2 as am, Cartographic as _i, SceneTransforms as qv, Color as ns, Cesium3DTilePointFeature as Jv, Cesium3DTileFeature as Qv, Cartesian3 as Zi, Ray as Xv, Math as yi } from "./cesium-13cf3c65.js";
+import { FeatureLayer as ea, VcsEvent as et, Viewpoint as tn, PanoramaMap as fo, Extent as Yo, mercatorProjection as kt, MapCollection as vu, Collection as Qa, LayerState as Wi, AbstractInteraction as sr, EventType as io, ModificationKeyType as _u, vectorClusterGroupName as Na, isProvidedClusterFeature as yu, VcsObject as pg, renderTemplate as Pa, VectorProperties as bu, getHeightInfo as gg, isRelativeHeightReference as vg, getGeometryHeight as _g, isAbsoluteHeightReference as yg, cartesianToMercator as Ra, CesiumMap as fn, OpenlayersMap as rr, ObliqueMap as xt, transformToImage as Mh, Projection as qn, getMetersPerDegreeAtCoordinate as bg, ClassRegistry as wu, fromCesiumColor as Nh, VectorStyleItem as Zn, getDefaultVectorStyleItemOptions as Ph, VectorLayer as Eo, maxZIndex as Xa, markVolatile as ta, vcsLayerName as An, originalFeatureSymbol as Au, isProvidedFeature as Rh, hidden as il, alreadyTransformedToImage as wg, panoramaFeature as e1, mercatorToCartesian as Oh, moduleIdSymbol as yt, volatileModuleId as $i, FeatureProviderInteraction as Ag, getFeatureFromPickObject as Sg, startCreateFeatureSession as Ig, GeometryType as In, wgs84Projection as vi, startEditFeaturesSession as Eg, startEditGeometrySession as Cg, isSameOrigin as kg, createFlightVisualization as Su, parseFlightOptionsFromGeoJson as Tg, FlightInstance as Os, exportFlightPathAsGeoJson as xg, exportFlightAsGeoJson as Lg, createFlightPlayer as Vg, createFlightMovie as Mg, parseGeoJSON as Ng, rotationMapControlSymbol as Sc, startRotation as Dh, PanoramaImageSelection as Pg, EventHandler as Rg, deserializeLayer as Og, DataState as Dg, emptyStyle as t1, maxZIndexMin50 as fs, ObliqueViewDirection as Ao, DisplayQualityLevel as al, getStringColor as Ic, parseColor as Ec, PatternType as Ri, getShapeFromOptions as Fg, getDefaultProjection as Oa, getVcsAppById as Bg, getInitForUrl as $g, WMSLayer as Cc, IndexedCollection as hi, makeOverrideCollection as xa, getObjectFromClassRegistry as Fh, isOverrideCollection as Gg, defaultDynamicModuleId as fi, PointerKeyType as n1, BaseOLMap as Ug, VcsApp as Hg, OverrideClassRegistry as sl, destroyCollection as hs, VcsModule as kc, DefaultObliqueCollection as Wg, getImageStyleFromOptions as Bh, anchorFromViewpoint as $h, anchorToViewpoint as Gh, getSplineAndTimesForInstance as Zg, getTextFromOptions as jg, highlighted as Uh, originalStyle as Iu, getStyleOptions as zg, vectorStyleSymbol as Yg, getImageStyleOptions as qg, getTextOptions as Jg, TransformationMode as so, placeGeometryOnSurface as Qg, SessionType as Ho, snapTypes as Xg, is2DLayout as Kg } from "./core-a6684686.js";
+import { renderTemplate as kU } from "./core-a6684686.js";
+import { resolveComponent as b, openBlock as g, createBlock as A, withCtx as v, createVNode as p, createElementBlock as k, Fragment as re, renderList as ge, withModifiers as Me, normalizeClass as pe, createTextVNode as H, toDisplayString as $, createCommentVNode as M, inject as fe, ref as B, onUnmounted as Be, computed as w, reactive as ce, watch as ie, nextTick as xn, toRaw as It, mergeProps as X, createSlots as wt, renderSlot as ne, normalizeProps as Ce, guardReactiveProps as ke, getCurrentInstance as en, shallowRef as Ue, onBeforeMount as Hh, onMounted as Vn, effectScope as Wh, isRef as ho, defineComponent as Ka, h as xo, Text as Zh, onScopeDispose as ev, watchEffect as Eu, toRefs as lr, capitalize as jh, warn as tv, unref as K, provide as mn, camelize as zh, createStaticVNode as nn, createElementVNode as S, resolveDynamicComponent as Lo, withKeys as Qt, useSlots as Yh, isReactive as nv, normalizeStyle as kn, shallowReactive as ov, pushScopeId as cr, popScopeId as ur, readonly as Cu, createApp as iv, toRef as Qe, onBeforeUnmount as es, onUpdated as av, withDirectives as qo, TransitionGroup as ku, Transition as Tu, resolveDirective as dr, vShow as xu, useCssVars as sv, useAttrs as rv, toHandlers as lv, useModel as cv } from "./vue-d93cd563.js";
+import { VListItemTitle as Mn, VListItem as Rt, VList as Qn, VSheet as ht, VTextField as uv, VTooltip as lt, VSvgIcon as dv, VIcon as Ze, VBtn as na, VSpacer as fr, VMenu as Po, VCol as st, VRow as ft, VDivider as Tn, VProgressLinear as fv, VCardText as qh, VCardTitle as Jh, VCard as ki, VDialog as Qh, VExpansionPanel as hv, VExpansionPanelTitle as mv, VExpansionPanelText as pv, VExpansionPanels as Lu, VCheckbox as gv, VDataTableServer as vv, VDataTable as _v, VListItemSubtitle as Vu, VFileInput as yv, VSlider as Xh, VContainer as ct, VToolbarItems as oa, VToolbar as ia, VSnackbar as bv, VSelect as wv, VRadio as Av, VRadioGroup as Sv, VPagination as Iv, VImg as Ev, VCardActions as Cv, VFooter as kv, VApp as Tv, VExpandTransition as xv, VChip as Lv, VTextarea as Vv, VDatePicker as Mv, VColorPicker as Kh, VTab as Nv, VTabs as Pv, VForm as Rv } from "./vuetify-6d0e90c9.js";
+import { Feature as Vo, ol$Feature as Tc, ol$geom$Point as ts, ol$extent$getCenter as Ov, ol$Observable$unByKey as Ji, ol$proj$getTransform as Dv, ol$proj$get as Fv, ol$geom$LineString as Bv, ol$style$Icon as hr, ol$proj$transformExtent as em, ol$geom$Polygon$fromExtent as $v, ol$geom$Polygon as Gv, ol$extent$createOrUpdateFromCoordinates as Uv, ol$style$Circle as Hv, ol$style$Stroke as tm, ol$style$Fill as nm, ol$geom$Circle as Wv, ol$source$Vector as rl, ol$format$WMSCapabilities as Zv, ol$render$toContext as jv, ol$style$Style as zv } from "./ol-15bf8646.js";
+import { useTheme as om, createVuetify as Yv, useDisplay as Ct } from "./vuetify-6d0e90c9.js";
+import "./vuetify-6d0e90c9.js";
+import { HeightReference as Ds, Entity as im, Cartesian2 as am, Cartographic as _i, SceneTransforms as qv, Color as ns, Cesium3DTilePointFeature as Jv, Cesium3DTileFeature as Qv, Cartesian3 as Zi, Ray as Xv, Math as yi } from "./cesium-a9fcdef3.js";
 window.CESIUM_BASE_URL = "./assets/cesium/";
 const L = (t, e) => {
   const o = t.__vccOpts || t;
@@ -1520,7 +1520,7 @@ function Y_() {
   }, Kl;
 }
 var q_ = Y_();
-const Nc = "@vcmap/ui", Ls = "6.3.6";
+const Nc = "@vcmap/ui", Ls = "6.3.7";
 function ri() {
   return _e("plugin-helpers");
 }
@@ -9486,7 +9486,7 @@ function At() {
 function kr() {
   const t = Ct();
   return w(() => {
-    const e = t.platform.value.android || t.platform.value.ios || t.platform.value.touch, o = t.height.value <= t.thresholds.value.sm, n = t.height.value < t.width.value;
+    const e = t.platform.value.android || t.platform.value.ios, o = t.height.value <= t.thresholds.value.sm, n = t.height.value < t.width.value;
     return e && n && o;
   });
 }

package/dist/assets/ui.js

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

package/dist/assets/vue.js

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

package/dist/assets/{vuetify-e536bde6.js → vuetify-6d0e90c9.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-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-e536bde6.js";
+export * from "./vuetify-6d0e90c9.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "6.3.6",
+  "version": "6.3.7",
   "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.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?.();
+    },
+  };
+}