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

package/src/components/plugins/AbstractWorkspaceItemCreator.vue.d.ts

@@ -0,0 +1,82 @@
+declare const _default: import("vue").DefineComponent<{
+    showFooter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showAdd: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disableAdd: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipAdd: {
+        type: StringConstructor;
+        default: string;
+    };
+    newButtonTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    disableNew: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipNew: {
+        type: StringConstructor;
+        default: string;
+    };
+    actions: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}, {
+    workspaceHidden: import("vue").ComputedRef<boolean>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("addClicked" | "newClicked")[], "addClicked" | "newClicked", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    showFooter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showAdd: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disableAdd: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipAdd: {
+        type: StringConstructor;
+        default: string;
+    };
+    newButtonTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    disableNew: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipNew: {
+        type: StringConstructor;
+        default: string;
+    };
+    actions: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>> & {
+    onAddClicked?: ((...args: any[]) => any) | undefined;
+    onNewClicked?: ((...args: any[]) => any) | undefined;
+}, {
+    actions: unknown[];
+    showFooter: boolean;
+    showAdd: boolean;
+    disableAdd: boolean;
+    tooltipAdd: string;
+    newButtonTitle: string;
+    disableNew: boolean;
+    tooltipNew: string;
+}, {}>;
+export default _default;

package/src/components/section/VcsExpansionPanel.vue

@@ -4,8 +4,8 @@
     VExpansionPanelText,
     VExpansionPanelTitle,
     VIcon,
-    VTooltip,
     VListItemTitle,
+    VTooltip,
   } from 'vuetify/components';
   import { computed, ref, useSlots } from 'vue';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
@@ -96,7 +96,9 @@
     line-height: 1.2;
     padding: 0 8px;
   }
-
+  :deep(.v-list-item-title) > span {
+    font-weight: bold;
+  }
   .vcs-panel-title__append {
     width: 90%;
     display: inline-block;
@@ -104,8 +106,16 @@
     text-overflow: ellipsis;
     vertical-align: bottom;
   }
-
   :deep(.v-expansion-panel-text__wrapper) {
     padding: 0 0;
   }
 </style>
+
+<style lang="scss">
+  .v-expansion-panels {
+    z-index: auto;
+    > div:not(:last-child):has(.vcs-expansion-panel) {
+      border-bottom: 1px solid rgb(var(--v-theme-base-lighten-2));
+    }
+  }
+</style>

package/src/components/vector-properties/VcsVectorPropertiesComponent.vue.d.ts

@@ -84,7 +84,7 @@ declare const _default: import("vue").DefineComponent<{
         } | undefined;
         getEyeOffset: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined;
         heightAboveGround: number | undefined;
-        getHeightAboveGround: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
+        getHeightAboveGround: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number | undefined;
         skirt: number;
         getSkirt: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
         groundLevel: number | undefined;

package/src/contentTree/LayerSwap.vue

@@ -72,11 +72,15 @@
       const wmsGroupItemsMap = getWmsGroupItemsMap(app);
 
       /**
-       * @param {import("@vcmap/core").Layer}l
+       * @param {import("@vcmap/core").Layer} l
        * @returns {boolean}
        */
       const layerFilter = (l) => {
-        return l.active && l[moduleIdSymbol] !== volatileModuleId;
+        return (
+          l.active &&
+          l[moduleIdSymbol] !== volatileModuleId &&
+          l.isSupported(app.maps.activeMap)
+        );
       };
 
       function getLayerTreeItems() {
@@ -101,11 +105,16 @@
 
       const items = shallowRef(getLayerTreeItems());
 
-      const listener = app.layers.stateChanged.addEventListener(() => {
-        items.value = getLayerTreeItems();
-      });
+      const listeners = [
+        app.layers.stateChanged.addEventListener(() => {
+          items.value = getLayerTreeItems();
+        }),
+        app.maps.mapActivated.addEventListener(() => {
+          items.value = getLayerTreeItems();
+        }),
+      ];
 
-      onUnmounted(() => listener());
+      onUnmounted(() => listeners.forEach((l) => l()));
 
       return {
         items,

package/src/featureInfo/featureInfo.js

@@ -229,10 +229,7 @@ export function getGroupedFeatureList(app, features, position = undefined) {
     if (layerName) {
       if (!groups[layerName]) {
         const title = app.layers.getByKey(layerName)?.properties?.title;
-        groups[layerName] = {
-          name: layerName,
-          title: title || layerName,
-        };
+        groups[layerName] = { name: layerName, title: title || layerName };
       }
       listItem.group = layerName;
     }
@@ -265,10 +262,7 @@ export function createFeatureInfoSession(app) {
     stopped.destroy();
   };
 
-  return {
-    stopped,
-    stop,
-  };
+  return { stopped, stop };
 }
 
 /**
@@ -307,11 +301,7 @@ function setupFeatureInfoTool(app) {
     }
     if (!app.toolboxManager.has('featureInfo')) {
       app.toolboxManager.add(
-        {
-          id: 'featureInfo',
-          type: ToolboxType.SINGLE,
-          action,
-        },
+        { id: 'featureInfo', type: ToolboxType.SINGLE, action },
         vcsAppSymbol,
         { desktop: true, tablet: true, mobile: true },
       );
@@ -743,11 +733,7 @@ class FeatureInfo extends Collection {
         }
       }
       this._app.windowManager.add(
-        {
-          id: this._windowId,
-          ...windowComponentOptions,
-          props,
-        },
+        { id: this._windowId, ...windowComponentOptions, props },
         vcsAppSymbol,
       );
 
@@ -821,13 +807,8 @@ class FeatureInfo extends Collection {
       {
         id,
         component: ClusterFeatureComponent,
-        props: reactive({
-          items,
-          groups,
-        }),
-        state: {
-          headerTitle: 'featureInfo.cluster.headerTitle',
-        },
+        props: reactive({ items, groups }),
+        state: { headerTitle: 'featureInfo.cluster.headerTitle' },
         slot: WindowSlot.DYNAMIC_LEFT,
       },
       vcsAppSymbol,

package/src/featureInfo/iframeWmsFeatureInfoView.d.ts

@@ -7,6 +7,8 @@ export type IframeWmsFeatureInfoViewOptions = import("./abstractFeatureInfoView.
  * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { infoFormat: string, title?: string }} IframeWmsFeatureInfoViewOptions
  * @property {string} infoFormat - Specifies the response format of WMS GetFeatureInfo
  * @property {string} [title] - optional title for the <iframe>
+ * @property {string} [sandbox] - optional sandbox attribute for the <iframe>
+ * @property {boolean} [disableSandbox] - optional flag to disable the sandbox attribute for the <iframe>
  */
 /**
  * @class
@@ -26,6 +28,14 @@ declare class IframeWmsFeatureInfoView extends AbstractFeatureInfoView {
      * @type {string|undefined}
      */
     title: string | undefined;
+    /**
+     * @type {string}
+     */
+    sandbox: string;
+    /**
+     * @type {boolean}
+     */
+    disableSandbox: boolean;
     /**
      * Gets feature info from WMS GetFeatureInfo in html/text format
      * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo

package/src/featureInfo/iframeWmsFeatureInfoView.js

@@ -6,6 +6,8 @@ import IframeComponent from './IframeComponent.vue';
  * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { infoFormat: string, title?: string }} IframeWmsFeatureInfoViewOptions
  * @property {string} infoFormat - Specifies the response format of WMS GetFeatureInfo
  * @property {string} [title] - optional title for the <iframe>
+ * @property {string} [sandbox] - optional sandbox attribute for the <iframe>
+ * @property {boolean} [disableSandbox] - optional flag to disable the sandbox attribute for the <iframe>
  */
 
 /**
@@ -35,6 +37,39 @@ class IframeWmsFeatureInfoView extends AbstractFeatureInfoView {
      * @type {string|undefined}
      */
     this.title = options.title || undefined;
+    /**
+     * @type {string}
+     */
+    this.sandbox = options.sandbox || '';
+    /**
+     * @type {boolean}
+     */
+    this.disableSandbox = options.disableSandbox || false;
+  }
+
+  /**
+   * @param {import("../vcsUiApp.js").default} app
+   * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
+   * @param {import("@vcmap/core").Layer} layer
+   * @returns {import("../manager/window/windowManager.js").WindowComponentOptions}
+   */
+  getWindowComponentOptions(app, featureInfo, layer) {
+    const componentOptions = super.getWindowComponentOptions(
+      app,
+      featureInfo,
+      layer,
+    );
+    const resolution = app.maps.activeMap.getCurrentResolution(
+      featureInfo.position,
+    );
+    componentOptions.props.src =
+      layer.featureProvider.wmsSource.getFeatureInfoUrl(
+        featureInfo.position,
+        resolution,
+        getOlProj('EPSG:3857'),
+        { INFO_FORMAT: this.infoFormat },
+      );
+    return componentOptions;
   }
 
   /**
@@ -52,6 +87,7 @@ class IframeWmsFeatureInfoView extends AbstractFeatureInfoView {
         { INFO_FORMAT: this.infoFormat },
       ),
       title: this.title,
+      ...(!this.disableSandbox && { sandbox: this.sandbox }),
     };
   }
 
@@ -66,6 +102,12 @@ class IframeWmsFeatureInfoView extends AbstractFeatureInfoView {
     if (this.title) {
       config.title = this.title;
     }
+    if (this.sandbox) {
+      config.sandbox = this.sandbox;
+    }
+    if (this.disableSandbox) {
+      config.disableSandbox = this.disableSandbox;
+    }
     return config;
   }
 }

package/src/i18n/de.d.ts

@@ -114,6 +114,7 @@ declare namespace messages {
             let CesiumMap: string;
             let OpenlayersMap: string;
             let ObliqueMap: string;
+            let PanoramaMap: string;
         }
         namespace menu {
             let tooltip: string;
@@ -205,8 +206,11 @@ declare namespace messages {
         export let pin: string;
         export let close: string;
         export let add: string;
+        let _new: string;
+        export { _new as new };
         export let apply: string;
         export let cancel: string;
+        export let addToMyWorkspace: string;
         export namespace _import {
             let submit: string;
             let fileDrop: string;

package/src/i18n/de.js

@@ -14,6 +14,7 @@ const messages = {
       CesiumMap: '3D-Karte',
       OpenlayersMap: '2D-Karte',
       ObliqueMap: 'Schrägluftbildkarte',
+      PanoramaMap: 'Panoramabildkarte',
     },
     menu: {
       tooltip: 'Menü',
@@ -93,8 +94,10 @@ const messages = {
     pin: 'Fenster andocken',
     close: 'Fenster schließen',
     add: 'Hinzufügen',
+    new: 'Neu',
     apply: 'Anwenden',
     cancel: 'Abbrechen',
+    addToMyWorkspace: 'Zu Mein Arbeitsbereich hinzufügen',
     import: {
       submit: 'Importieren',
       fileDrop: 'Dateien hierher ziehen',

package/src/i18n/en.d.ts

@@ -114,6 +114,7 @@ declare namespace messages {
             let CesiumMap: string;
             let OpenlayersMap: string;
             let ObliqueMap: string;
+            let PanoramaMap: string;
         }
         namespace menu {
             let tooltip: string;
@@ -205,8 +206,11 @@ declare namespace messages {
         export let pin: string;
         export let close: string;
         export let add: string;
+        let _new: string;
+        export { _new as new };
         export let apply: string;
         export let cancel: string;
+        export let addToMyWorkspace: string;
         export namespace _import {
             let submit: string;
             let fileDrop: string;

package/src/i18n/en.js

@@ -14,6 +14,7 @@ const messages = {
       CesiumMap: '3D map',
       OpenlayersMap: '2D map',
       ObliqueMap: 'Oblique imagery map',
+      PanoramaMap: 'Panorama imagery map',
     },
     menu: {
       tooltip: 'Menu',
@@ -93,8 +94,10 @@ const messages = {
     pin: 'Dock window',
     close: 'Close window',
     add: 'Add',
+    new: 'New',
     apply: 'Apply',
     cancel: 'Cancel',
+    addToMyWorkspace: 'Add to My Workspace',
     import: {
       submit: 'Import',
       fileDrop: 'Drop files here',

package/src/legend/VcsLegend.vue

@@ -2,10 +2,11 @@
   <v-sheet class="overflow-y-auto vcs-legend">
     <v-expansion-panels
       variant="accordion"
+      flat
       multiple
       v-if="entries.length > 0"
       v-model="panels"
-      class="rounded-0"
+      class="rounded-0 legend-panels"
     >
       <vcs-expansion-panel
         v-for="(entry, i) in entries"
@@ -142,4 +143,7 @@
     background-color: rgb(var(--v-theme-base-lighten-2));
     z-index: 1;
   }
+  .legend-panels .vcs-expansion-panel:not(:last-child) {
+    border-bottom: 1px solid rgb(var(--v-theme-base-lighten-2));
+  }
 </style>

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
@@ -79,6 +84,7 @@
     ObliqueViewDirection,
     startRotation,
     rotationMapControlSymbol,
+    PanoramaMap,
   } from '@vcmap/core';
   import { VContainer, VRow } from 'vuetify/components';
   import { useDisplay } from 'vuetify';
@@ -207,6 +213,7 @@
     THREE_D: '3d',
     TWO_D: '2d',
     OBLIQUE: 'oblique',
+    PANORAMA: 'panorama',
   };
 
   function getViewModeForMap(map) {
@@ -214,6 +221,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 +234,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 +331,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,9 +355,20 @@
           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);
+          }
         },
       });
 
@@ -420,6 +459,9 @@
         isOblique: computed(
           () => viewMode.value === OrientationToolsViewMode.OBLIQUE,
         ),
+        isPanorama: computed(
+          () => viewMode.value === OrientationToolsViewMode.PANORAMA,
+        ),
         zoomIn() {
           zoom(app.maps.activeMap);
         }, // debounce?

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

@@ -7,6 +7,7 @@ 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: {

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

@@ -5,6 +5,11 @@ export function getWindowComponentOptions(): import("../manager/window/windowMan
 export const overviewMapWindowId: "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.