react-resizable-panels 2.0.4 → 2.0.5

package/src/utils/rects/getIntersectingRectangle.test.ts

@@ -0,0 +1,198 @@
+import { getIntersectingRectangle } from "./getIntersectingRectangle";
+import { Rectangle } from "./types";
+
+const emptyRect = { x: 0, y: 0, width: 0, height: 0 };
+const rect = { x: 25, y: 25, width: 50, height: 50 };
+
+function forkRect(partial: Partial<Rectangle>, baseRect: Rectangle = rect) {
+  return { ...rect, ...partial };
+}
+
+describe("getIntersectingRectangle", () => {
+  let strict: boolean = false;
+
+  function verify(rectOne: Rectangle, rectTwo: Rectangle, expected: Rectangle) {
+    const actual = getIntersectingRectangle(rectOne, rectTwo, strict);
+
+    try {
+      expect(actual).toEqual(expected);
+    } catch (thrown) {
+      console.log(
+        "Expect",
+        strict ? "strict mode" : "loose mode",
+        "\n",
+        rectOne,
+        "\n",
+        rectTwo,
+        "\n\nto intersect as:\n",
+        expected,
+        "\n\nbut got:\n",
+        actual
+      );
+
+      throw thrown;
+    }
+  }
+
+  describe("loose", () => {
+    beforeEach(() => {
+      strict = false;
+    });
+
+    it("should support empty rects", () => {
+      verify(emptyRect, emptyRect, emptyRect);
+    });
+
+    it("should support fully overlapping rects", () => {
+      verify(rect, forkRect({ x: 35, width: 30 }), {
+        x: 35,
+        y: 25,
+        width: 30,
+        height: 50,
+      });
+
+      verify(rect, forkRect({ y: 35, height: 30 }), {
+        x: 25,
+        y: 35,
+        width: 50,
+        height: 30,
+      });
+
+      verify(
+        rect,
+        forkRect({
+          x: 35,
+          y: 35,
+          width: 30,
+          height: 30,
+        }),
+
+        {
+          x: 35,
+          y: 35,
+          width: 30,
+          height: 30,
+        }
+      );
+    });
+
+    it("should support partially overlapping rects", () => {
+      verify(rect, forkRect({ x: 10, y: 10 }), {
+        x: 25,
+        y: 25,
+        width: 35,
+        height: 35,
+      });
+
+      verify(rect, forkRect({ x: 45, y: 30 }), {
+        x: 45,
+        y: 30,
+        width: 30,
+        height: 45,
+      });
+    });
+
+    it("should support non-overlapping rects", () => {
+      verify(rect, forkRect({ x: 100, y: 100 }), emptyRect);
+    });
+
+    it("should support all negative coordinates", () => {
+      verify(
+        {
+          x: -100,
+          y: -100,
+          width: 50,
+          height: 50,
+        },
+        { x: -80, y: -80, width: 50, height: 50 },
+        {
+          x: -80,
+          y: -80,
+          width: 30,
+          height: 30,
+        }
+      );
+    });
+  });
+
+  describe("strict", () => {
+    beforeEach(() => {
+      strict = true;
+    });
+
+    it("should support empty rects", () => {
+      verify(emptyRect, emptyRect, emptyRect);
+    });
+
+    it("should support fully overlapping rects", () => {
+      verify(rect, forkRect({ x: 35, width: 30 }), {
+        x: 35,
+        y: 25,
+        width: 30,
+        height: 50,
+      });
+
+      verify(rect, forkRect({ y: 35, height: 30 }), {
+        x: 25,
+        y: 35,
+        width: 50,
+        height: 30,
+      });
+
+      verify(
+        rect,
+        forkRect({
+          x: 35,
+          y: 35,
+          width: 30,
+          height: 30,
+        }),
+
+        {
+          x: 35,
+          y: 35,
+          width: 30,
+          height: 30,
+        }
+      );
+    });
+
+    it("should support partially overlapping rects", () => {
+      verify(rect, forkRect({ x: 10, y: 10 }), {
+        x: 25,
+        y: 25,
+        width: 35,
+        height: 35,
+      });
+
+      verify(rect, forkRect({ x: 45, y: 30 }), {
+        x: 45,
+        y: 30,
+        width: 30,
+        height: 45,
+      });
+    });
+
+    it("should support non-overlapping rects", () => {
+      verify(rect, forkRect({ x: 100, y: 100 }), emptyRect);
+    });
+
+    it("should support all negative coordinates", () => {
+      verify(
+        {
+          x: -100,
+          y: -100,
+          width: 50,
+          height: 50,
+        },
+        { x: -80, y: -80, width: 50, height: 50 },
+        {
+          x: -80,
+          y: -80,
+          width: 30,
+          height: 30,
+        }
+      );
+    });
+  });
+});

package/src/utils/rects/getIntersectingRectangle.ts

@@ -0,0 +1,28 @@
+import { intersects } from "./intersects";
+import { Rectangle } from "./types";
+
+export function getIntersectingRectangle(
+  rectOne: Rectangle,
+  rectTwo: Rectangle,
+  strict: boolean
+): Rectangle {
+  if (!intersects(rectOne, rectTwo, strict)) {
+    return {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+    };
+  }
+
+  return {
+    x: Math.max(rectOne.x, rectTwo.x),
+    y: Math.max(rectOne.y, rectTwo.y),
+    width:
+      Math.min(rectOne.x + rectOne.width, rectTwo.x + rectTwo.width) -
+      Math.max(rectOne.x, rectTwo.x),
+    height:
+      Math.min(rectOne.y + rectOne.height, rectTwo.y + rectTwo.height) -
+      Math.max(rectOne.y, rectTwo.y),
+  };
+}

package/src/utils/rects/intersects.test.ts

@@ -0,0 +1,197 @@
+import { intersects } from "./intersects";
+import { Rectangle } from "./types";
+
+const emptyRect = { x: 0, y: 0, width: 0, height: 0 };
+const rect = { x: 25, y: 25, width: 50, height: 50 };
+
+function forkRect(partial: Partial<Rectangle>, baseRect: Rectangle = rect) {
+  return { ...rect, ...partial };
+}
+
+describe("intersects", () => {
+  let strict: boolean = false;
+
+  function verify(rectOne: Rectangle, rectTwo: Rectangle, expected: boolean) {
+    const actual = intersects(rectOne, rectTwo, strict);
+
+    try {
+      expect(actual).toBe(expected);
+    } catch (thrown) {
+      console.log(
+        "Expected",
+        rectOne,
+        "to",
+        expected ? "intersect" : "not intersect",
+        rectTwo,
+        strict ? "in strict mode" : "in loose mode"
+      );
+
+      throw thrown;
+    }
+  }
+
+  describe("loose", () => {
+    beforeEach(() => {
+      strict = false;
+    });
+
+    it("should handle empty rects", () => {
+      verify(emptyRect, emptyRect, true);
+    });
+
+    it("should support fully overlapping rects", () => {
+      verify(rect, rect, true);
+
+      verify(rect, forkRect({ x: 35, width: 30 }), true);
+      verify(rect, forkRect({ y: 35, height: 30 }), true);
+      verify(
+        rect,
+        forkRect({
+          x: 35,
+          y: 35,
+          width: 30,
+          height: 30,
+        }),
+        true
+      );
+
+      verify(rect, forkRect({ x: 10, width: 100 }), true);
+      verify(rect, forkRect({ y: 10, height: 100 }), true);
+      verify(
+        rect,
+        forkRect({
+          x: 10,
+          y: 10,
+          width: 100,
+          height: 100,
+        }),
+        true
+      );
+    });
+
+    it("should support partially overlapping rects", () => {
+      const cases: Partial<Rectangle>[] = [
+        { x: 0 },
+        { y: 0 },
+
+        // Loose mode only
+        { x: -25 },
+        { x: 75 },
+        { y: -25 },
+        { y: 75 },
+        { x: -25, y: -25 },
+        { x: 75, y: 75 },
+      ];
+
+      cases.forEach((partial) => {
+        verify(forkRect(partial), rect, true);
+      });
+    });
+
+    it("should support non-overlapping rects", () => {
+      const cases: Partial<Rectangle>[] = [
+        { x: 100 },
+        { x: -100 },
+        { y: 100 },
+        { y: -100 },
+        { x: -100, y: -100 },
+        { x: 100, y: 100 },
+      ];
+
+      cases.forEach((partial) => {
+        verify(forkRect(partial), rect, false);
+      });
+    });
+
+    it("should support all negative coordinates", () => {
+      expect(
+        intersects(
+          { x: -100, y: -100, width: 50, height: 50 },
+          { x: -110, y: -90, width: 50, height: 50 },
+          false
+        )
+      ).toBe(true);
+    });
+  });
+
+  describe("strict", () => {
+    beforeEach(() => {
+      strict = true;
+    });
+
+    it("should handle empty rects", () => {
+      verify(emptyRect, emptyRect, false);
+    });
+
+    it("should support fully overlapping rects", () => {
+      verify(rect, rect, true);
+
+      verify(rect, forkRect({ x: 35, width: 30 }), true);
+      verify(rect, forkRect({ y: 35, height: 30 }), true);
+      verify(
+        rect,
+        forkRect({
+          x: 35,
+          y: 35,
+          width: 30,
+          height: 30,
+        }),
+        true
+      );
+
+      verify(rect, forkRect({ x: 10, width: 100 }), true);
+      verify(rect, forkRect({ y: 10, height: 100 }), true);
+      verify(
+        rect,
+        forkRect({
+          x: 10,
+          y: 10,
+          width: 100,
+          height: 100,
+        }),
+        true
+      );
+    });
+
+    it("should support partially overlapping rects", () => {
+      const cases: Partial<Rectangle>[] = [{ x: 0 }, { y: 0 }];
+
+      cases.forEach((partial) => {
+        verify(forkRect(partial), rect, true);
+      });
+    });
+
+    it("should support non-overlapping rects", () => {
+      const cases: Partial<Rectangle>[] = [
+        { x: 100 },
+        { x: -100 },
+        { y: 100 },
+        { y: -100 },
+        { x: -100, y: -100 },
+        { x: 100, y: 100 },
+
+        // Strict mode only
+        { x: -25 },
+        { x: 75 },
+        { y: -25 },
+        { y: 75 },
+        { x: -25, y: -25 },
+        { x: 75, y: 75 },
+      ];
+
+      cases.forEach((partial) => {
+        verify(forkRect(partial), rect, false);
+      });
+    });
+
+    it("should support all negative coordinates", () => {
+      expect(
+        intersects(
+          { x: -100, y: -100, width: 50, height: 50 },
+          { x: -110, y: -90, width: 50, height: 50 },
+          true
+        )
+      ).toBe(true);
+    });
+  });
+});

package/src/utils/rects/intersects.ts

@@ -0,0 +1,23 @@
+import { Rectangle } from "./types";
+
+export function intersects(
+  rectOne: Rectangle,
+  rectTwo: Rectangle,
+  strict: boolean
+): boolean {
+  if (strict) {
+    return (
+      rectOne.x < rectTwo.x + rectTwo.width &&
+      rectOne.x + rectOne.width > rectTwo.x &&
+      rectOne.y < rectTwo.y + rectTwo.height &&
+      rectOne.y + rectOne.height > rectTwo.y
+    );
+  } else {
+    return (
+      rectOne.x <= rectTwo.x + rectTwo.width &&
+      rectOne.x + rectOne.width >= rectTwo.x &&
+      rectOne.y <= rectTwo.y + rectTwo.height &&
+      rectOne.y + rectOne.height >= rectTwo.y
+    );
+  }
+}

package/src/utils/rects/types.ts

@@ -0,0 +1,6 @@
+export interface Rectangle {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}