@vcmap/ui 5.0.0-rc.10 → 5.0.0-rc.13

package/src/manager/window/WindowComponent.vue

@@ -41,7 +41,7 @@
 <script>
   import {
     onMounted, onUnmounted, computed, ref, nextTick,
-  } from '@vue/composition-api';
+  } from 'vue';
   import { fromEvent } from 'rxjs';
   import { switchMap, take, map, tap } from 'rxjs/operators';
   import { WindowSlot } from './windowManager.js';

package/src/manager/window/WindowManager.vue

@@ -1,5 +1,7 @@
 <template>
-  <div :class="$vuetify.breakpoint.xs ? 'win-container-mobile' : 'unset'">
+  <div
+    :class="$vuetify.breakpoint.xs ? 'win-container-mobile' : 'unset'"
+  >
     <WindowComponent
       v-for="(id, zIndex) in componentIds"
       :key="id"
@@ -46,7 +48,7 @@
 </style>
 
 <script>
-  import { inject } from '@vue/composition-api';
+  import { inject, ref } from 'vue';
 
   import WindowComponent from './WindowComponent.vue';
   import WindowComponentHeader from './WindowComponentHeader.vue';
@@ -109,7 +111,7 @@
       };
 
       return {
-        componentIds,
+        componentIds: ref(componentIds),
         getComponent: id => windowManager.get(id).component,
         getHeaderComponent: id => windowManager.get(id).headerComponent || WindowComponentHeader,
         getStyles,

package/src/manager/window/windowManager.js

@@ -1,4 +1,4 @@
-import { reactive, ref } from '@vue/composition-api';
+import { reactive, ref } from 'vue';
 import { VcsEvent } from '@vcmap/core';
 import { v4 as uuidv4 } from 'uuid';
 import { parseEnumValue } from '@vcsuite/parsers';
@@ -72,8 +72,8 @@ export const WindowPositions = {
 /**
  * @typedef WindowComponentOptions
  * @property {string} [id] Optional ID, If not provided an uuid will be generated.
- * @property {VueComponent} component Main Component which is shown below the header.
- * @property {VueComponent} [headerComponent] Replaces the Header Component.
+ * @property {import("vue").Component} component Main Component which is shown below the header.
+ * @property {import("vue").Component} [headerComponent] Replaces the Header Component.
  * @property {WindowPositionOptions} [position] Will be ignored if WindowSlot !== DETACHED, can be given otherwise or default will be used
  * @property {WindowState} [state]
  * @property {WindowSlot} [slot] If WindowSlot is not detached the position will be ignored
@@ -94,8 +94,8 @@ export const WindowPositions = {
 /**
  * @typedef WindowComponent
  * @property {string} id
- * @property {VueComponent} component
- * @property {VueComponent} [headerComponent]
+ * @property {import("vue").Component} component
+ * @property {import("vue").Component} [headerComponent]
  * @property {WindowPosition} position
  * @property {WindowState} state
  * @property {Ref<UnwrapRef<WindowSlot>>} slot
@@ -150,20 +150,124 @@ export function windowPositionFromOptions(windowPositionOptions, windowPosition
   return Object.assign(windowPosition, result);
 }
 
+/**
+ * @enum {number}
+ * @property {number} TOP_LEFT
+ * @property {number} TOP_RIGHT
+ * @property {number} BOTTOM_LEFT
+ * @property {number} BOTTOM_RIGHT
+ */
+export const WindowAlignment = {
+  TOP_LEFT: 1,
+  TOP_RIGHT: 2,
+  BOTTOM_LEFT: 3,
+  BOTTOM_RIGHT: 4,
+};
+
+/**
+ * @returns {HTMLElement|null}
+ */
+function getActiveMapElement() {
+  const mapElements = document.getElementsByClassName('mapElement');
+  for (let i = 0; i < mapElements.length; i++) {
+    const element = mapElements.item(i);
+    if (element.style.display !== 'none') {
+      return element;
+    }
+  }
+  return null;
+}
+
 /**
  * WindowPositionOptions from client position relative to a HTMLElement
- * @param {number} x
- * @param {number} y
- * @param {string|HTMLElement} [element='mapElement']
+ * @param {number} x - client pixel position
+ * @param {number} y - client pixel position
+ * @param {HTMLElement} [element='mapElement'] - the element. if none is provided, the currently active mapElement will be taken
+ * @param {WindowAlignment} [alignment=WindowAlignment.TOP_LEFT]
  * @returns {WindowPositionOptions}
  */
-export function getWindowPositionOptions(x, y, element = 'mapElement') {
-  let mapElement = element;
-  if (typeof mapElement === 'string') {
-    mapElement = document.getElementsByClassName(element).item(0);
+export function getWindowPositionOptions(x, y, element, alignment = WindowAlignment.TOP_LEFT) {
+  const mapElement = element ?? getActiveMapElement();
+  if (!mapElement) {
+    return { left: x, top: y };
   }
+
+  const { left, top, width, height } = mapElement.getBoundingClientRect();
+  if (alignment === WindowAlignment.TOP_LEFT) {
+    return { left: x - left, top: y - top };
+  } else if (alignment === WindowAlignment.TOP_RIGHT) {
+    return { right: (left + width) - x, top: y - top };
+  } else if (alignment === WindowAlignment.BOTTOM_LEFT) {
+    return { left: x - left, bottom: (height + top) - y };
+  }
+  return { right: (left + width) - x, bottom: (height + top) - y };
+}
+
+/**
+ * Get window position options based on a pixel in the map
+ * @param {import("@vcmap/cesium").Cartesian2} windowPosition - the window position, as retrieved from an InteractionEvent
+ * @param {WindowAlignment} [alignment]
+ * @returns {WindowPositionOptions}
+ */
+export function getWindowPositionOptionsFromMapEvent(windowPosition, alignment) {
+  const mapElement = getActiveMapElement();
+  if (!mapElement) {
+    return { left: windowPosition.x, top: windowPosition.y };
+  }
+
+  const { left, top } = mapElement.getBoundingClientRect();
+  return getWindowPositionOptions(windowPosition.x + left, windowPosition.y + top, mapElement, alignment);
+}
+
+
+/**
+ * Fits a window aligned top left so it fits into the parent. this will change the alignment to be bottom or right depending
+ * on if the window would not fit into the parent.
+ * @param {number} x - client pixel position
+ * @param {number} y - client pixel position
+ * @param {number} width - window width to fit
+ * @param {number} height - window height to fit
+ * @param {HTMLElement} [element='mapElement'] - the element. if none is provided, the currently active mapElement will be taken
+ * @returns {WindowPositionOptions}
+ */
+export function getFittedWindowPositionOptions(x, y, width, height, element) {
+  const mapElement = element ?? getActiveMapElement();
+  if (!mapElement) {
+    return { left: x, top: y };
+  }
+
+  const { width: parentWidth, height: parentHeight } = mapElement.getBoundingClientRect();
+  const bottom = y + height > parentHeight;
+  const right = x + width > parentWidth;
+  let alignment = WindowAlignment.TOP_LEFT;
+  if (bottom) {
+    if (right) {
+      alignment = WindowAlignment.BOTTOM_RIGHT;
+    } else {
+      alignment = WindowAlignment.BOTTOM_LEFT;
+    }
+  } else if (right) {
+    alignment = WindowAlignment.TOP_RIGHT;
+  }
+  return getWindowPositionOptions(x, y, mapElement, alignment);
+}
+
+/**
+ * Fits a window aligned top left so it fits into currently active map. this will change the alignment to be bottom or right depending
+ * on if the window would not fit into active map element.
+ * @param {import("@vcmap/cesium").Cartesian2} windowPosition - the window position, as retrieved from an InteractionEvent
+ * @param {number} width
+ * @param {number} height
+ * @returns {WindowPositionOptions}
+ */
+export function getFittedWindowPositionOptionsFromMapEvent(windowPosition, width, height) {
+  const mapElement = getActiveMapElement();
+  if (!mapElement) {
+    return { left: windowPosition.x, top: windowPosition.y };
+  }
+
   const { left, top } = mapElement.getBoundingClientRect();
-  return { left: x - left, top: y - top };
+  return getFittedWindowPositionOptions(windowPosition.x + left, windowPosition.y + top, width, height, mapElement);
 }
 
 /**
@@ -185,7 +289,7 @@ export class WindowManager {
      * reactive ordered array of ids,
      * @type {Array<string>}
      */
-    this.componentIds = reactive([]);
+    this.componentIds = [];
 
     /**
      * @type {Map<string, WindowComponent>}

package/src/navigation/mapNavigation.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script>
-  import { computed, inject, ref, onUnmounted } from '@vue/composition-api';
+  import { computed, inject, ref, reactive, onUnmounted } from 'vue';
   import { ObliqueMap, CesiumMap, OpenlayersMap } from '@vcmap/core';
   import { unByKey } from 'ol/Observable.js';
   import { createOverviewMapAction } from '../actions/actionHelper.js';
@@ -119,7 +119,7 @@
       VcsCompass,
     },
     setup() {
-      /** @type {VcsApp} */
+      /** @type {VcsUiApp} */
       const app = inject('vcsApp');
       const viewMode = ref(OrientationToolsViewMode.TWO_D);
       const headingRef = ref(0);
@@ -179,9 +179,7 @@
         isOblique: computed(() => viewMode.value === OrientationToolsViewMode.OBLIQUE),
         zoomIn() { zoom(app.maps.activeMap); }, // debounce?
         zoomOut() { zoom(app.maps.activeMap, true); },
-        left: () => {},
-        right: () => {},
-        overviewAction: ref(action),
+        overviewAction: reactive(action),
       };
     },
   };

package/src/navigation/overviewMap.js

@@ -20,7 +20,7 @@ import { unByKey } from 'ol/Observable.js';
 import VectorSource from 'ol/source/Vector.js';
 import { WindowSlot } from '../manager/window/windowManager.js';
 import OverviewMapClickedInteraction from './overviewMapClickedInteraction.js';
-import { vuetify } from '../vuePlugins/vuetify.js';
+import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import VcsMap from '../application/VcsMap.vue';
 
@@ -99,8 +99,8 @@ class OverviewMap {
      */
     this._obliqueSelectedImageLayer = null;
 
-    const { primary, accent } = vuetify.userPreset.theme.themes.light;
-    const fillColor = Color.fromCssColorString(accent);
+    const primary = app.uiConfig.config.value.primaryColor ?? defaultPrimaryColor;
+    const fillColor = Color.fromCssColorString('#EDEDED');
 
     /**
      * @type {VectorStyleItem}
@@ -199,7 +199,7 @@ class OverviewMap {
      * @type {Array<function():void>}
      * @private
      */
-    this._layerCollectionListener = [
+    this._collectionListeners = [
       this._app.maps.layerCollection.added.addEventListener((layer) => {
         if (layer.properties.showInOverviewMap) {
           const clone = deserializeLayer(this._app, layer.toJSON());
@@ -219,6 +219,16 @@ class OverviewMap {
           this._map.layerCollection.remove(clone);
         }
       }),
+      this._app.uiConfig.added.addEventListener((item) => {
+        if (item?.name === 'primaryColor') {
+          this._setObliqueColor(item.value);
+        }
+      }),
+      this._app.uiConfig.removed.addEventListener((item) => {
+        if (item?.name === 'primaryColor') {
+          this._setObliqueColor(defaultPrimaryColor);
+        }
+      }),
     ];
   }
 
@@ -254,6 +264,18 @@ class OverviewMap {
     return this._mapClicked;
   }
 
+  /**
+   * @param {string} color
+   * @private
+   */
+  _setObliqueColor(color) {
+    this.obliqueUnselectedStyle?.stroke?.setColor(color);
+    this.obliqueSelectedStyle?.stroke?.setColor(color);
+    this._obliqueTileLayer?.forceRedraw?.();
+    this._obliqueImageLayer?.forceRedraw?.();
+    this._obliqueSelectedImageLayer?.forceRedraw?.();
+  }
+
   /**
    * @private
    */
@@ -574,7 +596,8 @@ class OverviewMap {
 
   destroy() {
     this._clearListeners();
-    this._layerCollectionListener.forEach(cb => cb());
+    this._collectionListeners.forEach(cb => cb());
+    this._collectionListeners = [];
     if (this._mapPointerListener) {
       this._mapPointerListener();
       this._mapPointerListener = null;

package/src/navigation/vcsCompass.vue

@@ -28,7 +28,7 @@
 
 
 <script>
-  import { computed, onUnmounted, ref } from '@vue/composition-api';
+  import { computed, onUnmounted, ref } from 'vue';
 
   import { fromEvent, merge, of, Subject } from 'rxjs';
   import { takeUntil, tap } from 'rxjs/operators';

package/src/pluginHelper.js

@@ -19,6 +19,39 @@ export const vcsAppSymbol = Symbol('vcsApp');
  */
 export const pluginFactorySymbol = Symbol('pluginFactory');
 
+/**
+ * A symbol added to each plugin which describes the base URL from which the plugin was loaded (without the filename)
+ * @type {symbol}
+ */
+export const pluginBaseUrlSymbol = Symbol('pluginBaseUrl');
+
+/**
+ * A helper function to create an absolute URL from a relative plugin asset URL. For example, when
+ * shipping your plugin with a "plugin-asset/icon.png", you can always retrieve said icon with getPluginAssetUrl(app, name, 'pluing-assets/icon.png')
+ * Returns null, if the plugin does not exist.
+ * @param {VcsUiApp} app
+ * @param {string} pluginName
+ * @param {string} asset
+ * @returns {string|null}
+ */
+export function getPluginAssetUrl(app, pluginName, asset) {
+  check(pluginName, String);
+  check(asset, String);
+
+  const plugin = app.plugins.getByKey(pluginName);
+  if (plugin && plugin[pluginBaseUrlSymbol]) {
+    const baseUrl = new URL(plugin[pluginBaseUrlSymbol]);
+    const assetUrl = new URL(asset.replace(/^\//, '/'), baseUrl);
+    baseUrl.searchParams.forEach((value, key) => {
+      if (!assetUrl.searchParams.has(key)) {
+        assetUrl.searchParams.set(key, value);
+      }
+    });
+    return assetUrl.toString();
+  }
+  return null;
+}
+
 /**
  * validates the name according to package name pattern
  * @param {string} name
@@ -32,18 +65,14 @@ export function isValidPackageName(name) {
 }
 
 /**
- * @param {VcsUiApp} app
  * @param {string} name
  * @param {PluginConfig} config
- * @param {string} [registry='https://plugins.virtualcitymap.de/']
  * @returns {Promise<VcsPlugin|null>}
  */
-export async function loadPlugin(app, name, config, registry = 'https://plugins.virtualcitymap.de/') {
+export async function loadPlugin(name, config) {
   let module = config.entry;
 
-  if (!module) {
-    module = `${registry.replace(/\/?$/, '')}/${name}/${config.version || '*'}/index.js`;
-  } else if (!/^(https?:\/\/|\/)/.test(module)) {
+  if (!/^(https?:\/\/|\/)/.test(module)) {
     module = `${window.location.origin}${window.location.pathname.replace(/\/?$/, '/')}${module}`;
   } else if (module === '_dev') {
     module = `/${name}.js`;
@@ -65,7 +94,9 @@ export async function loadPlugin(app, name, config, registry = 'https://plugins.
       getLogger().error(`plugin ${name} does not provide a default exported function`);
       return null;
     }
-    const pluginInstance = await plugin.default(config);
+    const baseUrl = new URL(module);
+    baseUrl.pathname = baseUrl.pathname.replace(/\/[^/]+$/, '/');
+    const pluginInstance = await plugin.default(config, baseUrl.toString());
 
     if (!pluginInstance.name) {
       getLogger().error(`plugin ${name} does not expose a name`);
@@ -75,6 +106,7 @@ export async function loadPlugin(app, name, config, registry = 'https://plugins.
       return null;
     }
     pluginInstance[pluginFactorySymbol] = plugin.default;
+    pluginInstance[pluginBaseUrlSymbol] = baseUrl.toString();
     return pluginInstance;
   } catch (err) {
     getLogger().error(`failed to load plugin ${name}`);
@@ -89,9 +121,8 @@ export async function loadPlugin(app, name, config, registry = 'https://plugins.
  */
 export function serializePlugin(plugin) {
   const serializedPlugin = plugin.toJSON ? plugin.toJSON() : {};
-  if (plugin[pluginFactorySymbol]) {
-    serializedPlugin[pluginFactorySymbol] = plugin[pluginFactorySymbol];
-  }
+  serializedPlugin[pluginFactorySymbol] = plugin[pluginFactorySymbol];
+  serializedPlugin[pluginBaseUrlSymbol] = plugin[pluginBaseUrlSymbol];
   return serializedPlugin;
 }
 
@@ -102,5 +133,6 @@ export function serializePlugin(plugin) {
 export async function deserializePlugin(serializedPlugin) {
   const reincarnation = await serializedPlugin[pluginFactorySymbol](serializedPlugin);
   reincarnation[pluginFactorySymbol] = serializedPlugin[pluginFactorySymbol];
+  reincarnation[pluginBaseUrlSymbol] = serializedPlugin[pluginBaseUrlSymbol];
   return reincarnation;
 }

package/src/setup.js

@@ -1,11 +1,9 @@
 import Vue from 'vue';
-import VueCompositionAPI from '@vue/composition-api';
 
 // eslint-disable-next-line no-unused-vars
 import * as core from '@vcmap/core';
 // pull in entire core for vcsClassRegistry
 
 Vue.config.productionTip = false;
-Vue.use(VueCompositionAPI);
 
 window.CESIUM_BASE_URL = '/node_modules/@vcmap/cesium/Source/';

package/src/state.js

@@ -0,0 +1,256 @@
+import { check } from '@vcsuite/check';
+import { getLogger } from '@vcsuite/logger';
+import { ViewPoint } from '@vcmap/core';
+
+/**
+ * @typedef {Object} LayerState
+ * @property {string} name
+ * @property {boolean} active
+ * @property {string} [styleName]
+ */
+
+/**
+ * The URL state of a layer is an array. The first entry is the layer name,
+ * the second its active state encoded in an integer (1 active, 0 inactive),
+ * the third and optional entry, is an optional styleName to set on the layer
+ * @typedef {[string,number,string|0]} UrlLayerState
+ */
+
+/**
+ * @typedef {Object} PluginState
+ * @property {string} name
+ * @property {*} state
+ */
+
+/**
+ * The URL state of a plugin is an array. The first entry is the plugin name, the second entry is
+ * an encoded object, which is the plugins state.
+ * @typedef {[string, *]} UrlPluginState
+ */
+
+/**
+ * The URL state of a viewpoint is an array, the first entry is the camera position (or 0)
+ * the second is the ground position (or 0), the third is the distance, the last three are
+ * heading, pitch, roll in that order
+ * @typedef {[Array<number>|0,Array<number>|0,number,number,number,number]} UrlViewpointState
+ */
+
+/**
+ * @typedef {Object} AppState
+ * @property {import("@vcmap/core").ViewPointOptions} [activeViewpoint]
+ * @property {string} [activeMap]
+ * @property {Array<string>} contextIds
+ * @property {Array<LayerState>} layers
+ * @property {Array<PluginState>} plugins
+ * @property {string} [activeObliqueCollection]
+ */
+
+/**
+ * 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 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
+ * @typedef {[UrlViewpointState,string,Array<string>,Array<UrlLayerState>,Array<UrlPluginState>,(string|0)]} UrlAppState
+ */
+
+/**
+ * @type {number}
+ */
+const MAX_URL_LENGTH = 2048;
+
+/**
+ * @returns {AppState}
+ */
+export function createEmptyState() {
+  return {
+    contextIds: [],
+    layers: [],
+    plugins: [],
+  };
+}
+
+/**
+ * @param {UrlViewpointState} state
+ * @returns {import("@vcmap/core").ViewPointOptions|null}
+ */
+function parseUrlViewpointState(state) {
+  const vp = new ViewPoint({
+    cameraPosition: state[0] ?? undefined,
+    groundPosition: state[1] ?? undefined,
+    distance: state[2] > 0 ? state[2] : undefined,
+    heading: state[3],
+    pitch: state[4],
+    roll: state[5],
+  });
+
+  return vp.isValid() ? vp.toJSON() : null;
+}
+
+/**
+ * @param {UrlLayerState} state
+ * @returns {LayerState}
+ */
+function parseUrlLayerState(state) {
+  const layerState = {
+    name: state[0],
+    active: !!state[1],
+  };
+  if (state[2] !== 0) {
+    layerState.styleName = state[2];
+  }
+  return layerState;
+}
+
+/**
+ * @param {LayerState} state
+ * @returns {UrlLayerState}
+ */
+function writeUrlLayerState(state) {
+  return [state.name, state.active ? 1 : 0, state.styleName ?? 0];
+}
+
+/**
+ * @param {UrlPluginState} state
+ * @returns {PluginState}
+ */
+function parseUrlPluginState(state) {
+  return {
+    name: state[0],
+    state: state[1],
+  };
+}
+
+/**
+ * @param {PluginState} state
+ * @returns {UrlPluginState}
+ */
+function writeUrlPluginState(state) {
+  return [state.name, state.state];
+}
+
+/**
+ * @param {UrlAppState} urlState
+ * @returns {AppState}
+ */
+function parseUrlAppState(urlState) {
+  const state = createEmptyState();
+  if (Array.isArray(urlState[0])) {
+    state.activeViewpoint = parseUrlViewpointState(urlState[0]);
+  }
+  if (typeof urlState[1] === 'string') {
+    state.activeMap = urlState[1];
+  }
+  if (Array.isArray(urlState[2])) {
+    state.contextIds = urlState[2].slice();
+  }
+  if (Array.isArray(urlState[3])) {
+    urlState[3].forEach((urlLayerState) => {
+      if (Array.isArray(urlLayerState)) {
+        state.layers.push(parseUrlLayerState(urlLayerState));
+      }
+    });
+  }
+  if (Array.isArray(urlState[4])) {
+    urlState[4].forEach((urlPluginState) => {
+      if (Array.isArray(urlPluginState)) {
+        state.plugins.push(parseUrlPluginState(urlPluginState));
+      }
+    });
+  }
+  if (typeof urlState[5] === 'string') {
+    state.activeObliqueCollection = urlState[5];
+  }
+  return state;
+}
+
+/**
+ * @param {AppState} state
+ * @param {number} maxLength
+ * @returns {UrlAppState}
+ */
+function writeUrlAppState(state, maxLength) {
+  /**
+   * @type {UrlAppState}
+   */
+  const urlState = new Array(6).fill(0);
+  if (state.activeViewpoint) {
+    urlState[0] = [
+      state.activeViewpoint.cameraPosition?.slice() ?? 0,
+      state.activeViewpoint.groundPosition?.slice() ?? 0,
+      state.activeViewpoint.distance ?? 0,
+      state.activeViewpoint.heading,
+      state.activeViewpoint.pitch,
+      state.activeViewpoint.roll,
+    ];
+  }
+
+  if (state.activeMap) {
+    urlState[1] = state.activeMap;
+  }
+
+  urlState[2] = state.contextIds.slice();
+  urlState[3] = [];
+  urlState[4] = [];
+
+  if (state.activeObliqueCollection) {
+    urlState[5] = state.activeObliqueCollection;
+  }
+
+  state.layers.forEach((layerState) => {
+    const layerUrlState = writeUrlLayerState(layerState);
+    if ((JSON.stringify(urlState).length + JSON.stringify(layerUrlState).length) < maxLength) {
+      urlState[3].push(layerUrlState);
+    }
+  });
+
+  state.plugins.forEach((pluginState) => {
+    const urlPluginState = writeUrlPluginState(pluginState);
+    if ((JSON.stringify(urlState).length + JSON.stringify(urlPluginState).length) < maxLength) {
+      urlState[4].push(urlPluginState);
+    }
+  });
+
+  if (urlState[3].length !== state.layers.length || urlState[4].length !== state.plugins.length) {
+    getLogger('StateManagement').warning('State too large for URL: Not all layers and plugins are represented');
+  }
+
+  return urlState;
+}
+
+/**
+ * @param {(URL)=} url
+ * @returns {AppState}
+ */
+export function getStateFromURL(url) {
+  check(url, URL);
+
+  if (url.searchParams.has('state')) {
+    try {
+      return parseUrlAppState(JSON.parse(url.searchParams.get('state')));
+    } catch (e) {
+      getLogger('StateManager').error('failed to parse the state URL parameter');
+    }
+  }
+  return createEmptyState();
+}
+
+/**
+ * @param {AppState} state
+ * @param {URL} url - sets the query parameter "state" on this URL
+ */
+export function setStateToUrl(state, url) {
+  check(state, {
+    activeMap: [String, undefined],
+    activeViewpoint: [Object, undefined],
+    activeObliqueCollection: [String, undefined],
+    layers: Array,
+    plugins: Array,
+    contextIds: [String],
+  });
+  check(url, URL);
+
+  const maxLength = MAX_URL_LENGTH - url.toString().length;
+  url.searchParams.set('state', JSON.stringify(writeUrlAppState(state, maxLength)));
+}