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

package/src/i18n/i18nCollection.js

@@ -1,155 +1,182 @@
-// eslint-disable-next-line max-classes-per-file
-import { moduleIdSymbol, IndexedCollection } from '@vcmap/core';
-import { getLogger } from '@vcsuite/logger';
-
-/**
- * returns true if the given value is of type object and not an array.
- * This function does not handle Maps and Sets and also returns true for these.
- * This helper function is mainly used for the i18nCollection mergeDeep function
- * @param {*} item
- * @returns {boolean}
- */
-export function isObject(item) {
-  return (!!item && typeof item === 'object' && !Array.isArray(item));
-}
-
-/**
- * A symbol added to plugin messages added to this collection.
- * @type {symbol}
- */
-export const i18nPluginSymbol = Symbol('I18nPluginSymbol');
-
-/**
- * Deep merge objects into a new Object. Can only handle stringifyable content.
- * This will create a new deep copy of the given sources. No copy by reference.
- * @param {...Object} sources
- * @returns {Object}
- */
-export function mergeDeep(...sources) {
-  return sources.reduce((prev, obj) => {
-    Object.entries(obj).forEach(([key, value]) => {
-      if (isObject(prev[key]) && isObject(value)) { // recursive merge if both values are objects.
-        prev[key] = mergeDeep(prev[key], value);
-      } else if (isObject(prev[key])) { // do not override complex object with atomic value
-        getLogger('i18n').warning(
-          `Overwriting a complex Object I18n Key with a string value is not allowed. Value:
-          ${JSON.stringify(prev[key])}, newValue: ${JSON.stringify(obj[key])}`,
-        );
-      } else {
-        // JSON parse/stringify to create a deep copy of the to set value, so we do not pass parts
-        // of a source by reference
-        prev[key] = JSON.parse(JSON.stringify(value));
-      }
-    });
-    return prev;
-  }, {});
-}
-
-
-/**
- * @extends {IndexedCollection<Object>}
- */
-class I18nCollection extends IndexedCollection {
-  /**
-   * @param {function():string} getDynamicModuleId - function to get the current dynamic module id
-   */
-  constructor(getDynamicModuleId) {
-    super(false);
-    /**
-     * @type {function(): string}
-     * @private
-     */
-    this._getDynamicModuleId = getDynamicModuleId;
-  }
-
-  /**
-   * @inheritDoc
-   */
-  add(item) {
-    if (!item[moduleIdSymbol]) {
-      item[moduleIdSymbol] = this._getDynamicModuleId();
-    }
-    super.add(item);
-  }
-
-  /**
-   * @param {Array<Object>} configArray
-   * @param {string} moduleId
-   * @returns {Promise<void>}
-   */
-  async parseItems(configArray, moduleId) {
-    if (Array.isArray(configArray)) {
-      configArray.forEach((item) => {
-        item[moduleIdSymbol] = moduleId;
-        this.add(item);
-      });
-    }
-  }
-
-  /**
-   * @param {string} moduleId
-   */
-  async removeModule(moduleId) {
-    [...this]
-      .filter(item => item[moduleIdSymbol] === moduleId)
-      .forEach((item) => {
-        this.remove(item);
-      });
-  }
-
-  /**
-   * @param {string} moduleId
-   * @returns {Array<Object>}
-   */
-  serializeModule(moduleId) {
-    return [...this]
-      .filter(item => item[moduleIdSymbol] === moduleId)
-      .filter(item => !item[i18nPluginSymbol])
-      .map(item => JSON.parse(JSON.stringify(item)));
-  }
-
-  /**
-   * This method adds plugin messages to the collection. It is no necessary to call this function
-   * from within a plugin. Use the i18n property on your plugin.
-   * @param {string} plugin Name of the plugin
-   * @param {string} moduleId
-   * @param {Object} messages
-   */
-  addPluginMessages(plugin, moduleId, messages) {
-    messages[i18nPluginSymbol] = plugin;
-    messages[moduleIdSymbol] = moduleId;
-    this.add(messages);
-  }
-
-  /**
-   * This method removes plugin messages from the collection. It is no necessary to call this function
-   * from within a plugin. Once your plugin is removed, the VcsUiApp will call this for you.
-   * @param {string} pluginName
-   * @param {string} moduleId
-   */
-  removePluginMessages(pluginName, moduleId) {
-    [...this]
-      .filter(item => item[i18nPluginSymbol] === pluginName && item[moduleIdSymbol] === moduleId)
-      .forEach((item) => {
-        this.remove(item);
-      });
-  }
-
-  /**
-   * returns a merged Message Object with the locale as a key and an Object with all the translated keys
-   * @returns {Object}
-   */
-  getMergedMessages() {
-    return mergeDeep(...this);
-  }
-
-  /**
-   * @inheritDoc
-   */
-  destroy() {
-    this._getDynamicModuleId = null;
-    super.destroy();
-  }
-}
-
-export default I18nCollection;
+// eslint-disable-next-line max-classes-per-file
+import { v5 as uuidv5 } from 'uuid';
+import { IndexedCollection, moduleIdSymbol } from '@vcmap/core';
+import { getLogger } from '@vcsuite/logger';
+
+/**
+ * @type {string}
+ */
+const uniqueNamespace = '9c27cc2d-552f-4637-9194-09329ed4c1dc';
+
+/**
+ * returns true if the given value is of type object and not an array.
+ * This function does not handle Maps and Sets and also returns true for these.
+ * This helper function is mainly used for the i18nCollection mergeDeep function
+ * @param {*} item
+ * @returns {boolean}
+ */
+export function isObject(item) {
+  return !!item && typeof item === 'object' && !Array.isArray(item);
+}
+
+/**
+ * Item for internationalization containing an object with key value mapping for each locale (de, en, nl, pl, ...).
+ * Other locales can be supported by adding corresponding mapping objects with associated locale key.
+ * @typedef {Object} I18nConfigurationItem
+ * @property {string} [name] - optional name for the item. If not provided checksum is used.
+ * @property {Object} [properties]
+ * @property {Object} [de]
+ * @property {Object} [en]
+ * ...
+ */
+
+/**
+ * A symbol added to plugin messages added to this collection.
+ * @type {symbol}
+ */
+export const i18nPluginSymbol = Symbol('I18nPluginSymbol');
+
+/**
+ * Deep merge objects into a new Object. Can only handle stringifyable content.
+ * This will create a new deep copy of the given sources. No copy by reference.
+ * @param {...Object} sources
+ * @returns {Object}
+ */
+export function mergeDeep(...sources) {
+  return sources.reduce((prev, obj) => {
+    Object.entries(obj)
+      .filter(([key]) => !['name', 'properties'].includes(key))
+      .forEach(([key, value]) => {
+        if (isObject(prev[key]) && isObject(value)) {
+          // recursive merge if both values are objects.
+          prev[key] = mergeDeep(prev[key], value);
+        } else if (isObject(prev[key])) {
+          // do not override complex object with atomic value
+          getLogger('i18n').warning(
+            `Overwriting a complex Object I18n Key with a string value is not allowed. Value:
+          ${JSON.stringify(prev[key])}, newValue: ${JSON.stringify(obj[key])}`,
+          );
+        } else {
+          // JSON parse/stringify to create a deep copy of the to set value, so we do not pass parts
+          // of a source by reference
+          prev[key] = JSON.parse(JSON.stringify(value));
+        }
+      });
+    return prev;
+  }, {});
+}
+
+/**
+ * @extends {IndexedCollection<I18nConfigurationItem>}
+ */
+class I18nCollection extends IndexedCollection {
+  /**
+   * @param {function():string} getDynamicModuleId - function to get the current dynamic module id
+   */
+  constructor(getDynamicModuleId) {
+    super();
+    /**
+     * @type {function(): string}
+     * @private
+     */
+    this._getDynamicModuleId = getDynamicModuleId;
+  }
+
+  /**
+   * @inheritDoc
+   */
+  add(item) {
+    if (!item[moduleIdSymbol]) {
+      item[moduleIdSymbol] = this._getDynamicModuleId();
+    }
+    if (!item.name) {
+      item.name = uuidv5(JSON.stringify(item), uniqueNamespace);
+    }
+    super.add(item);
+  }
+
+  /**
+   * @param {Array<I18nConfigurationItem>} configArray
+   * @param {string} moduleId
+   * @returns {Promise<void>}
+   */
+  async parseItems(configArray, moduleId) {
+    if (Array.isArray(configArray)) {
+      configArray.forEach((item) => {
+        this.add({ ...item, [moduleIdSymbol]: moduleId });
+      });
+    }
+  }
+
+  /**
+   * @param {string} moduleId
+   */
+  async removeModule(moduleId) {
+    [...this]
+      .filter((item) => item[moduleIdSymbol] === moduleId)
+      .forEach((item) => {
+        this.remove(item);
+      });
+  }
+
+  /**
+   * @param {string} moduleId
+   * @returns {Array<I18nConfigurationItem>}
+   */
+  serializeModule(moduleId) {
+    return [...this]
+      .filter((item) => item[moduleIdSymbol] === moduleId)
+      .filter((item) => !item[i18nPluginSymbol])
+      .map((item) => JSON.parse(JSON.stringify(item)));
+  }
+
+  /**
+   * This method adds plugin messages to the collection. It is no necessary to call this function
+   * from within a plugin. Use the i18n property on your plugin.
+   * @param {string} plugin Name of the plugin
+   * @param {string} moduleId
+   * @param {Object} messages
+   */
+  addPluginMessages(plugin, moduleId, messages) {
+    messages[i18nPluginSymbol] = plugin;
+    messages[moduleIdSymbol] = moduleId;
+    messages.name = plugin;
+    this.add(messages);
+  }
+
+  /**
+   * This method removes plugin messages from the collection. It is no necessary to call this function
+   * from within a plugin. Once your plugin is removed, the VcsUiApp will call this for you.
+   * @param {string} pluginName
+   * @param {string} moduleId
+   */
+  removePluginMessages(pluginName, moduleId) {
+    [...this]
+      .filter(
+        (item) =>
+          item[i18nPluginSymbol] === pluginName &&
+          item[moduleIdSymbol] === moduleId,
+      )
+      .forEach((item) => {
+        this.remove(item);
+      });
+  }
+
+  /**
+   * returns a merged Message Object with the locale as a key and an Object with all the translated keys
+   * @returns {Object}
+   */
+  getMergedMessages() {
+    return mergeDeep(...this);
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    this._getDynamicModuleId = null;
+    super.destroy();
+  }
+}
+
+export default I18nCollection;

package/src/init.js

@@ -1,121 +1,121 @@
-import Vue from 'vue';
-import { check, checkMaybe, is } from '@vcsuite/check';
-import { VcsModule } from '@vcmap/core';
-import VcsAppComponentWrapper from './application/vcsAppWrapper.vue';
-import { vuetify } from './vuePlugins/vuetify.js';
-import { createVueI18n, setupI18n } from './vuePlugins/i18n.js';
-import VcsUiApp from './vcsUiApp.js';
-
-/**
- * Base pattern to check VcsObjects
- * @type {import("vcsuite/check").PatternFor<import("@vcmap/core").VcsObject>}
- */
-const VcsObjectPattern = {
-  type: String,
-  name: String,
-};
-
-/**
- * Base pattern to check VcsUiAppConfig
- * @type {import("vcsuite/check").PatternFor<VcsUiAppConfig>}
- */
-export const VcsUiAppConfigPattern = {
-  id: [undefined, String],
-  layers: [undefined, [VcsObjectPattern]],
-  maps: [undefined, [VcsObjectPattern]],
-  styles: [undefined, [VcsObjectPattern]],
-  viewpoints: [undefined, [VcsObjectPattern]],
-  startingViewpointName: [undefined, String],
-  startingMapName: [undefined, String],
-  projection: [undefined, Object],
-  categories: [undefined, [{ name: String, items: [Object] }]],
-  obliqueCollections: [undefined, [VcsObjectPattern]],
-  plugins: [undefined, [Object]],
-  contentTree: [undefined, [Object]],
-  uiConfig: [undefined, [Object]],
-  featureInfo: [undefined, [VcsObjectPattern]],
-  i18n: [undefined, [Object]],
-};
-
-/**
- * creates and mounts a vcsApp
- * @param {string} mountTarget
- * @returns {Promise<VcsUiApp>}
- */
-export default async function initApp(mountTarget) {
-  check(mountTarget, String);
-  const app = new VcsUiApp();
-  const i18n = createVueI18n();
-  new Vue({
-    vuetify,
-    i18n,
-    render: h => h(VcsAppComponentWrapper, {
-      props: {
-        appId: app.id,
-      },
-    }),
-  }).$mount(mountTarget);
-
-  setupI18n(app, i18n);
-  return app;
-}
-
-/**
- * Initializes app with an optional single config
- * @param {string} mountTarget
- * @param {string=} configUrl optional config
- * @returns {Promise<VcsUiApp>}
- */
-export async function initAppFromModule(mountTarget, configUrl) {
-  check(mountTarget, String);
-  checkMaybe(configUrl, String);
-
-  const app = await initApp(mountTarget);
-  if (configUrl) {
-    const config = await fetch(configUrl)
-      .then(response => response.json());
-    const module = new VcsModule(config);
-    await app.addModule(module);
-  }
-
-  return app;
-}
-
-/**
- * Initializes app with a map config containing a set of config urls
- * @param {string} mountTarget
- * @param {string} appUrl app config containing further modules to be loaded
- * @returns {Promise<VcsUiApp>}
- */
-export async function initAppFromAppConfig(mountTarget, appUrl) {
-  check(mountTarget, String);
-  check(appUrl, String);
-
-  const app = await initApp(mountTarget);
-  /**
-   * @type {{modules: Array<string|VcsUiAppConfig>}}
-   */
-  const appConfig = await fetch(appUrl)
-    .then(response => response.json());
-
-  check(appConfig.modules, [String, Object]);
-
-  const modules = await Promise.all(appConfig.modules.map(async (c) => {
-    if (is(c, VcsUiAppConfigPattern)) {
-      return new VcsModule(/** @type{import("@vcmap/core").VcsAppConfig} */ c);
-    } else if (is(c, String)) {
-      const response = await fetch(c);
-      if (response.ok) {
-        const config = await response.json();
-        return new VcsModule(config);
-      }
-    }
-    return null;
-  }));
-  // eslint-disable-next-line no-restricted-syntax
-  for await (const module of modules) {
-    if (module) {
-      await app.addModule(module);
-    }
-  }
-}
+import Vue from 'vue';
+import { check, checkMaybe, is } from '@vcsuite/check';
+import { VcsModule } from '@vcmap/core';
+import VcsAppComponentWrapper from './application/vcsAppWrapper.vue';
+import { vuetify } from './vuePlugins/vuetify.js';
+import VcsUiApp from './vcsUiApp.js';
+
+/**
+ * Base pattern to check VcsObjects
+ * @type {import("vcsuite/check").PatternFor<import("@vcmap/core").VcsObject>}
+ */
+const VcsObjectPattern = {
+  type: String,
+  name: String,
+};
+
+/**
+ * Base pattern to check VcsUiAppConfig
+ * @type {import("vcsuite/check").PatternFor<VcsUiAppConfig>}
+ */
+export const VcsUiAppConfigPattern = {
+  id: [undefined, String],
+  layers: [undefined, [VcsObjectPattern]],
+  maps: [undefined, [VcsObjectPattern]],
+  styles: [undefined, [VcsObjectPattern]],
+  viewpoints: [undefined, [VcsObjectPattern]],
+  startingViewpointName: [undefined, String],
+  startingMapName: [undefined, String],
+  projection: [undefined, Object],
+  categories: [undefined, [{ name: String, items: [Object] }]],
+  obliqueCollections: [undefined, [VcsObjectPattern]],
+  plugins: [undefined, [Object]],
+  contentTree: [undefined, [Object]],
+  uiConfig: [undefined, [Object]],
+  featureInfo: [undefined, [VcsObjectPattern]],
+  i18n: [undefined, [Object]],
+};
+
+/**
+ * creates and mounts a vcsApp
+ * @param {string} mountTarget
+ * @returns {Promise<VcsUiApp>}
+ */
+export default async function initApp(mountTarget) {
+  check(mountTarget, String);
+  const app = new VcsUiApp();
+  new Vue({
+    vuetify,
+    i18n: app.vueI18n,
+    render: (h) =>
+      h(VcsAppComponentWrapper, {
+        props: {
+          appId: app.id,
+        },
+      }),
+  }).$mount(mountTarget);
+
+  return app;
+}
+
+/**
+ * Initializes app with an optional single config
+ * @param {string} mountTarget
+ * @param {string=} configUrl optional config
+ * @returns {Promise<VcsUiApp>}
+ */
+export async function initAppFromModule(mountTarget, configUrl) {
+  check(mountTarget, String);
+  checkMaybe(configUrl, String);
+
+  const app = await initApp(mountTarget);
+  if (configUrl) {
+    const config = await fetch(configUrl).then((response) => response.json());
+    const module = new VcsModule(config);
+    await app.addModule(module);
+  }
+
+  return app;
+}
+
+/**
+ * Initializes app with a map config containing a set of config urls
+ * @param {string} mountTarget
+ * @param {string} appUrl app config containing further modules to be loaded
+ * @returns {Promise<VcsUiApp>}
+ */
+export async function initAppFromAppConfig(mountTarget, appUrl) {
+  check(mountTarget, String);
+  check(appUrl, String);
+
+  const app = await initApp(mountTarget);
+  /**
+   * @type {{modules: Array<string|VcsUiAppConfig>}}
+   */
+  const appConfig = await fetch(appUrl).then((response) => response.json());
+
+  check(appConfig.modules, [String, Object]);
+
+  const modules = await Promise.all(
+    appConfig.modules.map(async (c) => {
+      if (is(c, VcsUiAppConfigPattern)) {
+        return new VcsModule(
+          /** @type{import("@vcmap/core").VcsAppConfig} */ c,
+        );
+      } else if (is(c, String)) {
+        const response = await fetch(c);
+        if (response.ok) {
+          const config = await response.json();
+          return new VcsModule(config);
+        }
+      }
+      return null;
+    }),
+  );
+  // eslint-disable-next-line no-restricted-syntax
+  for await (const module of modules) {
+    if (module) {
+      await app.addModule(module);
+    }
+  }
+}

package/src/legend/legendHelper.js

@@ -43,7 +43,6 @@ export const StyleRowType = {
  * @property {string} src - the source url. Can be an i18n string.
  */
 
-
 /**
  * @typedef {LegendItem} StyleLegendItem
  * @property {number} [colNr=2] Number of columns. Valid values are 1 or 2. Per default 2.
@@ -172,27 +171,33 @@ export function getLegendEntries(app) {
     if (layer.active) {
       const key = layer.name;
       const title = layer.properties.title || layer.name;
-      const legend = layer.style?.properties?.legend ?? layer.properties?.legend;
+      const legend =
+        layer.style?.properties?.legend ?? layer.properties?.legend;
       if (legend) {
         const legendEntry = createLayerLegendEntry(key, title, legend);
         // use spread since push won't trigger updates. Put new entries at the start
         entries.value = [legendEntry, ...entries.value];
       }
       if (layer.styleChanged) {
-        styleChangedListener[layer.name] = layer.styleChanged.addEventListener(() => syncLayerLegendEntries(layer));
+        styleChangedListener[layer.name] = layer.styleChanged.addEventListener(
+          () => syncLayerLegendEntries(layer),
+        );
       }
     }
   }
 
-  const destroyChangedListener = app.layers.stateChanged.addEventListener(syncLayerLegendEntries);
-  const destroyRemovedListener = app.layers.removed.addEventListener(removeEntryForLayer);
+  const destroyChangedListener = app.layers.stateChanged.addEventListener(
+    syncLayerLegendEntries,
+  );
+  const destroyRemovedListener =
+    app.layers.removed.addEventListener(removeEntryForLayer);
 
   [...app.layers].forEach(syncLayerLegendEntries);
 
   const destroy = () => {
     destroyChangedListener();
     destroyRemovedListener();
-    Object.values(styleChangedListener).forEach(cb => cb());
+    Object.values(styleChangedListener).forEach((cb) => cb());
   };
 
   return { entries, destroy };