@vcmap/ui 5.0.0-rc.10

package/src/manager/toolbox/ToolboxManager.vue

@@ -0,0 +1,157 @@
+<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 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>
+    </v-toolbar-items>
+  </v-toolbar>
+</template>
+
+<style lang="scss" scoped>
+  .toolbar__secondary {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+
+    &.v-toolbar {
+      ::v-deep .v-toolbar__content {
+        padding: 0;
+      }
+    }
+
+    &.theme--light.v-toolbar.v-sheet {
+      background-color: #ffffffda;
+    }
+  }
+
+  .marginToTop {
+    margin-top: 2px;
+  }
+</style>
+
+<script>
+
+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
+ */
+
+/**
+ * @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 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;
+      },
+    };
+
+    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);
+
+    /**
+     * 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

@@ -0,0 +1,140 @@
+<template>
+  <v-sheet
+    :id="`window-component--${windowState.id}`"
+    class="elevation-3 position-absolute d-flex flex-column"
+    ref="windowComponentRef"
+    @click="clicked"
+    :class="{
+      'rounded': !isDocked,
+      'marginToTop': isDocked
+    }"
+  >
+    <div
+      v-if="!windowState.hideHeader"
+      ref="draggableHeaderRef"
+      class="pa-2"
+      :class="{
+        'cursor-grab': isDynamic,
+        'grey--text': !isOnTop,
+      }"
+      :draggable="isDynamic"
+    >
+      <slot name="headerComponent" />
+    </div>
+    <v-divider />
+    <div
+      class="overflow-x-hidden"
+    >
+      <slot />
+    </div>
+  </v-sheet>
+</template>
+
+<style scoped>
+
+ .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 { WindowSlot } from './windowManager.js';
+
+  export default {
+    props: {
+      windowState: {
+        type: Object,
+        required: true,
+      },
+      isOnTop: {
+        type: Boolean,
+        required: true,
+        default: false,
+      },
+      slotWindow: {
+        type: Object,
+        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);
+            });
+          });
+        }
+      });
+
+      onUnmounted(() => {
+        if (dragOverSub) {
+          dragOverSub.unsubscribe();
+        }
+        if (dropSub) {
+          dropSub.unsubscribe();
+        }
+      });
+      return {
+        isDynamic,
+        isDocked,
+        draggableHeaderRef,
+        windowComponentRef,
+        clicked,
+      };
+    },
+  };
+</script>
+

package/src/manager/window/WindowComponentHeader.vue

@@ -0,0 +1,53 @@
+<template>
+  <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 font-weight-bold">
+        {{ $t(windowState.headerTitle) }}
+      </h3>
+    </span>
+    <VcsButton
+      @click.stop="close"
+      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,
+        required: true,
+      },
+    },
+    setup(props, { emit }) {
+      const close = () => {
+        emit('close');
+      };
+      const clicked = (e) => {
+        emit('click', e);
+      };
+
+      return {
+        close,
+        clicked,
+      };
+    },
+  };
+</script>
+

package/src/manager/window/WindowManager.vue

@@ -0,0 +1,126 @@
+<template>
+  <div :class="$vuetify.breakpoint.xs ? 'win-container-mobile' : 'unset'">
+    <WindowComponent
+      v-for="(id, zIndex) in componentIds"
+      :key="id"
+      :window-state="getState(id)"
+      :slot-window="getSlot(id)"
+      :z-index="zIndex"
+      @dropped="dropped(id, $event)"
+      @click="clicked(id)"
+      :style="getStyles(id, zIndex)"
+      :class="getState(id).classes"
+      :is-on-top="isOnTop(zIndex)"
+    >
+      <component
+        :is="getComponent(id)"
+        :window-state="getState(id)"
+        v-bind="getProps(id)"
+      />
+      <template v-if="!getState(id).hideHeader" #headerComponent>
+        <component
+          :is="getHeaderComponent(id)"
+          :window-state="getState(id)"
+          @close="close(id)"
+        />
+      </template>
+    </WindowComponent>
+  </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';
+
+  import WindowComponent from './WindowComponent.vue';
+  import WindowComponentHeader from './WindowComponentHeader.vue';
+
+  export default {
+    name: 'VcsWindowManager',
+    components: { WindowComponent },
+    setup() {
+      const app = inject('vcsApp');
+      /** @type {WindowManager} */
+      const { windowManager } = app;
+
+      const { componentIds } = windowManager;
+
+      const getState = (id) => {
+        return windowManager.get(id)?.state;
+      };
+
+      const getProps = (id) => {
+        return windowManager.get(id)?.props ?? {};
+      };
+
+      const isOnTop = (zIndex) => {
+        return zIndex === componentIds.length - 1;
+      };
+
+      const getStyles = (id, zIndex) => {
+        const windowComponent = windowManager.get(id);
+        const state = windowComponent?.state;
+        const position = windowComponent?.position;
+        return {
+          zIndex,
+          left: position.left,
+          top: position.top,
+          right: position.right,
+          bottom: position.bottom,
+          width: position.width,
+          height: position.height,
+          ...(state.styles || {}),
+        };
+      };
+
+      const clicked = (id) => {
+        if (windowManager.has(id)) {
+          windowManager.bringWindowToTop(id);
+        }
+      };
+
+      const dropped = (id, pos) => {
+        const { innerWidth, innerHeight } = window;
+        // clip position
+        const top = Math.min(Math.max(0, pos.top - pos.dy), innerHeight - pos.height);
+        const left = Math.min(Math.max(0, pos.left - pos.dx), innerWidth - pos.width);
+        windowManager.setWindowPositionOptions(id, {
+          top,
+          left,
+          width: pos.width,
+          height: pos.height,
+        });
+      };
+
+      return {
+        componentIds,
+        getComponent: id => windowManager.get(id).component,
+        getHeaderComponent: id => windowManager.get(id).headerComponent || WindowComponentHeader,
+        getStyles,
+        getState,
+        getProps,
+        isOnTop,
+        getSlot: id => windowManager.get(id).slot,
+        close: (id) => { windowManager.remove(id); },
+        dropped,
+        clicked,
+      };
+    },
+  };
+</script>