@vcmap/ui 6.2.2 → 6.2.3

package/src/contentTree/wmsGroupContentTreeItem.js

@@ -112,12 +112,13 @@ function createWMSChildContentTreeItem(
 
 /**
  * @typedef {import('./contentTreeItem.js').ContentTreeItemOptions &
- * { layerName: string, showWhenNotSupported?: boolean, setWMSLayersExclusive?:boolean, hideStyleSelector?:boolean, allowedWMSLayers?:string[]}} WMSGroupContentTreeItemOptions
- * @property {boolean} showWhenNotSupported - optional flag to show the item even if it is not supported by the activeMap.
+ * { layerName: string, loadOnStartup?: boolean, showWhenNotSupported?: boolean, setWMSLayersExclusive?:boolean, hideStyleSelector?:boolean, allowedWMSLayers?:string[]}} WMSGroupContentTreeItemOptions
  * @property {string} layerName - The name of the WMSLayer to show the children of.
+ * @property {boolean} [loadOnStartup=false] - optional flag to load the capabilities on startup, will be loaded on click otherwise. Leads to an inherent "initOpen" flag  if not true.
+ * @property {boolean} [showWhenNotSupported=false] - optional flag to show the item even if it is not supported by the activeMap.
  * @property {boolean} [setWMSLayersExclusive=false] - Whether the WMSlayers are mutually exclusive.
  * @property {boolean} [hideStyleSelector=false] - Whether the layer style can be selected. Will add a StyleSelector action to compatible items if the Layer has more than one style.
- * @property {string[]} allowedWMSLayers - The list of layers to be shown, other available layers will not be shown.
+ * @property {string[]} [allowedWMSLayers] - The list of layers to be shown, other available layers will not be shown.
  */
 
 /**
@@ -154,7 +155,7 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
    * @param {import("../vcsUiApp.js").default} app
    */
   constructor(options, app) {
-    super(options, app);
+    super({ initOpen: !options.loadOnStartup, ...options }, app);
 
     /**
      * @type {string}
@@ -162,6 +163,12 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
      */
     this._layerName = options.layerName;
 
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._loadOnStartup = parseBoolean(options.loadOnStartup, false);
+
     /**
      * @type {boolean}
      * @private
@@ -180,7 +187,7 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
       false,
     );
     // if WMSLayers should be handled exclusive, the item should handle like a NodeContentTreeItem.
-    this.clickable = !this._setWMSLayersExclusive;
+    this.clickable = !this._setWMSLayersExclusive || !this._loadOnStartup;
 
     /**
      * @type {boolean}
@@ -188,9 +195,10 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
      */
     this._hideStyleSelector = parseBoolean(options.hideStyleSelector, false);
 
-    this.state = this._setWMSLayersExclusive
-      ? StateActionState.NONE
-      : StateActionState.INACTIVE;
+    this.state =
+      this._setWMSLayersExclusive || !this._loadOnStartup
+        ? StateActionState.NONE
+        : StateActionState.INACTIVE;
 
     /**
      * @type {boolean}
@@ -238,6 +246,13 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
      */
     this._pauseStateChangedListener = false;
 
+    /**
+     * Flag to track if children have been loaded
+     * @type {boolean}
+     * @private
+     */
+    this._childrenLoaded = false;
+
     this._setup();
   }
 
@@ -421,6 +436,10 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
     this._listeners.splice(0);
     this._availableWMSEntries = [];
     this._legendSet = false;
+    this._childrenLoaded = false;
+
+    // Reset clickable state based on initial configuration
+    this.clickable = !this._setWMSLayersExclusive || !this._loadOnStartup;
   }
 
   /**
@@ -463,6 +482,83 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
     }
   }
 
+  /**
+   * Loads WMS entries and creates child items
+   * @returns {Promise<void>}
+   * @private
+   */
+  async _loadWMSChildren() {
+    if (this._childrenLoaded || !this._layer) {
+      return;
+    }
+
+    this.state = StateActionState.LOADING;
+    this.clickable = !this._setWMSLayersExclusive;
+
+    try {
+      const 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;
+      }
+      this._availableWMSEntries = availableWMSEntries.filter((wmsEntry) => {
+        return this._allowedWMSLayers
+          ? this._allowedWMSLayers.includes(wmsEntry.name)
+          : true;
+      });
+      const childItems = this._availableWMSEntries.map((wmsEntry) =>
+        createWMSChildContentTreeItem(
+          this._app,
+          wmsEntry,
+          this.name,
+          this._hideStyleSelector,
+        ),
+      );
+      childItems.forEach((childItem) => {
+        this._app.contentTree.add(childItem);
+        childItem.disabled = this.disabled;
+        this._listeners.push(
+          childItem.clickedEvent.addEventListener(() => {
+            this._handleChildClickedEvent(childItem);
+          }),
+          childItem.styleSelected.addEventListener((style) => {
+            this._handleStyleSelectedEvent(childItem, style);
+          }),
+        );
+      });
+      this._childItems = childItems;
+      // check if we do have a legend already configured, if yes we set a flag, that we do not need to set the legend.
+      if (this._layer.properties.legend) {
+        this._legendSet = true;
+      }
+      // we need to get the Initial State from the Layer, to set the correct State to the children.
+      this._setStateFromLayer();
+      // the layer State maybe incomplete or does not fit to the wmsGroupContentTreeItem, so we need to set the State to the Layer.
+      this._setState();
+      this._setLegend();
+      this._childrenLoaded = true;
+
+      // Update clickable state after children are loaded
+      if (!this._setWMSLayersExclusive) {
+        this.clickable = true;
+      }
+    } catch (e) {
+      // if the layer is not there it has been removed while fetching the capabilities.
+      if (this._layer) {
+        this._layer.deactivate();
+        this.visible = false;
+        this._invalid = true;
+      }
+      getLogger(this.className).error(
+        `An error occured while fetching the ${this._layerName} capabilities:`,
+        e,
+      );
+    }
+  }
+
   /**
    * @returns {Promise<void>}
    * @private
@@ -489,7 +585,6 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
       if (this._showWhenNotSupported) {
         this.disabled = !isSupported;
       }
-      this.state = StateActionState.LOADING;
       this.setPropertiesFromObject(this._layer);
 
       this._listeners.push(
@@ -517,67 +612,18 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
           }
         }),
       );
-      try {
-        const 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;
-        }
-        this._availableWMSEntries = availableWMSEntries.filter((wmsEntry) => {
-          return this._allowedWMSLayers
-            ? this._allowedWMSLayers.includes(wmsEntry.name)
-            : true;
-        });
-        const childItems = this._availableWMSEntries.map((wmsEntry) => {
-          return createWMSChildContentTreeItem(
-            this._app,
-            wmsEntry,
-            this.name,
-            this._hideStyleSelector,
-          );
-        });
-        childItems.forEach((childItem) => {
-          this._app.contentTree.add(childItem);
-          childItem.disabled = this.disabled;
-          this._listeners.push(
-            childItem.clickedEvent.addEventListener(() => {
-              this._handleChildClickedEvent(childItem);
-            }),
-            childItem.styleSelected.addEventListener((style) => {
-              this._handleStyleSelectedEvent(childItem, style);
-            }),
-          );
-        });
-        this._childItems = childItems;
-        // check if we do have a legend already configured, if yes we set a flag, that we do not need to set the legend.
-        if (this._layer.properties.legend) {
-          this._legendSet = true;
-        }
-        // we need to get the Initial State from the Layer, to set the correct State to the children.
-        this._setStateFromLayer();
-        // the layer State maybe incomplete or does not fit to the wmsGroupContentTreeItem, so we need to set the State to the Layer.
-        this._setState();
-        this._setLegend();
-      } catch (e) {
-        // if the layer is not there it has been removed while fetching the capabilities.
-        if (this._layer) {
-          this._layer.deactivate();
-          this.visible = false;
-          this._invalid = true;
-        }
-        getLogger(this.className).error(
-          `An error occured while fetching the ${this._layerName} capabilities:`,
-          e,
-        );
+      if (this._loadOnStartup) {
+        await this._loadWMSChildren();
       }
     }
   }
 
   async clicked() {
     await super.clicked();
+    if (!this._childrenLoaded) {
+      await this._loadWMSChildren();
+      return;
+    }
     if (this.state === StateActionState.NONE || this._setWMSLayersExclusive) {
       return;
     }
@@ -591,12 +637,28 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
     await this._setStateToLayer();
   }
 
+  /**
+   * Returns a readonly TreeViewItem used for rendering the current item.
+   * @returns {import('./contentTreeItem.js').TreeViewItem}
+   */
+  getTreeViewItem() {
+    const item = super.getTreeViewItem();
+    item.forceNodeDisplay = !this._loadOnStartup;
+    return item;
+  }
   /**
    * @returns {WMSGroupContentTreeItemOptions}
    */
   toJSON() {
     const config = super.toJSON();
     config.layerName = this._layerName;
+    const defaultInitOpen = !this._loadOnStartup;
+    if (this.initOpen !== defaultInitOpen) {
+      config.initOpen = this.initOpen;
+    }
+    if (this._loadOnStartup) {
+      config.loadOnStartup = this._loadOnStartup;
+    }
     if (this._showWhenNotSupported) {
       config.showWhenNotSupported = this._showWhenNotSupported;
     }

package/src/manager/collectionManager/CollectionComponentContent.vue

@@ -9,9 +9,9 @@
       :show-title="false"
       @item-moved="move"
     />
-    <v-sheet v-if="page && pageSize && totalCount && items.length !== 0">
+    <v-sheet v-if="page && pageSize && totalCount > pageSize">
       <v-pagination
-        class="px-2"
+        class="px-4"
         v-model="page"
         :length="Math.ceil(totalCount / pageSize)"
         density="compact"
@@ -35,7 +35,7 @@
   import { createSelectionActions } from '../../components/lists/listHelper.js';
   import VcsList from '../../components/lists/VcsList.vue';
   import VcsButton from '../../components/buttons/VcsButton.vue';
-  import { moveItem } from './CollectionComponentList.vue';
+  import { moveItem } from '../../components/lists/dragHelper.js';
 
   /**
    * @description
@@ -137,7 +137,7 @@
           return actions.value;
         }),
         move(event) {
-          moveItem(collectionComponent, event);
+          moveItem(collectionComponent.collection, event);
         },
         openCollectionComponentList() {
           emit('openList', collectionComponent.id);

package/src/manager/collectionManager/CollectionComponentList.vue

@@ -36,34 +36,12 @@
 
 <script>
   import { computed, inject } from 'vue';
-  import { IndexedCollection } from '@vcmap/core';
   import { VSheet } from 'vuetify/components';
   import { createSelectionActions } from '../../components/lists/listHelper.js';
   import VcsList from '../../components/lists/VcsList.vue';
   import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
   import VcsButton from '../../components/buttons/VcsButton.vue';
-
-  /**
-   * Moves an item to a new position.
-   * New position is derived from a target item in the collection.
-   * This ensures correct movement, if rendered list is only a subset of the collection.
-   * @param {import("./collectionComponentClass.js").default<Object>} collectionComponent
-   * @param {import("../../components/lists/dragHelper.js").ItemMovedEvent} event
-   */
-  export function moveItem(
-    collectionComponent,
-    { item, targetItem, position },
-  ) {
-    const { collection } = collectionComponent;
-    if (collection instanceof IndexedCollection) {
-      const collectionItem = collection.getByKey(item.name);
-      const keyProperty = collection.uniqueKey;
-      const targetIndexCol = [...collection].findIndex(
-        (i) => i[keyProperty] === targetItem.name,
-      );
-      collection.moveTo(collectionItem, targetIndexCol + position);
-    }
-  }
+  import { moveItem } from '../../components/lists/dragHelper.js';
 
   /**
    * @description
@@ -124,7 +102,7 @@
           return actions.value;
         }),
         move(event) {
-          moveItem(collectionComponent, event);
+          moveItem(collectionComponent.collection, event);
         },
         closeList() {
           emit('closeList', collectionComponent.id);

package/src/manager/collectionManager/CollectionComponentList.vue.d.ts

@@ -1,11 +1,3 @@
-/**
- * Moves an item to a new position.
- * New position is derived from a target item in the collection.
- * This ensures correct movement, if rendered list is only a subset of the collection.
- * @param {import("./collectionComponentClass.js").default<Object>} collectionComponent
- * @param {import("../../components/lists/dragHelper.js").ItemMovedEvent} event
- */
-export function moveItem(collectionComponent: import("./collectionComponentClass.js").default<Object>, { item, targetItem, position }: import("../../components/lists/dragHelper.js").ItemMovedEvent): void;
 declare const _default: import("vue").DefineComponent<{
     showLessButton: {
         type: BooleanConstructor;

package/src/state.d.ts

@@ -14,6 +14,20 @@ export function parseUrlProjectedViewpointState(state: UrlViewpointState, module
  * @returns {import("@vcmap/core").ViewpointOptions|null}
  */
 export function parseUrlExtentState(state: UrlExtentState, moduleId: string): import("@vcmap/core").ViewpointOptions | null;
+/**
+ * @param {string} style
+ * @returns {{layers: string, styles: string}}
+ */
+export function parseWMSStyle(style: string): {
+    layers: string;
+    styles: string;
+};
+/**
+ * @param {import("@vcmap/core").WMSLayer} layer
+ * @param {import("@vcmap/core").VcsModuleConfig=} moduleConfig
+ * @returns {string|undefined}
+ */
+export function writeWMSStyleForLayer(layer: import("@vcmap/core").WMSLayer, moduleConfig?: import("@vcmap/core").VcsModuleConfig | undefined): string | undefined;
 /**
  * @param {(URL)=} url
  * @returns {AppState}

package/src/state.js

@@ -203,6 +203,47 @@ export function parseUrlExtentState(state, moduleId) {
   }
 }
 
+/**
+ * @param {string} style
+ * @returns {{layers: string, styles: string}}
+ */
+export function parseWMSStyle(style) {
+  const [layerLengthString, parts] = style.split(';');
+  const layerLength = parseInt(layerLengthString, 10);
+  return {
+    layers: parts.substring(0, layerLength),
+    styles: parts.substring(layerLength),
+  };
+}
+
+/**
+ * @param {import("@vcmap/core").WMSLayer} layer
+ * @param {import("@vcmap/core").VcsModuleConfig=} moduleConfig
+ * @returns {string|undefined}
+ */
+export function writeWMSStyleForLayer(layer, moduleConfig) {
+  const config = moduleConfig?.layers?.find((m) => m.name === layer.name) ?? {
+    layers: '',
+    parameters: {},
+  };
+  let currentLayers = layer.getLayers().join(',');
+  if (currentLayers === config.layers) {
+    currentLayers = '';
+  }
+
+  let currentStyle = layer.parameters.STYLES || '';
+  if (
+    currentStyle === config.parameters.STYLES ||
+    currentStyle === config.parameters.styles
+  ) {
+    currentStyle = '';
+  }
+  if (currentLayers || currentStyle) {
+    return `${currentLayers.length};${currentLayers}${currentStyle}`;
+  }
+  return undefined;
+}
+
 /**
  * @param {UrlLayerState} state
  * @returns {LayerState}

package/src/vcsUiApp.d.ts

@@ -256,7 +256,10 @@ declare class VcsUiApp extends VcsApp {
         defaults: import("vue").Ref<import("vuetify").DefaultsInstance>;
         display: import("vuetify").DisplayInstance;
         theme: import("vuetify").ThemeInstance & {
-            install: (app: import("vue").App<any>) => void;
+            install: (app: import("vue").App<any>) => void; /**
+             * @type {WindowManager}
+             * @private
+             */
         };
         icons: {
             defaultSet: string;
@@ -282,33 +285,7 @@ declare class VcsUiApp extends VcsApp {
                     formats?: any;
                 }) => import("vuetify").DateInstance) | import("vuetify").DateInstance;
                 formats?: Record<string, any> | undefined;
-                locale: Record<string, any>; /**
-                 * Interface for VcsPlugins.
-                 * The function implementing the interface should not throw!
-                 * @typedef {{
-                 *   name: string,
-                 *   version: string,
-                 *   mapVersion: string,
-                 *   i18n?: Object<string, unknown>,
-                 *   initialize?: function(import("@src/vcsUiApp.js").default, S=):void|Promise<void>,
-                 *   onVcsAppMounted?: function(import("@src/vcsUiApp.js").default):void,
-                 *   toJSON?: function(): C,
-                 *   getDefaultOptions?: function(): C,
-                 *   getState?: function(boolean=):S|Promise<S>,
-                 *   getConfigEditors?: function():Array<PluginConfigEditor<object>>,
-                 *   destroy?: function(): void
-                 * }} VcsPlugin
-                 * @template {Object} C - plugin config
-                 * @template {Object} S - plugin state
-                 * @property {Object<string, *>} [i18n] - the i18n messages of this plugin
-                 * @property {function(import("@src/vcsUiApp.js").default, S=)} initialize - called on plugin added. Is passed the VcsUiApp and optionally, the state for the plugin
-                 * @property {function(import("@src/vcsUiApp.js").default)} onVcsAppMounted - called on mounted of VcsApp.vue
-                 * @property {function():C} [toJSON] - should return the plugin's serialization excluding all default values
-                 * @property {function():C} [getDefaultOptions] - should return the plugin's default options
-                 * @property {function(boolean=):S|Promise<S>} [getState] - should return the plugin's state or a promise for said state. is passed a "for url" flag. If true, only the state relevant for sharing a URL should be passed and short keys shall be used
-                 * @property {Array<PluginConfigEditor>} [getConfigEditors] - should return components for configuring the plugin or custom items defined by the plugin
-                 * @api
-                 */
+                locale: Record<string, any>;
             };
             instance: {
                 locale?: any;
@@ -323,10 +300,6 @@ declare class VcsUiApp extends VcsApp {
                 endOfWeek: (date: unknown) => unknown;
                 startOfMonth: (date: unknown) => unknown;
                 endOfMonth: (date: unknown) => unknown;
-                /**
-                 * @type {ContextMenuManager}
-                 * @private
-                 */
                 startOfYear: (date: unknown) => unknown;
                 endOfYear: (date: unknown) => unknown;
                 isAfter: (date: unknown, comparing: unknown) => boolean;
@@ -348,9 +321,7 @@ declare class VcsUiApp extends VcsApp {
                 getDiff: (date: unknown, comparing: unknown, unit?: string | undefined) => number;
                 getWeekArray: (date: unknown, firstDayOfWeek?: string | number | undefined) => unknown[][];
                 getWeekdays: (firstDayOfWeek?: string | number | undefined) => string[];
-                getMonth: (date: unknown) => number; /**
-                 * @type {import("@vcmap/core").OverrideClassRegistry<typeof AbstractFeatureInfoView>}
-                 */
+                getMonth: (date: unknown) => number;
                 setMonth: (date: unknown, month: number) => unknown;
                 getDate: (date: unknown) => number;
                 setDate: (date: unknown, day: number) => unknown;
@@ -358,7 +329,9 @@ declare class VcsUiApp extends VcsApp {
                 getPreviousMonth: (date: unknown) => unknown;
                 getHours: (date: unknown) => number;
                 setHours: (date: unknown, hours: number) => unknown;
-                getMinutes: (date: unknown) => number;
+                getMinutes: (date: unknown) => number; /**
+                 * @returns {PanelManager}
+                 */
                 setMinutes: (date: unknown, minutes: number) => unknown;
             };
         };

package/src/vcsUiApp.js

@@ -11,6 +11,7 @@ import {
   VcsEvent,
   Viewpoint,
   volatileModuleId,
+  WMSLayer,
 } from '@vcmap/core';
 import { getLogger as getLoggerByName } from '@vcsuite/logger';
 import { deserializePlugin, serializePlugin } from './pluginHelper.js';
@@ -36,7 +37,12 @@ import FeatureInfo, {
   featureInfoClassRegistry,
 } from './featureInfo/featureInfo.js';
 import UiConfig from './uiConfig.js';
-import { createEmptyState, getStateFromURL } from './state.js';
+import {
+  createEmptyState,
+  getStateFromURL,
+  parseWMSStyle,
+  writeWMSStyleForLayer,
+} from './state.js';
 import { version } from '../package.json';
 import Search from './search/search.js';
 import Notifier from './notifier/notifier.js';
@@ -557,9 +563,17 @@ class VcsUiApp extends VcsApp {
    */
   async getState(forUrl) {
     const state = createEmptyState();
-    state.moduleIds = this.modules
-      .filter(({ _id }) => _id !== defaultDynamicModuleId)
-      .map(({ _id }) => _id);
+    const nonDynamicModules = this.modules.filter(
+      ({ _id }) => _id !== defaultDynamicModuleId,
+    );
+
+    if (nonDynamicModules.some((m) => !m.config._id)) {
+      getLogger().warning(
+        'Some modules you are creating are missing a stable _id property. This may lead to issues while restoring application state.',
+      );
+    }
+
+    state.moduleIds = nonDynamicModules.map(({ _id }) => _id);
 
     state.activeMap = this.maps.activeMap.name;
     const viewpoint = await this.maps.activeMap.getViewpoint();
@@ -591,6 +605,12 @@ class VcsUiApp extends VcsApp {
           l.style[moduleIdSymbol] !== volatileModuleId
         ) {
           layerState.styleName = l.style.name;
+        } else if (l instanceof WMSLayer) {
+          const module = this.getModuleById(l[moduleIdSymbol]);
+          const styleName = writeWMSStyleForLayer(l, module?.config);
+          if (styleName) {
+            layerState.styleName = styleName;
+          }
         }
         return layerState;
       });
@@ -642,6 +662,11 @@ class VcsUiApp extends VcsApp {
    */
   async _parseModule(module) {
     const { config } = module;
+    if (!config._id) {
+      getLogger().warning(
+        'A module is missing a stable _id property. This may lead to issues while restoring application state.',
+      );
+    }
     if (Array.isArray(config.plugins)) {
       await this._plugins.parseItems(config.plugins, module._id);
     }
@@ -667,7 +692,7 @@ class VcsUiApp extends VcsApp {
         if (layer) {
           if (layerState.active) {
             layer.activate().catch((e) => {
-              getLogger().warn(
+              getLogger().warning(
                 'Failed to activate cached app state. layer failed: ',
                 layer.name,
               );
@@ -677,12 +702,21 @@ class VcsUiApp extends VcsApp {
             layer.deactivate();
           }
 
-          if (
-            layerState.styleName &&
-            this.styles.hasKey(layerState.styleName) &&
-            layer.setStyle
-          ) {
-            layer.setStyle(this.styles.getByKey(layerState.styleName));
+          if (layerState.styleName) {
+            if (this.styles.hasKey(layerState.styleName) && layer.setStyle) {
+              layer.setStyle(this.styles.getByKey(layerState.styleName));
+            } else if (layer instanceof WMSLayer) {
+              const { layers, styles } = parseWMSStyle(layerState.styleName);
+              if (styles) {
+                layer.parameters.STYLES = styles;
+              }
+              layer.setLayers(layers || layer.getLayers()).catch((err) => {
+                getLogger().warning(
+                  `Failed to set WMS layers ${layers} on layer ${layer.name}`,
+                  err,
+                );
+              });
+            }
           }
         }
       });