@vcmap/ui 5.0.0-rc.6

package/src/manager/toolbox/ToolboxMultiSelectButton.vue

@@ -0,0 +1,96 @@
+<template>
+  <span v-if="group.options && group.options[0]" class="ma-1 position-relative" :class="[...customClasses]">
+    <v-btn
+      class="expand-button mb-0 w-16 h-10"
+      :color="active ? 'white' : null"
+      :text="!active ? true : null"
+      @click="() => setOpen(group.id, !group.open)"
+      :class="{
+        'mb-0': active,
+        'h-full': active,
+        'rounded-b-0': active
+      }"
+      :disabled="group.options[0].disabled"
+      elevation="0"
+    >
+      <slot name="selected-icon">
+        <v-icon v-text="group.icon" />
+      </slot>
+      <slot />
+      <v-icon
+        :class="{ 'rotate-180--right': active }"
+        v-if="group.options.length > 1"
+        v-text="'mdi-chevron-down'"
+      />
+    </v-btn>
+
+    <v-card v-if="group.open" tile style="position: absolute; min-width: 150px">
+      <v-list dense>
+        <v-list-item-group>
+          <v-list-item
+            v-for="option of group.options"
+            :key="option.id"
+            @click="() => selectOption(option.id)"
+            dense
+          >
+            <v-list-item-action>
+              <input type="checkbox" :checked="option.selected" :class="option.selected ? 'y' : 'n'">
+            </v-list-item-action>
+            <v-list-item-content>
+              <v-list-item-title>{{ option.text }}</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list-item-group>
+      </v-list>
+    </v-card>
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.expand-button {
+  ::v-deep {
+    max-width: 68px;
+
+    .v-btn__content {
+      max-width: 48px;
+    }
+  }
+}
+</style>
+
+<script>
+  import { ref } from '@vue/composition-api';
+
+  export default {
+    name: 'VcsToolboxSingleSelectButton',
+    props: {
+      value: {
+        type: Boolean,
+        default: undefined,
+      },
+      group: {
+        type: Object,
+        default: () => ({}),
+      },
+      customClasses: {
+        type: Array,
+        default: () => [],
+      },
+    },
+    setup({ value }, { emit }) {
+      const open = ref(false);
+      const selectOption = (id) => {
+        emit('selected', id);
+      };
+      const setOpen = (id, o) => {
+        emit('set-open', { id, open: o });
+      };
+      return {
+        active: value,
+        open,
+        selectOption,
+        setOpen,
+      };
+    },
+  };
+</script>

package/src/manager/toolbox/ToolboxSingleSelectButton.vue

@@ -0,0 +1,98 @@
+<template>
+  <span class="ma-1 position-relative" :class="[...customClasses]">
+    <v-btn
+      class="expand-button mb-0 w-16 h-10"
+      :color="active ? 'white' : null"
+      :text="!active ? true : null"
+      @click="() => setOpen(group.id, !group.open)"
+      :class="{
+        'mb-0': active,
+        'h-full': active,
+        'rounded-b-0': active,
+        'border-2--primary': group.options[0].selected
+      }"
+      :disabled="group.options[0].disabled"
+      elevation="0"
+    >
+      <slot name="selected-icon">
+        <v-icon v-text="group.options[0].icon" />
+      </slot>
+      <slot />
+      <v-icon
+        :class="{ 'rotate-180--right': active }"
+        v-if="group.options.length > 1"
+        v-text="'mdi-chevron-down'"
+      />
+
+    </v-btn>
+
+
+    <div
+      v-if="group.open"
+      class="d-flex flex-row white rounded-b position-absolute z-index-1 pos-t-11"
+    >
+      <slot name="menu-items">
+
+        <v-btn
+          class="py-1 rounded-t-0 rounded-br-0 h-10.5 -mt-2"
+          elevation="0"
+          v-for="option of group.options.slice(1)"
+          :key="option.id"
+          @click="() => selectOption(option.id)"
+        >
+          <v-icon class="mt-1.5" v-text="option.icon" />
+        </v-btn>
+      </slot>
+    </div>
+  </span>
+</template>
+
+<style lang="scss" scoped>
+  .expand-button {
+    ::v-deep {
+      max-width: 68px;
+
+      .v-btn__content {
+        max-width: 48px;
+      }
+    }
+  }
+</style>
+
+<script>
+  import { ref } from '@vue/composition-api';
+
+  export default {
+    name: 'VcsToolboxSingleSelectButton',
+    props: {
+      value: {
+        type: Boolean,
+        default: false,
+      },
+      group: {
+        type: Object,
+        default: () => ({}),
+      },
+      customClasses: {
+        type: Array,
+        default: () => [],
+      },
+    },
+    setup({ value }, { emit }) {
+      const open = ref(false);
+      const selectOption = (id) => {
+        emit('selected', id);
+        emit('set-open', { id, open: !open });
+      };
+      const setOpen = (id, o) => {
+        emit('set-open', { id, open: o });
+      };
+      return {
+        active: value,
+        open,
+        selectOption,
+        setOpen,
+      };
+    },
+  };
+</script>

package/src/manager/toolbox/toolbox-manager.js

@@ -0,0 +1,203 @@
+/* eslint-disable import/prefer-default-export */
+import { VcsEvent } from '@vcmap/core';
+import { reactive } from '@vue/composition-api';
+import Vue from 'vue';
+
+/**
+ * @typedef ToolboxGroup
+ * @property {string} icon
+ * @property {string | number} id
+ * @property {boolean} open
+ * @property {ToolboxItem[]} options
+ * @property {boolean} active
+ */
+/**
+ * @typedef ToolboxManagerState
+ * @property {boolean} visible
+ * @property {Object.<string, ToolboxGroup>} groups
+ */
+
+/**
+ * @typedef ToolboxItem
+ * @property {string | number} id
+ * @property {string} icon
+ * @property {boolean} active
+ * @property {boolean} selected
+ * @property {boolean} disabled
+ * @property {number} slot
+ */
+
+export class ToolboxManager {
+  constructor() {
+    this.onAdded = new VcsEvent();
+    this.onRemoved = new VcsEvent();
+    /** @type {ToolboxManagerState} */
+    this.state = reactive({
+      visible: true,
+      groups: {},
+    });
+  }
+
+  setGroupOpen(id, open) {
+    Object.values(this.state.groups).forEach((group) => {
+      if (group.id === id) {
+        Vue.set(this.state.groups, group.id, {
+          ...group,
+          open,
+        });
+      } else {
+        Vue.set(this.state.groups, group.id, {
+          ...group,
+          open: false,
+        });
+      }
+    });
+  }
+
+  /** @method */
+  toggle() {
+    Vue.set(this.state, 'visible', !this.state.visible);
+  }
+
+  /**
+   * @method
+   * @param {string} id
+   * @returns {boolean}
+   */
+  has(id) {
+    return !!this.get(id);
+  }
+
+  /**
+   * @method
+   * @param {string} id
+   * @returns {Object}
+   */
+  get(id) {
+    return Object.values(this.state.groups)
+      .map(group => group.options)
+      .flat()
+      .find(item => item && item.id === id);
+  }
+
+  /**
+   * @param {string} id
+   * @param {boolean} disabled
+   */
+  setDisabled(id, disabled) {
+    const [key, slot] = this.getSlotIndexAndEntry(id);
+    const entry = slot.options.find(s => s.id === id);
+    entry.disabled = disabled;
+
+    Vue.set(this.state.groups, key, slot);
+  }
+
+  /**
+   * TODO: return item as well
+   * @param {string} id
+   * @returns {[string, ToolboxGroup]}
+   */
+  getSlotIndexAndEntry(id) {
+    return Object.entries(this.state.groups).find(
+      entry => entry[1] &&
+        entry[1].options &&
+        entry[1].options.find(v => v.id === id),
+    );
+  }
+
+  /** @param {string} id */
+  selectOption(id) {
+    const [key, slot] = this.getSlotIndexAndEntry(id);
+    const option = slot.options.find(opt => opt.id === id);
+    if (option) {
+      option.selected = !option.selected;
+    }
+
+    Vue.set(this.state.groups, key, { ...slot });
+  }
+
+  /**
+   * @param {string} id
+   * @returns {number}
+   */
+  getSlotIndexFor(id) {
+    const [index] = Object.entries(this.state.groups).find(entry => entry[1].options.find(o => o.id === id));
+    return index;
+  }
+
+  /** @returns {number} */
+  getNumberOfUsedSlots() {
+    return Object.values(this.state.groups).reduce(
+      (acc, curr) => (curr.type === 'toggleButton' ||
+        curr.type === 'customComponent' ||
+        (curr.options && curr.options.length) ?
+        acc + 1 :
+        acc),
+      0,
+    );
+  }
+
+  /**  @param {string} id  */
+  bringToTop(id) {
+    const [key, slot] = this.getSlotIndexAndEntry(id);
+
+    const updated = [
+      slot.options.find(i => i.id === id),
+      ...slot.options.filter(i => i.id !== id),
+    ];
+
+    Vue.set(this.state.groups, key, {
+      ...slot,
+      options: updated,
+    });
+  }
+
+  /**
+   * @param {ToolboxItem} toolboxItem
+   * @param {string | number} slot
+   */
+  addToolboxItem(toolboxItem, slot) {
+    if (this.has(toolboxItem.id)) {
+      throw new Error(
+        `Toolbox-Item with id ${toolboxItem.id} has already been registered`,
+      );
+    }
+    Vue.set(this.state.groups, slot, {
+      ...this.state.groups[slot],
+      options: [...this.state.groups[slot].options, toolboxItem],
+    });
+    this.onAdded.raiseEvent(toolboxItem.id);
+  }
+
+  /**
+   * @param {ToolboxGroup} group
+   * @param {string | number} slot
+   */
+  addToolboxGroup(group, slot) {
+    if (this.state.groups[slot]) {
+      throw new Error(
+        `Toolbox-Group with slot-id ${slot} has already been registered`,
+      );
+    }
+    Vue.set(this.state.groups, slot, group);
+  }
+
+  /**
+   * @method
+   * @param {string | number} id ID of popover to be removed
+   */
+  removeToolboxItem(id) {
+    const slotIndex = this.getSlotIndexFor(id);
+    if (!slotIndex) {
+      throw new Error(`Cannot find slot index for toolbar item with id ${id}`);
+    }
+
+    Vue.set(this.state.groups, slotIndex, {
+      ...this.state.groups[slotIndex],
+      options: [
+        ...this.state.groups[slotIndex].options.filter(s => s.id !== id),
+      ],
+    });
+    this.onRemoved.raiseEvent(id);
+  }
+}

package/src/manager/window/WindowComponent.vue

@@ -0,0 +1,133 @@
+<template>
+  <div
+    :id="`window-component--${windowState.id}`"
+    class="vsc-window v-sheet elevation-0 position-absolute"
+    ref="windowComponentRef"
+    @click="clicked"
+  >
+    <v-sheet
+      v-if="!windowState.hideHeader"
+      ref="draggableHeaderRef"
+      class="v-sheet elevation-3 pa-2 transition-color-100-ease"
+      :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,
+      }"
+    >
+      <slot />
+    </v-sheet>
+  </div>
+</template>
+
+<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 !== WindowSlot.STATIC);
+      const isDocked = computed(() => slotWindow !== WindowSlot.DETACHED);
+      const clicked = (e) => {
+        emit('click', e);
+      };
+
+      let dragOverSub;
+      let dropSub;
+      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 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) => {
+                const style = window.getComputedStyle(windowComponentRef.value, 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,46 @@
+<template>
+  <span class="d-flex justify-space-between">
+    <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">
+        {{ windowState.headerTitle | translate }}
+      </h3>
+    </span>
+    <v-icon
+      class=".float-right"
+      @click.stop="close"
+      size="16"
+      v-text="'mdi-close-thick'"
+    />
+  </span>
+</template>
+
+<script>
+
+  export default {
+    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,109 @@
+<template>
+  <div>
+    <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>
+
+<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>