Enhance aspect ratio tools | Rectangle, Diamond, Ellipses (#2439)

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
João Forja 2020-12-06 22:39:31 +00:00 committed by GitHub
parent 4c90ea5667
commit aa221837fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 488 additions and 9492 deletions

View file

@ -13,7 +13,6 @@ import Excalidraw from "../packages/excalidraw/index";
import { setLanguage } from "../i18n";
import { setDateTimeForTests } from "../utils";
import { ExcalidrawElement } from "../element/types";
import { getTransformHandles as _getTransformHandles } from "../element";
import { queryByText } from "@testing-library/react";
import { copiedStyles } from "../actions/actionStyles";
import { UI, Pointer, Keyboard } from "./helpers/ui";
@ -44,27 +43,6 @@ const clickLabeledElement = (label: string) => {
fireEvent.click(element);
};
type HandlerRectanglesRet = keyof ReturnType<typeof _getTransformHandles>;
const getTransformHandles = (pointerType: "mouse" | "touch" | "pen") => {
const rects = _getTransformHandles(
API.getSelectedElement(),
h.state.zoom,
pointerType,
) as {
[T in HandlerRectanglesRet]: [number, number, number, number];
};
const rv: { [K in keyof typeof rects]: [number, number] } = {} as any;
for (const handlePos in rects) {
const [x, y, width, height] = rects[handlePos as keyof typeof rects];
rv[handlePos as keyof typeof rects] = [x + width / 2, y + height / 2];
}
return rv;
};
/**
* This is always called at the end of your test, so usually you don't need to call it.
* However, if you have a long test, you might want to call it during the test so it's easier
@ -204,67 +182,6 @@ describe("regression tests", () => {
expect(API.getSelectedElement().strokeColor).toBe("#5f3dc4");
});
it("resize an element, trying every resize handle", () => {
UI.clickTool("rectangle");
mouse.down(10, 10);
mouse.up(10, 10);
const transformHandles = getTransformHandles("mouse");
// @ts-ignore
delete transformHandles.rotation; // exclude rotation handle
for (const handlePos in transformHandles) {
const [x, y] = transformHandles[
handlePos as keyof typeof transformHandles
];
const { width: prevWidth, height: prevHeight } = API.getSelectedElement();
mouse.restorePosition(x, y);
mouse.down();
mouse.up(-5, -5);
const {
width: nextWidthNegative,
height: nextHeightNegative,
} = API.getSelectedElement();
expect(
prevWidth !== nextWidthNegative || prevHeight !== nextHeightNegative,
).toBeTruthy();
checkpoint(`resize handle ${handlePos} (-5, -5)`);
mouse.down();
mouse.up(5, 5);
const { width, height } = API.getSelectedElement();
expect(width).toBe(prevWidth);
expect(height).toBe(prevHeight);
checkpoint(`unresize handle ${handlePos} (-5, -5)`);
mouse.restorePosition(x, y);
mouse.down();
mouse.up(5, 5);
const {
width: nextWidthPositive,
height: nextHeightPositive,
} = API.getSelectedElement();
expect(
prevWidth !== nextWidthPositive || prevHeight !== nextHeightPositive,
).toBeTruthy();
checkpoint(`resize handle ${handlePos} (+5, +5)`);
mouse.down();
mouse.up(-5, -5);
const {
width: finalWidth,
height: finalHeight,
} = API.getSelectedElement();
expect(finalWidth).toBe(prevWidth);
expect(finalHeight).toBe(prevHeight);
checkpoint(`unresize handle ${handlePos} (+5, +5)`);
}
});
it("click on an element and drag it", () => {
UI.clickTool("rectangle");
mouse.down(10, 10);