@rancher/shell 3.0.7 → 3.0.8-rc.2

package/components/nav/WindowManager/index.vue

@@ -1,588 +1,74 @@
-<script>
-import { mapState } from 'vuex';
-import debounce from 'lodash/debounce';
-import {
-  screenRect, boundingRect, BOTTOM, RIGHT, LEFT
-} from '@shell/utils/position';
-
-export default {
-  emits: ['draggable'],
-
-  data() {
-    return {
-      dragOffset:     0,
-      reportedHeight: this.height,
-      reportedWidth:  this.width,
-      component:      { },
-    };
-  },
-
-  computed: {
-    ...mapState('wm', ['tabs', 'active', 'open', 'userHeight', 'userWidth', 'userPin']),
-
-    height: {
-      get() {
-        if ( this.userHeight ) {
-          return this.userHeight;
-        }
-
-        const windowHeight = window.innerHeight;
-        let height = parseInt(window.localStorage.getItem('wm-height'), 10);
-
-        if ( !height ) {
-          height = Math.round(windowHeight / 2);
-        }
-        height = Math.min(height, 3 * windowHeight / 4);
-
-        window.localStorage.setItem('wm-height', height);
-
-        return height;
-      },
-
-      set(val) {
-        this.$store.commit('wm/setUserHeight', val);
-        window.localStorage.setItem('wm-height', val);
-        this.show();
-
-        return val;
-      },
-    },
-
-    width: {
-      get() {
-        if (this.userWidth) {
-          return this.userWidth;
-        }
-
-        const windowWidth = window.innerWidth;
-        let width = parseInt(window.localStorage.getItem('wm-width'), 10);
-
-        if (!width) {
-          width = Math.round(windowWidth / 8);
-        }
-        width = Math.min(width, 3 * windowWidth / 4);
-
-        window.localStorage.setItem('wm-width', width);
-
-        return width;
-      },
-      set(val) {
-        this.$store.commit('wm/setUserWidth', val);
-        window.localStorage.setItem('wm-width', val);
-        this.show();
-
-        return val;
-      }
-    },
-
-    pinClass() {
-      return `pin-${ this.userPin }`;
-    },
-  },
-
-  watch: {
-    userPin(v) {
-      if (this.open) {
-        this.setWmDimensions();
-        if (v === LEFT || v === RIGHT) {
-          this.setReportedHeight(window.innerHeight - 55);
-        }
-      }
-    },
-
-    tabs() {
-      this.toggle(true);
-    },
-
-    open(neu) {
-      if ( neu ) {
-        this.setReportedHeight();
-        this.show();
-      } else {
-        this.hide();
-      }
-    },
+<script setup lang="ts">
+import { BOTTOM, LEFT, RIGHT } from '@shell/utils/position';
+import HorizontalPanel from './panels/HorizontalPanel.vue';
+import VerticalPanel from './panels/VerticalPanel.vue';
+import PinArea from './PinArea.vue';
+import useComponentsMount from './composables/useComponentsMount';
+import useTabsHandler from './composables/useTabsHandler';
+import usePanelsHandler from '@shell/components/nav/WindowManager/composables/usePanelsHandler';
+import { Layout, Position } from '@shell/types/window-manager';
+
+/**
+ * This component is responsible for rendering the window manager panels and tabs.
+ * It uses composables to manage the state and behavior of the panels and tabs.
+ *
+ * Props:
+ * - Layouts define which panels are enabled depending on the UI area configuration.
+ * - Positions define where the panels are located (bottom, left, right).
+ *
+ * Behavior:
+ * - Panels are conditionally rendered based on the current layout and enabled positions.
+ * - Tabs bodies are teleported to their respective containers based on their configuration.
+ *   - The component for each tab is dynamically loaded and rendered within a keep-alive block.
+ * - The PinArea component is included to manage the dragging of tabs.
+ */
+
+const props = defineProps({
+  layout: {
+    type:    String as () => Layout,
+    default: Layout.default,
   },
-
-  mounted() {
-    this.toggle(true);
-    this.queueUpdate = debounce(this.setReportedHeight, 250);
+  positions: {
+    type:    Array as () => Position[],
+    default: () => [BOTTOM, LEFT, RIGHT]
   },
+});
 
-  methods: {
-    switchTo(id) {
-      this.$store.commit('wm/setActive', id);
-    },
-
-    toggle(reverse = false) {
-      if ( this.dragging ) {
-        return;
-      }
-
-      if ( this.open ^ reverse ) {
-        this.hide();
-      } else {
-        this.show();
-      }
-    },
-
-    show() {
-      this.setWmDimensions();
-      this.$store.commit('wm/setOpen', true);
-    },
-
-    hide() {
-      if ( this.tabs.length ) {
-        document.documentElement.style.setProperty('--wm-height', `calc(var(--wm-tab-height, 29px) + 2px)`);
-      } else {
-        document.documentElement.style.setProperty('--wm-height', '0');
-        document.documentElement.style.setProperty('--wm-width', '0');
-      }
-
-      this.$store.commit('wm/setOpen', false);
-    },
-
-    dragYStart(event) {
-      const doc = document.documentElement;
-
-      doc.addEventListener('mousemove', this.dragYMove);
-      doc.addEventListener('touchmove', this.dragYMove, true);
-      doc.addEventListener('mouseup', this.dragYEnd);
-      doc.addEventListener('mouseleave', this.dragYEnd);
-      doc.addEventListener('touchend touchcancel', this.dragYEnd, true);
-      doc.addEventListener('touchstart', this.dragYEnd, true);
-
-      const eventY = event.screenY;
-
-      const rect = boundingRect(event.target);
-      const offset = eventY - rect.top;
-
-      this.dragOffset = offset;
-    },
-
-    dragYMove(event) {
-      const screen = screenRect();
-      const eventY = event.screenY;
-      const min = 50;
-      const max = Math.round( 3 * screen.height / 4);
-
-      let neu = screen.height - eventY + this.dragOffset;
-
-      neu = Math.max(min, Math.min(neu, max));
-
-      this.height = neu;
-      this.dragging = true;
-      this.queueUpdate();
-    },
-
-    dragYEnd(event) {
-      const doc = document.documentElement;
-
-      doc.removeEventListener('mousemove', this.dragYMove);
-      doc.removeEventListener('touchmove', this.dragYMove, true);
-      doc.removeEventListener('mouseup', this.dragYEnd);
-      doc.removeEventListener('mouseleave', this.dragYEnd);
-      doc.removeEventListener('touchend touchcancel', this.dragYEnd, true);
-      doc.removeEventListener('touchstart', this.dragYEnd, true);
-
-      this.setReportedHeight();
-      setTimeout(() => {
-        this.dragging = false;
-      }, 100);
-    },
-
-    dragXStart(event) {
-      const doc = document.documentElement;
-
-      doc.addEventListener('mousemove', this.dragXMove);
-      doc.addEventListener('touchmove', this.dragXMove, true);
-      doc.addEventListener('mouseup', this.dragXEnd);
-      doc.addEventListener('mouseleave', this.dragXEnd);
-      doc.addEventListener('touchend touchcancel', this.dragXEnd, true);
-      doc.addEventListener('touchstart', this.dragXEnd, true);
-
-      const eventX = event.screenX;
-      const rect = boundingRect(event.target);
-
-      switch (this.userPin) {
-      case RIGHT:
-        this.dragOffset = eventX - rect.left;
-        break;
-      case LEFT:
-        this.dragOffset = rect.right - eventX;
-        break;
-      }
-    },
+const { loadComponent } = useComponentsMount();
 
-    dragXMove(event) {
-      const screen = screenRect();
-      const eventX = event.screenX;
-
-      const min = 250;
-      const max = Math.round(2 * screen.width / 5);
-      let neu;
-
-      switch (this.userPin) {
-      case RIGHT:
-        neu = screen.width - eventX + this.dragOffset;
-        break;
-      case LEFT:
-        neu = eventX + this.dragOffset;
-        break;
-      }
-
-      neu = Math.max(min, Math.min(neu, max));
-      this.width = neu;
-      this.dragging = true;
-      debounce(this.setReportedWidth, 250)();
-    },
-
-    dragXEnd(event) {
-      const doc = document.documentElement;
-
-      doc.removeEventListener('mousemove', this.dragXMove);
-      doc.removeEventListener('touchmove', this.dragXMove, true);
-      doc.removeEventListener('mouseup', this.dragXEnd);
-      doc.removeEventListener('mouseleave', this.dragXEnd);
-      doc.removeEventListener('touchend touchcancel', this.dragXEnd, true);
-      doc.removeEventListener('touchstart', this.dragXEnd, true);
-
-      this.setReportedWidth();
-      setTimeout(() => {
-        this.dragging = false;
-      }, 100);
-    },
-
-    setReportedHeight(height = this.height) {
-      this.reportedHeight = height;
-    },
-
-    setReportedWidth() {
-      this.reportedWidth = this.width;
-    },
-
-    setWmDimensions(forceValue) {
-      switch (this.userPin) {
-      case RIGHT:
-      case LEFT:
-        document.documentElement.style.setProperty('--wm-height', `${ window.innerHeight - 55 }px`);
-        document.documentElement.style.setProperty('--wm-width', `${ forceValue || this.width }px`);
-        break;
-      case BOTTOM:
-        document.documentElement.style.setProperty('--wm-height', `${ forceValue || this.height }px`);
-        break;
-      }
-    },
-
-    close(id) {
-      this.$store.dispatch('wm/close', id);
-    },
-
-    componentFor(tab) {
-      if (this.component[tab.component] === undefined) {
-        if (this.$store.getters['type-map/hasCustomWindowComponent'](tab.component)) {
-          this.component[tab.component] = this.$store.getters['type-map/importWindowComponent'](tab.component);
-        } else {
-          console.warn(`Unable to find window component for type '${ tab.component }'`); // eslint-disable-line no-console
-          this.component[tab.component] = null;
-        }
-      }
-
-      return this.component[tab.component];
-    },
-
-    emitDraggable(event) {
-      this.$emit('draggable', event);
-    },
-
-    resizeVertical(arrowUp) {
-      const resizeStep = 20;
-      const height = arrowUp ? this.height + resizeStep : this.height - resizeStep;
-
-      this.height = height;
-
-      this.setWmDimensions(height);
-      this.setReportedHeight(height);
-    },
-
-    resizeHorizontal(arrowLeft) {
-      const resizeStep = 20;
-      let width;
-
-      if (this.userPin === 'left') {
-        width = arrowLeft ? this.width - resizeStep : this.width + resizeStep;
-      } else {
-        width = arrowLeft ? this.width + resizeStep : this.width - resizeStep;
-      }
-
-      this.width = width;
-
-      this.setWmDimensions(width);
-      this.setReportedWidth(width);
-    }
-  }
-};
+const { isPanelEnabled } = usePanelsHandler({ layout: props.layout, positions: props.positions });
+const { tabs } = useTabsHandler();
 </script>
 
 <template>
-  <div
-    v-if="open"
-    id="windowmanager"
-    data-testid="windowmanager"
-    class="windowmanager"
-    :class="{[pinClass]: true}"
+  <HorizontalPanel
+    v-if="isPanelEnabled[BOTTOM]"
+    :position="BOTTOM"
+  />
+  <VerticalPanel
+    v-if="isPanelEnabled[LEFT]"
+    :position="LEFT"
+  />
+  <VerticalPanel
+    v-if="isPanelEnabled[RIGHT]"
+    :position="RIGHT"
+  />
+  <Teleport
+    v-for="{ tab, containerId } in tabs"
+    :key="tab.id"
+    :to="`#${ containerId }`"
   >
-    <div
-      ref="tabs"
-      class="tabs"
-      :class="{
-        'resizer-left': userPin == 'left',
-      }"
-      role="tablist"
-      @keyup.right.prevent="selectNext(1)"
-      @keyup.left.prevent="selectNext(-1)"
-      @mousedown="emitDraggable(true)"
-      @mouseup="emitDraggable(false)"
-    >
-      <div
-        v-if="userPin == 'right'"
-        class="resizer resizer-x"
-        role="button"
-        tabindex="0"
-        :aria-label="t('wm.containerShell.resizeShellWindow', {arrow1: 'left', arrow2: 'right'})"
-        aria-expanded="true"
-        @mousedown.prevent.stop="dragXStart($event)"
-        @touchstart.prevent.stop="dragXStart($event)"
-        @keyup.left.prevent.stop="resizeHorizontal(true)"
-        @keyup.right.prevent.stop="resizeHorizontal(false)"
-      >
-        <i
-          class="icon icon-code"
-          :alt="t('wm.containerShell.resizeShellWindow', {arrow1: 'left', arrow2: 'right'})"
-        />
-      </div>
-      <div
-        v-for="(tab, i) in tabs"
-        :key="i"
-        class="tab"
-        :class="{'active': tab.id === active}"
-        role="tab"
-        :aria-selected="tab.id === active"
-        :aria-label="tab.label"
-        :aria-controls="`panel-${tab.id}`"
-        tabindex="0"
-        @click="switchTo(tab.id)"
-        @keyup.enter.space="switchTo(tab.id)"
-      >
-        <i
-          v-if="tab.icon"
-          class="icon"
-          :class="{['icon-'+ tab.icon]: true}"
-          :alt="t('wm.containerShell.tabIcon')"
-        />
-        <span class="tab-label"> {{ tab.label }}</span>
-        <i
-          data-testid="wm-tab-close-button"
-          class="closer icon icon-x wm-closer-button"
-          :alt="t('wm.containerShell.closeShellTab', { tab: tab.label })"
-          tabindex="0"
-          :aria-label="t('windowmanager.closeTab', { tabId: tab.id })"
-          @click.stop="close(tab.id)"
-          @keyup.enter.space.stop="close(tab.id)"
-        />
-      </div>
-      <div
-        v-if="userPin == 'bottom'"
-        class="resizer resizer-y"
-        role="button"
-        tabindex="0"
-        :aria-label="t('wm.containerShell.resizeShellWindow', {arrow1: 'up', arrow2: 'down'})"
-        aria-expanded="true"
-        @mousedown.prevent.stop="dragYStart($event)"
-        @touchstart.prevent.stop="dragYStart($event)"
-        @click="toggle"
-        @keyup.up.prevent.stop="resizeVertical(true)"
-        @keyup.down.prevent.stop="resizeVertical(false)"
-      >
-        <i
-          class="icon icon-sort"
-          :alt="t('wm.containerShell.resizeShellWindow', {arrow1: 'up', arrow2: 'down'})"
-        />
-      </div>
-      <div
-        v-if="userPin == 'left'"
-        class="resizer resizer-x resizer-align-right"
-        role="button"
-        tabindex="0"
-        :aria-label="t('wm.containerShell.resizeShellWindow', {arrow1: 'left', arrow2: 'right'})"
-        aria-expanded="true"
-        @mousedown.prevent.stop="dragXStart($event)"
-        @touchstart.prevent.stop="dragXStart($event)"
-        @keyup.left.prevent.stop="resizeHorizontal(true)"
-        @keyup.right.prevent.stop="resizeHorizontal(false)"
-      >
-        <i
-          class="icon icon-code"
-          :alt="t('wm.containerShell.resizeShellWindow', {arrow1: 'left', arrow2: 'right'})"
-        />
-      </div>
-    </div>
-    <div
-      v-for="tab in tabs"
-      :id="`panel-${tab.id}`"
-      :key="tab.id"
-      class="body"
-      :class="{'active': tab.id === active}"
-      draggable="false"
-      role="tabpanel"
-      @dragstart.prevent.stop
-      @dragend.prevent.stop
-      @mouseover="emitDraggable(false)"
-    >
+    <keep-alive>
       <component
-        :is="componentFor(tab)"
+        :is="loadComponent(tab)"
+        :key="tab.id"
         :tab="tab"
-        :active="tab.id === active"
-        :height="reportedHeight"
-        :width="reportedWidth"
+        :active="true"
+        :height="tab.containerHeight"
+        :width="tab.containerWidth"
         v-bind="tab.attrs"
-        @close="close(tab.id)"
       />
-    </div>
-  </div>
+    </keep-alive>
+  </Teleport>
+  <PinArea />
 </template>
-
-<style lang="scss" scoped>
-  .windowmanager {
-    display: grid;
-    height: var(--wm-height, 0);
-
-    grid-template-areas:
-      "tabs"
-      "body";
-
-    grid-template-rows: var(--wm-tab-height) auto;
-
-    .tabs, .body {
-      max-width: 100%;
-    }
-
-    .tabs {
-      grid-area: tabs;
-      background-color: var(--wm-tabs-bg);
-      border-top: 1px solid var(--wm-border);
-      border-bottom: 1px solid var(--wm-border);
-
-      display: flex;
-      align-content: stretch;
-
-      .tab {
-        cursor: pointer;
-        user-select: none;
-        border-top: 1px solid var(--wm-border);
-        border-right: 1px solid var(--wm-border);
-        border-left: 1px solid var(--wm-border);
-        padding: 5px 10px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        margin: 0;
-        display: flex;
-        min-width: 0;
-
-        .tab-label{
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        &.active {
-          position: relative;
-          background-color: var(--wm-body-bg);
-          outline: 1px solid var(--wm-body-bg);
-          z-index: 1;
-        }
-
-        &:focus-visible {
-          @include focus-outline;
-          outline-offset: -3px;
-        }
-
-        .closer {
-          margin-left: 5px;
-          border: 1px solid var(--body-text);
-          border-radius: var(--border-radius);
-          line-height: 12px;
-          font-size: 10px;
-          width: 14px;
-          align-self: center;
-          display: flex;
-          justify-content: center;
-
-          &:hover {
-            border-color: var(--link-border);
-            color: var(--link-border);
-          }
-
-          &:focus-visible {
-            @include focus-outline;
-            outline-offset: 1px;
-          }
-        }
-      }
-
-      .resizer {
-        width: var(--wm-tab-height);
-        padding: 0 5px;
-        margin: 0 0 0 1px;
-        text-align: center;
-        border-left: 1px solid var(--wm-border);
-        border-right: 1px solid var(--wm-border);
-        line-height: var(--wm-tab-height);
-        height: calc(var(--wm-tab-height) + 1px);
-        flex-grow: 0;
-
-        &:hover {
-          background-color: var(--wm-closer-hover-bg);
-        }
-      }
-
-      .resizer-y {
-        cursor: ns-resize;
-      }
-
-      .resizer-x {
-        cursor: col-resize;
-      }
-
-      .resizer-align-right {
-        margin-left: auto;
-      }
-
-      &.resizer-left {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-    }
-
-    .body {
-      grid-area: body;
-      background-color: var(--wm-body-bg);
-      display: none;
-      overflow: hidden;
-
-      &.active {
-        display: block;
-        height: 100%;
-      }
-    }
-
-    &.pin-right {
-      border-left: var(--nav-border-size) solid var(--nav-border);
-    }
-
-    &.pin-left {
-      border-right: var(--nav-border-size) solid var(--nav-border);
-    }
-  }
-
-</style>