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

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);
 }
 
 /**
@@ -93,13 +98,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();
     }
   }
 }

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 {

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -2,15 +2,16 @@
   <div
     v-if="group.action"
     :class="{ 'vcs-toolbox-action-select-button--active': open }"
-    style="width:fit-content"
+    style="width: fit-content"
   >
     <VcsButton
       :key="group.action.tools[group.action.currentIndex].name"
       :tooltip="group.action.tools[group.action.currentIndex].title"
       :icon="group.action.tools[group.action.currentIndex].icon"
       :active="group.action.active"
+      :disabled="group.action.disabled"
       @click.stop="group.action.callback($event)"
-      v-bind="{...$attrs}"
+      v-bind="{ ...$attrs }"
       class="vcs-toolbox-action-selected"
       :min-width="32"
       :width="32"
@@ -26,6 +27,7 @@
       <template #activator="{ on, attrs }">
         <VcsButton
           :tooltip="group.action.title"
+          :disabled="group.action.disabled"
           v-bind="attrs"
           v-on="on"
           class="vcs-toolbox-action-select"
@@ -33,7 +35,7 @@
           :width="16"
           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>
 
@@ -50,8 +52,9 @@
               :key="`${item.name}-${index}`"
               :tooltip="item.title"
               :icon="item.icon"
+              :disabled="item.disabled"
               @click="group.action.selected(index)"
-              v-bind="{...$attrs}"
+              v-bind="{ ...$attrs }"
               large
             />
           </div>
@@ -61,45 +64,40 @@
   </div>
 </template>
 <style lang="scss">
-@import '../../styles/shades.scss';
+  @import '../../styles/shades.scss';
 
-.vcs-toolbox-action-selected > .v-btn.vcs-button--large {
-  max-width: 40px;
-}
+  .vcs-toolbox-action-selected > .v-btn.vcs-button--large {
+    max-width: 40px;
+  }
 
-.vcs-toolbox-action-select > .v-btn.vcs-button--large {
-  max-width: 8px;
-}
+  .vcs-toolbox-action-select > .v-btn.vcs-button--large {
+    max-width: 8px;
+  }
 
-.vcs-toolbox-action-select-button--active {
-  //border: 2px solid var(--v-shades-base);
-  border-radius: 4px;
-}
-.theme--light .vcs-toolbox-action-select-button--active {
-  background: map-get($shades, 'white');
-}
-.theme--dark .vcs-toolbox-action-select-button--active {
-  background: map-get($shades, 'black');
-}
+  .vcs-toolbox-action-select-button--active {
+    //border: 2px solid var(--v-shades-base);
+    border-radius: 4px;
+  }
+  .theme--light .vcs-toolbox-action-select-button--active {
+    background: map-get($shades, 'white');
+  }
+  .theme--dark .vcs-toolbox-action-select-button--active {
+    background: map-get($shades, 'black');
+  }
 
-.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 { ref, computed } 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';
 
   /**
@@ -134,7 +132,10 @@
       const nudgeLeft = computed(() => {
         const toolboxBtnWidth = 42 + 8; // with padding
         const menuBtnWidth = 16;
-        return (props.group.action.tools.length * (toolboxBtnWidth / 2)) + (menuBtnWidth / 2);
+        return (
+          props.group.action.tools.length * (toolboxBtnWidth / 2) +
+          menuBtnWidth / 2
+        );
       });
 
       return {

package/src/manager/toolbox/ToolboxManager.vue

@@ -1,6 +1,8 @@
 <template>
   <v-toolbar
-    v-if="toolboxOpen && orderedGroups.length > 0 && $vuetify.breakpoint.mdAndUp"
+    v-if="
+      toolboxOpen && orderedGroups.length > 0 && $vuetify.breakpoint.mdAndUp
+    "
     class="vcs-toolbox toolbar__secondary mx-auto v-sheet marginToTop"
     :class="{ 'rounded-b': !open }"
     :height="40"
@@ -16,12 +18,12 @@
         <ToolboxActionGroup
           v-if="group.type === ToolboxType.GROUP"
           :group="group"
-          @toggle="(groupOpen) => open = groupOpen"
+          @toggle="(groupOpen) => (open = groupOpen)"
         />
         <ToolboxActionSelect
           v-else-if="group.type === ToolboxType.SELECT"
           :group="group"
-          @toggle="(selectOpen) => open = selectOpen"
+          @toggle="(selectOpen) => (open = selectOpen)"
         />
         <VcsButton
           v-else
@@ -29,8 +31,9 @@
           :icon="group.action.icon"
           :active="group.action.active"
           :background="group.action.background"
+          :disabled="group.action.disabled"
           @click.stop="group.action.callback($event)"
-          v-bind="{...$attrs}"
+          v-bind="{ ...$attrs }"
           large
         />
       </div>
@@ -56,10 +59,9 @@
     margin-top: 2px;
   }
 
-  .v-toolbar__items > div{
+  .v-toolbar__items > div {
     gap: 8px;
     width: fit-content;
-    display: inline-block;
   }
 </style>
 
@@ -107,7 +109,9 @@
 
       const toolboxComponentIds = ref(app.toolboxManager.componentIds);
       const groups = computed(() => {
-        return toolboxComponentIds.value.map(id => app.toolboxManager.get(id));
+        return toolboxComponentIds.value.map((id) =>
+          app.toolboxManager.get(id),
+        );
       });
 
       /**
@@ -119,11 +123,15 @@
        * @returns {boolean}
        */
       function filterFunc(c) {
-        return c.type === ToolboxType.SINGLE ||
+        return (
+          c.type === ToolboxType.SINGLE ||
           c?.action?.tools?.length > 1 ||
-          c.buttonManager?.componentIds?.length > 0;
+          c.buttonManager?.componentIds?.length > 0
+        );
       }
-      const orderedGroups = computed(() => getComponentsByOrder(groups.value).filter(filterFunc));
+      const orderedGroups = computed(() =>
+        getComponentsByOrder(groups.value).filter(filterFunc),
+      );
 
       const toolboxOpen = ref(true);
       const toolboxToggleAction = {

package/src/manager/toolbox/toolboxManager.js

@@ -39,6 +39,7 @@ export const ToolboxType = {
  * @typedef {ToolboxComponentOptions} GroupToolboxComponentOptions
  * @property {string} icon - Group icon
  * @property {string} [title] - Optional group title, for dropdown
+ * @property {boolean} [disabled=false]
  */
 
 /**
@@ -58,6 +59,7 @@ export const ToolboxType = {
  * @property {string|undefined} icon
  * @property {string|undefined} title
  * @property {ButtonManager} buttonManager
+ * @property {boolean} [disabled=false]
  */
 
 /**
@@ -77,6 +79,7 @@ export const ToolboxType = {
  * @property {string} name
  * @property {string} [title]
  * @property {string} icon
+ * @property {boolean} [disabled=false]
  */
 
 /**
@@ -143,9 +146,12 @@ export function sortByOwner(compA, compB, 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<ToolboxComponent|ButtonComponent>}
  */
-export function getComponentsByOrder(components, order = [], compareFn = sortByOwner) {
-  return [...components]
-    .sort((a, b) => compareFn(a, b, order));
+export function getComponentsByOrder(
+  components,
+  order = [],
+  compareFn = sortByOwner,
+) {
+  return [...components].sort((a, b) => compareFn(a, b, order));
 }
 
 /**
@@ -155,7 +161,9 @@ export function getComponentsByOrder(components, order = [], compareFn = sortByO
  * @param {Array<ToolboxComponentOptions>} groups
  */
 export function setupDefaultGroups(toolboxManager, groups = defaultGroups) {
-  groups.forEach(toolboxComponentOptions => toolboxManager.add(toolboxComponentOptions, vcsAppSymbol));
+  groups.forEach((toolboxComponentOptions) =>
+    toolboxManager.add(toolboxComponentOptions, vcsAppSymbol),
+  );
 }
 
 /**
@@ -234,7 +242,9 @@ class ToolboxManager {
     check(owner, [String, vcsAppSymbol]);
 
     if (toolboxComponentOptions.id && this.has(toolboxComponentOptions.id)) {
-      throw new Error(`A toolGroup with id ${toolboxComponentOptions.id} has already been registered.`);
+      throw new Error(
+        `A toolGroup with id ${toolboxComponentOptions.id} has already been registered.`,
+      );
     }
     const id = toolboxComponentOptions.id || uuidv4();
     const { type } = toolboxComponentOptions;
@@ -270,11 +280,15 @@ class ToolboxManager {
         ...ActionPattern,
         selected: Function,
         currentIndex: Number,
-        tools: [{
-          name: String,
-          title: [undefined, String],
-          icon: String,
-        }],
+        disabled: [undefined, Boolean],
+        tools: [
+          {
+            name: String,
+            title: [undefined, String],
+            icon: String,
+            disabled: [undefined, Boolean],
+          },
+        ],
       });
       /**
        * @type {SelectToolboxComponent}
@@ -288,13 +302,15 @@ class ToolboxManager {
     } else {
       check(toolboxComponentOptions.icon, String);
       checkMaybe(toolboxComponentOptions.title, String);
-      const { icon, title = undefined } = toolboxComponentOptions;
+      checkMaybe(toolboxComponentOptions.disabled, Boolean);
+      const { icon, title = undefined, disabled } = toolboxComponentOptions;
       const buttonManager = new ButtonManager();
       /**
        * @type {GroupToolboxComponent}
        */
       toolboxComponent = {
         ...toolboxComponent,
+        disabled,
         get icon() {
           return icon;
         },
@@ -335,7 +351,9 @@ class ToolboxManager {
    */
   clear() {
     const componentIds = [...this.componentIds];
-    componentIds.forEach((id) => { this.remove(id); });
+    componentIds.forEach((id) => {
+      this.remove(id);
+    });
   }
 
   /**

package/src/manager/window/WindowComponent.vue

@@ -7,8 +7,8 @@
     @dragend="dragEnd"
     :draggable="isDraggable"
     :class="{
-      'rounded': !isDocked,
-      'marginToTop': isDocked,
+      rounded: !isDocked,
+      marginToTop: isDocked,
       'rounded-br': isDynamicLeft,
       'rounded-bl': isDynamicRight,
     }"
@@ -24,13 +24,11 @@
     >
       <slot name="headerComponent" :props="$attrs" />
     </div>
-    <v-divider
-      v-if="!windowState.hideHeader"
-    />
+    <v-divider v-if="!windowState.hideHeader" />
     <div
       class="overflow-x-hidden mb-1"
       :class="{
-        'rounded': !isDocked,
+        rounded: !isDocked,
       }"
     >
       <slot />
@@ -39,17 +37,13 @@
 </template>
 
 <style scoped>
-
- .marginToTop {
-   margin-top: 2px;
- }
-
+  .marginToTop {
+    margin-top: 2px;
+  }
 </style>
 
 <script>
-  import {
-    computed, inject, provide, ref,
-  } from 'vue';
+  import { computed, inject, provide, ref } from 'vue';
   import { VDivider, VSheet } from 'vuetify/lib';
   import { WindowSlot } from './windowManager.js';
 
@@ -88,17 +82,21 @@
     setup(props, { emit }) {
       const app = inject('vcsApp');
       const { provides } = app.windowManager.get(props.windowState.id);
-      Object.entries(provides)
-        .forEach(([key, value]) => {
-          provide(key, value);
-        });
+      Object.entries(provides).forEach(([key, value]) => {
+        provide(key, value);
+      });
 
       const isDynamic = computed(() => props.slotWindow !== WindowSlot.STATIC);
       const isDocked = computed(() => props.slotWindow !== WindowSlot.DETACHED);
       const isDockedLeft = computed(() => {
-        return props.slotWindow === WindowSlot.STATIC || props.slotWindow === WindowSlot.DYNAMIC_LEFT;
+        return (
+          props.slotWindow === WindowSlot.STATIC ||
+          props.slotWindow === WindowSlot.DYNAMIC_LEFT
+        );
       });
-      const isDockedRight = computed(() => props.slotWindow === WindowSlot.DYNAMIC_RIGHT);
+      const isDockedRight = computed(
+        () => props.slotWindow === WindowSlot.DYNAMIC_RIGHT,
+      );
       const isDraggable = ref(false);
       /**
        * Sets window as draggable on mousedown on header.
@@ -156,4 +154,3 @@
     },
   };
 </script>
-