@vcmap/ui 5.0.0-rc.9 → 5.0.0

package/src/contentTree/layerGroupContentTreeItem.js

@@ -1,10 +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
+ * @property {Array<string>} layerNames list of LayerNames which should be activated on click
  * @property {string} [defaultViewpoint] - the name of an optional default viewpoint
  */
 
@@ -13,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;
@@ -38,7 +44,9 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
    * @readonly
    * @type {string}
    */
-  static get className() { return 'LayerGroupContentTreeItem'; }
+  static get className() {
+    return 'LayerGroupContentTreeItem';
+  }
 
   /**
    * @param {LayerGroupContentTreeItemOptions} options
@@ -51,9 +59,9 @@ 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<function():void>}
@@ -76,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);
   }
 
@@ -104,31 +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()));
+      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);
     }
   }
 
@@ -144,6 +170,9 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
     return config;
   }
 
+  /**
+   * @inheritDoc
+   */
   destroy() {
     this._clearListeners();
     super.destroy();
@@ -151,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/composition-api';
-import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js';
+import { watch } from 'vue';
+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
@@ -11,7 +12,7 @@ import { contentTreeClassRegistry } from './contentTreeItem.js';
 
 /**
  * @typedef {VcsObjectContentTreeItemProperties} ObliqueCollectionContentTreeItemProperties
- * @property {string|import("@vcmap/core").ViewPoint} defaultViewpoint
+ * @property {string|import("@vcmap/core").Viewpoint} defaultViewpoint
  */
 
 /**
@@ -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);
-      const vp = await map.getViewPoint();
+    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}
@@ -6,14 +8,16 @@ import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js'
 export const subTreeSymbol = Symbol('SubTree');
 
 /**
- * A sub tree item. Subtrees are rendered in their own (not the main content tree).
+ * A subtree item. Subtrees are rendered in their own (not the main content tree).
  * They will receive their own toggle button in the nav bar.
  * Only toplevel items can be content tree items (with a name which does not have a .)
  * @class
  * @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
@@ -9,7 +11,7 @@ import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js'
 
 /**
  * An abstract class for VcsObject based items.
- * It handle the overriding/setting of its own values based on
+ * It handles the overriding/setting of its own values based on
  * the VcsObjects properties bag.
  * @class
  * @template {VcsObjectContentTreeItemProperties} T
@@ -21,7 +23,9 @@ class VcsObjectContentTreeItem extends ContentTreeItem {
    * @type {string}
    * @readonly
    */
-  static get className() { return 'VcsObjectContentTreeItem'; }
+  static get className() {
+    return 'VcsObjectContentTreeItem';
+  }
 
   /**
    * @param {ContentTreeItemOptions} options
@@ -37,6 +41,7 @@ class VcsObjectContentTreeItem extends ContentTreeItem {
      */
     this._ownProperties = {
       title: this.title,
+      tooltip: this.tooltip,
       icon: this.icon,
       infoUrl: this.infoUrl,
     };
@@ -58,6 +63,7 @@ class VcsObjectContentTreeItem extends ContentTreeItem {
    */
   _setProperties(properties) {
     this.title = properties.title;
+    this.tooltip = properties.tooltip;
     this.icon = properties.icon;
     this.infoUrl = properties.infoUrl;
   }
@@ -69,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);
   }
 
@@ -83,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

@@ -0,0 +1,121 @@
+import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';
+import { contentTreeClassRegistry } from './contentTreeItem.js';
+
+/**
+ * @typedef {VcsObjectContentTreeItem.Options} ViewpointContentTreeItemOptions
+ * @property {string} viewpointName
+ */
+
+/**
+ * A viewpoint item. Sets the viewpoint on the currently active map when clicked.
+ * @extends {VcsObjectContentTreeItem<VcsObjectContentTreeItemProperties>}
+ * @class
+ */
+class ViewpointContentTreeItem extends VcsObjectContentTreeItem {
+  static get className() {
+    return 'ViewpointContentTreeItem';
+  }
+
+  /**
+   * @param {ViewpointContentTreeItemOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    options.icon = options.icon || '$vcsPoi'; // XXX _should_ this be the default?
+    super(options, app);
+
+    /**
+     * @type {string}
+     * @private
+     */
+    this._viewpointName = options.viewpointName;
+
+    /**
+     * @type {Array<function():void>}
+     * @private
+     */
+    this._listeners = [];
+
+    this._setup();
+  }
+
+  /**
+   * @returns {import("@vcmap/core").Viewpoint}
+   */
+  get viewpoint() {
+    return this._app.viewpoints.getByKey(this._viewpointName);
+  }
+
+  /**
+   * @private
+   */
+  _clearListeners() {
+    this._listeners.forEach((cb) => {
+      cb();
+    });
+    this._listeners.splice(0);
+  }
+
+  /**
+   * @private
+   */
+  _setup() {
+    this._clearListeners();
+    /**
+     * Called when a viewpoint is added or removed to reset the item if needed
+     * @param {import("@vcmap/core").Viewpoint} viewpoint
+     */
+    const resetCallback = (viewpoint) => {
+      if (viewpoint.name === this._viewpointName) {
+        this._setup();
+      }
+    };
+
+    if (!this.viewpoint) {
+      this.visible = false;
+      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),
+      );
+    }
+  }
+
+  async clicked() {
+    await super.clicked();
+    if (this._app.maps.activeMap && this.viewpoint) {
+      await this._app.maps.activeMap.gotoViewpoint(this.viewpoint);
+    }
+  }
+
+  /**
+   * @returns {ViewpointContentTreeItemOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    if (config.icon === '$vcsPoi') {
+      delete config.icon;
+    }
+
+    config.viewpointName = this._viewpointName;
+    return config;
+  }
+
+  destroy() {
+    this._clearListeners();
+    super.destroy();
+  }
+}
+
+export default ViewpointContentTreeItem;
+contentTreeClassRegistry.registerClass(
+  ViewpointContentTreeItem.className,
+  ViewpointContentTreeItem,
+);

package/src/downloadHelper.js

@@ -0,0 +1,52 @@
+import { hasSameOrigin } from '@vcmap/core';
+
+/**
+ * Download a blob
+ * @param {string} uri
+ * @param {string} fileName
+ * @api
+ * @export
+ */
+export function downloadURI(uri, fileName) {
+  const link = document.createElement('a');
+  link.download = fileName;
+  link.href = uri;
+  if (!hasSameOrigin(uri)) {
+    link.target = '_blank';
+  }
+  link.click();
+  link.remove();
+}
+
+/**
+ * Download a blob
+ * @param {Blob} blob
+ * @param {string} fileName
+ */
+export function downloadBlob(blob, fileName) {
+  downloadURI(URL.createObjectURL(blob), fileName);
+}
+
+/**
+ * Download a text as UTF-8
+ * @param {string} text
+ * @param {string} fileName
+ */
+export function downloadText(text, fileName) {
+  downloadURI(
+    `data:text/plain;charset=utf-8,${encodeURIComponent(text)}`,
+    fileName,
+  );
+}
+
+/**
+ * Download a canvas as an image
+ * @param {HTMLCanvasElement} canvas
+ * @param {string} fileName
+ * @param {string=} mimeType
+ */
+export function downloadCanvas(canvas, fileName, mimeType) {
+  canvas.toBlob((blob) => {
+    downloadBlob(blob, fileName);
+  }, mimeType);
+}