@vcmap/ui 5.0.0-rc.10 → 5.0.0-rc.13

package/src/manager/toolbox/ToolboxManager.vue

@@ -1,23 +1,36 @@
-<script src="../../vcsUiApp.js"></script>
 <template>
   <v-toolbar
-    v-if="toolboxOpen && actionGroups.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"
+    width="fit-content"
     dense
-    class="vcs-toolbox toolbar__secondary rounded-b mx-auto v-sheet marginToTop"
-    :width="width"
   >
     <v-toolbar-items class="w-full">
-      <div class="d-flex align-center justify-space-between w-full">
-        <ToolboxGroupComponent
-          v-for="(group, idx) in actionGroups"
-          :key="group.id"
-          :group-icon="group.icon"
-          :group-title="group.title"
-          :actions="group.actions"
-          class="px-2"
-          :active="groupId === group.id"
-          :position="getPosition(idx)"
-          @click="toggleGroup(group.id)"
+      <div
+        class="d-flex align-center justify-space-between w-full mx-1"
+        v-for="group in orderedGroups"
+        :key="group.id"
+      >
+        <ToolboxActionGroup
+          v-if="group.type === ToolboxType.GROUP"
+          :group="group"
+          @toggle="(groupOpen) => open = groupOpen"
+        />
+        <ToolboxActionSelect
+          v-else-if="group.type === ToolboxType.SELECT"
+          :group="group"
+          @toggle="(selectOpen) => open = selectOpen"
+        />
+        <VcsButton
+          v-else
+          :tooltip="group.action.title"
+          :icon="group.action.icon"
+          :active="group.action.active"
+          @click.stop="group.action.callback($event)"
+          v-bind="{...$attrs}"
+          large
         />
       </div>
     </v-toolbar-items>
@@ -40,71 +53,95 @@
     &.theme--light.v-toolbar.v-sheet {
       background-color: #ffffffda;
     }
+    &.theme--dark.v-toolbar.v-sheet {
+      background-color: #000000da;
+    }
   }
 
   .marginToTop {
     margin-top: 2px;
   }
+
+  .v-toolbar__items > div{
+    gap: 8px;
+    width: fit-content;
+    display: inline-block;
+  }
 </style>
 
 <script>
+  import { inject, ref, computed, watch, onUnmounted } from 'vue';
+  import { ButtonLocation, vcsAppSymbol } from '@vcmap/ui';
+  import { getComponentsByOrder, ToolboxType } from './toolboxManager.js';
+  import ToolboxActionSelect from './SelectToolboxComponent.vue';
+  import ToolboxActionGroup from './GroupToolboxComponent.vue';
+  import VcsButton from '../../components/buttons/VcsButton.vue';
 
-import { inject, ref, computed, watch, onUnmounted } from '@vue/composition-api';
-import ToolboxGroupComponent from './ToolboxGroupComponent.vue';
-import {ButtonLocation, vcsAppSymbol} from '@vcmap/ui';
+  /**
+   * @typedef {Object} ToolboxButtonGroup
+   * @property {string} id
+   * @property {string} type
+   * @property {string} icon
+   * @property {string} title
+   * @property {Array<ButtonComponent>} buttons
+   * @property {string} [selected]
+   * @property {function(index:number):void} [selectCb]
+   */
 
-/**
- * @typedef {Object} ActionGroup
- * @property {string} id
- * @property {string} icon
- * @property {string} title
- * @property {Array<VcsAction>} actions
- */
+  /**
+   * @description ToolboxManager component rendering toolbox different kind of Toolbox buttons:
+   * - Single toggle button
+   * - Select drop down button to select an item, selected button is rendered besides
+   * - Group drop down button showing a group of toggle buttons
+   * Watches for changes in toolbox components.
+   * Adds Toolbox button in Navbar, if components are available or removes it otherwise.
+   * @vue-computed {Array<ToolboxButtonGroup>} groups - Array of group components
+   * @vue-computed {Array<ToolboxButtonGroup>} orderedGroups - Array of group components sorted by owner
+   */
+  export default {
+    name: 'VcsToolboxManager',
+    components: {
+      ToolboxActionSelect,
+      ToolboxActionGroup,
+      VcsButton,
+    },
+    setup() {
+      const app = inject('vcsApp');
 
-/**
- * @description ToolboxManager component rendering toolbox using {@link ToolboxGroupComponent}.
- * @vue-computed {Array<ActionGroup>} actionGroups - Array of group components
- * @vue-computed {number} width - width of toolbox depending on number of groups
- */
-export default {
-  name: 'VcsToolboxManager',
-  components: {
-    ToolboxGroupComponent,
-  },
-  setup() {
-    const app = inject('vcsApp');
+      const toolboxComponentIds = ref(app.toolboxManager.componentIds);
+      const groups = computed(() => {
+        return toolboxComponentIds.value.map(id => app.toolboxManager.get(id));
+      });
 
-    const toolboxComponentIds = ref(app.toolboxManager.componentIds);
-    const actionGroups = computed(() => {
-      const groups = toolboxComponentIds.value.map(id => app.toolboxManager.get(id));
-      return groups
-        .map((g) => {
-          const buttonIds = ref(g.buttonManager.componentIds);
-          return {
-            id: g.id,
-            icon: g.icon,
-            title: g.title,
-            actions: buttonIds.value.map(id => g.buttonManager.get(id).action),
-          };
-        })
-        .filter(g => g.actions.length > 0);
-    });
+      /**
+       * To be rendered in Toolbox components must meet certain conditions:
+       * - SingleToolboxComponent: no further conditions
+       * - SelectToolboxComponent: must have at least two tools
+       * - GroupToolboxComponent: must have at least one member (button)
+       * @param {SingleToolboxComponent|SelectToolboxComponent|GroupToolboxComponent} c
+       * @returns {boolean}
+       */
+      function filterFunc(c) {
+        return c.type === ToolboxType.SINGLE ||
+          c?.action?.tools?.length > 1 ||
+          c.buttonManager?.componentIds?.length > 0;
+      }
+      const orderedGroups = computed(() => getComponentsByOrder(groups.value).filter(filterFunc));
 
-    const toolboxOpen = ref(true);
-    const toolboxToggleAction = {
-      name: 'toolboxToggleAction',
-      icon: '$vcsTools',
-      title: 'Toolbox',
-      active: true,
-      callback() {
-        this.active = !this.active;
-        toolboxOpen.value = this.active;
-      },
-    };
+      const toolboxOpen = ref(true);
+      const toolboxToggleAction = {
+        name: 'toolboxToggleAction',
+        icon: '$vcsTools',
+        title: 'Toolbox',
+        active: true,
+        callback() {
+          this.active = !this.active;
+          toolboxOpen.value = this.active;
+        },
+      };
 
-    const stopWatching = watch([actionGroups],
-      ([actionGroups]) => {
-        if (actionGroups.length > 0) {
+      function handleToolboxButton() {
+        if (groups.value.length > 0) {
           if (!app.navbarManager.has('toolbox')) {
             app.navbarManager.add(
               {
@@ -119,39 +156,20 @@ export default {
           app.navbarManager.remove('toolbox');
         }
       }
-    );
-
-    onUnmounted(() => {
-      stopWatching();
-    });
+      handleToolboxButton();
 
-    // XXX can this solved by CSS to get rid of the hardcoded size and padding?
-    const buttonSize = 54;
-    const buttonPadding = 8;
-    const size = buttonSize + (2 * buttonPadding);
-    const width = computed(() => actionGroups.value.length * size);
+      const stopWatching = watch(groups, () => handleToolboxButton());
 
-    /**
-     * calculates relative x-position of a button from the left edge of toolbar
-     * @param {number} idx
-     * @returns {number}
-     */
-    const getPosition = (idx) => (size * (idx + 1)) - (size / 2);
+      onUnmounted(() => {
+        stopWatching();
+      });
 
-    return {
-      toolboxOpen,
-      actionGroups,
-      width,
-      getPosition,
-      groupId: null,
-      toggleGroup(groupId) {
-        if (this.groupId === groupId) {
-          this.groupId = null;
-        } else {
-          this.groupId = groupId;
-        }
-      },
-    };
-  },
-};
+      return {
+        toolboxOpen,
+        orderedGroups,
+        ToolboxType,
+        open: ref(false),
+      };
+    },
+  };
 </script>

package/src/manager/toolbox/toolboxManager.js

@@ -1,79 +1,186 @@
-/* eslint-disable import/prefer-default-export */
 import { VcsEvent } from '@vcmap/core';
-import { reactive } from '@vue/composition-api';
 import { check, checkMaybe } from '@vcsuite/check';
 import { v4 as uuidv4 } from 'uuid';
-import { ButtonManager } from '../buttonManager.js';
+import { reactive } from 'vue';
+import { vcsAppSymbol } from '../../pluginHelper.js';
+import ButtonManager from '../buttonManager.js';
+import { ActionPattern } from '../../components/lists/VcsActionList.vue';
 
 /**
- * @typedef ToolboxGroupComponentOptions
- * @property {string} [id] Optional ID, If not provided an uuid will be generated.
- * @property {string} [icon] Optional group icon, for dropdowns
- * @property {string} [title] Optional group title, for dropdowns
+ * Possible group types. Define behaviour of group:
+ * @property {number} SINGLE - SingleToolboxComponent with single toggle action rendered as VcsButton
+ * @property {number} SELECT - SelectToolboxComponent with one selected item of a list of items
+ * @property {number} GROUP - GroupToolboxComponent with multiple non-exclusive items rendered as VcsButton
+ * @enum {number}
  */
+export const ToolboxType = {
+  SINGLE: 0,
+  SELECT: 1,
+  GROUP: 2,
+};
 
 /**
- * @typedef ToolboxGroupComponent
+ * @typedef {Object} ToolboxComponentOptions
+ * @property {string} [id] - Optional ID, If not provided an uuid will be generated.
+ * @property {ToolboxType} type - Group type, defining the behaviour of the group
+ */
+
+/**
+ * @typedef {ToolboxComponentOptions} SingleToolboxComponentOptions
+ * @property {VcsAction} action - An action of a single tool
+ */
+
+/**
+ * @typedef {ToolboxComponentOptions} SelectToolboxComponentOptions
+ * @property {ToolboxSelectAction} action - An action determining the behaviour of the select group
+ */
+
+/**
+ * @typedef {ToolboxComponentOptions} GroupToolboxComponentOptions
+ * @property {string} icon - Group icon
+ * @property {string} [title] - Optional group title, for dropdown
+ */
+
+/**
+ * @typedef {Object} ToolboxComponent
  * @property {string} id
- * @property {string} title
+ * @property {ToolboxType} type - Group type, defining the behaviour of the group
+ * @property {string|vcsAppSymbol} owner
+ */
+
+/**
+ * @typedef {ToolboxComponent} SingleToolboxComponent
+ * @property {VcsAction} action
+ */
+
+/**
+ * @typedef {ToolboxComponent} GroupToolboxComponent
+ * @property {string|undefined} icon
+ * @property {string|undefined} title
  * @property {ButtonManager} buttonManager
  */
 
+/**
+ * @typedef {ToolboxComponent} SelectToolboxComponent
+ * @property {ToolboxSelectAction} action
+ */
+
+/**
+ * @typedef {VcsAction} ToolboxSelectAction
+ * @property {function(index:number):void} selected - A callback determining the select behavior of the group. Should set the currentIndex.
+ * @property {Array<ToolboxSelectItem>} tools - A list of exclusive tools belonging to the group
+ * @property {number} currentIndex - Index of the current item
+ */
+
+/**
+ * @typedef {Object} ToolboxSelectItem
+ * @property {string} name
+ * @property {string} [title]
+ * @property {string} icon
+ */
+
 /**
  * Default groups predefining icon and title of the group
- * @type {Array<ToolboxGroupComponentOptions>}
+ * @type {Array<ToolboxComponentOptions>}
  */
 const defaultGroups = [
-  {
-    id: 'select',
-    icon: '$vcsPen',
-    title: 'select',
-  },
-  {
-    id: 'measurement',
-    icon: '$vcsDimensionsHouse',
-    title: 'measurement',
-  },
   {
     id: 'flight',
+    type: ToolboxType.GROUP,
     icon: '$vcsVideoRecorder',
-    title: 'flight',
+    title: 'toolbox.flight',
+  },
+  {
+    id: 'miscellaneous',
+    type: ToolboxType.GROUP,
+    icon: 'mdi-dots-grid',
+    title: 'toolbox.miscellaneous',
   },
 ];
 
 /**
- * Requests default groups for a toolboxManager.
+ * Default order of toolboxComponents shown in the toolbox
+ * @type {string[]}
+ */
+const defaultOrder = ['featureInfo', 'flight'];
+
+/**
+ * sorts by owner and optionally plugin order
+ * If both components are owned by vcsApp, defaultOrder is used to compare
+ * @param {ToolboxComponent|ButtonComponent} compA
+ * @param {ToolboxComponent|ButtonComponent} compB
+ * @param {string[]} [order] order of owners to sort by
+ * @returns {number}
+ */
+export function sortByOwner(compA, compB, order = []) {
+  const sorted = [vcsAppSymbol, ...order];
+  let indexA = sorted.indexOf(compA.owner);
+  let indexB = sorted.indexOf(compB.owner);
+
+  if (compA.owner === vcsAppSymbol && compB.owner === vcsAppSymbol) {
+    indexA = defaultOrder.indexOf(compA.id);
+    indexB = defaultOrder.indexOf(compB.id);
+  }
+
+  if (indexA === indexB) {
+    return 0;
+  }
+
+  if (indexA === -1) {
+    return 1;
+  }
+
+  if (indexB === -1) {
+    return -1;
+  }
+  return indexA - indexB;
+}
+
+/**
+ * returns ToolboxComponents sorted by owner (or other sort function)
+ * @param {Array<ToolboxComponent|ButtonComponent>} components
+ * @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
+ * @returns {Array<ToolboxComponent|ButtonComponent>}
+ */
+export function getComponentsByOrder(components, order = [], compareFn = sortByOwner) {
+  return [...components]
+    .sort((a, b) => compareFn(a, b, order));
+}
+
+/**
+ * Adds default groups for a toolboxManager.
  * Once requested, group id, icon and title are defined and cannot be changed or overwritten.
  * @param {ToolboxManager} toolboxManager
- * @param {Array<ToolboxGroupComponentOptions>} groups
+ * @param {Array<ToolboxComponentOptions>} groups
  */
 export function setupDefaultGroups(toolboxManager, groups = defaultGroups) {
-  groups.forEach(({ id, icon, title }) => toolboxManager.requestGroup(id, icon, title));
+  groups.forEach(toolboxComponentOptions => toolboxManager.add(toolboxComponentOptions, vcsAppSymbol));
 }
 
 /**
  * @class ToolboxManager
- * @description Manages a set of Toolbox Groups
- * @implements VcsComponentManager<ToolboxGroupComponent,ToolboxGroupComponentOptions>
+ * @description Manages a set of Toolbox Components
+ * @implements VcsComponentManager<ToolboxComponent,ToolboxComponentOptions>
  */
-export class ToolboxManager {
+class ToolboxManager {
   constructor() {
     /**
-     * @type {import("@vcmap/core").VcsEvent<ToolboxGroupComponent>}
+     * @type {import("@vcmap/core").VcsEvent<ToolboxComponent>}
      */
     this.added = new VcsEvent();
     /**
-     * @type {import("@vcmap/core").VcsEvent<ToolboxGroupComponent>}
+     * @type {import("@vcmap/core").VcsEvent<ToolboxComponent>}
      */
     this.removed = new VcsEvent();
     /**
      * reactive ordered array of ids,
      * @type {Array<string>}
      */
-    this.componentIds = reactive([]);
+    this.componentIds = [];
 
     /**
-     * @type {Map<string, ToolboxGroupComponent>}
+     * @type {Map<string, ToolboxComponent>}
      * @private
      */
     this._toolboxGroups = new Map();
@@ -81,7 +188,7 @@ export class ToolboxManager {
 
   /**
    * @param {string} id
-   * @returns {ToolboxGroupComponent}
+   * @returns {ToolboxComponent}
    */
   get(id) {
     return this._toolboxGroups.get(id);
@@ -96,95 +203,135 @@ export class ToolboxManager {
   }
 
   /**
-   * Toolbox groups should be static. Removing them can lead to undefined behavior.
+   * removes a ToolboxComponent, Component will not be rendered anymore and will be destroyed.
+   * Add ToolboxComponent again to show the component again
    * @param {string} id
    */
   remove(id) {
     check(id, String);
-    const toolboxGroupComponent = this._toolboxGroups.get(id);
-    if (toolboxGroupComponent) {
+    const toolboxComponent = this._toolboxGroups.get(id);
+    if (toolboxComponent) {
       const index = this.componentIds.indexOf(id);
       this.componentIds.splice(index, 1);
       this._toolboxGroups.delete(id);
-      this.removed.raiseEvent(toolboxGroupComponent);
-      toolboxGroupComponent.buttonManager.destroy();
+      this.removed.raiseEvent(toolboxComponent);
+      if (toolboxComponent.buttonManager) {
+        toolboxComponent.buttonManager.destroy();
+      }
     }
   }
 
   /**
-   * Do not call add directly. Use requestGroup for adding toolbox groups.
-   * @param {ToolboxGroupComponentOptions} toolboxGroupComponentOptions
-   * @throws {Error} if a buttonComponent with the same ID has already been added
-   * @returns {ToolboxGroupComponent}
+   * adds a ToolboxComponent
+   * @param {SingleToolboxComponentOptions|SelectToolboxComponentOptions|GroupToolboxComponentOptions} toolboxComponentOptions
+   * @param {string|symbol} owner pluginName or vcsAppSymbol
+   * @throws {Error} if a toolboxComponent with the same ID has already been added
+   * @returns {SingleToolboxComponent|SelectToolboxComponent|GroupToolboxComponent}
    */
-  add(toolboxGroupComponentOptions) {
-    checkMaybe(toolboxGroupComponentOptions.id, String);
-    checkMaybe(toolboxGroupComponentOptions.icon, String);
-    checkMaybe(toolboxGroupComponentOptions.title, String);
+  add(toolboxComponentOptions, owner) {
+    checkMaybe(toolboxComponentOptions.id, String);
+    check(toolboxComponentOptions.type, Object.values(ToolboxType));
+    check(owner, [String, vcsAppSymbol]);
 
-    if (toolboxGroupComponentOptions.id && this.has(toolboxGroupComponentOptions.id)) {
-      throw new Error(`A toolGroup with id ${toolboxGroupComponentOptions.id} has already been registered.`);
+    if (toolboxComponentOptions.id && this.has(toolboxComponentOptions.id)) {
+      throw new Error(`A toolGroup with id ${toolboxComponentOptions.id} has already been registered.`);
     }
-    const id = toolboxGroupComponentOptions.id || uuidv4();
-    const icon = toolboxGroupComponentOptions.icon || undefined;
-    const title = toolboxGroupComponentOptions.title || undefined;
-    const buttonManager = new ButtonManager();
+    const id = toolboxComponentOptions.id || uuidv4();
+    const { type } = toolboxComponentOptions;
 
     /**
-     * @type {ToolboxGroupComponent}
+     * @type {ToolboxComponent}
      */
-    const toolboxGroupComponent = {
+    let toolboxComponent = {
       get id() {
         return id;
       },
-      get icon() {
-        return icon;
+      get type() {
+        return type;
       },
-      get title() {
-        return title;
-      },
-      get buttonManager() {
-        return buttonManager;
+      get owner() {
+        return owner;
       },
     };
 
-    this._toolboxGroups.set(id, toolboxGroupComponent);
-    this.componentIds.push(id);
-    this.added.raiseEvent(toolboxGroupComponent);
-    return toolboxGroupComponent;
-  }
-
-  /**
-   * Returns an existing group or creates a new group. Add toolbox groups with this API.
-   * @param {string} id
-   * @param {string} [icon='mdi-select-group']
-   * @param {string} [title='defaultGroup']
-   * @returns {ToolboxGroupComponent}
-   */
-  requestGroup(id, icon = 'mdi-select-group', title = 'defaultGroup') {
-    check(id, String);
-    checkMaybe(icon, String);
-    checkMaybe(title, String);
-
-    if (this.has(id)) {
-      return this.get(id);
+    if (type === ToolboxType.SINGLE) {
+      check(toolboxComponentOptions.action, ActionPattern);
+      /**
+       * @type {SingleToolboxComponent}
+       */
+      toolboxComponent = {
+        ...toolboxComponent,
+        get action() {
+          return reactive(toolboxComponentOptions.action);
+        },
+      };
+    } else if (type === ToolboxType.SELECT) {
+      check(toolboxComponentOptions.action, {
+        ...ActionPattern,
+        selected: Function,
+        currentIndex: Number,
+        tools: [{
+          name: String,
+          title: [undefined, String],
+          icon: String,
+        }],
+      });
+      /**
+       * @type {SelectToolboxComponent}
+       */
+      toolboxComponent = {
+        ...toolboxComponent,
+        get action() {
+          return reactive(toolboxComponentOptions.action);
+        },
+      };
     } else {
-      return this.add({ id, icon, title });
+      check(toolboxComponentOptions.icon, String);
+      checkMaybe(toolboxComponentOptions.title, String);
+      const { icon, title = undefined } = toolboxComponentOptions;
+      const buttonManager = new ButtonManager();
+      /**
+       * @type {GroupToolboxComponent}
+       */
+      toolboxComponent = {
+        ...toolboxComponent,
+        get icon() {
+          return icon;
+        },
+        get title() {
+          return title;
+        },
+        get buttonManager() {
+          return buttonManager;
+        },
+      };
     }
+
+    this._toolboxGroups.set(toolboxComponent.id, toolboxComponent);
+    this.componentIds.push(toolboxComponent.id);
+    this.added.raiseEvent(toolboxComponent);
+    return toolboxComponent;
   }
 
   /**
-   * removes all {@link ButtonComponent}s of a specific owner and fires removed Events
+   * removes all {@link ToolboxComponent}s of a specific owner and fires removed Events
    * @param {string|vcsAppSymbol} owner
    */
   removeOwner(owner) {
-    this.componentIds.forEach((id) => {
-      this.get(id).buttonManager.removeOwner(owner);
+    const componentIds = [...this.componentIds];
+    componentIds.forEach((id) => {
+      const toolboxComponent = this.get(id);
+      if (toolboxComponent.buttonManager) {
+        toolboxComponent.buttonManager.removeOwner(owner);
+      }
+      if (owner === toolboxComponent.owner) {
+        this.remove(id);
+      }
     });
   }
 
   /**
-   * removes all buttonComponents and fires removed Events
+   * removes all toolboxComponents and fires removed Events
    */
   clear() {
     const componentIds = [...this.componentIds];
@@ -192,7 +339,7 @@ export class ToolboxManager {
   }
 
   /**
-   * destroys the ButtonManager;
+   * destroys the ToolboxManager;
    */
   destroy() {
     this.added.destroy();
@@ -202,3 +349,5 @@ export class ToolboxManager {
     this._toolboxGroups.clear();
   }
 }
+
+export default ToolboxManager;