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

package/src/manager/toolbox/ToolboxGroupComponent.vue

@@ -0,0 +1,128 @@
+<template>
+  <div v-if="actions.length > 0">
+    <VcsButton
+      v-if="singleActionButton"
+      :key="singleActionButton.name"
+      :tooltip="singleActionButton.title"
+      :icon="singleActionButton.icon"
+      :active="singleActionButton.active"
+      @click.stop="singleActionButton.callback($event)"
+      v-bind="{...$attrs}"
+    />
+    <VcsButton
+      v-else-if="groupButtons.length > 0"
+      v-bind="{...$attrs}"
+      width="48"
+      :icon="groupIcon"
+      :tooltip="groupTitle"
+      :active="active"
+      @click="$emit('click')"
+    >
+      <v-icon v-text="active ? 'mdi-chevron-up' : 'mdi-chevron-down'" color="accent" class="text--darken-3" />
+    </VcsButton>
+    <v-toolbar
+      v-if="active"
+      dense
+      absolute
+      :width="width"
+      class="toolbar__secondary rounded-b mx-auto v-sheet mt-12 px-4"
+      :style="{left: `${nudgeLeft}px` }"
+    >
+      <v-toolbar-items class="w-full">
+        <div class="d-flex align-center justify-space-between w-full action-btn-wrap">
+          <VcsButton
+            v-for="(button, index) in groupButtons"
+            :key="`${button.name}-${index}`"
+            :tooltip="button.title"
+            :icon="button.icon"
+            :active="button.active"
+            @click.stop="button.callback($event)"
+            small
+            :width="buttonSize"
+            v-bind="{...$attrs}"
+          />
+        </div>
+      </v-toolbar-items>
+    </v-toolbar>
+  </div>
+</template>
+<style lang="scss" scoped>
+.action-btn-wrap{
+  gap: 8px;
+}
+.v-toolbar.v-sheet {
+  background-color: #ffffffda;
+}
+</style>
+<script>
+
+  import VcsButton from '../../components/buttons/VcsButton.vue';
+  import { validateActions } from '../../components/lists/VcsActionList.vue';
+
+  /**
+   * @description
+   * A component rendering a single action or a group of actions in a dropdown toolbox using {@link VcsButton} and {@link ToolboxButton}.
+   * @vue-prop {Array<VcsAction>} actions - Array of actions
+   * @vue-prop {string} [groupIcon=''] - optional icon for group dropdown button
+   * @vue-prop {string} [groupTitle=''] - optional title for group dropdown button
+   * @vue-prop {boolean} active - boolean flag, whether group is active
+   * @vue-prop {boolean} position - relative x-position of the button within the toolbar
+   * @vue-computed {Array<VcsAction>} singleActionButton - single button without dropdown
+   * @vue-computed {Array<VcsAction>} groupButtons - buttons rendered below group dropdown button
+   * @vue-computed {number} nudgeLeft - offset depending on buttonSize and buttonPadding to render toolbox centered below dropdown button
+   */
+  export default {
+    name: 'ToolboxGroupComponent',
+    components: { VcsButton },
+    props: {
+      actions: {
+        type: Array,
+        required: true,
+        validator: validateActions,
+      },
+      groupIcon: {
+        type: String,
+        required: true,
+      },
+      groupTitle: {
+        type: String,
+        default: '',
+      },
+      active: {
+        type: Boolean,
+        required: true,
+      },
+      position: {
+        type: Number,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        buttonSize: 34,
+        buttonPadding: 8,
+      };
+    },
+    computed: {
+      singleActionButton() {
+        if (this.actions.length === 1) {
+          return this.actions[0];
+        }
+        return undefined;
+      },
+      groupButtons() {
+        if (this.singleActionButton) {
+          return [];
+        }
+        return this.actions;
+      },
+      width() {
+        // XXX can this be solved by CSS to get rid of hardcoded size and padding?
+        return this.groupButtons.length * (this.buttonSize + 2 * this.buttonPadding);
+      },
+      nudgeLeft() {
+        return this.position - this.width / 2;
+      },
+    },
+  };
+</script>

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/WindowComponentHeader.vue

@@ -25,7 +25,7 @@
 </style>
 
 <script>
-  import { VcsButton } from '@vcsuite/ui-components';
+  import VcsButton from '../../components/buttons/VcsButton.vue';
 
   export default {
     components: { VcsButton },

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);

package/src/navigation/mapNavigation.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="nav-container">
+  <v-container :class="$vuetify.breakpoint.xs ? 'nav-container mobile' : 'nav-container'">
     <v-row>
       <VcsCompass
         :view-mode="viewMode"
@@ -13,16 +13,16 @@
         v-model="heading"
       />
     </v-row>
-    <v-row justify="center">
+    <v-row justify="center" v-if="$vuetify.breakpoint.mdAndUp">
       <VcsZoomButton
         @zoom-out="zoomOut()"
         @zoom-in="zoomIn()"
       />
     </v-row>
-    <v-row v-if="is3D" justify="center">
+    <v-row justify="center" v-if="is3D && $vuetify.breakpoint.mdAndUp">
       <TiltSlider v-model="tilt" />
     </v-row>
-    <v-row justify="center">
+    <v-row justify="center" v-if="$vuetify.breakpoint.mdAndUp">
       <OrientationToolsButton
         :icon="overviewAction.icon"
         :tooltip="overviewAction.title"
@@ -191,8 +191,12 @@
     right: 2rem;
     bottom: 2rem;
     width: unset;
+    &.mobile{
+      top: 1rem;
+      right: 1rem;
+      bottom: auto;
+    }
   }
-
   .nav-container > {
     .row {
       margin-bottom: 15px;

package/src/navigation/orientationToolsButton.vue

@@ -23,7 +23,7 @@
 }
 </style>
 <script>
-  import { VcsTooltip } from '@vcsuite/ui-components';
+  import VcsTooltip from '../components/notification/VcsTooltip.vue';
 
   /**
    * A v-card with h & w 8. Requires an icon and binds all attributes & listeners to the v-card

package/src/navigation/tiltSlider.vue

@@ -47,7 +47,7 @@
 </style>
 <script>
   import { clamp } from 'ol/math.js';
-  import { VcsTooltip } from '@vcsuite/ui-components';
+  import VcsTooltip from '../components/notification/VcsTooltip.vue';
 
   /**
    * A vertical slider from 0 to -90. pass value with v-model