@vcmap/ui 5.0.0-rc.22 → 5.0.0-rc.23

package/src/manager/window/WindowManager.vue

@@ -3,16 +3,16 @@
     :class="{ 'win-container-mobile' : $vuetify.breakpoint.xs }"
   >
     <WindowComponent
-      v-for="(id, zIndex) in componentIds"
+      v-for="id in componentIds"
       :key="id"
       :window-state="getState(id)"
       :slot-window="getSlot(id)"
-      :z-index="zIndex"
+      :z-index="getComponent(id).zIndex"
       @moved="move(id, $event)"
-      @click="clicked(id)"
-      :style="getStyles(id, zIndex).value"
+      @mousedown="bringWindowToTop(id)"
+      :style="getStyles(id).value"
       :class="getState(id).classes"
-      :is-on-top="isOnTop(zIndex)"
+      :is-on-top="isOnTop(id)"
     >
       <component
         :is="getComponent(id)"
@@ -23,7 +23,7 @@
         <component
           :is="getHeaderComponent(id)"
           :window-state="getState(id)"
-          :is-on-top="isOnTop(zIndex)"
+          :is-on-top="isOnTop(id)"
           :slot-window="getSlot(id)"
           v-bind="getProps(id)"
           @close="close(id)"
@@ -84,23 +84,22 @@
         return windowManager.get(id)?.props ?? {};
       };
       /**
-       * @param {number} zIndex
+       * @param {string} id
        * @returns {boolean}
        */
-      const isOnTop = (zIndex) => {
-        return zIndex === componentIds.length - 1;
+      const isOnTop = (id) => {
+        return windowManager.get(id)?.zIndex.value === componentIds.length - 1;
       };
       /**
        * @param {string} id
-       * @param {number} zIndex
        * @returns {import("vue").ComputedRef<Object>}
        */
-      const getStyles = (id, zIndex) => computed(() => {
+      const getStyles = id => computed(() => {
         const windowComponent = windowManager.get(id);
         const state = windowComponent?.state;
         const position = applyPositionOnTarget(windowComponent?.position, targetSize.value);
         return {
-          zIndex,
+          zIndex: windowComponent.zIndex.value,
           ...position,
           ...(state.styles || {}),
         };
@@ -108,8 +107,8 @@
       /**
        * @param {string} id
        */
-      const clicked = (id) => {
-        if (windowManager.has(id)) {
+      const bringWindowToTop = (id) => {
+        if (windowManager.has(id) && !isOnTop(id)) {
           windowManager.bringWindowToTop(id);
         }
       };
@@ -143,7 +142,7 @@
         getSlot: id => windowManager.get(id).slot,
         close: (id) => { windowManager.remove(id); },
         pin: (id) => { windowManager.pinWindow(id); },
-        clicked,
+        bringWindowToTop,
         move,
       };
     },

package/src/manager/window/windowHelper.js

@@ -304,7 +304,7 @@ export function clipToTargetSize(windowPositionOptions, targetSize) {
     clippedPosition.height = windowPositionOptions.height;
   }
   clippedPosition.maxWidth = targetWidth;
-  clippedPosition.maxHeight = targetHeight;
+  clippedPosition.maxHeight = targetHeight - 4; // 2px space plus 2px due to margin bottom
   if (windowPositionOptions.maxWidth !== undefined) {
     clippedPosition.maxWidth = Math.min(windowPositionOptions.maxWidth, targetWidth);
   }

package/src/manager/window/windowManager.js

@@ -1,4 +1,4 @@
-import { reactive, ref } from 'vue';
+import { computed, reactive, ref } from 'vue';
 import { VcsEvent } from '@vcmap/core';
 import { v4 as uuidv4 } from 'uuid';
 import { parseEnumValue } from '@vcsuite/parsers';
@@ -137,6 +137,7 @@ export function isSlotPosition(windowPosition) {
  * @property {WindowSlot} initialSlot
  * @property {Object} props
  * @property {Object} provides
+ * @property {import("vue").ComputedGetter<number>} zIndex
  */
 
 /**
@@ -238,6 +239,11 @@ class WindowManager {
      * @type {Array<string>}
      */
     this.componentIds = [];
+    /**
+     * reactive ordered array of ids, defining the zIndex of a component
+     * @type {import("vue").Ref<Array<string>>}
+     */
+    this._zIndices = ref([]);
 
     /**
      * @type {Map<string, WindowComponent>}
@@ -277,8 +283,8 @@ class WindowManager {
     const windowComponent = this._windowComponents.get(id);
     if (windowComponent) {
       this._cachePosition(windowComponent);
-      const index = this.componentIds.indexOf(id);
-      this.componentIds.splice(index, 1);
+      this.componentIds.splice(this.componentIds.indexOf(id), 1);
+      this._zIndices.value.splice(this._zIndices.value.indexOf(id), 1);
       this._windowComponents.delete(id);
       this._handleSlotsChanged(windowComponent.slot.value);
       this.removed.raiseEvent(windowComponent);
@@ -453,6 +459,7 @@ class WindowManager {
 
     const position = reactive(windowPosition);
     const initialPosition = { ...windowPositionOptions };
+    const zIndex = computed(() => this._zIndices.value.indexOf(id));
     /**
      * @type {WindowComponent}
      */
@@ -487,6 +494,9 @@ class WindowManager {
       get provides() {
         return provides;
       },
+      get zIndex() {
+        return zIndex;
+      },
     };
     const cached = this._assignCachedPosition(windowComponent);
     if (!cached) {
@@ -494,6 +504,7 @@ class WindowManager {
     }
     this._windowComponents.set(id, windowComponent);
     this.componentIds.push(id);
+    this._zIndices.value.push(id);
     this._handleSlotsChanged(slot);
     this.added.raiseEvent(windowComponent);
     return windowComponent;
@@ -505,10 +516,10 @@ class WindowManager {
    */
   bringWindowToTop(id) {
     if (this.has(id)) {
-      const index = this.componentIds.indexOf(id);
-      if (index >= 0 && index !== this.componentIds.length - 1) {
-        this.componentIds.push(id);
-        this.componentIds.splice(index, 1);
+      const index = this._zIndices.value.indexOf(id);
+      if (index >= 0 && index !== this._zIndices.value.length - 1) {
+        this._zIndices.value.push(id);
+        this._zIndices.value.splice(index, 1);
       }
     }
   }

package/src/navigation/mapNavCompass.vue

@@ -162,6 +162,6 @@
   }
 
   svg path:hover {
-    fill: var(--v-base-lighten5) !important;
+    fill: var(--v-primary-lighten1) !important;
   }
 </style>

package/src/navigation/mapNavigation.vue

@@ -58,7 +58,7 @@
   import OrientationToolsButton from './orientationToolsButton.vue';
 
   /**
-   * Creates a go-to viewpoint action from a startingViewpointName defined in a context
+   * Creates a go-to viewpoint action from a startingViewpointName defined in a module
    * @param {VcsUiApp} app
    * @returns {{action: import("vue").Reactive<{}>, destroy: function():void}}
    */
@@ -66,13 +66,13 @@
     const initialAction = { icon: undefined, title: undefined, active: undefined, callback: undefined };
     const action = reactive({ ...initialAction });
     /**
-     * Gets the starting viewpoint of the last added context, where a startingViewpointName was defined
+     * Gets the starting viewpoint of the last added module, where a startingViewpointName was defined
      * and sets it on the home button action.
      */
     const updateStartingViewpoint = () => {
       let viewpoint = null;
-      for (let idx = app.contexts.length - 1; idx >= 0; idx--) {
-        const { startingViewpointName } = app.contexts[idx].config;
+      for (let idx = app.modules.length - 1; idx >= 0; idx--) {
+        const { startingViewpointName } = app.modules[idx].config;
         if (startingViewpointName && app.viewpoints.hasKey(startingViewpointName)) {
           viewpoint = app.viewpoints.getByKey(startingViewpointName);
           break;
@@ -95,8 +95,8 @@
     };
 
     const listener = [
-      app.contextAdded.addEventListener(updateStartingViewpoint),
-      app.contextRemoved.addEventListener(updateStartingViewpoint),
+      app.moduleAdded.addEventListener(updateStartingViewpoint),
+      app.moduleRemoved.addEventListener(updateStartingViewpoint),
     ];
 
     const destroy = () => { listener.forEach(cb => cb()); };

package/src/navigation/obliqueRotation.vue

@@ -1,15 +1,19 @@
 <template>
-  <div class="d-inline-flex">
-    <OrientationToolsButton
-      @click="input(-90)"
-      icon="$vcsRotateLeft"
-      tooltip="navigation.obliqueLeftTooltip"
-    />
-    <OrientationToolsButton
-      @click="input(90)"
-      icon="$vcsRotateRight"
-      tooltip="navigation.obliqueRightTooltip"
-    />
+  <div class="d-inline-flex rounded vcs-oblique-orientation">
+    <div class="d-inline-flex rounded inner">
+      <OrientationToolsButton
+        @click="input(-90)"
+        icon="$vcsRotateLeft"
+        tooltip="navigation.obliqueLeftTooltip"
+        elevation="0"
+      />
+      <OrientationToolsButton
+        @click="input(90)"
+        icon="$vcsRotateRight"
+        tooltip="navigation.obliqueRightTooltip"
+        elevation="0"
+      />
+    </div>
   </div>
 </template>
 
@@ -43,6 +47,25 @@
   };
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+  .vcs-oblique-orientation {
+    box-shadow: rgba(0, 0, 0, 0.15) 0 2px 2px 0;
+    .inner{
+      box-shadow: rgba(0, 0, 0, 0.25) 0 -2px 2px 0 inset;
+    }
+    ::v-deep {
+      .btn-orientation-tools{
+        &:first-child{
+          box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 1px -2px,
+          rgba(0, 0, 0, 0.02) -3px 2px 2px 0,
+          rgba(0, 0, 0, 0.12) 0 1px 1px 0 !important;
+        }
+        &:last-child{
+          box-shadow: rgba(0, 0, 0, 0.02) 1px 4px 1px -2px,
+          rgba(0, 0, 0, 0.02) 1px 2px 1px 0,
+          rgba(0, 0, 0, 0.1) 1px 1px 1px 0 !important;
+        }
+      }
+    }
+  }
 </style>

package/src/navigation/orientationToolsButton.vue

@@ -5,7 +5,6 @@
   >
     <template #activator="{ on, attrs }">
       <v-card
-        elevation="0"
         class="h-8 w-8 d-flex align-center justify-center text-center btn-orientation-tools"
         v-bind="{ ...$attrs, ...attrs }"
         v-on="{ ...$listeners, ...on }"

package/src/navigation/overviewMap.js

@@ -52,8 +52,7 @@ export function getWindowComponentOptions() {
  */
 function getCameraIcon(color) {
   return {
-    src: `data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg id='cam' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 81.06 49.47'%3E%3Cdefs%3E%3ClinearGradient id='1' x1='40.53' y1='48.97' x2='40.53' y2='.25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='${encodeURIComponent(color)}'/%3E%3Cstop offset='.46' stop-color='${encodeURIComponent(color)}' stop-opacity='.60'/%3E%3Cstop offset='.65' stop-color='${encodeURIComponent(color)}' stop-opacity='.40'/%3E%3Cstop offset='.83' stop-color='${encodeURIComponent(color)}' stop-opacity='.20'/%3E%3Cstop offset='.89' stop-color='${encodeURIComponent(color)}' stop-opacity='.15'/%3E%3Cstop offset='1' stop-color='transparent' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='2' x1='40.53' y1='49.37' x2='40.53' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.24' stop-color='${encodeURIComponent(color)}'/%3E%3Cstop offset='.38' stop-color='${encodeURIComponent(color)}' stop-opacity='.93'/%3E%3Cstop offset='.57' stop-color='${encodeURIComponent(color)}' stop-opacity='.70'/%3E%3Cstop offset='.78' stop-color='${encodeURIComponent(color)}' stop-opacity='.38'/%3E%3Cstop offset='1' stop-color='transparent' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='40.53 48.97 80.53 .25 .53 .25 40.53 48.97' fill='url(%231)' stroke='url(%232)' stroke-miterlimit='10' stroke-width='.5px'/%3E%3Ccircle cx='40.53' cy='42.97' r='6' fill='${encodeURIComponent(color)}' stroke='%23fff' stroke-miterlimit='10'/%3E%3C/svg%3E`,
-    scale: 0.5,
+    src: `data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22121.58616%22%20height%3D%2274.204994%22%20viewBox%3D%220%200%2032.169671%2019.633405%22%20version%3D%221.1%22%20id%3D%22svg216%22%3E%3Cdefs%20id%3D%22defs213%22%3E%3ClinearGradient%20id%3D%221-0%22%20x1%3D%2240.529999%22%20y1%3D%2248.970001%22%20x2%3D%2240.529999%22%20y2%3D%220.25%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20id%3D%22stop399%22%2F%3E%3Cstop%20offset%3D%22.46%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.60%22%20id%3D%22stop401%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.40%22%20id%3D%22stop403%22%2F%3E%3Cstop%20offset%3D%22.83%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.20%22%20id%3D%22stop405%22%2F%3E%3Cstop%20offset%3D%22.89%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.15%22%20id%3D%22stop407%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22transparent%22%20stop-opacity%3D%220%22%20id%3D%22stop409%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%222-9%22%20x1%3D%2240.529999%22%20y1%3D%2249.369999%22%20x2%3D%2240.529999%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.24%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20id%3D%22stop412%22%2F%3E%3Cstop%20offset%3D%22.38%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.93%22%20id%3D%22stop414%22%2F%3E%3Cstop%20offset%3D%22.57%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.70%22%20id%3D%22stop416%22%2F%3E%3Cstop%20offset%3D%22.78%22%20stop-color%3D%22${encodeURIComponent(color)}%22%20stop-opacity%3D%22.38%22%20id%3D%22stop418%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22transparent%22%20stop-opacity%3D%220%22%20id%3D%22stop420%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20id%3D%22layer1%22%20transform%3D%22translate(5.3616118%2C3.2722342)%22%3E%3Cpolygon%20points%3D%220.53%2C0.25%2040.53%2C48.97%2080.53%2C0.25%20%22%20fill%3D%22url(%231)%22%20stroke%3D%22url(%232)%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%220.5px%22%20id%3D%22polygon425%22%20style%3D%22fill%3Aurl(%231-0)%3Bstroke%3Aurl(%232-9)%22%20transform%3D%22matrix(0.396875%2C0%2C0%2C0.396875%2C-5.3621201%2C-3.2722342)%22%2F%3E%3Ccircle%20cx%3D%2210.723224%22%20cy%3D%2213.781484%22%20r%3D%222.3812499%22%20fill%3D%22${encodeURIComponent(color)}%22%20stroke%3D%22%23ffffff%22%20stroke-miterlimit%3D%2210%22%20id%3D%22circle427%22%20style%3D%22stroke-width%3A0.396874%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E`,
     color,
   };
 }
@@ -304,7 +303,7 @@ class OverviewMap {
       this._setupMapInteraction();
     }
     await this._map.activate();
-    this.map.setTarget('overview-map-container');
+    this._map.setTarget('overview-map-container');
     this._map.target?.firstChild?.classList?.add('overviewMapElement');
     if (!this._active) {
       this._mapActivatedListener = this._app.maps.mapActivated.addEventListener(() => {
@@ -540,8 +539,9 @@ class OverviewMap {
       return;
     }
     let cameraFeature = this._cameraIconLayer.getFeatureById('cameraFeature');
+    const coords = Projection.wgs84ToMercator(position);
     if (!cameraFeature) {
-      const cameraGeometry = new Point([position[0], position[1]]);
+      const cameraGeometry = new Point(coords);
       cameraFeature = new Feature({
         geometry: cameraGeometry,
       });
@@ -549,7 +549,7 @@ class OverviewMap {
       cameraFeature.setStyle(this.cameraIconStyle.style);
       this._cameraIconLayer.addFeatures([cameraFeature]);
     }
-    cameraFeature.getGeometry().setCoordinates(Projection.wgs84ToMercator(position));
+    cameraFeature.getGeometry().setCoordinates(coords);
 
     const rotationDegrees = viewpoint.heading;
     const rotationRadians = CesiumMath.toRadians(rotationDegrees);

package/src/navigation/vcsZoomButton.vue

@@ -1,15 +1,19 @@
 <template>
-  <div>
-    <OrientationToolsButton
-      @click="$emit('zoom-in')"
-      icon="$vcsPlus"
-      tooltip="navigation.zoomInTooltip"
-    />
-    <OrientationToolsButton
-      @click="$emit('zoom-out')"
-      icon="$vcsMinus"
-      tooltip="navigation.zoomOutTooltip"
-    />
+  <div class="rounded vcs-navigation-zoom">
+    <div class="rounded inner">
+      <OrientationToolsButton
+        @click="$emit('zoom-in')"
+        icon="$vcsPlus"
+        tooltip="navigation.zoomInTooltip"
+        elevation="0"
+      />
+      <OrientationToolsButton
+        @click="$emit('zoom-out')"
+        icon="$vcsMinus"
+        tooltip="navigation.zoomOutTooltip"
+        elevation="0"
+      />
+    </div>
   </div>
 </template>
 
@@ -25,3 +29,25 @@
     components: { OrientationToolsButton },
   };
 </script>
+<style lang="scss" scoped>
+.vcs-navigation-zoom {
+  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 2px 0;
+  .inner{
+    box-shadow: rgba(0, 0, 0, 0.25) 0 0 10px 0 inset;
+  }
+  ::v-deep {
+    .btn-orientation-tools{
+      &:first-child{
+        box-shadow: rgba(0, 0, 0, 0.25) -2px 2px 1px -2px,
+        rgba(0, 0, 0, 0.08) 1px 0 0 0,
+        rgba(0, 0, 0, 0.05) -1px 1px 1px 1px !important;
+      }
+      &:last-child{
+        box-shadow: rgba(0, 0, 0, 0.25) -2px 3px 1px -2px,
+        rgba(0, 0, 0, 0.08) 1px 4px 2px 0,
+        rgba(0, 0, 0, 0.05) -1px 1px 1px 1px !important;
+      }
+    }
+  }
+}
+</style>

package/src/pluginHelper.js

@@ -115,12 +115,32 @@ export async function loadPlugin(name, config) {
   return null;
 }
 
+/**
+ * @param {string} base
+ * @param {string} pluginBase
+ * @returns {string}
+ */
+export function getPluginEntry(base, pluginBase) {
+  const baseUrl = new URL(base);
+  const pluginBaseUrl = new URL(pluginBase);
+  if (baseUrl.origin !== pluginBaseUrl.origin) {
+    return pluginBase;
+  }
+  const baseSubs = baseUrl.pathname.split('/');
+  const pluginSubs = pluginBaseUrl.pathname.split('/');
+  return pluginSubs
+    .filter((sub, idx) => sub !== baseSubs[idx])
+    .join('/');
+}
+
 /**
  * @param {VcsPlugin} plugin
  * @returns {Object}
  */
 export function serializePlugin(plugin) {
   const serializedPlugin = plugin.toJSON ? plugin.toJSON() : {};
+  serializedPlugin.name = plugin.name;
+  serializedPlugin.entry = getPluginEntry(window.location.href, plugin[pluginBaseUrlSymbol]);
   serializedPlugin[pluginFactorySymbol] = plugin[pluginFactorySymbol];
   serializedPlugin[pluginBaseUrlSymbol] = plugin[pluginBaseUrlSymbol];
   return serializedPlugin;

package/src/search/search.js

@@ -242,9 +242,6 @@ class Search extends IndexedCollection {
         });
       if (this._currentResults.value.length > 0) {
         await this._resultLayer.activate();
-        const extent = this._resultLayer.getZoomToExtent();
-        const viewpoint = Viewpoint.createViewpointFromExtent(extent);
-        await this._app.maps.activeMap.gotoViewpoint(viewpoint);
         this.resultsChanged.raiseEvent(this._currentResults.value.slice(0));
       }
     }
@@ -286,6 +283,18 @@ class Search extends IndexedCollection {
     [...this._array].forEach(impl => impl.abort?.());
   }
 
+  /**
+   * Zooms to the extent of all available result features
+   * @returns {Promise<void>}
+   */
+  async zoomToAll() {
+    if (this._resultLayer.getFeatures().length > 0) {
+      const extent = this._resultLayer.getZoomToExtent();
+      const viewpoint = Viewpoint.createViewpointFromExtent(extent);
+      await this._app.maps.activeMap.gotoViewpoint(viewpoint);
+    }
+  }
+
   /**
    * Clears the results and aborts running request
    */

package/src/search/searchComponent.vue

@@ -20,6 +20,14 @@
     </span>
     <v-divider class="mt-1" v-if="!!results.length" />
     <ResultsComponent :query="query" :results="results" />
+    <v-divider v-if="!!results.length" />
+    <VcsButton
+      v-if="!!results.length"
+      class="d-flex pt-1 px-1 justify-end"
+      @click="zoomToAll"
+    >
+      {{ $t('search.zoomToAll') }}
+    </VcsButton>
   </v-sheet>
 </template>
 
@@ -33,9 +41,11 @@
   import { VSheet, VDivider, VIcon } from 'vuetify/lib';
   import VcsTextField from '../components/form-inputs-controls/VcsTextField.vue';
   import ResultsComponent from './resultsComponent.vue';
+  import VcsButton from '../components/buttons/VcsButton.vue';
 
   export default {
     components: {
+      VcsButton,
       ResultsComponent,
       VcsTextField,
       VSheet,
@@ -72,6 +82,10 @@
         searching.value = false;
       };
 
+      const zoomToAll = () => {
+        app.search.zoomToAll();
+      };
+
       onUnmounted(() => {
         clear();
       });
@@ -83,6 +97,7 @@
         reset,
         clear,
         search,
+        zoomToAll,
       };
     },
   };

package/src/state.js

@@ -39,7 +39,7 @@ import { Viewpoint } from '@vcmap/core';
  * @typedef {Object} AppState
  * @property {import("@vcmap/core").ViewpointOptions} [activeViewpoint]
  * @property {string} [activeMap]
- * @property {Array<string>} contextIds
+ * @property {Array<string>} moduleIds
  * @property {Array<LayerState>} layers
  * @property {Array<PluginState>} plugins
  * @property {string} [activeObliqueCollection]
@@ -48,7 +48,7 @@ import { Viewpoint } from '@vcmap/core';
 /**
  * The URL state of the app is an array. To null parameters, pass in 0 instead.
  * The first entry is the viewpoint state, the second the active map name
- * The third is an array of contexts to apply the state to
+ * The third is an array of modules to apply the state to
  * the fourth is an array of layer states
  * the fifth is an array of plugin states
  * the sixth is the currently active oblique collection or 0 if not applicable
@@ -65,7 +65,7 @@ const MAX_URL_LENGTH = 2048;
  */
 export function createEmptyState() {
   return {
-    contextIds: [],
+    moduleIds: [],
     layers: [],
     plugins: [],
   };
@@ -143,7 +143,7 @@ function parseUrlAppState(urlState) {
     state.activeMap = urlState[1];
   }
   if (Array.isArray(urlState[2])) {
-    state.contextIds = urlState[2].slice();
+    state.moduleIds = urlState[2].slice();
   }
   if (Array.isArray(urlState[3])) {
     urlState[3].forEach((urlLayerState) => {
@@ -190,7 +190,7 @@ function writeUrlAppState(state, maxLength) {
     urlState[1] = state.activeMap;
   }
 
-  urlState[2] = state.contextIds.slice();
+  urlState[2] = state.moduleIds.slice();
   urlState[3] = [];
   urlState[4] = [];
 
@@ -247,7 +247,7 @@ export function setStateToUrl(state, url) {
     activeObliqueCollection: [String, undefined],
     layers: Array,
     plugins: Array,
-    contextIds: [String],
+    moduleIds: [String],
   });
   check(url, URL);
 

package/src/uiConfig.js

@@ -23,12 +23,12 @@ import { ref } from 'vue';
  */
 class UiConfig extends Collection {
   /**
-   * @param {function():string} getDynamicContextId
+   * @param {function():string} getDynamicModuleId
    */
-  constructor(getDynamicContextId) {
+  constructor(getDynamicModuleId) {
     super();
 
-    makeOverrideCollection(this, getDynamicContextId);
+    makeOverrideCollection(this, getDynamicModuleId);
     /**
      * This object just acts as a go between for reactivity until we have vue3
      * @todo vue3 cleanup