@vcmap/ui 5.0.0-rc.15 → 5.0.0-rc.17

package/src/manager/window/WindowComponent.vue

@@ -2,8 +2,10 @@
   <v-sheet
     :id="`window-component--${windowState.id}`"
     class="elevation-3 position-absolute d-flex flex-column"
-    ref="windowComponentRef"
     @click="clicked"
+    @dragstart="dragStart"
+    @dragend="dragEnd"
+    :draggable="isDynamic"
     :class="{
       'rounded': !isDocked,
       'marginToTop': isDocked
@@ -11,15 +13,13 @@
   >
     <div
       v-if="!windowState.hideHeader"
-      ref="draggableHeaderRef"
       class="pa-2"
       :class="{
         'cursor-grab': isDynamic,
         'grey--text': !isOnTop,
       }"
-      :draggable="isDynamic"
     >
-      <slot name="headerComponent" />
+      <slot name="headerComponent" :props="$attrs" />
     </div>
     <v-divider />
     <div
@@ -40,13 +40,21 @@
 
 <script>
   import {
-    onMounted, onUnmounted, computed, ref, nextTick,
+    computed, inject, provide,
   } from 'vue';
-  import { fromEvent } from 'rxjs';
-  import { switchMap, take, map, tap } from 'rxjs/operators';
   import { VDivider, VSheet } from 'vuetify/lib';
   import { WindowSlot } from './windowManager.js';
 
+  /**
+   * 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} clicked - raised when the component is clicked
+   * @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: {
@@ -68,77 +76,50 @@
         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);
+    setup(props, { emit }) {
+      const app = inject('vcsApp');
+      const { provides } = app.windowManager.get(props.windowState.id);
+      Object.entries(provides)
+        .forEach(([key, value]) => {
+          provide(key, value);
+        });
+
+      const isDynamic = computed(() => props.slotWindow !== WindowSlot.STATIC);
+      const isDocked = computed(() => props.slotWindow !== WindowSlot.DETACHED);
+      /**
+       * @param {PointerEvent} e
+       */
       const clicked = (e) => {
         emit('click', e);
       };
+      /**
+       * @type {DragEvent}
+       */
+      let startEvent;
+      /**
+       * @param {DragEvent} e
+       */
+      const dragStart = (e) => {
+        startEvent = e;
+      };
+      /**
+       * @param {DragEvent} endEvent
+       */
+      const dragEnd = (endEvent) => {
+        const movement = {
+          dx: endEvent.clientX - startEvent.clientX,
+          dy: endEvent.clientY - startEvent.clientY,
+        };
+        emit('moved', movement);
+        startEvent = null;
+      };
 
-      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,
+        dragStart,
+        dragEnd,
       };
     },
   };

package/src/manager/window/WindowComponentHeader.vue

@@ -3,54 +3,122 @@
     <span>
       <v-icon
         v-if="windowState.headerIcon"
-        class="mr-2 primary--text"
+        class="mr-2"
+        :class="{ 'text--primary': isOnTop }"
         v-text="windowState.headerIcon"
       />
-      <h3 class="font-size-14 d-inline-block user-select-none font-weight-bold">
+      <h3
+        class="font-size-14 d-inline-block user-select-none font-weight-bold"
+        :class="{ 'text--primary': isOnTop }"
+      >
         {{ $t(windowState.headerTitle) }}
       </h3>
     </span>
-    <VcsButton
-      @click.stop="close"
-      small
-      icon="mdi-close-thick"
-    />
+    <div class="d-flex justify-space-between align-center">
+      <template v-if="windowState.headerActions?.length > 0">
+        <VcsActionButtonList
+          :actions="windowState.headerActions"
+          :overflow-count="windowState.headerActionsOverflowCount ?? 3"
+          small
+        />
+        <v-divider
+          vertical
+          inset
+          class="mx-1"
+        />
+      </template>
+      <VcsButton
+        v-if="windowState.infoUrl"
+        @click.stop="infoAction.callback()"
+        small
+        :icon="infoAction.icon"
+        :tooltip="infoAction.title"
+        class="px-1"
+      />
+      <VcsButton
+        v-if="isDockable"
+        @click.stop="pin"
+        small
+        icon="mdi-pin"
+        tooltip="components.pin"
+        class="px-1"
+      />
+      <VcsButton
+        @click.stop="close"
+        small
+        icon="mdi-close-thick"
+        tooltip="components.close"
+      />
+    </div>
   </span>
 </template>
 
-<style>
+<style lang="scss" scoped>
 .window-component-header{
   max-height: 16px;
+
+  .v-divider--vertical.v-divider--inset {
+    margin-top: 2px;
+  }
 }
 </style>
 
 <script>
-  import { VIcon } from 'vuetify/lib';
+  import { VIcon, VDivider } from 'vuetify/lib';
+  import { computed } from 'vue';
   import VcsButton from '../../components/buttons/VcsButton.vue';
+  import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
+  import { createLinkAction } from '../../actions/actionHelper.js';
 
+  /**
+   * 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
+   */
   export default {
     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 infoAction = props.windowState.infoUrl ? createLinkAction({
+        name: 'info',
+        title: 'content.infoAction.title',
+        icon: '$vcsInfo',
+      }, props.windowState.infoUrl) : {};
 
       return {
+        pin,
         close,
-        clicked,
+        isDockable,
+        infoAction,
       };
     },
   };

package/src/manager/window/WindowManager.vue

@@ -8,9 +8,9 @@
       :window-state="getState(id)"
       :slot-window="getSlot(id)"
       :z-index="zIndex"
-      @dropped="dropped(id, $event)"
+      @moved="move(id, $event)"
       @click="clicked(id)"
-      :style="getStyles(id, zIndex)"
+      :style="getStyles(id, zIndex).value"
       :class="getState(id).classes"
       :is-on-top="isOnTop(zIndex)"
     >
@@ -23,7 +23,11 @@
         <component
           :is="getHeaderComponent(id)"
           :window-state="getState(id)"
+          :is-on-top="isOnTop(zIndex)"
+          :slot-window="getSlot(id)"
+          v-bind="getProps(id)"
           @close="close(id)"
+          @pin="pin(id)"
         />
       </template>
     </WindowComponent>
@@ -47,11 +51,15 @@
 </style>
 
 <script>
-  import { inject, ref } from 'vue';
+  import { computed, inject, onUnmounted, ref } from 'vue';
 
   import WindowComponent from './WindowComponent.vue';
   import WindowComponentHeader from './WindowComponentHeader.vue';
+  import { applyPositionOnTarget, getTargetSize, moveWindow } from './windowHelper.js';
 
+  /**
+   * WindowManager rendering all registered WindowComponents
+   */
   export default {
     name: 'VcsWindowManager',
     components: { WindowComponent },
@@ -59,55 +67,70 @@
       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 ?? {};
       };
-
+      /**
+       * @param {number} zIndex
+       * @returns {boolean}
+       */
       const isOnTop = (zIndex) => {
         return zIndex === componentIds.length - 1;
       };
-
-      const getStyles = (id, zIndex) => {
+      /**
+       * @param {string} id
+       * @param {number} zIndex
+       * @returns {import("vue").ComputedRef<Object>}
+       */
+      const getStyles = (id, zIndex) => computed(() => {
         const windowComponent = windowManager.get(id);
         const state = windowComponent?.state;
-        const position = windowComponent?.position;
+        const position = applyPositionOnTarget(windowComponent?.position, targetSize.value);
         return {
           zIndex,
-          left: position.left,
-          top: position.top,
-          right: position.right,
-          bottom: position.bottom,
-          width: position.width,
-          height: position.height,
+          ...position,
           ...(state.styles || {}),
         };
-      };
-
+      });
+      /**
+       * @param {string} id
+       */
       const clicked = (id) => {
         if (windowManager.has(id)) {
           windowManager.bringWindowToTop(id);
         }
       };
+      /**
+       * @param {string} id
+       * @param {{dx: number, dy: number}} translation
+       */
+      const move = (id, translation) => {
+        moveWindow(id, translation, windowManager, targetSize.value);
+      };
 
-      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 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: ref(componentIds),
@@ -119,8 +142,9 @@
         isOnTop,
         getSlot: id => windowManager.get(id).slot,
         close: (id) => { windowManager.remove(id); },
-        dropped,
+        pin: (id) => { windowManager.pinWindow(id); },
         clicked,
+        move,
       };
     },
   };