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

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>}
@@ -122,6 +127,9 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
         },
         {
           component,
+          position: {
+            width: 200,
+          },
           props: reactive({
             availableStyles: availableStyles.slice(),
             layerName: this._layerName,
@@ -144,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,
@@ -174,7 +184,9 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
    * @private
    */
   _clearListeners() {
-    this._listeners.forEach((cb) => { cb(); });
+    this._listeners.forEach((cb) => {
+      cb();
+    });
     this._listeners.splice(0);
   }
 
@@ -195,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);
+        }),
+      );
     }
   }
 
@@ -220,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();
       }
@@ -246,4 +268,7 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
 }
 
 export default LayerContentTreeItem;
-contentTreeClassRegistry.registerClass(LayerContentTreeItem.className, LayerContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  LayerContentTreeItem.className,
+  LayerContentTreeItem,
+);

package/src/contentTree/layerGroupContentTreeItem.js

@@ -1,5 +1,10 @@
-import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js';
-import { getStateFromLayer, setViewpointAction } from './layerContentTreeItem.js';
+import ContentTreeItem, {
+  contentTreeClassRegistry,
+} from './contentTreeItem.js';
+import {
+  getStateFromLayer,
+  setViewpointAction,
+} from './layerContentTreeItem.js';
 import { StateActionState } from '../actions/stateRefAction.js';
 
 /**
@@ -14,16 +19,16 @@ import { StateActionState } from '../actions/stateRefAction.js';
  * @returns {StateActionState}
  */
 function getStateFromLayers(layers) {
-  const states = layers.map(l => getStateFromLayer(l));
-  if (states.some(s => s === StateActionState.LOADING)) {
+  const states = layers.map((l) => getStateFromLayer(l));
+  if (states.some((s) => s === StateActionState.LOADING)) {
     return StateActionState.LOADING;
   }
 
-  if (states.every(s => s === StateActionState.INACTIVE)) {
+  if (states.every((s) => s === StateActionState.INACTIVE)) {
     return StateActionState.INACTIVE;
   }
 
-  if (states.every(s => s === StateActionState.ACTIVE)) {
+  if (states.every((s) => s === StateActionState.ACTIVE)) {
     return StateActionState.ACTIVE;
   }
   return StateActionState.INDETERMINATE;
@@ -39,7 +44,9 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
    * @readonly
    * @type {string}
    */
-  static get className() { return 'LayerGroupContentTreeItem'; }
+  static get className() {
+    return 'LayerGroupContentTreeItem';
+  }
 
   /**
    * @param {LayerGroupContentTreeItemOptions} options
@@ -52,17 +59,17 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
      * @type {Array<string>}
      * @private
      */
-    this._layerNames = Array.isArray(options.layerNames) ?
-      options.layerNames.slice() :
-      [];
+    this._layerNames = Array.isArray(options.layerNames)
+      ? options.layerNames.slice()
+      : [];
 
     /**
      * @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():void>}
@@ -85,15 +92,17 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
    */
   get _layers() {
     return this._layerNames
-      .map(n => this._app.layers.getByKey(n))
-      .filter(l => l);
+      .map((n) => this._app.layers.getByKey(n))
+      .filter((l) => l);
   }
 
   /**
    * @private
    */
   _clearListeners() {
-    this._listeners.forEach((cb) => { cb(); });
+    this._listeners.forEach((cb) => {
+      cb();
+    });
     this._listeners.splice(0);
   }
 
@@ -113,22 +122,30 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
     };
     const layers = this._layers;
 
-    this.visible = layers.some(l => l.isSupported(this._app.maps.activeMap));
+    this.visible = layers.some((l) => l.isSupported(this._app.maps.activeMap));
     this.state = getStateFromLayers(layers);
     setViewpointAction(this, this._app, this._defaultViewpoint);
 
-    this._listeners.push(this._app.layers.removed.addEventListener(resetHandler));
+    this._listeners.push(
+      this._app.layers.removed.addEventListener(resetHandler),
+    );
     this._listeners.push(this._app.layers.added.addEventListener(resetHandler));
 
     layers.forEach((layer) => {
-      this._listeners.push(layer.stateChanged.addEventListener(() => {
-        this.state = getStateFromLayers(layers);
-      }));
+      this._listeners.push(
+        layer.stateChanged.addEventListener(() => {
+          this.state = getStateFromLayers(layers);
+        }),
+      );
     });
 
-    this._listeners.push(this._app.maps.mapActivated.addEventListener(() => {
-      this.visible = !!layers.find(l => l.isSupported(this._app.maps.activeMap));
-    }));
+    this._listeners.push(
+      this._app.maps.mapActivated.addEventListener(() => {
+        this.visible = !!layers.find((l) =>
+          l.isSupported(this._app.maps.activeMap),
+        );
+      }),
+    );
   }
 
   /**
@@ -136,15 +153,17 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
    */
   async clicked() {
     const layers = this._layers;
-    const activate = layers.some(l => !(l.active || l.loading));
+    const activate = layers.some((l) => !(l.active || l.loading));
     if (activate) {
-      await Promise.all(layers.map(l => l.activate()));
+      await Promise.all(layers.map((l) => l.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 {
-      layers.forEach((l) => { l.deactivate(); });
+      layers.forEach((l) => {
+        l.deactivate();
+      });
     }
   }
 
@@ -171,4 +190,7 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
 }
 
 export default LayerGroupContentTreeItem;
-contentTreeClassRegistry.registerClass(LayerGroupContentTreeItem.className, LayerGroupContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  LayerGroupContentTreeItem.className,
+  LayerGroupContentTreeItem,
+);

package/src/contentTree/nodeContentTreeItem.js

@@ -1,5 +1,7 @@
 import { watch } from 'vue';
-import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js';
+import ContentTreeItem, {
+  contentTreeClassRegistry,
+} from './contentTreeItem.js';
 
 /**
  * A group item which has _no click handler_
@@ -10,7 +12,9 @@ class NodeContentTreeItem extends ContentTreeItem {
   /**
    * @returns {string}
    */
-  static get className() { return 'NodeContentTreeItem'; }
+  static get className() {
+    return 'NodeContentTreeItem';
+  }
 
   /**
    * @param {ContentTreeItemOptions} options
@@ -21,10 +25,14 @@ class NodeContentTreeItem extends ContentTreeItem {
 
     this.clickable = false;
 
-    this._childWatcher = watch(this._children, () => {
-      const children = this._children.value;
-      this.visible = children.some(c => c.visible);
-    }, { deep: true });
+    this._childWatcher = watch(
+      this._children,
+      () => {
+        const children = this._children.value;
+        this.visible = children.some((c) => c.visible);
+      },
+      { deep: true },
+    );
   }
 
   destroy() {
@@ -34,4 +42,7 @@ class NodeContentTreeItem extends ContentTreeItem {
 }
 
 export default NodeContentTreeItem;
-contentTreeClassRegistry.registerClass(NodeContentTreeItem.className, NodeContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  NodeContentTreeItem.className,
+  NodeContentTreeItem,
+);

package/src/contentTree/obliqueCollectionContentTreeItem.js

@@ -27,7 +27,9 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
   /**
    * @type {string}
    */
-  static get className() { return 'ObliqueCollectionContentTreeItem'; }
+  static get className() {
+    return 'ObliqueCollectionContentTreeItem';
+  }
 
   /**
    * @param {ObliqueCollectionContentTreeItemOptions} options
@@ -73,7 +75,9 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
    * @private
    */
   _clearListeners() {
-    this._listeners.forEach((cb) => { cb(); });
+    this._listeners.forEach((cb) => {
+      cb();
+    });
     this._listeners.splice(0);
   }
 
@@ -95,36 +99,54 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
 
     if (!this._collection) {
       this.visible = false;
-      this._listeners.push(this._app.obliqueCollections.added.addEventListener(resetCallback));
+      this._listeners.push(
+        this._app.obliqueCollections.added.addEventListener(resetCallback),
+      );
     } else {
       const map = this._app.maps.activeMap;
       if (map instanceof ObliqueMap) {
         this.visible = true;
-        this.state = map.collection === this._collection ?
-          StateActionState.ACTIVE :
-          StateActionState.INACTIVE;
-        this._listeners.push(map.collectionChanged.addEventListener(() => {
-          this.state = map.collection === this._collection ?
-            StateActionState.ACTIVE :
-            StateActionState.INACTIVE;
-        }));
+        this.state =
+          map.collection === this._collection
+            ? StateActionState.ACTIVE
+            : StateActionState.INACTIVE;
+        this._listeners.push(
+          map.collectionChanged.addEventListener(() => {
+            this.state =
+              map.collection === this._collection
+                ? StateActionState.ACTIVE
+                : StateActionState.INACTIVE;
+          }),
+        );
       } else {
         this.visible = false;
       }
 
       this.setPropertiesFromObject(this._collection);
-      this._listeners.push(this._app.maps.mapActivated.addEventListener(() => {
-        this._setup();
-      }));
-
-      this._listeners.push(this._app.obliqueCollections.removed.addEventListener(resetCallback));
-      this._listeners.push(this._app.obliqueCollections.added.addEventListener(resetCallback));
+      this._listeners.push(
+        this._app.maps.mapActivated.addEventListener(() => {
+          this._setup();
+        }),
+      );
+
+      this._listeners.push(
+        this._app.obliqueCollections.removed.addEventListener(resetCallback),
+      );
+      this._listeners.push(
+        this._app.obliqueCollections.added.addEventListener(resetCallback),
+      );
     }
   }
 
   async clicked() {
-    if (this.visible && this._collection && this._app.maps.activeMap instanceof ObliqueMap) {
-      const map = /** @type {import("@vcmap/core").Oblique} */ (this._app.maps.activeMap);
+    if (
+      this.visible &&
+      this._collection &&
+      this._app.maps.activeMap instanceof ObliqueMap
+    ) {
+      const map = /** @type {import("@vcmap/core").Oblique} */ (
+        this._app.maps.activeMap
+      );
       const vp = await map.getViewpoint();
       if (this.state === StateActionState.INACTIVE) {
         this.state = StateActionState.LOADING;
@@ -152,4 +174,7 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
 }
 
 export default ObliqueCollectionContentTreeItem;
-contentTreeClassRegistry.registerClass(ObliqueCollectionContentTreeItem.className, ObliqueCollectionContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  ObliqueCollectionContentTreeItem.className,
+  ObliqueCollectionContentTreeItem,
+);