@umbra.ui/core 0.1.0

package/src/components/navigation/navstack/useNavigationStack.ts

@@ -0,0 +1,164 @@
+import { ref, Ref, computed, watch } from "vue";
+import { gsap } from "gsap";
+import { Flip } from "gsap/Flip";
+import { Pane } from "../types";
+
+gsap.registerPlugin(Flip);
+
+export function useNavigationStack(initialPanes: Pane[], taskKey: string) {
+  const panes = ref<Pane[]>(initialPanes);
+  const currentIndex = ref(0);
+  const visiblePanes = computed(() =>
+    panes.value.map((_, index) => index === currentIndex.value)
+  );
+
+  const navigate = (index: number, animated: boolean = true) => {
+    // Ensure index is within bounds
+    if (index < 0 || index >= panes.value.length) {
+      console.warn(`Navigation index ${index} out of bounds`);
+      return;
+    }
+
+    const offscreenLeft = document.getElementById(`${taskKey}-offscreen-left`);
+    const onscreen = document.getElementById(`${taskKey}-onscreen`);
+    const offscreenRight = document.getElementById(
+      `${taskKey}-offscreen-right`
+    );
+
+    if (!offscreenLeft || !onscreen || !offscreenRight) {
+      console.log(
+        `Elements are null for key \`${taskKey}\`. Unable to animate`
+      );
+      return;
+    }
+
+    // Hide all panes initially
+    panes.value.forEach((_, idx) => {
+      const element = document.getElementById(`${taskKey}-pane-${idx}`);
+      if (element) {
+        element.style.display = "none";
+      }
+    });
+
+    let states: HTMLElement[] = [];
+    const next = document.getElementById(
+      `${taskKey}-pane-${index}`
+    ) as HTMLElement;
+    if (next) {
+      next.style.display = "grid";
+      states.push(next);
+    }
+    const current = onscreen.children[0] as HTMLElement;
+    if (current) {
+      current.style.display = "grid";
+      states.push(current);
+    }
+    if (!animated) {
+      states = [];
+    }
+    const state = Flip.getState(states);
+
+    // Reorganize panes
+    for (let i = 0; i < panes.value.length; i++) {
+      const pane = document.getElementById(`${taskKey}-pane-${i}`);
+      if (!pane) continue;
+
+      if (i < index) {
+        pane.parentNode?.removeChild(pane);
+        offscreenLeft.appendChild(pane);
+      } else if (i > index) {
+        pane.parentNode?.removeChild(pane);
+        offscreenRight.appendChild(pane);
+      } else {
+        pane.parentNode?.removeChild(pane);
+        onscreen.appendChild(pane);
+      }
+    }
+
+    currentIndex.value = index;
+
+    Flip.from(state, {
+      duration: 0.3,
+      ease: "power1.inOut",
+      absolute: true,
+    }).then(() => {
+      if (current && current !== next) {
+        current.style.display = "none";
+      }
+    });
+  };
+
+  const addPane = (pane: Pane, navigateToNew: boolean = false) => {
+    panes.value.push(pane);
+
+    // Wait for next tick to ensure DOM is updated
+    setTimeout(() => {
+      if (navigateToNew) {
+        navigate(panes.value.length - 1, true);
+      }
+    }, 0);
+  };
+
+  const removePane = (index: number) => {
+    if (index < 0 || index >= panes.value.length) {
+      console.warn(`Cannot remove pane at index ${index}`);
+      return;
+    }
+
+    // If we're removing the current pane, navigate away first
+    if (index === currentIndex.value) {
+      const newIndex = index > 0 ? index - 1 : 0;
+      if (panes.value.length > 1) {
+        navigate(newIndex, false);
+      }
+    } else if (index < currentIndex.value) {
+      // Adjust current index if removing a pane before current
+      currentIndex.value--;
+    }
+
+    panes.value.splice(index, 1);
+  };
+
+  const insertPane = (
+    index: number,
+    pane: Pane,
+    navigateToNew: boolean = false
+  ) => {
+    if (index < 0 || index > panes.value.length) {
+      console.warn(`Cannot insert pane at index ${index}`);
+      return;
+    }
+
+    panes.value.splice(index, 0, pane);
+
+    // Adjust current index if inserting before current position
+    if (index <= currentIndex.value) {
+      currentIndex.value++;
+    }
+
+    setTimeout(() => {
+      if (navigateToNew) {
+        navigate(index, true);
+      }
+    }, 0);
+  };
+
+  const updatePanes = (newPanes: Pane[]) => {
+    panes.value = newPanes;
+    // Reset to first pane if current index is out of bounds
+    if (currentIndex.value >= newPanes.length) {
+      navigate(0, false);
+    }
+  };
+
+  return {
+    panes,
+    visiblePanes,
+    currentIndex,
+    navigate,
+    addPane,
+    removePane,
+    insertPane,
+    updatePanes,
+  };
+}