react-headless-dock-layout 0.1.0 → 0.1.2

package/src/internal/LayoutManager/calculateMinSize.test.ts

@@ -1,77 +0,0 @@
-import { describe, expect, it } from "vitest";
-import type { PanelNode, SplitNode } from "../../types";
-import { calculateMinSize } from "./calculateMinSize";
-
-describe("calculateMinSize", () => {
-  it("should return the min size of a panel node", () => {
-    const node: PanelNode = {
-      type: "panel",
-      id: "panel",
-      minSize: { width: 100, height: 100 },
-    };
-    const result = calculateMinSize(node, 10);
-    expect(result).toEqual({ width: 100, height: 100 });
-  });
-
-  it("should return the min size of a split node when the orientation is horizontal", () => {
-    const node: SplitNode = {
-      type: "split",
-      id: "split",
-      orientation: "horizontal",
-      ratio: 0.5,
-      left: { type: "panel", id: "left", minSize: { width: 100, height: 100 } },
-      right: {
-        type: "panel",
-        id: "right",
-        minSize: { width: 100, height: 100 },
-      },
-    };
-    const result = calculateMinSize(node, 10);
-    expect(result).toEqual({ width: 210, height: 100 });
-  });
-
-  it("should return the min size of a split node when the orientation is vertical", () => {
-    const node: SplitNode = {
-      type: "split",
-      id: "split",
-      orientation: "vertical",
-      ratio: 0.5,
-      left: { type: "panel", id: "left", minSize: { width: 100, height: 100 } },
-      right: {
-        type: "panel",
-        id: "right",
-        minSize: { width: 100, height: 100 },
-      },
-    };
-    const result = calculateMinSize(node, 10);
-    expect(result).toEqual({ width: 100, height: 210 });
-  });
-
-  it("should return the min size of a split node when the node is nested", () => {
-    const node: SplitNode = {
-      type: "split",
-      id: "split",
-      orientation: "horizontal",
-      ratio: 0.5,
-      left: { type: "panel", id: "left", minSize: { width: 100, height: 100 } },
-      right: {
-        type: "split",
-        id: "right",
-        orientation: "vertical",
-        ratio: 0.5,
-        left: {
-          type: "panel",
-          id: "right-left",
-          minSize: { width: 100, height: 100 },
-        },
-        right: {
-          type: "panel",
-          id: "right-right",
-          minSize: { width: 100, height: 100 },
-        },
-      },
-    };
-    const result = calculateMinSize(node, 10);
-    expect(result).toEqual({ width: 210, height: 210 });
-  });
-});

package/src/internal/LayoutManager/calculateMinSize.ts

@@ -1,40 +0,0 @@
-import type { LayoutNode } from "../../types";
-import { assertNever } from "../assertNever";
-import type { Size } from "./types";
-
-export function calculateMinSize(node: LayoutNode, gap: number): Size {
-  if (node.type === "panel") {
-    return {
-      width: node.minSize?.width ?? 0,
-      height: node.minSize?.height ?? 0,
-    };
-  } else if (node.type === "split") {
-    if (node.orientation === "horizontal") {
-      return {
-        width:
-          calculateMinSize(node.left, gap).width +
-          gap +
-          calculateMinSize(node.right, gap).width,
-        height: Math.max(
-          calculateMinSize(node.left, gap).height,
-          calculateMinSize(node.right, gap).height,
-        ),
-      };
-    } else if (node.orientation === "vertical") {
-      return {
-        width: Math.max(
-          calculateMinSize(node.left, gap).width,
-          calculateMinSize(node.right, gap).width,
-        ),
-        height:
-          calculateMinSize(node.left, gap).height +
-          gap +
-          calculateMinSize(node.right, gap).height,
-      };
-    } else {
-      assertNever(node.orientation);
-    }
-  } else {
-    assertNever(node);
-  }
-}

package/src/internal/LayoutManager/findClosestDirection.test.ts

@@ -1,95 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { findClosestDirection } from "./findClosestDirection";
-
-describe("findClosestDirection", () => {
-  it("should return top when the point is at the top edge", () => {
-    const rect = { x: 0, y: 0, width: 100, height: 100 };
-    const point = { x: 50, y: 0 };
-    const result = findClosestDirection(rect, point);
-    expect(result).toBe("top");
-  });
-
-  it("should return bottom when the point is at the bottom edge", () => {
-    const rect = { x: 0, y: 0, width: 100, height: 100 };
-    const point = { x: 50, y: 100 };
-    const result = findClosestDirection(rect, point);
-    expect(result).toBe("bottom");
-  });
-
-  it("should return left when the point is at the left edge", () => {
-    const rect = { x: 0, y: 0, width: 100, height: 100 };
-    const point = { x: 0, y: 50 };
-    const result = findClosestDirection(rect, point);
-    expect(result).toBe("left");
-  });
-
-  it("should return right when the point is at the right edge", () => {
-    const rect = { x: 0, y: 0, width: 100, height: 100 };
-    const point = { x: 100, y: 50 };
-    const result = findClosestDirection(rect, point);
-    expect(result).toBe("right");
-  });
-
-  it("should return top when the point is in the top directional region", () => {
-    const rect = { x: 0, y: 0, width: 100, height: 100 };
-    const point = { x: 50, y: 10 };
-    const result = findClosestDirection(rect, point);
-    expect(result).toBe("top");
-  });
-
-  it("should return bottom when the point is in the bottom directional region", () => {
-    const rect = { x: 0, y: 0, width: 100, height: 100 };
-    const point = { x: 50, y: 90 };
-    const result = findClosestDirection(rect, point);
-    expect(result).toBe("bottom");
-  });
-
-  it("should return left when the point is in the left directional region", () => {
-    const rect = { x: 0, y: 0, width: 100, height: 100 };
-    const point = { x: 10, y: 50 };
-    const result = findClosestDirection(rect, point);
-    expect(result).toBe("left");
-  });
-
-  it("should return right when the point is in the right directional region", () => {
-    const rect = { x: 0, y: 0, width: 100, height: 100 };
-    const point = { x: 90, y: 50 };
-    const result = findClosestDirection(rect, point);
-    expect(result).toBe("right");
-  });
-
-  it("returns top when the point lies on the boundary between left and top directional regions", () => {
-    const rect = { x: 0, y: 0, width: 100, height: 100 };
-    const point = { x: 25, y: 25 };
-    const result = findClosestDirection(rect, point);
-    expect(result).toBe("top");
-  });
-
-  it("returns top when the point lies on the boundary between right and top directional regions", () => {
-    const rect = { x: 0, y: 0, width: 100, height: 100 };
-    const point = { x: 75, y: 25 };
-    const result = findClosestDirection(rect, point);
-    expect(result).toBe("top");
-  });
-
-  it("should return bottom when the point lies on the boundary between left and bottom directional regions", () => {
-    const rect = { x: 0, y: 0, width: 100, height: 100 };
-    const point = { x: 25, y: 75 };
-    const result = findClosestDirection(rect, point);
-    expect(result).toBe("bottom");
-  });
-
-  it("should return bottom when the point lies on the boundary between right and bottom directional regions", () => {
-    const rect = { x: 0, y: 0, width: 100, height: 100 };
-    const point = { x: 75, y: 75 };
-    const result = findClosestDirection(rect, point);
-    expect(result).toBe("bottom");
-  });
-
-  it("should return top when the point lies on the center of the rect", () => {
-    const rect = { x: 0, y: 0, width: 100, height: 100 };
-    const point = { x: 50, y: 50 };
-    const result = findClosestDirection(rect, point);
-    expect(result).toBe("top");
-  });
-});

package/src/internal/LayoutManager/findClosestDirection.ts

@@ -1,15 +0,0 @@
-import type { Direction, Point, Rect } from "./types";
-
-export function findClosestDirection(rect: Rect, point: Point): Direction {
-  const centerX = rect.x + rect.width / 2;
-  const centerY = rect.y + rect.height / 2;
-
-  const dx = (point.x - centerX) / (rect.width / 2);
-  const dy = (point.y - centerY) / (rect.height / 2);
-
-  if (Math.abs(dx) > Math.abs(dy)) {
-    return dx > 0 ? "right" : "left";
-  } else {
-    return dy > 0 ? "bottom" : "top";
-  }
-}

package/src/internal/LayoutManager/types.ts

@@ -1,20 +0,0 @@
-export interface Size {
-  width: number;
-  height: number;
-}
-
-export interface Point {
-  x: number;
-  y: number;
-}
-
-export interface Rect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export type Orientation = "horizontal" | "vertical";
-
-export type Direction = "top" | "bottom" | "left" | "right";

package/src/internal/assertNever.ts

@@ -1,3 +0,0 @@
-export function assertNever(value: never): never {
-  throw new Error(`Unexpected value: ${value}`);
-}

package/src/internal/clamp.tsx

@@ -1,3 +0,0 @@
-export function clamp(value: number, min: number, max: number) {
-  return Math.max(min, Math.min(max, value));
-}

package/src/internal/findParentNode.ts

@@ -1,30 +0,0 @@
-import type { LayoutNode, SplitNode } from "../types";
-import { assertNever } from "./assertNever";
-
-export function findParentNode(root: LayoutNode | null, id: string) {
-  if (root === null) {
-    return null;
-  }
-
-  return findParentNodeInSubTree(id, root);
-}
-
-function findParentNodeInSubTree(
-  id: string,
-  node: LayoutNode,
-): SplitNode | null {
-  if (node.type === "panel") {
-    return null;
-  } else if (node.type === "split") {
-    if (node.left.id === id || node.right.id === id) {
-      return node;
-    }
-
-    return (
-      findParentNodeInSubTree(id, node.left) ??
-      findParentNodeInSubTree(id, node.right)
-    );
-  } else {
-    assertNever(node);
-  }
-}

package/src/internal/invariant.tsx

@@ -1,6 +0,0 @@
-// biome-ignore lint/suspicious/noExplicitAny: for flexibility condition can be any type
-export function invariant(condition: any, message?: string): asserts condition {
-  if (!condition) {
-    throw new Error(message ?? "Invariant failed");
-  }
-}

package/src/strategies.ts

@@ -1,76 +0,0 @@
-import { assertNever } from "./internal/assertNever";
-import { findParentNode } from "./internal/findParentNode";
-import type { Direction } from "./internal/LayoutManager/types";
-import type { LayoutNode, PanelNode } from "./types";
-
-export interface AddPanelStrategy {
-  getPlacement(root: LayoutNode): {
-    targetId: string;
-    direction: Direction;
-    ratio: number;
-  };
-}
-
-export const evenlyDividedHorizontalStrategy: AddPanelStrategy = {
-  getPlacement(root) {
-    const horizontalNodeCount = calculateHorizontalSplitCount(root) + 1;
-
-    return {
-      targetId: root.id,
-      direction: "right",
-      ratio: horizontalNodeCount / (horizontalNodeCount + 1),
-    };
-  },
-};
-
-function calculateHorizontalSplitCount(node: LayoutNode): number {
-  if (node.type === "panel") {
-    return 0;
-  } else if (node.type === "split") {
-    if (node.orientation === "horizontal") {
-      return (
-        1 +
-        calculateHorizontalSplitCount(node.left) +
-        calculateHorizontalSplitCount(node.right)
-      );
-    } else if (node.orientation === "vertical") {
-      return (
-        0 +
-        calculateHorizontalSplitCount(node.left) +
-        calculateHorizontalSplitCount(node.right)
-      );
-    } else {
-      assertNever(node.orientation);
-    }
-  } else {
-    assertNever(node);
-  }
-}
-
-export const bspStrategy: AddPanelStrategy = {
-  getPlacement(root) {
-    const rightMostPanel = findRightMostPanel(root);
-    const parentNode = findParentNode(root, rightMostPanel.id);
-
-    return {
-      targetId: rightMostPanel.id,
-      direction:
-        parentNode === null
-          ? "right"
-          : parentNode.orientation === "horizontal"
-            ? "bottom"
-            : "right",
-      ratio: 0.5,
-    };
-  },
-};
-
-function findRightMostPanel(node: LayoutNode): PanelNode {
-  if (node.type === "panel") {
-    return node;
-  } else if (node.type === "split") {
-    return findRightMostPanel(node.right);
-  } else {
-    assertNever(node);
-  }
-}

package/src/types.ts

@@ -1,31 +0,0 @@
-import type { Orientation, Rect, Size } from "./internal/LayoutManager/types";
-
-export interface LayoutManagerOptions {
-  size?: Size;
-  gap?: number;
-}
-
-export interface PanelLayoutRect extends Pick<PanelNode, "id" | "type">, Rect {}
-
-export interface SplitLayoutRect
-  extends Pick<SplitNode, "id" | "type" | "orientation">,
-    Rect {}
-
-export type LayoutRect = PanelLayoutRect | SplitLayoutRect;
-
-export interface PanelNode {
-  type: "panel";
-  id: string;
-  minSize?: Partial<Size>;
-}
-
-export interface SplitNode {
-  type: "split";
-  id: string;
-  left: LayoutNode;
-  right: LayoutNode;
-  orientation: Orientation;
-  ratio: number;
-}
-
-export type LayoutNode = PanelNode | SplitNode;

package/src/useDockLayout.ts

@@ -1,249 +0,0 @@
-import {
-  type CSSProperties,
-  type MouseEvent as ReactMouseEvent,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-  useSyncExternalStore,
-} from "react";
-import { assertNever } from "./internal/assertNever";
-import { invariant } from "./internal/invariant";
-import { LayoutManager } from "./internal/LayoutManager/LayoutManager";
-import type { Direction } from "./internal/LayoutManager/types";
-import type {
-  LayoutManagerOptions,
-  LayoutNode,
-  LayoutRect,
-  PanelLayoutRect,
-  SplitLayoutRect,
-} from "./types";
-
-export function useDockLayout<T extends HTMLElement>(
-  initialRoot: LayoutNode | null,
-  options?: LayoutManagerOptions,
-) {
-  const [layoutManager] = useState(() => {
-    return new LayoutManager(initialRoot, options);
-  });
-  const containerRef = useRef<T>(null);
-  const layoutRects = useSyncExternalStore(
-    layoutManager.subscribe,
-    () => layoutManager.layoutRects,
-  );
-  const [resizingRect, setResizingRect] = useState<SplitLayoutRect | null>(
-    null,
-  );
-  const [draggingRect, setDraggingRect] = useState<PanelLayoutRect | null>(
-    null,
-  );
-  const [dropTarget, setDropTarget] = useState<{
-    id: string;
-    direction: Direction;
-  } | null>(null);
-
-  useLayoutEffect(() => {
-    const container = containerRef.current;
-    invariant(container !== null);
-
-    layoutManager.setSize({
-      width: container.clientWidth,
-      height: container.clientHeight,
-    });
-
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        layoutManager.setSize({
-          width: entry.contentRect.width,
-          height: entry.contentRect.height,
-        });
-      }
-    });
-
-    resizeObserver.observe(container);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [layoutManager]);
-
-  useEffect(() => {
-    if (resizingRect === null) {
-      return;
-    }
-
-    function handleMouseMove(event: MouseEvent) {
-      invariant(resizingRect !== null);
-
-      layoutManager.resizePanel(resizingRect.id, {
-        x: event.clientX,
-        y: event.clientY,
-      });
-    }
-
-    function handleMouseUp() {
-      setResizingRect(null);
-    }
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [resizingRect, layoutManager]);
-
-  useEffect(() => {
-    document.body.style.cursor =
-      resizingRect === null ? "default" : CURSORS[resizingRect.orientation];
-  }, [resizingRect]);
-
-  return {
-    containerRef,
-    layoutRects,
-    layoutManager,
-    getRectProps: (rect: LayoutRect) => {
-      if (rect.type === "split") {
-        return {
-          style: {
-            position: "absolute",
-            left: rect.x,
-            top: rect.y,
-            width: rect.width,
-            height: rect.height,
-            cursor: CURSORS[rect.orientation],
-          },
-          onMouseDown: () => {
-            setResizingRect(rect);
-          },
-          onMouseUp: () => {
-            setResizingRect(null);
-          },
-        } as const;
-      } else if (rect.type === "panel") {
-        return {
-          style: {
-            position: "absolute",
-            left: rect.x,
-            top: rect.y,
-            width: rect.width,
-            height: rect.height,
-          } as const,
-          onMouseMove: (event: ReactMouseEvent<T>) => {
-            if (draggingRect === null) {
-              return;
-            }
-
-            if (draggingRect.id === rect.id) {
-              setDropTarget(null);
-              return;
-            }
-
-            const dropTarget = layoutManager.calculateDropTarget({
-              draggedPanelId: draggingRect.id,
-              targetPanelId: rect.id,
-              point: {
-                x: event.clientX,
-                y: event.clientY,
-              },
-            });
-            setDropTarget(dropTarget);
-          },
-          onMouseUp: (event: ReactMouseEvent<T>) => {
-            if (draggingRect === null) {
-              return;
-            }
-
-            if (draggingRect.id === rect.id) {
-              setDraggingRect(null);
-              setDropTarget(null);
-              return;
-            }
-
-            layoutManager.movePanel({
-              sourceId: draggingRect.id,
-              targetId: rect.id,
-              point: {
-                x: event.clientX,
-                y: event.clientY,
-              },
-            });
-            setDraggingRect(null);
-            setDropTarget(null);
-          },
-        } as const;
-      } else {
-        assertNever(rect);
-      }
-    },
-    getDropZoneProps: (rect: PanelLayoutRect) => {
-      if (draggingRect === null) {
-        return null;
-      }
-
-      const isDropTargetRect = rect.id === dropTarget?.id;
-      if (!isDropTargetRect) {
-        return null;
-      }
-
-      return {
-        style: getDropZoneStyle(dropTarget.direction),
-      };
-    },
-    getDragHandleProps: (rect: PanelLayoutRect) => {
-      return {
-        onMouseDown: () => {
-          setDraggingRect(rect);
-        },
-      };
-    },
-    draggingRect,
-  };
-}
-
-function getDropZoneStyle(direction: Direction) {
-  if (direction === "top") {
-    return {
-      position: "absolute",
-      left: 0,
-      top: 0,
-      width: "100%",
-      height: "50%",
-    } as const;
-  } else if (direction === "bottom") {
-    return {
-      position: "absolute",
-      left: 0,
-      top: "50%",
-      width: "100%",
-      height: "50%",
-    } as const;
-  } else if (direction === "left") {
-    return {
-      position: "absolute",
-      left: 0,
-      top: 0,
-      width: "50%",
-      height: "100%",
-    } as const;
-  } else if (direction === "right") {
-    return {
-      position: "absolute",
-      left: "50%",
-      top: 0,
-      width: "50%",
-      height: "100%",
-    } as const;
-  } else {
-    assertNever(direction);
-  }
-}
-
-const CURSORS: Record<
-  SplitLayoutRect["orientation"],
-  NonNullable<CSSProperties["cursor"]>
-> = {
-  horizontal: "col-resize",
-  vertical: "row-resize",
-};

package/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "extends": "@total-typescript/tsconfig/bundler/dom/library",
-  "compilerOptions": {
-    "jsx": "react-jsx"
-  },
-  "include": ["src"]
-}

package/tsup.config.ts

@@ -1,9 +0,0 @@
-import { defineConfig } from "tsup";
-
-export default defineConfig({
-  entry: ["src/index.ts"],
-  format: ["esm", "cjs"],
-  splitting: true,
-  clean: true,
-  dts: true,
-});