@vcmap/ui 5.0.0-rc.28 → 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/contentTree/contentTreeCollection.js

@@ -139,6 +139,9 @@ class ContentTreeCollection extends IndexedCollection {
         state: {
           headerIcon: subTreeViewItem.icon,
           headerTitle: subTreeViewItem.title,
+          infoUrlCallback: app.getHelpUrlCallback(
+            '/components/contentspace.html#id_content',
+          ),
         },
       },
       app.windowManager,

package/src/featureInfo/abstractFeatureInfoView.js

@@ -303,15 +303,17 @@ class AbstractFeatureInfoView extends VcsObject {
   /**
    * This method is being called by featureInfo, whenever a new window is created (added to the windowManager).
    * May be overwritten by classes extending AbstractFeatureInfoView.
+   * @param {VcsUiApp} app
    * @param {FeatureInfoEvent} featureInfo
    * @param {import("@vcmap/core").Layer} layer
    * @returns {WindowComponentOptions}
    */
-  getWindowComponentOptions(featureInfo, layer) {
+  getWindowComponentOptions(app, featureInfo, layer) {
     return {
       state: this.window.state ?? {
         headerTitle: layer.properties?.title || layer.name,
         headerIcon: '$vcsInfo',
+        infoUrl: app.getHelpUrlCallback('/tools/infoTool.html'),
       },
       slot: this.window.slot ?? WindowSlot.DYNAMIC_LEFT,
       component: this.component,

package/src/featureInfo/balloonFeatureInfoView.js

@@ -127,12 +127,13 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
   }
 
   /**
+   * @param {VcsUiApp} app
    * @param {FeatureInfoEvent} featureInfo
    * @param {import("@vcmap/core").Layer} layer
    * @returns {WindowComponentOptions}
    */
-  getWindowComponentOptions(featureInfo, layer) {
-    const options = super.getWindowComponentOptions(featureInfo, layer);
+  getWindowComponentOptions(app, featureInfo, layer) {
+    const options = super.getWindowComponentOptions(app, featureInfo, layer);
     options.state.hideHeader = true;
     options.state.classes = ['balloon'];
     options.slot = WindowSlot.DETACHED;

package/src/featureInfo/featureInfo.js

@@ -442,6 +442,7 @@ class FeatureInfo extends Collection {
         {
           id: this._windowId,
           ...usedFeatureInfoView.getWindowComponentOptions(
+            this._app,
             { feature, position, windowPosition },
             layer,
           ),

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',
@@ -113,6 +139,15 @@ const messages = {
       light: 'Hell',
     },
   },
+  help: {
+    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',
@@ -113,6 +139,15 @@ const messages = {
       light: 'Light',
     },
   },
+  help: {
+    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/manager/window/WindowComponent.vue

@@ -8,7 +8,7 @@
     :draggable="isDraggable"
     :class="{
       rounded: !isDocked,
-      marginToTop: isDocked,
+      marginToTop: isDocked || !isChild,
       'rounded-br': isDynamicLeft,
       'rounded-bl': isDynamicRight,
     }"
@@ -20,6 +20,7 @@
       class="pa-2"
       :class="{
         'cursor-grab': isDynamic,
+        child: isChild,
       }"
     >
       <slot name="headerComponent" :props="$attrs" />
@@ -86,6 +87,7 @@
         provide(key, value);
       });
 
+      const isChild = computed(() => !!props.windowState.parentId);
       const isDynamic = computed(() => props.slotWindow !== WindowSlot.STATIC);
       const isDocked = computed(() => props.slotWindow !== WindowSlot.DETACHED);
       const isDockedLeft = computed(() => {
@@ -144,6 +146,7 @@
 
       return {
         isDynamic,
+        isChild,
         isDocked,
         isDynamicLeft: isDockedLeft,
         isDynamicRight: isDockedRight,

package/src/manager/window/WindowComponentHeader.vue

@@ -15,7 +15,7 @@
         class="d-inline-block user-select-none font-weight-bold"
         :class="{ 'text--primary': isOnTop }"
       >
-        {{ $t(windowState.headerTitle) }}
+        {{ translatedHeaderTitle }}
       </span>
     </h3>
     <div class="d-flex justify-space-between align-center">
@@ -27,7 +27,7 @@
         <v-divider vertical inset class="mx-1" />
       </template>
       <VcsButton
-        v-if="windowState.infoUrl"
+        v-if="infoAction"
         @click.stop="infoAction.callback()"
         :icon="infoAction.icon"
         :tooltip="infoAction.title"
@@ -65,7 +65,7 @@
 
 <script>
   import { VIcon, VDivider } from 'vuetify/lib';
-  import { computed } from 'vue';
+  import { computed, getCurrentInstance } from 'vue';
   import VcsButton from '../../components/buttons/VcsButton.vue';
   import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
   import { createLinkAction } from '../../actions/actionHelper.js';
@@ -75,6 +75,8 @@
    * @vue-prop {WindowState}    windowState - state of the window component.
    * @vue-event {void} pin - raised when pin button is clicked
    * @vue-event {void} close - raised when close button is clicked
+   * @vue-computed {boolean} isDockable
+   * @vue-computed {string} translatedHeaderTitle - translates header title and joins array
    */
   export default {
     name: 'WindowComponentHeader',
@@ -110,21 +112,31 @@
         () => !props.windowState.hidePin && props.windowState.dockable,
       );
 
-      const infoAction = props.windowState.infoUrl
-        ? createLinkAction(
-            {
-              name: 'info',
-              title: 'content.infoAction.title',
-              icon: '$vcsInfo',
-            },
-            props.windowState.infoUrl,
-          )
-        : {};
+      const vm = getCurrentInstance().proxy;
+
+      const translatedHeaderTitle = computed(() =>
+        Array.isArray(props.windowState.headerTitle)
+          ? props.windowState.headerTitle.map((t) => vm.$t(t)).join(' ')
+          : vm.$t(props.windowState.headerTitle),
+      );
+
+      const infoAction =
+        props.windowState.infoUrl || props.windowState.infoUrlCallback
+          ? createLinkAction(
+              {
+                name: 'info',
+                title: 'content.infoAction.title',
+                icon: '$vcsHelp',
+              },
+              props.windowState.infoUrl || props.windowState.infoUrlCallback,
+            )
+          : undefined;
 
       return {
         pin,
         close,
         isDockable,
+        translatedHeaderTitle,
         infoAction,
       };
     },

package/src/manager/window/windowManager.js

@@ -120,11 +120,12 @@ export function isSlotPosition(windowPosition) {
  * @property {string|vcsAppSymbol} owner Owner of the window, set by windowManager on add
  * @property {boolean} [hideHeader] be used to not show the header.
  * @property {boolean} [hidePin] be used to not show the pin button.
- * @property {string} [headerTitle]
+ * @property {string|string[]} [headerTitle] An optional translatable header. If an array is provided all elements are translated and joined afterward.
  * @property {string} [headerIcon]
  * @property {Array<VcsAction>} [headerActions]
  * @property {number} [headerActionsOverflow]
  * @property {string} [infoUrl] An optional url referencing help or further information on the window's content.
+ * @property {function():string} [infoUrlCallback] An optional function returning an url referencing help or further information. Can be used for urls depending on the app's locale, e.g. app.getHelpUrl()
  * @property {boolean} [dockable] Auto derived from hidePin, current slot, current position and initial position.
  * @property {Object<string, string>} [styles] Can be used to add additional styles to the root WindowComponent. Use Vue Style Bindings Object Syntax https://vuejs.org/v2/guide/class-and-style.html
  * @property {Array<string>|Object<string,string>} [classes] Can be used to add additional classes to the root WindowComponent. Use Vue Class Bindings Syntax https://vuejs.org/v2/guide/class-and-style.html
@@ -466,6 +467,7 @@ class WindowManager {
       );
     }
     const id = windowComponentOptions.id || uuidv4();
+    const parentId = windowComponentOptions?.parentId;
     const slotOption =
       windowComponentOptions.slot?.value || windowComponentOptions.slot;
     const slot = parseEnumValue(slotOption, WindowSlot, WindowSlot.DETACHED);
@@ -492,6 +494,7 @@ class WindowManager {
 
     const state = reactive({
       id,
+      parentId,
       owner,
       hideHeader: !!windowComponentOptions?.state?.hideHeader,
       hidePin: !!windowComponentOptions?.state?.hidePin,
@@ -502,6 +505,7 @@ class WindowManager {
         windowComponentOptions?.state?.headerActionsOverflow,
       dockable: false,
       infoUrl: windowComponentOptions?.state?.infoUrl,
+      infoUrlCallback: windowComponentOptions?.state?.infoUrlCallback,
       classes,
       styles,
     });
@@ -520,7 +524,7 @@ class WindowManager {
         return id;
       },
       get parentId() {
-        return windowComponentOptions?.parentId;
+        return parentId;
       },
       get state() {
         return state;

package/src/navigation/overviewMap.js

@@ -228,7 +228,7 @@ class OverviewMap {
           clone.activate();
           const idx = this._map.layerCollection.indexOf(clone);
           if (idx < 0) {
-            this._map.layerCollection.add(clone, 0);
+            this._map.layerCollection.add(clone);
           } else {
             this._map.layerCollection.remove(clone);
             this._map.layerCollection.add(clone, idx);

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/uiConfig.js

@@ -14,6 +14,7 @@ import { ref } from 'vue';
  * @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
  * @property {boolean} [startingFeatureInfo] - an optional flag whether to activate feature info on startup (default active)
+ * @property {string} [helpBaseUrl='https://help.vc.systems/'] - an optional URL to a help landing page
  */
 
 /**