@umbra.ui/core 0.1.0

package/src/components/navigation/adaptive/useViewResize.ts

@@ -0,0 +1,211 @@
+// useViewResize.ts
+import { ref, watch, onUnmounted, type Ref } from "vue";
+
+export interface ResizeState {
+  viewId: string;
+  startX: number;
+  startWidth: number;
+}
+
+export interface ResizeTooltip {
+  visible: boolean;
+  x: number;
+  y: number;
+  width: number;
+}
+
+export interface ResizeConfig {
+  defaultMinWidth: number;
+  gap: number;
+  padding: number;
+}
+
+export interface ResizableView {
+  id: string;
+  minWidth?: number;
+  maxWidth?: number;
+  currentWidth?: number;
+}
+
+export const useViewResize = (
+  onScreenViews: Ref<ResizableView[]>,
+  config: ResizeConfig,
+  props: { gap: string; padding: string },
+  getViewId: (view: ResizableView) => string, // Changed from (index: number) => string
+  getOnscreenId: () => string
+) => {
+  const resizing = ref<ResizeState | null>(null);
+  const resizeTooltip = ref<ResizeTooltip>({
+    visible: false,
+    x: 0,
+    y: 0,
+    width: 0,
+  });
+
+  const updateViewWidth = (viewId: string, width: number) => {
+    const view = onScreenViews.value.find((v) => v.id === viewId);
+    if (view) {
+      view.currentWidth = width;
+    }
+  };
+
+  const calculateMaxWidthWithoutOverflow = (viewIndex: number): number => {
+    const container = document.querySelector(
+      `#${getOnscreenId()}`
+    ) as HTMLElement;
+    if (!container) {
+      return Infinity;
+    }
+
+    const containerWidth = container.clientWidth;
+    const containerPadding = parseFloat(props.padding) || 0;
+    const gap = parseFloat(props.gap) || 0;
+
+    // Calculate available width considering padding
+    let availableWidth = containerWidth - containerPadding * 2;
+
+    // Calculate total width used by other views
+    let totalOtherViewsWidth = 0;
+
+    for (let i = 0; i < onScreenViews.value.length; i++) {
+      if (i !== viewIndex) {
+        const view = onScreenViews.value[i];
+        const viewElement = document.getElementById(
+          getViewId(view) // Changed from getViewId(i)
+        ) as HTMLElement;
+
+        if (viewElement) {
+          // For views that aren't the last one, use their current width
+          // For the last view (if it's not the one being resized), use its minimum width
+          if (i === onScreenViews.value.length - 1) {
+            // Last view uses its minimum width when calculating constraints
+            totalOtherViewsWidth += view.minWidth || config.defaultMinWidth;
+          } else {
+            // Use actual width for non-last views
+            totalOtherViewsWidth +=
+              view.currentWidth || viewElement.offsetWidth;
+          }
+        }
+      }
+    }
+
+    // Calculate gaps between views
+    const totalGaps = gap * (onScreenViews.value.length - 1);
+
+    // Calculate maximum width for the resizing view
+    const maxWidth = availableWidth - totalOtherViewsWidth - totalGaps;
+
+    // Ensure we return a positive value
+    return Math.max(config.defaultMinWidth, maxWidth);
+  };
+
+  const startResize = (viewId: string, event: MouseEvent) => {
+    const view = onScreenViews.value.find((v) => v.id === viewId);
+    if (!view) {
+      return;
+    }
+
+    // Use getViewId to find the element more reliably
+    const viewElement = document.getElementById(getViewId(view)) as HTMLElement;
+    if (!viewElement) {
+      return;
+    }
+
+    const currentWidth = view.currentWidth || viewElement.offsetWidth;
+
+    resizing.value = {
+      viewId,
+      startX: event.clientX,
+      startWidth: currentWidth,
+    };
+
+    // Show tooltip with initial width
+    resizeTooltip.value = {
+      visible: true,
+      x: event.clientX,
+      y: event.clientY - 40,
+      width: Math.round(currentWidth),
+    };
+
+    // Prevent text selection during resize
+    document.body.style.userSelect = "none";
+    event.preventDefault();
+  };
+
+  const handleMouseResize = (event: MouseEvent) => {
+    if (!resizing.value) return;
+
+    const view = onScreenViews.value.find(
+      (v) => v.id === resizing.value?.viewId
+    );
+    if (!view) return;
+
+    const viewIndex = onScreenViews.value.findIndex(
+      (v) => v.id === resizing.value?.viewId
+    );
+    if (viewIndex === -1) return;
+
+    const deltaX = event.clientX - resizing.value.startX;
+    const newWidth = resizing.value.startWidth + deltaX;
+
+    // Apply constraints
+    const minWidth = view.minWidth || config.defaultMinWidth;
+    const maxWidthFromView = view.maxWidth || Infinity;
+    const maxWidthFromContainer = calculateMaxWidthWithoutOverflow(viewIndex);
+    const maxWidth = Math.min(maxWidthFromView, maxWidthFromContainer);
+
+    const constrainedWidth = Math.max(minWidth, Math.min(newWidth, maxWidth));
+
+    // Update width through the callback function
+    updateViewWidth(view.id, constrainedWidth);
+
+    // Check if a constraint was hit
+    const isConstrained = newWidth !== constrainedWidth;
+
+    // Update tooltip position and value
+    resizeTooltip.value = {
+      visible: !isConstrained, // Hide when hitting a constraint
+      x: event.clientX,
+      y: event.clientY - 40,
+      width: Math.round(constrainedWidth),
+    };
+  };
+
+  const endResize = () => {
+    if (!resizing.value) return;
+
+    resizing.value = null;
+    document.body.style.userSelect = "";
+
+    // Hide tooltip
+    resizeTooltip.value.visible = false;
+  };
+
+  // Set up event listeners when resizing starts/ends
+  watch(resizing, (newVal) => {
+    if (newVal) {
+      document.addEventListener("mousemove", handleMouseResize);
+      document.addEventListener("mouseup", endResize);
+    } else {
+      document.removeEventListener("mousemove", handleMouseResize);
+      document.removeEventListener("mouseup", endResize);
+    }
+  });
+
+  // Cleanup on unmount
+  const cleanup = () => {
+    document.removeEventListener("mousemove", handleMouseResize);
+    document.removeEventListener("mouseup", endResize);
+  };
+
+  onUnmounted(() => {
+    cleanup();
+  });
+
+  return {
+    resizing,
+    resizeTooltip,
+    startResize,
+    updateViewWidth,
+  };
+};

package/src/components/navigation/navstack/NavigationStack.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { gsap } from "gsap";
+import { Flip } from "gsap/Flip";
+import { ref, onMounted, onUnmounted, watch, toRef } from "vue";
+import { useNavigationStack } from "./useNavigationStack";
+import "../theme.css";
+import { Pane } from "../types";
+
+gsap.registerPlugin(Flip);
+
+// Define props
+const props = defineProps({
+  taskKey: {
+    type: String,
+    required: true,
+  },
+  panes: {
+    type: Array<{
+      name: string;
+      background: string;
+      foreground: string;
+      component: any;
+      props: object;
+    }>,
+    required: true,
+  },
+  childWidth: {
+    type: Number,
+    default: null,
+  },
+  childHeight: {
+    type: Number,
+    default: null,
+  },
+});
+
+const {
+  panes: internalPanes,
+  navigate,
+  updatePanes,
+} = useNavigationStack(props.panes, props.taskKey);
+
+// Watch for external pane changes and update internal state
+watch(
+  () => props.panes,
+  (newPanes) => {
+    updatePanes(newPanes);
+  },
+  { deep: true }
+);
+
+// Container ref for tracking container dimensions
+const containerRef = ref<HTMLElement | null>(null);
+const width = ref(0);
+const height = ref("");
+
+const updateDimensions = () => {
+  const container = containerRef.value;
+  if (!container) {
+    console.log("container is null. Unable to calculate dimensions");
+    return;
+  }
+
+  if (props.childWidth) {
+    width.value = props.childWidth;
+  } else {
+    width.value = container.offsetWidth;
+  }
+
+  if (props.childHeight) {
+    height.value = `${props.childHeight}px`;
+  } else {
+    height.value = "100%";
+  }
+};
+
+onMounted(() => {
+  if (containerRef.value) {
+    updateDimensions();
+
+    // Use ResizeObserver to watch for container size changes
+    const resizeObserver = new ResizeObserver(() => {
+      updateDimensions();
+    });
+    resizeObserver.observe(containerRef.value);
+  }
+});
+
+onUnmounted(() => {
+  // ResizeObserver cleanup is handled automatically when the component unmounts
+});
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    :class="$style.container"
+    :style="{ '--currentContainerWidth': width + 'px', '--maxHeight': height }"
+  >
+    <div
+      :id="`${props.taskKey}-offscreen-left`"
+      :class="$style.offscreen_left"
+    ></div>
+    <div :id="`${props.taskKey}-onscreen`" :class="$style.onscreen"></div>
+    <div
+      :id="`${props.taskKey}-offscreen-right`"
+      :class="$style.offscreen_right"
+    >
+      <div
+        v-for="(pane, index) in internalPanes"
+        :key="`${pane.name}-${index}`"
+        :id="`${props.taskKey}-pane-${index}`"
+        :class="[$style.pane]"
+        :style="{ order: index }"
+      >
+        <div
+          :class="$style.component_container"
+          :style="{ backgroundColor: pane.background }"
+        >
+          <component :is="pane.component" v-bind="pane.props"></component>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style module>
+.container {
+  position: relative;
+  display: grid;
+  grid-template-areas: "content";
+  height: 100%;
+  width: 100%;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
+  overflow: hidden;
+}
+.offscreen_left {
+  position: absolute;
+  top: 0;
+  left: calc(var(--currentContainerWidth, 100%) * -1);
+  bottom: 0;
+  width: var(--currentContainerWidth, 100%);
+  display: flex;
+  justify-content: end;
+}
+.offscreen_right {
+  position: absolute;
+  top: 0;
+  right: calc(var(--currentContainerWidth, 100%) * -1);
+  bottom: 0;
+  width: var(--currentContainerWidth, 100%);
+  display: flex;
+  justify-content: start;
+}
+.onscreen {
+  grid-area: content;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  height: 100%;
+}
+.pane {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-areas: "content";
+  height: 100%;
+}
+.component_container {
+  grid-area: content;
+  overflow: hidden;
+  width: var(--currentContainerWidth, 100%);
+  align-self: center;
+  justify-self: center;
+  height: var(--maxHeight, 100%);
+}
+.component_container > :first-child {
+  height: 100%;
+}
+</style>