@vcmap/ui 5.0.0-rc.24 → 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/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,18 +35,19 @@ 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,
+  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))
+    .sort(compareFn)
     .map((b) => b.action);
 }
 

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -8,7 +8,7 @@
       z-index="0"
     >
       <template #activator="{ on, attrs }">
-        <VcsButton
+        <VcsToolButton
           class="vcs-toolbox-toggle-button"
           width="48"
           :icon="group.icon"
@@ -18,10 +18,9 @@
           :color="hasActiveAction ? 'primary' : ''"
           v-bind="attrs"
           v-on="on"
-          large
         >
           <v-icon>{{ open ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
-        </VcsButton>
+        </VcsToolButton>
       </template>
 
       <v-toolbar
@@ -33,7 +32,7 @@
       >
         <v-toolbar-items class="w-full">
           <div class="d-flex align-center justify-space-between w-full mx-1">
-            <VcsButton
+            <VcsToolButton
               v-for="{ id, action } in orderedButtons"
               :key="id"
               :tooltip="action.title"
@@ -42,7 +41,6 @@
               :active="action.active"
               @click="action.callback($event)"
               v-bind="{ ...$attrs }"
-              large
             />
           </div>
         </v-toolbar-items>
@@ -64,7 +62,7 @@
 <script>
   import { computed, ref } from 'vue';
   import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/lib';
-  import VcsButton from '../../components/buttons/VcsButton.vue';
+  import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
   import { getComponentsByOrder } from './toolboxManager.js';
 
   /**
@@ -81,7 +79,7 @@
   export default {
     name: 'ToolboxActionGroup',
     components: {
-      VcsButton,
+      VcsToolButton,
       VMenu,
       VIcon,
       VToolbar,

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -4,7 +4,7 @@
     :class="{ 'vcs-toolbox-action-select-button--active': open }"
     style="width: fit-content"
   >
-    <VcsButton
+    <VcsToolButton
       :key="group.action.tools[group.action.currentIndex].name"
       :tooltip="group.action.tools[group.action.currentIndex].title"
       :icon="group.action.tools[group.action.currentIndex].icon"
@@ -15,7 +15,6 @@
       class="vcs-toolbox-action-selected"
       :min-width="32"
       :width="32"
-      large
     />
     <v-menu
       v-model="open"
@@ -25,7 +24,7 @@
       z-index="0"
     >
       <template #activator="{ on, attrs }">
-        <VcsButton
+        <VcsToolButton
           :tooltip="group.action.title"
           :disabled="group.action.disabled"
           v-bind="attrs"
@@ -33,10 +32,9 @@
           class="vcs-toolbox-action-select"
           :min-width="16"
           :width="16"
-          large
         >
           <v-icon>{{ open ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
-        </VcsButton>
+        </VcsToolButton>
       </template>
 
       <v-toolbar
@@ -47,7 +45,7 @@
       >
         <v-toolbar-items class="w-full">
           <div class="d-flex align-center justify-space-between w-full mx-1">
-            <VcsButton
+            <VcsToolButton
               v-for="(item, index) in group.action.tools"
               :key="`${item.name}-${index}`"
               :tooltip="item.title"
@@ -55,7 +53,6 @@
               :disabled="item.disabled"
               @click="group.action.selected(index)"
               v-bind="{ ...$attrs }"
-              large
             />
           </div>
         </v-toolbar-items>
@@ -98,7 +95,7 @@
 <script>
   import { ref, computed } from 'vue';
   import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/lib';
-  import VcsButton from '../../components/buttons/VcsButton.vue';
+  import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
 
   /**
    * @description
@@ -109,7 +106,7 @@
   export default {
     name: 'ToolboxActionSelect',
     components: {
-      VcsButton,
+      VcsToolButton,
       VMenu,
       VIcon,
       VToolbar,

package/src/manager/toolbox/ToolboxManager.vue

@@ -25,7 +25,7 @@
           :group="group"
           @toggle="(selectOpen) => (open = selectOpen)"
         />
-        <VcsButton
+        <VcsToolButton
           v-else
           :tooltip="group.action.title"
           :icon="group.action.icon"
@@ -34,7 +34,6 @@
           :disabled="group.action.disabled"
           @click.stop="group.action.callback($event)"
           v-bind="{ ...$attrs }"
-          large
         />
       </div>
     </v-toolbar-items>
@@ -72,7 +71,7 @@
   import { getComponentsByOrder, ToolboxType } from './toolboxManager.js';
   import ToolboxActionSelect from './SelectToolboxComponent.vue';
   import ToolboxActionGroup from './GroupToolboxComponent.vue';
-  import VcsButton from '../../components/buttons/VcsButton.vue';
+  import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
 
   /**
    * @typedef {Object} ToolboxButtonGroup
@@ -100,7 +99,7 @@
     components: {
       ToolboxActionSelect,
       ToolboxActionGroup,
-      VcsButton,
+      VcsToolButton,
       VToolbar,
       VToolbarItems,
     },
@@ -146,7 +145,7 @@
       };
 
       function handleToolboxButton() {
-        if (groups.value.length > 0) {
+        if (orderedGroups.value.length > 0) {
           if (!app.navbarManager.has('toolbox')) {
             app.navbarManager.add(
               {

package/src/manager/window/WindowComponentHeader.vue

@@ -23,14 +23,12 @@
         <VcsActionButtonList
           :actions="windowState.headerActions"
           :overflow-count="windowState.headerActionsOverflow ?? 3"
-          small
         />
         <v-divider vertical inset class="mx-1" />
       </template>
       <VcsButton
         v-if="windowState.infoUrl"
         @click.stop="infoAction.callback()"
-        small
         :icon="infoAction.icon"
         :tooltip="infoAction.title"
         class="px-1 d-flex"
@@ -38,14 +36,12 @@
       <VcsButton
         v-if="isDockable"
         @click.stop="pin"
-        small
         icon="mdi-pin"
         tooltip="components.pin"
         class="px-1 d-flex"
       />
       <VcsButton
         @click.stop="close"
-        small
         icon="mdi-close-thick"
         tooltip="components.close"
         class="d-flex"