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

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

@@ -28,10 +28,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(
@@ -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,10 @@ 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';
 
 /**
  * @typedef {Object} ContentTreeItemOptions
@@ -51,7 +54,9 @@ class ContentTreeItem {
   /**
    * @type {string}
    */
-  static get className() { return 'ContentTreeItem'; }
+  static get className() {
+    return 'ContentTreeItem';
+  }
 
   /**
    * @param {ContentTreeItemOptions} options
@@ -248,7 +253,9 @@ class ContentTreeItem {
   /**
    * @type {string|null}
    */
-  get infoUrl() { return this._infoUrl; }
+  get infoUrl() {
+    return this._infoUrl;
+  }
 
   /**
    * @param {string} url
@@ -260,11 +267,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 +333,9 @@ class ContentTreeItem {
   /**
    * @type {number}
    */
-  get weight() { return this._weight; }
+  get weight() {
+    return this._weight;
+  }
 
   /**
    * @param {number} weight
@@ -352,7 +364,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 +379,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 +402,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 {
@@ -429,7 +446,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 +497,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,22 +28,34 @@ 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() {
@@ -47,13 +63,16 @@ class GroupContentTreeItem extends ContentTreeItem {
       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 +83,7 @@ class GroupContentTreeItem extends ContentTreeItem {
 }
 
 export default GroupContentTreeItem;
-contentTreeClassRegistry.registerClass(GroupContentTreeItem.className, GroupContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  GroupContentTreeItem.className,
+  GroupContentTreeItem,
+);

package/src/contentTree/layerContentTreeItem.js

@@ -1,7 +1,10 @@
 import { Viewpoint } from '@vcmap/core';
 import { reactive } from 'vue';
 import { StateActionState } from '../actions/stateRefAction.js';
-import { createGoToViewpointAction, createModalAction } from '../actions/actionHelper.js';
+import {
+  createGoToViewpointAction,
+  createModalAction,
+} from '../actions/actionHelper.js';
 import component from '../actions/styleSelector.vue';
 import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';
 import { vcsAppSymbol } from '../pluginHelper.js';
@@ -65,7 +68,9 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
    * @todo this has to be refactored, just so we can read the config as is
    * @returns {string}
    */
-  static get className() { return 'LayerContentTreeItem'; }
+  static get className() {
+    return 'LayerContentTreeItem';
+  }
 
   /**
    * @param {LayerContentTreeItemOptions} options
@@ -85,9 +90,9 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
      * @type {Array<string>}
      * @private
      */
-    this._layerNamesToDeactivate = Array.isArray(options.layerNamesToDeactivate) ?
-      options.layerNamesToDeactivate.slice() :
-      [];
+    this._layerNamesToDeactivate = Array.isArray(options.layerNamesToDeactivate)
+      ? options.layerNamesToDeactivate.slice()
+      : [];
 
     /**
      * @type {Array<Function>}
@@ -147,7 +152,9 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
     if (this._layer) {
       const { extent } = this._layer.toJSON();
       if (extent) {
-        const viewpoint = Viewpoint.createViewpointFromExtent(this._layer.extent);
+        const viewpoint = Viewpoint.createViewpointFromExtent(
+          this._layer.extent,
+        );
         const action = createGoToViewpointAction(
           {
             name,
@@ -177,7 +184,9 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
    * @private
    */
   _clearListeners() {
-    this._listeners.forEach((cb) => { cb(); });
+    this._listeners.forEach((cb) => {
+      cb();
+    });
     this._listeners.splice(0);
   }
 
@@ -198,23 +207,33 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
 
     if (!this._layer) {
       this.visible = false;
-      this._listeners.push(this._app.layers.added.addEventListener(resetHandler));
+      this._listeners.push(
+        this._app.layers.added.addEventListener(resetHandler),
+      );
     } else {
       this.visible = this._layer.isSupported(this._app.maps.activeMap);
       this.state = getStateFromLayer(this._layer);
       this._setLayerExtentAction();
       this.setPropertiesFromObject(this._layer);
 
-      this._listeners.push(this._app.layers.removed.addEventListener(resetHandler));
-      this._listeners.push(this._app.layers.added.addEventListener(resetHandler));
+      this._listeners.push(
+        this._app.layers.removed.addEventListener(resetHandler),
+      );
+      this._listeners.push(
+        this._app.layers.added.addEventListener(resetHandler),
+      );
 
-      this._listeners.push(this._layer.stateChanged.addEventListener(() => {
-        this.state = getStateFromLayer(this._layer);
-      }));
+      this._listeners.push(
+        this._layer.stateChanged.addEventListener(() => {
+          this.state = getStateFromLayer(this._layer);
+        }),
+      );
 
-      this._listeners.push(this._app.maps.mapActivated.addEventListener(() => {
-        this.visible = this._layer.isSupported(this._app.maps.activeMap);
-      }));
+      this._listeners.push(
+        this._app.maps.mapActivated.addEventListener(() => {
+          this.visible = this._layer.isSupported(this._app.maps.activeMap);
+        }),
+      );
     }
   }
 
@@ -223,9 +242,9 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
       if (this.state === StateActionState.INACTIVE) {
         await this._layer.activate();
         this._layerNamesToDeactivate
-          .map(n => this._app.layers.getByKey(n))
-          .filter(l => l)
-          .forEach(l => l.deactivate());
+          .map((n) => this._app.layers.getByKey(n))
+          .filter((l) => l)
+          .forEach((l) => l.deactivate());
       } else {
         this._layer.deactivate();
       }
@@ -249,4 +268,7 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
 }
 
 export default LayerContentTreeItem;
-contentTreeClassRegistry.registerClass(LayerContentTreeItem.className, LayerContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  LayerContentTreeItem.className,
+  LayerContentTreeItem,
+);