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

package/src/navigation/MapNavigation.vue

@@ -35,8 +35,13 @@
           :disabled="movementApiCallsDisabled"
         />
       </v-row>
-      <v-row justify="center" v-if="is3D">
-        <TiltSlider v-model="tilt" :disabled="movementApiCallsDisabled" />
+      <v-row justify="center" v-if="is3D || isPanorama">
+        <TiltSlider
+          v-model="tilt"
+          :disabled="movementApiCallsDisabled"
+          :max-tilt="isPanorama ? 89 : undefined"
+          :min-tilt="isPanorama ? -89 : undefined"
+        />
       </v-row>
       <v-row v-if="!hideRotationButton && is3D" justify="center">
         <OrientationToolsButton
@@ -61,10 +66,10 @@
       <v-row justify="center">
         <OrientationToolsButton
           v-if="showOverviewButton"
-          :icon="overviewAction.icon"
-          :tooltip="overviewAction.title"
-          :color="overviewAction.active ? 'primary' : undefined"
-          @click.stop="overviewAction.callback($event)"
+          icon="$vcsMap"
+          tooltip="navigation.overviewMapTooltip"
+          :color="overviewMapState ? 'primary' : undefined"
+          @click.stop="toggleOverviewMap"
         />
       </v-row>
     </template>
@@ -79,16 +84,13 @@
     ObliqueViewDirection,
     startRotation,
     rotationMapControlSymbol,
+    PanoramaMap,
   } from '@vcmap/core';
   import { VContainer, VRow } from 'vuetify/components';
   import { useDisplay } from 'vuetify';
   import { Math as CesiumMath } from '@vcmap-cesium/engine';
-  import { createOverviewMapAction } from '../actions/actionHelper.js';
   import { createLocatorAction } from './locatorHelper.js';
-  import {
-    getWindowComponentOptions,
-    overviewMapLayerSymbol,
-  } from './overviewMap.js';
+  import { overviewMapLayerSymbol } from './overviewMap.js';
   import VcsCompass from './VcsCompass.vue';
   import VcsZoomButton from './VcsZoomButton.vue';
   import TiltSlider from './TiltSlider.vue';
@@ -207,6 +209,7 @@
     THREE_D: '3d',
     TWO_D: '2d',
     OBLIQUE: 'oblique',
+    PANORAMA: 'panorama',
   };
 
   function getViewModeForMap(map) {
@@ -214,6 +217,8 @@
       return OrientationToolsViewMode.OBLIQUE;
     } else if (map instanceof CesiumMap) {
       return OrientationToolsViewMode.THREE_D;
+    } else if (map instanceof PanoramaMap) {
+      return OrientationToolsViewMode.PANORAMA;
     }
     return OrientationToolsViewMode.TWO_D;
   }
@@ -225,16 +230,24 @@
    * @returns {Promise<void>}
    */
   async function zoom(map, out = false, zoomFactor = 2) {
-    const viewpoint = await map.getViewpoint();
-    if (out) {
-      viewpoint.distance *= zoomFactor;
+    if (map instanceof PanoramaMap) {
+      if (out) {
+        map.panoramaCameraController.zoomOut();
+      } else {
+        map.panoramaCameraController.zoomIn();
+      }
     } else {
-      viewpoint.distance /= zoomFactor;
+      const viewpoint = await map.getViewpoint();
+      if (out) {
+        viewpoint.distance *= zoomFactor;
+      } else {
+        viewpoint.distance /= zoomFactor;
+      }
+      viewpoint.animate = true;
+      viewpoint.duration = 0.5;
+      viewpoint.cameraPosition = null;
+      await map.gotoViewpoint(viewpoint);
     }
-    viewpoint.animate = true;
-    viewpoint.duration = 0.5;
-    viewpoint.cameraPosition = null;
-    await map.gotoViewpoint(viewpoint);
   }
 
   /**
@@ -314,11 +327,22 @@
           return headingRef.value;
         },
         async set(headingValue) {
-          const vp = await app.maps.activeMap.getViewpoint();
-          delete vp.cameraPosition;
-          vp.heading = headingValue;
-          vp.animate = true;
-          app.maps.activeMap.gotoViewpoint(vp);
+          if (app.maps.activeMap instanceof PanoramaMap) {
+            const { camera } = app.maps.activeMap.getCesiumWidget();
+            camera.setView({
+              orientation: {
+                heading: CesiumMath.toRadians(headingValue),
+                pitch: camera.pitch,
+                roll: camera.roll,
+              },
+            });
+          } else {
+            const vp = await app.maps.activeMap.getViewpoint();
+            delete vp.cameraPosition;
+            vp.heading = headingValue;
+            vp.animate = true;
+            app.maps.activeMap.gotoViewpoint(vp);
+          }
         },
       });
 
@@ -327,29 +351,33 @@
           return tiltRef.value;
         },
         set(tiltValue) {
-          const vp = app.maps.activeMap.getViewpointSync(); // XXX make async and debounce
-          vp.pitch = tiltValue;
-          app.maps.activeMap.gotoViewpoint(vp);
+          if (app.maps.activeMap instanceof PanoramaMap) {
+            const { camera } = app.maps.activeMap.getCesiumWidget();
+            camera.setView({
+              orientation: {
+                heading: camera.heading,
+                pitch: CesiumMath.toRadians(tiltValue),
+                roll: camera.roll,
+              },
+            });
+          } else {
+            const vp = app.maps.activeMap.getViewpointSync(); // XXX make async and debounce
+            vp.pitch = tiltValue;
+            app.maps.activeMap.gotoViewpoint(vp);
+          }
         },
       });
 
-      const { action: overviewAction, destroy: overviewDestroy } =
-        createOverviewMapAction(
-          app.overviewMap,
-          getWindowComponentOptions(),
-          app.windowManager,
-        );
       const showOverviewButton = ref(
         app.overviewMap.map.layerCollection.size > 0,
       );
-
-      // Locator
-      const { action: locatorAction, destroy: destroyLocator } =
-        createLocatorAction(app);
-
-      const showLocatorButton = computed(() => {
-        return app.uiConfig.config.showLocator ?? true;
-      });
+      const toggleOverviewMap = async () => {
+        if (app.overviewMap.currentState.value) {
+          app.overviewMap.deactivate();
+        } else {
+          await app.overviewMap.activate();
+        }
+      };
 
       const overviewMapListeners = [
         app.overviewMap.map.layerCollection.added.addEventListener(() => {
@@ -368,6 +396,14 @@
         }),
       ];
 
+      // Locator
+      const { action: locatorAction, destroy: destroyLocator } =
+        createLocatorAction(app);
+
+      const showLocatorButton = computed(() => {
+        return app.uiConfig.config.showLocator ?? true;
+      });
+
       const movementApiCallsDisabled = ref(
         !!app.maps.activeMap?.movementApiCallsDisabled,
       );
@@ -390,9 +426,6 @@
       });
 
       onUnmounted(() => {
-        if (overviewDestroy) {
-          overviewDestroy();
-        }
         if (destroyLocator) {
           destroyLocator();
         }
@@ -420,13 +453,15 @@
         isOblique: computed(
           () => viewMode.value === OrientationToolsViewMode.OBLIQUE,
         ),
+        isPanorama: computed(
+          () => viewMode.value === OrientationToolsViewMode.PANORAMA,
+        ),
         zoomIn() {
           zoom(app.maps.activeMap);
         }, // debounce?
         zoomOut() {
           zoom(app.maps.activeMap, true);
         },
-        overviewAction: reactive(overviewAction),
         locatorAction: reactive(locatorAction),
         showOverviewButton,
         showLocatorButton,
@@ -435,6 +470,8 @@
         rotationAction,
         movementApiCallsDisabled,
         mobileLandscape,
+        overviewMapState: app.overviewMap.currentState,
+        toggleOverviewMap,
       };
     },
   };

package/src/navigation/MapNavigation.vue.d.ts

@@ -7,42 +7,9 @@ declare const _default: import("vue").DefineComponent<{}, {
     tilt: import("vue").WritableComputedRef<number>;
     is3D: import("vue").ComputedRef<boolean>;
     isOblique: import("vue").ComputedRef<boolean>;
+    isPanorama: import("vue").ComputedRef<boolean>;
     zoomIn(): void;
     zoomOut(): void;
-    overviewAction: {
-        /**
-         * - reactive and translatable name rendered in overflow
-         */
-        name: string;
-        /**
-         * - reactive and translatable title rendered as tooltip
-         */
-        title?: string | undefined;
-        /**
-         * - icon rendered on the button. If no icon provided, item is rendered in overflow
-         */
-        icon?: string | undefined;
-        /**
-         * - callback function is triggered when the button is clicked
-         */
-        callback: import("../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).ActionCallback;
-        /**
-         * - optional state of button. If active, button is rendered in primary color
-         */
-        active?: boolean | undefined;
-        /**
-         * - optional hasUpdate of button. If true, a yellow notification is rendered next to the button
-         */
-        hasUpdate?: boolean | undefined;
-        /**
-         * - optional background state. If active and background, button is rendered in primary color outlined
-         */
-        background?: boolean | undefined;
-        /**
-         * - optional flag to indicate that the action is disabled
-         */
-        disabled?: boolean | undefined;
-    };
     locatorAction: {
         /**
          * - reactive and translatable name rendered in overflow
@@ -84,5 +51,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     rotationAction: any;
     movementApiCallsDisabled: import("vue").Ref<boolean>;
     mobileLandscape: import("vue").ComputedRef<boolean>;
+    overviewMapState: import("vue").ComputedRef<boolean>;
+    toggleOverviewMap: () => Promise<void>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/navigation/TiltSlider.vue

@@ -12,8 +12,8 @@
       :track-color="'base-lighten-3'"
       thumb-color="base-darken-4"
       track-fill-color="'base-darken-4'"
-      :max="0"
-      :min="-90"
+      :max="maxTilt"
+      :min="minTilt"
       direction="vertical"
       hide-details
       class="vcs-tilt-slider"
@@ -51,6 +51,14 @@
         required: false,
         default: false,
       },
+      minTilt: {
+        type: Number,
+        default: -90,
+      },
+      maxTilt: {
+        type: Number,
+        default: 0,
+      },
     },
     setup(props, { emit }) {
       const fontSize = useFontSize();

package/src/navigation/TiltSlider.vue.d.ts

@@ -8,6 +8,14 @@ declare const _default: import("vue").DefineComponent<{
         required: false;
         default: boolean;
     };
+    minTilt: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxTilt: {
+        type: NumberConstructor;
+        default: number;
+    };
 }, {
     localValue: import("vue").Ref<any>;
     tickSize: import("vue").ComputedRef<number>;
@@ -15,6 +23,8 @@ declare const _default: import("vue").DefineComponent<{
     props: import("@vue/shared").LooseRequired<{
         readonly disabled: boolean;
         readonly modelValue: number;
+        readonly minTilt: number;
+        readonly maxTilt: number;
     } & {}>;
     minWidth: import("vue").ComputedRef<number>;
     minHeight: import("vue").ComputedRef<number>;
@@ -28,7 +38,17 @@ declare const _default: import("vue").DefineComponent<{
         required: false;
         default: boolean;
     };
+    minTilt: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxTilt: {
+        type: NumberConstructor;
+        default: number;
+    };
 }>>, {
     disabled: boolean;
+    minTilt: number;
+    maxTilt: number;
 }, {}>;
 export default _default;

package/src/navigation/VcsCompass.vue

@@ -16,7 +16,9 @@
       @click="!xs && $event.stopPropagation()"
       @direction-click="$emit('update:modelValue', $event)"
       :can-emit="
-        !disabled && !xs && (viewMode === '3d' || viewMode === 'oblique')
+        !disabled &&
+        !xs &&
+        (viewMode === '3d' || viewMode === 'oblique' || viewMode === 'panorama')
       "
       :hide-ticks="viewMode === 'oblique'"
     />

package/src/navigation/overviewMap.d.ts

@@ -1,10 +1,11 @@
-/**
- * @returns {import("../manager/window/windowManager.js").WindowComponentOptions}
- */
-export function getWindowComponentOptions(): import("../manager/window/windowManager.js").WindowComponentOptions;
-export const overviewMapWindowId: "overview-map-container";
+export const overviewMapContainerId: "overview-map-container";
 export const overviewMapLayerSymbol: unique symbol;
 export default OverviewMap;
+/**
+ * panorama behavior
+ * 1. in panorama, only allow clicking on a footprint
+ * 2. in other maps, if you click directly on a panorama footprint, switch maps and go to image (same as clicking on the footprint in the main map)
+ */
 /**
  * A 2D OverviewMap for cesium, openlayers and oblique map.
  * Baselayers are added to the OverviewMap using `showInOverviewMap` flag within the properties bag of a layer configuration.
@@ -21,7 +22,7 @@ declare class OverviewMap {
      */
     private _app;
     /**
-     * @type {boolean}
+     * @type {import("vue").Ref<boolean>}
      * @private
      */
     private _active;
@@ -86,6 +87,11 @@ declare class OverviewMap {
      * @type {number}
      */
     minimumHeight: number;
+    /**
+     * Handles image selection on panorama features
+     * @type {import("@vcmap/core").PanoramaImageSelection}
+     */
+    _panoramaImageSelection: import("@vcmap/core").PanoramaImageSelection;
     /**
      * Handles the events from the overview map.
      * @type {EventHandler}
@@ -118,7 +124,11 @@ declare class OverviewMap {
      * @private
      */
     private _collectionListeners;
-    _uiConfigWatcher: import("vue").WatchStopHandle;
+    _uiConfigWatchers: import("vue").WatchStopHandle[];
+    /**
+     * @type {import("vue").ComputedRef<boolean>}
+     */
+    currentState: import("vue").ComputedRef<boolean>;
     /**
      * @type {boolean}
      */
@@ -131,6 +141,10 @@ declare class OverviewMap {
      * @type {EventHandler|null}
      */
     get eventHandler(): EventHandler | null;
+    /**
+     * @type {import("@vcmap/core").PanoramaImageSelection}
+     */
+    get panoramaImageSelection(): PanoramaImageSelection;
     /**
      * An event which is triggered whenever the overview map is clicked.
      * Is passed a {@link InteractionEvent} as its only argument
@@ -153,7 +167,7 @@ declare class OverviewMap {
      */
     activate(): Promise<void>;
     /**
-     * closes window and clears all listeners
+     * clears all listeners
      */
     deactivate(): void;
     /**
@@ -206,3 +220,4 @@ declare class OverviewMap {
 import { VectorStyleItem } from '@vcmap/core';
 import { OpenlayersMap } from '@vcmap/core';
 import { EventHandler } from '@vcmap/core';
+import { PanoramaImageSelection } from '@vcmap/core';