@vcmap/ui 5.0.1 → 5.1.0-rc.1

package/src/manager/collectionManager/collectionManager.js

@@ -1,60 +1,60 @@
 import { VcsEvent, Collection } from '@vcmap/core';
 import { check, checkMaybe } from '@vcsuite/check';
 import { validateActions } from '../../components/lists/VcsActionList.vue';
-import CollectionComponent from './collectionComponent.js';
+import CollectionComponentClass from './collectionComponentClass.js';
 
 /**
- * @callback MappingFunction
- * @param {T} item
- * @param {CollectionComponent<T>} collectionComponent
- * @param {import("@vcmap/ui").VcsListItem & { destroy: (function():void)|undefined }} listItem - you can add a destroy callback for cleanup
+ * @typedef {function(T, import("./collectionComponentClass.js").default<T>, import("./collectionComponentClass.js").CollectionComponentListItem): void} MappingFunction
  * @template {Object} T
  */
 
 /**
- * @callback PredicateFunction
- * @param {T} item
- * @param {CollectionComponent<T>} collectionComponent
- * @returns {boolean}
+ * @typedef {function(T, import("./collectionComponentClass.js").default<T>): boolean} PredicateFunction
  * @template {Object} T
  */
 
 /**
- * @typedef {Object} ItemMapping
- * @property {PredicateFunction<T>|undefined} predicate
- * @property {MappingFunction<T>} mappingFunction
- * @property {string | symbol} owner
- * @template T
+ * @typedef {{
+ *   predicate?: PredicateFunction<T>,
+ *   mappingFunction: MappingFunction<T>,
+ *   owner: string | symbol,
+ * }} ItemMapping
+ * @template {Object} T
  */
 
 /**
- * @typedef {Object} ItemFilter
- * @property {PredicateFunction<T>} filterFunction
- * @property {string | symbol} owner
- * @template T
+ * @typedef {{
+ *   filterFunction: PredicateFunction<T>,
+ *   owner: string | symbol
+ * }} ItemFilter
+ * @template {Object} T
  */
 
 /**
  * @typedef {Object} OwnedAction
- * @property {VcsAction} action
+ * @property {import("../../actions/actionHelper.js").VcsAction} action
  * @property {number} [weight=0] Optional weight affecting the displaying order
  * @property {string | symbol} owner
  */
 
+/**
+ * @typedef {import("../../vcsUiApp.js").VcsComponentManager<CollectionComponentClass, import("./collectionComponentClass.js").CollectionComponentClassOptions<Object>>} ICollectionManager
+ */
+
 /**
  * Manages a list of collections as collectionComponents.
  * Sets the correct mapping/filter functions and actions on the collectionComponent
  * Provides an API to add/remove collectionsComponents.
- * @implements {VcsComponentManager<CollectionComponent, CollectionComponentOptions>}
+ * @implements {ICollectionManager}
  */
 class CollectionManager {
   constructor() {
     /**
-     * @type {VcsEvent<CollectionComponent>}
+     * @type {VcsEvent<CollectionComponentClass<Object>>}
      */
     this.added = new VcsEvent();
     /**
-     * @type {VcsEvent<CollectionComponent>}
+     * @type {VcsEvent<CollectionComponentClass<Object>>}
      */
     this.removed = new VcsEvent();
     /**
@@ -62,7 +62,7 @@ class CollectionManager {
      */
     this.componentIds = [];
     /**
-     * @type {Map<string, CollectionComponent>}
+     * @type {Map<string, CollectionComponentClass<Object>>}
      * @private
      */
     this._collectionComponents = new Map();
@@ -78,7 +78,7 @@ class CollectionManager {
      */
     this._itemFilters = [];
     /**
-     * @type {Array<{actions:Array<VcsAction>,owner:string|symbol,collectionComponentIds:Array<string>}>}
+     * @type {Array<{actions:Array<import("../../actions/actionHelper.js").VcsAction>,owner:string|symbol,collectionComponentIds:Array<string>}>}
      * @private
      */
     this._actions = [];
@@ -86,7 +86,7 @@ class CollectionManager {
 
   /**
    * @param {string} id
-   * @returns {CollectionComponent|undefined}
+   * @returns {CollectionComponentClass<Object>|undefined}
    */
   get(id) {
     return this._collectionComponents.get(id);
@@ -101,7 +101,7 @@ class CollectionManager {
   }
 
   /**
-   * @param {import("@vcmap/core").Collection} collection
+   * @param {import("@vcmap/core").Collection<Object>} collection
    * @returns {boolean}
    */
   hasCollection(collection) {
@@ -112,8 +112,9 @@ class CollectionManager {
 
   /**
    * gets all collection components corresponding to provided collection
-   * @param {import("@vcmap/core").Collection} collection
-   * @returns {CollectionComponent[]}
+   * @param {import("@vcmap/core").Collection<T>} collection
+   * @returns {CollectionComponentClass<T>[]}
+   * @template {Object|import("@vcmap/core").VcsObject} T
    */
   getCollection(collection) {
     return [...this._collectionComponents.values()].filter(
@@ -123,9 +124,10 @@ class CollectionManager {
 
   /**
    * adds a collectionComponent
-   * @param {CollectionComponentOptions} collectionComponentOptions
+   * @param {import("./collectionComponentClass.js").CollectionComponentClassOptions<T>} collectionComponentOptions
    * @param {string|symbol} owner
-   * @returns {CollectionComponent}
+   * @returns {CollectionComponentClass<T>}
+   * @template {Object|import("@vcmap/core").VcsObject} T
    */
   add(collectionComponentOptions, owner) {
     check(collectionComponentOptions, { collection: Collection });
@@ -140,7 +142,7 @@ class CollectionManager {
       );
     }
 
-    const collectionComponent = new CollectionComponent(
+    const collectionComponent = new CollectionComponentClass(
       collectionComponentOptions,
       owner,
     );
@@ -174,7 +176,7 @@ class CollectionManager {
   }
 
   /**
-   * removes a CollectionComponent, Component will not be rendered anymore and will be destroyed. Add CollectionComponent again
+   * removes a CollectionComponentClass, Component will not be rendered anymore and will be destroyed. Add CollectionComponentClass again
    * to show the component again
    * @param {string} id
    */
@@ -206,10 +208,11 @@ class CollectionManager {
   /**
    * adds MappingFunction to the collectionManager. For the given collectionComponents each Item will be transformed by the
    * mappingFunction if the predicate returns true.
-   * @param {PredicateFunction} predicate
-   * @param {MappingFunction} mappingFunction
+   * @param {PredicateFunction<T>} predicate
+   * @param {MappingFunction<T>} mappingFunction
    * @param {string | symbol} owner
    * @param {Array<string>} [collectionComponentIds] list of collectionComponents this mappingFunction should be used on. If empty, mappingFunction is applied to all managed collectionComponents.
+   * @template {Object} T
    */
   addMappingFunction(
     predicate,
@@ -251,8 +254,9 @@ class CollectionManager {
 
   /**
    * removes the given mappingFunction
-   * @param {MappingFunction} mappingFunction
+   * @param {MappingFunction<T>} mappingFunction
    * @param {string | symbol} owner
+   * @template {Object} T
    */
   removeMappingFunction(mappingFunction, owner) {
     check(mappingFunction, Function);
@@ -268,9 +272,10 @@ class CollectionManager {
   }
 
   /**
-   * @param {PredicateFunction} filterFunction
+   * @param {PredicateFunction<T>} filterFunction
    * @param {string | symbol} owner
    * @param {Array<string>} [collectionComponentIds] list of collectionComponents this filterFunction should be used on. If empty, filterFunction is applied to all managed collectionComponents.
+   * @template {Object} T
    */
   addFilterFunction(filterFunction, owner, collectionComponentIds = []) {
     check(filterFunction, Function);
@@ -305,8 +310,9 @@ class CollectionManager {
 
   /**
    * removes the given filterFunction
-   * @param {PredicateFunction} filterFunction
+   * @param {PredicateFunction<T>} filterFunction
    * @param {string | symbol} owner
+   * @template {Object} T
    */
   removeFilterFunction(filterFunction, owner) {
     check(filterFunction, Function);
@@ -323,7 +329,7 @@ class CollectionManager {
 
   /**
    * add multiple actions owned by the same owner
-   * @param {Array<VcsAction>} actions
+   * @param {Array<import("../../actions/actionHelper.js").VcsAction>} actions
    * @param {string | symbol} owner
    * @param {Array<string>} [collectionComponentIds] list of collectionComponents this mappingFunction should be used on. If empty, actions are applied to all managed collectionComponents.
    */
@@ -356,7 +362,7 @@ class CollectionManager {
   }
 
   /**
-   * @param {Array<VcsAction>} actions
+   * @param {Array<import("../../actions/actionHelper.js").VcsAction>} actions
    * @param {string | symbol} owner
    */
   removeActions(actions, owner) {

package/src/manager/collectionManager/editorCollectionComponentClass.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Adds select behaviour toggling editor or multi-editor components. Two modes are distinguished:
+ * - selection based (default): editor windows are toggled on selection change. All editor windows are exclusive.
+ * - clicked based: editor windows are opened on click. Multiple editor windows can be open at the same time.
+ * @param {import("../../vcsUiApp.js").default} app
+ * @param {import("./collectionComponentClass.js").default<T>} collectionComponent
+ * @param {EditingOptions<T>} editingOptions
+ * @param {string} [parentId='category-manager'] - windowId of window with CollectionComponent
+ * @template {Object|import("@vcmap/core").VcsObject} T
+ * @returns {EditorCollectionComponentClass<T>}
+ */
+export function makeEditorCollectionComponentClass<T extends Object | import("@vcmap/core/dist/src/vcsObject.js").default>(app: import("../../vcsUiApp.js").default, collectionComponent: CollectionComponentClass<T>, editingOptions: EditingOptions<T>, parentId?: string | undefined): EditorCollectionComponentClass<T>;
+/**
+ * @typedef {Omit<import("../window/windowManager.js").WindowComponentOptions,"id"|"parentId"|"slot">} EditorWindowComponentOptions
+ */
+/**
+ * @typedef {{
+ *   editor: EditorWindowComponentOptions|function(T):EditorWindowComponentOptions|undefined,
+ *   multiEditor?: EditorWindowComponentOptions,
+ *   selectionBased?: boolean
+ * }} EditingOptions
+ * @property {EditorWindowComponentOptions|function(T)|undefined} editor
+ * @property {EditorWindowComponentOptions} [multiEditor]
+ * @property {boolean} [selectionBased=true] - If true, editor windows are coupled to selection and editor windows are exclusive
+ * @template {Object} T
+ */
+/**
+ * @typedef {import("./collectionComponentClass.js").default<T> & {
+ *     getEditorWindowId: function(T):string,
+ *     getMultiEditorWindowId: function():string|undefined,
+ *     closeEditorWindow: function(T):void,
+ *     closeEditorWindows: function():void,
+ *     closeMultiEditorWindow: function():void,
+ *     openEditorWindow: function(T):void,
+ *     openMultiEditorWindow: function():void,
+ *     parentId: string,
+ * }} EditorCollectionComponentClass
+ * @template {Object} T
+ */
+/**
+ * A symbol added to collection component class with editor selection behaviour.
+ */
+export const isEditorCollectionComponentClass: unique symbol;
+export type EditorWindowComponentOptions = Omit<import("../window/windowManager.js").WindowComponentOptions, "id" | "parentId" | "slot">;
+export type EditingOptions<T extends Object> = {
+    editor: EditorWindowComponentOptions | ((arg0: T) => EditorWindowComponentOptions | undefined);
+    multiEditor?: EditorWindowComponentOptions;
+    selectionBased?: boolean;
+};
+export type EditorCollectionComponentClass<T extends Object> = import("./collectionComponentClass.js").default<T> & {
+    getEditorWindowId: (arg0: T) => string;
+    getMultiEditorWindowId: () => string | undefined;
+    closeEditorWindow: (arg0: T) => void;
+    closeEditorWindows: () => void;
+    closeMultiEditorWindow: () => void;
+    openEditorWindow: (arg0: T) => void;
+    openMultiEditorWindow: () => void;
+    parentId: string;
+};
+import CollectionComponentClass from './collectionComponentClass.js';

package/src/manager/collectionManager/editorCollectionComponentClass.js

@@ -0,0 +1,295 @@
+import { nextTick, reactive, watch } from 'vue';
+import { check, checkMaybe } from '@vcsuite/check';
+import { WindowSlot } from '../window/windowManager.js';
+import CollectionComponentClass from './collectionComponentClass.js';
+import { createListEditAction } from '../../actions/listActions.js';
+
+/**
+ * @typedef {Omit<import("../window/windowManager.js").WindowComponentOptions,"id"|"parentId"|"slot">} EditorWindowComponentOptions
+ */
+
+/**
+ * @typedef {{
+ *   editor: EditorWindowComponentOptions|function(T):EditorWindowComponentOptions|undefined,
+ *   multiEditor?: EditorWindowComponentOptions,
+ *   selectionBased?: boolean
+ * }} EditingOptions
+ * @property {EditorWindowComponentOptions|function(T)|undefined} editor
+ * @property {EditorWindowComponentOptions} [multiEditor]
+ * @property {boolean} [selectionBased=true] - If true, editor windows are coupled to selection and editor windows are exclusive
+ * @template {Object} T
+ */
+
+/**
+ * @typedef {import("./collectionComponentClass.js").default<T> & {
+ *     getEditorWindowId: function(T):string,
+ *     getMultiEditorWindowId: function():string|undefined,
+ *     closeEditorWindow: function(T):void,
+ *     closeEditorWindows: function():void,
+ *     closeMultiEditorWindow: function():void,
+ *     openEditorWindow: function(T):void,
+ *     openMultiEditorWindow: function():void,
+ *     parentId: string,
+ * }} EditorCollectionComponentClass
+ * @template {Object} T
+ */
+
+/**
+ * A symbol added to collection component class with editor selection behaviour.
+ */
+export const isEditorCollectionComponentClass = Symbol(
+  'EditorCollectionComponentClass',
+);
+
+/**
+ * Adds select behaviour toggling editor or multi-editor components. Two modes are distinguished:
+ * - selection based (default): editor windows are toggled on selection change. All editor windows are exclusive.
+ * - clicked based: editor windows are opened on click. Multiple editor windows can be open at the same time.
+ * @param {import("../../vcsUiApp.js").default} app
+ * @param {import("./collectionComponentClass.js").default<T>} collectionComponent
+ * @param {EditingOptions<T>} editingOptions
+ * @param {string} [parentId='category-manager'] - windowId of window with CollectionComponent
+ * @template {Object|import("@vcmap/core").VcsObject} T
+ * @returns {EditorCollectionComponentClass<T>}
+ */
+export function makeEditorCollectionComponentClass(
+  app,
+  collectionComponent,
+  editingOptions,
+  parentId = 'category-manager',
+) {
+  check(collectionComponent, CollectionComponentClass);
+  check(editingOptions.editor, [Object, Function]);
+  checkMaybe(editingOptions.multiEditor, Object);
+
+  const editorCollectionComponent =
+    /** @type {EditorCollectionComponentClass} */ collectionComponent;
+
+  if (!editorCollectionComponent.selectable.value) {
+    editorCollectionComponent.selectable.value = true;
+  }
+
+  if (editorCollectionComponent[isEditorCollectionComponentClass]) {
+    throw new Error(
+      'Cannot transform collectionComponentClass, since it is already an EditorCollectionComponentClass',
+    );
+  }
+  editorCollectionComponent[isEditorCollectionComponentClass] = true;
+
+  const {
+    editor,
+    multiEditor = undefined,
+    selectionBased = true,
+  } = editingOptions;
+  const keyProperty = editorCollectionComponent.collection.uniqueKey;
+  const exclusiveEditorId = `${editorCollectionComponent.id}-editor`;
+  const multiEditorId = `${editorCollectionComponent.id}-multi-editor`;
+
+  /**
+   * @param {import("collectionComponentClass.js").CollectionComponentListItem} listItem
+   * @returns {T}
+   */
+  function getItemForListItem(listItem) {
+    return editorCollectionComponent.collection.getByKey(listItem.name);
+  }
+
+  /**
+   * @param {T} item
+   * @returns {string}
+   */
+  function getEditorWindowId(item) {
+    if (selectionBased) {
+      return exclusiveEditorId;
+    }
+    return `${exclusiveEditorId}-${item[keyProperty]}`;
+  }
+
+  /**
+   * @returns {string|undefined}
+   */
+  function getMultiEditorWindowId() {
+    if (multiEditor) {
+      return multiEditorId;
+    }
+    return undefined;
+  }
+
+  /**
+   * @param {T} item
+   * @returns {EditorWindowComponentOptions}
+   */
+  function getEditorWindowOptions(item) {
+    return typeof editor === 'function' ? editor(item) : editor;
+  }
+
+  /**
+   * @param {T} item
+   */
+  function closeEditorWindow(item) {
+    const id = getEditorWindowId(item);
+    if (app.windowManager.has(id)) {
+      app.windowManager.remove(id);
+    }
+  }
+
+  function closeEditorWindows() {
+    app.windowManager.componentIds
+      .filter((id) => id.startsWith(exclusiveEditorId))
+      .forEach((id) => app.windowManager.remove(id));
+  }
+
+  function closeMultiEditorWindow() {
+    if (app.windowManager.has(multiEditorId)) {
+      app.windowManager.remove(multiEditorId);
+    }
+  }
+
+  /**
+   * @param {T} item
+   */
+  function openEditorWindow(item) {
+    const editorOptions = getEditorWindowOptions(item);
+    const id = getEditorWindowId(item);
+    if (editorOptions) {
+      closeMultiEditorWindow();
+      if (app.windowManager.has(id)) {
+        app.windowManager.bringWindowToTop(id);
+      } else {
+        app.windowManager.add(
+          {
+            ...editorOptions,
+            id,
+            slot: WindowSlot.DYNAMIC_CHILD,
+            parentId,
+          },
+          editorCollectionComponent.owner,
+        );
+      }
+    }
+  }
+
+  function openMultiEditorWindow() {
+    if (multiEditor) {
+      closeEditorWindows();
+      if (app.windowManager.has(multiEditorId)) {
+        app.windowManager.bringWindowToTop(multiEditorId);
+      } else {
+        app.windowManager.add(
+          {
+            ...multiEditor,
+            id: multiEditorId,
+            slot: WindowSlot.DYNAMIC_CHILD,
+            parentId,
+          },
+          editorCollectionComponent.owner,
+        );
+      }
+    }
+  }
+
+  const selectionWatcher = watch(
+    editorCollectionComponent.selection,
+    async (selection, previous) => {
+      if (selection.length > 1) {
+        closeEditorWindows();
+      } else if (selection.length === 1 && previous.indexOf(selection[0]) < 0) {
+        if (selectionBased) {
+          // we need wait with opening the new window otherwise the editor will not be rerendered.
+          closeEditorWindows();
+          await nextTick();
+        }
+        openEditorWindow(getItemForListItem(selection[0]));
+      } else if (selection.length === 0) {
+        if (selectionBased) {
+          closeEditorWindows();
+        }
+        closeMultiEditorWindow();
+      }
+    },
+  );
+
+  const itemRemovedListener =
+    editorCollectionComponent.collection.removed.addEventListener(
+      closeEditorWindow,
+    );
+
+  editorCollectionComponent.addItemMapping({
+    predicate: (item) => !!getEditorWindowOptions(item),
+    mappingFunction: (item, c, listItem) => {
+      listItem.clickedCallbacks.push((event) => {
+        if (!(event.shiftKey || event.ctrlKey)) {
+          if (editorCollectionComponent.selection.value.length > 1) {
+            openEditorWindow(item);
+          }
+          if (
+            !selectionBased &&
+            editorCollectionComponent.selection.value.length === 1 &&
+            editorCollectionComponent.selection.value[0] === listItem
+          ) {
+            closeEditorWindow(item);
+          }
+        }
+      });
+
+      const editItemAction = {
+        name: 'list.editItem',
+        async callback() {
+          if (selectionBased) {
+            closeEditorWindows();
+            await nextTick();
+            collectionComponent.selection.value = [listItem];
+          } else {
+            collectionComponent.selection.value = [];
+          }
+          openEditorWindow(item);
+        },
+        weight: 10,
+      };
+      listItem.actions.push(editItemAction);
+    },
+    owner: editorCollectionComponent.owner,
+  });
+
+  let multiEditorDestroy = () => {};
+
+  if (multiEditor) {
+    const { action, destroy } = createListEditAction(
+      editorCollectionComponent.selection,
+      openMultiEditorWindow,
+      app.windowManager,
+      editorCollectionComponent.owner,
+      getMultiEditorWindowId(),
+    );
+
+    editorCollectionComponent.addActions([
+      {
+        action: reactive(action),
+        owner: editorCollectionComponent.owner,
+        weight: 101,
+      },
+    ]);
+    multiEditorDestroy = destroy;
+  }
+
+  editorCollectionComponent.getEditorWindowId = getEditorWindowId;
+  editorCollectionComponent.getMultiEditorWindowId = getMultiEditorWindowId;
+  editorCollectionComponent.closeEditorWindow = closeEditorWindow;
+  editorCollectionComponent.closeEditorWindows = closeEditorWindows;
+  editorCollectionComponent.closeMultiEditorWindow = closeMultiEditorWindow;
+  editorCollectionComponent.openEditorWindow = openEditorWindow;
+  editorCollectionComponent.openMultiEditorWindow = openMultiEditorWindow;
+  editorCollectionComponent.parentId = parentId;
+
+  const originalDestroy = editorCollectionComponent.destroy.bind(
+    editorCollectionComponent,
+  );
+
+  editorCollectionComponent.destroy = function destroy() {
+    originalDestroy();
+    selectionWatcher();
+    itemRemovedListener();
+    multiEditorDestroy();
+  };
+
+  return editorCollectionComponent;
+}

package/src/manager/contextMenu/ContextMenuComponent.vue.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @type {string}
+ */
+export const contextMenuWindowId: string;
+declare const _default: import("vue").DefineComponent<{
+    actions: {
+        type: ArrayConstructor;
+        required: true;
+    };
+}, {
+    close: () => void;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    actions: {
+        type: ArrayConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/src/manager/contextMenu/contextMenuInteraction.d.ts

@@ -0,0 +1,24 @@
+export default ContextMenuInteraction;
+/**
+ * Class to call a callback on right click and a callback on any other click
+ * @class
+ * @extends {AbstractInteraction}
+ */
+declare class ContextMenuInteraction extends AbstractInteraction {
+    /**
+     * @param {function(import("@vcmap/core").InteractionEvent):Promise<void>} rightClick - the right click callback, called on right click only
+     * @param {function(import("@vcmap/core").InteractionEvent):Promise<void>} clear - the clear callback
+     */
+    constructor(rightClick: (arg0: import("@vcmap/core").InteractionEvent) => Promise<void>, clear: (arg0: import("@vcmap/core").InteractionEvent) => Promise<void>);
+    /**
+     * @type {function(import("@vcmap/core").InteractionEvent): Promise<void>}
+     * @private
+     */
+    private _clear;
+    /**
+     * @type {function(import("@vcmap/core").InteractionEvent): Promise<void>}
+     * @private
+     */
+    private _rightClick;
+}
+import { AbstractInteraction } from '@vcmap/core';