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

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/styles/variables.scss

@@ -55,6 +55,7 @@ $list-padding: 0 0; // 8px 0 !default;
 $list-item-title-font-size: $font-size; // map-deep-get($headings, 'subtitle-1', 'size') !default;
 $list-item-dense-title-font-size: $font-size; // 0.8125rem !default;
 $list-item-dense-title-line-height: 24px; // 1rem !default;
+$list-dense-subheader-height: 32px; // 40px !default;
 $list-item-min-height: 32px; // 48px !default;
 $list-dense-min-height: 24px; // 40px !default;
 $list-item-content-padding: 4px 0; // 12px 0 !default;
@@ -68,3 +69,9 @@ $list-item-icon-margin: auto 0; // 16px 0 !default;
 $treeview-node-level-width: 16px;
 $treeview-node-margin: 4px;
 $treeview-node-height: 32px; // 48px !default;
+
+/** Expansion Panel */
+$expansion-panel-header-min-height: 32px; // 48px !default;
+$expansion-panel-active-header-min-height: 32px; // 64px !default;
+$expansion-panel-header-padding: 6px 0; // 16px 24px !default;
+$expansion-panel-content-padding: 0 0 4px; // 0 24px 16px !default;

package/src/styles/vcsFont.scss

@@ -1,3 +1,20 @@
+/* latin-ext */
+@font-face {
+  font-family: 'Titillium Web';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../assets/font/TitilliumWeb-Regular.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Titillium Web';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../assets/font/TitilliumWeb-Regular.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 // fonts
 $base-font-size: 14px; // base font-size minimum size
 

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 {
@@ -13,13 +17,18 @@ import {
   serializePlugin,
   deserializePlugin,
 } from './pluginHelper.js';
-import { setupDefaultGroups, ToolboxManager } from './manager/toolbox/toolboxManager.js';
+import ToolboxManager, { setupDefaultGroups } from './manager/toolbox/toolboxManager.js';
 import { WindowManager } from './manager/window/windowManager.js';
 import { NavbarManager } from './manager/navbarManager.js';
 import { createContentTreeCollection } from './contentTree/contentTreeCollection.js';
 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
@@ -38,27 +47,32 @@ import I18nCollection from './i18n/i18nCollection.js';
  * @callback createPlugin
  * @template {Object} P
  * @param {P} config
+ * @param {string} pluginBaseUrl
  * @returns {VcsPlugin<P>}
  */
 
 /**
  * @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 +98,7 @@ class VcsUiApp extends VcsApp {
   constructor() {
     super();
     /**
-     * @type {OverrideCollection<VcsPlugin>}
+     * @type {import("@vcmap/core").OverrideCollection<VcsPlugin>}
      * @private
      */
     this._plugins = makeOverrideCollection(
@@ -93,11 +107,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 +164,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 +190,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 +241,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 +264,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>}
@@ -199,7 +344,7 @@ class VcsUiApp extends VcsApp {
     const { config } = context;
     if (Array.isArray(config.plugins)) {
       const plugins = await Promise.all(config.plugins.map(async (pluginConfig) => {
-        const plugin = await loadPlugin(this, pluginConfig.name, pluginConfig);
+        const plugin = await loadPlugin(pluginConfig.name, pluginConfig);
         if (!plugin) {
           return null;
         }
@@ -212,17 +357,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 +420,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 +431,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();
   }
 }

package/src/vuePlugins/vuetify.js

@@ -5,8 +5,16 @@ import Icons from '../icons/+all.js';
 
 Vue.use(Vuetify);
 
+/**
+ * @type {string}
+ */
+export const defaultPrimaryColor = '#409D76';
+
+/**
+ * @returns {import("vuetify").default}
+ */
 export function createVuetify() {
-  const vuetify = new Vuetify({
+  return new Vuetify({
     treeShake: false,
     defaultAssets: {
       font: {
@@ -20,7 +28,7 @@ export function createVuetify() {
       themes: {
         light: {
           basic: '#FFFFFF',
-          primary: '#409D76',
+          primary: defaultPrimaryColor,
           accent: '#EDEDED',
           warning: '#FFCE00',
           'gray-200': '#DEDEDE',
@@ -33,7 +41,7 @@ export function createVuetify() {
         },
         dark: {
           basic: '#000000',
-          primary: '#409D76',
+          primary: defaultPrimaryColor,
           secondary: '#FFFFFF',
           accent: '#757575',
           warning: '#FFCE00',
@@ -48,7 +56,9 @@ export function createVuetify() {
       },
     },
   });
-  return vuetify;
 }
 
+/**
+ * @type {import("vuetify").default}
+ */
 export const vuetify = createVuetify();