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

package/src/components/tables/VcsTable.vue

@@ -8,9 +8,8 @@
     <!-- eslint-disable-next-line -->
     <template #item.key="{ item }">
       <td
-        :title="$t(item.key)"
         class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
-        :style="{'max-width': headers[0].width }"
+        :style="{ 'max-width': headers[0].width }"
       >
         {{ $t(item.key) }}
       </td>
@@ -18,11 +17,15 @@
     <!-- eslint-disable-next-line -->
     <template #item.value="{ item }">
       <td
-        :title="$t(item.value)"
         class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
-        :style="{'max-width': headers[1].width }"
+        :style="{ 'max-width': headers[1].width }"
       >
-        <span :class="{ 'single-line': !/\s/.test(item.value), 'multi-line': /\s/.test(item.value), }">
+        <span
+          :class="{
+            'single-line': !/\s/.test(item.value),
+            'multi-line': /\s/.test(item.value),
+          }"
+        >
           {{ $t(item.value) }}
         </span>
       </td>
@@ -45,14 +48,20 @@
    * @param {string} [parent]
    * @returns {Array<TableItem>}
    */
-  export function attributesToItems(attributes, items = [], parent = undefined) {
+  export function attributesToItems(
+    attributes,
+    items = [],
+    parent = undefined,
+  ) {
     const nestedKey = (key, nested) => (nested ? `${nested}.${key}` : key);
     Object.entries(attributes).forEach(([key, value]) => {
       if (value instanceof Object) {
         attributesToItems(value, items, nestedKey(key, parent));
       } else {
         const item = { key: nestedKey(key, parent), value };
-        if (parent) { item.group = parent; }
+        if (parent) {
+          item.group = parent;
+        }
         items.push(item);
       }
     });
@@ -107,31 +116,30 @@
 </script>
 
 <style lang="scss" scoped>
+  .single-line {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .multi-line {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+    height: auto;
+    max-height: 96px;
+  }
 
-.single-line {
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.multi-line {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  overflow: hidden;
-  height: auto;
-  max-height: 96px;
-}
-
-.noBorder {
-  border-bottom: none !important;
-}
+  .noBorder {
+    border-bottom: none !important;
+  }
 
-::v-deep {
-  .v-data-table__mobile-row__cell {
-    td.vcs-table.overflow-max-width {
-      max-width: 260px;
+  ::v-deep {
+    .v-data-table__mobile-row__cell {
+      td.vcs-table.overflow-max-width {
+        max-width: 260px;
+      }
     }
   }
-}
 </style>

package/src/contentTree/LayerTree.vue

@@ -1,16 +1,22 @@
 <template>
-  <VcsTreeview
-    v-if="tree && tree.length"
-    :items="tree"
-    :open.sync="open"
-    :show-searchbar="true"
-    :searchbar-placeholder="'content.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';
+  import { VSheet } from 'vuetify/lib';
   import VcsTreeview from '../components/lists/VcsTreeview.vue';
 
   /**
@@ -19,7 +25,7 @@
    */
   export default {
     name: 'VcsLayerTree',
-    components: { VcsTreeview },
+    components: { VcsTreeview, VSheet },
     props: {
       windowState: {
         type: Object,
@@ -28,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,5 +1,9 @@
 // eslint-disable-next-line max-classes-per-file
-import { IndexedCollection, makeOverrideCollection, getObjectFromClassRegistry } from '@vcmap/core';
+import {
+  IndexedCollection,
+  makeOverrideCollection,
+  getObjectFromClassRegistry,
+} from '@vcmap/core';
 import { v4 as uuid } from 'uuid';
 import { computed, ref } from 'vue';
 import ContentTreeItem from './contentTreeItem.js';
@@ -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();
@@ -71,7 +78,10 @@ class ContentTreeCollection extends IndexedCollection {
      * @type {SubContentTreeItem}
      * @private
      */
-    this._defaultSubtreeItem = new SubContentTreeItem({ name: 'Content', icon: '$vcsLayers', title: 'content.title' }, app);
+    this._defaultSubtreeItem = new SubContentTreeItem(
+      { name: 'Content', icon: '$vcsLayers', title: 'content.title' },
+      app,
+    );
     /**
      * @type {import("vue").Ref<Map<string, TreeViewItem>>}
      * @private
@@ -95,7 +105,9 @@ class ContentTreeCollection extends IndexedCollection {
    */
   _clearSubTrees() {
     this._subTreeViewItems.value.clear();
-    this._subTreeListeners.forEach((cb) => { cb(); });
+    this._subTreeListeners.forEach((cb) => {
+      cb();
+    });
   }
 
   /**
@@ -104,7 +116,8 @@ class ContentTreeCollection extends IndexedCollection {
    * @returns {function():void}
    * @private
    */
-  _createSubtreeActionButton(subTreeViewItem, slot = WindowSlot.STATIC) { // TODO make configurable?
+  _createSubtreeActionButton(subTreeViewItem, slot = WindowSlot.STATIC) {
+    // TODO make configurable?
     const id = uuid();
     const app = this._app;
     const { action, destroy } = createToggleAction(
@@ -128,7 +141,7 @@ class ContentTreeCollection extends IndexedCollection {
     );
 
     this._app.navbarManager.add(
-      { id, action },
+      { id, action, weight: 100 },
       vcsAppSymbol,
       ButtonLocation.CONTENT,
     );
@@ -181,21 +194,24 @@ 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.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));
+    this._subTreeListeners = subTrees.map((subTree) =>
+      this._createSubtreeActionButton(subTree),
+    );
   }
 
   /**
@@ -251,11 +267,13 @@ 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 [];
   }
@@ -268,9 +286,11 @@ class ContentTreeCollection extends IndexedCollection {
     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];
     }
@@ -280,8 +300,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();
   }
@@ -308,11 +332,13 @@ export function createContentTreeCollection(app) {
     collection,
     () => 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);

package/src/contentTree/contentTreeItem.js

@@ -3,7 +3,11 @@ import { check, checkMaybe } from '@vcsuite/check';
 import { parseBoolean, parseNumber } from '@vcsuite/parsers';
 import { ClassRegistry, VcsEvent } from '@vcmap/core';
 import { createLinkAction } from '../actions/actionHelper.js';
-import { createStateRefAction, StateActionState } from '../actions/stateRefAction.js';
+import {
+  createStateRefAction,
+  StateActionState,
+} from '../actions/stateRefAction.js';
+import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
  * @typedef {Object} ContentTreeItemOptions
@@ -14,6 +18,9 @@ import { createStateRefAction, StateActionState } from '../actions/stateRefActio
  * @property {number} [weight] - optional weighting of the item. higher weights come first.
  * @property {string} [infoUrl] - optional info url providing link with additional information.
  * @property {boolean} [initOpen=false] - groups being initially open or not.
+ * @property {VcsCallbackOptions} [onClick] - optional callback actions executed on click
+ * @property {VcsCallbackOptions} [onActivate] - optional callback actions executed on activation of the item
+ * @property {VcsCallbackOptions} [onDeactivate] - optional callback actions executed on deactivation of the item
  */
 
 /**
@@ -51,7 +58,9 @@ class ContentTreeItem {
   /**
    * @type {string}
    */
-  static get className() { return 'ContentTreeItem'; }
+  static get className() {
+    return 'ContentTreeItem';
+  }
 
   /**
    * @param {ContentTreeItemOptions} options
@@ -152,7 +161,21 @@ class ContentTreeItem {
      * @type {boolean}
      */
     this.initOpen = parseBoolean(options.initOpen, false);
-
+    /**
+     * @type {Array<VcsCallbackOptions>}
+     * @protected
+     */
+    this._onClick = options.onClick ?? [];
+    /**
+     * @type {Array<VcsCallbackOptions>}
+     * @protected
+     */
+    this._onActivate = options.onActivate ?? [];
+    /**
+     * @type {Array<VcsCallbackOptions>}
+     * @protected
+     */
+    this._onDeactivate = options.onDeactivate ?? [];
     /**
      * @type {VcsEvent<number>}
      */
@@ -248,7 +271,9 @@ class ContentTreeItem {
   /**
    * @type {string|null}
    */
-  get infoUrl() { return this._infoUrl; }
+  get infoUrl() {
+    return this._infoUrl;
+  }
 
   /**
    * @param {string} url
@@ -260,11 +285,14 @@ class ContentTreeItem {
       this._infoUrl = url;
       const name = 'infoUrl';
       if (this._infoUrl) {
-        const action = createLinkAction({
-          name,
-          title: 'content.infoAction.title',
-          icon: '$vcsInfo',
-        }, this._infoUrl);
+        const action = createLinkAction(
+          {
+            name,
+            title: 'content.infoAction.title',
+            icon: '$vcsInfo',
+          },
+          this._infoUrl,
+        );
         this.addAction(action, 6);
       } else {
         this.removeAction(name);
@@ -323,7 +351,9 @@ class ContentTreeItem {
   /**
    * @type {number}
    */
-  get weight() { return this._weight; }
+  get weight() {
+    return this._weight;
+  }
 
   /**
    * @param {number} weight
@@ -352,7 +382,10 @@ class ContentTreeItem {
         this.removeAction(name);
         destroy();
       };
-    } else if (this._stateActionListener && this.state === StateActionState.NONE) {
+    } else if (
+      this._stateActionListener &&
+      this.state === StateActionState.NONE
+    ) {
       this._stateActionListener();
       this._stateActionListener = null;
     }
@@ -364,7 +397,7 @@ class ContentTreeItem {
    * @private
    */
   _getActionIndex(actionName) {
-    return this._actions.value.findIndex(a => a.name === actionName);
+    return this._actions.value.findIndex((a) => a.name === actionName);
   }
 
   /**
@@ -387,7 +420,9 @@ class ContentTreeItem {
       throw new Error('Action names must be unique');
     }
     action[actionWeightSymbol] = weight;
-    const insertIndex = this._actions.value.findIndex(a => a[actionWeightSymbol] > weight);
+    const insertIndex = this._actions.value.findIndex(
+      (a) => a[actionWeightSymbol] > weight,
+    );
     if (insertIndex > -1) {
       this._actions.value.splice(insertIndex, 0, action);
     } else {
@@ -409,8 +444,9 @@ class ContentTreeItem {
    * A callback called once the item is clicked.
    * @returns {Promise<void>}
    */
-  // eslint-disable-next-line class-methods-use-this,no-empty-function
-  async clicked() {}
+  async clicked() {
+    executeCallbacks(this._app, this._onClick);
+  }
 
   /**
    * Returns a readonly TreeViewItem used for rendering the current item.
@@ -429,7 +465,9 @@ class ContentTreeItem {
       icon: this._icon,
       actions: this._actions,
       children: this._children,
-      visibleChildren: computed(() => this._children.value.filter(c => c.visible)),
+      visibleChildren: computed(() =>
+        this._children.value.filter((c) => c.visible),
+      ),
       clicked,
     });
   }
@@ -478,5 +516,8 @@ class ContentTreeItem {
   }
 }
 
-contentTreeClassRegistry.registerClass(ContentTreeItem.className, ContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  ContentTreeItem.className,
+  ContentTreeItem,
+);
 export default ContentTreeItem;

package/src/contentTree/groupContentTreeItem.js

@@ -1,5 +1,7 @@
 import { watch } from 'vue';
-import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js';
+import ContentTreeItem, {
+  contentTreeClassRegistry,
+} from './contentTreeItem.js';
 import { StateActionState } from '../actions/stateRefAction.js';
 
 /**
@@ -11,7 +13,9 @@ class GroupContentTreeItem extends ContentTreeItem {
   /**
    * @returns {string}
    */
-  static get className() { return 'GroupContentTreeItem'; }
+  static get className() {
+    return 'GroupContentTreeItem';
+  }
 
   /**
    * @param {ContentTreeItemOptions} options
@@ -24,36 +28,52 @@ class GroupContentTreeItem extends ContentTreeItem {
      * @type {function():void}
      * @private
      */
-    this._childWatcher = watch(this._children, () => {
-      const children = this._children.value;
-      this.visible = children.some(c => c.visible);
-      if (children.every(c => c.state === StateActionState.NONE)) {
-        this.state = StateActionState.NONE;
-      } else {
-        const childrenWithState = children.filter(c => c.state !== StateActionState.NONE);
-        if (childrenWithState.every(c => c.state === StateActionState.ACTIVE)) {
-          this.state = StateActionState.ACTIVE;
-        } else if (childrenWithState.every(c => c.state === StateActionState.INACTIVE)) {
-          this.state = StateActionState.INACTIVE;
+    this._childWatcher = watch(
+      this._children,
+      () => {
+        const children = this._children.value;
+        this.visible = children.some((c) => c.visible);
+        if (children.every((c) => c.state === StateActionState.NONE)) {
+          this.state = StateActionState.NONE;
         } else {
-          this.state = StateActionState.INDETERMINATE;
+          const childrenWithState = children.filter(
+            (c) => c.state !== StateActionState.NONE,
+          );
+          if (
+            childrenWithState.every((c) => c.state === StateActionState.ACTIVE)
+          ) {
+            this.state = StateActionState.ACTIVE;
+          } else if (
+            childrenWithState.every(
+              (c) => c.state === StateActionState.INACTIVE,
+            )
+          ) {
+            this.state = StateActionState.INACTIVE;
+          } else {
+            this.state = StateActionState.INDETERMINATE;
+          }
         }
-      }
-    }, { deep: true });
+      },
+      { deep: true },
+    );
   }
 
   async clicked() {
+    await super.clicked();
     if (this.state === StateActionState.NONE) {
       return;
     }
 
-    const statePredicate = this.state === StateActionState.ACTIVE ?
-      state => state !== StateActionState.NONE :
-      state => state !== StateActionState.NONE && state !== StateActionState.ACTIVE;
+    const statePredicate =
+      this.state === StateActionState.ACTIVE
+        ? (state) => state !== StateActionState.NONE
+        : (state) =>
+            state !== StateActionState.NONE &&
+            state !== StateActionState.ACTIVE;
 
     const promises = this._children.value
-      .filter(c => c.visible && statePredicate(c.state))
-      .map(c => c.clicked());
+      .filter((c) => c.visible && statePredicate(c.state))
+      .map((c) => c.clicked());
     await Promise.all(promises);
   }
 
@@ -64,4 +84,7 @@ class GroupContentTreeItem extends ContentTreeItem {
 }
 
 export default GroupContentTreeItem;
-contentTreeClassRegistry.registerClass(GroupContentTreeItem.className, GroupContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  GroupContentTreeItem.className,
+  GroupContentTreeItem,
+);