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

package/src/contentTree/contentTreeCollection.js

@@ -4,7 +4,6 @@ import {
   makeOverrideCollection,
   getObjectFromClassRegistry,
 } from '@vcmap/core';
-import { v4 as uuid } from 'uuid';
 import { computed, ref } from 'vue';
 import ContentTreeItem from './contentTreeItem.js';
 import { vcsAppSymbol } from '../pluginHelper.js';
@@ -71,6 +70,11 @@ class ContentTreeCollection extends IndexedCollection {
           this._weightListeners.get(child.name)();
           this._weightListeners.delete(child.name);
         }
+        if (this._subTreeListeners.has(child.name)) {
+          this._subTreeListeners.get(child.name)();
+          this._subTreeListeners.delete(child.name);
+          this._subTreeViewItems.value.delete(child.name);
+        }
       }),
       this.moved.addEventListener(recreateTree),
     ];
@@ -90,10 +94,10 @@ class ContentTreeCollection extends IndexedCollection {
     this._subTreeViewItems = ref(new Map());
     /**
      * The subtree content action button destroy handlers
-     * @type {Array<function():void>}
+     * @type {Map<string, function():void>}
      * @private
      */
-    this._subTreeListeners = [];
+    this._subTreeListeners = new Map();
     /**
      * @type {boolean}
      * @private
@@ -106,7 +110,7 @@ class ContentTreeCollection extends IndexedCollection {
    */
   _clearSubTrees() {
     this._subTreeViewItems.value.clear();
-    this._subTreeListeners.forEach((cb) => {
+    [...this._subTreeListeners.values()].forEach((cb) => {
       cb();
     });
   }
@@ -119,7 +123,7 @@ class ContentTreeCollection extends IndexedCollection {
    */
   _createSubtreeActionButton(subTreeViewItem, slot = WindowSlot.STATIC) {
     // TODO make configurable?
-    const id = uuid();
+    const id = subTreeViewItem.name;
     const app = this._app;
     const { action, destroy } = createToggleAction(
       // TODO icon & title are not reactive
@@ -135,6 +139,9 @@ class ContentTreeCollection extends IndexedCollection {
         state: {
           headerIcon: subTreeViewItem.icon,
           headerTitle: subTreeViewItem.title,
+          infoUrlCallback: app.getHelpUrlCallback(
+            '/components/contentspace.html#id_content',
+          ),
         },
       },
       app.windowManager,
@@ -158,7 +165,6 @@ class ContentTreeCollection extends IndexedCollection {
    * @private
    */
   _setTreeView() {
-    this._clearSubTrees();
     /** @type {Map<string, ParentTreeViewItem>} */
     const baseTreeMap = new Map();
     [...this._array]
@@ -210,9 +216,14 @@ class ContentTreeCollection extends IndexedCollection {
       ...topLevelItems.filter((i) => i[subTreeSymbol]),
     ];
 
-    this._subTreeListeners = subTrees.map((subTree) =>
-      this._createSubtreeActionButton(subTree),
-    );
+    subTrees.forEach((subTree) => {
+      if (!this._app.navbarManager.has(subTree.name)) {
+        this._subTreeListeners.set(
+          subTree.name,
+          this._createSubtreeActionButton(subTree),
+        );
+      }
+    });
   }
 
   /**
@@ -225,8 +236,8 @@ class ContentTreeCollection extends IndexedCollection {
   }
 
   /**
-   * All ids of the currently managed subtrees. Ids are not persisted and will change if
-   * the trees get recalculated. The first ID is always the default tree. Other ids are subtree ids.
+   * All ids of the currently managed subtrees.
+   * The first ID is always the default tree. Other ids are subtree ids.
    * Order of ids is dependent on their position in the collection and weight.
    * @type {Array<string>}
    * @readonly

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

@@ -113,6 +113,10 @@ const messages = {
       light: 'Hell',
     },
   },
+  help: {
+    title: 'Hilfe',
+    tooltip: 'Externe Hilfeseite in neuem Browser Tab öffnen',
+  },
   featureInfo: {
     activateToolTitle: 'Informationswerkzeug aktivieren',
     deactivateToolTitle: 'Informationswerkzeug deaktivieren',

package/src/i18n/en.js

@@ -113,6 +113,10 @@ const messages = {
       light: 'Light',
     },
   },
+  help: {
+    title: 'Help',
+    tooltip: 'Open external help page in new browser tab',
+  },
   featureInfo: {
     activateToolTitle: 'Enable Info Tool',
     deactivateToolTitle: 'Disable Info Tool',

package/src/manager/collectionManager/CollectionComponent.vue

@@ -9,7 +9,11 @@
             </v-icon>
             {{ $t(title) }}
           </div>
-          <VcsActionButtonList v-if="actions?.length > 0" :actions="actions" />
+          <VcsActionButtonList
+            v-if="actions?.length > 0"
+            :actions="actions"
+            :overflow-count="overflowCount"
+          />
         </div>
       </template>
     </v-expansion-panel-header>
@@ -85,6 +89,7 @@
         draggable: collectionComponent.draggable,
         selectable: collectionComponent.selectable,
         singleSelect: collectionComponent.singleSelect,
+        overflowCount: collectionComponent.overflowCount,
         limit: collectionComponent.limit,
         actions: collectionComponent.getActions(),
         move({ item, targetIndex }) {

package/src/manager/collectionManager/collectionComponent.js

@@ -13,6 +13,7 @@ import { sortByWeight } from '../buttonManager.js';
  * @property {boolean} [draggable] - only supported for IndexedCollections
  * @property {boolean} [selectable]
  * @property {boolean} [singleSelect]
+ * @property {number} [overflowCount=2] - number of header action buttons rendered until overflow
  * @property {number} [limit=10] - limit number of items in rendered list (more items are rendered in extra window)
  */
 
@@ -59,6 +60,11 @@ class CollectionComponent {
      * @type {import("vue").Ref<boolean>}
      */
     this.open = ref(false);
+    /**
+     *
+     * @type {import("vue").Ref<number>}
+     */
+    this.overflowCount = ref(parseNumber(options.overflowCount, 2));
     /**
      *
      * @type {import("vue").Ref<number>}

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/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
  */
 
 /**

package/src/vcsUiApp.js

@@ -1,23 +1,23 @@
 import {
-  VcsApp,
-  moduleIdSymbol,
   Collection,
-  makeOverrideCollection,
-  destroyCollection,
-  OverrideClassRegistry,
   defaultDynamicModuleId,
+  destroyCollection,
+  getObjectFromClassRegistry,
+  makeOverrideCollection,
+  moduleIdSymbol,
   ObliqueMap,
+  OverrideClassRegistry,
+  VcsApp,
+  VcsEvent,
   Viewpoint,
   volatileModuleId,
-  VcsEvent,
-  getObjectFromClassRegistry,
 } from '@vcmap/core';
 import { getLogger as getLoggerByName } from '@vcsuite/logger';
 import {
+  deserializePlugin,
   isValidPackageName,
   loadPlugin,
   serializePlugin,
-  deserializePlugin,
 } from './pluginHelper.js';
 import ToolboxManager, {
   setupDefaultGroups,
@@ -443,6 +443,27 @@ class VcsUiApp extends VcsApp {
     return this._notifier;
   }
 
+  /**
+   * Returns a callback function providing a URL to help page.
+   * The default helpBaseUrl can be changed by adding an 'helpBaseUrl' item to the UiConfig Collection.
+   * The callback derives the url from the VC Map mayor and minor version, the current app locale and a provided path pointing to a specific help section.
+   * This function can be used for the WindowState infoUrlCallback property.
+   * @param {string} [path] - the path to a help section
+   * @param {string} [subpage='vc-map'] - path to a subpage. Default is 'vc-map'.
+   * @returns {function():string}
+   */
+  getHelpUrlCallback(path = '', subpage = 'vc-map') {
+    const mayorMinorVersion = /\d+\.\d+/.exec(VcsUiApp.getVersion())[0];
+    return () => {
+      const base =
+        this.uiConfig.config.value.helpBaseUrl || 'https://help.vc.systems/';
+      const url = `${subpage}-${this.locale}/v${mayorMinorVersion}/${path}`;
+      // const url = `${this.locale}/${subpage}/v${mayorMinorVersion}/${path}`;
+      const { href } = new URL(url, base);
+      return href.replace(/\/+/g, '/');
+    };
+  }
+
   /**
    * 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,

package/dist/assets/index-1cff371d.js

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