@vcmap/ui 5.0.0-rc.8 → 5.0.0

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

package/src/manager/window/WindowComponentHeader.vue

@@ -1,53 +1,144 @@
 <template>
-  <span class="d-flex justify-space-between align-center window-component-header">
-    <span>
+  <div
+    class="d-flex justify-space-between align-center window-component-header"
+  >
+    <h3 class="d-flex align-center">
       <v-icon
         v-if="windowState.headerIcon"
-        class="mr-2 primary--text"
-        v-text="windowState.headerIcon"
+        class="mr-1"
+        :class="{ 'primary--text': isOnTop }"
+        size="16"
+      >
+        {{ windowState.headerIcon }}
+      </v-icon>
+      <span
+        class="d-inline-block user-select-none font-weight-bold"
+        :class="{ 'text--primary': isOnTop }"
+      >
+        {{ translatedHeaderTitle }}
+      </span>
+    </h3>
+    <div class="d-flex justify-space-between align-center">
+      <template v-if="windowState.headerActions?.length > 0">
+        <VcsActionButtonList
+          :actions="windowState.headerActions"
+          :overflow-count="windowState.headerActionsOverflow ?? 3"
+        />
+        <v-divider vertical inset class="mx-1" />
+      </template>
+      <VcsButton
+        v-if="infoAction"
+        @click.stop="infoAction.callback()"
+        :icon="infoAction.icon"
+        :tooltip="infoAction.title"
+        class="px-1 d-flex"
       />
-      <h3 class="font-size-14 d-inline-block user-select-none font-weight-bold">
-        {{ windowState.headerTitle | translate }}
-      </h3>
-    </span>
-    <VcsButton
-      @click.stop="close"
-      small
-      icon="mdi-close-thick"
-    />
-  </span>
+      <VcsButton
+        v-if="isDockable"
+        @click.stop="pin"
+        icon="mdi-pin"
+        tooltip="components.pin"
+        class="px-1 d-flex"
+      />
+      <VcsButton
+        @click.stop="close"
+        icon="mdi-close-thick"
+        tooltip="components.close"
+        class="d-flex"
+      />
+    </div>
+  </div>
 </template>
 
-<style>
-.window-component-header{
-  max-height: 16px;
-}
+<style lang="scss" scoped>
+  .window-component-header {
+    max-height: 16px;
+
+    h3 {
+      line-height: 16px;
+    }
+    .v-divider--vertical.v-divider--inset {
+      margin-top: 2px;
+    }
+  }
 </style>
 
 <script>
-  import { VcsButton } from '@vcsuite/ui-components';
+  import { VIcon, VDivider } from 'vuetify/lib';
+  import { computed, getCurrentInstance } from 'vue';
+  import VcsButton from '../../components/buttons/VcsButton.vue';
+  import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
+  import { createLinkAction } from '../../actions/actionHelper.js';
 
+  /**
+   * @description Default window component header with drag functionality close action and further optional window actions.
+   * @vue-prop {WindowState}    windowState - state of the window component.
+   * @vue-event {void} pin - raised when pin button is clicked
+   * @vue-event {void} close - raised when close button is clicked
+   * @vue-computed {boolean} isDockable
+   * @vue-computed {string} translatedHeaderTitle - translates header title and joins array
+   */
   export default {
-    components: { VcsButton },
+    name: 'WindowComponentHeader',
+    components: {
+      VcsActionButtonList,
+      VcsButton,
+      VIcon,
+      VDivider,
+    },
     props: {
       windowState: {
         type: Object,
         required: true,
       },
+      isOnTop: {
+        type: Boolean,
+        required: true,
+        default: false,
+      },
+      slotWindow: {
+        type: Object,
+        required: true,
+      },
     },
     setup(props, { emit }) {
+      const pin = () => {
+        emit('pin');
+      };
       const close = () => {
         emit('close');
       };
-      const clicked = (e) => {
-        emit('click', e);
-      };
+      const isDockable = computed(
+        () => !props.windowState.hidePin && props.windowState.dockable,
+      );
+
+      const vm = getCurrentInstance().proxy;
+
+      const translatedHeaderTitle = computed(() =>
+        Array.isArray(props.windowState.headerTitle)
+          ? props.windowState.headerTitle.map((t) => vm.$t(t)).join(' ')
+          : vm.$t(props.windowState.headerTitle),
+      );
+
+      const infoAction =
+        props.windowState.infoUrl || props.windowState.infoUrlCallback
+          ? createLinkAction(
+              {
+                name: 'info',
+                title: 'content.infoAction.title',
+                icon: '$vcsHelp',
+              },
+              props.windowState.infoUrl || props.windowState.infoUrlCallback,
+            )
+          : undefined;
 
       return {
+        pin,
         close,
-        clicked,
+        isDockable,
+        translatedHeaderTitle,
+        infoAction,
       };
     },
   };
 </script>
-

package/src/manager/window/WindowManager.vue

@@ -1,16 +1,16 @@
 <template>
-  <div>
+  <div :class="{ 'win-container-mobile': addMobileClass }">
     <WindowComponent
-      v-for="(id, zIndex) in componentIds"
+      v-for="id 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)"
+      :z-index="getComponent(id).zIndex"
+      @moved="move(id, $event)"
+      @mousedown="bringWindowToTop(id)"
+      :style="getStyles(id).value"
       :class="getState(id).classes"
-      :is-on-top="isOnTop(zIndex)"
+      :is-on-top="isOnTop(id)"
     >
       <component
         :is="getComponent(id)"
@@ -21,19 +21,53 @@
         <component
           :is="getHeaderComponent(id)"
           :window-state="getState(id)"
+          :is-on-top="isOnTop(id)"
+          :slot-window="getSlot(id)"
+          v-bind="getProps(id)"
           @close="close(id)"
+          @pin="pin(id)"
         />
       </template>
     </WindowComponent>
   </div>
 </template>
 
+<style scoped lang="scss">
+  .win-container-mobile {
+    position: fixed;
+    bottom: 56px;
+    left: 0;
+    right: 0;
+    z-index: 2;
+    display: contents;
+  }
+  .win-container-mobile > {
+    div {
+      width: 100% !important;
+      max-width: 100% !important;
+      inset: unset !important;
+      border-radius: 0 !important;
+      overflow: auto;
+      bottom: 0 !important;
+      max-height: 50% !important;
+    }
+  }
+</style>
+
 <script>
-  import { inject } from '@vue/composition-api';
+  import { computed, getCurrentInstance, inject, onUnmounted, ref } from 'vue';
 
   import WindowComponent from './WindowComponent.vue';
   import WindowComponentHeader from './WindowComponentHeader.vue';
+  import {
+    getPositionAppliedOnTarget,
+    getTargetSize,
+    moveWindow,
+  } from './windowHelper.js';
 
+  /**
+   * @description WindowManager rendering all registered WindowComponents
+   */
   export default {
     name: 'VcsWindowManager',
     components: { WindowComponent },
@@ -41,68 +75,117 @@
       const app = inject('vcsApp');
       /** @type {WindowManager} */
       const { windowManager } = app;
-
       const { componentIds } = windowManager;
-
+      const targetSize = ref(null);
+      /**
+       * @param {string} id
+       * @returns {WindowState}
+       */
       const getState = (id) => {
         return windowManager.get(id)?.state;
       };
-
+      /**
+       * @param {string} id
+       * @returns {Object}
+       */
       const getProps = (id) => {
         return windowManager.get(id)?.props ?? {};
       };
-
-      const isOnTop = (zIndex) => {
-        return zIndex === componentIds.length - 1;
+      /**
+       * @param {string} id
+       * @returns {boolean}
+       */
+      const isOnTop = (id) => {
+        return windowManager.get(id)?.zIndex.value === 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 || {}),
-        };
+      /**
+       * @param {WindowComponent} windowComponent
+       * @returns {WindowPosition|null}
+       */
+      const getPosition = (windowComponent) => {
+        if (!windowComponent) {
+          return null;
+        }
+        const parentComponent =
+          !windowComponent?.state?.dockable &&
+          windowManager.get(windowComponent.parentId);
+        return getPositionAppliedOnTarget(
+          windowComponent?.position,
+          targetSize.value,
+          getPosition(parentComponent),
+        );
       };
-
-      const clicked = (id) => {
-        if (windowManager.has(id)) {
+      /**
+       * @param {string} id
+       * @returns {import("vue").ComputedRef<Object>}
+       */
+      const getStyles = (id) =>
+        computed(() => {
+          const windowComponent = windowManager.get(id);
+          return {
+            zIndex: windowComponent.zIndex.value,
+            ...getPosition(windowComponent),
+            ...(windowComponent?.state?.styles || {}),
+          };
+        });
+      /**
+       * @param {string} id
+       */
+      const bringWindowToTop = (id) => {
+        if (windowManager.has(id) && !isOnTop(id)) {
           windowManager.bringWindowToTop(id);
         }
       };
+      /**
+       * @param {string} id
+       * @param {{dx: number, dy: number}} translation
+       */
+      const move = (id, translation) => {
+        const windowComponent = windowManager.get(id);
+        const position = getPosition(windowComponent);
+        moveWindow(id, translation, windowManager, targetSize.value, position);
+      };
 
-      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,
-        });
+      const componentIdRef = ref(componentIds);
+
+      const addMobileClass = computed(() => {
+        return (
+          getCurrentInstance().proxy.$vuetify.breakpoint.xs &&
+          componentIdRef.value.length > 0
+        );
+      });
+
+      const setTargetSize = () => {
+        targetSize.value = getTargetSize(app.maps.target);
       };
+      window.addEventListener('resize', setTargetSize);
+      const setTargetDestroy =
+        app.maps.mapActivated.addEventListener(setTargetSize);
+
+      onUnmounted(() => {
+        window.removeEventListener('resize', setTargetSize);
+        setTargetDestroy();
+      });
 
       return {
-        componentIds,
-        getComponent: id => windowManager.get(id).component,
-        getHeaderComponent: id => windowManager.get(id).headerComponent || WindowComponentHeader,
+        componentIds: componentIdRef,
+        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,
+        getSlot: (id) => windowManager.get(id).slot,
+        close: (id) => {
+          windowManager.remove(id);
+        },
+        pin: (id) => {
+          windowManager.pinWindow(id);
+        },
+        bringWindowToTop,
+        move,
+        addMobileClass,
       };
     },
   };