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

package/src/contentTree/layerContentTreeItem.js

@@ -1,16 +1,19 @@
 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';
 import { contentTreeClassRegistry } from './contentTreeItem.js';
+import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
  * @typedef {ContentTreeItemOptions} LayerContentTreeItemOptions
  * @property {string} layerName
- * @property {Array<string>} layerNamesToDeactivate list of LayerNames which should be deactivated if the click activates the layer
  */
 
 /**
@@ -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
@@ -81,14 +86,6 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
      */
     this._layerName = options.layerName;
 
-    /**
-     * @type {Array<string>}
-     * @private
-     */
-    this._layerNamesToDeactivate = Array.isArray(options.layerNamesToDeactivate) ?
-      options.layerNamesToDeactivate.slice() :
-      [];
-
     /**
      * @type {Array<Function>}
      * @private
@@ -147,7 +144,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 +176,9 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
    * @private
    */
   _clearListeners() {
-    this._listeners.forEach((cb) => { cb(); });
+    this._listeners.forEach((cb) => {
+      cb();
+    });
     this._listeners.splice(0);
   }
 
@@ -198,36 +199,45 @@ 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);
+        }),
+      );
     }
   }
 
   async clicked() {
+    await super.clicked();
     if (this._layer) {
       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());
+        executeCallbacks(this._app, this._onActivate);
       } else {
         this._layer.deactivate();
+        executeCallbacks(this._app, this._onDeactivate);
       }
     }
   }
@@ -238,7 +248,6 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
   toJSON() {
     const config = super.toJSON();
     config.layerName = this._layerName;
-    config.layerNamesToDeactivate = this._layerNamesToDeactivate.slice();
     return config;
   }
 
@@ -249,4 +258,7 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
 }
 
 export default LayerContentTreeItem;
-contentTreeClassRegistry.registerClass(LayerContentTreeItem.className, LayerContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  LayerContentTreeItem.className,
+  LayerContentTreeItem,
+);

package/src/contentTree/layerGroupContentTreeItem.js

@@ -1,11 +1,16 @@
-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';
+import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
  * @typedef {ContentTreeItemOptions} LayerGroupContentTreeItemOptions
  * @property {Array<string>} layerNames list of LayerNames which should be activated on click
- * @property {Array<string>} layerNamesToDeactivate list of LayerNames which should be deactivated on click if the click activates the layer in layerNames
  * @property {string} [defaultViewpoint] - the name of an optional default viewpoint
  */
 
@@ -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,9 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
      * @type {Array<string>}
      * @private
      */
-    this._layerNames = Array.isArray(options.layerNames) ?
-      options.layerNames.slice() :
-      [];
-
-    /**
-     * @type {Array<string>}
-     * @private
-     */
-    this._layerNamesToDeactivate = Array.isArray(options.layerNamesToDeactivate) ?
-      options.layerNamesToDeactivate.slice() :
-      [];
+    this._layerNames = Array.isArray(options.layerNames)
+      ? options.layerNames.slice()
+      : [];
 
     /**
      * @type {Array<function():void>}
@@ -85,15 +84,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,38 +114,47 @@ 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),
+        );
+      }),
+    );
   }
 
   /**
    * @returns {Promise<void>}
    */
   async clicked() {
+    await super.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()));
-      this._layerNamesToDeactivate
-        .map(n => this._app.layers.getByKey(n))
-        .filter(l => l)
-        .forEach(l => l.deactivate());
+      await Promise.all(layers.map((l) => l.activate()));
+      executeCallbacks(this._app, this._onActivate);
     } else {
-      layers.forEach((l) => { l.deactivate(); });
+      layers.forEach((l) => {
+        l.deactivate();
+      });
+      executeCallbacks(this._app, this._onDeactivate);
     }
   }
 
@@ -154,7 +164,6 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
   toJSON() {
     const config = super.toJSON();
     config.layerNames = this._layerNames.slice();
-    config.layerNamesToDeactivate = this._layerNamesToDeactivate.slice();
     if (this._defaultViewpoint) {
       config.defaultViewpoint = this._defaultViewpoint;
     }
@@ -171,4 +180,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

@@ -3,6 +3,7 @@ import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';
 import { setViewpointAction } from './layerContentTreeItem.js';
 import { StateActionState } from '../actions/stateRefAction.js';
 import { contentTreeClassRegistry } from './contentTreeItem.js';
+import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
  * @typedef {ContentTreeItemOptions} ObliqueCollectionContentTreeItemOptions
@@ -27,7 +28,9 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
   /**
    * @type {string}
    */
-  static get className() { return 'ObliqueCollectionContentTreeItem'; }
+  static get className() {
+    return 'ObliqueCollectionContentTreeItem';
+  }
 
   /**
    * @param {ObliqueCollectionContentTreeItemOptions} options
@@ -73,7 +76,9 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
    * @private
    */
   _clearListeners() {
-    this._listeners.forEach((cb) => { cb(); });
+    this._listeners.forEach((cb) => {
+      cb();
+    });
     this._listeners.splice(0);
   }
 
@@ -95,43 +100,64 @@ 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);
+    await super.clicked();
+    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;
         await map.setCollection(this._collection, vp);
+        executeCallbacks(this._app, this._onActivate);
       } else if (this.state === StateActionState.ACTIVE) {
         this.state = StateActionState.INACTIVE;
         await map.setCollection(defaultCollection, vp);
+        executeCallbacks(this._app, this._onDeactivate);
       }
     }
   }
@@ -152,4 +178,7 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
 }
 
 export default ObliqueCollectionContentTreeItem;
-contentTreeClassRegistry.registerClass(ObliqueCollectionContentTreeItem.className, ObliqueCollectionContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  ObliqueCollectionContentTreeItem.className,
+  ObliqueCollectionContentTreeItem,
+);

package/src/contentTree/subContentTreeItem.js

@@ -1,4 +1,6 @@
-import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js';
+import ContentTreeItem, {
+  contentTreeClassRegistry,
+} from './contentTreeItem.js';
 
 /**
  * @type {symbol}
@@ -13,7 +15,9 @@ export const subTreeSymbol = Symbol('SubTree');
  * @extends {ContentTreeItem}
  */
 class SubContentTreeItem extends ContentTreeItem {
-  static get className() { return 'SubContentTreeItem'; }
+  static get className() {
+    return 'SubContentTreeItem';
+  }
 
   /**
    * @param {ContentTreeItemOptions} options
@@ -23,7 +27,9 @@ class SubContentTreeItem extends ContentTreeItem {
     super(options, app);
 
     if (!this.name || this.name.split('.').length > 1) {
-      throw new Error(`Sub trees may only be defined on top level. Tree ${this.name} is nested or undefined`);
+      throw new Error(
+        `Sub trees may only be defined on top level. Tree ${this.name} is nested or undefined`,
+      );
     }
     this.clickable = false;
   }
@@ -39,4 +45,7 @@ class SubContentTreeItem extends ContentTreeItem {
 }
 
 export default SubContentTreeItem;
-contentTreeClassRegistry.registerClass(SubContentTreeItem.className, SubContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  SubContentTreeItem.className,
+  SubContentTreeItem,
+);

package/src/contentTree/vcsObjectContentTreeItem.js

@@ -1,4 +1,6 @@
-import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js';
+import ContentTreeItem, {
+  contentTreeClassRegistry,
+} from './contentTreeItem.js';
 
 /**
  * @typedef {Object} VcsObjectContentTreeItemProperties
@@ -21,7 +23,9 @@ class VcsObjectContentTreeItem extends ContentTreeItem {
    * @type {string}
    * @readonly
    */
-  static get className() { return 'VcsObjectContentTreeItem'; }
+  static get className() {
+    return 'VcsObjectContentTreeItem';
+  }
 
   /**
    * @param {ContentTreeItemOptions} options
@@ -71,12 +75,11 @@ class VcsObjectContentTreeItem extends ContentTreeItem {
   setPropertiesFromObject(object) {
     this._currentObjectProperties = object.properties;
     const mergedProperties = { ...this._currentObjectProperties };
-    Object.entries(this._ownProperties)
-      .forEach(([key, value]) => {
-        if (value !== undefined) {
-          mergedProperties[key] = value;
-        }
-      });
+    Object.entries(this._ownProperties).forEach(([key, value]) => {
+      if (value !== undefined) {
+        mergedProperties[key] = value;
+      }
+    });
     this._setProperties(mergedProperties);
   }
 
@@ -85,16 +88,22 @@ class VcsObjectContentTreeItem extends ContentTreeItem {
    */
   toJSON() {
     const config = super.toJSON();
-    Object.entries(this._currentObjectProperties)
-      .forEach(([key, value]) => {
-        if (config[key] && config[key] === value && this._ownProperties[key] !== value) {
-          delete config[key];
-        }
-      });
+    Object.entries(this._currentObjectProperties).forEach(([key, value]) => {
+      if (
+        config[key] &&
+        config[key] === value &&
+        this._ownProperties[key] !== value
+      ) {
+        delete config[key];
+      }
+    });
 
     return config;
   }
 }
 
-contentTreeClassRegistry.registerClass(VcsObjectContentTreeItem.className, VcsObjectContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  VcsObjectContentTreeItem.className,
+  VcsObjectContentTreeItem,
+);
 export default VcsObjectContentTreeItem;

package/src/contentTree/viewpointContentTreeItem.js

@@ -12,7 +12,9 @@ import { contentTreeClassRegistry } from './contentTreeItem.js';
  * @class
  */
 class ViewpointContentTreeItem extends VcsObjectContentTreeItem {
-  static get className() { return 'ViewpointContentTreeItem'; }
+  static get className() {
+    return 'ViewpointContentTreeItem';
+  }
 
   /**
    * @param {ViewpointContentTreeItemOptions} options
@@ -48,7 +50,9 @@ class ViewpointContentTreeItem extends VcsObjectContentTreeItem {
    * @private
    */
   _clearListeners() {
-    this._listeners.forEach((cb) => { cb(); });
+    this._listeners.forEach((cb) => {
+      cb();
+    });
     this._listeners.splice(0);
   }
 
@@ -69,16 +73,23 @@ class ViewpointContentTreeItem extends VcsObjectContentTreeItem {
 
     if (!this.viewpoint) {
       this.visible = false;
-      this._listeners.push(this._app.viewpoints.added.addEventListener(resetCallback));
+      this._listeners.push(
+        this._app.viewpoints.added.addEventListener(resetCallback),
+      );
     } else {
       this.visible = true;
       this.setPropertiesFromObject(this.viewpoint);
-      this._listeners.push(this._app.viewpoints.added.addEventListener(resetCallback));
-      this._listeners.push(this._app.viewpoints.removed.addEventListener(resetCallback));
+      this._listeners.push(
+        this._app.viewpoints.added.addEventListener(resetCallback),
+      );
+      this._listeners.push(
+        this._app.viewpoints.removed.addEventListener(resetCallback),
+      );
     }
   }
 
   async clicked() {
+    await super.clicked();
     if (this._app.maps.activeMap && this.viewpoint) {
       await this._app.maps.activeMap.gotoViewpoint(this.viewpoint);
     }
@@ -104,4 +115,7 @@ class ViewpointContentTreeItem extends VcsObjectContentTreeItem {
 }
 
 export default ViewpointContentTreeItem;
-contentTreeClassRegistry.registerClass(ViewpointContentTreeItem.className, ViewpointContentTreeItem);
+contentTreeClassRegistry.registerClass(
+  ViewpointContentTreeItem.className,
+  ViewpointContentTreeItem,
+);

package/src/downloadHelper.js

@@ -33,7 +33,10 @@ export function downloadBlob(blob, fileName) {
  * @param {string} fileName
  */
 export function downloadText(text, fileName) {
-  downloadURI(`data:text/plain;charset=utf-8,${encodeURIComponent(text)}`, fileName);
+  downloadURI(
+    `data:text/plain;charset=utf-8,${encodeURIComponent(text)}`,
+    fileName,
+  );
 }
 
 /**