@vcmap/ui 6.1.14 → 6.2.0-rc.2

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>

package/plugins/@vcmap-show-case/panorama-inspector/src/api.js

@@ -0,0 +1,161 @@
+import {
+  GeometryInstance,
+  Material,
+  MaterialAppearance,
+  Matrix4,
+  Primitive,
+  SphereGeometry,
+  Color,
+  Cartesian3,
+  Globe,
+  ImageryLayer as CesiumImageryLayer,
+  OpenStreetMapImageryProvider,
+} from '@vcmap-cesium/engine';
+import {
+  mercatorToCartesian,
+  PanoramaMap,
+  PanoramaDatasetLayer,
+} from '@vcmap/core';
+import { reactive, ref, computed, watch } from 'vue';
+
+/**
+ * @typedef {Object} ClickedPrimitive
+ * @property {boolean} show
+ * @property {Cartesian3} position
+ * @property {() => void} destroy
+ */
+
+/**
+ * @param {import("@vcmap/core").PanoramaMap} map
+ * @param {ShowClickInteraction} clickedInteraction
+ * @returns {ClickedPrimitive}
+ */
+export function setupClickedPrimitive(map, clickedInteraction) {
+  const position = new Cartesian3();
+  const appearance = new MaterialAppearance({
+    flat: true,
+    material: Material.fromType('Color', { color: Color.ORANGERED }),
+  });
+  const primitive = new Primitive({
+    geometryInstances: [
+      new GeometryInstance({
+        geometry: new SphereGeometry({
+          radius: 0.2,
+        }),
+      }),
+    ],
+    appearance,
+    depthFailAppearance: new MaterialAppearance({
+      translucent: true,
+      material: Material.fromType('Color', {
+        color: Color.LIMEGREEN.withAlpha(0.6),
+      }),
+    }),
+    asynchronous: false,
+    show: false,
+    modelMatrix: Matrix4.IDENTITY,
+  });
+
+  map.getCesiumWidget().scene.primitives.add(primitive);
+  clickedInteraction.clicked.addEventListener((event) => {
+    mercatorToCartesian(event.position, position);
+    primitive.modelMatrix = Matrix4.fromTranslation(position);
+  });
+
+  return {
+    get show() {
+      return primitive.show;
+    },
+    set show(value) {
+      primitive.show = value;
+    },
+    get position() {
+      return position;
+    },
+    destroy() {
+      map.getCesiumWidget().scene.primitives.remove(primitive);
+    },
+  };
+}
+
+/**
+ * @param {import("@vcmap/core").VcsApp} app
+ * @returns {{ action: import("@vcmap/ui").Action, destroy: () => void }}
+ */
+export function createOsmGlobeAction(app) {
+  /** @type {import("@vcmap/core").PanoramaMap} */
+  const map = app.maps.getByType(PanoramaMap.className)[0];
+
+  const action = reactive({
+    name: 'OSM Globe',
+    icon: 'mdi-earth',
+    title: 'Open Street Map Globe',
+    active: false,
+    callback() {
+      if (action.active) {
+        map.getCesiumWidget().scene.globe = undefined;
+        action.active = false;
+      } else {
+        const { scene } = map.getCesiumWidget();
+        scene.globe = new Globe();
+        scene.imageryLayers.add(
+          new CesiumImageryLayer(
+            new OpenStreetMapImageryProvider({ maximumLevel: 18 }),
+          ),
+        );
+        action.active = true;
+      }
+    },
+  });
+
+  return {
+    action,
+    destroy: () => {
+      if (map.initialized) {
+        map.getCesiumWidget().scene.globe = undefined;
+      }
+    },
+  };
+}
+
+/**
+ * @param {import("@vcmap/core").VcsApp} app
+ * @returns {{action: import("@vcmap/ui").VcsAction, destroy(): void}}
+ */
+export function createMapMarkerAction(app) {
+  const hideFootprint = ref(false);
+
+  const hideFootprintWatcher = watch(hideFootprint, () => {
+    for (const layer of app.layers) {
+      if (layer instanceof PanoramaDatasetLayer) {
+        layer.hideInPanorama = hideFootprint.value;
+      }
+    }
+  });
+
+  const layerAdded = app.layers.added.addEventListener((layer) => {
+    if (layer instanceof PanoramaDatasetLayer) {
+      layer.hideInPanorama = hideFootprint.value;
+    }
+  });
+
+  const action = reactive({
+    name: 'Hide Footprint',
+    icon: computed(() => {
+      return hideFootprint.value ? 'mdi-map-marker-off' : 'mdi-map-marker';
+    }),
+    title: 'Hide Footprint',
+    active: computed(() => hideFootprint.value),
+    callback() {
+      hideFootprint.value = !hideFootprint.value;
+    },
+  });
+
+  return {
+    action,
+    destroy() {
+      hideFootprintWatcher();
+      layerAdded();
+    },
+  };
+}

package/plugins/@vcmap-show-case/panorama-inspector/src/index.js

@@ -0,0 +1,57 @@
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import { name, version, mapVersion } from '../package.json';
+import PanoramaInspector from './PanoramaInspector.vue';
+import ShowClickInteraction from './showClickInteraction.js';
+
+export default function panoramaInspector() {
+  let destroy;
+  let clickedInteraction;
+  let removeInteraction;
+  let clickedPrimitive;
+
+  return {
+    name,
+    version,
+    mapVersion,
+    get clickedInteraction() {
+      return clickedInteraction;
+    },
+    get clickedPrimitive() {
+      return clickedPrimitive;
+    },
+    async initialize(app) {
+      const { action, destroy: destroyAction } = createToggleAction(
+        {
+          name: 'Panorama Inspector',
+        },
+        {
+          id: 'panorama-inspector',
+          state: {
+            headerTitle: 'panoramaInspector.title',
+          },
+          component: PanoramaInspector,
+          slot: WindowSlot.DYNAMIC_RIGHT,
+        },
+        app.windowManager,
+        name,
+      );
+      app.navbarManager.add(
+        { id: 'panorama-inspector', action },
+        name,
+        ButtonLocation.MENU,
+      );
+      clickedInteraction = new ShowClickInteraction();
+      removeInteraction =
+        app.maps.eventHandler.addPersistentInteraction(clickedInteraction);
+      destroy = destroyAction;
+    },
+    destroy() {
+      destroy?.();
+      removeInteraction?.();
+      clickedInteraction?.destroy();
+      clickedInteraction = undefined;
+      clickedPrimitive?.destroy();
+      clickedPrimitive = undefined;
+    },
+  };
+}

package/plugins/@vcmap-show-case/panorama-inspector/src/showClickInteraction.js

@@ -0,0 +1,20 @@
+import { AbstractInteraction, EventType, VcsEvent } from '@vcmap/core';
+
+export default class ShowClickInteraction extends AbstractInteraction {
+  constructor() {
+    super(EventType.CLICK);
+
+    this.clicked = new VcsEvent();
+  }
+
+  pipe(event) {
+    if (
+      event.map.className === 'PanoramaMap' &&
+      !event.map.getCesiumWidget().scene.screenSpaceCameraController
+        .enableInputs
+    ) {
+      this.clicked.raiseEvent(event);
+    }
+    return Promise.resolve(event);
+  }
+}

package/plugins/@vcmap-show-case/project-selector/src/ModulesListComponent.vue

@@ -46,6 +46,7 @@
         default: true,
       },
     },
+    emits: ['toggle-module'],
     methods: {
       toggle(module) {
         if (this.toggleable) {

package/plugins/@vcmap-show-case/toolbox-example/src/TriStateExampleWindow.vue

@@ -7,7 +7,6 @@
   </v-sheet>
 </template>
 
-<style scoped></style>
 <script>
   import { VSheet } from 'vuetify/components';
 
@@ -19,3 +18,4 @@
     },
   };
 </script>
+<style scoped></style>

package/plugins/@vcmap-show-case/window-tester/src/EmptyComponent.vue

@@ -3,11 +3,6 @@
     <span> Static Window </span>
   </v-sheet>
 </template>
-<style scoped>
-  .vcsTest span {
-    background-color: red;
-  }
-</style>
 <script>
   import { VSheet } from 'vuetify/components';
 
@@ -16,3 +11,8 @@
     components: { VSheet },
   };
 </script>
+<style scoped>
+  .vcsTest span {
+    background-color: red;
+  }
+</style>

package/plugins/@vcmap-show-case/window-tester/src/MyCustomHeader.vue

@@ -20,6 +20,7 @@
         default: 'MyCustomHeader',
       },
     },
+    emits: ['close'],
     setup(props, { emit }) {
       return {
         clicked: () => {

package/plugins/@vcmap-show-case/window-tester/src/WindowExample.vue

@@ -17,7 +17,6 @@
     >
   </div>
 </template>
-<style></style>
 <script>
   import { inject, onUnmounted, ref, computed } from 'vue';
   import { getLogger } from '@vcsuite/logger';
@@ -232,3 +231,4 @@
     },
   };
 </script>
+<style></style>

package/plugins/@vcmap-show-case/window-tester/src/WindowExampleContent.vue

@@ -4,7 +4,6 @@
   </v-sheet>
 </template>
 
-<style scoped></style>
 <script>
   import { VSheet } from 'vuetify/components';
 
@@ -16,3 +15,4 @@
     },
   };
 </script>
+<style scoped></style>

package/plugins/@vcmap-show-case/window-tester/src/WindowExampleToggleChild.vue

@@ -10,7 +10,6 @@
   </v-container>
 </template>
 
-<style scoped></style>
 <script>
   import { VContainer } from 'vuetify/components';
   import { VcsFormButton, WindowSlot } from '@vcmap/ui';
@@ -51,3 +50,4 @@
     },
   };
 </script>
+<style scoped></style>