@vcmap/ui 6.2.4 → 6.3.0-rc.2

package/src/application/attributionsHelper.js

@@ -6,6 +6,7 @@ import { ObliqueMap } from '@vcmap/core';
  * @property {string} provider - name of the data provider
  * @property {number} [year] - year of dataset
  * @property {string} url - link to data provider
+ * @property {string} [icon] - provider logo
  */
 
 /**
@@ -18,12 +19,12 @@ import { ObliqueMap } from '@vcmap/core';
 /**
  * merges attribution entries of same providers
  * @param {Array<AttributionEntry>} entries
- * @returns {Array<{provider: string, years: string, url: string}>}
+ * @returns {Array<{provider: string, years: string, url: string, icon?:string}>}
  */
 export function mergeAttributions(entries) {
   const providers = {};
   entries.forEach(({ attributions }) => {
-    attributions.forEach(({ provider, year, url }) => {
+    attributions.forEach(({ provider, year, url, icon }) => {
       const providerObject = providers[provider];
       if (providerObject) {
         if (year) {
@@ -36,12 +37,16 @@ export function mergeAttributions(entries) {
               const set = new Set([...providerObject.years, Number(year)]);
               providerObject.years = [...set].sort((a, b) => a - b);
             }
+            if (icon && !providerObject.icon) {
+              providerObject.icon = icon;
+            }
           }
         }
       } else {
         providers[provider] = {
           years: year ? [Number(year)] : [],
           url,
+          ...(icon && { icon }),
         };
       }
     });

package/src/application/uiConfigHelper.d.ts

@@ -10,6 +10,12 @@ export function getDataProtection(uiConfig: import("../uiConfig.js").UiConfigObj
  * @returns {import('vue').ComputedRef<import('../uiConfig.js').TextPageType|undefined>}
  */
 export function getImprint(uiConfig: import("../uiConfig.js").UiConfigObject): import('vue').ComputedRef<import('../uiConfig.js').TextPageType | undefined>;
+/**
+ * Creates a computed property for additional footer information configuration.
+ * @param {import("../uiConfig.js").UiConfigObject} uiConfig - The UI configuration object from the app.
+ * @returns {import('vue').ComputedRef<import('../uiConfig.js').TextPageType[]|undefined>}
+ */
+export function getFooterInformation(uiConfig: import("../uiConfig.js").UiConfigObject): import('vue').ComputedRef<import('../uiConfig.js').TextPageType[] | undefined>;
 /**
  * Creates a computed property for mobile logo.
  * @param {import("../vcsUiApp.js").default} app - The VcsUiApp.

package/src/application/uiConfigHelper.js

@@ -1,3 +1,4 @@
+import { getLogger } from '@vcsuite/logger';
 import { computed } from 'vue';
 
 /**
@@ -35,6 +36,33 @@ export function getImprint(uiConfig) {
     return undefined;
   });
 }
+/**
+ * Creates a computed property for additional footer information configuration.
+ * @param {import("../uiConfig.js").UiConfigObject} uiConfig - The UI configuration object from the app.
+ * @returns {import('vue').ComputedRef<import('../uiConfig.js').TextPageType[]|undefined>}
+ */
+export function getFooterInformation(uiConfig) {
+  return computed(() => {
+    if (uiConfig?.footerInformation) {
+      return uiConfig.footerInformation
+        .filter((info) => {
+          if (!info.title && !info.url) {
+            getLogger('uiConfigHelper').warn(
+              'Footer information item skipped, missing title or url',
+              info,
+            );
+            return false;
+          }
+          return true;
+        })
+        .map((info) => ({
+          title: info.title || new URL(info.url, window.location.href).hostname,
+          ...info,
+        }));
+    }
+    return undefined;
+  });
+}
 
 /**
  * Creates a computed property for mobile logo.

package/src/components/vector-properties/VcsFeatureEditingWindow.vue

@@ -59,6 +59,7 @@
     CesiumMap,
     GeometryType,
     is2DLayout,
+    PanoramaMap,
     SessionType,
     TransformationMode,
     VectorProperties,
@@ -280,12 +281,21 @@
         }),
       );
 
-      function updateIs3D() {
-        is3D.value = vcsApp.maps.activeMap instanceof CesiumMap;
+      const defaultVectorProperties = reactive(
+        VectorProperties.getDefaultOptions(),
+      );
+      function activeMapHandler() {
+        const isPanorama = vcsApp.maps.activeMap instanceof PanoramaMap;
+        is3D.value = vcsApp.maps.activeMap instanceof CesiumMap || isPanorama;
+
+        defaultVectorProperties.altitudeMode = isPanorama
+          ? 'absolute'
+          : 'clampToGround';
       }
+
       const mapActivatedListener =
-        vcsApp.maps.mapActivated.addEventListener(updateIs3D);
-      updateIs3D();
+        vcsApp.maps.mapActivated.addEventListener(activeMapHandler);
+      activeMapHandler();
 
       const isGeometryEditing = computed(
         () => editSession.value?.type === SessionType.EDIT_GEOMETRY,
@@ -476,7 +486,7 @@
         is2DFeature,
         isGeometryEditing,
         updateFeatureProperties,
-        defaultVectorProperties: VectorProperties.getDefaultOptions(),
+        defaultVectorProperties,
         showInputs: computed(
           () =>
             !currentTransformationMode.value &&

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

@@ -1,3 +1,5 @@
+/// <reference types="@vcmap-cesium/engine" />
+/// <reference types="@vcmap/core/dist/cesium.js" />
 /**
  * Returns the allowed transformation modes for the provided geometry types and number of features. Rotate is e.g. not allowed for a single point but for multiple points.
  * @param {Set<GeometryType>} geometryTypes A set with all geometry types of the features.
@@ -59,7 +61,127 @@ declare const _default: import("vue").DefineComponent<{
     is2DFeature: import("vue").ComputedRef<boolean>;
     isGeometryEditing: import("vue").ComputedRef<boolean>;
     updateFeatureProperties: (update: import("@vcmap/core").VectorPropertiesOptions) => void;
-    defaultVectorProperties: import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions;
+    defaultVectorProperties: {
+        altitudeMode?: import("@vcmap/core/dist/src/layer/vectorProperties.js", { with: { "resolution-mode": "import" } }).AltitudeModeType | undefined;
+        allowPicking?: boolean | undefined;
+        classificationType?: import("@vcmap/core/dist/src/layer/vectorProperties.js", { with: { "resolution-mode": "import" } }).ClassificationTypeType | undefined;
+        scaleByDistance?: number[] | undefined;
+        eyeOffset?: number[] | undefined;
+        heightAboveGround?: number | undefined;
+        skirt?: number | undefined;
+        groundLevel?: number | undefined;
+        extrudedHeight?: number | undefined;
+        storeysAboveGround?: number | undefined;
+        storeysBelowGround?: number | undefined;
+        storeyHeightsAboveGround?: number | number[] | undefined;
+        storeyHeightsBelowGround?: number | number[] | undefined;
+        modelUrl?: string | undefined;
+        modelScaleX?: number | undefined;
+        modelScaleY?: number | undefined;
+        modelScaleZ?: number | undefined;
+        modelHeading?: number | undefined;
+        modelPitch?: number | undefined;
+        modelRoll?: number | undefined;
+        modelAutoScale?: boolean | undefined;
+        modelOptions?: Record<string, unknown> | undefined;
+        primitiveOptions?: {
+            type: import("@vcmap/core", { with: { "resolution-mode": "import" } }).PrimitiveOptionsType;
+            geometryOptions: {
+                length: number;
+                topRadius: number;
+                bottomRadius: number;
+                slices?: number | undefined;
+                vertexFormat?: {
+                    position: boolean;
+                    normal: boolean;
+                    st: boolean;
+                    bitangent: boolean;
+                    tangent: boolean;
+                    color: boolean;
+                } | undefined;
+            } | {
+                radius?: number | undefined;
+                stackPartitions?: number | undefined;
+                slicePartitions?: number | undefined;
+                vertexFormat?: {
+                    position: boolean;
+                    normal: boolean;
+                    st: boolean;
+                    bitangent: boolean;
+                    tangent: boolean;
+                    color: boolean;
+                } | undefined;
+            } | {
+                radii?: {
+                    x: number;
+                    y: number;
+                    z: number;
+                    clone: (result?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3;
+                    equals: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => boolean;
+                    equalsEpsilon: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined, relativeEpsilon?: number | undefined, absoluteEpsilon?: number | undefined) => boolean;
+                    toString: () => string;
+                } | undefined;
+                innerRadii?: {
+                    x: number;
+                    y: number;
+                    z: number;
+                    clone: (result?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3;
+                    equals: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => boolean;
+                    equalsEpsilon: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined, relativeEpsilon?: number | undefined, absoluteEpsilon?: number | undefined) => boolean;
+                    toString: () => string;
+                } | undefined;
+                minimumClock?: number | undefined;
+                maximumClock?: number | undefined;
+                minimumCone?: number | undefined;
+                maximumCone?: number | undefined;
+                stackPartitions?: number | undefined;
+                slicePartitions?: number | undefined;
+                vertexFormat?: {
+                    position: boolean;
+                    normal: boolean;
+                    st: boolean;
+                    bitangent: boolean;
+                    tangent: boolean;
+                    color: boolean;
+                } | undefined;
+            } | {
+                minimum: {
+                    x: number;
+                    y: number;
+                    z: number;
+                    clone: (result?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3;
+                    equals: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => boolean;
+                    equalsEpsilon: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined, relativeEpsilon?: number | undefined, absoluteEpsilon?: number | undefined) => boolean;
+                    toString: () => string;
+                };
+                maximum: {
+                    x: number;
+                    y: number;
+                    z: number;
+                    clone: (result?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3;
+                    equals: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => boolean;
+                    equalsEpsilon: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined, relativeEpsilon?: number | undefined, absoluteEpsilon?: number | undefined) => boolean;
+                    toString: () => string;
+                };
+                vertexFormat?: {
+                    position: boolean;
+                    normal: boolean;
+                    st: boolean;
+                    bitangent: boolean;
+                    tangent: boolean;
+                    color: boolean;
+                } | undefined;
+            } | undefined;
+            depthFailColor?: string | number[] | {
+                setTransform: (transform?: DOMMatrix2DInit | undefined) => void;
+            } | {
+                addColorStop: (offset: number, color: string) => void;
+            } | undefined;
+            offset?: number[] | undefined;
+            additionalOptions?: Record<string, unknown> | undefined;
+        } | undefined;
+        baseUrl?: string | undefined;
+    };
     showInputs: import("vue").ComputedRef<boolean>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     allowedVectorProperties: {

package/src/contentTree/layerContentTreeItem.d.ts

@@ -74,6 +74,10 @@ declare class LayerContentTreeItem extends VcsObjectContentTreeItem<LayerContent
      * @private
      */
     private _clearListeners;
+    /**
+     * @private
+     */
+    private _determineSupport;
     /**
      * @private
      */

package/src/contentTree/layerContentTreeItem.js

@@ -205,6 +205,17 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
     this._listeners.splice(0);
   }
 
+  /**
+   * @private
+   */
+  _determineSupport() {
+    const isSupported = this._layer.isSupported(this._app.maps.activeMap);
+    this.visible = isSupported || this._showWhenNotSupported;
+    if (this._showWhenNotSupported) {
+      this.disabled = !isSupported;
+    }
+  }
+
   /**
    * @private
    */
@@ -220,42 +231,37 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
       }
     };
 
+    let supportedLayersListener = () => {};
+    const setActiveMap = (map) => {
+      supportedLayersListener();
+      this._determineSupport();
+      supportedLayersListener = map
+        ? map.layerTypesChanged.addEventListener(() => {
+            this._determineSupport();
+          })
+        : () => {};
+    };
     if (!this._layer) {
       this.visible = false;
       this._listeners.push(
         this._app.layers.added.addEventListener(resetHandler),
       );
     } else {
-      let isSupported = this._layer.isSupported(this._app.maps.activeMap);
-      this.visible = isSupported || this._showWhenNotSupported;
-      if (this._showWhenNotSupported) {
-        this.disabled = !isSupported;
-      }
+      setActiveMap(this._app.maps.activeMap);
       this.state = getStateFromLayer(this._layer);
       this._setLayerExtentAction();
       this.setPropertiesFromObject(this._layer);
 
       this._listeners.push(
         this._app.layers.removed.addEventListener(resetHandler),
-      );
-      this._listeners.push(
         this._app.layers.added.addEventListener(resetHandler),
-      );
-
-      this._listeners.push(
         this._layer.stateChanged.addEventListener(() => {
           this.state = getStateFromLayer(this._layer);
         }),
-      );
-
-      this._listeners.push(
-        this._app.maps.mapActivated.addEventListener(() => {
-          isSupported = this._layer.isSupported(this._app.maps.activeMap);
-          this.visible = isSupported || this._showWhenNotSupported;
-          if (this._showWhenNotSupported) {
-            this.disabled = !isSupported;
-          }
-        }),
+        this._app.maps.mapActivated.addEventListener(setActiveMap),
+        () => {
+          supportedLayersListener();
+        },
       );
     }
   }

package/src/contentTree/layerGroupContentTreeItem.d.ts

@@ -50,6 +50,7 @@ declare class LayerGroupContentTreeItem extends ContentTreeItem {
      * @private
      */
     private _clearListeners;
+    _determineSupport(): void;
     /**
      * @private
      */

package/src/contentTree/layerGroupContentTreeItem.js

@@ -118,6 +118,17 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
     this._listeners.splice(0);
   }
 
+  _determineSupport() {
+    const isSupported = this._layers.some((l) =>
+      l.isSupported(this._app.maps.activeMap),
+    );
+
+    this.visible = isSupported || this._showWhenNotSupported;
+    if (this._showWhenNotSupported) {
+      this.disabled = !isSupported;
+    }
+  }
+
   /**
    * @private
    */
@@ -132,15 +143,21 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
         this._setup();
       }
     };
-    const layers = this._layers;
-    let isSupported = layers.some((l) =>
-      l.isSupported(this._app.maps.activeMap),
-    );
 
-    this.visible = isSupported || this._showWhenNotSupported;
-    if (this._showWhenNotSupported) {
-      this.disabled = !isSupported;
-    }
+    let supportedLayersListener = () => {};
+
+    const setActiveMap = (map) => {
+      supportedLayersListener();
+      this._determineSupport();
+      supportedLayersListener = map
+        ? map.layerTypesChanged.addEventListener(() => {
+            this._determineSupport();
+          })
+        : () => {};
+    };
+
+    const layers = this._layers;
+    setActiveMap(this._app.maps.activeMap);
     this.state = getStateFromLayers(layers);
     setViewpointAction(this, this._app, this._defaultViewpoint);
     setStyleAction(
@@ -153,27 +170,16 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
 
     this._listeners.push(
       this._app.layers.removed.addEventListener(resetHandler),
-    );
-    this._listeners.push(this._app.layers.added.addEventListener(resetHandler));
-
-    layers.forEach((layer) => {
-      this._listeners.push(
+      this._app.layers.added.addEventListener(resetHandler),
+      ...layers.map((layer) =>
         layer.stateChanged.addEventListener(() => {
           this.state = getStateFromLayers(layers);
         }),
-      );
-    });
-
-    this._listeners.push(
-      this._app.maps.mapActivated.addEventListener(() => {
-        isSupported = layers.some((l) =>
-          l.isSupported(this._app.maps.activeMap),
-        );
-        this.visible = isSupported || this._showWhenNotSupported;
-        if (this._showWhenNotSupported) {
-          this.disabled = !isSupported;
-        }
-      }),
+      ),
+      this._app.maps.mapActivated.addEventListener(setActiveMap),
+      () => {
+        supportedLayersListener();
+      },
     );
   }
 

package/src/contentTree/wmsGroupContentTreeItem.d.ts

@@ -216,6 +216,7 @@ declare class WMSGroupContentTreeItem extends VcsObjectContentTreeItem<import(".
      * @private
      */
     private _setStateFromLayer;
+    _determineSupport(): void;
     /**
      * Loads WMS entries and creates child items
      * @returns {Promise<void>}

package/src/contentTree/wmsGroupContentTreeItem.js

@@ -574,6 +574,14 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
     }
   }
 
+  _determineSupport() {
+    const isSupported = this._layer.isSupported(this._app.maps.activeMap);
+    this.visible = isSupported || this._showWhenNotSupported;
+    if (this._showWhenNotSupported) {
+      this.disabled = !isSupported;
+    }
+  }
+
   /**
    * Loads WMS entries and creates child items
    * @returns {Promise<void>}
@@ -673,26 +681,31 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
         this._setup();
       }
     };
+
+    let supportedLayersListener = () => {};
+
+    const setActiveMap = (map) => {
+      supportedLayersListener();
+      this._determineSupport();
+      supportedLayersListener = map
+        ? map.layerTypesChanged.addEventListener(() => {
+            this._determineSupport();
+          })
+        : () => {};
+    };
+
     if (!this._layer) {
       this.visible = false;
       this._listeners.push(
         this._app.layers.added.addEventListener(resetHandler),
       );
     } else {
-      let isSupported = this._layer.isSupported(this._app.maps.activeMap);
-      this.visible = isSupported || this._showWhenNotSupported;
-      if (this._showWhenNotSupported) {
-        this.disabled = !isSupported;
-      }
       this.setPropertiesFromObject(this._layer);
+      setActiveMap(this._app.maps.activeMap);
 
       this._listeners.push(
         this._app.layers.removed.addEventListener(resetHandler),
-      );
-      this._listeners.push(
         this._app.layers.added.addEventListener(resetHandler),
-      );
-      this._listeners.push(
         this._layer.stateChanged.addEventListener(() => {
           if (!this._pauseStateChangedListener) {
             this._setStateFromLayer();
@@ -700,16 +713,10 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
             this._setLegend();
           }
         }),
-      );
-      this._listeners.push(
-        this._app.maps.mapActivated.addEventListener(() => {
-          isSupported = this._layer.isSupported(this._app.maps.activeMap);
-          this.visible =
-            (isSupported || this._showWhenNotSupported) && !this._invalid;
-          if (this._showWhenNotSupported) {
-            this.disabled = !isSupported;
-          }
-        }),
+        this._app.maps.mapActivated.addEventListener(setActiveMap),
+        () => {
+          supportedLayersListener();
+        },
       );
 
       if (this._loadOnStartup) {

package/src/featureInfo/balloonHelper.js

@@ -91,10 +91,16 @@ export function setBalloonPosition(windowManager, id, windowPosition, target) {
   }
 
   const { width, height, maxWidth, maxHeight } = windowManager.get(id).position;
+
+  // Get the actual map target bounding rect to account for panel offsets
+  const targetRect = target?.getBoundingClientRect();
+  const offsetX = targetRect ? targetRect.left : 0;
+  const offsetY = targetRect ? targetRect.top : 0;
+
   const mapWindowPosition = getWindowPositionOptionsFromMapEvent(
     new Cartesian2(
-      windowPosition.x - balloonOffset.x,
-      windowPosition.y - balloonOffset.y,
+      windowPosition.x - balloonOffset.x + offsetX,
+      windowPosition.y - balloonOffset.y + offsetY,
     ),
     target,
     WindowAlignment.BOTTOM_LEFT,

package/src/manager/panel/PanelComponent.vue

@@ -10,10 +10,20 @@
       'theme--dark': appIsDark,
       resizable: panelState.resizable,
     }"
-    @mousedown="startResize"
-    @mouseup="stopResize"
   >
-    <slot />
+    <div class="panel-content">
+      <slot />
+    </div>
+    <div
+      class="resize-handle"
+      :class="{
+        'resize-handle-left': isLeft,
+        'resize-handle-right': isRight,
+        'resize-handle-bottom': isBottom,
+        'resize-handle-resizable': panelState.resizable,
+      }"
+      @pointerdown="startResize"
+    ></div>
   </div>
 </template>
 
@@ -53,19 +63,12 @@
           () => props.panelState.location === PanelLocation.BOTTOM,
         ),
         startResize(e) {
-          const { resizable, location } = props.panelState;
-          if (
-            resizable &&
-            ((location === PanelLocation.LEFT &&
-              e.currentTarget.clientWidth - e.offsetX < 4) ||
-              (location === PanelLocation.RIGHT && e.offsetX < 4) ||
-              (location === PanelLocation.BOTTOM && e.offsetY < 4))
-          ) {
-            emit('resize', props.panelState.id);
+          if (!props.panelState.resizable) {
+            return;
           }
-        },
-        stopResize() {
-          emit('resize', undefined);
+          e.preventDefault();
+          e.stopPropagation();
+          emit('resize', props.panelState.id);
         },
       };
     },
@@ -74,39 +77,57 @@
 
 <style scoped lang="scss">
   .panel-component {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .theme--light {
+    background: rgb(var(--v-theme-surface));
+  }
+
+  .theme--dark {
+    background: rgb(var(--v-theme-surface));
+  }
+
+  .panel-content {
+    flex: 1;
+    overflow: auto;
     padding: 0 4px;
+    min-height: 0; /* Important for flex children to be scrollable */
   }
-  .panel-component::after {
-    content: '';
+
+  .resize-handle {
     position: absolute;
     background: rgb(var(--v-theme-surface-light));
   }
 
-  .panel-component-left::after {
+  .resize-handle-left {
     width: 4px;
     top: 0;
     bottom: 0;
     right: 0;
   }
-  .panel-component-left.resizable::after {
-    cursor: ew-resize;
-  }
-  .panel-component-right::after {
+
+  .resize-handle-right {
     width: 4px;
     top: 0;
     bottom: 0;
     left: 0;
   }
-  .panel-component-right.resizable::after {
-    cursor: ew-resize;
-  }
-  .panel-component-bottom::after {
+
+  .resize-handle-bottom {
     left: 0;
     right: 0;
     top: 0;
     height: 4px;
   }
-  .panel-component-bottom.resizable::after {
+
+  .resize-handle-resizable.resize-handle-left,
+  .resize-handle-resizable.resize-handle-right {
+    cursor: ew-resize;
+  }
+
+  .resize-handle-resizable.resize-handle-bottom {
     cursor: n-resize;
   }
 </style>