gilles/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Unify math types, utils and functions (#8389)

Browse Source 
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
This commit is contained in:
Márk Tolmács
2024-09-02 22:23:38 +00:00
committed by GitHub
co-authored by dwelle
parent e3d1dee9d0
commit f4dd23fc31
98 changed files with 4291 additions and 3661 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/excalidraw/tests/linearElementEditor.test.tsx
+89 -74
View File
@@ -8,7 +8,6 @@ import type {
SceneElementsMap,
} from "../element/types";
import { Excalidraw, mutateElement } from "../index";
import { centerPoint } from "../math";
import { reseed } from "../random";
import * as StaticScene from "../renderer/staticScene";
import * as InteractiveCanvas from "../renderer/interactiveScene";
@@ -16,7 +15,6 @@ import * as InteractiveCanvas from "../renderer/interactiveScene";
import { Keyboard, Pointer, UI } from "./helpers/ui";
import { screen, render, fireEvent, GlobalTestState } from "./test-utils";
import { API } from "../tests/helpers/api";
import type { Point } from "../types";
import { KEYS } from "../keys";
import { LinearElementEditor } from "../element/linearElementEditor";
import { act, queryByTestId, queryByText } from "@testing-library/react";
@@ -29,6 +27,8 @@ import * as textElementUtils from "../element/textElement";
import { ROUNDNESS, VERTICAL_ALIGN } from "../constants";
import { vi } from "vitest";
import { arrayToMap } from "../utils";
import type { GlobalPoint } from "../../math";
import { pointCenter, point } from "../../math";
const renderInteractiveScene = vi.spyOn(
InteractiveCanvas,
@@ -57,9 +57,9 @@ describe("Test Linear Elements", () => {
interactiveCanvas = container.querySelector("canvas.interactive")!;
});
const p1: Point = [20, 20];
const p2: Point = [60, 20];
const midpoint = centerPoint(p1, p2);
const p1 = point<GlobalPoint>(20, 20);
const p2 = point<GlobalPoint>(60, 20);
const midpoint = pointCenter<GlobalPoint>(p1, p2);
const delta = 50;
const mouse = new Pointer("mouse");
@@ -75,10 +75,7 @@ describe("Test Linear Elements", () => {
height: 0,
type,
roughness,
points: [
[0, 0],
[p2[0] - p1[0], p2[1] - p1[1]],
],
points: [point(0, 0), point(p2[0] - p1[0], p2[1] - p1[1])],
roundness,
});
API.setElements([line]);
@@ -102,9 +99,9 @@ describe("Test Linear Elements", () => {
type,
roughness,
points: [
[0, 0],
[p3[0], p3[1]],
[p2[0] - p1[0], p2[1] - p1[1]],
point(0, 0),
point(p3[0], p3[1]),
point(p2[0] - p1[0], p2[1] - p1[1]),
],
roundness,
});
@@ -129,7 +126,7 @@ describe("Test Linear Elements", () => {
expect(h.state.editingLinearElement?.elementId).toEqual(line.id);
};
const drag = (startPoint: Point, endPoint: Point) => {
const drag = (startPoint: GlobalPoint, endPoint: GlobalPoint) => {
fireEvent.pointerDown(interactiveCanvas, {
clientX: startPoint[0],
clientY: startPoint[1],
@@ -144,7 +141,7 @@ describe("Test Linear Elements", () => {
});
};
const deletePoint = (point: Point) => {
const deletePoint = (point: GlobalPoint) => {
fireEvent.pointerDown(interactiveCanvas, {
clientX: point[0],
clientY: point[1],
@@ -164,7 +161,7 @@ describe("Test Linear Elements", () => {
expect(line.points.length).toEqual(2);
mouse.clickAt(midpoint[0], midpoint[1]);
drag(midpoint, [midpoint[0] + 1, midpoint[1] + 1]);
drag(midpoint, point(midpoint[0] + 1, midpoint[1] + 1));
expect(line.points.length).toEqual(2);
@@ -172,7 +169,7 @@ describe("Test Linear Elements", () => {
expect(line.y).toBe(originalY);
expect(line.points.length).toEqual(2);
drag(midpoint, [midpoint[0] + delta, midpoint[1] + delta]);
drag(midpoint, point(midpoint[0] + delta, midpoint[1] + delta));
expect(line.x).toBe(originalX);
expect(line.y).toBe(originalY);
expect(line.points.length).toEqual(3);
@@ -187,7 +184,7 @@ describe("Test Linear Elements", () => {
expect((h.elements[0] as ExcalidrawLinearElement).points.length).toEqual(2);
// drag line from midpoint
drag(midpoint, [midpoint[0] + delta, midpoint[1] + delta]);
drag(midpoint, point(midpoint[0] + delta, midpoint[1] + delta));
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(`9`);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
expect(line.points.length).toEqual(3);
@@ -251,7 +248,7 @@ describe("Test Linear Elements", () => {
mouse.clickAt(midpoint[0], midpoint[1]);
expect(line.points.length).toEqual(2);
drag(midpoint, [midpoint[0] + 1, midpoint[1] + 1]);
drag(midpoint, point(midpoint[0] + 1, midpoint[1] + 1));
expect(line.x).toBe(originalX);
expect(line.y).toBe(originalY);
expect(line.points.length).toEqual(3);
@@ -264,7 +261,7 @@ describe("Test Linear Elements", () => {
enterLineEditingMode(line);
// drag line from midpoint
drag(midpoint, [midpoint[0] + delta, midpoint[1] + delta]);
drag(midpoint, point(midpoint[0] + delta, midpoint[1] + delta));
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`12`,
);
@@ -356,10 +353,13 @@ describe("Test Linear Elements", () => {
h.state,
);
const startPoint = centerPoint(points[0], midPoints[0] as Point);
const startPoint = pointCenter(points[0], midPoints[0]!);
const deltaX = 50;
const deltaY = 20;
const endPoint: Point = [startPoint[0] + deltaX, startPoint[1] + deltaY];
const endPoint = point<GlobalPoint>(
startPoint[0] + deltaX,
startPoint[1] + deltaY,
);
// Move the element
drag(startPoint, endPoint);
@@ -399,8 +399,8 @@ describe("Test Linear Elements", () => {
// This is the expected midpoint for line with round edge
// hence hardcoding it so if later some bug is introduced
// this will fail and we can fix it
const firstSegmentMidpoint: Point = [55, 45];
const lastSegmentMidpoint: Point = [75, 40];
const firstSegmentMidpoint = point<GlobalPoint>(55, 45);
const lastSegmentMidpoint = point<GlobalPoint>(75, 40);
let line: ExcalidrawLinearElement;
@@ -414,17 +414,20 @@ describe("Test Linear Elements", () => {
it("should allow dragging lines from midpoints in between segments", async () => {
// drag line via first segment midpoint
drag(firstSegmentMidpoint, [
firstSegmentMidpoint[0] + delta,
firstSegmentMidpoint[1] + delta,
]);
drag(
firstSegmentMidpoint,
point(
firstSegmentMidpoint[0] + delta,
firstSegmentMidpoint[1] + delta,
),
);
expect(line.points.length).toEqual(4);
// drag line from last segment midpoint
drag(lastSegmentMidpoint, [
lastSegmentMidpoint[0] + delta,
lastSegmentMidpoint[1] + delta,
]);
drag(
lastSegmentMidpoint,
point(lastSegmentMidpoint[0] + delta, lastSegmentMidpoint[1] + delta),
);
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`16`,
@@ -472,10 +475,10 @@ describe("Test Linear Elements", () => {
h.state,
);
const hitCoords: Point = [points[0][0], points[0][1]];
const hitCoords = point<GlobalPoint>(points[0][0], points[0][1]);
// Drag from first point
drag(hitCoords, [hitCoords[0] - delta, hitCoords[1] - delta]);
drag(hitCoords, point(hitCoords[0] - delta, hitCoords[1] - delta));
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`12`,
@@ -513,10 +516,10 @@ describe("Test Linear Elements", () => {
h.state,
);
const hitCoords: Point = [points[0][0], points[0][1]];
const hitCoords = point<GlobalPoint>(points[0][0], points[0][1]);
// Drag from first point
drag(hitCoords, [hitCoords[0] + delta, hitCoords[1] + delta]);
drag(hitCoords, point(hitCoords[0] + delta, hitCoords[1] + delta));
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`12`,
@@ -551,10 +554,10 @@ describe("Test Linear Elements", () => {
);
// dragging line from last segment midpoint
drag(lastSegmentMidpoint, [
lastSegmentMidpoint[0] + 50,
lastSegmentMidpoint[1] + 50,
]);
drag(
lastSegmentMidpoint,
point(lastSegmentMidpoint[0] + 50, lastSegmentMidpoint[1] + 50),
);
expect(line.points.length).toEqual(4);
const midPoints = LinearElementEditor.getEditorMidPoints(
@@ -586,12 +589,14 @@ describe("Test Linear Elements", () => {
// This is the expected midpoint for line with round edge
// hence hardcoding it so if later some bug is introduced
// this will fail and we can fix it
const firstSegmentMidpoint: Point = [
55.9697848965255, 47.442326230998205,
];
const lastSegmentMidpoint: Point = [
76.08587175006699, 43.294165939653226,
];
const firstSegmentMidpoint = point<GlobalPoint>(
55.9697848965255,
47.442326230998205,
);
const lastSegmentMidpoint = point<GlobalPoint>(
76.08587175006699,
43.294165939653226,
);
let line: ExcalidrawLinearElement;
beforeEach(() => {
@@ -605,17 +610,20 @@ describe("Test Linear Elements", () => {
it("should allow dragging lines from midpoints in between segments", async () => {
// drag line from first segment midpoint
drag(firstSegmentMidpoint, [
firstSegmentMidpoint[0] + delta,
firstSegmentMidpoint[1] + delta,
]);
drag(
firstSegmentMidpoint,
point(
firstSegmentMidpoint[0] + delta,
firstSegmentMidpoint[1] + delta,
),
);
expect(line.points.length).toEqual(4);
// drag line from last segment midpoint
drag(lastSegmentMidpoint, [
lastSegmentMidpoint[0] + delta,
lastSegmentMidpoint[1] + delta,
]);
drag(
lastSegmentMidpoint,
point(lastSegmentMidpoint[0] + delta, lastSegmentMidpoint[1] + delta),
);
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`16`,
);
@@ -661,10 +669,10 @@ describe("Test Linear Elements", () => {
h.state,
);
const hitCoords: Point = [points[0][0], points[0][1]];
const hitCoords = point<GlobalPoint>(points[0][0], points[0][1]);
// Drag from first point
drag(hitCoords, [hitCoords[0] - delta, hitCoords[1] - delta]);
drag(hitCoords, point(hitCoords[0] - delta, hitCoords[1] - delta));
const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
line,
@@ -709,10 +717,10 @@ describe("Test Linear Elements", () => {
h.state,
);
const hitCoords: Point = [points[0][0], points[0][1]];
const hitCoords = point<GlobalPoint>(points[0][0], points[0][1]);
// Drag from first point
drag(hitCoords, [hitCoords[0] + delta, hitCoords[1] + delta]);
drag(hitCoords, point(hitCoords[0] + delta, hitCoords[1] + delta));
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`12`,
@@ -741,10 +749,10 @@ describe("Test Linear Elements", () => {
it("should update all the midpoints when a point is deleted", async () => {
const elementsMap = arrayToMap(h.elements);
drag(lastSegmentMidpoint, [
lastSegmentMidpoint[0] + delta,
lastSegmentMidpoint[1] + delta,
]);
drag(
lastSegmentMidpoint,
point(lastSegmentMidpoint[0] + delta, lastSegmentMidpoint[1] + delta),
);
expect(line.points.length).toEqual(4);
const midPoints = LinearElementEditor.getEditorMidPoints(
@@ -803,8 +811,11 @@ describe("Test Linear Elements", () => {
API.setSelectedElements([line]);
enterLineEditingMode(line, true);
drag(
[line.points[0][0] + line.x, line.points[0][1] + line.y],
[dragEndPositionOffset[0] + line.x, dragEndPositionOffset[1] + line.y],
point(line.points[0][0] + line.x, line.points[0][1] + line.y),
point(
dragEndPositionOffset[0] + line.x,
dragEndPositionOffset[1] + line.y,
),
);
expect(line.points).toMatchInlineSnapshot(`
[
@@ -916,14 +927,18 @@ describe("Test Linear Elements", () => {
// This is the expected midpoint for line with round edge
// hence hardcoding it so if later some bug is introduced
// this will fail and we can fix it
const firstSegmentMidpoint: Point = [
55.9697848965255, 47.442326230998205,
];
const firstSegmentMidpoint = point<GlobalPoint>(
55.9697848965255,
47.442326230998205,
);
// drag line from first segment midpoint
drag(firstSegmentMidpoint, [
firstSegmentMidpoint[0] + delta,
firstSegmentMidpoint[1] + delta,
]);
drag(
firstSegmentMidpoint,
point(
firstSegmentMidpoint[0] + delta,
firstSegmentMidpoint[1] + delta,
),
);
const position = LinearElementEditor.getBoundTextElementPosition(
container,
@@ -1136,7 +1151,7 @@ describe("Test Linear Elements", () => {
);
// Drag from last point
drag(points[1], [points[1][0] + 300, points[1][1]]);
drag(points[1], point(points[1][0] + 300, points[1][1]));
expect({ width: container.width, height: container.height })
.toMatchInlineSnapshot(`
@@ -1335,14 +1350,14 @@ describe("Test Linear Elements", () => {
[
{
index: 0,
point: [line.points[0][0] + 10, line.points[0][1] + 10],
point: point(line.points[0][0] + 10, line.points[0][1] + 10),
},
{
index: line.points.length - 1,
point: [
point: point(
line.points[line.points.length - 1][0] - 10,
line.points[line.points.length - 1][1] - 10,
],
),
},
],
new Map() as SceneElementsMap,