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

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

package/src/styles/_theming.scss

@@ -7,16 +7,11 @@
   background-image: var(--vcs-primary-logo);
   height: 36px;
   width: 151px;
-  margin: 0 auto;
 }
 .company-logo-mobile {
   background-image: var(--vcs-mobile-logo);
   height: 40px;
   width: 70px;
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-  z-index: 1;
 }
 
 // Dev-Only!

package/src/uiConfig.js

@@ -0,0 +1,79 @@
+import { Collection, makeOverrideCollection } from '@vcmap/core';
+import { ref } from 'vue';
+
+/**
+ * @typedef {Object} UiConfigurationItem
+ * @property {string} name
+ * @property {*} value
+ */
+
+/**
+ * @typedef {Object} UiConfigObject
+ * @property {string} [logo] - the company logo to display. this will override any and all css overrides.
+ * @property {string} [mobileLogo] - an alternative logo to display in mobile view
+ * @property {string} [appTitle] - an optional title to display next to the company logo
+ * @property {string} [primaryColor] - an optional primary color to use in all themes
+ */
+
+/**
+ * @class
+ * @extends {Collection<UiConfigurationItem>}
+ * @implements {import("@vcmap/core").OverrideCollectionInterface<UiConfigurationItem>}
+ */
+class UiConfig extends Collection {
+  /**
+   * @param {function():string} getDynamicContextId
+   */
+  constructor(getDynamicContextId) {
+    super();
+
+    makeOverrideCollection(this, getDynamicContextId);
+    /**
+     * This object just acts as a go between for reactivity until we have vue3
+     * @todo vue3 cleanup
+     * @type {Object<string, *>}
+     */
+    const configObject = {};
+    /**
+     * @type {import("vue").Ref<Object<string, *>>}
+     * @private
+     */
+    this._config = ref({});
+    /**
+     * @type {Array<function():void>}
+     * @private
+     */
+    this._listeners = [
+      this.added.addEventListener((item) => {
+        if (typeof item?.name === 'string') {
+          configObject[item.name] = item.value;
+          this._config.value = { ...configObject }; // shallow clone to trip reactivity
+        }
+      }),
+      this.removed.addEventListener((item) => {
+        if (typeof item?.name === 'string') {
+          delete configObject[item.name];
+          this._config.value = { ...configObject }; // shallow clone to trip reactivity
+        }
+      }),
+    ];
+  }
+
+  /**
+   * @returns {import("vue").Ref<Object<string, *>|UiConfigObject>}
+   */
+  get config() {
+    return this._config;
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    this._listeners.forEach((cb) => { cb(); });
+    this._listeners = [];
+    super.destroy();
+  }
+}
+
+export default UiConfig;

package/src/vcsUiApp.js

@@ -5,6 +5,10 @@ import {
   makeOverrideCollection,
   destroyCollection,
   OverrideClassRegistry,
+  defaultDynamicContextId,
+  ObliqueMap,
+  ViewPoint,
+  volatileContextId,
 } from '@vcmap/core';
 import { getLogger as getLoggerByName } from '@vcsuite/logger';
 import {
@@ -20,6 +24,11 @@ import { createContentTreeCollection } from './contentTree/contentTreeCollection
 import { contentTreeClassRegistry } from './contentTree/contentTreeItem.js';
 import OverviewMap from './navigation/overviewMap.js';
 import I18nCollection from './i18n/i18nCollection.js';
+import CategoryManager from './manager/categoryManager/categoryManager.js';
+import ContextMenuManager from './manager/contextMenu/contextMenuManager.js';
+import FeatureInfo from './featureInfo/featureInfo.js';
+import UiConfig from './uiConfig.js';
+import { createEmptyState, getStateFromURL } from './state.js';
 
 /**
  * @typedef {import("@vcmap/core").VcsAppConfig} VcsUiAppConfig
@@ -44,21 +53,25 @@ import I18nCollection from './i18n/i18nCollection.js';
 /**
  * @interface VcsPlugin
  * @template {Object} P
+ * @template {Object} S
  * @property {string} version
  * @property {string} name
- * @property {function(VcsUiApp)} initialize - called on plugin added
+ * @property {Object<string, *>} [i18n] - the i18n messages of this plugin
+ * @property {function(VcsUiApp, S=)} initialize - called on plugin added. Is passed the VcsUiApp and optionally, the state for the plugin
  * @property {function(VcsUiApp)} onVcsAppMounted - called on mounted of VcsApp.vue
  * @property {function():P} [toJSON] - serialization
  * @property {function():Promise<void>} destroy
+ * @property {function(boolean=):S|Promise<S>} [getState] - should return the plugins 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
  * @api
  */
 
+
 /**
  * @interface VcsComponentManager
  * @template {Object} T - the component type
  * @template {Object} O - component options
- * @property {VcsEvent<T>} added
- * @property {VcsEvent<T>} removed
+ * @property {import("@vcmap/core").VcsEvent<T>} added
+ * @property {import("@vcmap/core").VcsEvent<T>} removed
  * @property {string[]} componentIds - all registered component ids as reactive array
  * @property {function(string):T} get - get component by id
  * @property {function(string):boolean} has - has component with id
@@ -84,7 +97,7 @@ class VcsUiApp extends VcsApp {
   constructor() {
     super();
     /**
-     * @type {OverrideCollection<VcsPlugin>}
+     * @type {import("@vcmap/core").OverrideCollection<VcsPlugin>}
      * @private
      */
     this._plugins = makeOverrideCollection(
@@ -93,11 +106,37 @@ class VcsUiApp extends VcsApp {
       serializePlugin,
       deserializePlugin,
     );
-    this._pluginAddedListener = this._plugins.added.addEventListener((plugin) => {
-      if (plugin.initialize) {
-        plugin.initialize(this);
-      }
-    });
+    /**
+     * @type {Array<function():void>}
+     * @private
+     */
+    this._pluginListeners = [
+      this._plugins.added.addEventListener((plugin) => {
+        this._windowManager.removeOwner(plugin.name);
+        this._navbarManager.removeOwner(plugin.name);
+        this._toolboxManager.removeOwner(plugin.name);
+        this._categoryManager.removeOwner(plugin.name);
+        this._contextMenuManager.removeOwner(plugin.name);
+        if (plugin.i18n) {
+          this.i18n.addPluginMessages(plugin.name, plugin[contextIdSymbol], plugin.i18n);
+        }
+        if (plugin.initialize) {
+          let state;
+          if (this._cachedAppState.contextIds.includes(plugin[contextIdSymbol])) {
+            state = this._cachedAppState.plugins.find(s => s.name === plugin.name);
+          }
+          plugin.initialize(this, state?.state);
+        }
+      }),
+      this._plugins.removed.addEventListener(async (plugin) => {
+        this._windowManager.removeOwner(plugin.name);
+        this._navbarManager.removeOwner(plugin.name);
+        this._toolboxManager.removeOwner(plugin.name);
+        this._categoryManager.removeOwner(plugin.name);
+        this._contextMenuManager.removeOwner(plugin.name);
+        this.i18n.removePluginMessages(plugin.name, plugin[contextIdSymbol]);
+      }),
+    ];
 
     /**
      * @type {OverrideClassRegistry<ContentTreeItem>}
@@ -124,10 +163,20 @@ class VcsUiApp extends VcsApp {
      */
     this._windowManager = new WindowManager();
     /**
-     * @type {ButtonManager}
+     * @type {NavbarManager}
      * @private
      */
     this._navbarManager = new NavbarManager();
+    /**
+     * @type {UiConfig}
+     * @private
+     */
+    this._uiConfig = new UiConfig(() => this.dynamicContextId);
+    /**
+     * @type {FeatureInfo}
+     * @private
+     */
+    this._featureInfo = new FeatureInfo(this);
 
     /**
      * @type {OverviewMap}
@@ -140,16 +189,34 @@ class VcsUiApp extends VcsApp {
      * @private
      */
     this._i18n = new I18nCollection(() => this.dynamicContextId);
+
+    /**
+     * @type {CategoryManager}
+     * @private
+     */
+    this._categoryManager = new CategoryManager(this);
+
+    /**
+     * @type {ContextMenuManager}
+     * @private
+     */
+    this._contextMenuManager = new ContextMenuManager(this);
+
+    /**
+     * @type {AppState}
+     * @private
+     */
+    this._cachedAppState = getStateFromURL(new URL(window.location.href));
   }
 
   /**
-   * @type {OverrideCollection<VcsPlugin>}
+   * @type {import("@vcmap/core").OverrideCollection<VcsPlugin>}
    * @readonly
    */
   get plugins() { return this._plugins; }
 
   /**
-   * @type {OverrideCollection<ContentTreeItem>}
+   * @type {OverrideContentTreeCollection}
    * @readonly
    */
   get contentTree() { return this._contentTree; }
@@ -173,11 +240,17 @@ class VcsUiApp extends VcsApp {
   get windowManager() { return this._windowManager; }
 
   /**
-   * @returns {ButtonManager}
+   * @returns {NavbarManager}
    * @readonly
    */
   get navbarManager() { return this._navbarManager; }
 
+  /**
+   * @returns {FeatureInfo}
+   * @readonly
+   */
+  get featureInfo() { return this._featureInfo; }
+
   /**
    * @type {OverviewMap}
    * @readonly
@@ -190,6 +263,77 @@ class VcsUiApp extends VcsApp {
    */
   get i18n() { return this._i18n; }
 
+  /**
+   * @returns {CategoryManager}
+   * @readonly
+   */
+  get categoryManager() { return this._categoryManager; }
+
+  /**
+   * @type {ContextMenuManager}
+   * @readonly
+   */
+  get contextMenuManager() { return this._contextMenuManager; }
+
+  /**
+   * @type {UiConfig}
+   * @readonly
+   */
+  get uiConfig() { return this._uiConfig; }
+
+  /**
+   * Get the state of the application. When passed the forUrl flag, only a minimal set of states shall be provided for a sharable link to the current state (to ensure
+   * the maximum URL length is not exceeded). This includes: layer active state & styling, active map, active viewpoint,
+   * currently selected feature info & any state deemed required for a sharable URL by the currently loaded plugins.
+   * @param {boolean=} forUrl
+   * @returns {Promise<AppState>}
+   */
+  async getState(forUrl) {
+    const state = createEmptyState();
+    state.contextIds = this.contexts
+      .filter(({ id }) => id !== defaultDynamicContextId)
+      .map(({ id }) => id);
+
+    state.activeMap = this.maps.activeMap.name;
+    const viewPoint = await this.maps.activeMap.getViewPoint();
+    state.activeViewpoint = viewPoint?.isValid?.() ? viewPoint.toJSON() : undefined;
+    state.layers = [...this.layers]
+      .filter(l => l.isSupported(this.maps.activeMap) &&
+        l[contextIdSymbol] !== defaultDynamicContextId &&
+        l[contextIdSymbol] !== volatileContextId &&
+        (
+          ((l.active || l.loading) && !l.activeOnStartup) ||
+          (!l.active && l.activeOnStartup) ||
+          ((l.active || l.loading) && l.style !== l.defaultStyle && this.styles.has(l.style))
+        ))
+      .map((l) => {
+        const layerState = {
+          name: l.name,
+          active: l.active || l.loading,
+        };
+        if (
+          l.style.name !== l.defaultStyle.name &&
+          this.styles.has(l.style) &&
+          l.style[contextIdSymbol] !== defaultDynamicContextId &&
+          l.style[contextIdSymbol] !== volatileContextId
+        ) {
+          layerState.styleName = l.style.name;
+        }
+        return layerState;
+      });
+
+    state.plugins = await Promise.all([...this.plugins]
+      .filter(p => p[contextIdSymbol] !== defaultDynamicContextId &&
+        p[contextIdSymbol] !== volatileContextId &&
+        typeof p.getState === 'function')
+      .map(async p => ({ name: p.name, state: await p.getState(forUrl) })));
+
+    if (this.maps.activeMap instanceof ObliqueMap) {
+      state.activeObliqueCollection = this.maps.activeMap.collection.name;
+    }
+    return state;
+  }
+
   /**
    * @param {import("@vcmap/core").Context} context
    * @returns {Promise<void>}
@@ -212,17 +356,56 @@ class VcsUiApp extends VcsApp {
 
       plugins
         .filter(p => p)
-        .map(p => this._plugins.override(p))
-        .filter(p => p.i18n)
-        .forEach((p) => {
-          this.i18n.addPluginMessages(p.name, context.id, p.i18n);
-        });
+        .map(p => this._plugins.override(p));
     }
     if (Array.isArray(config.i18n)) {
       await this.i18n.parseItems(config.i18n, context.id);
     }
     await super._parseContext(context);
     await this._contentTree.parseItems(config.contentTree, context.id);
+    await this._uiConfig.parseItems(config.uiConfig, context.id);
+    await this._featureInfo.collection.parseItems(config.featureInfo, context.id);
+  }
+
+  /**
+   * @param {import("@vcmap/core").Context} context
+   * @returns {Promise<void>}
+   * @protected
+   */
+  async _setContextState(context) {
+    await super._setContextState(context);
+    if (this._cachedAppState.contextIds.includes(context.id)) {
+      this._cachedAppState.layers.forEach((layerState) => {
+        const layer = this.layers.getByKey(layerState.name);
+        if (layer) {
+          if (layerState.active) {
+            layer.activate();
+          } else {
+            layer.deactivate();
+          }
+
+          if (layerState.styleName && this.styles.hasKey(layerState.styleName) && layer.setStyle) {
+            layer.setStyle(this.styles.getByKey(layerState.styleName));
+          }
+        }
+      });
+      if (this._cachedAppState.activeMap && this.maps.hasKey(this._cachedAppState.activeMap)) {
+        await this.maps.setActiveMap(this._cachedAppState.activeMap);
+      }
+      if (
+        this._cachedAppState.activeObliqueCollection &&
+        this.maps.activeMap instanceof ObliqueMap &&
+        this.obliqueCollections.hasKey(this._cachedAppState.activeObliqueCollection)
+      ) {
+        await this.maps.activeMap.setCollection(
+          this.obliqueCollections.getByKey(this._cachedAppState.activeObliqueCollection),
+          this._cachedAppState.activeViewpoint,
+        );
+      } else if (this._cachedAppState.activeViewpoint && this.maps.activeMap) {
+        await this.maps.activeMap.gotoViewPoint(new ViewPoint(this._cachedAppState.activeViewpoint));
+      }
+      this._cachedAppState.contextIds.splice(this._cachedAppState.contextIds.indexOf(context.id), 1);
+    }
   }
 
   /**
@@ -236,6 +419,8 @@ class VcsUiApp extends VcsApp {
       this._plugins.removeContext(contextId),
       this._i18n.removeContext(contextId),
       this._contentTree.removeContext(contextId),
+      this._featureInfo.collection.removeContext(contextId),
+      this._uiConfig.removeContext(contextId),
     ]);
   }
 
@@ -245,13 +430,18 @@ class VcsUiApp extends VcsApp {
   destroy() {
     this.windowManager.destroy();
     this.navbarManager.destroy();
+    this.toolboxManager.destroy();
+    this.categoryManager.destroy();
+    this.contextMenuManager.destroy();
     this._overviewMap.destroy();
-    // TODO destroy other manager
-    this._pluginAddedListener();
+    this._pluginListeners.forEach((cb) => { cb(); });
+    this._pluginListeners = [];
     destroyCollection(this._plugins);
     destroyCollection(this._contentTree);
     destroyCollection(this._i18n);
     this._contentTreeClassRegistry.destroy();
+    this._featureInfo.destroy();
+    this._uiConfig.destroy();
     super.destroy();
   }
 }