@vcmap/ui 6.2.2 → 6.2.4

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/manager/collectionManager/CollectionManager.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script>
-  import { computed, inject, ref } from 'vue';
+  import { computed, inject, onUnmounted, ref } from 'vue';
   import { VExpansionPanels, VContainer } from 'vuetify/components';
   import CollectionComponentProvider from './CollectionComponentProvider.vue';
   import CollectionComponentList from './CollectionComponentList.vue';
@@ -57,6 +57,19 @@
        * @type {import("vue").Ref<string|null>}
        */
       const componentView = ref(null);
+
+      const removedListener = collectionManager.removed.addEventListener(
+        (collectionComponent) => {
+          if (componentView.value === collectionComponent.id) {
+            componentView.value = null;
+          }
+        },
+      );
+
+      onUnmounted(() => {
+        removedListener();
+      });
+
       /**
        * @type {import("vue").WritableComputedRef<number[]>}
        */

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;

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,
+                );
+              });
+            }
           }
         }
       });