@vcmap/ui 6.1.0-rc.6 → 6.1.0

package/src/contentTree/groupContentTreeItem.js

@@ -1,9 +1,15 @@
 import { watch } from 'vue';
+import { parseBoolean } from '@vcsuite/parsers';
 import ContentTreeItem, {
   contentTreeClassRegistry,
 } from './contentTreeItem.js';
 import { StateActionState } from '../actions/stateRefAction.js';
 
+/**
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { disableIfChildrenDisabled?: boolean }} GroupContentTreeItemOptions
+ * @property {boolean} [disableIfChildrenDisabled=false] - optional flag to disable the contentTreeItem if all children are disabled.
+ */
+
 /**
  * A clickable group item. When clicked, every child with a state not NONE will also be clicked.
  * @class
@@ -18,12 +24,21 @@ class GroupContentTreeItem extends ContentTreeItem {
   }
 
   /**
-   * @param {import("./contentTreeItem.js").ContentTreeItemOptions} options
+   * @param {GroupContentTreeItemOptions} options
    * @param {import("@src/vcsUiApp.js").default} app
    */
   constructor(options, app) {
     super(options, app);
 
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._disableIfChildrenDisabled = parseBoolean(
+      options.disableIfChildrenDisabled,
+      false,
+    );
+
     /**
      * @type {function():void}
      * @private
@@ -33,6 +48,10 @@ class GroupContentTreeItem extends ContentTreeItem {
       () => {
         const children = this._children.value;
         this.visible = children.some((c) => c.visible);
+
+        if (this._disableIfChildrenDisabled) {
+          this.disabled = children.every((c) => c.disabled);
+        }
         if (
           children.every((c) => c.state === StateActionState.NONE || !c.visible)
         ) {
@@ -74,11 +93,22 @@ class GroupContentTreeItem extends ContentTreeItem {
             state !== StateActionState.ACTIVE;
 
     const promises = this._children.value
-      .filter((c) => c.visible && statePredicate(c.state))
+      .filter((c) => c.visible && !c.disabled && statePredicate(c.state))
       .map((c) => c.clicked());
     await Promise.all(promises);
   }
 
+  /**
+   * @returns {GroupContentTreeItemOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    if (this._disableIfChildrenDisabled) {
+      config.disableIfChildrenDisabled = this._disableIfChildrenDisabled;
+    }
+    return config;
+  }
+
   destroy() {
     this._childWatcher();
     super.destroy();

package/src/contentTree/layerContentTreeItem.d.ts

@@ -1,5 +1,6 @@
 /**
- * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { layerName: string }} LayerContentTreeItemOptions
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { layerName: string, showWhenNotSupported?: boolean }} LayerContentTreeItemOptions
+ * @property {boolean} [showWhenNotSupported=false] - optional flag to show the item even if it is not supported by the activeMap.
  */
 /**
  * @typedef {import("./vcsObjectContentTreeItem.js").VcsObjectContentTreeItemProperties & { availableStyles?: string[], defaultViewpoint?: string }} LayerContentTreeItemProperties
@@ -27,6 +28,7 @@ export function getStateFromLayer(layer: import("@vcmap/core").Layer): StateActi
 export default LayerContentTreeItem;
 export type LayerContentTreeItemOptions = import("./contentTreeItem.js").ContentTreeItemOptions & {
     layerName: string;
+    showWhenNotSupported?: boolean;
 };
 export type LayerContentTreeItemProperties = import("./vcsObjectContentTreeItem.js").VcsObjectContentTreeItemProperties & {
     availableStyles?: string[];
@@ -49,6 +51,11 @@ declare class LayerContentTreeItem extends VcsObjectContentTreeItem<LayerContent
      * @private
      */
     private _layerName;
+    /**
+     * @type {boolean}
+     * @private
+     */
+    private _showWhenNotSupported;
     /**
      * @type {Array<Function>}
      * @private

package/src/contentTree/layerContentTreeItem.js

@@ -1,4 +1,5 @@
 import { Viewpoint } from '@vcmap/core';
+import { parseBoolean } from '@vcsuite/parsers';
 import { reactive } from 'vue';
 import { StateActionState } from '../actions/stateRefAction.js';
 import {
@@ -12,7 +13,8 @@ import { contentTreeClassRegistry } from './contentTreeItem.js';
 import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
- * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { layerName: string }} LayerContentTreeItemOptions
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { layerName: string, showWhenNotSupported?: boolean }} LayerContentTreeItemOptions
+ * @property {boolean} [showWhenNotSupported=false] - optional flag to show the item even if it is not supported by the activeMap.
  */
 
 /**
@@ -33,7 +35,7 @@ export function setViewpointAction(item, app, viewpoint) {
     const action = createGoToViewpointAction(
       {
         name,
-        icon: 'mdi-crosshairs-gps',
+        icon: 'mdi-target',
       },
       viewpoint,
       app.viewpoints,
@@ -125,6 +127,15 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
      */
     this._layerName = options.layerName;
 
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._showWhenNotSupported = parseBoolean(
+      options.showWhenNotSupported,
+      false,
+    );
+
     /**
      * @type {Array<Function>}
      * @private
@@ -215,7 +226,11 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
         this._app.layers.added.addEventListener(resetHandler),
       );
     } else {
-      this.visible = this._layer.isSupported(this._app.maps.activeMap);
+      let isSupported = this._layer.isSupported(this._app.maps.activeMap);
+      this.visible = isSupported || this._showWhenNotSupported;
+      if (this._showWhenNotSupported) {
+        this.disabled = !isSupported;
+      }
       this.state = getStateFromLayer(this._layer);
       this._setLayerExtentAction();
       this.setPropertiesFromObject(this._layer);
@@ -235,7 +250,11 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
 
       this._listeners.push(
         this._app.maps.mapActivated.addEventListener(() => {
-          this.visible = this._layer.isSupported(this._app.maps.activeMap);
+          isSupported = this._layer.isSupported(this._app.maps.activeMap);
+          this.visible = isSupported || this._showWhenNotSupported;
+          if (this._showWhenNotSupported) {
+            this.disabled = !isSupported;
+          }
         }),
       );
     }
@@ -260,6 +279,9 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
   toJSON() {
     const config = super.toJSON();
     config.layerName = this._layerName;
+    if (this._showWhenNotSupported) {
+      config.showWhenNotSupported = this._showWhenNotSupported;
+    }
     return config;
   }
 

package/src/contentTree/layerGroupContentTreeItem.d.ts

@@ -1,6 +1,7 @@
 export default LayerGroupContentTreeItem;
 export type LayerGroupContentTreeItemOptions = import("./contentTreeItem.js").ContentTreeItemOptions & {
     layerNames: string[];
+    showWhenNotSupported?: boolean;
     defaultViewpoint?: string;
     availableStyles?: string[];
 };
@@ -20,6 +21,11 @@ declare class LayerGroupContentTreeItem extends ContentTreeItem {
      * @private
      */
     private _layerNames;
+    /**
+     * @type {boolean}
+     * @private
+     */
+    private _showWhenNotSupported;
     /**
      * @type {Array<function():void>}
      * @private

package/src/contentTree/layerGroupContentTreeItem.js

@@ -1,3 +1,4 @@
+import { parseBoolean } from '@vcsuite/parsers';
 import ContentTreeItem, {
   contentTreeClassRegistry,
 } from './contentTreeItem.js';
@@ -10,8 +11,9 @@ import { StateActionState } from '../actions/stateRefAction.js';
 import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
- * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { layerNames: string[], defaultViewpoint?: string, availableStyles?: string[] }} LayerGroupContentTreeItemOptions
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { layerNames: string[], showWhenNotSupported?: boolean, defaultViewpoint?: string, availableStyles?: string[] }} LayerGroupContentTreeItemOptions
  * @property {Array<string>} layerNames list of LayerNames which should be activated on click
+ * @property {boolean} [showWhenNotSupported=false] - optional flag to show the item even if it is not supported by the activeMap.
  * @property {string} [defaultViewpoint] - the name of an optional default viewpoint
  */
 
@@ -63,6 +65,15 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
       ? options.layerNames.slice()
       : [];
 
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._showWhenNotSupported = parseBoolean(
+      options.showWhenNotSupported,
+      false,
+    );
+
     /**
      * @type {Array<function():void>}
      * @private
@@ -121,8 +132,14 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
       }
     };
     const layers = this._layers;
+    let isSupported = layers.some((l) =>
+      l.isSupported(this._app.maps.activeMap),
+    );
 
-    this.visible = layers.some((l) => l.isSupported(this._app.maps.activeMap));
+    this.visible = isSupported || this._showWhenNotSupported;
+    if (this._showWhenNotSupported) {
+      this.disabled = !isSupported;
+    }
     this.state = getStateFromLayers(layers);
     setViewpointAction(this, this._app, this._defaultViewpoint);
     setStyleAction(
@@ -148,9 +165,13 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
 
     this._listeners.push(
       this._app.maps.mapActivated.addEventListener(() => {
-        this.visible = !!layers.find((l) =>
+        isSupported = layers.some((l) =>
           l.isSupported(this._app.maps.activeMap),
         );
+        this.visible = isSupported || this._showWhenNotSupported;
+        if (this._showWhenNotSupported) {
+          this.disabled = !isSupported;
+        }
       }),
     );
   }
@@ -179,6 +200,9 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
   toJSON() {
     const config = super.toJSON();
     config.layerNames = this._layerNames.slice();
+    if (this._showWhenNotSupported) {
+      config.showWhenNotSupported = this._showWhenNotSupported;
+    }
     if (this._defaultViewpoint) {
       config.defaultViewpoint = this._defaultViewpoint;
     }

package/src/contentTree/nodeContentTreeItem.d.ts

@@ -1,10 +1,31 @@
 export default NodeContentTreeItem;
+export type NodeContentTreeItemOptions = import("./contentTreeItem.js").ContentTreeItemOptions & {
+    disableIfChildrenDisabled?: boolean;
+};
+/**
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { disableIfChildrenDisabled?: boolean }} NodeContentTreeItemOptions
+ * @property {boolean} [disableIfChildrenDisabled=false] - optional flag to disable the contentTreeItem if all children are disabled.
+ */
 /**
  * A group item which has _no click handler_
  * @class
  * @extends {ContentTreeItem}
  */
 declare class NodeContentTreeItem extends ContentTreeItem {
+    /**
+     * @param {NodeContentTreeItemOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: NodeContentTreeItemOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {boolean}
+     * @private
+     */
+    private _disableIfChildrenDisabled;
     _childWatcher: import("vue").WatchStopHandle;
+    /**
+     * @returns {NodeContentTreeItemOptions}
+     */
+    toJSON(): NodeContentTreeItemOptions;
 }
 import ContentTreeItem from './contentTreeItem.js';

package/src/contentTree/nodeContentTreeItem.js

@@ -1,8 +1,14 @@
 import { watch } from 'vue';
+import { parseBoolean } from '@vcsuite/parsers';
 import ContentTreeItem, {
   contentTreeClassRegistry,
 } from './contentTreeItem.js';
 
+/**
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { disableIfChildrenDisabled?: boolean }} NodeContentTreeItemOptions
+ * @property {boolean} [disableIfChildrenDisabled=false] - optional flag to disable the contentTreeItem if all children are disabled.
+ */
+
 /**
  * A group item which has _no click handler_
  * @class
@@ -17,7 +23,7 @@ class NodeContentTreeItem extends ContentTreeItem {
   }
 
   /**
-   * @param {import("./contentTreeItem.js").ContentTreeItemOptions} options
+   * @param {NodeContentTreeItemOptions} options
    * @param {import("@src/vcsUiApp.js").default} app
    */
   constructor(options, app) {
@@ -25,16 +31,39 @@ class NodeContentTreeItem extends ContentTreeItem {
 
     this.clickable = false;
 
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._disableIfChildrenDisabled = parseBoolean(
+      options.disableIfChildrenDisabled,
+      false,
+    );
+
     this._childWatcher = watch(
       this._children,
       () => {
         const children = this._children.value;
         this.visible = children.some((c) => c.visible);
+        if (this._disableIfChildrenDisabled) {
+          this.disabled = children.every((c) => c.disabled);
+        }
       },
-      { deep: true },
+      { deep: true, immediate: true },
     );
   }
 
+  /**
+   * @returns {NodeContentTreeItemOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    if (this._disableIfChildrenDisabled) {
+      config.disableIfChildrenDisabled = this._disableIfChildrenDisabled;
+    }
+    return config;
+  }
+
   destroy() {
     this._childWatcher();
     super.destroy();

package/src/contentTree/obliqueCollectionContentTreeItem.d.ts

@@ -1,6 +1,7 @@
 export default ObliqueCollectionContentTreeItem;
 export type ObliqueCollectionContentTreeItemOptions = import("./contentTreeItem.js").ContentTreeItemOptions & {
     collectionName: string;
+    showWhenNotSupported?: boolean;
 };
 export type ObliqueCollectionContentTreeItemProperties = import("./vcsObjectContentTreeItem.js").VcsObjectContentTreeItemProperties & {
     defaultViewpoint: string;
@@ -20,6 +21,11 @@ declare class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem<
      * @private
      */
     private _collectionName;
+    /**
+     * @type {boolean}
+     * @private
+     */
+    private _showWhenNotSupported;
     /**
      * @type {Array<function():void>}
      * @private

package/src/contentTree/obliqueCollectionContentTreeItem.js

@@ -1,4 +1,5 @@
 import { ObliqueMap, DefaultObliqueCollection } from '@vcmap/core';
+import { parseBoolean } from '@vcsuite/parsers';
 import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';
 import { setViewpointAction } from './layerContentTreeItem.js';
 import { StateActionState } from '../actions/stateRefAction.js';
@@ -6,7 +7,8 @@ import { contentTreeClassRegistry } from './contentTreeItem.js';
 import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
- * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { collectionName: string }} ObliqueCollectionContentTreeItemOptions
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { collectionName: string, showWhenNotSupported?: boolean }} ObliqueCollectionContentTreeItemOptions
+ * @property {boolean} [showWhenNotSupported=false] - optional flag to show the item even if it is not supported by the activeMap.
  */
 
 /**
@@ -43,6 +45,15 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
      */
     this._collectionName = options.collectionName;
 
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._showWhenNotSupported = parseBoolean(
+      options.showWhenNotSupported,
+      false,
+    );
+
     /**
      * @type {Array<function():void>}
      * @private
@@ -105,6 +116,9 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
       const map = this._app.maps.activeMap;
       if (map instanceof ObliqueMap) {
         this.visible = true;
+        if (this._showWhenNotSupported) {
+          this.disabled = false;
+        }
         this.state =
           map.collection === this._collection
             ? StateActionState.ACTIVE
@@ -118,7 +132,10 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
           }),
         );
       } else {
-        this.visible = false;
+        this.visible = this._showWhenNotSupported;
+        if (this._showWhenNotSupported) {
+          this.disabled = this._showWhenNotSupported;
+        }
       }
 
       this.setPropertiesFromObject(this._collection);
@@ -171,6 +188,9 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
   toJSON() {
     const config = super.toJSON();
     config.collectionName = this._collectionName;
+    if (this._showWhenNotSupported) {
+      config.showWhenNotSupported = this._showWhenNotSupported;
+    }
     return config;
   }
 

package/src/contentTree/wmsChildContentTreeItem.d.ts

@@ -0,0 +1,56 @@
+export default WmsChildContentTreeItem;
+export type WMSChildItemOptions = import("./contentTreeItem.js").ContentTreeItemOptions & {
+    wmsEntry: import("./wmsGroupContentTreeItem.js").WMSEntry;
+};
+/**
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions &
+ * { wmsEntry:import("./wmsGroupContentTreeItem.js").WMSEntry }} WMSChildItemOptions
+ * @property {import("./wmsGroupContentTreeItem.js").WMSEntry} wmsEntry - the wmsEntry
+ * @property {boolean} showStyleSelector - show the style selector
+ */
+/**
+ * A WMS child layer. Toggles this child in the parent WMS layer.
+ * @extends {ContentTreeItem}
+ * @class
+ */
+declare class WmsChildContentTreeItem extends ContentTreeItem {
+    /**
+     * @param {WMSChildItemOptions} options
+     * @param {import("../vcsUiApp.js").default} app
+     */
+    constructor(options: WMSChildItemOptions, app: import("../vcsUiApp.js").default);
+    /**
+     * @type {import("./wmsGroupContentTreeItem.js").WMSEntry}
+     */
+    _wmsEntry: import("./wmsGroupContentTreeItem.js").WMSEntry;
+    /**
+     * @type {() => void}
+     */
+    _stateWatcher: () => void;
+    /**
+     * Event fires if the Item has been clicked
+     * @type {VcsEvent<void>}
+     */
+    clickedEvent: VcsEvent<void>;
+    /**
+     * Event fires if a style has been selected
+     * @type {VcsEvent<string>}
+     */
+    styleSelected: VcsEvent<string>;
+    /**
+     * @type {() => void}
+     */
+    _destroyStyleAction: () => void;
+    /**
+     * @type {import("./wmsGroupContentTreeItem.js").WMSEntry}
+     */
+    get wmsEntry(): import("./wmsGroupContentTreeItem.js").WMSEntry;
+    /**
+     * @param {number[]} [extent]
+     * @private
+     */
+    private _setExtentAction;
+    _setStyleAction(): void;
+}
+import ContentTreeItem from './contentTreeItem.js';
+import { VcsEvent } from '@vcmap/core';

package/src/contentTree/wmsChildContentTreeItem.js

@@ -0,0 +1,159 @@
+import { VcsEvent, Viewpoint } from '@vcmap/core';
+import { reactive, computed, watch } from 'vue';
+import {
+  createGoToViewpointAction,
+  createModalAction,
+} from '../actions/actionHelper.js';
+import { StateActionState } from '../actions/stateRefAction.js';
+import ContentTreeItem from './contentTreeItem.js';
+import VcsActionList from '../components/lists/VcsActionList.vue';
+import { vcsAppSymbol } from '../pluginHelper.js';
+
+/**
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions &
+ * { wmsEntry:import("./wmsGroupContentTreeItem.js").WMSEntry }} WMSChildItemOptions
+ * @property {import("./wmsGroupContentTreeItem.js").WMSEntry} wmsEntry - the wmsEntry
+ * @property {boolean} showStyleSelector - show the style selector
+ */
+
+/**
+ * A WMS child layer. Toggles this child in the parent WMS layer.
+ * @extends {ContentTreeItem}
+ * @class
+ */
+class WmsChildContentTreeItem extends ContentTreeItem {
+  static get className() {
+    return 'WmsChildContentTreeItem';
+  }
+
+  /**
+   * @param {WMSChildItemOptions} options
+   * @param {import("../vcsUiApp.js").default} app
+   */
+  constructor(options, app) {
+    super(options, app);
+
+    /**
+     * @type {import("./wmsGroupContentTreeItem.js").WMSEntry}
+     */
+    this._wmsEntry = options.wmsEntry;
+
+    /**
+     * @type {() => void}
+     */
+    this._stateWatcher = watch(
+      this._wmsEntry.active,
+      () => {
+        if (this._wmsEntry.active.value) {
+          this.state = StateActionState.ACTIVE;
+        } else {
+          this.state = StateActionState.INACTIVE;
+        }
+      },
+      { immediate: true },
+    );
+
+    /**
+     * Event fires if the Item has been clicked
+     * @type {VcsEvent<void>}
+     */
+    this.clickedEvent = new VcsEvent();
+
+    /**
+     * Event fires if a style has been selected
+     * @type {VcsEvent<string>}
+     */
+    this.styleSelected = new VcsEvent();
+
+    /**
+     * @type {() => void}
+     */
+    this._destroyStyleAction = () => {};
+
+    this._setExtentAction(this._wmsEntry.extent);
+    if (options.showStyleSelector) {
+      this._setStyleAction();
+    }
+  }
+
+  /**
+   * @type {import("./wmsGroupContentTreeItem.js").WMSEntry}
+   */
+  get wmsEntry() {
+    return this._wmsEntry;
+  }
+
+  /**
+   * @param {number[]} [extent]
+   * @private
+   */
+  _setExtentAction(extent) {
+    const name = 'content.layerExtentAction.name';
+    this.removeAction(name);
+    if (extent) {
+      const viewpoint = Viewpoint.createViewpointFromExtent(extent);
+      const action = createGoToViewpointAction(
+        {
+          name,
+          title: 'content.layerExtentAction.title',
+        },
+        viewpoint,
+        this._app.viewpoints,
+        this._app.maps,
+      );
+      this.addAction(action, 8);
+    }
+  }
+
+  _setStyleAction() {
+    const name = 'content.wmsStyleAction.name';
+    this.removeAction(name);
+    let modalAction = null;
+    if (this._wmsEntry.styles.length > 1) {
+      const styleActions = this._wmsEntry.styles.map((style) => {
+        return reactive({
+          name: style.title,
+          active: computed(
+            () => style.name === this.wmsEntry.activeStyle.value,
+          ),
+          callback: () => {
+            this.styleSelected.raiseEvent(style.name);
+            modalAction?.callback();
+          },
+        });
+      });
+      const { action, destroy } = createModalAction(
+        {
+          name,
+          icon: '$vcsColorSwatch',
+          title: 'content.styleAction.title',
+        },
+        {
+          component: VcsActionList,
+          position: { width: 200 },
+          props: { actions: styleActions },
+        },
+        this._app,
+        vcsAppSymbol,
+      );
+      modalAction = action;
+      this._destroyStyleAction = destroy;
+      this.addAction(action);
+    }
+  }
+
+  async clicked() {
+    await super.clicked();
+    this.clickedEvent.raiseEvent();
+  }
+
+  destroy() {
+    super.destroy();
+    this._stateWatcher();
+    this.clickedEvent.destroy();
+    this.styleSelected.destroy();
+    this._destroyStyleAction();
+  }
+}
+
+export default WmsChildContentTreeItem;