@vcmap/ui 5.0.2 → 5.1.0-rc.2

package/src/components/viewpoint/VcsViewpointEditor.vue

@@ -0,0 +1,87 @@
+<template>
+  <AbstractConfigEditor
+    @submit="apply"
+    @cancel="cancel"
+    @reset="reset"
+    :auto-close="false"
+    v-bind="{ ...$attrs, ...$props }"
+  >
+    <VcsViewpointComponent v-model="localConfig" hide-name />
+  </AbstractConfigEditor>
+</template>
+
+<script>
+  import { inject, onUnmounted, ref } from 'vue';
+  import { getLogger } from '@vcsuite/logger';
+  import deepEqual from 'fast-deep-equal';
+  import AbstractConfigEditor from '../plugins/AbstractConfigEditor.vue';
+  import VcsViewpointComponent, {
+    gotoViewpointOptions,
+  } from './VcsViewpointComponent.vue';
+
+  /**
+   * An editor component for viewpoints using AbstractConfigEditor and VcsViewpointComponent
+   * @vue-prop {() => import("@vcmap/core").ViewpointOptions} getConfig
+   * @vue-prop {(import("@vcmap/core").ViewpointOptions) => Promise<void>} setConfig
+   */
+  export default {
+    name: 'VcsViewpointEditor',
+    components: {
+      AbstractConfigEditor,
+      VcsViewpointComponent,
+    },
+    props: {
+      getConfig: {
+        type: Function,
+        required: true,
+      },
+      setConfig: {
+        type: Function,
+        required: true,
+      },
+    },
+    setup(props, { emit }) {
+      const app = inject('vcsApp');
+      const localConfig = ref(props.getConfig());
+      const originalConfig = structuredClone(props.getConfig());
+      let cancel = false;
+
+      async function gotoViewpoint() {
+        await gotoViewpointOptions(app, localConfig.value);
+      }
+
+      async function reset() {
+        localConfig.value = props.getConfig();
+        await gotoViewpoint();
+      }
+
+      gotoViewpoint().catch((err) =>
+        getLogger('ViewpointEditor.vue').error(err),
+      );
+
+      onUnmounted(() => {
+        if (
+          !cancel &&
+          !deepEqual(originalConfig, structuredClone(localConfig.value))
+        ) {
+          props.setConfig(localConfig.value);
+        }
+      });
+
+      return {
+        localConfig,
+        apply() {
+          emit('close');
+        },
+        async cancel() {
+          await reset();
+          cancel = true;
+          emit('close');
+        },
+        reset,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

package/src/components/viewpoint/VcsViewpointEditor.vue.d.ts

@@ -0,0 +1,25 @@
+declare const _default: import("vue").DefineComponent<{
+    getConfig: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    setConfig: {
+        type: FunctionConstructor;
+        required: true;
+    };
+}, {
+    localConfig: any;
+    apply(): void;
+    cancel(): Promise<void>;
+    reset: () => Promise<void>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    getConfig: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    setConfig: {
+        type: FunctionConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/src/contentTree/LayerTree.vue.d.ts

@@ -0,0 +1,15 @@
+declare const _default: import("vue").DefineComponent<{
+    windowState: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}, {
+    tree: any;
+    open: any;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    windowState: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/src/contentTree/contentTreeCollection.d.ts

@@ -0,0 +1,113 @@
+/**
+ * @param {import("@src/vcsUiApp.js").default} app
+ * @returns {import("@vcmap/core").OverrideCollection<ContentTreeItem, ContentTreeCollection>}
+ */
+export function createContentTreeCollection(app: import("@src/vcsUiApp.js").default): import("@vcmap/core").OverrideCollection<ContentTreeItem, ContentTreeCollection>;
+export default ContentTreeCollection;
+export type ParentTreeViewItem = {
+    treeViewItem?: import("./contentTreeItem.js").TreeViewItem | undefined;
+    children: Map<string, ParentTreeViewItem>;
+};
+import ContentTreeItem from './contentTreeItem.js';
+/**
+ * @typedef {Object} ParentTreeViewItem
+ * @property {import("./contentTreeItem.js").TreeViewItem} [treeViewItem]
+ * @property {Map<string, ParentTreeViewItem>} children
+ */
+/**
+ * @extends {IndexedCollection<ContentTreeItem>}
+ */
+declare class ContentTreeCollection extends IndexedCollection<ContentTreeItem> {
+    /**
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(app: import("@src/vcsUiApp.js").default);
+    /**
+     * @type {import("@src/vcsUiApp.js").default}
+     * @private
+     */
+    private _app;
+    /**
+     * A map of all item weightChanged listeners
+     * @type {Map<string, function():void>}
+     * @private
+     */
+    private _weightListeners;
+    /**
+     * @type {Array<function():void>}
+     * @private
+     */
+    private _listeners;
+    /**
+     * This is the default content tree.
+     * @type {SubContentTreeItem}
+     * @private
+     */
+    private _defaultSubtreeItem;
+    /**
+     * @type {import("vue").Ref<Map<string, import("./contentTreeItem.js").TreeViewItem>>}
+     * @private
+     */
+    private _subTreeViewItems;
+    /**
+     * The subtree content action button destroy handlers
+     * @type {Map<string, function():void>}
+     * @private
+     */
+    private _subTreeListeners;
+    /**
+     * @type {boolean}
+     * @private
+     */
+    private _suspendListeners;
+    /**
+     * @private
+     */
+    private _clearSubTrees;
+    /**
+     * @param {import("./contentTreeItem.js").TreeViewItem} subTreeViewItem
+     * @param {WindowSlot} [slot]
+     * @returns {function():void}
+     * @private
+     */
+    private _createSubtreeActionButton;
+    /**
+     * @param {boolean} [resetSubtreeButtons=false]
+     * @private
+     */
+    private _setTreeView;
+    /**
+     * 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>>}
+     */
+    get subTreeViewItems(): import("vue").Ref<Map<string, import("./contentTreeItem.js").TreeViewItem>>;
+    /**
+     * All ids of the currently managed subtrees.
+     * The first ID is always the default tree. Other ids are subtree ids.
+     * Order of ids is dependent on their position in the collection and weight.
+     * @type {Array<string>}
+     */
+    get subTreeIds(): string[];
+    /**
+     * @param {string} id
+     * @returns {import("vue").ComputedRef<Array<import("./contentTreeItem.js").TreeViewItem>>}
+     */
+    getComputedVisibleTree(id: string): import("vue").ComputedRef<Array<import("./contentTreeItem.js").TreeViewItem>>;
+    /**
+     * @param {string} id
+     * @returns {import("./contentTreeItem.js").TreeViewItem}
+     * @private
+     */
+    private _getSubTree;
+    /**
+     * @param {string} id
+     * @returns {Array<ContentTreeItem>}
+     */
+    getChildrenForSubTree(id: string): Array<ContentTreeItem>;
+    /**
+     * @param {string} id
+     * @returns {import("vue").Ref<Array<string>>}
+     */
+    getTreeOpenStateRef(id: string): import("vue").Ref<Array<string>>;
+}
+import { IndexedCollection } from '@vcmap/core';

package/src/contentTree/contentTreeCollection.js

@@ -21,7 +21,7 @@ const subTreeItemWeight = Symbol('SubTreeItemWeight');
 
 /**
  * @typedef {Object} ParentTreeViewItem
- * @property {TreeViewItem} [treeViewItem]
+ * @property {import("./contentTreeItem.js").TreeViewItem} [treeViewItem]
  * @property {Map<string, ParentTreeViewItem>} children
  */
 
@@ -30,12 +30,12 @@ const subTreeItemWeight = Symbol('SubTreeItemWeight');
  */
 class ContentTreeCollection extends IndexedCollection {
   /**
-   * @param {VcsUiApp} app
+   * @param {import("@src/vcsUiApp.js").default} app
    */
   constructor(app) {
     super();
     /**
-     * @type {VcsUiApp}
+     * @type {import("@src/vcsUiApp.js").default}
      * @private
      */
     this._app = app;
@@ -89,7 +89,7 @@ class ContentTreeCollection extends IndexedCollection {
       app,
     );
     /**
-     * @type {import("vue").Ref<Map<string, TreeViewItem>>}
+     * @type {import("vue").Ref<Map<string, import("./contentTreeItem.js").TreeViewItem>>}
      * @private
      */
     this._subTreeViewItems = ref(new Map());
@@ -117,7 +117,7 @@ class ContentTreeCollection extends IndexedCollection {
   }
 
   /**
-   * @param {TreeViewItem} subTreeViewItem
+   * @param {import("./contentTreeItem.js").TreeViewItem} subTreeViewItem
    * @param {WindowSlot} [slot]
    * @returns {function():void}
    * @private
@@ -242,8 +242,7 @@ class ContentTreeCollection extends IndexedCollection {
 
   /**
    * Returns all managed subtrees. Entries are not persisted and will change, if the trees get recalculated.
-   * @type {import("vue").Ref<Map<string, TreeViewItem>>}
-   * @readonly
+   * @type {import("vue").Ref<Map<string, import("./contentTreeItem.js").TreeViewItem>>}
    */
   get subTreeViewItems() {
     return this._subTreeViewItems;
@@ -254,7 +253,6 @@ class ContentTreeCollection extends IndexedCollection {
    * The first ID is always the default tree. Other ids are subtree ids.
    * Order of ids is dependent on their position in the collection and weight.
    * @type {Array<string>}
-   * @readonly
    */
   get subTreeIds() {
     const [defaultItem, ...rest] = [...this._subTreeViewItems.value.entries()];
@@ -269,7 +267,7 @@ class ContentTreeCollection extends IndexedCollection {
 
   /**
    * @param {string} id
-   * @returns {import("vue").ComputedRef<Array<TreeViewItem>>}
+   * @returns {import("vue").ComputedRef<Array<import("./contentTreeItem.js").TreeViewItem>>}
    */
   getComputedVisibleTree(id) {
     return computed(() => {
@@ -283,7 +281,7 @@ class ContentTreeCollection extends IndexedCollection {
 
   /**
    * @param {string} id
-   * @returns {TreeViewItem}
+   * @returns {import("./contentTreeItem.js").TreeViewItem}
    * @private
    */
   _getSubTree(id) {
@@ -347,16 +345,8 @@ class ContentTreeCollection extends IndexedCollection {
 export default ContentTreeCollection;
 
 /**
- * Only used for intelisense, unconstructable
- * @implements {import("@vcmap/core").OverrideCollection<ContentTreeItem>}
- * @extends {ContentTreeCollection}
- */
-// eslint-disable-next-line no-unused-vars
-class OverrideContentTreeCollection extends ContentTreeCollection {}
-
-/**
- * @param {VcsUiApp} app
- * @returns {OverrideContentTreeCollection}
+ * @param {import("@src/vcsUiApp.js").default} app
+ * @returns {import("@vcmap/core").OverrideCollection<ContentTreeItem, ContentTreeCollection>}
  */
 export function createContentTreeCollection(app) {
   const collection = new ContentTreeCollection(app);

package/src/contentTree/contentTreeItem.d.ts

@@ -0,0 +1,334 @@
+/**
+ * @type {ClassRegistry<import("@vcmap/core").Ctor<typeof ContentTreeItem>>}
+ */
+export const contentTreeClassRegistry: ClassRegistry<import("@vcmap/core").Ctor<typeof ContentTreeItem>>;
+export default ContentTreeItem;
+export type ContentTreeItemOptions = {
+    type?: string | undefined;
+    /**
+     * - name of the item defining the structure within the tree using dot notation.
+     */
+    name: string;
+    /**
+     * - may be unset, if set from object properties later on. required otherwise
+     */
+    title?: string | undefined;
+    /**
+     * - may be unset or set from object properties later on.
+     */
+    tooltip?: string | undefined;
+    /**
+     * - an icon URL or element to display.
+     */
+    icon?: string | HTMLCanvasElement | HTMLImageElement | undefined;
+    /**
+     * - optional weighting of the item. higher weights come first.
+     */
+    weight?: number | undefined;
+    /**
+     * - optional info url providing link with additional information.
+     */
+    infoUrl?: string | undefined;
+    /**
+     * - groups being initially open or not.
+     */
+    initOpen?: boolean | undefined;
+    /**
+     * - optional callback actions executed on click
+     */
+    onClick?: import("../callback/vcsCallback.js").VcsCallbackOptions | undefined;
+    /**
+     * - optional callback actions executed on activation of the item
+     */
+    onActivate?: import("../callback/vcsCallback.js").VcsCallbackOptions | undefined;
+    /**
+     * - optional callback actions executed on deactivation of the item
+     */
+    onDeactivate?: import("../callback/vcsCallback.js").VcsCallbackOptions | undefined;
+};
+/**
+ * A readonly rendering interface of a ContentTreeItem.
+ */
+export type TreeViewItem = {
+    name: string;
+    /**
+     * - Whether to display this item or not.
+     */
+    visible: boolean;
+    /**
+     * - Whether this item reacts to click events, e.g. with visual feedback
+     */
+    clickable: boolean;
+    /**
+     * - Whether this item should be displayed as disabled.
+     */
+    disabled: boolean;
+    /**
+     * - The state of this item. NONE if this item cannot have a state.
+     */
+    state: StateActionState;
+    /**
+     * - The title to be displayed
+     */
+    title: string;
+    tooltip?: string | undefined;
+    /**
+     * - An optional icon to display with this item. Can be an URL or HTMLElement.
+     */
+    icon?: string | HTMLCanvasElement | HTMLImageElement | undefined;
+    actions: Array<import("../actions/actionHelper.js").VcsAction>;
+    children: Array<TreeViewItem>;
+    /**
+     * - computed property
+     */
+    visibleChildren: Array<TreeViewItem>;
+    /**
+     * - A callback called once the item is clicked.
+     */
+    clicked: (arg0: PointerEvent) => Promise<void>;
+};
+import { ClassRegistry } from '@vcmap/core';
+/**
+ * @class
+ * @abstract
+ */
+declare class ContentTreeItem {
+    /**
+     * @type {string}
+     */
+    static get className(): string;
+    /**
+     * @param {ContentTreeItemOptions} options
+     * @param {import("@src/vcsUiApp.js").default} app
+     */
+    constructor(options: ContentTreeItemOptions, app: import("@src/vcsUiApp.js").default);
+    /**
+     * @protected
+     * @type {import("@src/vcsUiApp.js").default}
+     */
+    protected _app: import("@src/vcsUiApp.js").default;
+    /**
+     * @type {import("vue").Ref<Array<import("../actions/actionHelper.js").VcsAction>>}
+     * @private
+     */
+    private _actions;
+    /**
+     * @type {string}
+     * @private
+     */
+    private _name;
+    /**
+     * Whether to display this item or not.
+     * @type {import("vue").Ref<boolean>}
+     * @private
+     */
+    private _visible;
+    /**
+     * Whether this item reacts to click events, e.g. with visual feedback
+     * @type {import("vue").Ref<boolean>}
+     * @private
+     */
+    private _clickable;
+    /**
+     * Whether this item should be displayed as disabled.
+     * @type {import("vue").Ref<boolean>}
+     * @private
+     */
+    private _disabled;
+    /**
+     * The state of this item. NONE if this item cannot have a state.
+     * @type {import("vue").Ref<StateActionState>}
+     * @private
+     */
+    private _state;
+    /**
+     * @type {function():void|null}
+     * @private
+     */
+    private _stateActionListener;
+    /**
+     * @type {string|null}
+     * @private
+     */
+    private _infoUrl;
+    /**
+     * @param {string} url
+     */
+    set infoUrl(arg: string | null);
+    /**
+     * @type {string|null}
+     */
+    get infoUrl(): string | null;
+    /**
+     * @type {import("vue").Ref<string|undefined>}
+     * @private
+     */
+    private _title;
+    /**
+     * @type {import("vue").Ref<string|undefined>}
+     * @private
+     */
+    private _tooltip;
+    /**
+     * An optional icon to display with this item. Can be an URL or HTMLElement.
+     * @type {import("vue").Ref<string|HTMLCanvasElement|HTMLImageElement|undefined>}
+     * @private
+     */
+    private _icon;
+    /**
+     * @type {import("vue").Ref<Array<TreeViewItem>>}
+     * @protected
+     */
+    protected _children: import("vue").Ref<Array<TreeViewItem>>;
+    /**
+     * @type {number}
+     * @private
+     */
+    private _weight;
+    /**
+     * @type {boolean}
+     */
+    initOpen: boolean;
+    /**
+     * @type {Array<import("../callback/vcsCallback.js").VcsCallbackOptions>}
+     * @protected
+     */
+    protected _onClick: Array<import("../callback/vcsCallback.js").VcsCallbackOptions>;
+    /**
+     * @type {Array<import("../callback/vcsCallback.js").VcsCallbackOptions>}
+     * @protected
+     */
+    protected _onActivate: Array<import("../callback/vcsCallback.js").VcsCallbackOptions>;
+    /**
+     * @type {Array<import("../callback/vcsCallback.js").VcsCallbackOptions>}
+     * @protected
+     */
+    protected _onDeactivate: Array<import("../callback/vcsCallback.js").VcsCallbackOptions>;
+    /**
+     * @type {VcsEvent<number>}
+     */
+    weightChanged: VcsEvent<number>;
+    /**
+     * @type {string}
+     */
+    get className(): string;
+    /**
+     * @type {string}
+     */
+    get name(): string;
+    /**
+     * A slice of the underlying actions array. Use add/removeAction to manipulate the actions array.
+     * @type {Array<import("../actions/actionHelper.js").VcsAction>}
+     */
+    get actions(): import("../actions/actionHelper.js").VcsAction[];
+    /**
+     * @param {boolean} visible
+     */
+    set visible(arg: boolean);
+    /**
+     * @type {boolean}
+     */
+    get visible(): boolean;
+    /**
+     * @param {boolean} clickable
+     */
+    set clickable(arg: boolean);
+    /**
+     * @type {boolean}
+     */
+    get clickable(): boolean;
+    /**
+     * @param {boolean} disabled
+     */
+    set disabled(arg: boolean);
+    /**
+     * @type {boolean}
+     */
+    get disabled(): boolean;
+    /**
+     * @param {StateActionState} state
+     */
+    set state(arg: number);
+    /**
+     * @type {StateActionState}
+     */
+    get state(): number;
+    /**
+     * @param {string|undefined} title
+     */
+    set title(arg: string | undefined);
+    /**
+     * @type {string|undefined}
+     */
+    get title(): string | undefined;
+    /**
+     * @param {string|undefined} tooltip
+     */
+    set tooltip(arg: string | undefined);
+    /**
+     * @type {string|undefined}
+     */
+    get tooltip(): string | undefined;
+    /**
+     * @param {(string|HTMLCanvasElement|HTMLImageElement)=} icon
+     */
+    set icon(arg: string | HTMLCanvasElement | HTMLImageElement | undefined);
+    /**
+     * @type {string|HTMLCanvasElement|HTMLImageElement|undefined}
+     */
+    get icon(): string | HTMLCanvasElement | HTMLImageElement | undefined;
+    /**
+     * @param {number} weight
+     */
+    set weight(arg: number);
+    /**
+     * @type {number}
+     */
+    get weight(): number;
+    /**
+     * @private
+     */
+    private _setStateAction;
+    /**
+     * @param {string} actionName
+     * @returns {number}
+     * @private
+     */
+    private _getActionIndex;
+    /**
+     * Adds an action to this item. The predefined actions have the following weights:
+     * StateAction: 0
+     * GoToViewpoint: 2
+     * StyleSelector: 4
+     * InfoUrl: 6
+     * GoToExtent: 8
+     * The default weight is set to always push new actions past these.
+     * @param {import("../actions/actionHelper.js").VcsAction} action
+     * @param {number} [weight=11]
+     */
+    addAction(action: import("../actions/actionHelper.js").VcsAction, weight?: number | undefined): void;
+    /**
+     * @param {string} actionName
+     */
+    removeAction(actionName: string): void;
+    /**
+     * A callback called once the item is clicked.
+     * @returns {Promise<void>}
+     */
+    clicked(): Promise<void>;
+    /**
+     * Returns a readonly TreeViewItem used for rendering the current item.
+     * @returns {TreeViewItem}
+     */
+    getTreeViewItem(): TreeViewItem;
+    /**
+     * @returns {ContentTreeItemOptions}
+     */
+    toJSON(): ContentTreeItemOptions;
+    /**
+     * Destroys this item and all its actions
+     */
+    destroy(): void;
+}
+import { StateActionState } from '../actions/stateRefAction.js';
+import { VcsEvent } from '@vcmap/core';