rebind arrow on rotation (#2096)

src/tests/binding.test.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { render } from "./test-utils";
+import App from "../components/App";
+import { UI, Pointer } from "./helpers/ui";
+import { getTransformHandles } from "../element/transformHandles";
+
+const { h } = window;
+
+const mouse = new Pointer("mouse");
+
+describe("element binding", () => {
+  beforeEach(() => {
+    render(<App />);
+  });
+
+  // NOTE if this tests fails, skip it -- it was really flaky at one point
+  it("rotation of arrow should rebind both ends", () => {
+    const rect1 = UI.createElement("rectangle", {
+      x: 0,
+      width: 100,
+      height: 1000,
+    });
+    const rect2 = UI.createElement("rectangle", {
+      x: 200,
+      width: 100,
+      height: 1000,
+    });
+    const arrow = UI.createElement("arrow", {
+      x: 110,
+      y: 50,
+      width: 80,
+      height: 1,
+    });
+    expect(arrow.startBinding?.elementId).toBe(rect1.id);
+    expect(arrow.endBinding?.elementId).toBe(rect2.id);
+
+    const { rotation } = getTransformHandles(arrow, h.state.zoom, "mouse");
+    if (rotation) {
+      const rotationHandleX = rotation[0] + rotation[2] / 2;
+      const rotationHandleY = rotation[1] + rotation[3] / 2;
+      mouse.down(rotationHandleX, rotationHandleY);
+      mouse.move(0, 1000);
+      mouse.up();
+    }
+    expect(arrow.angle).toBeGreaterThan(3);
+    expect(arrow.startBinding?.elementId).toBe(rect2.id);
+    expect(arrow.endBinding?.elementId).toBe(rect1.id);
+  });
+});