fix: Elbow arrow fixedpoint flipping now properly flips on inverted resize and flip action (#8324)
* Flipping action now properly mirrors selections with elbow arrows * Flipping action now re-centers the selection to the original center to avoid "walking" selections on repeated flippingpull/8536/head
parent
44a1c8d857
commit
f3f0ab7c83
@ -0,0 +1,89 @@
|
||||
import React from "react";
|
||||
import { Excalidraw } from "../index";
|
||||
import { render } from "../tests/test-utils";
|
||||
import { API } from "../tests/helpers/api";
|
||||
import { point } from "../../math";
|
||||
import { actionFlipHorizontal } from "./actionFlip";
|
||||
|
||||
const { h } = window;
|
||||
|
||||
const testElements = [
|
||||
API.createElement({
|
||||
type: "rectangle",
|
||||
id: "rec1",
|
||||
x: 1046,
|
||||
y: 541,
|
||||
width: 100,
|
||||
height: 100,
|
||||
boundElements: [
|
||||
{
|
||||
id: "arr",
|
||||
type: "arrow",
|
||||
},
|
||||
],
|
||||
}),
|
||||
API.createElement({
|
||||
type: "rectangle",
|
||||
id: "rec2",
|
||||
x: 1169,
|
||||
y: 777,
|
||||
width: 102,
|
||||
height: 115,
|
||||
boundElements: [
|
||||
{
|
||||
id: "arr",
|
||||
type: "arrow",
|
||||
},
|
||||
],
|
||||
}),
|
||||
API.createElement({
|
||||
type: "arrow",
|
||||
id: "arrow",
|
||||
x: 1103.0717787616313,
|
||||
y: 536.8531862198708,
|
||||
width: 159.68539325842903,
|
||||
height: 333.0396003698186,
|
||||
startBinding: {
|
||||
elementId: "rec1",
|
||||
focus: 0.1366906474820229,
|
||||
gap: 5.000000000000057,
|
||||
fixedPoint: [0.5683453237410123, -0.05014327585315258],
|
||||
},
|
||||
endBinding: {
|
||||
elementId: "rec2",
|
||||
focus: 0.0014925373134265828,
|
||||
gap: 5,
|
||||
fixedPoint: [-0.04862325174825108, 0.4992537313432874],
|
||||
},
|
||||
points: [
|
||||
point(0, 0),
|
||||
point(0, -35),
|
||||
point(-97.80898876404626, -35),
|
||||
point(-97.80898876404626, 298.0396003698186),
|
||||
point(61.87640449438277, 298.0396003698186),
|
||||
],
|
||||
elbowed: true,
|
||||
}),
|
||||
];
|
||||
|
||||
describe("flipping action", () => {
|
||||
it("flip re-centers the selection even after multiple flip actions", async () => {
|
||||
await render(<Excalidraw initialData={{ elements: testElements }} />);
|
||||
|
||||
API.setSelectedElements(testElements);
|
||||
|
||||
expect(Object.keys(h.state.selectedElementIds).length).toBe(3);
|
||||
|
||||
API.executeAction(actionFlipHorizontal);
|
||||
API.executeAction(actionFlipHorizontal);
|
||||
API.executeAction(actionFlipHorizontal);
|
||||
|
||||
const rec1 = h.elements.find((el) => el.id === "rec1");
|
||||
expect(rec1?.x).toBeCloseTo(1113.78, 0);
|
||||
expect(rec1?.y).toBeCloseTo(541, 0);
|
||||
|
||||
const rec2 = h.elements.find((el) => el.id === "rec2");
|
||||
expect(rec2?.x).toBeCloseTo(988.72, 0);
|
||||
expect(rec2?.y).toBeCloseTo(777, 0);
|
||||
});
|
||||
});
|
Loading…
Reference in New Issue