@vcmap/ui 5.0.0-rc.9 → 5.0.0

package/src/manager/toolbox/toolboxManager.js

@@ -1,79 +1,194 @@
-/* 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
+ * @property {boolean} [disabled=false]
+ */
+
+/**
+ * @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
+ * @property {boolean} [disabled=false]
+ */
+
+/**
+ * @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
+ * @property {boolean} [disabled=false]
  */
 
 /**
  * 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 +196,7 @@ export class ToolboxManager {
 
   /**
    * @param {string} id
-   * @returns {ToolboxGroupComponent}
+   * @returns {ToolboxComponent}
    */
   get(id) {
     return this._toolboxGroups.get(id);
@@ -96,103 +211,153 @@ 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,
+        disabled: [undefined, Boolean],
+        tools: [
+          {
+            name: String,
+            title: [undefined, String],
+            icon: String,
+            disabled: [undefined, Boolean],
+          },
+        ],
+      });
+      /**
+       * @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);
+      checkMaybe(toolboxComponentOptions.disabled, Boolean);
+      const { icon, title = undefined, disabled } = toolboxComponentOptions;
+      const buttonManager = new ButtonManager();
+      /**
+       * @type {GroupToolboxComponent}
+       */
+      toolboxComponent = {
+        ...toolboxComponent,
+        disabled,
+        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];
-    componentIds.forEach((id) => { this.remove(id); });
+    componentIds.forEach((id) => {
+      this.remove(id);
+    });
   }
 
   /**
-   * destroys the ButtonManager;
+   * destroys the ToolboxManager;
    */
   destroy() {
     this.added.destroy();
@@ -202,3 +367,5 @@ export class ToolboxManager {
     this._toolboxGroups.clear();
   }
 }
+
+export default ToolboxManager;

package/src/manager/window/WindowComponent.vue

@@ -2,28 +2,35 @@
   <v-sheet
     :id="`window-component--${windowState.id}`"
     class="elevation-3 position-absolute d-flex flex-column"
-    ref="windowComponentRef"
-    @click="clicked"
+    v-on="{ ...$listeners }"
+    @dragstart="dragStart"
+    @dragend="dragEnd"
+    :draggable="isDraggable"
     :class="{
-      'rounded': !isDocked,
-      'marginToTop': isDocked
+      rounded: !isDocked,
+      marginToTop: isDocked || !isChild,
+      'rounded-br': isDynamicLeft,
+      'rounded-bl': isDynamicRight,
     }"
   >
     <div
       v-if="!windowState.hideHeader"
-      ref="draggableHeaderRef"
+      @mousedown="mousedown"
+      @mouseup="isDraggable = false"
       class="pa-2"
       :class="{
         'cursor-grab': isDynamic,
-        'grey--text': !isOnTop,
+        child: isChild,
       }"
-      :draggable="isDynamic"
     >
-      <slot name="headerComponent" />
+      <slot name="headerComponent" :props="$attrs" />
     </div>
-    <v-divider />
+    <v-divider v-if="!windowState.hideHeader" />
     <div
-      class="overflow-x-hidden"
+      class="overflow-x-hidden mb-1"
+      :class="{
+        rounded: !isDocked,
+      }"
     >
       <slot />
     </div>
@@ -31,22 +38,33 @@
 </template>
 
 <style scoped>
-
- .marginToTop {
-   margin-top: 2px;
- }
-
+  .marginToTop {
+    margin-top: 2px;
+  }
 </style>
 
 <script>
-  import {
-    onMounted, onUnmounted, computed, ref, nextTick,
-  } from '@vue/composition-api';
-  import { fromEvent } from 'rxjs';
-  import { switchMap, take, map, tap } from 'rxjs/operators';
+  import { computed, inject, provide, ref } from 'vue';
+  import { VDivider, VSheet } from 'vuetify/lib';
   import { WindowSlot } from './windowManager.js';
 
+  /**
+   * @description WindowComponent defining the structure and style of VC Map windows
+   * @vue-prop {WindowState} windowState
+   * @vue-prop {boolean} isOnTop - Whether the component is focused
+   * @vue-prop {Object} slotWindow - slot ref of the window
+   * @vue-event {PointerEvent} click - raised when the component is clicked
+   * @vue-event {MouseEvent} mousedown - raised when the component is mousedown
+   * @vue-event {{dx: number, dy: number}} move - raised when the component is moved (dragged)
+   * @vue-data {slot} [#default] - slot with the window content
+   * @vue-data {slot} [#headerComponent] - slot to override the default header
+   */
   export default {
+    name: 'WindowComponent',
+    components: {
+      VSheet,
+      VDivider,
+    },
     props: {
       windowState: {
         type: Object,
@@ -62,79 +80,81 @@
         required: true,
       },
     },
-    setup({ windowState, slotWindow }, { emit }) {
-      const draggableHeaderRef = ref(null);
-      const windowComponentRef = ref(null);
-      const isDynamic = computed(() => slotWindow.value !== WindowSlot.STATIC);
-      const isDocked = computed(() => slotWindow.value !== WindowSlot.DETACHED);
-      const clicked = (e) => {
-        emit('click', e);
-      };
-
-      let dragOverSub;
-      let dropSub;
-      onMounted(() => {
-        if (!windowState.hideHeader && slotWindow.value !== WindowSlot.STATIC) {
-          nextTick(() => {
-            const dragStart = fromEvent(draggableHeaderRef.value, 'dragstart');
-            const dragOver = fromEvent(document.body, 'dragover');
-            const drop = fromEvent(document.body, 'drop');
-            const dragThenDrop = dragStart.pipe(
-              tap(() => {
-                dragOverSub = dragOver.subscribe((e) => {
-                  // make it accepting drop events
-                  // TODO check if setting the position here works.
-                  e.preventDefault();
-                });
-              }),
-              switchMap((startEvent) => {
-                // To get to the Root Element of a Custom Component .$el is used here.
-                const style = window.getComputedStyle(windowComponentRef.value.$el, null);
-                const windowPosition = {
-                  top: parseInt(style.getPropertyValue('top'), 10),
-                  left: parseInt(style.getPropertyValue('left'), 10),
-                  width: parseInt(style.getPropertyValue('width'), 10),
-                  height: parseInt(style.getPropertyValue('height'), 10),
-                };
-                // set dataTransfer for Firefox
-                startEvent.dataTransfer.setData('text/html', null);
-
-                return drop.pipe(
-                  take(1),
-                  map((dropEvent) => {
-                    windowPosition.dx = startEvent.clientX - dropEvent.clientX;
-                    windowPosition.dy = startEvent.clientY - dropEvent.clientY;
-                    return windowPosition;
-                  }),
-                  tap(() => {
-                    dragOverSub.unsubscribe();
-                  }),
-                );
-              }),
-            );
-            dropSub = dragThenDrop.subscribe((pos) => {
-              emit('dropped', pos);
-            });
-          });
-        }
+    setup(props, { emit }) {
+      const app = inject('vcsApp');
+      const { provides } = app.windowManager.get(props.windowState.id);
+      Object.entries(provides).forEach(([key, value]) => {
+        provide(key, value);
       });
 
-      onUnmounted(() => {
-        if (dragOverSub) {
-          dragOverSub.unsubscribe();
+      const isChild = computed(() => !!props.windowState.parentId);
+      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 ||
+          props.slotWindow === WindowSlot.DYNAMIC_CHILD
+        );
+      });
+      const isDockedRight = computed(
+        () => props.slotWindow === WindowSlot.DYNAMIC_RIGHT,
+      );
+      const isDraggable = ref(false);
+      /**
+       * Sets window as draggable on mousedown on header.
+       * Stops bubbling of header action buttons.
+       * @param {MouseEvent} e
+       */
+      const mousedown = (e) => {
+        emit('mousedown', e);
+        if (e.target.closest('button')) {
+          return;
         }
-        if (dropSub) {
-          dropSub.unsubscribe();
+        isDraggable.value = isDynamic.value;
+      };
+      /**
+       * @type {DragEvent}
+       */
+      let startEvent;
+      /**
+       * @param {DragEvent} e
+       */
+      const dragStart = (e) => {
+        if (!isDraggable.value) {
+          e.preventDefault();
+          e.stopPropagation();
         }
-      });
+        startEvent = e;
+        // set mouse cursor to move
+        e.dataTransfer.effectAllowed = 'move';
+      };
+      /**
+       * @param {DragEvent} endEvent
+       */
+      const dragEnd = (endEvent) => {
+        const movement = {
+          dx: endEvent.clientX - startEvent.clientX,
+          dy: endEvent.clientY - startEvent.clientY,
+        };
+        emit('moved', movement);
+        startEvent = null;
+        isDraggable.value = false;
+        endEvent.target.parentElement.ondragover = null;
+        app.maps.target.ondragover = null;
+      };
+
       return {
         isDynamic,
+        isChild,
         isDocked,
-        draggableHeaderRef,
-        windowComponentRef,
-        clicked,
+        isDynamicLeft: isDockedLeft,
+        isDynamicRight: isDockedRight,
+        isDraggable,
+        dragStart,
+        dragEnd,
+        mousedown,
       };
     },
   };
 </script>
-