@rancher/shell 3.0.8-rc.1 → 3.0.8-rc.12

package/components/nav/WindowManager/composables/useDimensionsHandler.ts

@@ -0,0 +1,105 @@
+import { computed } from 'vue';
+import debounce from 'lodash/debounce';
+import { useStore } from 'vuex';
+import { BOTTOM, LEFT, RIGHT } from '@shell/utils/position';
+import { Position } from '@shell/types/window-manager';
+import { CSS_KEY } from '../constants';
+
+/**
+ * This composable is responsible for handling the dimensions of the window manager panels.
+ */
+export default (props: { position: Position }) => {
+  const store = useStore();
+
+  const height = computed({
+    get() {
+      const panelHeight = store.state.wm.panelHeight[props.position];
+
+      if (panelHeight) {
+        return panelHeight;
+      }
+
+      const windowHeight = window.innerHeight;
+      let height = panelHeight ? parseInt(panelHeight, 10) : 0;
+
+      if ( !height ) {
+        height = Math.round(windowHeight / 2);
+      }
+      height = Math.min(height, 3 * windowHeight / 4);
+
+      setDimensions({ height });
+
+      return height;
+    },
+
+    set(height) {
+      setDimensions({ height });
+    },
+  });
+
+  const width = computed({
+    get() {
+      const panelWidth = store.state.wm.panelWidth[props.position];
+
+      if (panelWidth) {
+        return panelWidth;
+      }
+
+      const windowWidth = window.innerWidth;
+      let width = panelWidth ? parseInt(panelWidth, 10) : 0;
+
+      if (!width) {
+        width = Math.round(windowWidth / 8);
+      }
+      width = Math.min(width, 3 * windowWidth / 4);
+
+      setDimensions({ width });
+
+      return width;
+    },
+    set(width) {
+      setDimensions({ width });
+    }
+  });
+
+  function openPanel(position: Position) {
+    setCssVariable(position, position === BOTTOM ? height.value : width.value);
+  }
+
+  function closePanel(position: Position) {
+    setCssVariable(position, 0);
+  }
+
+  function setDimensions(args: { width?: number, height?: number } = {}) {
+    const h = Number(args.height || height.value) || 0;
+    const w = Number(args.width || width.value) || 0;
+
+    switch (props.position) {
+    case RIGHT:
+    case LEFT:
+      setCssVariable(props.position, w);
+      debouncedSetPanelWidth(props.position, w);
+      break;
+    case BOTTOM:
+      setCssVariable(BOTTOM, h);
+      debouncedSetPanelHeight(props.position, h);
+      break;
+    }
+  }
+
+  const debouncedSetPanelWidth = debounce((position, width) => {
+    store.commit('wm/setPanelWidth', { position, width });
+  }, 250);
+
+  const debouncedSetPanelHeight = debounce((position, height) => {
+    store.commit('wm/setPanelHeight', { position, height });
+  }, 250);
+
+  function setCssVariable(position: Position, value: number) {
+    document.documentElement.style.setProperty(CSS_KEY[position as keyof typeof CSS_KEY], `${ value }px`);
+  }
+
+  return {
+    width, height, setDimensions, openPanel, closePanel,
+  };
+};

package/components/nav/WindowManager/composables/useDragHandler.ts

@@ -0,0 +1,99 @@
+import { useStore } from 'vuex';
+import { Position, Tab } from '@shell/types/window-manager';
+import { computed, ref } from 'vue';
+import { CENTER } from '@shell/utils/position';
+
+/**
+ * This composable is responsible for handling the drag-and-drop behavior of tabs within the window manager.
+ *
+ * dragOverPositionsActive: A reactive reference indicating whether a drag operation is currently over the position areas.
+ * pinArea: A reactive reference representing the current position area being hovered over during a drag operation.
+ *
+ * Both of these references are shared across all instances of this composable (used by Horizontal and Vertical Panels)
+ * to maintain consistent drag-and-drop state.
+ */
+
+const dragOverPositionsActive = ref(false);
+const pinArea = ref(CENTER as Position);
+
+export default (props?: { position: Position }) => {
+  const store = useStore();
+
+  const lockedPositions = computed(() => (store.state.wm.lockedPositions || []) as Position[]);
+  const lockedPosition = computed(() => props?.position ? lockedPositions.value.includes(props.position) : false);
+
+  const pin = computed({
+    get(): Position {
+      return store.state.wm.userPin;
+    },
+    set(pin: Position) {
+      if (pin !== CENTER) {
+        store.commit('wm/setUserPin', pin);
+      }
+    },
+  });
+
+  const dragOverTabBarActive = ref(false);
+
+  function onDragPositionStart(value: { event: DragEvent, tab: Tab }) {
+    value.event.dataTransfer?.setData('application/json', JSON.stringify({
+      position: value.tab.position,
+      tabId:    value.tab.id
+    }));
+    dragOverPositionsActive.value = true;
+    dragOverTabBarActive.value = true;
+  }
+
+  function onDragPositionOver(event: DragEvent, position: Position) {
+    pinArea.value = position;
+    if (position !== CENTER) {
+      event.preventDefault();
+    }
+  }
+
+  function onDragPositionEnd(value: { event: DragEvent, tab: Tab }) {
+    pin.value = pinArea.value;
+    if (pinArea.value !== CENTER) {
+      store.commit('wm/switchTab', { tabId: value.tab.id, targetPosition: pinArea.value });
+    }
+    dragOverPositionsActive.value = false;
+    pinArea.value = CENTER;
+  }
+
+  function onTabBarDragOver(event: DragEvent) {
+    dragOverTabBarActive.value = true;
+    event.preventDefault();
+  }
+
+  function onTabBarDragLeave() {
+    dragOverTabBarActive.value = false;
+  }
+
+  function onTabBarDrop(event: DragEvent) {
+    dragOverTabBarActive.value = false;
+    const data = event.dataTransfer?.getData('application/json');
+
+    if (data) {
+      const { tabId } = JSON.parse(data);
+
+      store.commit('wm/switchTab', { tabId, targetPosition: props?.position });
+    } else {
+      console.warn('No data found in drag event'); // eslint-disable-line no-console
+    }
+  }
+
+  return {
+    dragOverPositionsActive,
+    dragOverTabBarActive,
+    pinArea,
+    pin,
+    lockedPositions,
+    lockedPosition,
+    onTabBarDragOver,
+    onTabBarDragLeave,
+    onTabBarDrop,
+    onDragPositionStart,
+    onDragPositionOver,
+    onDragPositionEnd
+  };
+};

package/components/nav/WindowManager/composables/usePanelHandler.ts

@@ -0,0 +1,72 @@
+import { computed, onMounted, onBeforeUnmount } from 'vue';
+import { useStore } from 'vuex';
+import { Position, Tab } from '@shell/types/window-manager';
+import useResizeHandler from '../composables/useResizeHandler';
+import useDimensionsHandler from '../composables/useDimensionsHandler';
+import useDragHandler from '../composables/useDragHandler';
+import useTabsHandler from '../composables/useTabsHandler';
+
+/**
+ * This composable is responsible for managing the state and behavior of the window manager panel.
+ */
+export default (props: { position: Position }) => {
+  const store = useStore();
+
+  const tabs = computed(() => store.getters['wm/tabs'].filter((t: Tab) => t.position === props.position));
+
+  const isTabsHeaderEnabled = computed(() => tabs.value.every((t: Tab) => t.showHeader));
+
+  const {
+    activeTab, setTabActive, onTabReady, onTabClose, onPanelClose
+  } = useTabsHandler();
+
+  const {
+    height, width, setDimensions, openPanel, closePanel
+  } = useDimensionsHandler({ position: props.position });
+
+  const {
+    mouseResizeYStart, keyboardResizeY, mouseResizeXStart, keyboardResizeX
+  } = useResizeHandler({ position: props.position, setDimensions });
+
+  const {
+    dragOverPositionsActive,
+    dragOverTabBarActive,
+    onTabBarDragOver,
+    onTabBarDragLeave,
+    onTabBarDrop,
+    onDragPositionStart,
+    onDragPositionEnd,
+    lockedPosition
+  } = useDragHandler({ position: props.position });
+
+  onMounted(() => openPanel(props.position));
+
+  onBeforeUnmount(() => {
+    closePanel(props.position);
+    onPanelClose(props.position);
+  });
+
+  return {
+    tabs,
+    activeTab,
+    isTabsHeaderEnabled,
+    height,
+    width,
+    dragOverPositionsActive,
+    dragOverTabBarActive,
+    setTabActive,
+    onTabReady,
+    onTabClose,
+    onPanelClose,
+    mouseResizeXStart,
+    mouseResizeYStart,
+    keyboardResizeX,
+    keyboardResizeY,
+    onTabBarDragOver,
+    onTabBarDragLeave,
+    onTabBarDrop,
+    onDragPositionStart,
+    onDragPositionEnd,
+    lockedPosition
+  };
+};

package/components/nav/WindowManager/composables/usePanelsHandler.ts

@@ -0,0 +1,14 @@
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import { Layout, Position, Tab } from '@shell/types/window-manager';
+
+export default (props?: { positions: Position[], layout: Layout }) => {
+  const store = useStore();
+
+  const isPanelEnabled = computed(() => (props?.positions || []).reduce((acc, pos) => ({
+    ...acc,
+    [pos]: store.state.wm.open[pos] && !store.state.wm.tabs.find((t: Tab) => !t.layouts.includes(props?.layout || Layout.default) && t.position === pos),
+  }), {} as Record<Position, boolean>));
+
+  return { isPanelEnabled };
+};

package/components/nav/WindowManager/composables/useResizeHandler.ts

@@ -0,0 +1,167 @@
+import { ref } from 'vue';
+import { boundingRect, LEFT, RIGHT, screenRect } from '@shell/utils/position';
+import { Position } from '@shell/types/window-manager';
+import { useStore } from 'vuex';
+
+/**
+ * This composable is responsible for handling the resize behavior of the window manager panels.
+ */
+export default (props: { position: Position, setDimensions: (args: { width?: number, height?: number }) => void }) => {
+  const store = useStore();
+
+  const dragOffset = ref(0);
+
+  function mouseResizeYStart(event: MouseEvent | TouchEvent) {
+    const doc = document.documentElement;
+
+    doc.addEventListener('mousemove', mouseResizeYMove);
+    doc.addEventListener('touchmove', mouseResizeYMove, true);
+    doc.addEventListener('mouseup', mouseResizeYEnd);
+    doc.addEventListener('mouseleave', mouseResizeYEnd);
+    doc.addEventListener('touchend', mouseResizeYEnd, true);
+    doc.addEventListener('touchcancel', mouseResizeYEnd, true);
+    doc.addEventListener('touchstart', mouseResizeYEnd, true);
+
+    let eventY: number;
+
+    if (event instanceof MouseEvent) {
+      eventY = event.screenY;
+    } else if (event instanceof TouchEvent && event.touches.length > 0) {
+      eventY = event.touches[0].screenY;
+    } else {
+      eventY = 0;
+    }
+
+    const rect = boundingRect(event.target);
+    const offset = eventY - rect.top;
+
+    dragOffset.value = offset;
+  }
+
+  function mouseResizeYMove(event: MouseEvent | TouchEvent) {
+    const screen = screenRect();
+
+    let eventY: number;
+
+    if (event instanceof MouseEvent) {
+      eventY = event.screenY;
+    } else if (event instanceof TouchEvent && event.touches.length > 0) {
+      eventY = event.touches[0].screenY;
+    } else {
+      eventY = 0;
+    }
+
+    const min = 50;
+    const max = Math.round( 3 * screen.height / 4);
+
+    let neu = screen.height - eventY + dragOffset.value;
+
+    neu = Math.max(min, Math.min(neu, max));
+
+    props.setDimensions({ height: neu });
+  }
+
+  function mouseResizeYEnd(event: MouseEvent | TouchEvent) {
+    const doc = document.documentElement;
+
+    doc.removeEventListener('mousemove', mouseResizeYMove);
+    doc.removeEventListener('touchmove', mouseResizeYMove, true);
+    doc.removeEventListener('mouseup', mouseResizeYEnd);
+    doc.removeEventListener('mouseleave', mouseResizeYEnd);
+    doc.removeEventListener('touchend', mouseResizeYEnd, true);
+    doc.removeEventListener('touchcancel', mouseResizeYEnd, true);
+    doc.removeEventListener('touchstart', mouseResizeYEnd, true);
+  }
+
+  function mouseResizeXStart(event: MouseEvent | TouchEvent) {
+    const doc = document.documentElement;
+
+    doc.addEventListener('mousemove', mouseResizeXMove);
+    doc.addEventListener('touchmove', mouseResizeXMove, true);
+    doc.addEventListener('mouseup', mouseResizeXEnd);
+    doc.addEventListener('mouseleave', mouseResizeXEnd);
+    doc.addEventListener('touchend', mouseResizeXEnd, true);
+    doc.addEventListener('touchcancel', mouseResizeXEnd, true);
+    doc.addEventListener('touchstart', mouseResizeXEnd, true);
+
+    const eventX = (event instanceof MouseEvent) ? event.screenX : (event as TouchEvent).touches[0].screenX;
+    const rect = boundingRect(event.target);
+
+    switch (props.position) {
+    case RIGHT:
+      dragOffset.value = eventX - rect.left;
+      break;
+    case LEFT:
+      dragOffset.value = rect.right - eventX;
+      break;
+    }
+  }
+
+  function mouseResizeXMove(event: MouseEvent | TouchEvent) {
+    const screen = screenRect();
+    const eventX = (event instanceof MouseEvent) ? event.screenX : (event as TouchEvent).touches[0].screenX;
+
+    const min = 250;
+    const max = Math.round(2 * screen.width / 5);
+    let neu;
+
+    switch (props.position) {
+    case RIGHT:
+      neu = Math.max(min, Math.min((screen.width - eventX + dragOffset.value) || 0, max));
+      break;
+    case LEFT:
+      neu = Math.max(min, Math.min((eventX + dragOffset.value) || 0, max));
+      break;
+    }
+
+    props.setDimensions({ width: neu || 0 });
+  }
+
+  function mouseResizeXEnd(event: MouseEvent | TouchEvent) {
+    const doc = document.documentElement;
+
+    doc.removeEventListener('mousemove', mouseResizeXMove);
+    doc.removeEventListener('touchmove', mouseResizeXMove, true);
+    doc.removeEventListener('mouseup', mouseResizeXEnd);
+    doc.removeEventListener('mouseleave', mouseResizeXEnd);
+    doc.removeEventListener('touchend', mouseResizeXEnd, true);
+    doc.removeEventListener('touchcancel', mouseResizeXEnd, true);
+    doc.removeEventListener('touchstart', mouseResizeXEnd, true);
+  }
+
+  function keyboardResizeY(arrowUp: boolean) {
+    const panelHeight = store.state.wm.panelHeight?.[props.position];
+    const resizeStep = 20;
+    const newHeight = arrowUp ? (panelHeight || 0) + resizeStep : (panelHeight || 0) - resizeStep;
+
+    props.setDimensions({ height: newHeight });
+  }
+
+  function keyboardResizeX(arrowLeft: boolean) {
+    const panelWidth = store.state.wm.panelWidth?.[props.position];
+    const resizeStep = 20;
+    let width;
+
+    switch (props.position) {
+    case RIGHT:
+      width = arrowLeft ? (panelWidth || 0) + resizeStep : (panelWidth || 0) - resizeStep;
+      break;
+    case LEFT:
+      width = arrowLeft ? (panelWidth || 0) - resizeStep : (panelWidth || 0) + resizeStep;
+      break;
+    }
+
+    props.setDimensions({ width });
+  }
+
+  return {
+    mouseResizeYStart,
+    mouseResizeYMove,
+    mouseResizeYEnd,
+    mouseResizeXStart,
+    mouseResizeXMove,
+    mouseResizeXEnd,
+    keyboardResizeY,
+    keyboardResizeX
+  };
+};

package/components/nav/WindowManager/composables/useTabsHandler.ts

@@ -0,0 +1,51 @@
+import { computed, ref } from 'vue';
+import { useStore } from 'vuex';
+import { Tab } from '@shell/types/window-manager';
+
+const tabs = ref<{ tab: Tab, containerId: string }[]>([]);
+
+/**
+ * This composable is responsible for handling the tabs within the window manager.
+ */
+export default () => {
+  const store = useStore();
+
+  const activeTab = computed(() => store.state.wm.active);
+
+  function onTabReady(arg: { tab: Tab, containerId: string }) {
+    const existing = tabs.value.find((t) => t.tab.id === arg.tab.id);
+
+    if (existing) {
+      existing.containerId = arg.containerId;
+
+      return;
+    }
+
+    tabs.value = [
+      ...tabs.value,
+      { tab: arg.tab, containerId: arg.containerId }
+    ];
+  }
+
+  function setTabActive(args: { position: string, id: string }) {
+    store.commit('wm/setActive', args);
+  }
+
+  function onTabClose(id: string) {
+    tabs.value = tabs.value.filter(({ tab }) => tab.id !== id);
+    store.commit('wm/closeTab', { id });
+  }
+
+  function onPanelClose(position: string) {
+    tabs.value = tabs.value.filter(({ tab }) => tab.position !== position);
+  }
+
+  return {
+    tabs,
+    activeTab,
+    setTabActive,
+    onTabReady,
+    onTabClose,
+    onPanelClose,
+  };
+};

package/components/nav/WindowManager/constants.ts

@@ -0,0 +1,23 @@
+import { BOTTOM, LEFT, RIGHT } from '@shell/utils/position';
+
+export const STORAGE_KEY = {
+  [BOTTOM]: 'wm-height',
+  [LEFT]:   'wm-vl-width',
+  [RIGHT]:  'wm-vr-width',
+  pin:      'wm-pin',
+};
+
+export const CSS_KEY = {
+  [RIGHT]:  '--wm-vr-width',
+  [LEFT]:   '--wm-vl-width',
+  [BOTTOM]: '--wm-height',
+};
+
+export const Z_INDEX = {
+  WM:         1000,
+  PIN_EFFECT: 996,
+  RIGHT:      999,
+  LEFT:       999,
+  BOTTOM:     999,
+  CENTER:     997,
+};