@vcmap/ui 5.0.2 → 5.1.0-rc.1

package/src/contentTree/contentTreeItem.js

@@ -11,16 +11,17 @@ import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
  * @typedef {Object} ContentTreeItemOptions
+ * @property {string} [type]
  * @property {string} name - name of the item defining the structure within the tree using dot notation.
  * @property {string} [title] - may be unset, if set from object properties later on. required otherwise
  * @property {string} [tooltip] - may be unset or set from object properties later on.
- * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} icon - an icon URL or element to display.
+ * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} [icon] - an icon URL or element to display.
  * @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
+ * @property {import("../callback/vcsCallback.js").VcsCallbackOptions} [onClick] - optional callback actions executed on click
+ * @property {import("../callback/vcsCallback.js").VcsCallbackOptions} [onActivate] - optional callback actions executed on activation of the item
+ * @property {import("../callback/vcsCallback.js").VcsCallbackOptions} [onDeactivate] - optional callback actions executed on deactivation of the item
  */
 
 /**
@@ -34,7 +35,7 @@ import { executeCallbacks } from '../callback/vcsCallback.js';
  * @property {string} title - The title to be displayed
  * @property {string} [tooltip]
  * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} [icon] - An optional icon to display with this item. Can be an URL or HTMLElement.
- * @property {Array<VcsAction>} actions
+ * @property {Array<import("../actions/actionHelper.js").VcsAction>} actions
  * @property {Array<TreeViewItem>} children
  * @property {Array<TreeViewItem>} visibleChildren - computed property
  * @property {function(PointerEvent):Promise<void>} clicked - A callback called once the item is clicked.
@@ -46,7 +47,7 @@ import { executeCallbacks } from '../callback/vcsCallback.js';
 const actionWeightSymbol = Symbol('ActionWeight');
 
 /**
- * @type {ClassRegistry<ContentTreeItem>}
+ * @type {ClassRegistry<import("@vcmap/core").Ctor<typeof ContentTreeItem>>}
  */
 export const contentTreeClassRegistry = new ClassRegistry();
 
@@ -64,17 +65,17 @@ class ContentTreeItem {
 
   /**
    * @param {ContentTreeItemOptions} options
-   * @param {VcsUiApp} app
+   * @param {import("@src/vcsUiApp.js").default} app
    */
   constructor(options, app) {
     /**
      * @protected
-     * @type {VcsUiApp}
+     * @type {import("@src/vcsUiApp.js").default}
      */
     this._app = app;
 
     /**
-     * @type {import("vue").Ref<Array<VcsAction>>}
+     * @type {import("vue").Ref<Array<import("../actions/actionHelper.js").VcsAction>>}
      * @private
      */
     this._actions = ref([]);
@@ -162,17 +163,17 @@ class ContentTreeItem {
      */
     this.initOpen = parseBoolean(options.initOpen, false);
     /**
-     * @type {Array<VcsCallbackOptions>}
+     * @type {Array<import("../callback/vcsCallback.js").VcsCallbackOptions>}
      * @protected
      */
     this._onClick = options.onClick ?? [];
     /**
-     * @type {Array<VcsCallbackOptions>}
+     * @type {Array<import("../callback/vcsCallback.js").VcsCallbackOptions>}
      * @protected
      */
     this._onActivate = options.onActivate ?? [];
     /**
-     * @type {Array<VcsCallbackOptions>}
+     * @type {Array<import("../callback/vcsCallback.js").VcsCallbackOptions>}
      * @protected
      */
     this._onDeactivate = options.onDeactivate ?? [];
@@ -183,7 +184,6 @@ class ContentTreeItem {
   }
 
   /**
-   * @readonly
    * @type {string}
    */
   get className() {
@@ -192,7 +192,6 @@ class ContentTreeItem {
 
   /**
    * @type {string}
-   * @readonly
    */
   get name() {
     return this._name;
@@ -200,8 +199,7 @@ class ContentTreeItem {
 
   /**
    * A slice of the underlying actions array. Use add/removeAction to manipulate the actions array.
-   * @type {Array<VcsAction>}
-   * @readonly
+   * @type {Array<import("../actions/actionHelper.js").VcsAction>}
    */
   get actions() {
     return this._actions.value.slice();
@@ -408,7 +406,7 @@ class ContentTreeItem {
    * InfoUrl: 6
    * GoToExtent: 8
    * The default weight is set to always push new actions past these.
-   * @param {VcsAction} action
+   * @param {import("../actions/actionHelper.js").VcsAction} action
    * @param {number} [weight=11]
    */
   addAction(action, weight = 11) {
@@ -485,6 +483,10 @@ class ContentTreeItem {
       config.title = this.title;
     }
 
+    if (this.tooltip) {
+      config.tooltip = this.tooltip;
+    }
+
     if (this.icon) {
       config.icon = this.icon;
     }
@@ -501,6 +503,18 @@ class ContentTreeItem {
       config.weight = this.weight;
     }
 
+    if (this._onClick.length > 0) {
+      config.onClick = this._onClick;
+    }
+
+    if (this._onActivate.length > 0) {
+      config.onActivate = this._onActivate;
+    }
+
+    if (this._onDeactivate.length > 0) {
+      config.onDeactivate = this._onDeactivate;
+    }
+
     return config;
   }
 

package/src/contentTree/flightContentTreeItem.d.ts

@@ -0,0 +1,53 @@
+export default FlightContentTreeItem;
+export type FlightContentTreeItemOptions = import("./contentTreeItem.js").ContentTreeItemOptions & {
+    flightName: string;
+};
+/**
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { flightName: string }} FlightContentTreeItemOptions
+ */
+/**
+ * A flight item. Allows for playing a flight from the content tree.
+ * Callbacks for onActivate are called on play, when playing from a paused state and onDeactivate are called
+ * on stop. Pausing and continueing a flight does not trigger any callbacks.
+ * @class
+ * @extends {VcsObjectContentTreeItem}
+ */
+declare class FlightContentTreeItem extends VcsObjectContentTreeItem<any> {
+    /**
+     * @param {FlightContentTreeItemOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: FlightContentTreeItemOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {string}
+     * @private
+     */
+    private _flightName;
+    /**
+     * @type {Array<Function>}
+     * @private
+     */
+    private _listeners;
+    /**
+     * @type {import("@vcmap/core").FlightInstance}
+     * @private
+     */
+    private get _flight();
+    /**
+     * @private
+     */
+    private _clearListeners;
+    /**
+     * @private
+     */
+    private _setupPlayer;
+    /**
+     * @private
+     */
+    private _setup;
+    /**
+     * @returns {FlightContentTreeItemOptions}
+     */
+    toJSON(): FlightContentTreeItemOptions;
+}
+import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';

package/src/contentTree/flightContentTreeItem.js

@@ -0,0 +1,201 @@
+import { CesiumMap } from '@vcmap/core';
+import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';
+import { contentTreeClassRegistry } from './contentTreeItem.js';
+import { executeCallbacks } from '../callback/vcsCallback.js';
+
+/**
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { flightName: string }} FlightContentTreeItemOptions
+ */
+
+/**
+ * A flight item. Allows for playing a flight from the content tree.
+ * Callbacks for onActivate are called on play, when playing from a paused state and onDeactivate are called
+ * on stop. Pausing and continueing a flight does not trigger any callbacks.
+ * @class
+ * @extends {VcsObjectContentTreeItem}
+ */
+class FlightContentTreeItem extends VcsObjectContentTreeItem {
+  /**
+   * @returns {string}
+   */
+  static get className() {
+    return 'FlightContentTreeItem';
+  }
+
+  /**
+   * @param {FlightContentTreeItemOptions} options
+   * @param {import("@src/vcsUiApp.js").default} app
+   */
+  constructor(options, app) {
+    super(options, app);
+
+    /**
+     * @type {string}
+     * @private
+     */
+    this._flightName = options.flightName;
+
+    /**
+     * @type {Array<Function>}
+     * @private
+     */
+    this._listeners = [];
+
+    this._setup();
+  }
+
+  /**
+   * @type {import("@vcmap/core").FlightInstance}
+   * @private
+   */
+  get _flight() {
+    return this._app.flights.getByKey(this._flightName);
+  }
+
+  /**
+   * @private
+   */
+  _clearListeners() {
+    this._listeners.forEach((cb) => {
+      cb();
+    });
+    this._listeners.splice(0);
+  }
+
+  /**
+   * @private
+   */
+  _setupPlayer() {
+    let stateListener = () => {};
+    let destroyListener = () => {};
+    /** @type {import("@vcmap/core").FlightPlayer|undefined} */
+    let player;
+
+    const stopAction = {
+      name: 'stop',
+      icon: 'mdi-square',
+      title: 'flight.stopTooltip',
+      callback: () => {
+        player?.stop();
+      },
+    };
+
+    const playAction = {
+      name: 'play',
+      icon: 'mdi-play',
+      title: 'flight.playTooltip',
+      callback: async () => {
+        if (player) {
+          if (player.state === 'playing') {
+            player.pause();
+          } else {
+            player.play();
+          }
+        } else {
+          player = await this._app.flights.setPlayerForFlight(this._flight);
+          if (player) {
+            stateListener = player.stateChanged.addEventListener((state) => {
+              if (state === 'stopped') {
+                this.removeAction(stopAction.name);
+                playAction.icon = 'mdi-play';
+                playAction.title = 'flight.playTooltip';
+                executeCallbacks(this._app, this._onDeactivate);
+              } else {
+                if (!this.actions.includes(stopAction)) {
+                  this.addAction(stopAction);
+                }
+                if (state === 'paused') {
+                  playAction.icon = 'mdi-play';
+                  playAction.title = 'flight.playTooltip';
+                } else {
+                  playAction.icon = 'mdi-pause';
+                  playAction.title = 'flight.pauseTooltip';
+                }
+              }
+            });
+            destroyListener = player.destroyed.addEventListener(() => {
+              player = null;
+              this.removeAction(stopAction.name);
+              playAction.icon = 'mdi-play';
+              stateListener();
+              destroyListener();
+            });
+            player.play();
+            executeCallbacks(this._app, this._onActivate);
+          }
+        }
+      },
+    };
+
+    this.addAction(playAction, 12);
+
+    this._listeners.push(() => {
+      if (player) {
+        player.stop();
+        player.destroy();
+        player = null;
+      }
+      this.removeAction(playAction.name);
+    });
+  }
+
+  /**
+   * @private
+   */
+  _setup() {
+    this._clearListeners();
+    /**
+     * Called when a flight is added or removed to reset the item if needed
+     * @param {import("@vcmap/core").FlightInstance} flight
+     */
+    const resetHandler = (flight) => {
+      if (flight.name === this._flightName) {
+        this._setup();
+      }
+    };
+
+    if (!this._flight) {
+      this.visible = false;
+      this._listeners.push(
+        this._app.flights.added.addEventListener(resetHandler),
+      );
+    } else {
+      this.visible = this._app.maps.activeMap instanceof CesiumMap;
+      this._setupPlayer();
+      this.setPropertiesFromObject(this._flight);
+
+      this._listeners.push(
+        this._app.flights.removed.addEventListener(resetHandler),
+      );
+      this._listeners.push(
+        this._app.flights.added.addEventListener(resetHandler),
+      );
+
+      this._listeners.push(
+        this._app.maps.mapActivated.addEventListener(() => {
+          this.visible = this._app.maps.activeMap instanceof CesiumMap;
+        }),
+      );
+    }
+  }
+
+  /**
+   * @returns {FlightContentTreeItemOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.flightName = this._flightName;
+    return config;
+  }
+
+  destroy() {
+    super.destroy();
+    this._clearListeners();
+  }
+}
+
+export default FlightContentTreeItem;
+contentTreeClassRegistry.registerClass(
+  FlightContentTreeItem.className,
+  FlightContentTreeItem,
+);

package/src/contentTree/groupContentTreeItem.d.ts

@@ -0,0 +1,14 @@
+export default GroupContentTreeItem;
+/**
+ * A clickable group item. When clicked, every child with a state not NONE will also be clicked.
+ * @class
+ * @extends {ContentTreeItem}
+ */
+declare class GroupContentTreeItem extends ContentTreeItem {
+    /**
+     * @type {function():void}
+     * @private
+     */
+    private _childWatcher;
+}
+import ContentTreeItem from './contentTreeItem.js';

package/src/contentTree/groupContentTreeItem.js

@@ -18,8 +18,8 @@ class GroupContentTreeItem extends ContentTreeItem {
   }
 
   /**
-   * @param {ContentTreeItemOptions} options
-   * @param {VcsUiApp} app
+   * @param {import("./contentTreeItem.js").ContentTreeItemOptions} options
+   * @param {import("@src/vcsUiApp.js").default} app
    */
   constructor(options, app) {
     super(options, app);

package/src/contentTree/layerContentTreeItem.d.ts

@@ -0,0 +1,76 @@
+/**
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { layerName: string }} LayerContentTreeItemOptions
+ */
+/**
+ * @typedef {import("./vcsObjectContentTreeItem.js").VcsObjectContentTreeItemProperties & { availableStyles?: string[], defaultViewpoint?: string }} LayerContentTreeItemProperties
+ * @property {string} [defaultViewpoint] - the name the default viewpoint
+ */
+/**
+ * @param {import("./contentTreeItem.js").default} item
+ * @param {import("@src/vcsUiApp.js").default} app
+ * @param {string|import("@vcmap/core").Viewpoint=} viewpoint
+ */
+export function setViewpointAction(item: import("./contentTreeItem.js").default, app: import("@src/vcsUiApp.js").default, viewpoint?: (string | import("@vcmap/core").Viewpoint) | undefined): void;
+/**
+ * @param {import("@vcmap/core").Layer} layer
+ * @returns {StateActionState}
+ */
+export function getStateFromLayer(layer: import("@vcmap/core").Layer): StateActionState;
+export default LayerContentTreeItem;
+export type LayerContentTreeItemOptions = import("./contentTreeItem.js").ContentTreeItemOptions & {
+    layerName: string;
+};
+export type LayerContentTreeItemProperties = import("./vcsObjectContentTreeItem.js").VcsObjectContentTreeItemProperties & {
+    availableStyles?: string[];
+    defaultViewpoint?: string;
+};
+import { StateActionState } from '../actions/stateRefAction.js';
+/**
+ * A layer item. Activates/deactivates the layer when clicked.
+ * @class
+ * @extends {VcsObjectContentTreeItem<LayerContentTreeItemProperties>}
+ */
+declare class LayerContentTreeItem extends VcsObjectContentTreeItem<LayerContentTreeItemProperties> {
+    /**
+     * @param {LayerContentTreeItemOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: LayerContentTreeItemOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {string}
+     * @private
+     */
+    private _layerName;
+    /**
+     * @type {Array<Function>}
+     * @private
+     */
+    private _listeners;
+    /**
+     * @type {import("@vcmap/core").Layer}
+     * @private
+     */
+    private get _layer();
+    /**
+     * @param {Array<string>=} availableStyles
+     * @private
+     */
+    private _setStyleAction;
+    /**
+     * @private
+     */
+    private _setLayerExtentAction;
+    /**
+     * @private
+     */
+    private _clearListeners;
+    /**
+     * @private
+     */
+    private _setup;
+    /**
+     * @returns {LayerContentTreeItemOptions}
+     */
+    toJSON(): LayerContentTreeItemOptions;
+}
+import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';

package/src/contentTree/layerContentTreeItem.js

@@ -12,20 +12,18 @@ import { contentTreeClassRegistry } from './contentTreeItem.js';
 import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
- * @typedef {ContentTreeItemOptions} LayerContentTreeItemOptions
- * @property {string} layerName
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { layerName: string }} LayerContentTreeItemOptions
  */
 
 /**
- * @typedef {VcsObjectContentTreeItemProperties} LayerContentTreeItemProperties
- * @property {Array<string>} [availableStyles]
+ * @typedef {import("./vcsObjectContentTreeItem.js").VcsObjectContentTreeItemProperties & { availableStyles?: string[], defaultViewpoint?: string }} LayerContentTreeItemProperties
  * @property {string} [defaultViewpoint] - the name the default viewpoint
  */
 
 /**
- * @param {ContentTreeItem} item
- * @param {VcsUiApp} app
- * @param {string=} viewpoint
+ * @param {import("./contentTreeItem.js").default} item
+ * @param {import("@src/vcsUiApp.js").default} app
+ * @param {string|import("@vcmap/core").Viewpoint=} viewpoint
  */
 export function setViewpointAction(item, app, viewpoint) {
   const name = 'ViewpointAction';
@@ -74,7 +72,7 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
 
   /**
    * @param {LayerContentTreeItemOptions} options
-   * @param {VcsUiApp} app
+   * @param {import("@src/vcsUiApp.js").default} app
    */
   constructor(options, app) {
     super(options, app);
@@ -110,7 +108,7 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
   _setStyleAction(availableStyles) {
     const name = 'StyleSelector';
     this.removeAction(name);
-    if (Array.isArray(availableStyles)) {
+    if (Array.isArray(availableStyles) && availableStyles.length > 0) {
       const { action, destroy } = createModalAction(
         {
           name,

package/src/contentTree/layerGroupContentTreeItem.d.ts

@@ -0,0 +1,50 @@
+export default LayerGroupContentTreeItem;
+export type LayerGroupContentTreeItemOptions = import("./contentTreeItem.js").ContentTreeItemOptions & {
+    layerNames: string[];
+    defaultViewpoint?: string;
+};
+/**
+ * A layer group. When clicked will try to activate all layers in the group or deactivate all layer in the group if all are active.
+ * @class
+ * @extends {ContentTreeItem}
+ */
+declare class LayerGroupContentTreeItem extends ContentTreeItem {
+    /**
+     * @param {LayerGroupContentTreeItemOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: LayerGroupContentTreeItemOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {Array<string>}
+     * @private
+     */
+    private _layerNames;
+    /**
+     * @type {Array<function():void>}
+     * @private
+     */
+    private _listeners;
+    /**
+     * @type {string|null}
+     * @private
+     */
+    private _defaultViewpoint;
+    /**
+     * @type {Array<import("@vcmap/core").Layer>}
+     * @private
+     */
+    private get _layers();
+    /**
+     * @private
+     */
+    private _clearListeners;
+    /**
+     * @private
+     */
+    private _setup;
+    /**
+     * @returns {LayerGroupContentTreeItemOptions}
+     */
+    toJSON(): LayerGroupContentTreeItemOptions;
+}
+import ContentTreeItem from './contentTreeItem.js';

package/src/contentTree/layerGroupContentTreeItem.js

@@ -9,7 +9,7 @@ import { StateActionState } from '../actions/stateRefAction.js';
 import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
- * @typedef {ContentTreeItemOptions} LayerGroupContentTreeItemOptions
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { layerNames: string[], defaultViewpoint?: string }} LayerGroupContentTreeItemOptions
  * @property {Array<string>} layerNames list of LayerNames which should be activated on click
  * @property {string} [defaultViewpoint] - the name of an optional default viewpoint
  */
@@ -41,7 +41,6 @@ function getStateFromLayers(layers) {
  */
 class LayerGroupContentTreeItem extends ContentTreeItem {
   /**
-   * @readonly
    * @type {string}
    */
   static get className() {
@@ -50,7 +49,7 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
 
   /**
    * @param {LayerGroupContentTreeItemOptions} options
-   * @param {VcsUiApp} app
+   * @param {import("@src/vcsUiApp.js").default} app
    */
   constructor(options, app) {
     super(options, app);

package/src/contentTree/nodeContentTreeItem.d.ts

@@ -0,0 +1,10 @@
+export default NodeContentTreeItem;
+/**
+ * A group item which has _no click handler_
+ * @class
+ * @extends {ContentTreeItem}
+ */
+declare class NodeContentTreeItem extends ContentTreeItem {
+    _childWatcher: import("vue").WatchStopHandle;
+}
+import ContentTreeItem from './contentTreeItem.js';

package/src/contentTree/nodeContentTreeItem.js

@@ -17,8 +17,8 @@ class NodeContentTreeItem extends ContentTreeItem {
   }
 
   /**
-   * @param {ContentTreeItemOptions} options
-   * @param {VcsUiApp} app
+   * @param {import("./contentTreeItem.js").ContentTreeItemOptions} options
+   * @param {import("@src/vcsUiApp.js").default} app
    */
   constructor(options, app) {
     super(options, app);

package/src/contentTree/obliqueCollectionContentTreeItem.d.ts

@@ -0,0 +1,46 @@
+export default ObliqueCollectionContentTreeItem;
+export type ObliqueCollectionContentTreeItemOptions = import("./contentTreeItem.js").ContentTreeItemOptions & {
+    collectionName: string;
+};
+export type ObliqueCollectionContentTreeItemProperties = import("./vcsObjectContentTreeItem.js").VcsObjectContentTreeItemProperties & {
+    defaultViewpoint: string;
+};
+/**
+ * An oblique collection item. Sets/unsets the oblique collection when clicked.
+ * @extends {VcsObjectContentTreeItem<ObliqueCollectionContentTreeItemProperties>}
+ */
+declare class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem<ObliqueCollectionContentTreeItemProperties> {
+    /**
+     * @param {ObliqueCollectionContentTreeItemOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: ObliqueCollectionContentTreeItemOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {string}
+     * @private
+     */
+    private _collectionName;
+    /**
+     * @type {Array<function():void>}
+     * @private
+     */
+    private _listeners;
+    /**
+     * @type {import("@vcmap/core").ObliqueCollection}
+     * @private
+     */
+    private get _collection();
+    /**
+     * @private
+     */
+    private _clearListeners;
+    /**
+     * @private
+     */
+    private _setup;
+    /**
+     * @returns {ObliqueCollectionContentTreeItemOptions}
+     */
+    toJSON(): ObliqueCollectionContentTreeItemOptions;
+}
+import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';