react-headless-dock-layout 0.1.0

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

@@ -0,0 +1,341 @@
+import { describe, expect, it } from "vitest";
+import type { LayoutNode, PanelNode, SplitNode } from "../../types";
+import { LayoutTree } from "./LayoutTree";
+
+describe("LayoutTree", () => {
+  describe("findNode", () => {
+    it("should return null when the root is null", () => {
+      const root = null;
+      const tree = new LayoutTree(root);
+      expect(tree.findNode("root")).toBeNull();
+    });
+
+    it("should return null when the node is not found", () => {
+      const root: LayoutNode = {
+        id: "root",
+        type: "panel",
+      };
+      const tree = new LayoutTree(root);
+      expect(tree.findNode("non-existent-id")).toBeNull();
+    });
+
+    it("should return node when the node is root panel", () => {
+      const root: LayoutNode = {
+        id: "root",
+        type: "panel",
+      };
+      const tree = new LayoutTree(root);
+      expect(tree.findNode("root")).toBe(root);
+    });
+
+    it("should return node when the node is root split", () => {
+      const root: LayoutNode = {
+        id: "root",
+        type: "split",
+        orientation: "horizontal",
+        ratio: 0.5,
+        left: {
+          id: "left",
+          type: "panel",
+        },
+        right: {
+          id: "right",
+          type: "panel",
+        },
+      };
+      const tree = new LayoutTree(root);
+      expect(tree.findNode("root")).toEqual(root);
+    });
+
+    it("should return node when the node is a child of the root", () => {
+      const left: PanelNode = {
+        id: "left",
+        type: "panel",
+      };
+      const root: LayoutNode = {
+        id: "root",
+        type: "split",
+        orientation: "horizontal",
+        ratio: 0.5,
+        left,
+        right: {
+          id: "right",
+          type: "panel",
+        },
+      };
+      const tree = new LayoutTree(root);
+      expect(tree.findNode("left")).toEqual(left);
+    });
+
+    it("should return node when the node is a grand child of the root", () => {
+      const leftLeft: PanelNode = {
+        id: "left-left",
+        type: "panel",
+      };
+      const root: LayoutNode = {
+        id: "root",
+        type: "split",
+        orientation: "horizontal",
+        ratio: 0.5,
+        left: {
+          id: "left",
+          type: "split",
+          orientation: "horizontal",
+          ratio: 0.5,
+          left: leftLeft,
+          right: {
+            id: "left-right",
+            type: "panel",
+          },
+        },
+        right: {
+          id: "right",
+          type: "panel",
+        },
+      };
+      const tree = new LayoutTree(root);
+      expect(tree.findNode("left-left")).toBe(leftLeft);
+    });
+  });
+
+  describe("findParentNode", () => {
+    it("should return null when the root is null", () => {
+      const root = null;
+      const tree = new LayoutTree(root);
+      expect(tree.findParentNode("root")).toBeNull();
+    });
+
+    it("should return null when the child node is root panel", () => {
+      const root: PanelNode = {
+        id: "root",
+        type: "panel",
+      };
+      const tree = new LayoutTree(root);
+      expect(tree.findParentNode("root")).toBeNull();
+    });
+
+    it("should return null when the child node is root split", () => {
+      const root: LayoutNode = {
+        id: "root",
+        type: "split",
+        orientation: "horizontal",
+        ratio: 0.5,
+        left: {
+          id: "left",
+          type: "panel",
+        },
+        right: {
+          id: "right",
+          type: "panel",
+        },
+      };
+      const tree = new LayoutTree(root);
+      expect(tree.findParentNode("root")).toBeNull();
+    });
+
+    it("should return null when the child node is not found", () => {
+      const root: LayoutNode = {
+        id: "root",
+        type: "split",
+        orientation: "horizontal",
+        ratio: 0.5,
+        left: {
+          id: "left",
+          type: "panel",
+        },
+        right: {
+          id: "right",
+          type: "panel",
+        },
+      };
+      const tree = new LayoutTree(root);
+      expect(tree.findParentNode("non-existent-child-id")).toBeNull();
+    });
+
+    it("should return node when the child node is a child of the root", () => {
+      const root: LayoutNode = {
+        id: "root",
+        type: "split",
+        orientation: "horizontal",
+        ratio: 0.5,
+        left: {
+          id: "left",
+          type: "panel",
+        },
+        right: {
+          id: "right",
+          type: "panel",
+        },
+      };
+      const tree = new LayoutTree(root);
+      expect(tree.findParentNode("left")).toBe(root);
+    });
+
+    it("should return node when the child node is a grand child of the root", () => {
+      const left: SplitNode = {
+        id: "left",
+        type: "split",
+        orientation: "horizontal",
+        ratio: 0.5,
+        left: {
+          id: "left-left",
+          type: "panel",
+        },
+        right: {
+          id: "left-right",
+          type: "panel",
+        },
+      };
+      const root: LayoutNode = {
+        id: "root",
+        type: "split",
+        orientation: "horizontal",
+        ratio: 0.5,
+        left,
+        right: {
+          id: "right",
+          type: "panel",
+        },
+      };
+      const tree = new LayoutTree(root);
+      expect(tree.findParentNode("left-left")).toBe(left);
+    });
+  });
+
+  describe("replaceChildNode", () => {
+    it("should throw an error if the parent node is not found", () => {
+      const tree = new LayoutTree(null);
+      expect(() =>
+        tree.replaceChildNode({
+          parentId: "non-existent-parent-id",
+          oldChildId: "child",
+          newChild: { id: "new-child", type: "panel" },
+        }),
+      ).toThrowError("Parent node with id non-existent-parent-id not found");
+    });
+
+    it("should throw an error if the parent node is not a split node", () => {
+      const root: PanelNode = {
+        id: "root",
+        type: "panel",
+      };
+      const tree = new LayoutTree(root);
+      expect(() =>
+        tree.replaceChildNode({
+          parentId: "root",
+          oldChildId: "child",
+          newChild: { id: "new-child", type: "panel" },
+        }),
+      ).toThrowError("Parent node with id root is not a split node");
+    });
+
+    it("should throw an error if the child node is not found", () => {
+      const root: LayoutNode = {
+        id: "root",
+        type: "split",
+        orientation: "horizontal",
+        ratio: 0.5,
+        left: {
+          id: "left",
+          type: "panel",
+        },
+        right: {
+          id: "right",
+          type: "panel",
+        },
+      };
+      const tree = new LayoutTree(root);
+      expect(() =>
+        tree.replaceChildNode({
+          parentId: "root",
+          oldChildId: "non-existent-child-id",
+          newChild: { id: "new-child", type: "panel" },
+        }),
+      ).toThrowError("Child node with id non-existent-child-id not found");
+    });
+
+    it("should throw an error if the child node is not a child of the parent node", () => {
+      const root: LayoutNode = {
+        id: "root",
+        type: "split",
+        orientation: "horizontal",
+        ratio: 0.5,
+        left: { id: "left", type: "panel" },
+        right: {
+          id: "right",
+          type: "split",
+          orientation: "horizontal",
+          ratio: 0.5,
+          left: { id: "right-left", type: "panel" },
+          right: { id: "right-right", type: "panel" },
+        },
+      };
+      const tree = new LayoutTree(root);
+      expect(() =>
+        tree.replaceChildNode({
+          parentId: "root",
+          oldChildId: "right-left",
+          newChild: { id: "new-child", type: "panel" },
+        }),
+      ).toThrow(
+        "Child node with id right-left is not a child of the parent node with id root",
+      );
+    });
+
+    it("should replace the child node when the child node is the left child of the parent node", () => {
+      const root: LayoutNode = {
+        id: "root",
+        type: "split",
+        orientation: "horizontal",
+        ratio: 0.5,
+        left: {
+          id: "left",
+          type: "panel",
+        },
+        right: {
+          id: "right",
+          type: "panel",
+        },
+      };
+      const tree = new LayoutTree(root);
+      const newChild: PanelNode = {
+        id: "new-child",
+        type: "panel",
+      };
+      tree.replaceChildNode({
+        parentId: "root",
+        oldChildId: "left",
+        newChild: newChild,
+      });
+      expect(root.left).toBe(newChild);
+    });
+
+    it("should replace the child node when the child node is the right child of the parent node", () => {
+      const root: LayoutNode = {
+        id: "root",
+        type: "split",
+        orientation: "horizontal",
+        ratio: 0.5,
+        left: {
+          id: "left",
+          type: "panel",
+        },
+        right: {
+          id: "right",
+          type: "panel",
+        },
+      };
+      const tree = new LayoutTree(root);
+      const newChild: PanelNode = {
+        id: "new-child",
+        type: "panel",
+      };
+      tree.replaceChildNode({
+        parentId: "root",
+        oldChildId: "right",
+        newChild: newChild,
+      });
+      expect(root.right).toBe(newChild);
+    });
+  });
+});

package/src/internal/LayoutManager/LayoutTree.ts

@@ -0,0 +1,82 @@
+import type { LayoutNode } from "../../types";
+import { assertNever } from "../assertNever";
+import { findParentNode } from "../findParentNode";
+
+export class LayoutTree {
+  private _root: LayoutNode | null = null;
+
+  constructor(root: LayoutNode | null) {
+    this._root = root;
+  }
+
+  get root() {
+    return this._root;
+  }
+
+  set root(root: LayoutNode | null) {
+    this._root = root;
+  }
+
+  findNode(id: string) {
+    if (this._root === null) {
+      return null;
+    }
+
+    return this.findNodeInSubTree(id, this._root);
+  }
+
+  private findNodeInSubTree(id: string, node: LayoutNode): LayoutNode | null {
+    if (id === node.id) {
+      return node;
+    }
+
+    if (node.type === "panel") {
+      return null;
+    } else if (node.type === "split") {
+      return (
+        this.findNodeInSubTree(id, node.left) ??
+        this.findNodeInSubTree(id, node.right)
+      );
+    } else {
+      assertNever(node);
+    }
+  }
+
+  findParentNode(id: string) {
+    return findParentNode(this._root, id);
+  }
+
+  replaceChildNode({
+    parentId,
+    oldChildId,
+    newChild,
+  }: {
+    parentId: string;
+    oldChildId: string;
+    newChild: LayoutNode;
+  }) {
+    const parentNode = this.findNode(parentId);
+    if (parentNode === null) {
+      throw new Error(`Parent node with id ${parentId} not found`);
+    }
+
+    if (parentNode.type !== "split") {
+      throw new Error(`Parent node with id ${parentId} is not a split node`);
+    }
+
+    const oldChildNode = this.findNode(oldChildId);
+    if (oldChildNode === null) {
+      throw new Error(`Child node with id ${oldChildId} not found`);
+    }
+
+    if (parentNode.left.id === oldChildId) {
+      parentNode.left = newChild;
+    } else if (parentNode.right.id === oldChildId) {
+      parentNode.right = newChild;
+    } else {
+      throw new Error(
+        `Child node with id ${oldChildId} is not a child of the parent node with id ${parentId}`,
+      );
+    }
+  }
+}

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

@@ -0,0 +1,211 @@
+import { describe, expect, it } from "vitest";
+import type { LayoutRect, PanelNode, SplitNode } from "../../types";
+import { calculateLayoutRects } from "./calculateLayoutRects";
+
+describe("calculateLayoutRects", () => {
+  it("should return an empty array when the root is null", () => {
+    const root = null;
+    const options = {
+      gap: 10,
+      size: { width: 100, height: 100 },
+    };
+    const result = calculateLayoutRects(root, options);
+    expect(result).toEqual([]);
+  });
+
+  it("should return correct layout rects when the root is panel node", () => {
+    const root: PanelNode = {
+      id: "root",
+      type: "panel",
+    };
+    const options = {
+      gap: 10,
+      size: { width: 100, height: 100 },
+    };
+    const result = calculateLayoutRects(root, options);
+    expect(result).toEqual([
+      {
+        id: "root",
+        type: "panel",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      },
+    ]);
+  });
+
+  it("should return correct layout rects when the root is split node with horizontal orientation", () => {
+    const root: SplitNode = {
+      id: "root",
+      type: "split",
+      orientation: "horizontal",
+      ratio: 0.5,
+      left: {
+        id: "left",
+        type: "panel",
+      },
+      right: {
+        id: "right",
+        type: "panel",
+      },
+    };
+    const options = {
+      gap: 10,
+      size: { width: 100, height: 100 },
+    };
+    const result = calculateLayoutRects(root, options);
+    expect(result).toEqual<LayoutRect[]>([
+      {
+        id: "root",
+        type: "split",
+        orientation: "horizontal",
+        x: 45,
+        y: 0,
+        width: 10,
+        height: 100,
+      },
+      {
+        id: "left",
+        type: "panel",
+        x: 0,
+        y: 0,
+        width: 45,
+        height: 100,
+      },
+      {
+        id: "right",
+        type: "panel",
+        x: 55,
+        y: 0,
+        width: 45,
+        height: 100,
+      },
+    ]);
+  });
+
+  it("should return correct layout rects when the root is split node with vertical orientation", () => {
+    const root: SplitNode = {
+      id: "root",
+      type: "split",
+      orientation: "vertical",
+      ratio: 0.5,
+      left: {
+        id: "left",
+        type: "panel",
+      },
+      right: {
+        id: "right",
+        type: "panel",
+      },
+    };
+    const options = {
+      gap: 10,
+      size: { width: 100, height: 100 },
+    };
+    const result = calculateLayoutRects(root, options);
+    expect(result).toEqual<LayoutRect[]>([
+      {
+        id: "root",
+        type: "split",
+        orientation: "vertical",
+        x: 0,
+        y: 45,
+        width: 100,
+        height: 10,
+      },
+      {
+        id: "left",
+        type: "panel",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 45,
+      },
+      {
+        id: "right",
+        type: "panel",
+        x: 0,
+        y: 55,
+        width: 100,
+        height: 45,
+      },
+    ]);
+  });
+
+  it("should return correct layout rects when the root is nested split node", () => {
+    const root: SplitNode = {
+      id: "root",
+      type: "split",
+      orientation: "horizontal",
+      ratio: 0.5,
+      left: {
+        id: "left",
+        type: "split",
+        orientation: "vertical",
+        ratio: 0.5,
+        left: {
+          id: "left-left",
+          type: "panel",
+        },
+        right: {
+          id: "left-right",
+          type: "panel",
+        },
+      },
+      right: {
+        id: "right",
+        type: "panel",
+      },
+    };
+    const options = {
+      gap: 10,
+      size: { width: 100, height: 100 },
+    };
+    const result = calculateLayoutRects(root, options);
+    expect(result).toEqual<LayoutRect[]>([
+      {
+        id: "root",
+        type: "split",
+        orientation: "horizontal",
+        x: 45,
+        y: 0,
+        width: 10,
+        height: 100,
+      },
+      {
+        id: "left",
+        type: "split",
+        orientation: "vertical",
+        x: 0,
+        y: 45,
+        width: 45,
+        height: 10,
+      },
+      {
+        id: "left-left",
+        type: "panel",
+        x: 0,
+        y: 0,
+        width: 45,
+        height: 45,
+      },
+      {
+        id: "left-right",
+        type: "panel",
+        x: 0,
+        y: 55,
+        width: 45,
+        height: 45,
+      },
+      {
+        id: "right",
+        type: "panel",
+        x: 55,
+        y: 0,
+        width: 45,
+        height: 100,
+      },
+    ]);
+  });
+});

package/src/internal/LayoutManager/calculateLayoutRects.ts

@@ -0,0 +1,88 @@
+import type { LayoutManagerOptions, LayoutNode, LayoutRect } from "../../types";
+import { assertNever } from "../assertNever";
+import type { Rect } from "./types";
+
+export function calculateLayoutRects(
+  root: LayoutNode | null,
+  options: Required<LayoutManagerOptions>,
+): LayoutRect[] {
+  if (root === null) {
+    return [];
+  }
+
+  const rects: LayoutRect[] = [];
+
+  const traverse = (node: LayoutNode, rect: Rect) => {
+    if (node.type === "split") {
+      if (node.orientation === "horizontal") {
+        rects.push({
+          id: node.id,
+          type: "split",
+          orientation: node.orientation,
+          x: Math.round(rect.x + rect.width * node.ratio - options.gap / 2),
+          y: Math.round(rect.y),
+          width: Math.round(options.gap),
+          height: Math.round(rect.height),
+        });
+
+        traverse(node.left, {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width * node.ratio - options.gap / 2,
+          height: rect.height,
+        });
+        traverse(node.right, {
+          x: rect.x + rect.width * node.ratio + options.gap / 2,
+          y: rect.y,
+          width: rect.width * (1 - node.ratio) - options.gap / 2,
+          height: rect.height,
+        });
+      } else if (node.orientation === "vertical") {
+        rects.push({
+          id: node.id,
+          type: "split",
+          orientation: node.orientation,
+          x: Math.round(rect.x),
+          y: Math.round(rect.y + rect.height * node.ratio - options.gap / 2),
+          width: Math.round(rect.width),
+          height: Math.round(options.gap),
+        });
+
+        traverse(node.left, {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height * node.ratio - options.gap / 2,
+        });
+        traverse(node.right, {
+          x: rect.x,
+          y: rect.y + rect.height * node.ratio + options.gap / 2,
+          width: rect.width,
+          height: rect.height * (1 - node.ratio) - options.gap / 2,
+        });
+      } else {
+        assertNever(node.orientation);
+      }
+    } else if (node.type === "panel") {
+      rects.push({
+        id: node.id,
+        type: "panel",
+        x: Math.round(rect.x),
+        y: Math.round(rect.y),
+        width: Math.round(rect.width),
+        height: Math.round(rect.height),
+      });
+    } else {
+      assertNever(node);
+    }
+  };
+
+  traverse(root, {
+    x: 0,
+    y: 0,
+    width: options.size.width,
+    height: options.size.height,
+  });
+
+  return rects;
+}