@vcmap/ui 6.1.0-rc.7 → 6.1.1

package/src/contentTree/contentTreeCollection.js

@@ -99,6 +99,10 @@ class ContentTreeCollection extends IndexedCollection {
           child.name,
           child.weightChanged.addEventListener(recreateTree),
         );
+        if (child.initOpen) {
+          const subTreeId = this._getSubtreeIdForItem(child);
+          this.getTreeOpenState(subTreeId).push(child.name);
+        }
       }),
       this.removed.addEventListener((child) => {
         recreateTree();
@@ -287,25 +291,42 @@ class ContentTreeCollection extends IndexedCollection {
         return tree.name;
       }),
     );
+
     subTrees.forEach((subTree) => {
-      if (!this._app.navbarManager.has(subTree.name) || resetSubtreeButtons) {
+      if (!this._subTreeViewItems.value.has(subTree.name)) {
         this._subTreeViewItems.value.set(subTree.name, subTree);
-        if (!this._app.uiConfig.config.hideContentTree) {
+      }
+
+      if (!this._app.uiConfig.config.hideContentTree) {
+        if (!this._app.navbarManager.has(subTree.name) || resetSubtreeButtons) {
           this._subTreeListeners.get(subTree.name)?.();
           this._subTreeListeners.set(
             subTree.name,
             this._createSubtreeActionButton(subTree),
           );
-        }
-      } else {
-        const buttonComponent = this._app.navbarManager.get(subTree.name);
-        if (buttonComponent.weight !== subTree[subTreeItemWeight]) {
-          buttonComponent.weight = subTree[subTreeItemWeight];
+        } else {
+          const buttonComponent = this._app.navbarManager.get(subTree.name);
+          if (buttonComponent.weight !== subTree[subTreeItemWeight]) {
+            buttonComponent.weight = subTree[subTreeItemWeight];
+          }
         }
       }
     });
   }
 
+  /**
+   * @param {ContentTreeItem} item
+   * @returns {string}
+   * @private
+   */
+  _getSubtreeIdForItem(item) {
+    const [parent] = item.name.split('.');
+    if (this._subTreeViewItems.value.has(parent)) {
+      return parent;
+    }
+    return defaultContentTreeComponentId;
+  }
+
   /**
    * Returns all managed subtrees. Entries are not persisted and will change, if the trees get recalculated.
    * @type {import("vue").Ref<Map<string, import("./contentTreeItem.js").TreeViewItem>>}
@@ -376,6 +397,7 @@ class ContentTreeCollection extends IndexedCollection {
   }
 
   /**
+   * This returns a proxy to the subtrees open state. You should mutate this array in place.
    * @param {string} id
    * @returns {Array<string>}
    */
@@ -383,9 +405,7 @@ class ContentTreeCollection extends IndexedCollection {
     const subTree = this._getSubTree(id);
     if (subTree) {
       if (!subTree[subTreeOpenStateSymbol]) {
-        subTree[subTreeOpenStateSymbol] = this.getChildrenForSubTree(id)
-          .filter((i) => i.initOpen)
-          .map((i) => i.name);
+        subTree[subTreeOpenStateSymbol] = [];
       }
       return subTree[subTreeOpenStateSymbol];
     }

package/src/contentTree/contentTreeItem.d.ts

@@ -99,14 +99,14 @@ declare class ContentTreeItem {
     static get className(): string;
     /**
      * @param {ContentTreeItemOptions} options
-     * @param {import("@src/vcsUiApp.js").default} app
+     * @param {import("../vcsUiApp.js").default} app
      */
-    constructor(options: ContentTreeItemOptions, app: import("@src/vcsUiApp.js").default);
+    constructor(options: ContentTreeItemOptions, app: import("../vcsUiApp.js").default);
     /**
      * @protected
-     * @type {import("@src/vcsUiApp.js").default}
+     * @type {import("../vcsUiApp.js").default}
      */
-    protected _app: import("@src/vcsUiApp.js").default;
+    protected _app: import("../vcsUiApp.js").default;
     /**
      * @type {import("vue").ShallowRef<Array<import("../actions/actionHelper.js").VcsAction>>}
      * @private

package/src/contentTree/contentTreeItem.js

@@ -65,12 +65,12 @@ class ContentTreeItem {
 
   /**
    * @param {ContentTreeItemOptions} options
-   * @param {import("@src/vcsUiApp.js").default} app
+   * @param {import("../vcsUiApp.js").default} app
    */
   constructor(options, app) {
     /**
      * @protected
-     * @type {import("@src/vcsUiApp.js").default}
+     * @type {import("../vcsUiApp.js").default}
      */
     this._app = app;
 

package/src/contentTree/groupContentTreeItem.d.ts

@@ -12,6 +12,11 @@ export type GroupContentTreeItemOptions = import("./contentTreeItem.js").Content
  * @extends {ContentTreeItem}
  */
 declare class GroupContentTreeItem extends ContentTreeItem {
+    /**
+     * @param {GroupContentTreeItemOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: GroupContentTreeItemOptions, app: import("@src/vcsUiApp.js").default);
     /**
      * @type {boolean}
      * @private

package/src/contentTree/groupContentTreeItem.js

@@ -24,7 +24,7 @@ class GroupContentTreeItem extends ContentTreeItem {
   }
 
   /**
-   * @param {import("./contentTreeItem.js").ContentTreeItemOptions} options
+   * @param {GroupContentTreeItemOptions} options
    * @param {import("@src/vcsUiApp.js").default} app
    */
   constructor(options, app) {

package/src/contentTree/layerContentTreeItem.js

@@ -35,7 +35,7 @@ export function setViewpointAction(item, app, viewpoint) {
     const action = createGoToViewpointAction(
       {
         name,
-        icon: 'mdi-crosshairs-gps',
+        icon: 'mdi-target',
       },
       viewpoint,
       app.viewpoints,

package/src/contentTree/layerGroupContentTreeItem.js

@@ -1,3 +1,4 @@
+import { getLogger } from '@vcsuite/logger';
 import { parseBoolean } from '@vcsuite/parsers';
 import ContentTreeItem, {
   contentTreeClassRegistry,
@@ -184,7 +185,16 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
     const layers = this._layers;
     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().catch((e) => {
+            getLogger('LayerGroupContentTreeItem').error(
+              `Could not activate layer ${l.name}`,
+              e,
+            );
+          }),
+        ),
+      );
       executeCallbacks(this._app, this._onActivate);
     } else {
       layers.forEach((l) => {

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/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} hideStyleSelector - hides 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} hideStyleSelector - hides 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.hideStyleSelector) {
+      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;

package/src/contentTree/wmsGroupContentTreeItem.d.ts

@@ -0,0 +1,171 @@
+export default WMSGroupContentTreeItem;
+export type WMSGroupContentTreeItemOptions = import('./contentTreeItem.js').ContentTreeItemOptions & {
+    layerName: string;
+    showWhenNotSupported?: boolean;
+    setWMSLayersExclusive?: boolean;
+    hideStyleSelector?: boolean;
+    allowedWMSLayers?: string[];
+};
+export type WMSStyleEntry = {
+    name: string;
+    title: string;
+    legend: import("../legend/legendHelper.js").LegendItem;
+};
+export type WMSEntry = {
+    name: string;
+    active: import("vue").Ref<boolean>;
+    activeStyle: import("vue").Ref<string>;
+    title: string;
+    extent: import("@vcmap/core").Extent;
+    styles: Array<WMSStyleEntry>;
+};
+/**
+ * @typedef {import('./contentTreeItem.js').ContentTreeItemOptions &
+ * { layerName: string, showWhenNotSupported?: boolean, setWMSLayersExclusive?:boolean, hideStyleSelector?:boolean, allowedWMSLayers?:string[]}} WMSGroupContentTreeItemOptions
+ * @property {boolean} showWhenNotSupported - optional flag to show the item even if it is not supported by the activeMap.
+ * @property {string} layerName - The name of the WMSLayer to show the children of.
+ * @property {boolean} [setWMSLayersExclusive=false] - Whether the WMSlayers are mutually exclusive.
+ * @property {boolean} [hideStyleSelector=false] - Whether the layer style can be selected. Will add a StyleSelector action to compatible items if the Layer has more than one style.
+ * @property {string[]} allowedWMSLayers - The list of layers to be shown, other available layers will not be shown.
+ */
+/**
+ * @typedef {Object} WMSStyleEntry
+ * @property {string} name
+ * @property {string} title
+ * @property {import("../legend/legendHelper.js").LegendItem} legend
+ */
+/**
+ * @typedef {Object} WMSEntry
+ * @property {string} name
+ * @property {import("vue").Ref<boolean>} active
+ * @property {import("vue").Ref<string>} activeStyle
+ * @property {string} title
+ * @property {import("@vcmap/core").Extent} extent
+ * @property {Array<WMSStyleEntry>} styles
+ */
+/**
+ * A WMSGroupItem, will take over a WMSLayer and request the Capabilities of the layer to show all available
+ * layers as child Items. The WMSGroupItem will also set the legend on the Layer based on the Capabilities,
+ * if the Layer does not have a legend configured.
+ * @extends {VcsObjectContentTreeItem<import("./vcsObjectContentTreeItem.js").VcsObjectContentTreeItemProperties>}
+ * @class
+ */
+declare class WMSGroupContentTreeItem extends VcsObjectContentTreeItem<import("./vcsObjectContentTreeItem.js").VcsObjectContentTreeItemProperties> {
+    /**
+     * @param {WMSGroupContentTreeItemOptions} options
+     * @param {import("../vcsUiApp.js").default} app
+     */
+    constructor(options: WMSGroupContentTreeItemOptions, app: import("../vcsUiApp.js").default);
+    /**
+     * @type {string}
+     * @private
+     */
+    private _layerName;
+    /**
+     * @type {boolean}
+     * @private
+     */
+    private _showWhenNotSupported;
+    /**
+     * @type {boolean}
+     * @private
+     */
+    private _setWMSLayersExclusive;
+    /**
+     * @type {boolean}
+     * @private
+     */
+    private _hideStyleSelector;
+    /**
+     * @type {boolean}
+     * @private
+     */
+    private _invalid;
+    /**
+     * The only allowed layers.
+     * @type {Array<string>|undefined}
+     * @private
+     */
+    private _allowedWMSLayers;
+    /**
+     * @type {Array<WMSEntry>}
+     * @private
+     */
+    private _availableWMSEntries;
+    /**
+     * references the current ChildItems, this WMSGroupContentTreeItem manages
+     * @type {Array<WmsChildContentTreeItem>}
+     * @private
+     */
+    private _childItems;
+    /**
+     * @type {Array<Function>}
+     * @private
+     */
+    private _listeners;
+    /**
+     * this flag is set to true, if the legend is already set, so we do not need to manage the legend
+     * @type {boolean}
+     * @private
+     */
+    private _legendSet;
+    /**
+     * pause the stateChangedListener, if the state is set from the Layer to the WMSGroupContentTreeItem
+     * @type {boolean}
+     * @private
+     */
+    private _pauseStateChangedListener;
+    /**
+     * readonly access, do not manipulate the entries directly.
+     * @type {Array<WMSEntry>}
+     */
+    get wmsEntries(): WMSEntry[];
+    /**
+     * @type {import("@vcmap/core").WMSLayer|undefined}
+     * @private
+     */
+    private get _layer();
+    _setState(): void;
+    /**
+     * Sets the Legend on the Layer, based on the active WMSLayers and the active Styles.
+     * @private
+     */
+    private _setLegend;
+    /**
+     * sets the State of to the underlying Layer
+     * @private
+     */
+    private _setStateToLayer;
+    /**
+     * this reacts to clickEvents from the ChildItem, and sets internal State correspondingly,
+     * and also sets the State to the Layer and the children.
+     * @param {WmsChildContentTreeItem} item
+     */
+    _handleChildClickedEvent(item: WmsChildContentTreeItem): void;
+    /**
+     * @param {WmsChildContentTreeItem} item
+     * @param {string} style
+     * @private
+     */
+    private _handleStyleSelectedEvent;
+    /**
+     * @private
+     */
+    private _clear;
+    /**
+     * syncs the State from the Layer to the WMSGroupContentTreeItem
+     * @private
+     */
+    private _setStateFromLayer;
+    /**
+     * @returns {Promise<void>}
+     * @private
+     */
+    private _setup;
+    /**
+     * @returns {WMSGroupContentTreeItemOptions}
+     */
+    toJSON(): WMSGroupContentTreeItemOptions;
+}
+import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';
+import WmsChildContentTreeItem from './wmsChildContentTreeItem.js';