@vcmap/ui 5.0.0-rc.6 → 5.0.0-rc.9

package/src/manager/toolbox/ToolboxManager.vue

@@ -1,43 +1,24 @@
+<script src="../../vcsUiApp.js"></script>
 <template>
   <v-toolbar
+    v-if="toolboxOpen && actionGroups.length > 0 && $vuetify.breakpoint.mdAndUp"
     dense
-    class="vcs-toolbox toolbar__secondary rounded-b mx-auto v-sheet"
-    :style="{ maxWidth: `${getWidth()}px` }"
+    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">
-        <span
-          v-for="group of groups"
+        <ToolboxGroupComponent
+          v-for="(group, idx) in actionGroups"
           :key="group.id"
-        >
-          <component
-            v-if="group.type === 'customComponent'"
-            :is="group.component"
-            :icon="'$vcsObjectAttribute'"
-            :value="group.active"
-            @click.native="group.active = !group.active"
-            :group="group"
-          />
-          <Button
-            v-if="group.type === 'toggleButton'"
-            :group="group"
-            :icon="'$vcsObjectAttribute'"
-            :value="group.active"
-            @click.native="group.active = !group.active"
-          />
-          <ToolboxSingleSelectButton
-            v-if="toolboxGroupVisible(group) && group.type === 'singleSelectButton'"
-            :group="group"
-            @selected="id => selectSingleSelectOption(id)"
-            @set-open="({ id, open }) => setGroupOpen({ id, open })"
-          />
-          <ToolboxMultiSelectButton
-            v-if="toolboxGroupVisible(group) && group.type === 'multiSelectButton'"
-            :group="group"
-            @selected="id => selectMultiSlectOption(id)"
-            @set-open="({ id, open }) => setGroupOpen({ id, open })"
-          />
-        </span>
+          :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>
     </v-toolbar-items>
   </v-toolbar>
@@ -60,55 +41,117 @@
       background-color: #ffffffda;
     }
   }
+
+  .marginToTop {
+    margin-top: 2px;
+  }
 </style>
 
 <script>
 
-  import { inject } from '@vue/composition-api';
-  import { VcsButton } from '@vcsuite/ui-components';
+import { inject, ref, computed, watch, onUnmounted } from '@vue/composition-api';
+import ToolboxGroupComponent from './ToolboxGroupComponent.vue';
+import {ButtonLocation, vcsAppSymbol} from '@vcmap/ui';
+
+/**
+ * @typedef {Object} ActionGroup
+ * @property {string} id
+ * @property {string} icon
+ * @property {string} title
+ * @property {Array<VcsAction>} actions
+ */
 
-  import ToolboxSingleSelectButton from './ToolboxSingleSelectButton.vue';
-  import ToolboxMultiSelectButton from './ToolboxMultiSelectButton.vue';
+/**
+ * @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');
 
-  export default {
-    name: 'VcsToolbox',
-    props: {
-      width: {
-        type: Number,
-        default: 600,
+    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);
+    });
+
+    const toolboxOpen = ref(true);
+    const toolboxToggleAction = {
+      name: 'toolboxToggleAction',
+      icon: '$vcsTools',
+      title: 'Toolbox',
+      active: true,
+      callback() {
+        this.active = !this.active;
+        toolboxOpen.value = this.active;
       },
-    },
-    setup() {
-      const app = inject('vcsApp');
-      const { toolboxManager } = app;
-      const { state: { groups } } = toolboxManager;
-      const getWidth = () => toolboxManager.getNumberOfUsedSlots() * 75;
-      const toolboxGroupVisible = value => value &&
-        value.options &&
-        value.options.length;
-      const selectSingleSelectOption = (id) => {
-        toolboxManager.bringToTop(id);
-      };
-      const selectMultiSlectOption = (id) => {
-        toolboxManager.selectOption(id);
-      };
-      const setGroupOpen = ({ id, open }) => {
-        toolboxManager.setGroupOpen(id, open);
-      };
+    };
+
+    const stopWatching = watch([actionGroups],
+      ([actionGroups]) => {
+        if (actionGroups.length > 0) {
+          if (!app.navbarManager.has('toolbox')) {
+            app.navbarManager.add(
+              {
+                id: 'toolbox',
+                action: toolboxToggleAction,
+              },
+              vcsAppSymbol,
+              ButtonLocation.TOOL,
+            );
+          }
+        } else {
+          app.navbarManager.remove('toolbox');
+        }
+      }
+    );
+
+    onUnmounted(() => {
+      stopWatching();
+    });
+
+    // 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);
 
-      return {
-        groups,
-        getWidth,
-        selectSingleSelectOption,
-        selectMultiSlectOption,
-        setGroupOpen,
-        toolboxGroupVisible,
-      };
-    },
-    components: {
-      ToolboxSingleSelectButton,
-      ToolboxMultiSelectButton,
-      VcsButton,
-    },
-  };
+    /**
+     * 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);
+
+    return {
+      toolboxOpen,
+      actionGroups,
+      width,
+      getPosition,
+      groupId: null,
+      toggleGroup(groupId) {
+        if (this.groupId === groupId) {
+          this.groupId = null;
+        } else {
+          this.groupId = groupId;
+        }
+      },
+    };
+  },
+};
 </script>

package/src/manager/toolbox/toolboxManager.js

@@ -0,0 +1,204 @@
+/* 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';
+
+/**
+ * @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
+ */
+
+/**
+ * @typedef ToolboxGroupComponent
+ * @property {string} id
+ * @property {string} title
+ * @property {ButtonManager} buttonManager
+ */
+
+/**
+ * Default groups predefining icon and title of the group
+ * @type {Array<ToolboxGroupComponentOptions>}
+ */
+const defaultGroups = [
+  {
+    id: 'select',
+    icon: '$vcsPen',
+    title: 'select',
+  },
+  {
+    id: 'measurement',
+    icon: '$vcsDimensionsHouse',
+    title: 'measurement',
+  },
+  {
+    id: 'flight',
+    icon: '$vcsVideoRecorder',
+    title: 'flight',
+  },
+];
+
+/**
+ * Requests 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
+ */
+export function setupDefaultGroups(toolboxManager, groups = defaultGroups) {
+  groups.forEach(({ id, icon, title }) => toolboxManager.requestGroup(id, icon, title));
+}
+
+/**
+ * @class ToolboxManager
+ * @description Manages a set of Toolbox Groups
+ * @implements VcsComponentManager<ToolboxGroupComponent,ToolboxGroupComponentOptions>
+ */
+export class ToolboxManager {
+  constructor() {
+    /**
+     * @type {import("@vcmap/core").VcsEvent<ToolboxGroupComponent>}
+     */
+    this.added = new VcsEvent();
+    /**
+     * @type {import("@vcmap/core").VcsEvent<ToolboxGroupComponent>}
+     */
+    this.removed = new VcsEvent();
+    /**
+     * reactive ordered array of ids,
+     * @type {Array<string>}
+     */
+    this.componentIds = reactive([]);
+
+    /**
+     * @type {Map<string, ToolboxGroupComponent>}
+     * @private
+     */
+    this._toolboxGroups = new Map();
+  }
+
+  /**
+   * @param {string} id
+   * @returns {ToolboxGroupComponent}
+   */
+  get(id) {
+    return this._toolboxGroups.get(id);
+  }
+
+  /**
+   * @param {string} id
+   * @returns {boolean}
+   */
+  has(id) {
+    return this._toolboxGroups.has(id);
+  }
+
+  /**
+   * Toolbox groups should be static. Removing them can lead to undefined behavior.
+   * @param {string} id
+   */
+  remove(id) {
+    check(id, String);
+    const toolboxGroupComponent = this._toolboxGroups.get(id);
+    if (toolboxGroupComponent) {
+      const index = this.componentIds.indexOf(id);
+      this.componentIds.splice(index, 1);
+      this._toolboxGroups.delete(id);
+      this.removed.raiseEvent(toolboxGroupComponent);
+      toolboxGroupComponent.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}
+   */
+  add(toolboxGroupComponentOptions) {
+    checkMaybe(toolboxGroupComponentOptions.id, String);
+    checkMaybe(toolboxGroupComponentOptions.icon, String);
+    checkMaybe(toolboxGroupComponentOptions.title, String);
+
+    if (toolboxGroupComponentOptions.id && this.has(toolboxGroupComponentOptions.id)) {
+      throw new Error(`A toolGroup with id ${toolboxGroupComponentOptions.id} has already been registered.`);
+    }
+    const id = toolboxGroupComponentOptions.id || uuidv4();
+    const icon = toolboxGroupComponentOptions.icon || undefined;
+    const title = toolboxGroupComponentOptions.title || undefined;
+    const buttonManager = new ButtonManager();
+
+    /**
+     * @type {ToolboxGroupComponent}
+     */
+    const toolboxGroupComponent = {
+      get id() {
+        return id;
+      },
+      get icon() {
+        return icon;
+      },
+      get title() {
+        return title;
+      },
+      get buttonManager() {
+        return buttonManager;
+      },
+    };
+
+    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);
+    } else {
+      return this.add({ id, icon, title });
+    }
+  }
+
+  /**
+   * removes all {@link ButtonComponent}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);
+    });
+  }
+
+  /**
+   * removes all buttonComponents and fires removed Events
+   */
+  clear() {
+    const componentIds = [...this.componentIds];
+    componentIds.forEach((id) => { this.remove(id); });
+  }
+
+  /**
+   * destroys the ButtonManager;
+   */
+  destroy() {
+    this.added.destroy();
+    this.removed.destroy();
+    this.clear();
+    this.componentIds.splice(0);
+    this._toolboxGroups.clear();
+  }
+}

package/src/manager/window/WindowComponent.vue

@@ -1,36 +1,43 @@
 <template>
-  <div
+  <v-sheet
     :id="`window-component--${windowState.id}`"
-    class="vsc-window v-sheet elevation-0 position-absolute"
+    class="elevation-3 position-absolute d-flex flex-column"
     ref="windowComponentRef"
     @click="clicked"
+    :class="{
+      'rounded': !isDocked,
+      'marginToTop': isDocked
+    }"
   >
-    <v-sheet
+    <div
       v-if="!windowState.hideHeader"
       ref="draggableHeaderRef"
-      class="v-sheet elevation-3 pa-2 transition-color-100-ease"
+      class="pa-2"
       :class="{
         'cursor-grab': isDynamic,
         'grey--text': !isOnTop,
-        'rounded-tl': !isDocked,
-        'rounded-tr': !isDocked,
       }"
       :draggable="isDynamic"
     >
       <slot name="headerComponent" />
-    </v-sheet>
-    <v-sheet
-      class="v-sheet elevation-3 overflow-y-auto overflow-x-hidden w-full h-full"
-      :class="{
-        'rounded-br': !isDocked,
-        'rounded-bl': !isDocked,
-      }"
+    </div>
+    <v-divider />
+    <div
+      class="overflow-x-hidden"
     >
       <slot />
-    </v-sheet>
-  </div>
+    </div>
+  </v-sheet>
 </template>
 
+<style scoped>
+
+ .marginToTop {
+   margin-top: 2px;
+ }
+
+</style>
+
 <script>
   import {
     onMounted, onUnmounted, computed, ref, nextTick,
@@ -58,8 +65,8 @@
     setup({ windowState, slotWindow }, { emit }) {
       const draggableHeaderRef = ref(null);
       const windowComponentRef = ref(null);
-      const isDynamic = computed(() => slotWindow !== WindowSlot.STATIC);
-      const isDocked = computed(() => slotWindow !== WindowSlot.DETACHED);
+      const isDynamic = computed(() => slotWindow.value !== WindowSlot.STATIC);
+      const isDocked = computed(() => slotWindow.value !== WindowSlot.DETACHED);
       const clicked = (e) => {
         emit('click', e);
       };
@@ -69,8 +76,7 @@
       onMounted(() => {
         if (!windowState.hideHeader && slotWindow.value !== WindowSlot.STATIC) {
           nextTick(() => {
-            // To get to the Root Element of a Custom Component .$el is used here.
-            const dragStart = fromEvent(draggableHeaderRef.value.$el, 'dragstart');
+            const dragStart = fromEvent(draggableHeaderRef.value, 'dragstart');
             const dragOver = fromEvent(document.body, 'dragover');
             const drop = fromEvent(document.body, 'drop');
             const dragThenDrop = dragStart.pipe(
@@ -82,7 +88,8 @@
                 });
               }),
               switchMap((startEvent) => {
-                const style = window.getComputedStyle(windowComponentRef.value, null);
+                // 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),

package/src/manager/window/WindowComponentHeader.vue

@@ -1,27 +1,34 @@
 <template>
-  <span class="d-flex justify-space-between">
+  <span class="d-flex justify-space-between align-center window-component-header">
     <span>
       <v-icon
         v-if="windowState.headerIcon"
         class="mr-2 primary--text"
         v-text="windowState.headerIcon"
       />
-      <h3 class="font-size-14 d-inline-block user-select-none">
+      <h3 class="font-size-14 d-inline-block user-select-none font-weight-bold">
         {{ windowState.headerTitle | translate }}
       </h3>
     </span>
-    <v-icon
-      class=".float-right"
+    <VcsButton
       @click.stop="close"
-      size="16"
-      v-text="'mdi-close-thick'"
+      small
+      icon="mdi-close-thick"
     />
   </span>
 </template>
 
+<style>
+.window-component-header{
+  max-height: 16px;
+}
+</style>
+
 <script>
+  import VcsButton from '../../components/buttons/VcsButton.vue';
 
   export default {
+    components: { VcsButton },
     props: {
       windowState: {
         type: Object,

package/src/manager/window/WindowManager.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="$vuetify.breakpoint.xs ? 'win-container-mobile' : 'unset'">
     <WindowComponent
       v-for="(id, zIndex) in componentIds"
       :key="id"
@@ -28,6 +28,23 @@
   </div>
 </template>
 
+<style scoped lang="scss">
+  .win-container-mobile {
+    position: absolute;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+  }
+  .win-container-mobile > {
+    div{
+      width: 100% !important;
+      inset: unset !important;
+      border-radius: 0 !important;
+    }
+  }
+
+</style>
+
 <script>
   import { inject } from '@vue/composition-api';
 

package/src/manager/window/windowManager.js

@@ -71,7 +71,7 @@ export const WindowPositions = {
 
 /**
  * @typedef WindowComponentOptions
- * @property {string} [id] Optional ID, If not provided a uuid will be generated.
+ * @property {string} [id] Optional ID, If not provided an uuid will be generated.
  * @property {VueComponent} component Main Component which is shown below the header.
  * @property {VueComponent} [headerComponent] Replaces the Header Component.
  * @property {WindowPositionOptions} [position] Will be ignored if WindowSlot !== DETACHED, can be given otherwise or default will be used
@@ -199,10 +199,7 @@ export class WindowManager {
    * @returns {WindowComponent}
    */
   get(id) {
-    if (this.has(id)) {
-      return this._windowComponents.get(id);
-    }
-    return undefined;
+    return this._windowComponents.get(id);
   }
 
   /**
@@ -219,6 +216,7 @@ export class WindowManager {
    * @param {string} id
    */
   remove(id) {
+    check(id, String);
     const windowComponent = this._windowComponents.get(id);
     if (windowComponent) {
       const index = this.componentIds.indexOf(id);