@vcmap/ui 5.0.0-rc.23 → 5.0.0-rc.25

package/src/manager/collectionManager/collectionManager.js

@@ -0,0 +1,432 @@
+import { VcsEvent, Collection } from '@vcmap/core';
+import { check, checkMaybe } from '@vcsuite/check';
+import { validateActions } from '../../components/lists/VcsActionList.vue';
+import CollectionComponent from './collectionComponent.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
+ * @template {Object} T
+ */
+
+/**
+ * @callback PredicateFunction
+ * @param {T} item
+ * @param {CollectionComponent<T>} collectionComponent
+ * @returns {boolean}
+ * @template {Object} T
+ */
+
+/**
+ * @typedef {Object} ItemMapping
+ * @property {PredicateFunction<T>|undefined} predicate
+ * @property {MappingFunction<T>} mappingFunction
+ * @property {string | symbol} owner
+ * @template T
+ */
+
+/**
+ * @typedef {Object} ItemFilter
+ * @property {PredicateFunction<T>} filterFunction
+ * @property {string | symbol} owner
+ * @template T
+ */
+
+/**
+ * @typedef {Object} OwnedAction
+ * @property {VcsAction} action
+ * @property {number} [weight=0] Optional weight affecting the displaying order
+ * @property {string | symbol} owner
+ */
+
+/**
+ * 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>}
+ */
+class CollectionManager {
+  constructor() {
+    /**
+     * @type {VcsEvent<CollectionComponent>}
+     */
+    this.added = new VcsEvent();
+    /**
+     * @type {VcsEvent<CollectionComponent>}
+     */
+    this.removed = new VcsEvent();
+    /**
+     * @type {Array<string>}
+     */
+    this.componentIds = [];
+    /**
+     * @type {Map<string, CollectionComponent>}
+     * @private
+     */
+    this._collectionComponents = new Map();
+
+    /**
+     * @type {Array<ItemMapping & { collectionComponentIds:Array<string> }>}
+     * @private
+     */
+    this._itemMappings = [];
+    /**
+     * @type {Array<ItemFilter & { collectionComponentIds:Array<string> }>}
+     * @private
+     */
+    this._itemFilters = [];
+    /**
+     * @type {Array<{actions:Array<VcsAction>,owner:string|symbol,collectionComponentIds:Array<string>}>}
+     * @private
+     */
+    this._actions = [];
+  }
+
+  /**
+   * @param {string} id
+   * @returns {CollectionComponent|undefined}
+   */
+  get(id) {
+    return this._collectionComponents.get(id);
+  }
+
+  /**
+   * @param {string} id
+   * @returns {boolean}
+   */
+  has(id) {
+    return this._collectionComponents.has(id);
+  }
+
+  /**
+   * @param {import("@vcmap/core").Collection} collection
+   * @returns {boolean}
+   */
+  hasCollection(collection) {
+    return [...this._collectionComponents.values()].some(
+      (c) => c.collection === collection,
+    );
+  }
+
+  /**
+   * gets all collection components corresponding to provided collection
+   * @param {import("@vcmap/core").Collection} collection
+   * @returns {CollectionComponent[]}
+   */
+  getCollection(collection) {
+    return [...this._collectionComponents.values()].filter(
+      (c) => c.collection === collection,
+    );
+  }
+
+  /**
+   * adds a collectionComponent
+   * @param {CollectionComponentOptions} collectionComponentOptions
+   * @param {string|symbol} owner
+   * @returns {CollectionComponent}
+   */
+  add(collectionComponentOptions, owner) {
+    check(collectionComponentOptions, { collection: Collection });
+    check(owner, [String, Symbol]);
+
+    if (
+      collectionComponentOptions.id &&
+      this.has(collectionComponentOptions.id)
+    ) {
+      throw new Error(
+        `A collection component with id ${collectionComponentOptions.id} has already been registered.`,
+      );
+    }
+
+    const collectionComponent = new CollectionComponent(
+      collectionComponentOptions,
+      owner,
+    );
+    this._collectionComponents.set(collectionComponent.id, collectionComponent);
+    this.componentIds.push(collectionComponent.id);
+
+    const filterIds = ({ collectionComponentIds }) =>
+      collectionComponentIds.includes(collectionComponent.id) ||
+      collectionComponentIds.length === 0;
+
+    this._itemMappings
+      .filter(filterIds)
+      .forEach(({ collectionComponentIds, ...itemMapping }) =>
+        collectionComponent.addItemMapping(itemMapping),
+      );
+    this._itemFilters
+      .filter(filterIds)
+      .forEach(({ collectionComponentIds, ...itemFilter }) =>
+        collectionComponent.addItemFilter(itemFilter),
+      );
+    this._actions
+      .filter(filterIds)
+      .forEach(({ actions, owner: actionOwner }) =>
+        collectionComponent.addActions(
+          actions.map(({ action }) => ({ action, actionOwner })),
+        ),
+      );
+
+    this.added.raiseEvent(collectionComponent);
+    return collectionComponent;
+  }
+
+  /**
+   * removes a CollectionComponent, Component will not be rendered anymore and will be destroyed. Add CollectionComponent again
+   * to show the component again
+   * @param {string} id
+   */
+  remove(id) {
+    check(id, String);
+    const collectionComponent = this._collectionComponents.get(id);
+    if (collectionComponent) {
+      const index = this.componentIds.indexOf(id);
+      this.componentIds.splice(index, 1);
+      this._collectionComponents.delete(id);
+      this.removed.raiseEvent(collectionComponent);
+      collectionComponent.destroy();
+    }
+  }
+
+  /**
+   * Gets affected ids for adding mapping and filter functions or actions.
+   * If no ids are provided, ids of all managed collectionComponents are returned.
+   * @param {Array<string>} [collectionComponentIds]
+   * @returns {string[]}
+   * @private
+   */
+  _getAffectedIds(collectionComponentIds) {
+    return collectionComponentIds.length > 0
+      ? collectionComponentIds
+      : [...this._collectionComponents.keys()];
+  }
+
+  /**
+   * 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 {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.
+   */
+  addMappingFunction(
+    predicate,
+    mappingFunction,
+    owner,
+    collectionComponentIds = [],
+  ) {
+    checkMaybe(predicate, Function);
+    check(mappingFunction, Function);
+    check(owner, [String, Symbol]);
+    check(collectionComponentIds, [String]);
+
+    /** @type {ItemMapping} */
+    const itemMapping = {
+      predicate,
+      mappingFunction,
+      owner,
+    };
+
+    if (
+      !this._itemMappings.find((cached) => {
+        return (
+          cached.mappingFunction === mappingFunction && cached.owner === owner
+        );
+      })
+    ) {
+      this._getAffectedIds(collectionComponentIds).forEach((id) => {
+        const component = this._collectionComponents.get(id);
+        if (component) {
+          component.addItemMapping(itemMapping);
+        }
+      });
+      this._itemMappings.push({
+        ...itemMapping,
+        collectionComponentIds,
+      });
+    }
+  }
+
+  /**
+   * removes the given mappingFunction
+   * @param {MappingFunction} mappingFunction
+   * @param {string | symbol} owner
+   */
+  removeMappingFunction(mappingFunction, owner) {
+    check(mappingFunction, Function);
+    check(owner, [String, Symbol]);
+
+    [...this._collectionComponents.values()].forEach((collectionComponent) => {
+      collectionComponent.removeItemMapping({ mappingFunction, owner });
+    });
+    this._itemMappings = this._itemMappings.filter(
+      (cached) =>
+        !(cached.mappingFunction === mappingFunction && cached.owner === owner),
+    );
+  }
+
+  /**
+   * @param {PredicateFunction} 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.
+   */
+  addFilterFunction(filterFunction, owner, collectionComponentIds = []) {
+    check(filterFunction, Function);
+    check(owner, [String, Symbol]);
+    check(collectionComponentIds, [String]);
+
+    /** @type {ItemFilter} */
+    const itemFilter = {
+      filterFunction,
+      owner,
+    };
+
+    if (
+      !this._itemFilters.find((cached) => {
+        return (
+          cached.filterFunction === filterFunction && cached.owner === owner
+        );
+      })
+    ) {
+      this._getAffectedIds(collectionComponentIds).forEach((id) => {
+        const component = this._collectionComponents.get(id);
+        if (component) {
+          component.addItemFilter(itemFilter);
+        }
+      });
+      this._itemFilters.push({
+        ...itemFilter,
+        collectionComponentIds,
+      });
+    }
+  }
+
+  /**
+   * removes the given filterFunction
+   * @param {PredicateFunction} filterFunction
+   * @param {string | symbol} owner
+   */
+  removeFilterFunction(filterFunction, owner) {
+    check(filterFunction, Function);
+    check(owner, [String, Symbol]);
+
+    [...this._collectionComponents.values()].forEach((collectionComponent) => {
+      collectionComponent.removeItemFilter({ filterFunction, owner });
+    });
+    this._itemFilters = this._itemFilters.filter(
+      (cached) =>
+        !(cached.filterFunction === filterFunction && cached.owner === owner),
+    );
+  }
+
+  /**
+   * add multiple actions owned by the same owner
+   * @param {Array<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.
+   */
+  addActions(actions, owner, collectionComponentIds = []) {
+    check(owner, [String, Symbol]);
+    check(collectionComponentIds, [String]);
+
+    if (!validateActions(actions)) {
+      throw new Error('Invalid actions Array');
+    }
+
+    if (
+      !this._actions.find(
+        (cached) => cached.actions === actions && cached.owner === owner,
+      )
+    ) {
+      const ownedActions = actions.map((action) => ({ action, owner }));
+      this._getAffectedIds(collectionComponentIds).forEach((id) => {
+        const component = this._collectionComponents.get(id);
+        if (component) {
+          component.addActions(ownedActions);
+        }
+      });
+      this._actions.push({
+        actions,
+        owner,
+        collectionComponentIds,
+      });
+    }
+  }
+
+  /**
+   * @param {Array<VcsAction>} actions
+   * @param {string | symbol} owner
+   */
+  removeActions(actions, owner) {
+    check(owner, [String, Symbol]);
+
+    const ownedActions = actions.map((action) => ({ action, owner }));
+    [...this._collectionComponents.values()].forEach((collectionComponent) => {
+      collectionComponent.removeActions(ownedActions);
+    });
+    this._actions = this._actions.filter(
+      (cached) => !(cached.actions === actions && cached.owner === owner),
+    );
+  }
+
+  /**
+   * removes managed collection components or actions and mapping/ filter functions belonging to the given owner.
+   * @param {string | symbol} owner
+   */
+  removeOwner(owner) {
+    check(owner, [String, Symbol]);
+
+    [...this._collectionComponents.values()].forEach((collectionComponent) => {
+      if (collectionComponent.owner === owner) {
+        this.remove(collectionComponent.id);
+        collectionComponent.destroy();
+      } else {
+        collectionComponent.removeOwner(owner);
+      }
+    });
+
+    this._itemMappings = this._itemMappings.filter((itemMapping) => {
+      return itemMapping.owner !== owner;
+    });
+    this._itemFilters = this._itemFilters.filter((itemFilter) => {
+      return itemFilter.owner !== owner;
+    });
+    this._actions = this._actions.filter(
+      (ownedAction) => ownedAction.owner !== owner,
+    );
+  }
+
+  /**
+   * Resets all collectionComponents
+   */
+  reset() {
+    [...this._collectionComponents.values()].forEach((collectionComponent) => {
+      collectionComponent.reset();
+    });
+  }
+
+  /**
+   * Clears the manager of all added categories and item mappings
+   */
+  clear() {
+    [...this.componentIds].forEach((id) => {
+      this.remove(id);
+    });
+    this._itemMappings = [];
+    this._itemFilters = [];
+    this._actions = [];
+  }
+
+  /**
+   * destroys the categoryManager, removes all Listeners and clears all Managed Categories
+   */
+  destroy() {
+    this.clear();
+    this.added.destroy();
+    this.removed.destroy();
+  }
+}
+
+export default CollectionManager;

package/src/manager/contextMenu/contextMenuComponent.vue

@@ -1,9 +1,6 @@
 <template>
   <div @click.stop="close">
-    <VcsActionList
-      :actions="actions"
-      :show-icon="true"
-    />
+    <VcsActionList :actions="actions" :show-icon="true" />
   </div>
 </template>
 
@@ -39,5 +36,4 @@
   };
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>

package/src/manager/contextMenu/contextMenuInteraction.js

@@ -1,4 +1,9 @@
-import { AbstractInteraction, EventType, ModificationKeyType, PointerKeyType } from '@vcmap/core';
+import {
+  AbstractInteraction,
+  EventType,
+  ModificationKeyType,
+  PointerKeyType,
+} from '@vcmap/core';
 
 /**
  * Class to call a callback on right click and a callback on any other click

package/src/manager/contextMenu/contextMenuManager.js

@@ -6,7 +6,9 @@ import { vcsAppSymbol } from '../../pluginHelper.js';
 import { validateAction } from '../../components/lists/VcsActionList.vue';
 import { WindowSlot } from '../window/windowManager.js';
 import { getFittedWindowPositionOptionsFromMapEvent } from '../window/windowHelper.js';
-import ContextMenuComponent, { contextMenuWindowId } from './contextMenuComponent.vue';
+import ContextMenuComponent, {
+  contextMenuWindowId,
+} from './contextMenuComponent.vue';
 import { sortByOwner } from '../navbarManager.js';
 
 /**
@@ -83,7 +85,8 @@ class ContextMenuManager {
 
   _ensureInteraction() {
     if (!this._interactionListener) {
-      this._interactionListener = this._app.maps.eventHandler.addPersistentInteraction(this._interaction);
+      this._interactionListener =
+        this._app.maps.eventHandler.addPersistentInteraction(this._interaction);
     }
   }
 
@@ -102,10 +105,12 @@ class ContextMenuManager {
    */
   async _handleRightClick(event) {
     this.clear();
-    const actionArrays = await Promise.all(this._eventHandlers.map(({ handler }) => handler(event)));
+    const actionArrays = await Promise.all(
+      this._eventHandlers.map(({ handler }) => handler(event)),
+    );
     const actions = actionArrays
-      .filter(i => Array.isArray(i))
-      .flatMap(i => i)
+      .filter((i) => Array.isArray(i))
+      .flatMap((i) => i)
       .filter(validateAction);
 
     if (actions.length > 0) {
@@ -115,25 +120,29 @@ class ContextMenuManager {
         actions.length * 32,
         this._app.maps.target,
       );
-      if (position.left) { // ensure we nudge the window, so it does not trigger the default right click.
+      if (position.left) {
+        // ensure we nudge the window, so it does not trigger the default right click.
         position.left += 1;
       } else {
         position.right += 1;
       }
 
-      this._app.windowManager.add({
-        id: contextMenuWindowId,
-        component: ContextMenuComponent,
-        state: {
-          hideHeader: true,
-        },
-        props: {
-          actions,
-          showIcon: true,
+      this._app.windowManager.add(
+        {
+          id: contextMenuWindowId,
+          component: ContextMenuComponent,
+          state: {
+            hideHeader: true,
+          },
+          props: {
+            actions,
+            showIcon: true,
+          },
+          position,
+          slow: WindowSlot.DETACHED,
         },
-        position,
-        slow: WindowSlot.DETACHED,
-      }, vcsAppSymbol);
+        vcsAppSymbol,
+      );
 
       this._setupListeners();
     }
@@ -151,7 +160,7 @@ class ContextMenuManager {
 
     this._ensureInteraction();
     this._eventHandlers.push({ owner, handler });
-    const order = [...this._app.plugins].map(p => p.name);
+    const order = [...this._app.plugins].map((p) => p.name);
     this._eventHandlers.sort((a, b) => {
       return sortByOwner(a.owner, b.owner, order);
     });
@@ -162,7 +171,9 @@ class ContextMenuManager {
    * @param {function(import("@vcmap/core").InteractionEvent):Promise<Array<VcsAction>>|Array<VcsAction>} handler
    */
   removeHandler(handler) {
-    this._eventHandlers = this._eventHandlers.filter(({ handler: itemHandler }) => itemHandler !== handler);
+    this._eventHandlers = this._eventHandlers.filter(
+      ({ handler: itemHandler }) => itemHandler !== handler,
+    );
     if (this._eventHandlers.length === 0 && this._interactionListener) {
       this._interactionListener();
       this._interactionListener = null;
@@ -174,7 +185,9 @@ class ContextMenuManager {
    * @param {string|symbol} owner
    */
   removeOwner(owner) {
-    this._eventHandlers = this._eventHandlers.filter(({ owner: handlerOwner }) => handlerOwner !== owner);
+    this._eventHandlers = this._eventHandlers.filter(
+      ({ owner: handlerOwner }) => handlerOwner !== owner,
+    );
     if (this._eventHandlers.length === 0 && this._interactionListener) {
       this._interactionListener();
       this._interactionListener = null;
@@ -185,7 +198,9 @@ class ContextMenuManager {
    * Clear any currently opened context menus
    */
   clear() {
-    this._listeners.forEach((cb) => { cb(); });
+    this._listeners.forEach((cb) => {
+      cb();
+    });
     this._listeners = [];
     this._app.windowManager.remove(contextMenuWindowId);
   }

package/src/manager/navbarManager.js

@@ -1,5 +1,5 @@
 import { check } from '@vcsuite/check';
-import ButtonManager from './buttonManager.js';
+import ButtonManager, { sortByWeight } from './buttonManager.js';
 import { vcsAppSymbol } from '../pluginHelper.js';
 
 export const locationSymbol = Symbol('location');
@@ -35,14 +35,20 @@ export function sortByOwner(ownerA, ownerB, order = []) {
  * @param {Array<ButtonComponent>} buttonComponents
  * @param {ButtonLocation} location Button render position
  * @param {string[]} [order] optional order to sort by (plugin names)
- * @param {function(ownerA:string, ownerB:string, order: string[]):number} [compareFn=sortByOwner] Per default components are sorted by owner: app first, then plugins
+ * @param {function(buttonA:ButtonComponent, buttonB:ButtonComponent):number} [compareFn=sortByOwner] Per default components are sorted by weight (highest first) and owner (app first, then plugins)
  * @returns {Array<VcsAction>}
  */
-export function getActionsByLocation(buttonComponents, location, order = [], compareFn = sortByOwner) {
+export function getActionsByLocation(
+  buttonComponents,
+  location,
+  order = [],
+  compareFn = (a, b) =>
+    sortByWeight(a.weight, b.weight) || sortByOwner(a.owner, b.owner, order),
+) {
   return [...buttonComponents]
-    .filter(b => b[locationSymbol] === location)
-    .sort((a, b) => compareFn(a.owner, b.owner, order))
-    .map(b => b.action);
+    .filter((b) => b[locationSymbol] === location)
+    .sort(compareFn)
+    .map((b) => b.action);
 }
 
 /**
@@ -93,13 +99,15 @@ class NavbarManager extends ButtonManager {
    */
   toggle(id, active = undefined) {
     check(id, String);
-    const { action } = this.get(id);
-    if (active !== undefined) {
-      if (action?.active !== active) {
+    if (this.has(id)) {
+      const { action } = this.get(id);
+      if (active !== undefined) {
+        if (action?.active !== active) {
+          action.callback();
+        }
+      } else if (action) {
         action.callback();
       }
-    } else if (action) {
-      action.callback();
     }
   }
 }