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

package/src/contentTree/wmsGroupContentTreeItem.d.ts

@@ -16,9 +16,31 @@ export type WMSEntry = {
     name: string;
     active: import("vue").Ref<boolean>;
     activeStyle: import("vue").Ref<string>;
-    title: string;
-    extent: import("@vcmap/core").Extent;
-    styles: Array<WMSStyleEntry>;
+    title?: string | undefined;
+    extent?: import("@vcmap/core").Extent | undefined;
+    styles?: WMSStyleEntry[] | undefined;
+};
+export type SerializedWMSLegend = {
+    url: string;
+    width: number;
+    height: number;
+};
+export type SerializedWMSStyle = {
+    name: string;
+    title?: string | undefined;
+    legend?: SerializedWMSLegend[] | undefined;
+};
+export type SerializedWMSLayer = {
+    name: string;
+    title?: string | undefined;
+    /**
+     * Layer extent, in WGS84 coordinates
+     */
+    extent?: number[] | undefined;
+    styles?: SerializedWMSStyle[] | undefined;
+};
+export type SerializedWMSCapabilities = {
+    layers: Array<SerializedWMSLayer>;
 };
 /**
  * @typedef {import('./contentTreeItem.js').ContentTreeItemOptions &
@@ -41,9 +63,33 @@ export type WMSEntry = {
  * @property {string} name
  * @property {import("vue").Ref<boolean>} active
  * @property {import("vue").Ref<string>} activeStyle
- * @property {string} title
- * @property {import("@vcmap/core").Extent} extent
- * @property {Array<WMSStyleEntry>} styles
+ * @property {string} [title]
+ * @property {import("@vcmap/core").Extent} [extent]
+ * @property {Array<WMSStyleEntry>} [styles]
+ */
+/**
+ * @typedef {Object} SerializedWMSLegend
+ * @property {string} url
+ * @property {number} width
+ * @property {number} height
+ */
+/**
+ * @typedef {Object} SerializedWMSStyle
+ * @property {string} name
+ * @property {string} [title]
+ * @property {SerializedWMSLegend[]} [legend]
+ */
+/**
+ * @typedef {Object} SerializedWMSLayer
+ * @property {string} name
+ * @property {string} [title]
+ * @property {number[]} [extent] Layer extent, in WGS84 coordinates
+ * @property {SerializedWMSStyle[]} [styles]
+ */
+/**
+ * @description The serialized form of WMS Capabilities are used in the configuration to avoid fetching the capabilities on every startup.
+ * @typedef {Object} SerializedWMSCapabilities
+ * @property {Array<SerializedWMSLayer>} layers
  */
 /**
  * A WMSGroupItem, will take over a WMSLayer and request the Capabilities of the layer to show all available

package/src/contentTree/wmsGroupContentTreeItem.js

@@ -2,6 +2,7 @@ import { markVolatile } from '@vcmap/core';
 import { getLogger } from '@vcsuite/logger';
 import { ref } from 'vue';
 import { parseBoolean } from '@vcsuite/parsers';
+import { is } from '@vcsuite/check';
 import deepEqual from 'fast-deep-equal';
 import WMSCapabilities from 'ol/format/WMSCapabilities';
 import { StateActionState } from '../actions/stateRefAction.js';
@@ -10,6 +11,90 @@ import WmsChildContentTreeItem from './wmsChildContentTreeItem.js';
 import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';
 import { legendSymbol } from '../legend/legendHelper.js';
 
+/**
+ *
+ * @param {string} src The OnlineRessource property of the legend
+ * @param {number} width The width of the image
+ * @param {string} title The title of the layer.
+ * @returns {import('../legend/legendHelper.js').StyleLegendItem}
+ */
+function parseLegend(src, width, title) {
+  if (width < 25) {
+    return {
+      type: 'StyleLegendItem',
+      colNr: 1,
+      rows: [{ type: 'IconLegendRow', title, image: { src } }],
+    };
+  }
+  return { type: 'ImageLegendItem', popoutBtn: true, src };
+}
+
+/**
+ *
+ * @param {SerializedWMSCapabilities} capabilities
+ * @returns {WMSEntry[]}
+ */
+function parseSerializedCapabilities(capabilities) {
+  if (capabilities?.layers?.length > 0) {
+    return capabilities.layers
+      .filter((layer) => {
+        if (!is(layer, { name: String })) {
+          getLogger(this.className).warn(
+            `Ignoring WMS Layer without name in layer ${this._layerName}`,
+          );
+          return false;
+        }
+        return true;
+      })
+      .map((layer) => {
+        const styles = layer.styles
+          ?.filter((s) => {
+            if (!is(s, { name: String })) {
+              getLogger(this.className).warn(
+                `Ignoring WMS Style without name in layer ${this._layerName}`,
+              );
+              return false;
+            }
+            return true;
+          })
+          .map((s) => ({
+            name: s.name,
+            title: s.title,
+            legend:
+              s.legend
+                ?.filter((l) => {
+                  if (!is(l, { url: String, width: Number, height: Number })) {
+                    getLogger(this.className).warn(
+                      `Ignoring invalid WMS Legend in style ${s.name} in layer ${this._layerName}`,
+                    );
+                    return false;
+                  }
+                  return true;
+                })
+                .map((l) => parseLegend(l.url, l.width, s.title || '')) || [],
+          }));
+
+        const wmsEntry = {
+          name: layer.name,
+          active: ref(false),
+          activeStyle: ref(''),
+        };
+        if (layer.title) {
+          wmsEntry.title = layer.title;
+        }
+        if (layer.extent) {
+          wmsEntry.extent = layer.extent;
+        }
+        if (styles?.length > 0) {
+          wmsEntry.styles = styles;
+        }
+        return wmsEntry;
+      });
+  } else {
+    return [];
+  }
+}
+
 /**
  * @param {string} rawUrl
  * @param {Record<string, string>} parameters
@@ -49,27 +134,9 @@ async function getWMSEntries(rawUrl, parameters) {
             title: style.Title,
             legend: style.LegendURL?.filter(
               (legend) => legend.OnlineResource,
-            ).map((legend) => {
-              const src = legend.OnlineResource;
-              if (legend.size[0] < 25) {
-                return {
-                  type: 'StyleLegendItem',
-                  colNr: 1,
-                  rows: [
-                    {
-                      type: 'IconLegendRow',
-                      title: layer.Title,
-                      image: { src },
-                    },
-                  ],
-                };
-              }
-              return {
-                type: 'ImageLegendItem',
-                src,
-                popoutBtn: true,
-              };
-            }),
+            ).map((legend) =>
+              parseLegend(legend.OnlineResource, legend.size[0], layer.Title),
+            ),
           };
         }) ?? [];
       return {
@@ -133,9 +200,34 @@ function createWMSChildContentTreeItem(
  * @property {string} name
  * @property {import("vue").Ref<boolean>} active
  * @property {import("vue").Ref<string>} activeStyle
- * @property {string} title
- * @property {import("@vcmap/core").Extent} extent
- * @property {Array<WMSStyleEntry>} styles
+ * @property {string} [title]
+ * @property {import("@vcmap/core").Extent} [extent]
+ * @property {Array<WMSStyleEntry>} [styles]
+ */
+
+/**
+ * @typedef {Object} SerializedWMSLegend
+ * @property {string} url
+ * @property {number} width
+ * @property {number} height
+ */
+/**
+ * @typedef {Object} SerializedWMSStyle
+ * @property {string} name
+ * @property {string} [title]
+ * @property {SerializedWMSLegend[]} [legend]
+ */
+/**
+ * @typedef {Object} SerializedWMSLayer
+ * @property {string} name
+ * @property {string} [title]
+ * @property {number[]} [extent] Layer extent, in WGS84 coordinates
+ * @property {SerializedWMSStyle[]} [styles]
+ */
+/**
+ * @description The serialized form of WMS Capabilities are used in the configuration to avoid fetching the capabilities on every startup.
+ * @typedef {Object} SerializedWMSCapabilities
+ * @property {Array<SerializedWMSLayer>} layers
  */
 
 /**
@@ -504,10 +596,17 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
     this.clickable = !this._setWMSLayersExclusive;
 
     try {
-      const availableWMSEntries = await getWMSEntries(
-        this._layer.url,
-        this._layer.parameters,
-      );
+      let availableWMSEntries = [];
+      if (this._layer.properties.capabilities) {
+        availableWMSEntries = parseSerializedCapabilities(
+          this._layer.properties.capabilities,
+        );
+      } else {
+        availableWMSEntries = await getWMSEntries(
+          this._layer.url,
+          this._layer.parameters,
+        );
+      }
       // check if the layer still exists, it can happen that the layer was removed while fetching the capabilities.
       if (!this._layer) {
         return;

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/i18n/de.d.ts

@@ -527,6 +527,7 @@ declare namespace messages {
         export let select: string;
         let placeholder_1: string;
         export { placeholder_1 as placeholder };
+        export let hideWindow: string;
         export let zoomToFeatureAction: string;
         export let zoomToAll: string;
         export let zoomToAllMobile: string;

package/src/i18n/de.js

@@ -372,6 +372,7 @@ const messages = {
     tooltip: 'Suche',
     select: 'Suchergebnis auswählen',
     placeholder: 'Suche nach Adresse oder Ort/Sehenswürdigkeit',
+    hideWindow: 'Suche ausblenden',
     zoomToFeatureAction: 'Auf Ergebnis zoomen',
     zoomToAll: 'Auf alle Ergebnisse zoomen',
     zoomToAllMobile: 'Auf alle zoomen',

package/src/i18n/en.d.ts

@@ -527,6 +527,7 @@ declare namespace messages {
         export let select: string;
         let placeholder_1: string;
         export { placeholder_1 as placeholder };
+        export let hideWindow: string;
         export let zoomToFeatureAction: string;
         export let zoomToAllMobile: string;
         export let zoomToAll: string;

package/src/i18n/en.js

@@ -372,6 +372,7 @@ const messages = {
     tooltip: 'Search',
     select: 'Select result item',
     placeholder: 'Search for address or landmark/point of interest',
+    hideWindow: 'Hide search',
     zoomToFeatureAction: 'Zoom to result',
     zoomToAllMobile: 'Zoom to all',
     zoomToAll: 'Zoom to all',

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>

package/src/manager/panel/PanelComponent.vue.d.ts

@@ -9,7 +9,6 @@ declare const _default: import("vue").DefineComponent<{
     isRight: import("vue").ComputedRef<boolean>;
     isBottom: import("vue").ComputedRef<boolean>;
     startResize(e: any): void;
-    stopResize(): void;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "resize"[], "resize", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     panelState: {
         type: ObjectConstructor;

package/src/manager/panel/PanelManagerComponent.vue

@@ -1,14 +1,19 @@
 <template>
   <div
     class="vcs-panel-frame panel-manager-component"
-    @mouseup="setResizing(undefined)"
-    @mouseleave="setResizing(undefined)"
+    @pointerup="setResizing(undefined)"
+    @pointerleave="setResizing(undefined)"
     ref="panelFrameRef"
   >
+    <div
+      v-if="resizing"
+      class="resize-overlay"
+      :style="{ cursor: resizeCursor }"
+      @pointermove="resizingFunction"
+    ></div>
     <PanelComponent
       :panel-state="mainPanel.state"
       :style="getPosition(mainPanel)"
-      class="overflow-auto"
     >
       <VcsMainMap />
     </PanelComponent>
@@ -18,7 +23,6 @@
       :panel-state="getState(id)"
       :style="getStyles(id).value"
       :class="getState(id).classes"
-      class="overflow-auto"
       @resize="setResizing"
     >
       <component
@@ -36,6 +40,7 @@
     computed,
     getCurrentInstance,
     inject,
+    onUnmounted,
     reactive,
     ref,
     watch,
@@ -84,7 +89,7 @@
       const { componentIds } = panelManager;
       const panelFrameRef = ref();
       const resizing = ref(undefined);
-      let resizingFunction = () => {};
+      const resizingFunction = ref(() => {});
 
       /**
        * @param {string} id
@@ -126,12 +131,13 @@
         if (panel) {
           let resizeKey;
           if (panel[panelLocationSymbol] === PanelLocation.BOTTOM) {
+            const frameRect = panelFrameRef.value.getBoundingClientRect();
             const height =
-              ((panelFrameRef.value.offsetTop + e.y) /
+              ((frameRect.bottom - e.clientY) /
                 panelFrameRef.value.parentElement.offsetHeight) *
               100;
             setPanelPosition(panelManager, panel, {
-              height: `${Math.round(100 - height)}%`,
+              height: `${Math.round(height)}%`,
             });
           } else {
             const width =
@@ -160,25 +166,21 @@
       const setResizing = (id) => {
         if (id) {
           resizing.value = id;
-          resizingFunction = (e) => {
+          resizingFunction.value = (e) => {
             e.preventDefault();
             resize(panelManager.get(id), e);
           };
-          panelFrameRef.value.addEventListener(
-            'mousemove',
-            resizingFunction,
-            false,
-          );
         } else {
           resizing.value = undefined;
-          panelFrameRef.value.removeEventListener(
-            'mousemove',
-            resizingFunction,
-            false,
-          );
+          resizingFunction.value = () => {};
         }
       };
 
+      // Clean up resizing state on unmount
+      onUnmounted(() => {
+        setResizing(undefined);
+      });
+
       watch(
         () => [...componentIds],
         () => {
@@ -197,6 +199,17 @@
         );
       });
 
+      const resizeCursor = computed(() => {
+        if (!resizing.value) {
+          return 'default';
+        }
+        const panel = panelManager.get(resizing.value);
+        if (panel && panel[panelLocationSymbol] === PanelLocation.BOTTOM) {
+          return 'n-resize';
+        }
+        return 'ew-resize';
+      });
+
       return {
         mainPanel,
         componentIds,
@@ -205,13 +218,15 @@
         getStyles,
         getState,
         getProps,
+        addMobileClass,
         panelFrameRef,
+        resizing,
+        resizeCursor,
         setResizing,
         resizingFunction,
         close: (id) => {
           panelManager.remove(id);
         },
-        addMobileClass,
       };
     },
   };
@@ -228,4 +243,12 @@
   .vcs-panel-border {
     padding: 5px;
   }
+  .resize-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+  }
 </style>

package/src/manager/panel/PanelManagerComponent.vue.d.ts

@@ -17,7 +17,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         isRight: import("vue").ComputedRef<boolean>;
         isBottom: import("vue").ComputedRef<boolean>;
         startResize(e: any): void;
-        stopResize(): void;
     }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "resize"[], "resize", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         panelState: {
             type: ObjectConstructor;
@@ -29,10 +28,12 @@ declare const _default: import("vue").DefineComponent<{}, {
     getStyles: (id: string) => import("vue").ComputedRef<Object>;
     getState: (id: string) => PanelState;
     getProps: (id: string) => Object;
+    addMobileClass: import("vue").ComputedRef<any>;
     panelFrameRef: import("vue").Ref<any>;
+    resizing: import("vue").Ref<undefined>;
+    resizeCursor: import("vue").ComputedRef<"default" | "n-resize" | "ew-resize">;
     setResizing: (id: any) => void;
-    resizingFunction: () => void;
+    resizingFunction: import("vue").Ref<() => void>;
     close: (id: any) => void;
-    addMobileClass: import("vue").ComputedRef<any>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/search/SearchComponent.vue

@@ -21,11 +21,7 @@
     </span>
     <template v-if="results.length > 0">
       <v-divider class="mt-1 base-darken-1" />
-      <ResultsComponent
-        :query="query"
-        :results="results"
-        :show-selected-only="showSelectedOnly"
-      />
+      <ResultsComponent :query="query" :results="results" />
       <v-divider />
 
       <v-row no-gutters>
@@ -33,9 +29,10 @@
           <div class="button-container d-flex align-center px-2 pt-2 pb-1">
             <VcsFormButton
               class="fixed-button"
-              @click="showSelectedOnly = !showSelectedOnly"
+              tooltip="search.hideWindow"
+              @click="closeWindow"
             >
-              <v-icon icon="mdi-arrow-collapse-vertical" />
+              <v-icon icon="mdi-minus-box-multiple-outline" />
             </VcsFormButton>
             <VcsFormButton
               @click="zoomToAll"
@@ -71,6 +68,8 @@
   import VcsFormButton from '../components/buttons/VcsFormButton.vue';
   import { useFontSize } from '../vuePlugins/vuetify.js';
 
+  export const searchComponentId = 'searchId';
+
   /**
    * @description Stylized search component providing an input field for search inputs.
    * Renders a list of results using {@link ResultsComponent }
@@ -98,8 +97,6 @@
       const { xs } = useDisplay();
       let queryPreSuggestion = '';
 
-      const showSelectedOnly = ref(false);
-
       let suggestionTimeout;
 
       const onInput = () => {
@@ -140,7 +137,6 @@
         suggesting.value = '';
         suggestions.value = [];
         queryPreSuggestion = '';
-        showSelectedOnly.value = false;
       };
 
       const search = async () => {
@@ -163,7 +159,6 @@
         return fontSize.value + 11;
       });
       return {
-        showSelectedOnly,
         xs,
         query,
         searching,
@@ -193,6 +188,9 @@
             query.value = queryPreSuggestion;
           }
         },
+        closeWindow() {
+          app.windowManager.remove(searchComponentId);
+        },
       };
     },
   };

package/src/search/SearchComponent.vue.d.ts

@@ -1,5 +1,5 @@
+export const searchComponentId: "searchId";
 declare const _default: import("vue").DefineComponent<{}, {
-    showSelectedOnly: import("vue").Ref<boolean>;
     xs: import("vue").Ref<boolean>;
     query: import("vue").Ref<string>;
     searching: import("vue").Ref<boolean>;
@@ -15,5 +15,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     selectedSuggestion: import("vue").Ref<number>;
     onInput: () => void;
     selectSuggestion(value: any): void;
+    closeWindow(): void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;