@vcmap/ui 5.0.0-rc.22 → 5.0.0-rc.24

package/src/manager/categoryManager/categoryManager.js

@@ -1,8 +1,11 @@
 import { reactive } from 'vue';
-import { contextIdSymbol, IndexedCollection, VcsEvent } from '@vcmap/core';
+import { moduleIdSymbol, IndexedCollection, VcsEvent } from '@vcmap/core';
 import { check } from '@vcsuite/check';
 import { sortByOwner } from '../navbarManager.js';
-import { validateAction, validateActions } from '../../components/lists/VcsActionList.vue';
+import {
+  validateAction,
+  validateActions,
+} from '../../components/lists/VcsActionList.vue';
 
 /**
  * @callback MappingFunction
@@ -35,6 +38,7 @@ import { validateAction, validateActions } from '../../components/lists/VcsActio
  * @property {string} title
  * @property {Array<VcsAction>} actions
  * @property {Array<VcsListItem & { destroy: (function():void|undefined) }>} items
+ * @property {boolean} draggable
  * @property {boolean} selectable
  * @property {boolean} singleSelect
  * @property {Array<VcsListItem>} selection
@@ -44,6 +48,7 @@ import { validateAction, validateActions } from '../../components/lists/VcsActio
 /**
  * @typedef {Object} ManagedCategoryOptions
  * @property {string} categoryName
+ * @property {boolean} [draggable] - only allowed for categories with underlying IndexedCollections
  * @property {boolean} [selectable]
  * @property {boolean} [singleSelect]
  * @property {Array<VcsAction>} [actions]
@@ -61,7 +66,9 @@ import { validateAction, validateActions } from '../../components/lists/VcsActio
 function transformItem(item, category, itemMappings) {
   const keyProperty = category.collection.uniqueKey;
   const listItem = {
-    get id() { return item[keyProperty]; },
+    get id() {
+      return item[keyProperty];
+    },
     title: item?.properties?.title || item[keyProperty],
     actions: [],
   };
@@ -114,6 +121,7 @@ function reduceCategoryOptions(current, next) {
   if (next.actions?.length > 0) {
     current.actions.push(...next.actions);
   }
+  current.draggable = current.draggable ?? next.draggable;
   current.selectable = current.selectable ?? next.selectable;
   current.singleSelect = current.singleSelect ?? next.singleSelect;
   return current;
@@ -145,24 +153,26 @@ class CategoryManager {
      * @type {function():void}
      * @private
      */
-    this._dynamicContextIdListener = this._app.dynamicContextIdChanged.addEventListener((id) => {
-      this._dynamicContextId = id;
-      this._resetManagedCategories();
-    });
+    this._dynamicModuleIdListener =
+      this._app.dynamicModuleIdChanged.addEventListener((id) => {
+        this._dynamicModuleId = id;
+        this._resetManagedCategories();
+      });
 
     /**
      * @type {function():void}
      * @private
      */
-    this._appCategoriesRemovedListener = this._app.categories.removed.addEventListener((category) => {
-      this._removeCategory(category.name);
-    });
+    this._appCategoriesRemovedListener =
+      this._app.categories.removed.addEventListener((category) => {
+        this._removeCategory(category.name);
+      });
 
     /**
      * @type {string}
      * @private
      */
-    this._dynamicContextId = this._app.dynamicContextId;
+    this._dynamicModuleId = this._app.dynamicModuleId;
 
     /**
      * @type {Array<ItemMapping<*>>}
@@ -217,8 +227,9 @@ class CategoryManager {
   _handleItemMoved(item, category) {
     const managedCategory = this.get(category.name);
     if (managedCategory) {
-      const index = managedCategory.items
-        .findIndex((elem) => { return elem.id === item[category.collection.uniqueKey]; });
+      const index = managedCategory.items.findIndex((elem) => {
+        return elem.id === item[category.collection.uniqueKey];
+      });
       if (index > -1) {
         const listItem = managedCategory.items[index];
         managedCategory.items.splice(index, 1);
@@ -237,8 +248,9 @@ class CategoryManager {
   _handleItemRemoved(item, category) {
     const managedCategory = this.get(category.name);
     if (managedCategory) {
-      const index = managedCategory.items
-        .findIndex((elem) => { return elem.id === item[category.collection.uniqueKey]; });
+      const index = managedCategory.items.findIndex((elem) => {
+        return elem.id === item[category.collection.uniqueKey];
+      });
       if (index > -1) {
         const listItem = managedCategory.items[index];
         if (listItem.destroy) {
@@ -250,7 +262,7 @@ class CategoryManager {
   }
 
   /**
-   * removes all items from all categories and rebuilds the item tree depending on the ContextId
+   * removes all items from all categories and rebuilds the item tree depending on the ModuleId
    * @private
    */
   _resetManagedCategories() {
@@ -281,7 +293,7 @@ class CategoryManager {
       });
       managedCategory.items = [...category.collection]
         .filter((item) => {
-          return item[contextIdSymbol] === this._dynamicContextId;
+          return item[moduleIdSymbol] === this._dynamicModuleId;
         })
         .map((item) => {
           return transformItem(item, category, itemMappings);
@@ -301,44 +313,52 @@ class CategoryManager {
       throw new Error(`Could not find Category: ${categoryName}`);
     }
 
-    const options = [...this._managedCategoryOptions.get(category.name).values()] // does not have to be sorted, since this is the first owner
+    const options = [
+      ...this._managedCategoryOptions.get(category.name).values(),
+    ] // does not have to be sorted, since this is the first owner
       .reduce(reduceCategoryOptions, { actions: [] });
 
     const listeners = [
       category.collection.added.addEventListener((item) => {
-        if (item[contextIdSymbol] === this._dynamicContextId) {
+        if (item[moduleIdSymbol] === this._dynamicModuleId) {
           this._handleItemAdded(item, category);
         }
       }),
       category.collection.removed.addEventListener((item) => {
-        if (item[contextIdSymbol] === this._dynamicContextId) {
+        if (item[moduleIdSymbol] === this._dynamicModuleId) {
           this._handleItemRemoved(item, category);
         }
       }),
       category.collection.replaced.addEventListener((replacedEvent) => {
-        if (replacedEvent.old[contextIdSymbol] === this._dynamicContextId) {
+        if (replacedEvent.old[moduleIdSymbol] === this._dynamicModuleId) {
           this._handleItemRemoved(replacedEvent.old, category);
         }
       }),
     ];
 
     if (category.collection instanceof IndexedCollection) {
-      listeners.push(category.collection.moved.addEventListener((item) => {
-        if (item[contextIdSymbol] === this._dynamicContextId) {
-          this._handleItemMoved(item, category);
-        }
-      }));
+      listeners.push(
+        category.collection.moved.addEventListener((item) => {
+          if (item[moduleIdSymbol] === this._dynamicModuleId) {
+            this._handleItemMoved(item, category);
+          }
+        }),
+      );
     }
 
     /** @type {ManagedCategory} */
     const managedCategory = reactive({
       ...options,
-      get categoryName() { return category.name; },
+      get categoryName() {
+        return category.name;
+      },
       selection: [],
       title: category.title,
       items: [],
       destroy() {
-        listeners.forEach((cb) => { cb(); });
+        listeners.forEach((cb) => {
+          cb();
+        });
         this.items.forEach((item) => {
           if (item.destroy) {
             item.destroy();
@@ -365,9 +385,13 @@ class CategoryManager {
     if (this._managedCategoryOptions.has(categoryName)) {
       const managedCategory = this.get(categoryName);
       if (managedCategory) {
-        const pluginNames = [...this._app.plugins].map(p => p.name);
-        const options = [...this._managedCategoryOptions.get(categoryName).entries()]
-          .sort(([ownerA], [ownerB]) => sortByOwner(ownerA, ownerB, pluginNames))
+        const pluginNames = [...this._app.plugins].map((p) => p.name);
+        const options = [
+          ...this._managedCategoryOptions.get(categoryName).entries(),
+        ]
+          .sort(([ownerA], [ownerB]) =>
+            sortByOwner(ownerA, ownerB, pluginNames),
+          )
           .map(([, value]) => value)
           .reduce(reduceCategoryOptions, { actions: [] });
         Object.assign(managedCategory, options);
@@ -404,7 +428,10 @@ class CategoryManager {
     check(owner, [String, Symbol]);
 
     const { categoryName } = managedCategoryOptions;
-    if (managedCategoryOptions.actions && !validateActions(managedCategoryOptions.actions)) {
+    if (
+      managedCategoryOptions.actions &&
+      !validateActions(managedCategoryOptions.actions)
+    ) {
       throw new Error('Invalid actions Array');
     }
     if (!this._app.categories.hasKey(categoryName)) {
@@ -412,13 +439,21 @@ class CategoryManager {
     }
 
     if (this._managedCategoryOptions.get(categoryName)?.has(owner)) {
-      throw new Error(`Category has already been added by this owner: ${categoryName}, ${owner}`);
+      throw new Error(
+        `Category has already been added by this owner: ${categoryName}, ${owner}`,
+      );
+    }
+    if (managedCategoryOptions.draggable) {
+      const { collection } = this._app.categories.getByKey(categoryName);
+      managedCategoryOptions.draggable =
+        collection instanceof IndexedCollection;
     }
 
     /** @type {ManagedCategoryOptions} */
     const clonedOptions = {
       categoryName,
       actions: managedCategoryOptions.actions?.slice?.() ?? [],
+      draggable: managedCategoryOptions.draggable,
       selectable: managedCategoryOptions.selectable,
       singleSelect: managedCategoryOptions.singleSelect,
     };
@@ -489,10 +524,17 @@ class CategoryManager {
     if (categoryNames.length === 0) {
       throw new Error('Provide at least one categoryName');
     }
-    if (this._itemMappings.find((itemMapping) => {
-      return itemMapping.mappingFunction === mappingFunction && itemMapping.owner === owner;
-    })) {
-      throw new Error('Could not add MappingFunction, the MappingFunction is already under management');
+    if (
+      this._itemMappings.find((itemMapping) => {
+        return (
+          itemMapping.mappingFunction === mappingFunction &&
+          itemMapping.owner === owner
+        );
+      })
+    ) {
+      throw new Error(
+        'Could not add MappingFunction, the MappingFunction is already under management',
+      );
     }
     /** @type {ItemMapping} */
     const itemMapping = {
@@ -519,7 +561,10 @@ class CategoryManager {
     check(owner, [String, Symbol]);
     const affectedCategories = [];
     this._itemMappings = this._itemMappings.filter((itemMapping) => {
-      if (itemMapping.mappingFunction === mappingFunction && itemMapping.owner === owner) {
+      if (
+        itemMapping.mappingFunction === mappingFunction &&
+        itemMapping.owner === owner
+      ) {
         affectedCategories.push(...itemMapping.categoryNames);
         return false;
       }
@@ -552,10 +597,9 @@ class CategoryManager {
         this._removeCategory(categoryName);
       }
     });
-    this._itemMappings = this._itemMappings
-      .filter((itemMapping) => {
-        return itemMapping.owner !== owner;
-      });
+    this._itemMappings = this._itemMappings.filter((itemMapping) => {
+      return itemMapping.owner !== owner;
+    });
     this._resetManagedCategories();
   }
 
@@ -563,8 +607,9 @@ class CategoryManager {
    * Clears the manager of all added categories and item mappings
    */
   clear() {
-    [...this.componentIds]
-      .forEach((categoryName) => { this._removeCategory(categoryName); });
+    [...this.componentIds].forEach((categoryName) => {
+      this._removeCategory(categoryName);
+    });
     this._itemMappings = [];
   }
 
@@ -572,7 +617,7 @@ class CategoryManager {
    * destroys the categoryManager, removes all Listeners and clears all Managed Categories
    */
   destroy() {
-    this._dynamicContextIdListener();
+    this._dynamicModuleIdListener();
     this._appCategoriesRemovedListener();
     this.componentIds = [];
     this._managedCategories.forEach((item) => {

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

@@ -38,11 +38,16 @@ export function sortByOwner(ownerA, ownerB, order = []) {
  * @param {function(ownerA:string, ownerB:string, order: string[]):number} [compareFn=sortByOwner] Per default components are sorted by owner: app first, then plugins
  * @returns {Array<VcsAction>}
  */
-export function getActionsByLocation(buttonComponents, location, order = [], compareFn = sortByOwner) {
+export function getActionsByLocation(
+  buttonComponents,
+  location,
+  order = [],
+  compareFn = sortByOwner,
+) {
   return [...buttonComponents]
-    .filter(b => b[locationSymbol] === location)
+    .filter((b) => b[locationSymbol] === location)
     .sort((a, b) => compareFn(a.owner, b.owner, order))
-    .map(b => b.action);
+    .map((b) => b.action);
 }
 
 /**
@@ -84,6 +89,26 @@ class NavbarManager extends ButtonManager {
     buttonComponent[locationSymbol] = location;
     return buttonComponent;
   }
+
+  /**
+   * Toggles a button of provided id by executing its callback.
+   * Use active flag to force a state to be applied.
+   * @param {string} id
+   * @param {boolean} [active]
+   */
+  toggle(id, active = undefined) {
+    check(id, String);
+    if (this.has(id)) {
+      const { action } = this.get(id);
+      if (active !== undefined) {
+        if (action?.active !== active) {
+          action.callback();
+        }
+      } else if (action) {
+        action.callback();
+      }
+    }
+  }
 }
 
 export default NavbarManager;

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -9,9 +9,10 @@
     >
       <template #activator="{ on, attrs }">
         <VcsButton
-          class="vcs-toolbox-toogle-button"
+          class="vcs-toolbox-toggle-button"
           width="48"
           :icon="group.icon"
+          :disabled="group.disabled"
           :tooltip="group.title"
           :active="open || hasActiveAction"
           :color="hasActiveAction ? 'primary' : ''"
@@ -19,7 +20,7 @@
           v-on="on"
           large
         >
-          <v-icon v-text="open ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
+          <v-icon>{{ open ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
         </VcsButton>
       </template>
 
@@ -33,13 +34,14 @@
         <v-toolbar-items class="w-full">
           <div class="d-flex align-center justify-space-between w-full mx-1">
             <VcsButton
-              v-for="({id, action}) in orderedButtons"
+              v-for="{ id, action } in orderedButtons"
               :key="id"
               :tooltip="action.title"
               :icon="action.icon"
+              :disabled="action.disabled"
               :active="action.active"
               @click="action.callback($event)"
-              v-bind="{...$attrs}"
+              v-bind="{ ...$attrs }"
               large
             />
           </div>
@@ -49,24 +51,19 @@
   </div>
 </template>
 <style lang="scss">
-.vcs-toolbox-2 {
-  .v-toolbar__content {
-    padding: 0;
+  .vcs-toolbox-2 {
+    .v-toolbar__content {
+      padding: 0;
+    }
   }
-}
 
-.marginToTop {
-  margin-top: 3px;
-}
+  .marginToTop {
+    margin-top: 3px;
+  }
 </style>
 <script>
   import { computed, ref } from 'vue';
-  import {
-    VMenu,
-    VIcon,
-    VToolbar,
-    VToolbarItems,
-  } from 'vuetify/lib';
+  import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/lib';
   import VcsButton from '../../components/buttons/VcsButton.vue';
   import { getComponentsByOrder } from './toolboxManager.js';
 
@@ -102,10 +99,14 @@
       const buttons = computed(() => {
         const { buttonManager } = props.group;
         const buttonIds = ref(buttonManager.componentIds);
-        return buttonIds.value.map(id => buttonManager.get(id));
+        return buttonIds.value.map((id) => buttonManager.get(id));
       });
-      const orderedButtons = computed(() => getComponentsByOrder(buttons.value));
-      const hasActiveAction = computed(() => orderedButtons.value.some(a => a.action.active));
+      const orderedButtons = computed(() =>
+        getComponentsByOrder(buttons.value),
+      );
+      const hasActiveAction = computed(() =>
+        orderedButtons.value.some((a) => a.action.active),
+      );
 
       /**
        * v-menu auto prop is not working as expected.
@@ -115,7 +116,7 @@
       const nudgeLeft = computed(() => {
         const toolboxBtnWidth = 42 + 8; // with padding
         const menuBtnWidth = 48;
-        return (buttons.value.length * (toolboxBtnWidth / 2)) - (menuBtnWidth / 2);
+        return buttons.value.length * (toolboxBtnWidth / 2) - menuBtnWidth / 2;
       });
 
       return {