@vcmap/ui 6.2.0-rc.1 → 6.2.0-rc.3

package/dist/assets/ui.js

@@ -1 +1 @@
-export * from "./ui-4f308e45.js";
+export * from "./ui-62439099.js";

package/dist/assets/vue.js

@@ -1 +1 @@
-export * from "./vue-62303c82.js";
+export * from "./vue-1b861f55.js";

package/dist/assets/{vuetify-99195777.js → vuetify-439ba6d5.js}

@@ -10,7 +10,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify-99195777.css');import { watch as Q, onScopeDispose as Ze, effectScope as Zl, shallowRef as K, Fragment as ie, reactive as it, computed as b, watchEffect as Fe, toRefs as Yt, capitalize as Nn, isVNode as Rc, Comment as Nc, unref as ot, warn as ja, getCurrentInstance as Hc, ref as j, provide as De, inject as ye, defineComponent as zc, camelize as Ir, h as Gt, toRaw as Be, createVNode as r, mergeProps as O, onBeforeUnmount as Qe, readonly as Ql, onDeactivated as _r, onActivated as Wc, onMounted as Ye, 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-62303c82.js";
+} await loadCss('./assets/vuetify-439ba6d5.css');import { watch as Q, onScopeDispose as Ze, effectScope as Zl, shallowRef as K, Fragment as ie, reactive as it, computed as b, watchEffect as Fe, toRefs as Yt, capitalize as Nn, isVNode as Rc, Comment as Nc, unref as ot, warn as ja, getCurrentInstance as Hc, ref as j, provide as De, inject as ye, defineComponent as zc, camelize as Ir, h as Gt, toRaw as Be, createVNode as r, mergeProps as O, onBeforeUnmount as Qe, readonly as Ql, onDeactivated as _r, onActivated as Wc, onMounted as Ye, 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-1b861f55.js";
 function rt(e, n) {
   let t;
   function a() {

package/dist/assets/vuetify.js

@@ -1 +1 @@
-export * from "./vuetify-99195777.js";
+export * from "./vuetify-439ba6d5.js";

package/index.d.ts

@@ -31,6 +31,12 @@ export { default as ToggleNavbarButtonCallback } from "./src/callback/toggleNavb
 export type * from "./src/callback/toggleNavbarButtonCallback.d.ts";
 export { default as ToggleToolbarButtonCallback } from "./src/callback/toggleToolbarButtonCallback.js";
 export type * from "./src/callback/toggleToolbarButtonCallback.d.ts";
+export { default as ActivateMapCallback } from "./src/callback/activateMapCallback.js";
+export type * from "./src/callback/activateMapCallback.d.ts";
+export { default as ActivateOverviewMapCallback } from "./src/callback/activateOverviewMapCallback.js";
+export type * from "./src/callback/activateOverviewMapCallback.d.ts";
+export { default as DeactivateOverviewMapCallback } from "./src/callback/deactivateOverviewMapCallback.js";
+export type * from "./src/callback/deactivateOverviewMapCallback.d.ts";
 export { default as VcsNavbar } from "./src/application/VcsNavbar.vue";
 export type * from "./src/application/VcsNavbar.vue.d.ts";
 export { default as VcsAppWrapper } from "./src/application/VcsAppWrapper.vue";
@@ -121,6 +127,8 @@ export { default as ObliqueRotation } from "./src/navigation/ObliqueRotation.vue
 export type * from "./src/navigation/ObliqueRotation.vue.d.ts";
 export { default as OrientationToolsButton } from "./src/navigation/OrientationToolsButton.vue";
 export type * from "./src/navigation/OrientationToolsButton.vue.d.ts";
+export { default as OverviewMap } from "./src/navigation/overviewMap.js";
+export type * from "./src/navigation/overviewMap.d.ts";
 export { default as OverviewMapClickedInteraction } from "./src/navigation/overviewMapClickedInteraction.js";
 export type * from "./src/navigation/overviewMapClickedInteraction.d.ts";
 export { default as TiltSlider } from "./src/navigation/TiltSlider.vue";
@@ -255,6 +263,10 @@ export { default as VcsFeatureStyleComponent } from "./src/components/style/VcsF
 export type * from "./src/components/style/VcsFeatureStyleComponent.vue.d.ts";
 export { default as AbstractConfigEditor } from "./src/components/plugins/AbstractConfigEditor.vue";
 export type * from "./src/components/plugins/AbstractConfigEditor.vue.d.ts";
+export { default as VcsWorkspaceWrapper } from "./src/components/plugins/VcsWorkspaceWrapper.vue";
+export type * from "./src/components/plugins/VcsWorkspaceWrapper.vue.d.ts";
+export { default as VcsLoadingOverlay } from "./src/components/plugins/VcsLoadingOverlay.vue";
+export type * from "./src/components/plugins/VcsLoadingOverlay.vue.d.ts";
 export { default as VcsFileDrop } from "./src/components/import/VcsFileDrop.vue";
 export type * from "./src/components/import/VcsFileDrop.vue.d.ts";
 export { default as VcsImportComponent } from "./src/components/import/VcsImportComponent.vue";
@@ -271,7 +283,7 @@ export { default as ResultItemComponent } from "./src/search/ResultItem.vue";
 export type * from "./src/search/ResultItem.vue.d.ts";
 export { default as ResultsComponent } from "./src/search/ResultsComponent.vue";
 export type * from "./src/search/ResultsComponent.vue.d.ts";
-export { callSafeAction, createMapButtonAction, createToggleAction, createOverviewMapAction, createModalAction, createLinkAction, createGoToViewpointAction, createZoomToFeatureAction, searchComponentId } from "./src/actions/actionHelper.js";
+export { addLoadingOverlay, callSafeAction, createMapButtonAction, createToggleAction, createModalAction, createLinkAction, createGoToViewpointAction, createZoomToFeatureAction, searchComponentId } from "./src/actions/actionHelper.js";
 export type * from "./src/actions/actionHelper.d.ts";
 export { createDeepPickingAction, deepPickingWindowId } from "./src/actions/deepPickingAction.js";
 export type * from "./src/actions/deepPickingAction.d.ts";
@@ -279,7 +291,7 @@ export { createStateRefAction, StateActionState } from "./src/actions/stateRefAc
 export type * from "./src/actions/stateRefAction.d.ts";
 export { createLayerToggleAction, createZoomToExtentAction, createExtentFeatureAction, setupExtentComponentActions } from "./src/actions/extentActions.js";
 export type * from "./src/actions/extentActions.d.ts";
-export { createPlayAction, PlayerDirection, createStepAction, createFastAction, createFlightPlayerActions, setupFlightListItemPlayer, createZoomToFlightAction, createFlightVisualizationAction, createExportFlightAction, importFlights } from "./src/actions/flightActions.js";
+export { createPlayAction, PlayerDirection, createStepAction, createFastAction, createFlightPlayerActions, setupFlightListItemPlayer, createZoomToFlightAction, createFlightVisualizationAction, createFlightMovieActions, createExportFlightAction, importFlights } from "./src/actions/flightActions.js";
 export type * from "./src/actions/flightActions.d.ts";
 export { createListItemDeleteAction, createListItemBulkAction, createListExportAction, createListImportAction, importIntoLayer } from "./src/actions/listActions.js";
 export type * from "./src/actions/listActions.d.ts";
@@ -317,8 +329,6 @@ export { getBalloonPosition, setBalloonPosition, setupBalloonPositionListener }
 export type * from "./src/featureInfo/balloonHelper.d.ts";
 export { getHighlightStyleFromStyle, getHighlightStyle, getClusterHighlightStyle, featureInfoViewSymbol } from "./src/featureInfo/featureInfo.js";
 export type * from "./src/featureInfo/featureInfo.d.ts";
-export { getWindowComponentOptions, default as OverviewMap, overviewMapWindowId } from "./src/navigation/overviewMap.js";
-export type * from "./src/navigation/overviewMap.d.ts";
 export { createVueI18n, setupI18n } from "./src/vuePlugins/i18n.js";
 export type * from "./src/vuePlugins/i18n.d.ts";
 export { default as I18nCollection, i18nPluginSymbol } from "./src/i18n/i18nCollection.js";

package/index.js

@@ -3,10 +3,10 @@ import './src/styles/main.scss';
 
 export { default as StyleSelector } from './src/actions/StyleSelector.vue';
 export {
+  addLoadingOverlay,
   callSafeAction,
   createMapButtonAction,
   createToggleAction,
-  createOverviewMapAction,
   createModalAction,
   createLinkAction,
   createGoToViewpointAction,
@@ -38,6 +38,7 @@ export {
   setupFlightListItemPlayer,
   createZoomToFlightAction,
   createFlightVisualizationAction,
+  createFlightMovieActions,
   createExportFlightAction,
   importFlights,
 } from './src/actions/flightActions.js';
@@ -66,6 +67,9 @@ export { default as OpenSplashScreenCallback } from './src/callback/openSplashSc
 export { default as CloseSplashScreenCallback } from './src/callback/closeSplashScreenCallback.js';
 export { default as ToggleNavbarButtonCallback } from './src/callback/toggleNavbarButtonCallback.js';
 export { default as ToggleToolbarButtonCallback } from './src/callback/toggleToolbarButtonCallback.js';
+export { default as ActivateMapCallback } from './src/callback/activateMapCallback.js';
+export { default as ActivateOverviewMapCallback } from './src/callback/activateOverviewMapCallback.js';
+export { default as DeactivateOverviewMapCallback } from './src/callback/deactivateOverviewMapCallback.js';
 export { default as VcsNavbar } from './src/application/VcsNavbar.vue';
 export {
   default as VcsApp,
@@ -208,11 +212,7 @@ export { default as MapNavCompass } from './src/navigation/MapNavCompass.vue';
 export { default as MapNavigation } from './src/navigation/MapNavigation.vue';
 export { default as ObliqueRotation } from './src/navigation/ObliqueRotation.vue';
 export { default as OrientationToolsButton } from './src/navigation/OrientationToolsButton.vue';
-export {
-  getWindowComponentOptions,
-  default as OverviewMap,
-  overviewMapWindowId,
-} from './src/navigation/overviewMap.js';
+export { default as OverviewMap } from './src/navigation/overviewMap.js';
 export { default as OverviewMapClickedInteraction } from './src/navigation/overviewMapClickedInteraction.js';
 export { default as TiltSlider } from './src/navigation/TiltSlider.vue';
 export { default as VcsCompass } from './src/navigation/VcsCompass.vue';
@@ -358,6 +358,8 @@ export { default as VcsFeatureTransforms } from './src/components/vector-propert
 export { default as VcsSnapTo } from './src/components/vector-properties/VcsSnapTo.vue';
 export { default as VcsFeatureStyleComponent } from './src/components/style/VcsFeatureStyleComponent.vue';
 export { default as AbstractConfigEditor } from './src/components/plugins/AbstractConfigEditor.vue';
+export { default as VcsWorkspaceWrapper } from './src/components/plugins/VcsWorkspaceWrapper.vue';
+export { default as VcsLoadingOverlay } from './src/components/plugins/VcsLoadingOverlay.vue';
 export { default as VcsFileDrop } from './src/components/import/VcsFileDrop.vue';
 export { default as VcsImportComponent } from './src/components/import/VcsImportComponent.vue';
 export { default as VcsExpansionPanel } from './src/components/section/VcsExpansionPanel.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "6.2.0-rc.1",
+  "version": "6.2.0-rc.3",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -19,6 +19,7 @@
     "lint": "npm run lint:js && npm run lint:prettier && npm run lint:types",
     "format": "prettier --write --list-different . && npm run lint:js -- --fix",
     "prepack": "node build/build.js && node build/buildTypes.js",
+    "postinstall": "node build/postInstall.js",
     "install-plugins": "cd plugins && npm i --omit peer --no-package-lock --force",
     "story:dev": "histoire dev",
     "story:build": "histoire build",
@@ -45,7 +46,7 @@
   ],
   "dependencies": {
     "@intlify/core-base": "^9.13.1",
-    "@vcsuite/check": "^2.1.0",
+    "@vcsuite/check": "^3.0.0",
     "@vcsuite/logger": "^1.0.1",
     "@vcsuite/parsers": "^2.0.1",
     "dompurify": "^3.2.4",
@@ -56,8 +57,8 @@
     "vue-i18n": "^9.13.1"
   },
   "peerDependencies": {
-    "@vcmap-cesium/engine": "^11.0.2",
-    "@vcmap/core": "^6.1.6",
+    "@vcmap-cesium/engine": "^11.0.3",
+    "@vcmap/core": "6.2.0-rc.2",
     "ol": "^10.4.0",
     "vue": "~3.4.38",
     "vuetify": "~3.7.14"

package/plugins/@vcmap-show-case/panorama-inspector/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@vcmap-show-case/panorama-inspector",
+  "version": "1.0.0",
+  "main": "src/index.js",
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "description": "",
+  "mapVersion": "^6.2"
+}

package/plugins/@vcmap-show-case/panorama-inspector/src/PanoramaDebugInfo.vue

@@ -0,0 +1,86 @@
+<script setup>
+  import { inject, shallowRef, onUnmounted } from 'vue';
+  import {
+    VcsCheckbox,
+    VcsFormSection,
+    VcsTextField,
+    VcsLabel,
+  } from '@vcmap/ui';
+  import { VContainer, VRow, VCol } from 'vuetify/components';
+
+  const app = inject('vcsApp');
+  /** @type {import("@vcmap/core").PanoramaMap} */
+  const map = app.maps.activeMap; // better be a panorama map;
+
+  const image = shallowRef(map.currentPanoramaImage);
+  const listener = map.currentImageChanged.addEventListener((newImage) => {
+    image.value = newImage;
+  });
+
+  onUnmounted(() => {
+    listener();
+  });
+</script>
+
+<template>
+  <vcs-form-section heading="Information">
+    <v-container class="py-0 px-1">
+      <v-row no-gutters>
+        <v-col>
+          <vcs-label>Image Name</vcs-label>
+        </v-col>
+        <v-col>
+          <vcs-text-field
+            readonly
+            :disabled="true"
+            :model-value="image?.name ?? 'No Image'"
+          />
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <vcs-label>Levels</vcs-label>
+        </v-col>
+        <v-col>
+          <vcs-text-field
+            readonly
+            :disabled="true"
+            :model-value="`${image?.minLevel ?? '0'} - ${image?.maxLevel ?? '0'}`"
+          />
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <vcs-label>Tile Size</vcs-label>
+        </v-col>
+        <v-col>
+          <vcs-text-field
+            readonly
+            :disabled="true"
+            :model-value="image.tileSize.join(' x ') ?? 'No Tile Size'"
+          />
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col> <vcs-label>Has Intensity</vcs-label> </v-col>
+        <v-col>
+          <vcs-checkbox
+            :disabled="true"
+            :model-value="image?.hasIntensity ?? false"
+          />
+        </v-col>
+      </v-row>
+      <v-row no-gutters v-if="image">
+        <v-col> <vcs-label>Has Depth</vcs-label> </v-col>
+        <v-col>
+          <vcs-checkbox
+            :disabled="true"
+            :model-value="image?.hasDepth ?? false"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </vcs-form-section>
+</template>
+
+<style scoped lang="scss"></style>

package/plugins/@vcmap-show-case/panorama-inspector/src/PanoramaDebugTools.vue

@@ -0,0 +1,259 @@
+<script setup>
+  import { inject, onUnmounted, ref, shallowRef, watch } from 'vue';
+  import { VcsCheckbox, VcsFormSection, VcsLabel, VcsSlider } from '@vcmap/ui';
+  import { Color } from '@vcmap-cesium/engine';
+  import {
+    VContainer,
+    VRow,
+    VCol,
+    VColorPicker,
+    VMenu,
+    VCard,
+  } from 'vuetify/components';
+  import {
+    cesiumColorToColor,
+    getStringColor,
+    PanoramaOverlayMode,
+  } from '@vcmap/core';
+  import {
+    createMapMarkerAction,
+    createOsmGlobeAction,
+    setupClickedPrimitive,
+  } from './api.js';
+  import { name } from '../package.json';
+
+  const app = inject('vcsApp');
+  /** @type {import("@vcmap/core").PanoramaMap} */
+  const map = app.maps.activeMap; // better be a panorama map;
+  const clickedPrimitive = setupClickedPrimitive(
+    map,
+    app.plugins.getByKey(name).clickedInteraction,
+  );
+
+  const showClickedPosition = ref(false);
+  watch(showClickedPosition, (newShowClickedPosition) => {
+    clickedPrimitive.show = newShowClickedPosition;
+  });
+
+  const { scene } = map.getCesiumWidget();
+  const enableCesiumInteraction = ref(
+    scene.screenSpaceCameraController.enableInputs,
+  );
+
+  watch(enableCesiumInteraction, (newEnableCesiumInteraction) => {
+    scene.screenSpaceCameraController.enableInputs = newEnableCesiumInteraction;
+
+    if (!newEnableCesiumInteraction) {
+      scene.camera.setView({
+        destination: map.currentPanoramaImage.position,
+        orientation: map.currentPanoramaImage.orientation,
+      });
+    }
+  });
+
+  const { action, destroy } = createOsmGlobeAction(app);
+  const { action: hideMarker, destroy: destroyMarker } =
+    createMapMarkerAction(app);
+
+  const suspendTileLoading = ref(map.panoramaView.suspendTileLoading);
+  watch(suspendTileLoading, (newSuspendTileLoading) => {
+    map.panoramaView.suspendTileLoading = newSuspendTileLoading;
+  });
+
+  const opacity = ref(map.panoramaView.tilePrimitiveCollection.opacity);
+  watch(opacity, (newOpacity) => {
+    map.panoramaView.tilePrimitiveCollection.opacity = newOpacity;
+  });
+
+  const overlayOpacity = ref(
+    map.panoramaView.tilePrimitiveCollection.overlayOpacity,
+  );
+  watch(overlayOpacity, (newOverlayOpacity) => {
+    map.panoramaView.tilePrimitiveCollection.overlayOpacity = newOverlayOpacity;
+  });
+
+  const overlayNaNColor = shallowRef(
+    getStringColor(
+      cesiumColorToColor(
+        map.panoramaView.tilePrimitiveCollection.overlayNaNColor,
+      ),
+    ),
+  );
+  watch(overlayNaNColor, (newOverlayNaNColor) => {
+    map.panoramaView.tilePrimitiveCollection.overlayNaNColor =
+      Color.fromCssColorString(newOverlayNaNColor);
+  });
+
+  const cursorColor = shallowRef(
+    getStringColor(
+      cesiumColorToColor(map.panoramaView.tilePrimitiveCollection.cursorColor),
+    ),
+  );
+  watch(cursorColor, (newCursorColor) => {
+    map.panoramaView.tilePrimitiveCollection.cursorColor =
+      Color.fromCssColorString(newCursorColor);
+  });
+
+  const showIntensity = ref(
+    map.panoramaView.tilePrimitiveCollection.overlay ===
+      PanoramaOverlayMode.Intensity,
+  );
+  const showDepth = ref(
+    map.panoramaView.tilePrimitiveCollection.overlay ===
+      PanoramaOverlayMode.Depth,
+  );
+
+  watch(showIntensity, (newShowIntensity) => {
+    if (newShowIntensity) {
+      showDepth.value = false;
+      map.panoramaView.tilePrimitiveCollection.overlay =
+        PanoramaOverlayMode.Intensity;
+    } else if (!showDepth.value) {
+      map.panoramaView.tilePrimitiveCollection.overlay =
+        PanoramaOverlayMode.None;
+    }
+  });
+
+  watch(showDepth, (newShowDepth) => {
+    if (newShowDepth) {
+      showIntensity.value = false;
+      map.panoramaView.tilePrimitiveCollection.overlay =
+        PanoramaOverlayMode.Depth;
+    } else if (!showIntensity.value) {
+      map.panoramaView.tilePrimitiveCollection.overlay =
+        PanoramaOverlayMode.None;
+    }
+  });
+
+  const showDebug = ref(map.panoramaView.tilePrimitiveCollection.showDebug);
+  watch(showDebug, (newShowDebug) => {
+    map.panoramaView.tilePrimitiveCollection.showDebug = newShowDebug;
+  });
+
+  onUnmounted(() => {
+    clickedPrimitive.destroy();
+    destroy();
+    destroyMarker();
+    map.panoramaView.tilePrimitiveCollection.opacity = 1;
+  });
+</script>
+
+<template>
+  <vcs-form-section
+    heading="Tools"
+    expandable
+    :header-actions="[action, hideMarker]"
+  >
+    <v-container class="py-0 px-1">
+      <v-row no-gutters>
+        <v-col>
+          <VcsCheckbox label="Show Debug" v-model="showDebug"></VcsCheckbox>
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <VcsCheckbox
+            label="Show Intensity"
+            v-model="showIntensity"
+          ></VcsCheckbox>
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <VcsCheckbox label="Show Depth" v-model="showDepth"></VcsCheckbox>
+        </v-col>
+      </v-row>
+      <template v-if="showDepth || showIntensity">
+        <v-row no-gutters>
+          <v-col cols="4">
+            <vcs-label>Overlay Opacity</vcs-label>
+          </v-col>
+          <v-col>
+            <vcs-slider
+              v-model="overlayOpacity"
+              :min="0"
+              :max="1"
+              :step="0.01"
+            />
+          </v-col>
+        </v-row>
+        <v-row no-gutters>
+          <v-col>
+            <vcs-label>Overlay NaN Color</vcs-label>
+          </v-col>
+          <v-col>
+            <v-menu :close-on-content-click="false">
+              <template #activator="{ props }">
+                <v-card
+                  rounded
+                  height="24px"
+                  width="32px"
+                  v-bind="props"
+                  :style="{ backgroundColor: overlayNaNColor }"
+                />
+              </template>
+              <v-color-picker
+                v-model="overlayNaNColor"
+                mode="rgba"
+                width="100%"
+              />
+            </v-menu>
+          </v-col>
+        </v-row>
+      </template>
+      <v-row no-gutters>
+        <v-col>
+          <vcs-label>Cursor Color</vcs-label>
+        </v-col>
+        <v-col>
+          <v-menu :close-on-content-click="false">
+            <template #activator="{ props }">
+              <v-card
+                rounded
+                height="24px"
+                width="32px"
+                v-bind="props"
+                :style="{ backgroundColor: cursorColor }"
+              />
+            </template>
+            <v-color-picker v-model="cursorColor" mode="rgba" width="100%" />
+          </v-menu>
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <VcsCheckbox
+            label="Enable Cesium Interaction"
+            v-model="enableCesiumInteraction"
+          ></VcsCheckbox>
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <VcsCheckbox
+            label="Show Clicked"
+            v-model="showClickedPosition"
+          ></VcsCheckbox>
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <VcsCheckbox
+            label="Suspend Tile Loading"
+            v-model="suspendTileLoading"
+          ></VcsCheckbox>
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col cols="4">
+          <vcs-label>Opacity</vcs-label>
+        </v-col>
+        <v-col>
+          <vcs-slider v-model="opacity" :min="0" :max="1" :step="0.01" />
+        </v-col>
+      </v-row>
+    </v-container>
+  </vcs-form-section>
+</template>
+
+<style scoped lang="scss"></style>

package/plugins/@vcmap-show-case/panorama-inspector/src/PanoramaInspector.vue

@@ -0,0 +1,31 @@
+<script setup>
+  import { ref, inject, onUnmounted } from 'vue';
+  import { PanoramaMap } from '@vcmap/core';
+  import { VSheet, VCard } from 'vuetify/components';
+  import PanoramaDebugInfo from './PanoramaDebugInfo.vue';
+  import PanoramaDebugTools from './PanoramaDebugTools.vue';
+
+  /** @type {VcsUiApp} */
+  const app = inject('vcsApp');
+  const isPanorama = ref(app.maps.activeMap instanceof PanoramaMap);
+
+  const listener = app.maps.mapActivated.addEventListener((map) => {
+    isPanorama.value = map instanceof PanoramaMap;
+  });
+
+  onUnmounted(() => {
+    listener();
+  });
+</script>
+
+<template>
+  <v-sheet>
+    <template v-if="isPanorama">
+      <panorama-debug-info />
+      <panorama-debug-tools />
+    </template>
+    <v-card v-else> Switch to panorama map </v-card>
+  </v-sheet>
+</template>
+
+<style scoped lang="scss"></style>