@vcmap/ui 6.1.0-rc.7 → 6.1.0

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;

package/src/contentTree/wmsGroupContentTreeItem.d.ts

@@ -0,0 +1,171 @@
+export default WMSGroupContentTreeItem;
+export type WMSGroupContentTreeItemOptions = import('./contentTreeItem.js').ContentTreeItemOptions & {
+    layerName: string;
+    showWhenNotSupported?: boolean;
+    exclusiveLayers?: boolean;
+    editableStyle?: 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, exclusiveLayers?:boolean, editableStyle?: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} [showStyleSelector=true] - 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 _showStyleSelector;
+    /**
+     * @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';