@vcmap/ui 5.0.0-rc.8 → 5.0.0

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/LayerTree.vue

@@ -1,18 +1,23 @@
 <template>
-  <VcsTreeview
-    v-if="tree && tree.length"
-    :items="tree"
-    :open.sync="open"
-    :has-searchbar="true"
-    :searchbar-placeholder="'layer-tree.search.placeholder'"
-    item-children="visibleChildren"
-  />
+  <div>
+    <VcsTreeview
+      v-if="tree && tree.length"
+      :items="tree"
+      :open.sync="open"
+      :show-searchbar="true"
+      :searchbar-placeholder="'content.search.placeholder'"
+      item-children="visibleChildren"
+    />
+    <v-sheet v-else class="ma-2">
+      {{ $t('content.empty') }}
+    </v-sheet>
+  </div>
 </template>
 
-
 <script>
-  import { inject } from '@vue/composition-api';
-  import { VcsTreeview } from '@vcsuite/ui-components';
+  import { inject } from 'vue';
+  import { VSheet } from 'vuetify/lib';
+  import VcsTreeview from '../components/lists/VcsTreeview.vue';
 
   /**
    * @description
@@ -20,7 +25,7 @@
    */
   export default {
     name: 'VcsLayerTree',
-    components: { VcsTreeview },
+    components: { VcsTreeview, VSheet },
     props: {
       windowState: {
         type: Object,
@@ -29,10 +34,9 @@
     },
     setup(props) {
       const app = inject('vcsApp');
-      const { id } = props.windowState;
-      const open = app.contentTree.getTreeOpenStateRef(id);
+      const open = app.contentTree.getTreeOpenStateRef(props.windowState.id);
       return {
-        tree: app.contentTree.getComputedVisibleTree(id),
+        tree: app.contentTree.getComputedVisibleTree(props.windowState.id),
         open,
       };
     },

package/src/contentTree/contentTreeCollection.js

@@ -1,19 +1,23 @@
 // eslint-disable-next-line max-classes-per-file
-import { IndexedCollection, makeOverrideCollection, getObjectFromClassRegistry } from '@vcmap/core';
-import { v4 as uuid } from 'uuid';
-import { computed, ref } from '@vue/composition-api';
+import {
+  IndexedCollection,
+  makeOverrideCollection,
+  getObjectFromClassRegistry,
+} from '@vcmap/core';
+import { computed, ref } from 'vue';
 import ContentTreeItem from './contentTreeItem.js';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import SubContentTreeItem, { subTreeSymbol } from './subContentTreeItem.js';
 import LayerTree from './LayerTree.vue';
 import { WindowSlot } from '../manager/window/windowManager.js';
 import { createToggleAction } from '../actions/actionHelper.js';
-import { ButtonLocation } from '../manager/buttonManager.js';
+import { ButtonLocation } from '../manager/navbarManager.js';
 
 /**
  * @type {symbol}
  */
 const subTreeOpenStateSymbol = Symbol('SubTreeOpenState');
+const subTreeItemWeight = Symbol('SubTreeItemWeight');
 
 /**
  * @typedef {Object} ParentTreeViewItem
@@ -36,9 +40,9 @@ class ContentTreeCollection extends IndexedCollection {
      */
     this._app = app;
 
-    const recreateTree = () => {
+    const recreateTree = (resetSubTreeButtons) => {
       if (!this._suspendListeners) {
-        this._setTreeView();
+        this._setTreeView(resetSubTreeButtons);
       }
     };
 
@@ -56,7 +60,10 @@ class ContentTreeCollection extends IndexedCollection {
     this._listeners = [
       this.added.addEventListener((child) => {
         recreateTree();
-        this._weightListeners.set(child.name, child.weightChanged.addEventListener(recreateTree));
+        this._weightListeners.set(
+          child.name,
+          child.weightChanged.addEventListener(recreateTree),
+        );
       }),
       this.removed.addEventListener((child) => {
         recreateTree();
@@ -64,25 +71,34 @@ 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(true)),
     ];
     /**
      * This is the default content tree.
      * @type {SubContentTreeItem}
      * @private
      */
-    this._defaultSubtreeItem = new SubContentTreeItem({ name: 'Content', icon: '$vcsLayers' }, app);
+    this._defaultSubtreeItem = new SubContentTreeItem(
+      { name: 'Content', icon: '$vcsLayers', title: 'content.title' },
+      app,
+    );
     /**
-     * @type {import("@vue/composition-api").Ref<Map<string, TreeViewItem>>}
+     * @type {import("vue").Ref<Map<string, TreeViewItem>>}
      * @private
      */
     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
@@ -95,7 +111,9 @@ class ContentTreeCollection extends IndexedCollection {
    */
   _clearSubTrees() {
     this._subTreeViewItems.value.clear();
-    this._subTreeListeners.forEach((cb) => { cb(); });
+    [...this._subTreeListeners.values()].forEach((cb) => {
+      cb();
+    });
   }
 
   /**
@@ -104,15 +122,16 @@ class ContentTreeCollection extends IndexedCollection {
    * @returns {function():void}
    * @private
    */
-  _createSubtreeActionButton(subTreeViewItem, slot = WindowSlot.STATIC) { // TODO make configurable?
-    const id = uuid();
+  _createSubtreeActionButton(subTreeViewItem, slot = WindowSlot.STATIC) {
+    // TODO make configurable?
+    const id = subTreeViewItem.name;
     const app = this._app;
     const { action, destroy } = createToggleAction(
       // TODO icon & title are not reactive
       {
-        name: subTreeViewItem.name,
+        name: subTreeViewItem.title ?? subTreeViewItem.name,
         icon: subTreeViewItem.icon,
-        title: subTreeViewItem.title,
+        title: subTreeViewItem.tooltip,
       },
       {
         component: LayerTree,
@@ -121,13 +140,20 @@ class ContentTreeCollection extends IndexedCollection {
         state: {
           headerIcon: subTreeViewItem.icon,
           headerTitle: subTreeViewItem.title,
+          infoUrlCallback: app.getHelpUrlCallback(
+            '/components/contentspace.html#id_content',
+          ),
         },
       },
       app.windowManager,
       vcsAppSymbol,
     );
 
-    this._app.navbarManager.add({ id, action, location: ButtonLocation.CONTENT }, vcsAppSymbol);
+    this._app.navbarManager.add(
+      { id, action, weight: subTreeViewItem[subTreeItemWeight] },
+      vcsAppSymbol,
+      ButtonLocation.CONTENT,
+    );
     this._subTreeViewItems.value.set(id, subTreeViewItem);
     return () => {
       app.windowManager.remove(id);
@@ -137,12 +163,13 @@ class ContentTreeCollection extends IndexedCollection {
   }
 
   /**
+   * @param {boolean} [resetSubtreeButtons=false]
    * @private
    */
-  _setTreeView() {
-    this._clearSubTrees();
+  _setTreeView(resetSubtreeButtons = false) {
     /** @type {Map<string, ParentTreeViewItem>} */
     const baseTreeMap = new Map();
+    let maxWeight = 0;
     [...this._array]
       .sort((a, b) => {
         const depthA = a.name.split('.').length;
@@ -159,6 +186,10 @@ class ContentTreeCollection extends IndexedCollection {
         const treeViewItem = item.getTreeViewItem();
         const namespace = treeViewItem.name.split('.');
         const name = namespace.pop();
+        maxWeight = item.weight > maxWeight ? item.weight : maxWeight;
+        if (namespace.length === 0) {
+          treeViewItem[subTreeItemWeight] = item.weight;
+        }
         /** @type {ParentTreeViewItem} */
         let parentItem = { children: baseTreeMap };
         namespace.forEach((parentName) => {
@@ -177,37 +208,68 @@ class ContentTreeCollection extends IndexedCollection {
       const childMaps = [...children.values()];
       childMaps.forEach(setChildren);
       treeViewItem.children.splice(0);
-      treeViewItem.children.push(...childMaps.map(c => c.treeViewItem));
+      treeViewItem.children.push(...childMaps.map((c) => c.treeViewItem));
       return treeViewItem;
     };
 
-    const topLevelItems = [...baseTreeMap.values()]
-      .map(setChildren);
+    const topLevelItems = [...baseTreeMap.values()].map(setChildren);
     const defaultSubTreeViewItem = this._defaultSubtreeItem.getTreeViewItem();
     defaultSubTreeViewItem.children.splice(0);
-    defaultSubTreeViewItem.children.push(...topLevelItems.filter(i => !i[subTreeSymbol]));
+    defaultSubTreeViewItem[subTreeItemWeight] = maxWeight + 1;
+    defaultSubTreeViewItem.children.push(
+      ...topLevelItems.filter((i) => !i[subTreeSymbol]),
+    );
     const subTrees = [
       defaultSubTreeViewItem,
-      ...topLevelItems.filter(i => i[subTreeSymbol]),
+      ...topLevelItems.filter((i) => i[subTreeSymbol]),
     ];
 
-    this._subTreeListeners = subTrees.map(subTree => this._createSubtreeActionButton(subTree));
+    subTrees.forEach((subTree) => {
+      if (!this._app.navbarManager.has(subTree.name) || resetSubtreeButtons) {
+        this._subTreeListeners.get(subTree.name)?.();
+        this._subTreeListeners.set(
+          subTree.name,
+          this._createSubtreeActionButton(subTree),
+        );
+      } else {
+        const buttonComponent = this._app.navbarManager.get(subTree.name);
+        if (buttonComponent.weight !== subTree[subTreeItemWeight]) {
+          buttonComponent.weight = subTree[subTreeItemWeight];
+        }
+      }
+    });
+  }
+
+  /**
+   * Returns all managed subtrees. Entries are not persisted and will change, if the trees get recalculated.
+   * @type {import("vue").Ref<Map<string, TreeViewItem>>}
+   * @readonly
+   */
+  get subTreeViewItems() {
+    return this._subTreeViewItems;
   }
 
   /**
-   * 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
    */
   get subTreeIds() {
-    return [...this._subTreeViewItems.value.keys()];
+    const [defaultItem, ...rest] = [...this._subTreeViewItems.value.entries()];
+    rest.sort(([, a], [, b]) => {
+      if (a[subTreeItemWeight] === b[subTreeItemWeight]) {
+        return 0;
+      }
+      return a[subTreeItemWeight] > b[subTreeItemWeight] ? -1 : 1;
+    });
+    return [defaultItem, ...rest].map(([id]) => id);
   }
 
   /**
    * @param {string} id
-   * @returns {import("@vue/composition-api").ComputedRef<Array<TreeViewItem>>}
+   * @returns {import("vue").ComputedRef<Array<TreeViewItem>>}
    */
   getComputedVisibleTree(id) {
     return computed(() => {
@@ -238,26 +300,30 @@ class ContentTreeCollection extends IndexedCollection {
     if (subTree) {
       if (subTree === this._subTreeViewItems.value.values().next().value) {
         const subTreeNames = [...this._subTreeViewItems.value.values()]
-          .filter(s => s !== subTree)
-          .map(s => s.name);
-        return this._array.filter(i => !subTreeNames.some(name => i.name.startsWith(name)));
+          .filter((s) => s !== subTree)
+          .map((s) => s.name);
+        return this._array.filter(
+          (i) => !subTreeNames.some((name) => i.name.startsWith(name)),
+        );
       }
-      return this._array.filter(i => i.name.startsWith(subTree.name));
+      return this._array.filter((i) => i.name.startsWith(subTree.name));
     }
     return [];
   }
 
   /**
    * @param {string} id
-   * @returns {import("@vue/composition-api").Ref<Array<string>>}
+   * @returns {import("vue").Ref<Array<string>>}
    */
   getTreeOpenStateRef(id) {
     const subTree = this._getSubTree(id);
     if (subTree) {
       if (!subTree[subTreeOpenStateSymbol]) {
-        subTree[subTreeOpenStateSymbol] = ref(this.getChildrenForSubTree(id)
-          .filter(i => i.initOpen)
-          .map(i => i.name));
+        subTree[subTreeOpenStateSymbol] = ref(
+          this.getChildrenForSubTree(id)
+            .filter((i) => i.initOpen)
+            .map((i) => i.name),
+        );
       }
       return subTree[subTreeOpenStateSymbol];
     }
@@ -267,8 +333,12 @@ class ContentTreeCollection extends IndexedCollection {
   destroy() {
     this._clearSubTrees();
     this._defaultSubtreeItem.destroy();
-    this._listeners.forEach((cb) => { cb(); });
-    this._weightListeners.forEach((cb) => { cb(); });
+    this._listeners.forEach((cb) => {
+      cb();
+    });
+    this._weightListeners.forEach((cb) => {
+      cb();
+    });
     this._weightListeners.clear();
     super.destroy();
   }
@@ -293,13 +363,15 @@ export function createContentTreeCollection(app) {
 
   const overrideCollection = makeOverrideCollection(
     collection,
-    () => app.dynamicContextId,
+    () => app.dynamicModuleId,
     null,
-    config => getObjectFromClassRegistry(app.contentTreeClassRegistry, config, app),
+    (config) =>
+      getObjectFromClassRegistry(app.contentTreeClassRegistry, config, app),
     ContentTreeItem,
   );
 
-  const originalParseItems = overrideCollection.parseItems.bind(overrideCollection);
+  const originalParseItems =
+    overrideCollection.parseItems.bind(overrideCollection);
   overrideCollection.parseItems = async function parseItems(...args) {
     this._suspendListeners = true;
     await originalParseItems(...args);