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

package/src/vcsUiApp.js

@@ -1,14 +1,15 @@
 import {
   VcsApp,
-  contextIdSymbol,
+  moduleIdSymbol,
   Collection,
   makeOverrideCollection,
   destroyCollection,
   OverrideClassRegistry,
-  defaultDynamicContextId,
+  defaultDynamicModuleId,
   ObliqueMap,
   Viewpoint,
-  volatileContextId, VcsEvent,
+  volatileModuleId,
+  VcsEvent,
 } from '@vcmap/core';
 import { getLogger as getLoggerByName } from '@vcsuite/logger';
 import {
@@ -37,6 +38,9 @@ import Notifier from './notifier/notifier.js';
  * @typedef {import("@vcmap/core").VcsAppConfig} VcsUiAppConfig
  * @property {Array<Object>} [plugins]
  * @property {Array<ContentTreeItemOptions>} [contentTree]
+ * @property {Array<UiConfigurationItem>} [uiConfig]
+ * @property {Array<FeatureInfoViewOptions>} [featureInfo]
+ * @property {Array<Object>} [i18n]
  */
 
 /**
@@ -106,13 +110,18 @@ class VcsUiApp extends VcsApp {
 
   constructor() {
     super();
+    /**
+     * An event triggered when the vuetify theme mode changes or the primary color is updated by a new uiConfig entry.
+     * @type {VcsEvent<void>}
+     */
+    this.themeChanged = new VcsEvent();
     /**
      * @type {import("@vcmap/core").OverrideCollection<VcsPlugin>}
      * @private
      */
     this._plugins = makeOverrideCollection(
       new Collection(),
-      () => this.dynamicContextId,
+      () => this.dynamicModuleId,
       serializePlugin,
       deserializePlugin,
     );
@@ -129,11 +138,11 @@ class VcsUiApp extends VcsApp {
         this._contextMenuManager.removeOwner(plugin.name);
         this._search.removeOwner(plugin.name);
         if (plugin.i18n) {
-          this.i18n.addPluginMessages(plugin.name, plugin[contextIdSymbol], plugin.i18n);
+          this.i18n.addPluginMessages(plugin.name, plugin[moduleIdSymbol], plugin.i18n);
         }
         if (plugin.initialize) {
           let state;
-          if (this._cachedAppState.contextIds.includes(plugin[contextIdSymbol])) {
+          if (this._cachedAppState.moduleIds.includes(plugin[moduleIdSymbol])) {
             state = this._cachedAppState.plugins.find(s => s.name === plugin.name);
           }
           try {
@@ -150,7 +159,7 @@ class VcsUiApp extends VcsApp {
         this._categoryManager.removeOwner(plugin.name);
         this._contextMenuManager.removeOwner(plugin.name);
         this._search.removeOwner(plugin.name);
-        this.i18n.removePluginMessages(plugin.name, plugin[contextIdSymbol]);
+        this.i18n.removePluginMessages(plugin.name, plugin[moduleIdSymbol]);
       }),
     ];
 
@@ -187,7 +196,7 @@ class VcsUiApp extends VcsApp {
      * @type {UiConfig}
      * @private
      */
-    this._uiConfig = new UiConfig(() => this.dynamicContextId);
+    this._uiConfig = new UiConfig(() => this.dynamicModuleId);
     /**
      * @type {FeatureInfo}
      * @private
@@ -204,7 +213,7 @@ class VcsUiApp extends VcsApp {
      * @type {I18nCollection<Object>}
      * @private
      */
-    this._i18n = new I18nCollection(() => this.dynamicContextId);
+    this._i18n = new I18nCollection(() => this.dynamicModuleId);
 
     /**
      * @type {CategoryManager}
@@ -336,17 +345,17 @@ class VcsUiApp extends VcsApp {
    */
   async getState(forUrl) {
     const state = createEmptyState();
-    state.contextIds = this.contexts
-      .filter(({ id }) => id !== defaultDynamicContextId)
-      .map(({ id }) => id);
+    state.moduleIds = this.modules
+      .filter(({ _id }) => _id !== defaultDynamicModuleId)
+      .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[moduleIdSymbol] !== defaultDynamicModuleId &&
+        l[moduleIdSymbol] !== volatileModuleId &&
         (
           ((l.active || l.loading) && !l.activeOnStartup) ||
           (!l.active && l.activeOnStartup) ||
@@ -361,8 +370,8 @@ class VcsUiApp extends VcsApp {
           l.style &&
           l.style.name !== l.defaultStyle.name &&
           this.styles.has(l.style) &&
-          l.style[contextIdSymbol] !== defaultDynamicContextId &&
-          l.style[contextIdSymbol] !== volatileContextId
+          l.style[moduleIdSymbol] !== defaultDynamicModuleId &&
+          l.style[moduleIdSymbol] !== volatileModuleId
         ) {
           layerState.styleName = l.style.name;
         }
@@ -370,8 +379,8 @@ class VcsUiApp extends VcsApp {
       });
 
     state.plugins = await Promise.all([...this.plugins]
-      .filter(p => p[contextIdSymbol] !== defaultDynamicContextId &&
-        p[contextIdSymbol] !== volatileContextId &&
+      .filter(p => p[moduleIdSymbol] !== defaultDynamicModuleId &&
+        p[moduleIdSymbol] !== volatileModuleId &&
         typeof p.getState === 'function')
       .map(async p => ({ name: p.name, state: await p.getState(forUrl) })));
 
@@ -382,12 +391,12 @@ class VcsUiApp extends VcsApp {
   }
 
   /**
-   * @param {import("@vcmap/core").Context} context
+   * @param {import("@vcmap/core").VcsModule} module
    * @returns {Promise<void>}
    * @protected
    */
-  async _parseContext(context) {
-    const { config } = context;
+  async _parseModule(module) {
+    const { config } = module;
     if (Array.isArray(config.plugins)) {
       const plugins = await Promise.all(config.plugins.map(async (pluginConfig) => {
         const plugin = await loadPlugin(pluginConfig.name, pluginConfig);
@@ -397,7 +406,7 @@ class VcsUiApp extends VcsApp {
         if (!isValidPackageName(plugin.name)) {
           getLogger().warning(`plugin ${plugin.name} has no valid package name!`);
         }
-        plugin[contextIdSymbol] = context.id;
+        plugin[moduleIdSymbol] = module._id;
         return plugin;
       }));
 
@@ -406,22 +415,22 @@ class VcsUiApp extends VcsApp {
         .map(p => this._plugins.override(p));
     }
     if (Array.isArray(config.i18n)) {
-      await this.i18n.parseItems(config.i18n, context.id);
+      await this.i18n.parseItems(config.i18n, module._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);
+    await super._parseModule(module);
+    await this._contentTree.parseItems(config.contentTree, module._id);
+    await this._uiConfig.parseItems(config.uiConfig, module._id);
+    await this._featureInfo.collection.parseItems(config.featureInfo, module._id);
   }
 
   /**
-   * @param {import("@vcmap/core").Context} context
+   * @param {import("@vcmap/core").VcsModule} module
    * @returns {Promise<void>}
    * @protected
    */
-  async _setContextState(context) {
-    await super._setContextState(context);
-    if (this._cachedAppState.contextIds.includes(context.id)) {
+  async _setModuleState(module) {
+    await super._setModuleState(module);
+    if (this._cachedAppState.moduleIds.includes(module._id)) {
       this._cachedAppState.layers.forEach((layerState) => {
         const layer = this.layers.getByKey(layerState.name);
         if (layer) {
@@ -451,23 +460,23 @@ class VcsUiApp extends VcsApp {
       } 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);
+      this._cachedAppState.moduleIds.splice(this._cachedAppState.moduleIds.indexOf(module._id), 1);
     }
   }
 
   /**
-   * @param {string} contextId
+   * @param {string} moduleId
    * @returns {Promise<void>}
    * @protected
    */
-  async _removeContext(contextId) {
+  async _removeModule(moduleId) {
     await Promise.all([
-      super._removeContext(contextId),
-      this._plugins.removeContext(contextId),
-      this._i18n.removeContext(contextId),
-      this._contentTree.removeContext(contextId),
-      this._featureInfo.collection.removeContext(contextId),
-      this._uiConfig.removeContext(contextId),
+      super._removeModule(moduleId),
+      this._plugins.removeModule(moduleId),
+      this._i18n.removeModule(moduleId),
+      this._contentTree.removeModule(moduleId),
+      this._featureInfo.collection.removeModule(moduleId),
+      this._uiConfig.removeModule(moduleId),
     ]);
   }
 

package/src/vuePlugins/i18n.js

@@ -21,6 +21,7 @@ export function createVueI18n() {
     messages: {
       en: {},
     },
+    postTranslation: (val, key) => (typeof val === 'string' ? val : key),
   });
   return i18n;
 }

package/src/vuePlugins/vuetify.js

@@ -1,14 +1,19 @@
 import '@mdi/font/css/materialdesignicons.css';
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib';
+import { genVariations } from 'vuetify/lib/services/theme/utils.js';
+import { colorToInt } from 'vuetify/lib/util/colorUtils.js';
 import Icons from '../components/icons/+all.js';
 
 Vue.use(Vuetify);
 
 /**
- * @type {string}
+ * @type {{light:string,dark:string}}
  */
-export const defaultPrimaryColor = '#409D76';
+export const defaultPrimaryColor = {
+  light: '#409D76',
+  dark: '#27B97C',
+};
 
 /**
  * @returns {import("vuetify").default}
@@ -27,23 +32,38 @@ export function createVuetify() {
       },
       themes: {
         light: {
-          basic: '#FFFFFF',
-          primary: defaultPrimaryColor,
-          accent: '#EDEDED',
+          base: {
+            base: '#9E9E9E',
+            lighten5: '#FFFFFF',
+            lighten4: '#F8F8F8',
+            lighten3: '#EBEBEB',
+            lighten2: '#D0D0D0',
+            lighten1: '#B8B8B8',
+            darken1: '#858585',
+            darken2: '#6B6B6B',
+            darken3: '#525252',
+            darken4: '#383838',
+          },
+          primary: defaultPrimaryColor.light,
           warning: '#FFCE00',
-          'gray-200': '#DEDEDE',
-          gray: '#707070',
-          // todo: change remaining colors
-          secondary: '#222222',
           error: '#AA0000',
           info: '#2196F3',
           success: '#4CAF50',
         },
         dark: {
-          basic: '#000000',
-          primary: defaultPrimaryColor,
-          secondary: '#FFFFFF',
-          accent: '#757575',
+          base: {
+            base: '#9E9E9E',
+            lighten5: '#FFFFFF',
+            lighten4: '#383838',
+            lighten3: '#525252',
+            lighten2: '#6B6B6B',
+            lighten1: '#858585',
+            darken1: '#B8B8B8',
+            darken2: '#D0D0D0',
+            darken3: '#EBEBEB',
+            darken4: '#F8F8F8',
+          },
+          primary: defaultPrimaryColor.dark,
           warning: '#FFCE00',
           error: '#FF5252',
           info: '#2196F3',
@@ -64,3 +84,29 @@ export function createVuetify() {
  * @type {import("vuetify").default}
  */
 export const vuetify = createVuetify();
+
+/**
+ * Returns the default primary color depending on the selected theme mode
+ * @returns {string}
+ */
+export function getDefaultPrimaryColor() {
+  if (vuetify.framework.theme.isDark) {
+    return defaultPrimaryColor.dark;
+  }
+  return defaultPrimaryColor.light;
+}
+
+/**
+ * Returns the color depending on the current theme mode
+ * @param {string} value - color key, e.g. 'primary'
+ * @param {string=} variant - color variant, e.g. 'lighten1', 'darken4', ...
+ * @returns {string}
+ */
+export function getColorByKey(value, variant) {
+  const mode = vuetify.framework.theme.isDark ? 'dark' : 'light';
+  const color = vuetify.framework.theme.themes[mode][value];
+  if (color && variant) {
+    return color[variant] ?? genVariations(value, colorToInt(color))[variant];
+  }
+  return color?.base ?? color;
+}

package/start.js

@@ -1,3 +1,9 @@
-import { initApp } from '@vcmap/ui';
+// to load a app.config.json containing a set of configs
+import { initAppFromAppConfig } from '@vcmap/ui';
 
-initApp('#app', 'map.config.json');
+initAppFromAppConfig('#app', 'app.config.json');
+
+// to load a single module (config)
+// import { initAppFromModule } from '@vcmap/ui';
+
+// initAppFromModule('#app', 'config/projects.config.json');

package/dist/assets/index.a3861d4e.js

@@ -1 +0,0 @@
-import{initApp as s}from"./ui.80175f.js";(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))i(e);new MutationObserver(e=>{for(const r of e)if(r.type==="childList")for(const o of r.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&i(o)}).observe(document,{childList:!0,subtree:!0});function n(e){const r={};return e.integrity&&(r.integrity=e.integrity),e.referrerpolicy&&(r.referrerPolicy=e.referrerpolicy),e.crossorigin==="use-credentials"?r.credentials="include":e.crossorigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function i(e){if(e.ep)return;e.ep=!0;const r=n(e);fetch(e.href,r)}})();s("#app","map.config.json");