react-resizable-panels 2.0.3 → 2.0.5

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;
+}

package/src/utils/test-utils.ts

@@ -47,6 +47,36 @@ export function expectToBeCloseToArray(
   }
 }
 
+export function mockBoundingClientRect(
+  element: HTMLElement,
+  rect: {
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+  }
+) {
+  const { height, width, x, y } = rect;
+
+  Object.defineProperty(element, "getBoundingClientRect", {
+    configurable: true,
+    value: () =>
+      ({
+        bottom: y + height,
+        height,
+        left: x,
+        right: x + width,
+        toJSON() {
+          return "";
+        },
+        top: y,
+        width,
+        x,
+        y,
+      }) satisfies DOMRect,
+  });
+}
+
 export function mockPanelGroupOffsetWidthAndHeight(
   mockWidth = 1_000,
   mockHeight = 1_000
@@ -102,6 +132,15 @@ export function mockPanelGroupOffsetWidthAndHeight(
   };
 }
 
+export function verifyAttribute(
+  element: HTMLElement,
+  attributeName: string,
+  expectedValue: string | null
+) {
+  const actualValue = element.getAttribute(attributeName);
+  expect(actualValue).toBe(expectedValue);
+}
+
 export function verifyExpandedPanelGroupLayout(
   actualLayout: number[],
   expectedLayout: number[]