@vcmap/ui 5.0.0-rc.29 → 5.0.0-rc.30

package/src/components/vector-properties/composables.js

@@ -0,0 +1,93 @@
+import { computed } from 'vue';
+
+/**
+ * Creates a computed property with a getter and a setter for a specific primitive object property/key of the modelled object. This composable allows to pass the computed to an v-model of a sub component. The getter returns the value of the key. The setter merges the passed value with the other object properties of the modelled object and emits the whole object as a input event, and only the changed props as an change event.
+ * @param {function():Object} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
+ * @param {string} key The key of the modelObject that should be returned on get and updated on set.
+ * @param {function(event: string, ...args: any[]):void} emit The emit function of the component context that is using this composable.
+ * @returns {import('vue').WriteableComputedRef} A computed with a getter and a setter.
+ */
+export function usePrimitiveProperty(modelObject, key, emit) {
+  return computed({
+    get() {
+      return modelObject()[key];
+    },
+    set(value) {
+      if (modelObject()[key] !== value) {
+        const newParams = structuredClone(modelObject());
+        const changedParams = { [key]: value || undefined }; // XXX boolean values need to be handled differently
+        emit('input', Object.assign(newParams, changedParams));
+        emit('propertyChange', changedParams);
+      }
+    },
+  });
+}
+
+/**
+ * Creates an object with the entries of the input array as keys and computed properties as values. These have a getter and a setter for a specific entry of the array, that is an object property/key of the modelled object. This composable allows to pass the computeds to an v-model of a sub component. The getter returns the value of the array entry. The setter first merges the passed value with the other array entries, and then with the other object properties of the modelled object and emits the whole object as a input event, and only the changed props as an change event.
+ * @param {function():Object} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
+ * @param {string} key The key of the modelObject that should be returned on get and updated on set.
+ * @param {function(event: string, ...args: any[]):void} emit The emit function of the component context that is using this composable.
+ * @param {number} arrayLength The length of the array property.
+ * @returns {Object<string, import('vue').WriteableComputedRef>} An object with the provided names as keys and the corresponding computed properties with a getter and a setter.
+ */
+export function useArrayProperty(modelObject, key, emit, arrayLength) {
+  return Array(arrayLength)
+    .fill()
+    .map((entry, index) => {
+      return computed({
+        get() {
+          if (modelObject()?.[key]) {
+            return modelObject()[key][index];
+          } else {
+            return undefined;
+          }
+        },
+        set(value) {
+          const newParams = structuredClone(modelObject());
+          let changedParams;
+          if (!modelObject()?.[key]) {
+            const newArray = Array(arrayLength).fill();
+            newArray[index] = value;
+            changedParams = { [key]: newArray };
+          } else if (modelObject()[key][index] !== value) {
+            const newArray = [...modelObject()[key]];
+            newArray[index] = value;
+            changedParams = { [key]: newArray };
+          }
+
+          if (changedParams) {
+            emit('input', Object.assign(newParams, changedParams));
+            emit('propertyChange', changedParams);
+          }
+        },
+      });
+    });
+}
+
+/**
+ * Creates a computed property that returns whether a specific key of the modelled object (value prop) is undefined or not. If set to true, the provided default value is applied to the key of the modelled object.
+ * @param {function():Object} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
+ * @param {string} key The key of the modelObject that should be return on get and updated on set.
+ * @param {function(event: string, ...args: any[]):void} emit The emit function of the component context that is using this composable.
+ * @param {*} valueDefault  The defualt value that is set when `true` is provided to the setter of the computed property.
+ * @returns {import('vue').WriteableComputedRef} A computed ref with a setter and a getter.
+ */
+export function useHasProperty(modelObject, key, emit, valueDefault) {
+  return computed({
+    get() {
+      return modelObject()?.[key] !== undefined;
+    },
+    set(value) {
+      const newParams = structuredClone(modelObject());
+      let changedParams;
+      if (value) {
+        changedParams = { [key]: valueDefault };
+      } else {
+        changedParams = { [key]: undefined };
+      }
+      emit('input', Object.assign(newParams, changedParams));
+      emit('propertyChange', changedParams);
+    },
+  });
+}

package/src/i18n/de.js

@@ -1,9 +1,9 @@
 const messages = {
   navbar: {
     maps: {
-      CesiumMap: '3D Karte aktivieren',
-      OpenlayersMap: '2D Karte aktivieren',
-      ObliqueMap: 'Schrägluftbilder aktivieren',
+      CesiumMap: '3D-Karte aktivieren',
+      OpenlayersMap: '2D-Karte aktivieren',
+      ObliqueMap: 'Schrägluftbildkarte aktivieren',
     },
     menu: {
       tooltip: 'Menü',
@@ -69,8 +69,8 @@ const messages = {
       noResultsPlaceholder: 'Keine übereinstimmenden Einträge gefunden',
     },
     style: {
-      fill: 'Füll Stil',
-      stroke: 'Linien Stil',
+      fill: 'Füllung',
+      stroke: 'Linie',
       reset: 'Zurücksetzen',
       lineWidth: 'Linienbreite',
       type: 'Typ',
@@ -81,7 +81,7 @@ const messages = {
       rotation: 'Rotation',
       scale: 'Skalierung',
       opacity: 'Deckkraft',
-      image: 'Punkt Stil',
+      image: 'Symbol',
       icon: 'Icon',
       presets: 'Vorlagen',
       shape: 'Form',
@@ -97,11 +97,37 @@ const messages = {
       italic: 'Kursiv',
       text: 'Text',
       enterText: 'Text hier eingeben',
-      allowedRange: 'Erlaubter Wertebereich',
-      notValid: 'Eingabe nicht gültig',
-      required: 'Eingabe ist erforderlich',
       offset: 'Versatz',
     },
+    vectorProperties: {
+      header: 'Vektor Eigenschaften',
+      altitudeMode: 'Höhenmodus',
+      clampToGround: 'Auf Gelände legen',
+      absolute: 'Absolut',
+      relativeToGround: 'Relativ zum Gelände',
+      groundLevel: 'Geländehöhe',
+      classificationType: 'Klassifizierung',
+      none: 'Keine',
+      both: 'Beide',
+      cesium3DTile: '3D Tiles',
+      terrain: 'Gelände',
+      heightAboveGround: 'Höhe über Gelände',
+      allowPicking: 'Auswahl erlauben',
+      scaleByDistance: 'Distanzskalierung',
+      eyeOffset: 'Blick Versatz',
+      storeys: 'Stockwerke',
+      storeyHeights: 'Stockwerkshöhe(n)',
+      aboveGround: 'Über Grund',
+      belowGround: 'Unter Grund',
+      modelUrl: 'Modell URL',
+      modelHeading: 'Modell Ausrichtung',
+      modelPitch: 'Modell Neigung',
+      modelRoll: 'Modell Rotation',
+      baseUrl: 'Basis URL',
+      extrudedHeight: 'Extrusion',
+      skirt: 'Skirts',
+      modelScale: 'Modell Skalierung',
+    },
   },
   settings: {
     title: 'Einstellungen',
@@ -117,6 +143,11 @@ const messages = {
     title: 'Hilfe',
     tooltip: 'Externe Hilfeseite in neuem Browser Tab öffnen',
   },
+  validation: {
+    allowedRange: 'Erlaubter Wertebereich',
+    notValid: 'Eingabe nicht gültig',
+    required: 'Eingabe ist erforderlich',
+  },
   featureInfo: {
     activateToolTitle: 'Informationswerkzeug aktivieren',
     deactivateToolTitle: 'Informationswerkzeug deaktivieren',

package/src/i18n/en.js

@@ -1,9 +1,9 @@
 const messages = {
   navbar: {
     maps: {
-      CesiumMap: 'Enable 3D view',
-      OpenlayersMap: 'Enable 2D view',
-      ObliqueMap: 'Enable oblique view',
+      CesiumMap: 'Enable 3D map',
+      OpenlayersMap: 'Enable 2D map',
+      ObliqueMap: 'Enable oblique imagery map',
     },
     menu: {
       tooltip: 'Menu',
@@ -81,7 +81,7 @@ const messages = {
       rotation: 'Rotation',
       scale: 'Scale',
       opacity: 'Opacity',
-      image: 'Point style',
+      image: 'Symbol',
       icon: 'Icon',
       shape: 'Shape',
       presets: 'Presets',
@@ -97,11 +97,37 @@ const messages = {
       italic: 'Italic',
       text: 'Text',
       enterText: 'Enter text here',
-      allowedRange: 'Allowed value range',
-      notValid: 'Input not valid',
-      required: 'Input is required',
       offset: 'Offset',
     },
+    vectorProperties: {
+      header: 'Vector properties',
+      altitudeMode: 'Altitude mode',
+      clampToGround: 'Clamp to ground',
+      absolute: 'Absolute',
+      relativeToGround: 'Relative to ground',
+      groundLevel: 'Ground level',
+      classificationType: 'Classification',
+      none: 'None',
+      both: 'Both',
+      cesium3DTile: '3D Tiles',
+      terrain: 'Terrain',
+      heightAboveGround: 'Height above ground',
+      allowPicking: 'Allow picking',
+      scaleByDistance: 'Scale by distance',
+      eyeOffset: 'Eye offset',
+      storeys: 'Storeys',
+      storeyHeights: 'Storey height(s)',
+      aboveGround: 'Above ground',
+      belowGround: 'Below ground',
+      modelUrl: 'Model URL',
+      modelHeading: 'Model heading',
+      modelPitch: 'Model pitch',
+      modelRoll: 'Model roll',
+      baseUrl: 'Base URL',
+      extrudedHeight: 'Extrusion',
+      skirt: 'Skirts',
+      modelScale: 'Model scale',
+    },
   },
   settings: {
     title: 'Settings',
@@ -117,6 +143,11 @@ const messages = {
     title: 'Help',
     tooltip: 'Open external help page in new browser tab',
   },
+  validation: {
+    allowedRange: 'Allowed value range',
+    notValid: 'Input not valid',
+    required: 'Input is required',
+  },
   featureInfo: {
     activateToolTitle: 'Enable Info Tool',
     deactivateToolTitle: 'Disable Info Tool',

package/src/manager/collectionManager/collectionComponent.js

@@ -243,7 +243,7 @@ class CollectionComponent {
    * @private
    */
   _insertListItem(listItem) {
-    if (!this._listItems.value.includes(listItem)) {
+    if (!this._listItems.value.some((i) => i.name === listItem.name)) {
       if (this._collection instanceof IndexedCollection) {
         const newItemIndex = this._collection.indexOfKey(listItem.name);
         if (newItemIndex === this._collection.size - 1) {

package/src/pluginHelper.js

@@ -25,9 +25,21 @@ export const pluginFactorySymbol = Symbol('pluginFactory');
  */
 export const pluginBaseUrlSymbol = Symbol('pluginBaseUrl');
 
+/**
+ * A symbol added to each plugin which describes the module URL from which the plugin was loaded (with the filename and including searchParams)
+ * @type {symbol}
+ */
+export const pluginModuleUrlSymbol = Symbol('pluginModuleUrl');
+/**
+ * A symbol added to each plugin which describes the configured version range
+ * @type {symbol}
+ */
+export const pluginVersionRangeSymbol = Symbol('pluginVersionRange');
+
 /**
  * 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')
+ * Sets the plugin version as searchParam.
  * Returns null, if the plugin does not exist.
  * @param {VcsUiApp} app
  * @param {string} pluginName
@@ -47,6 +59,7 @@ export function getPluginAssetUrl(app, pluginName, asset) {
         assetUrl.searchParams.set(key, value);
       }
     });
+    assetUrl.searchParams.set('version', plugin.version);
     return assetUrl.toString();
   }
   return null;
@@ -114,15 +127,24 @@ export async function loadPlugin(name, config) {
     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`);
+    if (!(pluginInstance.name || pluginInstance.version)) {
+      getLogger().error(
+        `plugin ${name} does not conform to the VcsPlugin interface, which requires a name and version`,
+      );
       if (pluginInstance.destroy) {
         pluginInstance.destroy();
       }
       return null;
     }
+    if (!isValidPackageName(pluginInstance.name)) {
+      getLogger().warning(
+        `plugin ${pluginInstance.name} has no valid package name!`,
+      );
+    }
     pluginInstance[pluginFactorySymbol] = plugin.default;
     pluginInstance[pluginBaseUrlSymbol] = baseUrl.toString();
+    pluginInstance[pluginModuleUrlSymbol] = module;
+    pluginInstance[pluginVersionRangeSymbol] = config.version;
     return pluginInstance;
   } catch (err) {
     getLogger().error(`failed to load plugin ${name}`);
@@ -132,19 +154,25 @@ export async function loadPlugin(name, config) {
 }
 
 /**
+ * Returns relative url, if base is same, otherwise absolute url
+ * Removes version from searchParams, since version is serialized itself
  * @param {string} base
- * @param {string} pluginBase
+ * @param {string} pluginUrl
  * @returns {string}
  */
-export function getPluginEntry(base, pluginBase) {
+export function getPluginEntry(base, pluginUrl) {
   const baseUrl = new URL(base);
-  const pluginBaseUrl = new URL(pluginBase);
-  if (baseUrl.origin !== pluginBaseUrl.origin) {
-    return pluginBase;
+  const pluginModuleUrl = new URL(pluginUrl);
+  pluginModuleUrl.searchParams.delete('version'); // semver is part of config
+  if (baseUrl.origin !== pluginModuleUrl.origin) {
+    return pluginModuleUrl.toString();
   }
   const baseSubs = baseUrl.pathname.split('/');
-  const pluginSubs = pluginBaseUrl.pathname.split('/');
-  return pluginSubs.filter((sub, idx) => sub !== baseSubs[idx]).join('/');
+  const pluginSubs = pluginModuleUrl.pathname.split('/');
+  pluginModuleUrl.pathname = pluginSubs
+    .filter((sub, idx) => sub !== baseSubs[idx])
+    .join('/');
+  return `${pluginModuleUrl.pathname}${pluginModuleUrl.search}`.substring(1);
 }
 
 /**
@@ -154,24 +182,36 @@ export function getPluginEntry(base, pluginBase) {
 export function serializePlugin(plugin) {
   const serializedPlugin = plugin.toJSON ? plugin.toJSON() : {};
   serializedPlugin.name = plugin.name;
+  if (serializedPlugin[pluginVersionRangeSymbol]) {
+    serializedPlugin.version = serializedPlugin[pluginVersionRangeSymbol];
+  }
   serializedPlugin.entry = getPluginEntry(
     window.location.href,
-    plugin[pluginBaseUrlSymbol],
+    plugin[pluginModuleUrlSymbol],
   );
   serializedPlugin[pluginFactorySymbol] = plugin[pluginFactorySymbol];
   serializedPlugin[pluginBaseUrlSymbol] = plugin[pluginBaseUrlSymbol];
+  serializedPlugin[pluginModuleUrlSymbol] = plugin[pluginModuleUrlSymbol];
+  serializedPlugin[pluginVersionRangeSymbol] = plugin[pluginVersionRangeSymbol];
   return serializedPlugin;
 }
 
 /**
  * @param {Object} serializedPlugin
- * @returns {Promise<VcsPlugin>}
+ * @returns {Promise<VcsPlugin|null>}
  */
 export async function deserializePlugin(serializedPlugin) {
-  const reincarnation = await serializedPlugin[pluginFactorySymbol](
-    serializedPlugin,
-  );
-  reincarnation[pluginFactorySymbol] = serializedPlugin[pluginFactorySymbol];
-  reincarnation[pluginBaseUrlSymbol] = serializedPlugin[pluginBaseUrlSymbol];
-  return reincarnation;
+  if (serializedPlugin[pluginFactorySymbol]) {
+    const reincarnation = await serializedPlugin[pluginFactorySymbol](
+      serializedPlugin,
+    );
+    reincarnation[pluginFactorySymbol] = serializedPlugin[pluginFactorySymbol];
+    reincarnation[pluginBaseUrlSymbol] = serializedPlugin[pluginBaseUrlSymbol];
+    reincarnation[pluginModuleUrlSymbol] =
+      serializedPlugin[pluginModuleUrlSymbol];
+    reincarnation[pluginVersionRangeSymbol] =
+      serializedPlugin[pluginVersionRangeSymbol];
+    return reincarnation;
+  }
+  return loadPlugin(serializedPlugin.name, serializedPlugin);
 }

package/src/vcsUiApp.js

@@ -13,12 +13,7 @@ import {
   volatileModuleId,
 } from '@vcmap/core';
 import { getLogger as getLoggerByName } from '@vcsuite/logger';
-import {
-  deserializePlugin,
-  isValidPackageName,
-  loadPlugin,
-  serializePlugin,
-} from './pluginHelper.js';
+import { deserializePlugin, serializePlugin } from './pluginHelper.js';
 import ToolboxManager, {
   setupDefaultGroups,
 } from './manager/toolbox/toolboxManager.js';
@@ -54,8 +49,15 @@ import { callbackClassRegistry } from './callback/vcsCallback.js';
 /**
  * @typedef {Object} PluginConfig
  * @property {string} name
- * @property {string|undefined} entry
- * @property {string|undefined} version
+ * @property {string|undefined} entry - path to the plugin's index.js
+ * @property {string|undefined} version - version or version range
+ */
+
+/**
+ * @typedef {Object} PluginConfigEditor
+ * @property {import("vue").Component} component - A editor component to configure a plugin or item
+ * @property {string} [collectionName='plugins'] - The collection the item belongs to. Default is plugins collection.
+ * @property {string} [itemName] - The item the editor can be used for. Can be a name or className. Default is the plugin's name.
  */
 
 /**
@@ -67,6 +69,8 @@ import { callbackClassRegistry } from './callback/vcsCallback.js';
  */
 
 /**
+ * Interface for VcsPlugins.
+ * The function implementing the interface should not throw!
  * @interface VcsPlugin
  * @template {Object} P
  * @template {Object} S
@@ -75,9 +79,11 @@ import { callbackClassRegistry } from './callback/vcsCallback.js';
  * @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():P} [toJSON] - should return the plugin's serialization excluding all default values
+ * @property {function():P} [getDefaultOptions] - should return the plugin's default options
+ * @property {function(boolean=):S|Promise<S>} [getState] - should return the plugin's 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
+ * @property {Array<PluginConfigEditor>} [getConfigEditors] - should return components for configuring the plugin or custom items defined by the plugin
  * @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
  */
 
@@ -545,23 +551,7 @@ class VcsUiApp extends VcsApp {
   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);
-          if (!plugin) {
-            return null;
-          }
-          if (!isValidPackageName(plugin.name)) {
-            getLogger().warning(
-              `plugin ${plugin.name} has no valid package name!`,
-            );
-          }
-          plugin[moduleIdSymbol] = module._id;
-          return plugin;
-        }),
-      );
-
-      plugins.filter((p) => p).map((p) => this._plugins.override(p));
+      await this._plugins.parseItems(config.plugins, module._id);
     }
     if (Array.isArray(config.i18n)) {
       await this.i18n.parseItems(config.i18n, module._id);

package/dist/assets/index-cb070eff.js

@@ -1 +0,0 @@
-import{initAppFromAppConfig as p}from"./ui.d3054c.js";p("#app","app.config.json");