smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: point() -> pointFrom() to fix compiler issue (#8578)

Browse source
This commit is contained in:
David Luzar 2024-10-01 21:27:17 +02:00 • committed by GitHub
parent a977dd1bf5
commit 47ee8a0094
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
51 changed files with 845 additions and 703 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/excalidraw/actions/actionFinalize.tsx
View file

@ -15,7 +15,7 @@ import { isBindingElement, isLinearElement } from "../element/typeChecks";
import type { AppState } from "../types";
import { resetCursor } from "../cursor";
import { StoreAction } from "../store";
import { point } from "../../math";
import { pointFrom } from "../../math";
import { isPathALoop } from "../shapes";
export const actionFinalize = register({
@ -115,7 +115,7 @@ export const actionFinalize = register({
mutateElement(multiPointElement, {
points: linePoints.map((p, index) =>
index === linePoints.length - 1
? point(firstPoint[0], firstPoint[1])
? pointFrom(firstPoint[0], firstPoint[1])
: p,
),
});

12
packages/excalidraw/actions/actionFlip.test.tsx
View file

@ -2,7 +2,7 @@ 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 { pointFrom } from "../../math";
import { actionFlipHorizontal, actionFlipVertical } from "./actionFlip";
const { h } = window;
@ -50,11 +50,11 @@ describe("flipping re-centers selection", () => {
startArrowhead: null,
endArrowhead: "arrow",
points: [
point(0, 0),
point(0, -35),
point(-90.9, -35),
point(-90.9, 204.9),
point(65.1, 204.9),
pointFrom(0, 0),
pointFrom(0, -35),
pointFrom(-90.9, -35),
pointFrom(-90.9, 204.9),
pointFrom(65.1, 204.9),
],
elbowed: true,
}),

4
packages/excalidraw/actions/actionProperties.tsx
View file

@ -116,7 +116,7 @@ import {
import { mutateElbowArrow } from "../element/routing";
import { LinearElementEditor } from "../element/linearElementEditor";
import type { LocalPoint } from "../../math";
import { point, vector } from "../../math";
import { pointFrom, vector } from "../../math";
const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
@ -1651,7 +1651,7 @@ export const actionChangeArrowType = register({
elementsMap,
[finalStartPoint, finalEndPoint].map(
(p): LocalPoint =>
point(p[0] - newElement.x, p[1] - newElement.y),
pointFrom(p[0] - newElement.x, p[1] - newElement.y),
),
vector(0, 0),
{

10
packages/excalidraw/charts.ts
View file

@ -1,5 +1,5 @@
import type { Radians } from "../math";
import { point } from "../math";
import { pointFrom } from "../math";
import {
COLOR_PALETTE,
DEFAULT_CHART_COLOR_INDEX,
@ -260,7 +260,7 @@ const chartLines = (
x,
y,
width: chartWidth,
points: [point(0, 0), point(chartWidth, 0)],
points: [pointFrom(0, 0), pointFrom(chartWidth, 0)],
});
const yLine = newLinearElement({
@ -271,7 +271,7 @@ const chartLines = (
x,
y,
height: chartHeight,
points: [point(0, 0), point(0, -chartHeight)],
points: [pointFrom(0, 0), pointFrom(0, -chartHeight)],
});
const maxLine = newLinearElement({
@ -284,7 +284,7 @@ const chartLines = (
strokeStyle: "dotted",
width: chartWidth,
opacity: GRID_OPACITY,
points: [point(0, 0), point(chartWidth, 0)],
points: [pointFrom(0, 0), pointFrom(chartWidth, 0)],
});
return [xLine, yLine, maxLine];
@ -441,7 +441,7 @@ const chartTypeLine = (
height: cy,
strokeStyle: "dotted",
opacity: GRID_OPACITY,
points: [point(0, 0), point(0, cy)],
points: [pointFrom(0, 0), pointFrom(0, cy)],
});
});

64
packages/excalidraw/components/App.tsx
View file

@ -445,7 +445,7 @@ import {
} from "../element/flowchart";
import { searchItemInFocusAtom } from "./SearchMenu";
import type { LocalPoint, Radians } from "../../math";
import { point, pointDistance, vector } from "../../math";
import { pointFrom, pointDistance, vector } from "../../math";
const AppContext = React.createContext<AppClassProperties>(null!);
const AppPropsContext = React.createContext<AppProps>(null!);
@ -4910,7 +4910,7 @@ class App extends React.Component<AppProps, AppState> {
this.getElementHitThreshold(),
);
return isPointInShape(point(x, y), selectionShape);
return isPointInShape(pointFrom(x, y), selectionShape);
}
// take bound text element into consideration for hit collision as well
@ -5269,7 +5269,7 @@ class App extends React.Component<AppProps, AppState> {
element,
this.scene.getNonDeletedElementsMap(),
this.state,
point(scenePointer.x, scenePointer.y),
pointFrom(scenePointer.x, scenePointer.y),
this.device.editor.isMobile,
)
);
@ -5281,11 +5281,14 @@ class App extends React.Component<AppProps, AppState> {
isTouchScreen: boolean,
) => {
const draggedDistance = pointDistance(
point(
pointFrom(
this.lastPointerDownEvent!.clientX,
this.lastPointerDownEvent!.clientY,
),
point(this.lastPointerUpEvent!.clientX, this.lastPointerUpEvent!.clientY),
pointFrom(
this.lastPointerUpEvent!.clientX,
this.lastPointerUpEvent!.clientY,
),
);
if (
!this.hitLinkElement ||
@ -5304,7 +5307,7 @@ class App extends React.Component<AppProps, AppState> {
this.hitLinkElement,
elementsMap,
this.state,
point(lastPointerDownCoords.x, lastPointerDownCoords.y),
pointFrom(lastPointerDownCoords.x, lastPointerDownCoords.y),
this.device.editor.isMobile,
);
const lastPointerUpCoords = viewportCoordsToSceneCoords(
@ -5315,7 +5318,7 @@ class App extends React.Component<AppProps, AppState> {
this.hitLinkElement,
elementsMap,
this.state,
point(lastPointerUpCoords.x, lastPointerUpCoords.y),
pointFrom(lastPointerUpCoords.x, lastPointerUpCoords.y),
this.device.editor.isMobile,
);
if (lastPointerDownHittingLinkIcon && lastPointerUpHittingLinkIcon) {
@ -5565,7 +5568,7 @@ class App extends React.Component<AppProps, AppState> {
// threshold, add a point
if (
pointDistance(
point(scenePointerX - rx, scenePointerY - ry),
pointFrom(scenePointerX - rx, scenePointerY - ry),
lastPoint,
) >= LINE_CONFIRM_THRESHOLD
) {
@ -5574,7 +5577,7 @@ class App extends React.Component<AppProps, AppState> {
{
points: [
...points,
point<LocalPoint>(scenePointerX - rx, scenePointerY - ry),
pointFrom<LocalPoint>(scenePointerX - rx, scenePointerY - ry),
],
},
false,
@ -5588,7 +5591,7 @@ class App extends React.Component<AppProps, AppState> {
points.length > 2 &&
lastCommittedPoint &&
pointDistance(
point(scenePointerX - rx, scenePointerY - ry),
pointFrom(scenePointerX - rx, scenePointerY - ry),
lastCommittedPoint,
) < LINE_CONFIRM_THRESHOLD
) {
@ -5636,7 +5639,7 @@ class App extends React.Component<AppProps, AppState> {
this.scene.getNonDeletedElementsMap(),
[
...points.slice(0, -1),
point<LocalPoint>(
pointFrom<LocalPoint>(
lastCommittedX + dxFromLastCommitted,
lastCommittedY + dyFromLastCommitted,
),
@ -5655,7 +5658,7 @@ class App extends React.Component<AppProps, AppState> {
{
points: [
...points.slice(0, -1),
point<LocalPoint>(
pointFrom<LocalPoint>(
lastCommittedX + dxFromLastCommitted,
lastCommittedY + dyFromLastCommitted,
),
@ -5884,8 +5887,8 @@ class App extends React.Component<AppProps, AppState> {
};
const distance = pointDistance(
point(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y),
point(scenePointer.x, scenePointer.y),
pointFrom(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y),
pointFrom(scenePointer.x, scenePointer.y),
);
const threshold = this.getElementHitThreshold();
const p = { ...pointerDownState.lastCoords };
@ -6397,7 +6400,7 @@ class App extends React.Component<AppProps, AppState> {
this.hitLinkElement,
this.scene.getNonDeletedElementsMap(),
this.state,
point(scenePointer.x, scenePointer.y),
pointFrom(scenePointer.x, scenePointer.y),
)
) {
this.handleEmbeddableCenterClick(this.hitLinkElement);
@ -7088,7 +7091,7 @@ class App extends React.Component<AppProps, AppState> {
simulatePressure,
locked: false,
frameId: topLayerFrame ? topLayerFrame.id : null,
points: [point<LocalPoint>(0, 0)],
points: [pointFrom<LocalPoint>(0, 0)],
pressures: simulatePressure ? [] : [event.pressure],
});
@ -7297,7 +7300,10 @@ class App extends React.Component<AppProps, AppState> {
multiElement.points.length > 1 &&
lastCommittedPoint &&
pointDistance(
point(pointerDownState.origin.x - rx, pointerDownState.origin.y - ry),
pointFrom(
pointerDownState.origin.x - rx,
pointerDownState.origin.y - ry,
),
lastCommittedPoint,
) < LINE_CONFIRM_THRESHOLD
) {
@ -7399,7 +7405,7 @@ class App extends React.Component<AppProps, AppState> {
};
});
mutateElement(element, {
points: [...element.points, point<LocalPoint>(0, 0)],
points: [...element.points, pointFrom<LocalPoint>(0, 0)],
});
const boundElement = getHoveredElementForBinding(
pointerDownState.origin,
@ -7652,8 +7658,8 @@ class App extends React.Component<AppProps, AppState> {
) {
if (
pointDistance(
point(pointerCoords.x, pointerCoords.y),
point(pointerDownState.origin.x, pointerDownState.origin.y),
pointFrom(pointerCoords.x, pointerCoords.y),
pointFrom(pointerDownState.origin.x, pointerDownState.origin.y),
) < DRAGGING_THRESHOLD
) {
return;
@ -8002,7 +8008,7 @@ class App extends React.Component<AppProps, AppState> {
mutateElement(
newElement,
{
points: [...points, point<LocalPoint>(dx, dy)],
points: [...points, pointFrom<LocalPoint>(dx, dy)],
pressures,
},
false,
@ -8031,7 +8037,7 @@ class App extends React.Component<AppProps, AppState> {
mutateElement(
newElement,
{
points: [...points, point<LocalPoint>(dx, dy)],
points: [...points, pointFrom<LocalPoint>(dx, dy)],
},
false,
);
@ -8039,7 +8045,7 @@ class App extends React.Component<AppProps, AppState> {
mutateElbowArrow(
newElement,
elementsMap,
[...points.slice(0, -1), point<LocalPoint>(dx, dy)],
[...points.slice(0, -1), pointFrom<LocalPoint>(dx, dy)],
vector(0, 0),
undefined,
{
@ -8051,7 +8057,7 @@ class App extends React.Component<AppProps, AppState> {
mutateElement(
newElement,
{
points: [...points.slice(0, -1), point<LocalPoint>(dx, dy)],
points: [...points.slice(0, -1), pointFrom<LocalPoint>(dx, dy)],
},
false,
);
@ -8360,9 +8366,9 @@ class App extends React.Component<AppProps, AppState> {
: [...newElement.pressures, childEvent.pressure];
mutateElement(newElement, {
points: [...points, point<LocalPoint>(dx, dy)],
points: [...points, pointFrom<LocalPoint>(dx, dy)],
pressures,
lastCommittedPoint: point<LocalPoint>(dx, dy),
lastCommittedPoint: pointFrom<LocalPoint>(dx, dy),
});
this.actionManager.executeAction(actionFinalize);
@ -8409,7 +8415,7 @@ class App extends React.Component<AppProps, AppState> {
mutateElement(newElement, {
points: [
...newElement.points,
point<LocalPoint>(
pointFrom<LocalPoint>(
pointerCoords.x - newElement.x,
pointerCoords.y - newElement.y,
),
@ -8723,8 +8729,8 @@ class App extends React.Component<AppProps, AppState> {
this.eraserTrail.endPath();
const draggedDistance = pointDistance(
point(pointerStart.clientX, pointerStart.clientY),
point(pointerEnd.clientX, pointerEnd.clientY),
pointFrom(pointerStart.clientX, pointerStart.clientY),
pointFrom(pointerEnd.clientX, pointerEnd.clientY),
);
if (draggedDistance === 0) {

6
packages/excalidraw/components/Stats/MultiDimension.tsx
View file

@ -20,7 +20,7 @@ import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
import { getElementsInAtomicUnit, resizeElement } from "./utils";
import type { AtomicUnit } from "./utils";
import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
import { point, type GlobalPoint } from "../../../math";
import { pointFrom, type GlobalPoint } from "../../../math";
interface MultiDimensionProps {
property: "width" | "height";
@ -182,7 +182,7 @@ const handleDimensionChange: DragInputCallbackType<
nextHeight,
initialHeight,
aspectRatio,
point(x1, y1),
pointFrom(x1, y1),
property,
latestElements,
originalElements,
@ -287,7 +287,7 @@ const handleDimensionChange: DragInputCallbackType<
nextHeight,
initialHeight,
aspectRatio,
point(x1, y1),
pointFrom(x1, y1),
property,
latestElements,
originalElements,

18
packages/excalidraw/components/Stats/MultiPosition.tsx
View file

@ -13,7 +13,7 @@ import { useMemo } from "react";
import { getElementsInAtomicUnit, moveElement } from "./utils";
import type { AtomicUnit } from "./utils";
import type { AppState } from "../../types";
import { point, pointRotateRads } from "../../../math";
import { pointFrom, pointRotateRads } from "../../../math";
interface MultiPositionProps {
property: "x" | "y";
@ -44,8 +44,8 @@ const moveElements = (
origElement.y + origElement.height / 2,
];
const [topLeftX, topLeftY] = pointRotateRads(
point(origElement.x, origElement.y),
point(cx, cy),
pointFrom(origElement.x, origElement.y),
pointFrom(cx, cy),
origElement.angle,
);
@ -97,8 +97,8 @@ const moveGroupTo = (
];
const [topLeftX, topLeftY] = pointRotateRads(
point(latestElement.x, latestElement.y),
point(cx, cy),
pointFrom(latestElement.x, latestElement.y),
pointFrom(cx, cy),
latestElement.angle,
);
@ -171,8 +171,8 @@ const handlePositionChange: DragInputCallbackType<
origElement.y + origElement.height / 2,
];
const [topLeftX, topLeftY] = pointRotateRads(
point(origElement.x, origElement.y),
point(cx, cy),
pointFrom(origElement.x, origElement.y),
pointFrom(cx, cy),
origElement.angle,
);
@ -241,8 +241,8 @@ const MultiPosition = ({
const [cx, cy] = [el.x + el.width / 2, el.y + el.height / 2];
const [topLeftX, topLeftY] = pointRotateRads(
point(el.x, el.y),
point(cx, cy),
pointFrom(el.x, el.y),
pointFrom(cx, cy),
el.angle,
);

10
packages/excalidraw/components/Stats/Position.tsx
View file

@ -4,7 +4,7 @@ import type { DragInputCallbackType } from "./DragInput";
import { getStepSizedValue, moveElement } from "./utils";
import type Scene from "../../scene/Scene";
import type { AppState } from "../../types";
import { point, pointRotateRads } from "../../../math";
import { pointFrom, pointRotateRads } from "../../../math";
interface PositionProps {
property: "x" | "y";
@ -33,8 +33,8 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
origElement.y + origElement.height / 2,
];
const [topLeftX, topLeftY] = pointRotateRads(
point(origElement.x, origElement.y),
point(cx, cy),
pointFrom(origElement.x, origElement.y),
pointFrom(cx, cy),
origElement.angle,
);
@ -93,8 +93,8 @@ const Position = ({
appState,
}: PositionProps) => {
const [topLeftX, topLeftY] = pointRotateRads(
point(element.x, element.y),
point(element.x + element.width / 2, element.y + element.height / 2),
pointFrom(element.x, element.y),
pointFrom(element.x + element.width / 2, element.y + element.height / 2),
element.angle,
);
const value =

26
packages/excalidraw/components/Stats/stats.test.tsx
View file

@ -25,7 +25,7 @@ import { API } from "../../tests/helpers/api";
import { actionGroup } from "../../actions";
import { isInGroup } from "../../groups";
import type { Degrees } from "../../../math";
import { degreesToRadians, point, pointRotateRads } from "../../../math";
import { degreesToRadians, pointFrom, pointRotateRads } from "../../../math";
const { h } = window;
const mouse = new Pointer("mouse");
@ -264,8 +264,8 @@ describe("stats for a generic element", () => {
rectangle.y + rectangle.height / 2,
];
const [topLeftX, topLeftY] = pointRotateRads(
point(rectangle.x, rectangle.y),
point(cx, cy),
pointFrom(rectangle.x, rectangle.y),
pointFrom(cx, cy),
rectangle.angle,
);
@ -283,8 +283,8 @@ describe("stats for a generic element", () => {
testInputProperty(rectangle, "angle", "A", 0, 45);
let [newTopLeftX, newTopLeftY] = pointRotateRads(
point(rectangle.x, rectangle.y),
point(cx, cy),
pointFrom(rectangle.x, rectangle.y),
pointFrom(cx, cy),
rectangle.angle,
);
@ -294,8 +294,8 @@ describe("stats for a generic element", () => {
testInputProperty(rectangle, "angle", "A", 45, 66);
[newTopLeftX, newTopLeftY] = pointRotateRads(
point(rectangle.x, rectangle.y),
point(cx, cy),
pointFrom(rectangle.x, rectangle.y),
pointFrom(cx, cy),
rectangle.angle,
);
expect(newTopLeftX.toString()).not.toEqual(xInput.value);
@ -311,8 +311,8 @@ describe("stats for a generic element", () => {
rectangle.y + rectangle.height / 2,
];
const [topLeftX, topLeftY] = pointRotateRads(
point(rectangle.x, rectangle.y),
point(cx, cy),
pointFrom(rectangle.x, rectangle.y),
pointFrom(cx, cy),
rectangle.angle,
);
testInputProperty(rectangle, "width", "W", rectangle.width, 400);
@ -321,8 +321,8 @@ describe("stats for a generic element", () => {
rectangle.y + rectangle.height / 2,
];
let [currentTopLeftX, currentTopLeftY] = pointRotateRads(
point(rectangle.x, rectangle.y),
point(cx, cy),
pointFrom(rectangle.x, rectangle.y),
pointFrom(cx, cy),
rectangle.angle,
);
expect(currentTopLeftX).toBeCloseTo(topLeftX, 4);
@ -334,8 +334,8 @@ describe("stats for a generic element", () => {
rectangle.y + rectangle.height / 2,
];
[currentTopLeftX, currentTopLeftY] = pointRotateRads(
point(rectangle.x, rectangle.y),
point(cx, cy),
pointFrom(rectangle.x, rectangle.y),
pointFrom(cx, cy),
rectangle.angle,
);

10
packages/excalidraw/components/Stats/utils.ts
View file

@ -1,5 +1,5 @@
import type { Radians } from "../../../math";
import { point, pointRotateRads } from "../../../math";
import { pointFrom, pointRotateRads } from "../../../math";
import {
bindOrUnbindLinearElements,
updateBoundElements,
@ -231,8 +231,8 @@ export const moveElement = (
originalElement.y + originalElement.height / 2,
];
const [topLeftX, topLeftY] = pointRotateRads(
point(originalElement.x, originalElement.y),
point(cx, cy),
pointFrom(originalElement.x, originalElement.y),
pointFrom(cx, cy),
originalElement.angle,
);
@ -240,8 +240,8 @@ export const moveElement = (
const changeInY = newTopLeftY - topLeftY;
const [x, y] = pointRotateRads(
point(newTopLeftX, newTopLeftY),
point(cx + changeInX, cy + changeInY),
pointFrom(newTopLeftX, newTopLeftY),
pointFrom(cx + changeInX, cy + changeInY),
-originalElement.angle as Radians,
);

4
packages/excalidraw/components/hyperlink/Hyperlink.tsx
View file

@ -36,7 +36,7 @@ import { trackEvent } from "../../analytics";
import { useAppProps, useExcalidrawAppState } from "../App";
import { isEmbeddableElement } from "../../element/typeChecks";
import { getLinkHandleFromCoords } from "./helpers";
import { point, type GlobalPoint } from "../../../math";
import { pointFrom, type GlobalPoint } from "../../../math";
const CONTAINER_WIDTH = 320;
const SPACE_BOTTOM = 85;
@ -181,7 +181,7 @@ export const Hyperlink = ({
element,
elementsMap,
appState,
point(event.clientX, event.clientY),
pointFrom(event.clientX, event.clientY),
) as boolean;
if (shouldHide) {
timeoutId = window.setTimeout(() => {

13
packages/excalidraw/components/hyperlink/helpers.ts
View file

@ -1,5 +1,5 @@
import type { GlobalPoint, Radians } from "../../../math";
import { point, pointRotateRads } from "../../../math";
import { pointFrom, pointRotateRads } from "../../../math";
import { MIME_TYPES } from "../../constants";
import type { Bounds } from "../../element/bounds";
import { getElementAbsoluteCoords } from "../../element/bounds";
@ -35,8 +35,8 @@ export const getLinkHandleFromCoords = (
const y = y1 - dashedLineMargin - linkMarginY + centeringOffset;
const [rotatedX, rotatedY] = pointRotateRads(
point(x + linkWidth / 2, y + linkHeight / 2),
point(centerX, centerY),
pointFrom(x + linkWidth / 2, y + linkHeight / 2),
pointFrom(centerX, centerY),
angle,
);
return [
@ -85,5 +85,10 @@ export const isPointHittingLink = (
) {
return true;
}
return isPointHittingLinkIcon(element, elementsMap, appState, point(x, y));
return isPointHittingLinkIcon(
element,
elementsMap,
appState,
pointFrom(x, y),
);
};

6
packages/excalidraw/data/restore.ts
View file

@ -57,7 +57,7 @@ import {
getNormalizedZoom,
} from "../scene";
import type { LocalPoint, Radians } from "../../math";
import { isFiniteNumber, point } from "../../math";
import { isFiniteNumber, pointFrom } from "../../math";
type RestoredAppState = Omit<
AppState,
@ -268,7 +268,7 @@ const restoreElement = (
let y = element.y;
let points = // migrate old arrow model to new one
!Array.isArray(element.points) || element.points.length < 2
? [point(0, 0), point(element.width, element.height)]
? [pointFrom(0, 0), pointFrom(element.width, element.height)]
: element.points;
if (points[0][0] !== 0 || points[0][1] !== 0) {
@ -296,7 +296,7 @@ const restoreElement = (
let y: number | undefined = element.y;
let points: readonly LocalPoint[] | undefined = // migrate old arrow model to new one
!Array.isArray(element.points) || element.points.length < 2
? [point(0, 0), point(element.width, element.height)]
? [pointFrom(0, 0), pointFrom(element.width, element.height)]
: element.points;
if (points[0][0] !== 0 || points[0][1] !== 0) {

6
packages/excalidraw/data/transform.test.ts
View file

@ -2,7 +2,7 @@ import { vi } from "vitest";
import type { ExcalidrawElementSkeleton } from "./transform";
import { convertToExcalidrawElements } from "./transform";
import type { ExcalidrawArrowElement } from "../element/types";
import { point } from "../../math";
import { pointFrom } from "../../math";
const opts = { regenerateIds: false };
@ -917,7 +917,7 @@ describe("Test Transform", () => {
x: 111.262,
y: 57,
strokeWidth: 2,
points: [point(0, 0), point(272.985, 0)],
points: [pointFrom(0, 0), pointFrom(272.985, 0)],
label: {
text: "How are you?",
fontSize: 20,
@ -940,7 +940,7 @@ describe("Test Transform", () => {
x: 77.017,
y: 79,
strokeWidth: 2,
points: [point(0, 0)],
points: [pointFrom(0, 0)],
label: {
text: "Friendship",
fontSize: 20,

6
packages/excalidraw/data/transform.ts
View file

@ -54,7 +54,7 @@ import { randomId } from "../random";
import { syncInvalidIndices } from "../fractionalIndex";
import { getLineHeight } from "../fonts";
import { isArrowElement } from "../element/typeChecks";
import { point, type LocalPoint } from "../../math";
import { pointFrom, type LocalPoint } from "../../math";
export type ValidLinearElement = {
type: "arrow" | "line";
@ -537,7 +537,7 @@ export const convertToExcalidrawElements = (
excalidrawElement = newLinearElement({
width,
height,
points: [point(0, 0), point(width, height)],
points: [pointFrom(0, 0), pointFrom(width, height)],
...element,
});
@ -550,7 +550,7 @@ export const convertToExcalidrawElements = (
width,
height,
endArrowhead: "arrow",
points: [point(0, 0), point(width, height)],
points: [pointFrom(0, 0), pointFrom(width, height)],
...element,
type: "arrow",
});

75
packages/excalidraw/element/binding.ts
View file

@ -66,7 +66,7 @@ import {
import type { LocalPoint, Radians } from "../../math";
import {
lineSegment,
point,
pointFrom,
pointRotateRads,
type GlobalPoint,
vectorFromPoint,
@ -720,7 +720,7 @@ export const getHeadingForElbowArrowSnap = (
return vectorToHeading(
vectorFromPoint(
p,
point<GlobalPoint>(
pointFrom<GlobalPoint>(
bindableElement.x + bindableElement.width / 2,
bindableElement.y + bindableElement.height / 2,
),
@ -766,15 +766,15 @@ export const bindPointToSnapToElementOutline = (
const intersections = [
...(intersectElementWithLine(
bindableElement,
point(p[0], p[1] - 2 * bindableElement.height),
point(p[0], p[1] + 2 * bindableElement.height),
pointFrom(p[0], p[1] - 2 * bindableElement.height),
pointFrom(p[0], p[1] + 2 * bindableElement.height),
FIXED_BINDING_DISTANCE,
elementsMap,
) ?? []),
...(intersectElementWithLine(
bindableElement,
point(p[0] - 2 * bindableElement.width, p[1]),
point(p[0] + 2 * bindableElement.width, p[1]),
pointFrom(p[0] - 2 * bindableElement.width, p[1]),
pointFrom(p[0] + 2 * bindableElement.width, p[1]),
FIXED_BINDING_DISTANCE,
elementsMap,
) ?? []),
@ -815,25 +815,25 @@ const headingToMidBindPoint = (
switch (true) {
case compareHeading(heading, HEADING_UP):
return pointRotateRads(
point((aabb[0] + aabb[2]) / 2 + 0.1, aabb[1]),
pointFrom((aabb[0] + aabb[2]) / 2 + 0.1, aabb[1]),
center,
bindableElement.angle,
);
case compareHeading(heading, HEADING_RIGHT):
return pointRotateRads(
point(aabb[2], (aabb[1] + aabb[3]) / 2 + 0.1),
pointFrom(aabb[2], (aabb[1] + aabb[3]) / 2 + 0.1),
center,
bindableElement.angle,
);
case compareHeading(heading, HEADING_DOWN):
return pointRotateRads(
point((aabb[0] + aabb[2]) / 2 - 0.1, aabb[3]),
pointFrom((aabb[0] + aabb[2]) / 2 - 0.1, aabb[3]),
center,
bindableElement.angle,
);
default:
return pointRotateRads(
point(aabb[0], (aabb[1] + aabb[3]) / 2 - 0.1),
pointFrom(aabb[0], (aabb[1] + aabb[3]) / 2 - 0.1),
center,
bindableElement.angle,
);
@ -844,7 +844,7 @@ export const avoidRectangularCorner = (
element: ExcalidrawBindableElement,
p: GlobalPoint,
): GlobalPoint => {
const center = point<GlobalPoint>(
const center = pointFrom<GlobalPoint>(
element.x + element.width / 2,
element.y + element.height / 2,
);
@ -854,13 +854,13 @@ export const avoidRectangularCorner = (
// Top left
if (nonRotatedPoint[1] - element.y > -FIXED_BINDING_DISTANCE) {
return pointRotateRads<GlobalPoint>(
point(element.x - FIXED_BINDING_DISTANCE, element.y),
pointFrom(element.x - FIXED_BINDING_DISTANCE, element.y),
center,
element.angle,
);
}
return pointRotateRads(
point(element.x, element.y - FIXED_BINDING_DISTANCE),
pointFrom(element.x, element.y - FIXED_BINDING_DISTANCE),
center,
element.angle,
);
@ -871,13 +871,16 @@ export const avoidRectangularCorner = (
// Bottom left
if (nonRotatedPoint[0] - element.x > -FIXED_BINDING_DISTANCE) {
return pointRotateRads(
point(element.x, element.y + element.height + FIXED_BINDING_DISTANCE),
pointFrom(
element.x,
element.y + element.height + FIXED_BINDING_DISTANCE,
),
center,
element.angle,
);
}
return pointRotateRads(
point(element.x - FIXED_BINDING_DISTANCE, element.y + element.height),
pointFrom(element.x - FIXED_BINDING_DISTANCE, element.y + element.height),
center,
element.angle,
);
@ -891,7 +894,7 @@ export const avoidRectangularCorner = (
element.width + FIXED_BINDING_DISTANCE
) {
return pointRotateRads(
point(
pointFrom(
element.x + element.width,
element.y + element.height + FIXED_BINDING_DISTANCE,
),
@ -900,7 +903,7 @@ export const avoidRectangularCorner = (
);
}
return pointRotateRads(
point(
pointFrom(
element.x + element.width + FIXED_BINDING_DISTANCE,
element.y + element.height,
),
@ -917,13 +920,16 @@ export const avoidRectangularCorner = (
element.width + FIXED_BINDING_DISTANCE
) {
return pointRotateRads(
point(element.x + element.width, element.y - FIXED_BINDING_DISTANCE),
pointFrom(
element.x + element.width,
element.y - FIXED_BINDING_DISTANCE,
),
center,
element.angle,
);
}
return pointRotateRads(
point(element.x + element.width + FIXED_BINDING_DISTANCE, element.y),
pointFrom(element.x + element.width + FIXED_BINDING_DISTANCE, element.y),
center,
element.angle,
);
@ -938,7 +944,10 @@ export const snapToMid = (
tolerance: number = 0.05,
): GlobalPoint => {
const { x, y, width, height, angle } = element;
const center = point<GlobalPoint>(x + width / 2 - 0.1, y + height / 2 - 0.1);
const center = pointFrom<GlobalPoint>(
x + width / 2 - 0.1,
y + height / 2 - 0.1,
);
const nonRotated = pointRotateRads(p, center, -angle as Radians);
// snap-to-center point is adaptive to element size, but we don't want to go
@ -953,7 +962,7 @@ export const snapToMid = (
) {
// LEFT
return pointRotateRads(
point(x - FIXED_BINDING_DISTANCE, center[1]),
pointFrom(x - FIXED_BINDING_DISTANCE, center[1]),
center,
angle,
);
@ -964,7 +973,7 @@ export const snapToMid = (
) {
// TOP
return pointRotateRads(
point(center[0], y - FIXED_BINDING_DISTANCE),
pointFrom(center[0], y - FIXED_BINDING_DISTANCE),
center,
angle,
);
@ -975,7 +984,7 @@ export const snapToMid = (
) {
// RIGHT
return pointRotateRads(
point(x + width + FIXED_BINDING_DISTANCE, center[1]),
pointFrom(x + width + FIXED_BINDING_DISTANCE, center[1]),
center,
angle,
);
@ -986,7 +995,7 @@ export const snapToMid = (
) {
// DOWN
return pointRotateRads(
point(center[0], y + height + FIXED_BINDING_DISTANCE),
pointFrom(center[0], y + height + FIXED_BINDING_DISTANCE),
center,
angle,
);
@ -1023,11 +1032,11 @@ const updateBoundPoint = (
startOrEnd === "startBinding" ? "start" : "end",
elementsMap,
).fixedPoint;
const globalMidPoint = point<GlobalPoint>(
const globalMidPoint = pointFrom<GlobalPoint>(
bindableElement.x + bindableElement.width / 2,
bindableElement.y + bindableElement.height / 2,
);
const global = point<GlobalPoint>(
const global = pointFrom<GlobalPoint>(
bindableElement.x + fixedPoint[0] * bindableElement.width,
bindableElement.y + fixedPoint[1] * bindableElement.height,
);
@ -1118,7 +1127,7 @@ export const calculateFixedPointForElbowArrowBinding = (
hoveredElement,
elementsMap,
);
const globalMidPoint = point(
const globalMidPoint = pointFrom(
bounds[0] + (bounds[2] - bounds[0]) / 2,
bounds[1] + (bounds[3] - bounds[1]) / 2,
);
@ -1337,9 +1346,9 @@ export const bindingBorderTest = (
const threshold = maxBindingGap(element, element.width, element.height);
const shape = getElementShape(element, elementsMap);
return (
isPointOnShape(point(x, y), shape, threshold) ||
isPointOnShape(pointFrom(x, y), shape, threshold) ||
(fullShape === true &&
pointInsideBounds(point(x, y), aabbForElement(element)))
pointInsideBounds(pointFrom(x, y), aabbForElement(element)))
);
};
@ -2197,11 +2206,11 @@ export const getGlobalFixedPointForBindableElement = (
const [fixedX, fixedY] = normalizeFixedPoint(fixedPointRatio);
return pointRotateRads(
point(
pointFrom(
element.x + element.width * fixedX,
element.y + element.height * fixedY,
),
point<GlobalPoint>(
pointFrom<GlobalPoint>(
element.x + element.width / 2,
element.y + element.height / 2,
),
@ -2229,7 +2238,7 @@ const getGlobalFixedPoints = (
arrow.startBinding.fixedPoint,
startElement as ExcalidrawBindableElement,
)
: point<GlobalPoint>(
: pointFrom<GlobalPoint>(
arrow.x + arrow.points[0][0],
arrow.y + arrow.points[0][1],
);
@ -2239,7 +2248,7 @@ const getGlobalFixedPoints = (
arrow.endBinding.fixedPoint,
endElement as ExcalidrawBindableElement,
)
: point<GlobalPoint>(
: pointFrom<GlobalPoint>(
arrow.x + arrow.points[arrow.points.length - 1][0],
arrow.y + arrow.points[arrow.points.length - 1][1],
);

8
packages/excalidraw/element/bounds.test.ts
View file

@ -1,5 +1,5 @@
import type { LocalPoint } from "../../math";
import { point } from "../../math";
import { pointFrom } from "../../math";
import { ROUNDNESS } from "../constants";
import { arrayToMap } from "../utils";
import { getElementAbsoluteCoords, getElementBounds } from "./bounds";
@ -125,9 +125,9 @@ describe("getElementBounds", () => {
a: 0.6447741904932416,
}),
points: [
point<LocalPoint>(0, 0),
point<LocalPoint>(67.33984375, 92.48828125),
point<LocalPoint>(-102.7890625, 52.15625),
pointFrom<LocalPoint>(0, 0),
pointFrom<LocalPoint>(67.33984375, 92.48828125),
pointFrom<LocalPoint>(-102.7890625, 52.15625),
],
} as ExcalidrawLinearElement;

92
packages/excalidraw/element/bounds.ts
View file

@ -34,7 +34,7 @@ import type {
import {
degreesToRadians,
lineSegment,
point,
pointFrom,
pointDistance,
pointFromArray,
pointRotateRads,
@ -113,8 +113,8 @@ export class ElementBounds {
const [minX, minY, maxX, maxY] = getBoundsFromPoints(
element.points.map(([x, y]) =>
pointRotateRads(
point(x, y),
point(cx - element.x, cy - element.y),
pointFrom(x, y),
pointFrom(cx - element.x, cy - element.y),
element.angle,
),
),
@ -130,23 +130,23 @@ export class ElementBounds {
bounds = getLinearElementRotatedBounds(element, cx, cy, elementsMap);
} else if (element.type === "diamond") {
const [x11, y11] = pointRotateRads(
point(cx, y1),
point(cx, cy),
pointFrom(cx, y1),
pointFrom(cx, cy),
element.angle,
);
const [x12, y12] = pointRotateRads(
point(cx, y2),
point(cx, cy),
pointFrom(cx, y2),
pointFrom(cx, cy),
element.angle,
);
const [x22, y22] = pointRotateRads(
point(x1, cy),
point(cx, cy),
pointFrom(x1, cy),
pointFrom(cx, cy),
element.angle,
);
const [x21, y21] = pointRotateRads(
point(x2, cy),
point(cx, cy),
pointFrom(x2, cy),
pointFrom(cx, cy),
element.angle,
);
const minX = Math.min(x11, x12, x22, x21);
@ -164,23 +164,23 @@ export class ElementBounds {
bounds = [cx - ww, cy - hh, cx + ww, cy + hh];
} else {
const [x11, y11] = pointRotateRads(
point(x1, y1),
point(cx, cy),
pointFrom(x1, y1),
pointFrom(cx, cy),
element.angle,
);
const [x12, y12] = pointRotateRads(
point(x1, y2),
point(cx, cy),
pointFrom(x1, y2),
pointFrom(cx, cy),
element.angle,
);
const [x22, y22] = pointRotateRads(
point(x2, y2),
point(cx, cy),
pointFrom(x2, y2),
pointFrom(cx, cy),
element.angle,
);
const [x21, y21] = pointRotateRads(
point(x2, y1),
point(cx, cy),
pointFrom(x2, y1),
pointFrom(cx, cy),
element.angle,
);
const minX = Math.min(x11, x12, x22, x21);
@ -255,7 +255,7 @@ export const getElementLineSegments = (
elementsMap,
);
const center: GlobalPoint = point(cx, cy);
const center: GlobalPoint = pointFrom(cx, cy);
if (isLinearElement(element) || isFreeDrawElement(element)) {
const segments: LineSegment<GlobalPoint>[] = [];
@ -266,7 +266,7 @@ export const getElementLineSegments = (
segments.push(
lineSegment(
pointRotateRads(
point(
pointFrom(
element.points[i][0] + element.x,
element.points[i][1] + element.y,
),
@ -274,7 +274,7 @@ export const getElementLineSegments = (
element.angle,
),
pointRotateRads(
point(
pointFrom(
element.points[i + 1][0] + element.x,
element.points[i + 1][1] + element.y,
),
@ -470,7 +470,7 @@ export const getMinMaxXYFromCurvePathOps = (
ops: Op[],
transformXY?: (p: GlobalPoint) => GlobalPoint,
): Bounds => {
let currentP: GlobalPoint = point(0, 0);
let currentP: GlobalPoint = pointFrom(0, 0);
const { minX, minY, maxX, maxY } = ops.reduce(
(limits, { op, data }) => {
@ -484,9 +484,9 @@ export const getMinMaxXYFromCurvePathOps = (
// move operation does not draw anything; so, it always
// returns false
} else if (op === "bcurveTo") {
const _p1 = point<GlobalPoint>(data[0], data[1]);
const _p2 = point<GlobalPoint>(data[2], data[3]);
const _p3 = point<GlobalPoint>(data[4], data[5]);
const _p1 = pointFrom<GlobalPoint>(data[0], data[1]);
const _p2 = pointFrom<GlobalPoint>(data[2], data[3]);
const _p3 = pointFrom<GlobalPoint>(data[4], data[5]);
const p1 = transformXY ? transformXY(_p1) : _p1;
const p2 = transformXY ? transformXY(_p2) : _p2;
@ -591,21 +591,21 @@ export const getArrowheadPoints = (
invariant(data.length === 6, "Op data length is not 6");
const p3 = point(data[4], data[5]);
const p2 = point(data[2], data[3]);
const p1 = point(data[0], data[1]);
const p3 = pointFrom(data[4], data[5]);
const p2 = pointFrom(data[2], data[3]);
const p1 = pointFrom(data[0], data[1]);
// We need to find p0 of the bezier curve.
// It is typically the last point of the previous
// curve; it can also be the position of moveTo operation.
const prevOp = ops[index - 1];
let p0 = point(0, 0);
let p0 = pointFrom(0, 0);
if (prevOp.op === "move") {
const p = pointFromArray(prevOp.data);
invariant(p != null, "Op data is not a point");
p0 = p;
} else if (prevOp.op === "bcurveTo") {
p0 = point(prevOp.data[4], prevOp.data[5]);
p0 = pointFrom(prevOp.data[4], prevOp.data[5]);
}
// B(t) = p0 * (1-t)^3 + 3p1 * t * (1-t)^2 + 3p2 * t^2 * (1-t) + p3 * t^3
@ -671,13 +671,13 @@ export const getArrowheadPoints = (
// Return points
const [x3, y3] = pointRotateRads(
point(xs, ys),
point(x2, y2),
pointFrom(xs, ys),
pointFrom(x2, y2),
((-angle * Math.PI) / 180) as Radians,
);
const [x4, y4] = pointRotateRads(
point(xs, ys),
point(x2, y2),
pointFrom(xs, ys),
pointFrom(x2, y2),
degreesToRadians(angle),
);
@ -690,8 +690,8 @@ export const getArrowheadPoints = (
const [px, py] = element.points.length > 1 ? element.points[1] : [0, 0];
[ox, oy] = pointRotateRads(
point(x2 + minSize * 2, y2),
point(x2, y2),
pointFrom(x2 + minSize * 2, y2),
pointFrom(x2, y2),
Math.atan2(py - y2, px - x2) as Radians,
);
} else {
@ -701,8 +701,8 @@ export const getArrowheadPoints = (
: [0, 0];
[ox, oy] = pointRotateRads(
point(x2 - minSize * 2, y2),
point(x2, y2),
pointFrom(x2 - minSize * 2, y2),
pointFrom(x2, y2),
Math.atan2(y2 - py, x2 - px) as Radians,
);
}
@ -746,8 +746,8 @@ const getLinearElementRotatedBounds = (
if (element.points.length < 2) {
const [pointX, pointY] = element.points[0];
const [x, y] = pointRotateRads(
point(element.x + pointX, element.y + pointY),
point(cx, cy),
pointFrom(element.x + pointX, element.y + pointY),
pointFrom(cx, cy),
element.angle,
);
@ -775,8 +775,8 @@ const getLinearElementRotatedBounds = (
const ops = getCurvePathOps(shape);
const transformXY = ([x, y]: GlobalPoint) =>
pointRotateRads<GlobalPoint>(
point(element.x + x, element.y + y),
point(cx, cy),
pointFrom(element.x + x, element.y + y),
pointFrom(cx, cy),
element.angle,
);
const res = getMinMaxXYFromCurvePathOps(ops, transformXY);
@ -931,8 +931,8 @@ export const getClosestElementBounds = (
elements.forEach((element) => {
const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
const distance = pointDistance(
point((x1 + x2) / 2, (y1 + y2) / 2),
point(from.x, from.y),
pointFrom((x1 + x2) / 2, (y1 + y2) / 2),
pointFrom(from.x, from.y),
);
if (distance < minDistance) {
@ -990,7 +990,7 @@ export const getVisibleSceneBounds = ({
};
export const getCenterForBounds = (bounds: Bounds): GlobalPoint =>
point(
pointFrom(
bounds[0] + (bounds[2] - bounds[0]) / 2,
bounds[1] + (bounds[3] - bounds[1]) / 2,
);

18
packages/excalidraw/element/collision.ts
View file

@ -17,7 +17,7 @@ import {
} from "./typeChecks";
import { getBoundTextShape, isPathALoop } from "../shapes";
import type { GlobalPoint, LocalPoint, Polygon } from "../../math";
import { isPointWithinBounds, point } from "../../math";
import { isPointWithinBounds, pointFrom } from "../../math";
export const shouldTestInside = (element: ExcalidrawElement) => {
if (element.type === "arrow") {
@ -61,13 +61,13 @@ export const hitElementItself = <Point extends GlobalPoint | LocalPoint>({
let hit = shouldTestInside(element)
? // Since `inShape` tests STRICTLY againt the insides of a shape
// we would need `onShape` as well to include the "borders"
isPointInShape(point(x, y), shape) ||
isPointOnShape(point(x, y), shape, threshold)
: isPointOnShape(point(x, y), shape, threshold);
isPointInShape(pointFrom(x, y), shape) ||
isPointOnShape(pointFrom(x, y), shape, threshold)
: isPointOnShape(pointFrom(x, y), shape, threshold);
// hit test against a frame's name
if (!hit && frameNameBound) {
hit = isPointInShape(point(x, y), {
hit = isPointInShape(pointFrom(x, y), {
type: "polygon",
data: getPolygonShape(frameNameBound as ExcalidrawRectangleElement)
.data as Polygon<Point>,
@ -89,7 +89,11 @@ export const hitElementBoundingBox = (
y1 -= tolerance;
x2 += tolerance;
y2 += tolerance;
return isPointWithinBounds(point(x1, y1), point(x, y), point(x2, y2));
return isPointWithinBounds(
pointFrom(x1, y1),
pointFrom(x, y),
pointFrom(x2, y2),
);
};
export const hitElementBoundingBoxOnly = <
@ -115,5 +119,5 @@ export const hitElementBoundText = <Point extends GlobalPoint | LocalPoint>(
y: number,
textShape: GeometricShape<Point> | null,
): boolean => {
return !!textShape && isPointInShape(point(x, y), textShape);
return !!textShape && isPointInShape(pointFrom(x, y), textShape);
};

4
packages/excalidraw/element/flowchart.ts
View file

@ -29,7 +29,7 @@ import {
isFlowchartNodeElement,
} from "./typeChecks";
import { invariant } from "../utils";
import { point, type LocalPoint } from "../../math";
import { pointFrom, type LocalPoint } from "../../math";
import { aabbForElement } from "../shapes";
type LinkDirection = "up" | "right" | "down" | "left";
@ -421,7 +421,7 @@ const createBindingArrow = (
strokeColor: appState.currentItemStrokeColor,
strokeStyle: appState.currentItemStrokeStyle,
strokeWidth: appState.currentItemStrokeWidth,
points: [point(0, 0), point(endX, endY)],
points: [pointFrom(0, 0), pointFrom(endX, endY)],
elbowed: true,
});

18
packages/excalidraw/element/heading.ts
View file

@ -6,7 +6,7 @@ import type {
Radians,
} from "../../math";
import {
point,
pointFrom,
pointRotateRads,
pointScaleFromOrigin,
radiansToDegrees,
@ -82,7 +82,7 @@ export const headingForPointFromElement = <
const top = pointRotateRads(
pointScaleFromOrigin(
point(element.x + element.width / 2, element.y),
pointFrom(element.x + element.width / 2, element.y),
midPoint,
SEARCH_CONE_MULTIPLIER,
),
@ -91,7 +91,7 @@ export const headingForPointFromElement = <
);
const right = pointRotateRads(
pointScaleFromOrigin(
point(element.x + element.width, element.y + element.height / 2),
pointFrom(element.x + element.width, element.y + element.height / 2),
midPoint,
SEARCH_CONE_MULTIPLIER,
),
@ -100,7 +100,7 @@ export const headingForPointFromElement = <
);
const bottom = pointRotateRads(
pointScaleFromOrigin(
point(element.x + element.width / 2, element.y + element.height),
pointFrom(element.x + element.width / 2, element.y + element.height),
midPoint,
SEARCH_CONE_MULTIPLIER,
),
@ -109,7 +109,7 @@ export const headingForPointFromElement = <
);
const left = pointRotateRads(
pointScaleFromOrigin(
point(element.x, element.y + element.height / 2),
pointFrom(element.x, element.y + element.height / 2),
midPoint,
SEARCH_CONE_MULTIPLIER,
),
@ -133,22 +133,22 @@ export const headingForPointFromElement = <
}
const topLeft = pointScaleFromOrigin(
point(aabb[0], aabb[1]),
pointFrom(aabb[0], aabb[1]),
midPoint,
SEARCH_CONE_MULTIPLIER,
) as Point;
const topRight = pointScaleFromOrigin(
point(aabb[2], aabb[1]),
pointFrom(aabb[2], aabb[1]),
midPoint,
SEARCH_CONE_MULTIPLIER,
) as Point;
const bottomLeft = pointScaleFromOrigin(
point(aabb[0], aabb[3]),
pointFrom(aabb[0], aabb[3]),
midPoint,
SEARCH_CONE_MULTIPLIER,
) as Point;
const bottomRight = pointScaleFromOrigin(
point(aabb[2], aabb[3]),
pointFrom(aabb[2], aabb[3]),
midPoint,
SEARCH_CONE_MULTIPLIER,
) as Point;

104
packages/excalidraw/element/linearElementEditor.ts
View file

@ -49,7 +49,7 @@ import type Scene from "../scene/Scene";
import type { Radians } from "../../math";
import {
pointCenter,
point,
pointFrom,
pointRotateRads,
pointsEqual,
vector,
@ -108,7 +108,7 @@ export class LinearElementEditor {
this.elementId = element.id as string & {
_brand: "excalidrawLinearElementId";
};
if (!pointsEqual(element.points[0], point(0, 0))) {
if (!pointsEqual(element.points[0], pointFrom(0, 0))) {
console.error("Linear element is not normalized", Error().stack);
}
@ -287,7 +287,7 @@ export class LinearElementEditor {
element,
elementsMap,
referencePoint,
point(scenePointerX, scenePointerY),
pointFrom(scenePointerX, scenePointerY),
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
);
@ -296,7 +296,7 @@ export class LinearElementEditor {
[
{
index: selectedIndex,
point: point(
point: pointFrom(
width + referencePoint[0],
height + referencePoint[1],
),
@ -329,7 +329,7 @@ export class LinearElementEditor {
scenePointerY - linearElementEditor.pointerOffset.y,
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
)
: point(
: pointFrom(
element.points[pointIndex][0] + deltaX,
element.points[pointIndex][1] + deltaY,
);
@ -590,11 +590,11 @@ export class LinearElementEditor {
linearElementEditor.segmentMidPointHoveredCoords;
if (existingSegmentMidpointHitCoords) {
const distance = pointDistance(
point(
pointFrom(
existingSegmentMidpointHitCoords[0],
existingSegmentMidpointHitCoords[1],
),
point(scenePointer.x, scenePointer.y),
pointFrom(scenePointer.x, scenePointer.y),
);
if (distance <= threshold) {
return existingSegmentMidpointHitCoords;
@ -606,8 +606,8 @@ export class LinearElementEditor {
while (index < midPoints.length) {
if (midPoints[index] !== null) {
const distance = pointDistance(
point(midPoints[index]![0], midPoints[index]![1]),
point(scenePointer.x, scenePointer.y),
pointFrom(midPoints[index]![0], midPoints[index]![1]),
pointFrom(scenePointer.x, scenePointer.y),
);
if (distance <= threshold) {
return midPoints[index];
@ -626,8 +626,8 @@ export class LinearElementEditor {
zoom: AppState["zoom"],
) {
let distance = pointDistance(
point(startPoint[0], startPoint[1]),
point(endPoint[0], endPoint[1]),
pointFrom(startPoint[0], startPoint[1]),
pointFrom(endPoint[0], endPoint[1]),
);
if (element.points.length > 2 && element.roundness) {
distance = getBezierCurveLength(element, endPoint);
@ -829,11 +829,11 @@ export class LinearElementEditor {
const targetPoint =
clickedPointIndex > -1 &&
pointRotateRads(
point(
pointFrom(
element.x + element.points[clickedPointIndex][0],
element.y + element.points[clickedPointIndex][1],
),
point(cx, cy),
pointFrom(cx, cy),
element.angle,
);
@ -928,11 +928,11 @@ export class LinearElementEditor {
element,
elementsMap,
lastCommittedPoint,
point(scenePointerX, scenePointerY),
pointFrom(scenePointerX, scenePointerY),
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
);
newPoint = point(
newPoint = pointFrom(
width + lastCommittedPoint[0],
height + lastCommittedPoint[1],
);
@ -984,8 +984,8 @@ export class LinearElementEditor {
const { x, y } = element;
return pointRotateRads(
point(x + p[0], y + p[1]),
point(cx, cy),
pointFrom(x + p[0], y + p[1]),
pointFrom(cx, cy),
element.angle,
);
}
@ -1001,8 +1001,8 @@ export class LinearElementEditor {
return element.points.map((p) => {
const { x, y } = element;
return pointRotateRads(
point(x + p[0], y + p[1]),
point(cx, cy),
pointFrom(x + p[0], y + p[1]),
pointFrom(cx, cy),
element.angle,
);
});
@ -1025,8 +1025,12 @@ export class LinearElementEditor {
const { x, y } = element;
return p
? pointRotateRads(point(x + p[0], y + p[1]), point(cx, cy), element.angle)
: pointRotateRads(point(x, y), point(cx, cy), element.angle);
? pointRotateRads(
pointFrom(x + p[0], y + p[1]),
pointFrom(cx, cy),
element.angle,
)
: pointRotateRads(pointFrom(x, y), pointFrom(cx, cy), element.angle);
}
static pointFromAbsoluteCoords(
@ -1036,7 +1040,7 @@ export class LinearElementEditor {
): LocalPoint {
if (isElbowArrow(element)) {
// No rotation for elbow arrows
return point(
return pointFrom(
absoluteCoords[0] - element.x,
absoluteCoords[1] - element.y,
);
@ -1046,11 +1050,11 @@ export class LinearElementEditor {
const cx = (x1 + x2) / 2;
const cy = (y1 + y2) / 2;
const [x, y] = pointRotateRads(
point(absoluteCoords[0], absoluteCoords[1]),
point(cx, cy),
pointFrom(absoluteCoords[0], absoluteCoords[1]),
pointFrom(cx, cy),
-element.angle as Radians,
);
return point(x - element.x, y - element.y);
return pointFrom(x - element.x, y - element.y);
}
static getPointIndexUnderCursor(
@ -1071,7 +1075,7 @@ export class LinearElementEditor {
while (--idx > -1) {
const p = pointHandles[idx];
if (
pointDistance(point(x, y), point(p[0], p[1])) * zoom.value <
pointDistance(pointFrom(x, y), pointFrom(p[0], p[1])) * zoom.value <
// +1px to account for outline stroke
LinearElementEditor.POINT_HANDLE_SIZE + 1
) {
@ -1093,12 +1097,12 @@ export class LinearElementEditor {
const cx = (x1 + x2) / 2;
const cy = (y1 + y2) / 2;
const [rotatedX, rotatedY] = pointRotateRads(
point(pointerOnGrid[0], pointerOnGrid[1]),
point(cx, cy),
pointFrom(pointerOnGrid[0], pointerOnGrid[1]),
pointFrom(cx, cy),
-element.angle as Radians,
);
return point(rotatedX - element.x, rotatedY - element.y);
return pointFrom(rotatedX - element.x, rotatedY - element.y);
}
/**
@ -1118,7 +1122,7 @@ export class LinearElementEditor {
return {
points: points.map((p) => {
return point(p[0] - offsetX, p[1] - offsetY);
return pointFrom(p[0] - offsetX, p[1] - offsetY);
}),
x: element.x + offsetX,
y: element.y + offsetY,
@ -1172,8 +1176,8 @@ export class LinearElementEditor {
}
acc.push(
nextPoint
? point((p[0] + nextPoint[0]) / 2, (p[1] + nextPoint[1]) / 2)
: point(p[0], p[1]),
? pointFrom((p[0] + nextPoint[0]) / 2, (p[1] + nextPoint[1]) / 2)
: pointFrom(p[0], p[1]),
);
nextSelectedIndices.push(indexCursor + 1);
@ -1194,7 +1198,7 @@ export class LinearElementEditor {
[
{
index: element.points.length - 1,
point: point(lastPoint[0] + 30, lastPoint[1] + 30),
point: pointFrom(lastPoint[0] + 30, lastPoint[1] + 30),
},
],
elementsMap,
@ -1235,7 +1239,9 @@ export class LinearElementEditor {
const nextPoints = element.points.reduce((acc: LocalPoint[], p, idx) => {
if (!pointIndices.includes(idx)) {
acc.push(
!acc.length ? point(0, 0) : point(p[0] - offsetX, p[1] - offsetY),
!acc.length
? pointFrom(0, 0)
: pointFrom(p[0] - offsetX, p[1] - offsetY),
);
}
return acc;
@ -1312,9 +1318,9 @@ export class LinearElementEditor {
const deltaY =
selectedPointData.point[1] - points[selectedPointData.index][1];
return point(p[0] + deltaX - offsetX, p[1] + deltaY - offsetY);
return pointFrom(p[0] + deltaX - offsetX, p[1] + deltaY - offsetY);
}
return offsetX || offsetY ? point(p[0] - offsetX, p[1] - offsetY) : p;
return offsetX || offsetY ? pointFrom(p[0] - offsetX, p[1] - offsetY) : p;
});
LinearElementEditor._updatePoints(
@ -1368,8 +1374,8 @@ export class LinearElementEditor {
const origin = linearElementEditor.pointerDownState.origin!;
const dist = pointDistance(
point(origin.x, origin.y),
point(pointerCoords.x, pointerCoords.y),
pointFrom(origin.x, origin.y),
pointFrom(pointerCoords.x, pointerCoords.y),
);
if (
!appState.editingLinearElement &&
@ -1493,8 +1499,8 @@ export class LinearElementEditor {
const dX = prevCenterX - nextCenterX;
const dY = prevCenterY - nextCenterY;
const rotated = pointRotateRads(
point(offsetX, offsetY),
point(dX, dY),
pointFrom(offsetX, offsetY),
pointFrom(dX, dY),
element.angle,
);
mutateElement(element, {
@ -1540,8 +1546,8 @@ export class LinearElementEditor {
);
return pointRotateRads(
point(width, height),
point(0, 0),
pointFrom(width, height),
pointFrom(0, 0),
-element.angle as Radians,
);
}
@ -1611,36 +1617,36 @@ export class LinearElementEditor {
);
const boundTextX2 = boundTextX1 + boundTextElement.width;
const boundTextY2 = boundTextY1 + boundTextElement.height;
const centerPoint = point(cx, cy);
const centerPoint = pointFrom(cx, cy);
const topLeftRotatedPoint = pointRotateRads(
point(x1, y1),
pointFrom(x1, y1),
centerPoint,
element.angle,
);
const topRightRotatedPoint = pointRotateRads(
point(x2, y1),
pointFrom(x2, y1),
centerPoint,
element.angle,
);
const counterRotateBoundTextTopLeft = pointRotateRads(
point(boundTextX1, boundTextY1),
pointFrom(boundTextX1, boundTextY1),
centerPoint,
-element.angle as Radians,
);
const counterRotateBoundTextTopRight = pointRotateRads(
point(boundTextX2, boundTextY1),
pointFrom(boundTextX2, boundTextY1),
centerPoint,
-element.angle as Radians,
);
const counterRotateBoundTextBottomLeft = pointRotateRads(
point(boundTextX1, boundTextY2),
pointFrom(boundTextX1, boundTextY2),
centerPoint,
-element.angle as Radians,
);
const counterRotateBoundTextBottomRight = pointRotateRads(
point(boundTextX2, boundTextY2),
pointFrom(boundTextX2, boundTextY2),
centerPoint,
-element.angle as Radians,
);

4
packages/excalidraw/element/newElement.test.ts
View file

@ -5,7 +5,7 @@ import { FONT_FAMILY, ROUNDNESS } from "../constants";
import { isPrimitive } from "../utils";
import type { ExcalidrawLinearElement } from "./types";
import type { LocalPoint } from "../../math";
import { point } from "../../math";
import { pointFrom } from "../../math";
const assertCloneObjects = (source: any, clone: any) => {
for (const key in clone) {
@ -38,7 +38,7 @@ describe("duplicating single elements", () => {
element.__proto__ = { hello: "world" };
mutateElement(element, {
points: [point<LocalPoint>(1, 2), point<LocalPoint>(3, 4)],
points: [pointFrom<LocalPoint>(1, 2), pointFrom<LocalPoint>(3, 4)],
});
const copy = duplicateElement(null, new Map(), element);

96
packages/excalidraw/element/resizeElements.ts
View file

@ -58,7 +58,7 @@ import type { GlobalPoint } from "../../math";
import {
pointCenter,
normalizeRadians,
point,
pointFrom,
pointFromPair,
pointRotateRads,
type Radians,
@ -240,8 +240,8 @@ const resizeSingleTextElement = (
);
// rotation pointer with reverse angle
const [rotatedX, rotatedY] = pointRotateRads(
point(pointerX, pointerY),
point(cx, cy),
pointFrom(pointerX, pointerY),
pointFrom(cx, cy),
-element.angle as Radians,
);
let scaleX = 0;
@ -276,23 +276,23 @@ const resizeSingleTextElement = (
const startBottomRight = [x2, y2];
const startCenter = [cx, cy];
let newTopLeft = point<GlobalPoint>(x1, y1);
let newTopLeft = pointFrom<GlobalPoint>(x1, y1);
if (["n", "w", "nw"].includes(transformHandleType)) {
newTopLeft = point<GlobalPoint>(
newTopLeft = pointFrom<GlobalPoint>(
startBottomRight[0] - Math.abs(nextWidth),
startBottomRight[1] - Math.abs(nextHeight),
);
}
if (transformHandleType === "ne") {
const bottomLeft = [startTopLeft[0], startBottomRight[1]];
newTopLeft = point<GlobalPoint>(
newTopLeft = pointFrom<GlobalPoint>(
bottomLeft[0],
bottomLeft[1] - Math.abs(nextHeight),
);
}
if (transformHandleType === "sw") {
const topRight = [startBottomRight[0], startTopLeft[1]];
newTopLeft = point<GlobalPoint>(
newTopLeft = pointFrom<GlobalPoint>(
topRight[0] - Math.abs(nextWidth),
topRight[1],
);
@ -311,12 +311,20 @@ const resizeSingleTextElement = (
}
const angle = element.angle;
const rotatedTopLeft = pointRotateRads(newTopLeft, point(cx, cy), angle);
const newCenter = point<GlobalPoint>(
const rotatedTopLeft = pointRotateRads(
newTopLeft,
pointFrom(cx, cy),
angle,
);
const newCenter = pointFrom<GlobalPoint>(
newTopLeft[0] + Math.abs(nextWidth) / 2,
newTopLeft[1] + Math.abs(nextHeight) / 2,
);
const rotatedNewCenter = pointRotateRads(newCenter, point(cx, cy), angle);
const rotatedNewCenter = pointRotateRads(
newCenter,
pointFrom(cx, cy),
angle,
);
newTopLeft = pointRotateRads(
rotatedTopLeft,
rotatedNewCenter,
@ -341,12 +349,12 @@ const resizeSingleTextElement = (
stateAtResizeStart.height,
true,
);
const startTopLeft = point<GlobalPoint>(x1, y1);
const startBottomRight = point<GlobalPoint>(x2, y2);
const startTopLeft = pointFrom<GlobalPoint>(x1, y1);
const startBottomRight = pointFrom<GlobalPoint>(x2, y2);
const startCenter = pointCenter(startTopLeft, startBottomRight);
const rotatedPointer = pointRotateRads(
point(pointerX, pointerY),
pointFrom(pointerX, pointerY),
startCenter,
-stateAtResizeStart.angle as Radians,
);
@ -419,7 +427,7 @@ const resizeSingleTextElement = (
startCenter,
angle,
);
const newCenter = point(
const newCenter = pointFrom(
newTopLeft[0] + Math.abs(newBoundsWidth) / 2,
newTopLeft[1] + Math.abs(newBoundsHeight) / 2,
);
@ -461,13 +469,13 @@ export const resizeSingleElement = (
stateAtResizeStart.height,
true,
);
const startTopLeft = point(x1, y1);
const startBottomRight = point(x2, y2);
const startTopLeft = pointFrom(x1, y1);
const startBottomRight = pointFrom(x2, y2);
const startCenter = pointCenter(startTopLeft, startBottomRight);
// Calculate new dimensions based on cursor position
const rotatedPointer = pointRotateRads(
point(pointerX, pointerY),
pointFrom(pointerX, pointerY),
startCenter,
-stateAtResizeStart.angle as Radians,
);
@ -648,7 +656,7 @@ export const resizeSingleElement = (
startCenter,
angle,
);
const newCenter = point(
const newCenter = pointFrom(
newTopLeft[0] + Math.abs(newBoundsWidth) / 2,
newTopLeft[1] + Math.abs(newBoundsHeight) / 2,
);
@ -817,20 +825,20 @@ export const resizeMultipleElements = (
const direction = transformHandleType;
const anchorsMap: Record<TransformHandleDirection, GlobalPoint> = {
ne: point(minX, maxY),
se: point(minX, minY),
sw: point(maxX, minY),
nw: point(maxX, maxY),
e: point(minX, minY + height / 2),
w: point(maxX, minY + height / 2),
n: point(minX + width / 2, maxY),
s: point(minX + width / 2, minY),
ne: pointFrom(minX, maxY),
se: pointFrom(minX, minY),
sw: pointFrom(maxX, minY),
nw: pointFrom(maxX, maxY),
e: pointFrom(minX, minY + height / 2),
w: pointFrom(maxX, minY + height / 2),
n: pointFrom(minX + width / 2, maxY),
s: pointFrom(minX + width / 2, minY),
};
// anchor point must be on the opposite side of the dragged selection handle
// or be the center of the selection if shouldResizeFromCenter
const [anchorX, anchorY] = shouldResizeFromCenter
? point(midX, midY)
? pointFrom(midX, midY)
: anchorsMap[direction];
const resizeFromCenterScale = shouldResizeFromCenter ? 2 : 1;
@ -1044,8 +1052,8 @@ const rotateMultipleElements = (
const origAngle =
originalElements.get(element.id)?.angle ?? element.angle;
const [rotatedCX, rotatedCY] = pointRotateRads(
point(cx, cy),
point(centerX, centerY),
pointFrom(cx, cy),
pointFrom(centerX, centerY),
(centerAngle + origAngle - element.angle) as Radians,
);
@ -1101,40 +1109,44 @@ export const getResizeOffsetXY = (
const angle = (
selectedElements.length === 1 ? selectedElements[0].angle : 0
) as Radians;
[x, y] = pointRotateRads(point(x, y), point(cx, cy), -angle as Radians);
[x, y] = pointRotateRads(
pointFrom(x, y),
pointFrom(cx, cy),
-angle as Radians,
);
switch (transformHandleType) {
case "n":
return pointRotateRads(
point(x - (x1 + x2) / 2, y - y1),
point(0, 0),
pointFrom(x - (x1 + x2) / 2, y - y1),
pointFrom(0, 0),
angle,
);
case "s":
return pointRotateRads(
point(x - (x1 + x2) / 2, y - y2),
point(0, 0),
pointFrom(x - (x1 + x2) / 2, y - y2),
pointFrom(0, 0),
angle,
);
case "w":
return pointRotateRads(
point(x - x1, y - (y1 + y2) / 2),
point(0, 0),
pointFrom(x - x1, y - (y1 + y2) / 2),
pointFrom(0, 0),
angle,
);
case "e":
return pointRotateRads(
point(x - x2, y - (y1 + y2) / 2),
point(0, 0),
pointFrom(x - x2, y - (y1 + y2) / 2),
pointFrom(0, 0),
angle,
);
case "nw":
return pointRotateRads(point(x - x1, y - y1), point(0, 0), angle);
return pointRotateRads(pointFrom(x - x1, y - y1), pointFrom(0, 0), angle);
case "ne":
return pointRotateRads(point(x - x2, y - y1), point(0, 0), angle);
return pointRotateRads(pointFrom(x - x2, y - y1), pointFrom(0, 0), angle);
case "sw":
return pointRotateRads(point(x - x1, y - y2), point(0, 0), angle);
return pointRotateRads(pointFrom(x - x1, y - y2), pointFrom(0, 0), angle);
case "se":
return pointRotateRads(point(x - x2, y - y2), point(0, 0), angle);
return pointRotateRads(pointFrom(x - x2, y - y2), pointFrom(0, 0), angle);
default:
return [0, 0];
}

30
packages/excalidraw/element/resizeTest.ts
View file

@ -23,7 +23,7 @@ import { SIDE_RESIZING_THRESHOLD } from "../constants";
import { isLinearElement } from "./typeChecks";
import type { GlobalPoint, LineSegment, LocalPoint } from "../../math";
import {
point,
pointFrom,
pointOnLineSegment,
pointRotateRads,
type Radians,
@ -92,16 +92,20 @@ export const resizeTest = <Point extends GlobalPoint | LocalPoint>(
if (!(isLinearElement(element) && element.points.length <= 2)) {
const SPACING = SIDE_RESIZING_THRESHOLD / zoom.value;
const sides = getSelectionBorders(
point(x1 - SPACING, y1 - SPACING),
point(x2 + SPACING, y2 + SPACING),
point(cx, cy),
pointFrom(x1 - SPACING, y1 - SPACING),
pointFrom(x2 + SPACING, y2 + SPACING),
pointFrom(cx, cy),
element.angle,
);
for (const [dir, side] of Object.entries(sides)) {
// test to see if x, y are on the line segment
if (
pointOnLineSegment(point(x, y), side as LineSegment<Point>, SPACING)
pointOnLineSegment(
pointFrom(x, y),
side as LineSegment<Point>,
SPACING,
)
) {
return dir as TransformHandleType;
}
@ -178,9 +182,9 @@ export const getTransformHandleTypeFromCoords = <
const SPACING = SIDE_RESIZING_THRESHOLD / zoom.value;
const sides = getSelectionBorders(
point(x1 - SPACING, y1 - SPACING),
point(x2 + SPACING, y2 + SPACING),
point(cx, cy),
pointFrom(x1 - SPACING, y1 - SPACING),
pointFrom(x2 + SPACING, y2 + SPACING),
pointFrom(cx, cy),
0 as Radians,
);
@ -188,7 +192,7 @@ export const getTransformHandleTypeFromCoords = <
// test to see if x, y are on the line segment
if (
pointOnLineSegment(
point(scenePointerX, scenePointerY),
pointFrom(scenePointerX, scenePointerY),
side as LineSegment<Point>,
SPACING,
)
@ -265,10 +269,10 @@ const getSelectionBorders = <Point extends LocalPoint | GlobalPoint>(
center: Point,
angle: Radians,
) => {
const topLeft = pointRotateRads(point(x1, y1), center, angle);
const topRight = pointRotateRads(point(x2, y1), center, angle);
const bottomLeft = pointRotateRads(point(x1, y2), center, angle);
const bottomRight = pointRotateRads(point(x2, y2), center, angle);
const topLeft = pointRotateRads(pointFrom(x1, y1), center, angle);
const topRight = pointRotateRads(pointFrom(x2, y1), center, angle);
const bottomLeft = pointRotateRads(pointFrom(x1, y2), center, angle);
const bottomRight = pointRotateRads(pointFrom(x2, y2), center, angle);
return {
n: [topLeft, topRight],

10
packages/excalidraw/element/routing.test.tsx
View file

@ -17,7 +17,7 @@ import type {
ExcalidrawElbowArrowElement,
} from "./types";
import { ARROW_TYPE } from "../constants";
import { point } from "../../math";
import { pointFrom } from "../../math";
const { h } = window;
@ -32,8 +32,8 @@ describe("elbow arrow routing", () => {
}) as ExcalidrawElbowArrowElement;
scene.insertElement(arrow);
mutateElbowArrow(arrow, scene.getNonDeletedElementsMap(), [
point(-45 - arrow.x, -100.1 - arrow.y),
point(45 - arrow.x, 99.9 - arrow.y),
pointFrom(-45 - arrow.x, -100.1 - arrow.y),
pointFrom(45 - arrow.x, 99.9 - arrow.y),
]);
expect(arrow.points).toEqual([
[0, 0],
@ -69,7 +69,7 @@ describe("elbow arrow routing", () => {
y: -100.1,
width: 90,
height: 200,
points: [point(0, 0), point(90, 200)],
points: [pointFrom(0, 0), pointFrom(90, 200)],
}) as ExcalidrawElbowArrowElement;
scene.insertElement(rectangle1);
scene.insertElement(rectangle2);
@ -81,7 +81,7 @@ describe("elbow arrow routing", () => {
expect(arrow.startBinding).not.toBe(null);
expect(arrow.endBinding).not.toBe(null);
mutateElbowArrow(arrow, elementsMap, [point(0, 0), point(90, 200)]);
mutateElbowArrow(arrow, elementsMap, [pointFrom(0, 0), pointFrom(90, 200)]);
expect(arrow.points).toEqual([
[0, 0],

10
packages/excalidraw/element/routing.ts
View file

@ -1,6 +1,6 @@
import type { Radians } from "../../math";
import {
point,
pointFrom,
pointScaleFromOrigin,
pointTranslate,
vector,
@ -743,13 +743,13 @@ const getDonglePosition = (
): GlobalPoint => {
switch (heading) {
case HEADING_UP:
return point(p[0], bounds[1]);
return pointFrom(p[0], bounds[1]);
case HEADING_RIGHT:
return point(bounds[2], p[1]);
return pointFrom(bounds[2], p[1]);
case HEADING_DOWN:
return point(p[0], bounds[3]);
return pointFrom(p[0], bounds[3]);
}
return point(bounds[0], p[1]);
return pointFrom(bounds[0], p[1]);
};
const estimateSegmentCount = (

4
packages/excalidraw/element/textWysiwyg.test.tsx
View file

@ -19,7 +19,7 @@ import type {
import { API } from "../tests/helpers/api";
import { getOriginalContainerHeightFromCache } from "./containerCache";
import { getTextEditor, updateTextEditor } from "../tests/queries/dom";
import { point } from "../../math";
import { pointFrom } from "../../math";
// Unmount ReactDOM from root
ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
@ -42,7 +42,7 @@ describe("textWysiwyg", () => {
type: "line",
width: 100,
height: 0,
points: [point(0, 0), point(100, 0)],
points: [pointFrom(0, 0), pointFrom(100, 0)],
});
const textSize = 20;
const text = API.createElement({

6
packages/excalidraw/element/transformHandles.ts
View file

@ -19,7 +19,7 @@ import {
isIOS,
} from "../constants";
import type { Radians } from "../../math";
import { point, pointRotateRads } from "../../math";
import { pointFrom, pointRotateRads } from "../../math";
export type TransformHandleDirection =
| "n"
@ -95,8 +95,8 @@ const generateTransformHandle = (
angle: Radians,
): TransformHandle => {
const [xx, yy] = pointRotateRads(
point(x + width / 2, y + height / 2),
point(cx, cy),
pointFrom(x + width / 2, y + height / 2),
pointFrom(cx, cy),
angle,
);
return [xx - width / 2, yy - height / 2, width, height];

8
packages/excalidraw/frame.ts
View file

@ -29,7 +29,7 @@ import { getElementLineSegments } from "./element/bounds";
import { doLineSegmentsIntersect, elementsOverlappingBBox } from "../utils/";
import { isFrameElement, isFrameLikeElement } from "./element/typeChecks";
import type { ReadonlySetLike } from "./utility-types";
import { isPointWithinBounds, point } from "../math";
import { isPointWithinBounds, pointFrom } from "../math";
// --------------------------- Frame State ------------------------------------
export const bindElementsToFramesAfterDuplication = (
@ -159,9 +159,9 @@ export const isCursorInFrame = (
const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame, elementsMap);
return isPointWithinBounds(
point(fx1, fy1),
point(cursorCoords.x, cursorCoords.y),
point(fx2, fy2),
pointFrom(fx1, fy1),
pointFrom(cursorCoords.x, cursorCoords.y),
pointFrom(fx2, fy2),
);
};

38
packages/excalidraw/renderer/renderSnaps.ts
View file

@ -1,4 +1,4 @@
import { point, type GlobalPoint, type LocalPoint } from "../../math";
import { pointFrom, type GlobalPoint, type LocalPoint } from "../../math";
import { THEME } from "../constants";
import type { PointSnapLine, PointerSnapLine } from "../snapping";
import type { InteractiveCanvasAppState } from "../types";
@ -140,27 +140,31 @@ const drawGapLine = <Point extends LocalPoint | GlobalPoint>(
// (1)
if (!appState.zenModeEnabled) {
drawLine(
point(from[0], from[1] - FULL),
point(from[0], from[1] + FULL),
pointFrom(from[0], from[1] - FULL),
pointFrom(from[0], from[1] + FULL),
context,
);
}
// (3)
drawLine(
point(halfPoint[0] - QUARTER, halfPoint[1] - HALF),
point(halfPoint[0] - QUARTER, halfPoint[1] + HALF),
pointFrom(halfPoint[0] - QUARTER, halfPoint[1] - HALF),
pointFrom(halfPoint[0] - QUARTER, halfPoint[1] + HALF),
context,
);
drawLine(
point(halfPoint[0] + QUARTER, halfPoint[1] - HALF),
point(halfPoint[0] + QUARTER, halfPoint[1] + HALF),
pointFrom(halfPoint[0] + QUARTER, halfPoint[1] - HALF),
pointFrom(halfPoint[0] + QUARTER, halfPoint[1] + HALF),
context,
);
if (!appState.zenModeEnabled) {
// (4)
drawLine(point(to[0], to[1] - FULL), point(to[0], to[1] + FULL), context);
drawLine(
pointFrom(to[0], to[1] - FULL),
pointFrom(to[0], to[1] + FULL),
context,
);
// (2)
drawLine(from, to, context);
@ -170,27 +174,31 @@ const drawGapLine = <Point extends LocalPoint | GlobalPoint>(
// (1)
if (!appState.zenModeEnabled) {
drawLine(
point(from[0] - FULL, from[1]),
point(from[0] + FULL, from[1]),
pointFrom(from[0] - FULL, from[1]),
pointFrom(from[0] + FULL, from[1]),
context,
);
}
// (3)
drawLine(
point(halfPoint[0] - HALF, halfPoint[1] - QUARTER),
point(halfPoint[0] + HALF, halfPoint[1] - QUARTER),
pointFrom(halfPoint[0] - HALF, halfPoint[1] - QUARTER),
pointFrom(halfPoint[0] + HALF, halfPoint[1] - QUARTER),
context,
);
drawLine(
point(halfPoint[0] - HALF, halfPoint[1] + QUARTER),
point(halfPoint[0] + HALF, halfPoint[1] + QUARTER),
pointFrom(halfPoint[0] - HALF, halfPoint[1] + QUARTER),
pointFrom(halfPoint[0] + HALF, halfPoint[1] + QUARTER),
context,
);
if (!appState.zenModeEnabled) {
// (4)
drawLine(point(to[0] - FULL, to[1]), point(to[0] + FULL, to[1]), context);
drawLine(
pointFrom(to[0] - FULL, to[1]),
pointFrom(to[0] + FULL, to[1]),
context,
);
// (2)
drawLine(from, to, context);

4
packages/excalidraw/scene/Shape.ts
View file

@ -24,7 +24,7 @@ import {
import { canChangeRoundness } from "./comparisons";
import type { EmbedsValidationStatus } from "../types";
import {
point,
pointFrom,
pointDistance,
type GlobalPoint,
type LocalPoint,
@ -408,7 +408,7 @@ export const _generateElementShape = (
// initial position to it
const points = element.points.length
? element.points
: [point<LocalPoint>(0, 0)];
: [pointFrom<LocalPoint>(0, 0)];
if (isElbowArrow(element)) {
shape = [

52
packages/excalidraw/shapes.tsx
View file

@ -1,6 +1,6 @@
import {
isPoint,
point,
pointFrom,
pointDistance,
pointFromPair,
pointRotateRads,
@ -167,15 +167,15 @@ export const getElementShape = <Point extends GlobalPoint | LocalPoint>(
? getClosedCurveShape<Point>(
element,
roughShape,
point<Point>(element.x, element.y),
pointFrom<Point>(element.x, element.y),
element.angle,
point(cx, cy),
pointFrom(cx, cy),
)
: getCurveShape<Point>(
roughShape,
point<Point>(element.x, element.y),
pointFrom<Point>(element.x, element.y),
element.angle,
point(cx, cy),
pointFrom(cx, cy),
);
}
@ -186,7 +186,7 @@ export const getElementShape = <Point extends GlobalPoint | LocalPoint>(
const [, , , , cx, cy] = getElementAbsoluteCoords(element, elementsMap);
return getFreedrawShape(
element,
point(cx, cy),
pointFrom(cx, cy),
shouldTestInside(element),
);
}
@ -233,7 +233,7 @@ export const getControlPointsForBezierCurve = <
}
const ops = getCurvePathOps(shape[0]);
let currentP = point<P>(0, 0);
let currentP = pointFrom<P>(0, 0);
let index = 0;
let minDistance = Infinity;
let controlPoints: P[] | null = null;
@ -249,9 +249,9 @@ export const getControlPointsForBezierCurve = <
}
if (op === "bcurveTo") {
const p0 = currentP;
const p1 = point<P>(data[0], data[1]);
const p2 = point<P>(data[2], data[3]);
const p3 = point<P>(data[4], data[5]);
const p1 = pointFrom<P>(data[0], data[1]);
const p2 = pointFrom<P>(data[2], data[3]);
const p3 = pointFrom<P>(data[4], data[5]);
const distance = pointDistance(p3, endPoint);
if (distance < minDistance) {
minDistance = distance;
@ -279,7 +279,7 @@ export const getBezierXY = <P extends GlobalPoint | LocalPoint>(
p0[idx] * Math.pow(t, 3);
const tx = equation(t, 0);
const ty = equation(t, 1);
return point(tx, ty);
return pointFrom(tx, ty);
};
const getPointsInBezierCurve = <P extends GlobalPoint | LocalPoint>(
@ -301,12 +301,12 @@ const getPointsInBezierCurve = <P extends GlobalPoint | LocalPoint>(
controlPoints[3],
t,
);
pointsOnCurve.push(point(p[0], p[1]));
pointsOnCurve.push(pointFrom(p[0], p[1]));
t -= 0.05;
}
if (pointsOnCurve.length) {
if (pointsEqual(pointsOnCurve.at(-1)!, endPoint)) {
pointsOnCurve.push(point(endPoint[0], endPoint[1]));
pointsOnCurve.push(pointFrom(endPoint[0], endPoint[1]));
}
}
return pointsOnCurve;
@ -393,24 +393,24 @@ export const aabbForElement = (
midY: element.y + element.height / 2,
};
const center = point(bbox.midX, bbox.midY);
const center = pointFrom(bbox.midX, bbox.midY);
const [topLeftX, topLeftY] = pointRotateRads(
point(bbox.minX, bbox.minY),
pointFrom(bbox.minX, bbox.minY),
center,
element.angle,
);
const [topRightX, topRightY] = pointRotateRads(
point(bbox.maxX, bbox.minY),
pointFrom(bbox.maxX, bbox.minY),
center,
element.angle,
);
const [bottomRightX, bottomRightY] = pointRotateRads(
point(bbox.maxX, bbox.maxY),
pointFrom(bbox.maxX, bbox.maxY),
center,
element.angle,
);
const [bottomLeftX, bottomLeftY] = pointRotateRads(
point(bbox.minX, bbox.maxY),
pointFrom(bbox.minX, bbox.maxY),
center,
element.angle,
);
@ -442,14 +442,14 @@ export const pointInsideBounds = <P extends GlobalPoint | LocalPoint>(
p[0] > bounds[0] && p[0] < bounds[2] && p[1] > bounds[1] && p[1] < bounds[3];
export const aabbsOverlapping = (a: Bounds, b: Bounds) =>
pointInsideBounds(point(a[0], a[1]), b) ||
pointInsideBounds(point(a[2], a[1]), b) ||
pointInsideBounds(point(a[2], a[3]), b) ||
pointInsideBounds(point(a[0], a[3]), b) ||
pointInsideBounds(point(b[0], b[1]), a) ||
pointInsideBounds(point(b[2], b[1]), a) ||
pointInsideBounds(point(b[2], b[3]), a) ||
pointInsideBounds(point(b[0], b[3]), a);
pointInsideBounds(pointFrom(a[0], a[1]), b) ||
pointInsideBounds(pointFrom(a[2], a[1]), b) ||
pointInsideBounds(pointFrom(a[2], a[3]), b) ||
pointInsideBounds(pointFrom(a[0], a[3]), b) ||
pointInsideBounds(pointFrom(b[0], b[1]), a) ||
pointInsideBounds(pointFrom(b[2], b[1]), a) ||
pointInsideBounds(pointFrom(b[2], b[3]), a) ||
pointInsideBounds(pointFrom(b[0], b[3]), a);
export const getCornerRadius = (x: number, element: ExcalidrawElement) => {
if (

154
packages/excalidraw/snapping.ts
View file

@ -1,6 +1,6 @@
import type { InclusiveRange } from "../math";
import {
point,
pointFrom,
pointRotateRads,
rangeInclusive,
rangeIntersection,
@ -228,52 +228,52 @@ export const getElementsCorners = (
!boundingBoxCorners
) {
const leftMid = pointRotateRads<GlobalPoint>(
point(x1, y1 + halfHeight),
point(cx, cy),
pointFrom(x1, y1 + halfHeight),
pointFrom(cx, cy),
element.angle,
);
const topMid = pointRotateRads<GlobalPoint>(
point(x1 + halfWidth, y1),
point(cx, cy),
pointFrom(x1 + halfWidth, y1),
pointFrom(cx, cy),
element.angle,
);
const rightMid = pointRotateRads<GlobalPoint>(
point(x2, y1 + halfHeight),
point(cx, cy),
pointFrom(x2, y1 + halfHeight),
pointFrom(cx, cy),
element.angle,
);
const bottomMid = pointRotateRads<GlobalPoint>(
point(x1 + halfWidth, y2),
point(cx, cy),
pointFrom(x1 + halfWidth, y2),
pointFrom(cx, cy),
element.angle,
);
const center = point<GlobalPoint>(cx, cy);
const center = pointFrom<GlobalPoint>(cx, cy);
result = omitCenter
? [leftMid, topMid, rightMid, bottomMid]
: [leftMid, topMid, rightMid, bottomMid, center];
} else {
const topLeft = pointRotateRads<GlobalPoint>(
point(x1, y1),
point(cx, cy),
pointFrom(x1, y1),
pointFrom(cx, cy),
element.angle,
);
const topRight = pointRotateRads<GlobalPoint>(
point(x2, y1),
point(cx, cy),
pointFrom(x2, y1),
pointFrom(cx, cy),
element.angle,
);
const bottomLeft = pointRotateRads<GlobalPoint>(
point(x1, y2),
point(cx, cy),
pointFrom(x1, y2),
pointFrom(cx, cy),
element.angle,
);
const bottomRight = pointRotateRads<GlobalPoint>(
point(x2, y2),
point(cx, cy),
pointFrom(x2, y2),
pointFrom(cx, cy),
element.angle,
);
const center = point<GlobalPoint>(cx, cy);
const center = pointFrom<GlobalPoint>(cx, cy);
result = omitCenter
? [topLeft, topRight, bottomLeft, bottomRight]
@ -287,18 +287,18 @@ export const getElementsCorners = (
const width = maxX - minX;
const height = maxY - minY;
const topLeft = point<GlobalPoint>(minX, minY);
const topRight = point<GlobalPoint>(maxX, minY);
const bottomLeft = point<GlobalPoint>(minX, maxY);
const bottomRight = point<GlobalPoint>(maxX, maxY);
const center = point<GlobalPoint>(minX + width / 2, minY + height / 2);
const topLeft = pointFrom<GlobalPoint>(minX, minY);
const topRight = pointFrom<GlobalPoint>(maxX, minY);
const bottomLeft = pointFrom<GlobalPoint>(minX, maxY);
const bottomRight = pointFrom<GlobalPoint>(maxX, maxY);
const center = pointFrom<GlobalPoint>(minX + width / 2, minY + height / 2);
result = omitCenter
? [topLeft, topRight, bottomLeft, bottomRight]
: [topLeft, topRight, bottomLeft, bottomRight, center];
}
return result.map((p) => point(round(p[0]), round(p[1])));
return result.map((p) => pointFrom(round(p[0]), round(p[1])));
};
const getReferenceElements = (
@ -375,8 +375,11 @@ export const getVisibleGaps = (
horizontalGaps.push({
startBounds,
endBounds,
startSide: [point(startMaxX, startMinY), point(startMaxX, startMaxY)],
endSide: [point(endMinX, endMinY), point(endMinX, endMaxY)],
startSide: [
pointFrom(startMaxX, startMinY),
pointFrom(startMaxX, startMaxY),
],
endSide: [pointFrom(endMinX, endMinY), pointFrom(endMinX, endMaxY)],
length: endMinX - startMaxX,
overlap: rangeIntersection(
rangeInclusive(startMinY, startMaxY),
@ -415,8 +418,11 @@ export const getVisibleGaps = (
verticalGaps.push({
startBounds,
endBounds,
startSide: [point(startMinX, startMaxY), point(startMaxX, startMaxY)],
endSide: [point(endMinX, endMinY), point(endMaxX, endMinY)],
startSide: [
pointFrom(startMinX, startMaxY),
pointFrom(startMaxX, startMaxY),
],
endSide: [pointFrom(endMinX, endMinY), pointFrom(endMaxX, endMinY)],
length: endMinY - startMaxY,
overlap: rangeIntersection(
rangeInclusive(startMinX, startMaxX),
@ -832,7 +838,7 @@ const createPointSnapLines = (
}
snapsX[key].push(
...snap.points.map((p) =>
point<GlobalPoint>(round(p[0]), round(p[1])),
pointFrom<GlobalPoint>(round(p[0]), round(p[1])),
),
);
}
@ -849,7 +855,7 @@ const createPointSnapLines = (
}
snapsY[key].push(
...snap.points.map((p) =>
point<GlobalPoint>(round(p[0]), round(p[1])),
pointFrom<GlobalPoint>(round(p[0]), round(p[1])),
),
);
}
@ -863,7 +869,7 @@ const createPointSnapLines = (
points: dedupePoints(
points
.map((p) => {
return point<GlobalPoint>(Number(key), p[1]);
return pointFrom<GlobalPoint>(Number(key), p[1]);
})
.sort((a, b) => a[1] - b[1]),
),
@ -876,7 +882,7 @@ const createPointSnapLines = (
points: dedupePoints(
points
.map((p) => {
return point<GlobalPoint>(p[0], Number(key));
return pointFrom<GlobalPoint>(p[0], Number(key));
})
.sort((a, b) => a[0] - b[0]),
),
@ -940,16 +946,16 @@ const createGapSnapLines = (
type: "gap",
direction: "horizontal",
points: [
point(gapSnap.gap.startSide[0][0], gapLineY),
point(minX, gapLineY),
pointFrom(gapSnap.gap.startSide[0][0], gapLineY),
pointFrom(minX, gapLineY),
],
},
{
type: "gap",
direction: "horizontal",
points: [
point(maxX, gapLineY),
point(gapSnap.gap.endSide[0][0], gapLineY),
pointFrom(maxX, gapLineY),
pointFrom(gapSnap.gap.endSide[0][0], gapLineY),
],
},
);
@ -966,16 +972,16 @@ const createGapSnapLines = (
type: "gap",
direction: "vertical",
points: [
point(gapLineX, gapSnap.gap.startSide[0][1]),
point(gapLineX, minY),
pointFrom(gapLineX, gapSnap.gap.startSide[0][1]),
pointFrom(gapLineX, minY),
],
},
{
type: "gap",
direction: "vertical",
points: [
point(gapLineX, maxY),
point(gapLineX, gapSnap.gap.endSide[0][1]),
pointFrom(gapLineX, maxY),
pointFrom(gapLineX, gapSnap.gap.endSide[0][1]),
],
},
);
@ -991,12 +997,15 @@ const createGapSnapLines = (
{
type: "gap",
direction: "horizontal",
points: [point(startMaxX, gapLineY), point(endMinX, gapLineY)],
points: [
pointFrom(startMaxX, gapLineY),
pointFrom(endMinX, gapLineY),
],
},
{
type: "gap",
direction: "horizontal",
points: [point(endMaxX, gapLineY), point(minX, gapLineY)],
points: [pointFrom(endMaxX, gapLineY), pointFrom(minX, gapLineY)],
},
);
}
@ -1011,12 +1020,18 @@ const createGapSnapLines = (
{
type: "gap",
direction: "horizontal",
points: [point(maxX, gapLineY), point(startMinX, gapLineY)],
points: [
pointFrom(maxX, gapLineY),
pointFrom(startMinX, gapLineY),
],
},
{
type: "gap",
direction: "horizontal",
points: [point(startMaxX, gapLineY), point(endMinX, gapLineY)],
points: [
pointFrom(startMaxX, gapLineY),
pointFrom(endMinX, gapLineY),
],
},
);
}
@ -1031,12 +1046,18 @@ const createGapSnapLines = (
{
type: "gap",
direction: "vertical",
points: [point(gapLineX, maxY), point(gapLineX, startMinY)],
points: [
pointFrom(gapLineX, maxY),
pointFrom(gapLineX, startMinY),
],
},
{
type: "gap",
direction: "vertical",
points: [point(gapLineX, startMaxY), point(gapLineX, endMinY)],
points: [
pointFrom(gapLineX, startMaxY),
pointFrom(gapLineX, endMinY),
],
},
);
}
@ -1051,12 +1072,15 @@ const createGapSnapLines = (
{
type: "gap",
direction: "vertical",
points: [point(gapLineX, startMaxY), point(gapLineX, endMinY)],
points: [
pointFrom(gapLineX, startMaxY),
pointFrom(gapLineX, endMinY),
],
},
{
type: "gap",
direction: "vertical",
points: [point(gapLineX, endMaxY), point(gapLineX, minY)],
points: [pointFrom(gapLineX, endMaxY), pointFrom(gapLineX, minY)],
},
);
}
@ -1070,7 +1094,7 @@ const createGapSnapLines = (
return {
...gapSnapLine,
points: gapSnapLine.points.map((p) =>
point(round(p[0]), round(p[1])),
pointFrom(round(p[0]), round(p[1])),
) as PointPair,
};
}),
@ -1120,35 +1144,35 @@ export const snapResizingElements = (
if (transformHandle) {
switch (transformHandle) {
case "e": {
selectionSnapPoints.push(point(maxX, minY), point(maxX, maxY));
selectionSnapPoints.push(pointFrom(maxX, minY), pointFrom(maxX, maxY));
break;
}
case "w": {
selectionSnapPoints.push(point(minX, minY), point(minX, maxY));
selectionSnapPoints.push(pointFrom(minX, minY), pointFrom(minX, maxY));
break;
}
case "n": {
selectionSnapPoints.push(point(minX, minY), point(maxX, minY));
selectionSnapPoints.push(pointFrom(minX, minY), pointFrom(maxX, minY));
break;
}
case "s": {
selectionSnapPoints.push(point(minX, maxY), point(maxX, maxY));
selectionSnapPoints.push(pointFrom(minX, maxY), pointFrom(maxX, maxY));
break;
}
case "ne": {
selectionSnapPoints.push(point(maxX, minY));
selectionSnapPoints.push(pointFrom(maxX, minY));
break;
}
case "nw": {
selectionSnapPoints.push(point(minX, minY));
selectionSnapPoints.push(pointFrom(minX, minY));
break;
}
case "se": {
selectionSnapPoints.push(point(maxX, maxY));
selectionSnapPoints.push(pointFrom(maxX, maxY));
break;
}
case "sw": {
selectionSnapPoints.push(point(minX, maxY));
selectionSnapPoints.push(pointFrom(minX, maxY));
break;
}
}
@ -1191,10 +1215,10 @@ export const snapResizingElements = (
);
const corners: GlobalPoint[] = [
point(x1, y1),
point(x1, y2),
point(x2, y1),
point(x2, y2),
pointFrom(x1, y1),
pointFrom(x1, y2),
pointFrom(x2, y1),
pointFrom(x2, y2),
];
getPointSnaps(
@ -1231,7 +1255,7 @@ export const snapNewElement = (
}
const selectionSnapPoints: GlobalPoint[] = [
point(origin.x + dragOffset.x, origin.y + dragOffset.y),
pointFrom(origin.x + dragOffset.x, origin.y + dragOffset.y),
];
const snapDistance = getSnapDistance(app.state.zoom.value);
@ -1331,7 +1355,7 @@ export const getSnapLinesAtPointer = (
verticalSnapLines.push({
type: "pointer",
points: [corner, point(corner[0], pointer.y)],
points: [corner, pointFrom(corner[0], pointer.y)],
direction: "vertical",
});
@ -1347,7 +1371,7 @@ export const getSnapLinesAtPointer = (
horizontalSnapLines.push({
type: "pointer",
points: [corner, point(pointer.x, corner[1])],
points: [corner, pointFrom(pointer.x, corner[1])],
direction: "horizontal",
});

13
packages/excalidraw/tests/binding.test.tsx
View file

@ -7,7 +7,7 @@ import { API } from "./helpers/api";
import { KEYS } from "../keys";
import { actionWrapTextInContainer } from "../actions/actionBoundText";
import { arrayToMap } from "../utils";
import { point } from "../../math";
import { pointFrom } from "../../math";
const { h } = window;
@ -32,7 +32,12 @@ describe("element binding", () => {
y: 0,
width: 100,
height: 1,
points: [point(0, 0), point(0, 0), point(100, 0), point(100, 0)],
points: [
pointFrom(0, 0),
pointFrom(0, 0),
pointFrom(100, 0),
pointFrom(100, 0),
],
});
API.setElements([rect, arrow]);
expect(arrow.startBinding).toBe(null);
@ -310,7 +315,7 @@ describe("element binding", () => {
const arrow1 = API.createElement({
type: "arrow",
id: "arrow1",
points: [point(0, 0), point(0, -87.45777932247563)],
points: [pointFrom(0, 0), pointFrom(0, -87.45777932247563)],
startBinding: {
elementId: "rectangle1",
focus: 0.2,
@ -328,7 +333,7 @@ describe("element binding", () => {
const arrow2 = API.createElement({
type: "arrow",
id: "arrow2",
points: [point(0, 0), point(0, -87.45777932247563)],
points: [pointFrom(0, 0), pointFrom(0, -87.45777932247563)],
startBinding: {
elementId: "text1",
focus: 0.2,

8
packages/excalidraw/tests/flip.test.tsx
View file

@ -28,7 +28,7 @@ import { getBoundTextElementPosition } from "../element/textElement";
import { createPasteEvent } from "../clipboard";
import { arrayToMap, cloneJSON } from "../utils";
import type { LocalPoint } from "../../math";
import { point, type Radians } from "../../math";
import { pointFrom, type Radians } from "../../math";
const { h } = window;
const mouse = new Pointer("mouse");
@ -146,9 +146,9 @@ const createLinearElementWithCurveInsideMinMaxPoints = (
link: null,
locked: false,
points: [
point<LocalPoint>(0, 0),
point<LocalPoint>(-922.4761962890625, 300.3277587890625),
point<LocalPoint>(828.0126953125, 410.51605224609375),
pointFrom<LocalPoint>(0, 0),
pointFrom<LocalPoint>(-922.4761962890625, 300.3277587890625),
pointFrom<LocalPoint>(828.0126953125, 410.51605224609375),
],
});
};

10
packages/excalidraw/tests/helpers/api.ts
View file

@ -38,7 +38,7 @@ import type App from "../../components/App";
import { createTestHook } from "../../components/App";
import type { Action } from "../../actions/types";
import { mutateElement } from "../../element/mutateElement";
import { point, type LocalPoint, type Radians } from "../../../math";
import { pointFrom, type LocalPoint, type Radians } from "../../../math";
const readFile = util.promisify(fs.readFile);
// so that window.h is available when App.tsx is not imported as well.
@ -307,8 +307,8 @@ export class API {
height,
type,
points: rest.points ?? [
point<LocalPoint>(0, 0),
point<LocalPoint>(100, 100),
pointFrom<LocalPoint>(0, 0),
pointFrom<LocalPoint>(100, 100),
],
elbowed: rest.elbowed ?? false,
});
@ -320,8 +320,8 @@ export class API {
height,
type,
points: rest.points ?? [
point<LocalPoint>(0, 0),
point<LocalPoint>(100, 100),
pointFrom<LocalPoint>(0, 0),
pointFrom<LocalPoint>(100, 100),
],
});
break;

15
packages/excalidraw/tests/helpers/ui.ts
View file

@ -34,7 +34,7 @@ import { getTextEditor } from "../queries/dom";
import { arrayToMap } from "../../utils";
import { createTestHook } from "../../components/App";
import type { GlobalPoint, LocalPoint, Radians } from "../../../math";
import { point, pointRotateRads } from "../../../math";
import { pointFrom, pointRotateRads } from "../../../math";
// so that window.h is available when App.tsx is not imported as well.
createTestHook();
@ -142,7 +142,7 @@ const getElementPointForSelection = (
element: ExcalidrawElement,
): GlobalPoint => {
const { x, y, width, height, angle } = element;
const target = point<GlobalPoint>(
const target = pointFrom<GlobalPoint>(
x +
(isLinearElement(element) || isFreeDrawElement(element) ? 0 : width / 2),
y,
@ -151,9 +151,12 @@ const getElementPointForSelection = (
if (isLinearElement(element)) {
const bounds = getElementPointsCoords(element, element.points);
center = point((bounds[0] + bounds[2]) / 2, (bounds[1] + bounds[3]) / 2);
center = pointFrom(
(bounds[0] + bounds[2]) / 2,
(bounds[1] + bounds[3]) / 2,
);
} else {
center = point(x + width / 2, y + height / 2);
center = pointFrom(x + width / 2, y + height / 2);
}
if (isTextElement(element)) {
@ -469,8 +472,8 @@ export class UI {
const width = initialWidth ?? initialHeight ?? size;
const height = initialHeight ?? size;
const points: LocalPoint[] = initialPoints ?? [
point(0, 0),
point(width, height),
pointFrom(0, 0),
pointFrom(width, height),
];
UI.clickTool(type);

18
packages/excalidraw/tests/history.test.tsx
View file

@ -46,7 +46,7 @@ import { HistoryEntry } from "../history";
import { AppStateChange, ElementsChange } from "../change";
import { Snapshot, StoreAction } from "../store";
import type { LocalPoint, Radians } from "../../math";
import { point } from "../../math";
import { pointFrom } from "../../math";
const { h } = window;
@ -2041,9 +2041,9 @@ describe("history", () => {
width: 178.9000000000001,
height: 236.10000000000002,
points: [
point(0, 0),
point(178.9000000000001, 0),
point(178.9000000000001, 236.10000000000002),
pointFrom(0, 0),
pointFrom(178.9000000000001, 0),
pointFrom(178.9000000000001, 236.10000000000002),
],
startBinding: {
elementId: "KPrBI4g_v9qUB1XxYLgSz",
@ -2159,11 +2159,11 @@ describe("history", () => {
elements: [
newElementWith(h.elements[0] as ExcalidrawLinearElement, {
points: [
point(0, 0),
point(5, 5),
point(10, 10),
point(15, 15),
point(20, 20),
pointFrom(0, 0),
pointFrom(5, 5),
pointFrom(10, 10),
pointFrom(15, 15),
pointFrom(20, 20),
] as LocalPoint[],
}),
],

85
packages/excalidraw/tests/linearElementEditor.test.tsx
View file

@ -28,7 +28,7 @@ import { ROUNDNESS, VERTICAL_ALIGN } from "../constants";
import { vi } from "vitest";
import { arrayToMap } from "../utils";
import type { GlobalPoint } from "../../math";
import { pointCenter, point } from "../../math";
import { pointCenter, pointFrom } from "../../math";
const renderInteractiveScene = vi.spyOn(
InteractiveCanvas,
@ -57,8 +57,8 @@ describe("Test Linear Elements", () => {
interactiveCanvas = container.querySelector("canvas.interactive")!;
});
const p1 = point<GlobalPoint>(20, 20);
const p2 = point<GlobalPoint>(60, 20);
const p1 = pointFrom<GlobalPoint>(20, 20);
const p2 = pointFrom<GlobalPoint>(60, 20);
const midpoint = pointCenter<GlobalPoint>(p1, p2);
const delta = 50;
const mouse = new Pointer("mouse");
@ -75,7 +75,7 @@ describe("Test Linear Elements", () => {
height: 0,
type,
roughness,
points: [point(0, 0), point(p2[0] - p1[0], p2[1] - p1[1])],
points: [pointFrom(0, 0), pointFrom(p2[0] - p1[0], p2[1] - p1[1])],
roundness,
});
API.setElements([line]);
@ -99,9 +99,9 @@ describe("Test Linear Elements", () => {
type,
roughness,
points: [
point(0, 0),
point(p3[0], p3[1]),
point(p2[0] - p1[0], p2[1] - p1[1]),
pointFrom(0, 0),
pointFrom(p3[0], p3[1]),
pointFrom(p2[0] - p1[0], p2[1] - p1[1]),
],
roundness,
});
@ -161,7 +161,7 @@ describe("Test Linear Elements", () => {
expect(line.points.length).toEqual(2);
mouse.clickAt(midpoint[0], midpoint[1]);
drag(midpoint, point(midpoint[0] + 1, midpoint[1] + 1));
drag(midpoint, pointFrom(midpoint[0] + 1, midpoint[1] + 1));
expect(line.points.length).toEqual(2);
@ -169,7 +169,7 @@ describe("Test Linear Elements", () => {
expect(line.y).toBe(originalY);
expect(line.points.length).toEqual(2);
drag(midpoint, point(midpoint[0] + delta, midpoint[1] + delta));
drag(midpoint, pointFrom(midpoint[0] + delta, midpoint[1] + delta));
expect(line.x).toBe(originalX);
expect(line.y).toBe(originalY);
expect(line.points.length).toEqual(3);
@ -184,7 +184,7 @@ describe("Test Linear Elements", () => {
expect((h.elements[0] as ExcalidrawLinearElement).points.length).toEqual(2);
// drag line from midpoint
drag(midpoint, point(midpoint[0] + delta, midpoint[1] + delta));
drag(midpoint, pointFrom(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);
@ -248,7 +248,7 @@ describe("Test Linear Elements", () => {
mouse.clickAt(midpoint[0], midpoint[1]);
expect(line.points.length).toEqual(2);
drag(midpoint, point(midpoint[0] + 1, midpoint[1] + 1));
drag(midpoint, pointFrom(midpoint[0] + 1, midpoint[1] + 1));
expect(line.x).toBe(originalX);
expect(line.y).toBe(originalY);
expect(line.points.length).toEqual(3);
@ -261,7 +261,7 @@ describe("Test Linear Elements", () => {
enterLineEditingMode(line);
// drag line from midpoint
drag(midpoint, point(midpoint[0] + delta, midpoint[1] + delta));
drag(midpoint, pointFrom(midpoint[0] + delta, midpoint[1] + delta));
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`12`,
);
@ -356,7 +356,7 @@ describe("Test Linear Elements", () => {
const startPoint = pointCenter(points[0], midPoints[0]!);
const deltaX = 50;
const deltaY = 20;
const endPoint = point<GlobalPoint>(
const endPoint = pointFrom<GlobalPoint>(
startPoint[0] + deltaX,
startPoint[1] + deltaY,
);
@ -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<GlobalPoint>(55, 45);
const lastSegmentMidpoint = point<GlobalPoint>(75, 40);
const firstSegmentMidpoint = pointFrom<GlobalPoint>(55, 45);
const lastSegmentMidpoint = pointFrom<GlobalPoint>(75, 40);
let line: ExcalidrawLinearElement;
@ -416,7 +416,7 @@ describe("Test Linear Elements", () => {
// drag line via first segment midpoint
drag(
firstSegmentMidpoint,
point(
pointFrom(
firstSegmentMidpoint[0] + delta,
firstSegmentMidpoint[1] + delta,
),
@ -426,7 +426,10 @@ describe("Test Linear Elements", () => {
// drag line from last segment midpoint
drag(
lastSegmentMidpoint,
point(lastSegmentMidpoint[0] + delta, lastSegmentMidpoint[1] + delta),
pointFrom(
lastSegmentMidpoint[0] + delta,
lastSegmentMidpoint[1] + delta,
),
);
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
@ -475,10 +478,10 @@ describe("Test Linear Elements", () => {
h.state,
);
const hitCoords = point<GlobalPoint>(points[0][0], points[0][1]);
const hitCoords = pointFrom<GlobalPoint>(points[0][0], points[0][1]);
// Drag from first point
drag(hitCoords, point(hitCoords[0] - delta, hitCoords[1] - delta));
drag(hitCoords, pointFrom(hitCoords[0] - delta, hitCoords[1] - delta));
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`12`,
@ -516,10 +519,10 @@ describe("Test Linear Elements", () => {
h.state,
);
const hitCoords = point<GlobalPoint>(points[0][0], points[0][1]);
const hitCoords = pointFrom<GlobalPoint>(points[0][0], points[0][1]);
// Drag from first point
drag(hitCoords, point(hitCoords[0] + delta, hitCoords[1] + delta));
drag(hitCoords, pointFrom(hitCoords[0] + delta, hitCoords[1] + delta));
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`12`,
@ -556,7 +559,7 @@ describe("Test Linear Elements", () => {
// dragging line from last segment midpoint
drag(
lastSegmentMidpoint,
point(lastSegmentMidpoint[0] + 50, lastSegmentMidpoint[1] + 50),
pointFrom(lastSegmentMidpoint[0] + 50, lastSegmentMidpoint[1] + 50),
);
expect(line.points.length).toEqual(4);
@ -589,11 +592,11 @@ 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<GlobalPoint>(
const firstSegmentMidpoint = pointFrom<GlobalPoint>(
55.9697848965255,
47.442326230998205,
);
const lastSegmentMidpoint = point<GlobalPoint>(
const lastSegmentMidpoint = pointFrom<GlobalPoint>(
76.08587175006699,
43.294165939653226,
);
@ -612,7 +615,7 @@ describe("Test Linear Elements", () => {
// drag line from first segment midpoint
drag(
firstSegmentMidpoint,
point(
pointFrom(
firstSegmentMidpoint[0] + delta,
firstSegmentMidpoint[1] + delta,
),
@ -622,7 +625,10 @@ describe("Test Linear Elements", () => {
// drag line from last segment midpoint
drag(
lastSegmentMidpoint,
point(lastSegmentMidpoint[0] + delta, lastSegmentMidpoint[1] + delta),
pointFrom(
lastSegmentMidpoint[0] + delta,
lastSegmentMidpoint[1] + delta,
),
);
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`16`,
@ -669,10 +675,10 @@ describe("Test Linear Elements", () => {
h.state,
);
const hitCoords = point<GlobalPoint>(points[0][0], points[0][1]);
const hitCoords = pointFrom<GlobalPoint>(points[0][0], points[0][1]);
// Drag from first point
drag(hitCoords, point(hitCoords[0] - delta, hitCoords[1] - delta));
drag(hitCoords, pointFrom(hitCoords[0] - delta, hitCoords[1] - delta));
const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
line,
@ -717,10 +723,10 @@ describe("Test Linear Elements", () => {
h.state,
);
const hitCoords = point<GlobalPoint>(points[0][0], points[0][1]);
const hitCoords = pointFrom<GlobalPoint>(points[0][0], points[0][1]);
// Drag from first point
drag(hitCoords, point(hitCoords[0] + delta, hitCoords[1] + delta));
drag(hitCoords, pointFrom(hitCoords[0] + delta, hitCoords[1] + delta));
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`12`,
@ -751,7 +757,10 @@ describe("Test Linear Elements", () => {
drag(
lastSegmentMidpoint,
point(lastSegmentMidpoint[0] + delta, lastSegmentMidpoint[1] + delta),
pointFrom(
lastSegmentMidpoint[0] + delta,
lastSegmentMidpoint[1] + delta,
),
);
expect(line.points.length).toEqual(4);
@ -811,8 +820,8 @@ describe("Test Linear Elements", () => {
API.setSelectedElements([line]);
enterLineEditingMode(line, true);
drag(
point(line.points[0][0] + line.x, line.points[0][1] + line.y),
point(
pointFrom(line.points[0][0] + line.x, line.points[0][1] + line.y),
pointFrom(
dragEndPositionOffset[0] + line.x,
dragEndPositionOffset[1] + line.y,
),
@ -927,14 +936,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<GlobalPoint>(
const firstSegmentMidpoint = pointFrom<GlobalPoint>(
55.9697848965255,
47.442326230998205,
);
// drag line from first segment midpoint
drag(
firstSegmentMidpoint,
point(
pointFrom(
firstSegmentMidpoint[0] + delta,
firstSegmentMidpoint[1] + delta,
),
@ -1151,7 +1160,7 @@ describe("Test Linear Elements", () => {
);
// Drag from last point
drag(points[1], point(points[1][0] + 300, points[1][1]));
drag(points[1], pointFrom(points[1][0] + 300, points[1][1]));
expect({ width: container.width, height: container.height })
.toMatchInlineSnapshot(`
@ -1350,11 +1359,11 @@ describe("Test Linear Elements", () => {
[
{
index: 0,
point: point(line.points[0][0] + 10, line.points[0][1] + 10),
point: pointFrom(line.points[0][0] + 10, line.points[0][1] + 10),
},
{
index: line.points.length - 1,
point: point(
point: pointFrom(
line.points[line.points.length - 1][0] - 10,
line.points[line.points.length - 1][1] - 10,
),

65
packages/excalidraw/tests/resize.test.tsx
View file

@ -17,7 +17,7 @@ import { isLinearElement } from "../element/typeChecks";
import { LinearElementEditor } from "../element/linearElementEditor";
import { arrayToMap } from "../utils";
import type { LocalPoint } from "../../math";
import { point } from "../../math";
import { pointFrom } from "../../math";
ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
@ -220,12 +220,17 @@ describe("generic element", () => {
describe.each(["line", "freedraw"] as const)("%s element", (type) => {
const points: Record<typeof type, LocalPoint[]> = {
line: [point(0, 0), point(60, -20), point(20, 40), point(-40, 0)],
line: [
pointFrom(0, 0),
pointFrom(60, -20),
pointFrom(20, 40),
pointFrom(-40, 0),
],
freedraw: [
point(0, 0),
point(-2.474600807561444, 41.021700699972),
point(3.6627956000014024, 47.84174560617245),
point(40.495224145598115, 47.15909710753482),
pointFrom(0, 0),
pointFrom(-2.474600807561444, 41.021700699972),
pointFrom(3.6627956000014024, 47.84174560617245),
pointFrom(40.495224145598115, 47.15909710753482),
],
};
@ -293,11 +298,11 @@ describe("arrow element", () => {
it("resizes with a label", async () => {
const arrow = UI.createElement("arrow", {
points: [
point(0, 0),
point(40, 140),
point(80, 60), // label's anchor
point(180, 20),
point(200, 120),
pointFrom(0, 0),
pointFrom(40, 140),
pointFrom(80, 60), // label's anchor
pointFrom(180, 20),
pointFrom(200, 120),
],
});
const label = await UI.editText(arrow, "Hello");
@ -747,24 +752,24 @@ describe("multiple selection", () => {
x: 60,
y: 40,
points: [
point(0, 0),
point(-40, 40),
point(-60, 0),
point(0, -40),
point(40, 20),
point(0, 40),
pointFrom(0, 0),
pointFrom(-40, 40),
pointFrom(-60, 0),
pointFrom(0, -40),
pointFrom(40, 20),
pointFrom(0, 40),
],
});
const freedraw = UI.createElement("freedraw", {
x: 63.56072661326618,
y: 100,
points: [
point(0, 0),
point(-43.56072661326618, 18.15048126846341),
point(-43.56072661326618, 29.041198460587566),
point(-38.115368017204105, 42.652452795512204),
point(-19.964886748740696, 66.24829266003775),
point(19.056612930986716, 77.1390098521619),
pointFrom(0, 0),
pointFrom(-43.56072661326618, 18.15048126846341),
pointFrom(-43.56072661326618, 29.041198460587566),
pointFrom(-38.115368017204105, 42.652452795512204),
pointFrom(-19.964886748740696, 66.24829266003775),
pointFrom(19.056612930986716, 77.1390098521619),
],
});
@ -1101,13 +1106,13 @@ describe("multiple selection", () => {
x: 60,
y: 0,
points: [
point(0, 0),
point(-40, 40),
point(-20, 60),
point(20, 20),
point(40, 40),
point(-20, 100),
point(-60, 60),
pointFrom(0, 0),
pointFrom(-40, 40),
pointFrom(-20, 60),
pointFrom(20, 20),
pointFrom(40, 40),
pointFrom(-20, 100),
pointFrom(-60, 60),
],
});

47
packages/excalidraw/visualdebug.ts
View file

@ -1,4 +1,9 @@
import { isLineSegment, lineSegment, point, type GlobalPoint } from "../math";
import {
isLineSegment,
lineSegment,
pointFrom,
type GlobalPoint,
} from "../math";
import type { LineSegment } from "../utils";
import type { BoundingBox, Bounds } from "./element/bounds";
import { isBounds } from "./element/typeChecks";
@ -52,8 +57,8 @@ export const debugDrawPoint = (
debugDrawLine(
lineSegment(
point<GlobalPoint>(p[0] + xOffset - 10, p[1] + yOffset - 10),
point<GlobalPoint>(p[0] + xOffset + 10, p[1] + yOffset + 10),
pointFrom<GlobalPoint>(p[0] + xOffset - 10, p[1] + yOffset - 10),
pointFrom<GlobalPoint>(p[0] + xOffset + 10, p[1] + yOffset + 10),
),
{
color: opts?.color ?? "cyan",
@ -62,8 +67,8 @@ export const debugDrawPoint = (
);
debugDrawLine(
lineSegment(
point<GlobalPoint>(p[0] + xOffset - 10, p[1] + yOffset + 10),
point<GlobalPoint>(p[0] + xOffset + 10, p[1] + yOffset - 10),
pointFrom<GlobalPoint>(p[0] + xOffset - 10, p[1] + yOffset + 10),
pointFrom<GlobalPoint>(p[0] + xOffset + 10, p[1] + yOffset - 10),
),
{
color: opts?.color ?? "cyan",
@ -83,20 +88,20 @@ export const debugDrawBoundingBox = (
debugDrawLine(
[
lineSegment(
point<GlobalPoint>(bbox.minX, bbox.minY),
point<GlobalPoint>(bbox.maxX, bbox.minY),
pointFrom<GlobalPoint>(bbox.minX, bbox.minY),
pointFrom<GlobalPoint>(bbox.maxX, bbox.minY),
),
lineSegment(
point<GlobalPoint>(bbox.maxX, bbox.minY),
point<GlobalPoint>(bbox.maxX, bbox.maxY),
pointFrom<GlobalPoint>(bbox.maxX, bbox.minY),
pointFrom<GlobalPoint>(bbox.maxX, bbox.maxY),
),
lineSegment(
point<GlobalPoint>(bbox.maxX, bbox.maxY),
point<GlobalPoint>(bbox.minX, bbox.maxY),
pointFrom<GlobalPoint>(bbox.maxX, bbox.maxY),
pointFrom<GlobalPoint>(bbox.minX, bbox.maxY),
),
lineSegment(
point<GlobalPoint>(bbox.minX, bbox.maxY),
point<GlobalPoint>(bbox.minX, bbox.minY),
pointFrom<GlobalPoint>(bbox.minX, bbox.maxY),
pointFrom<GlobalPoint>(bbox.minX, bbox.minY),
),
],
{
@ -118,20 +123,20 @@ export const debugDrawBounds = (
debugDrawLine(
[
lineSegment(
point<GlobalPoint>(bbox[0], bbox[1]),
point<GlobalPoint>(bbox[2], bbox[1]),
pointFrom<GlobalPoint>(bbox[0], bbox[1]),
pointFrom<GlobalPoint>(bbox[2], bbox[1]),
),
lineSegment(
point<GlobalPoint>(bbox[2], bbox[1]),
point<GlobalPoint>(bbox[2], bbox[3]),
pointFrom<GlobalPoint>(bbox[2], bbox[1]),
pointFrom<GlobalPoint>(bbox[2], bbox[3]),
),
lineSegment(
point<GlobalPoint>(bbox[2], bbox[3]),
point<GlobalPoint>(bbox[0], bbox[3]),
pointFrom<GlobalPoint>(bbox[2], bbox[3]),
pointFrom<GlobalPoint>(bbox[0], bbox[3]),
),
lineSegment(
point<GlobalPoint>(bbox[0], bbox[3]),
point<GlobalPoint>(bbox[0], bbox[1]),
pointFrom<GlobalPoint>(bbox[0], bbox[3]),
pointFrom<GlobalPoint>(bbox[0], bbox[1]),
),
],
{

8
packages/math/arc.test.ts
View file

@ -1,5 +1,5 @@
import { isPointOnSymmetricArc } from "./arc";
import { point } from "./point";
import { pointFrom } from "./point";
describe("point on arc", () => {
it("should detect point on simple arc", () => {
@ -10,7 +10,7 @@ describe("point on arc", () => {
startAngle: -Math.PI / 4,
endAngle: Math.PI / 4,
},
point(0.92291667, 0.385),
pointFrom(0.92291667, 0.385),
),
).toBe(true);
});
@ -22,7 +22,7 @@ describe("point on arc", () => {
startAngle: -Math.PI / 4,
endAngle: Math.PI / 4,
},
point(-0.92291667, 0.385),
pointFrom(-0.92291667, 0.385),
),
).toBe(false);
});
@ -34,7 +34,7 @@ describe("point on arc", () => {
startAngle: -Math.PI / 4,
endAngle: Math.PI / 4,
},
point(-0.5, 0.5),
pointFrom(-0.5, 0.5),
),
).toBe(false);
});

22
packages/math/curve.ts
View file

@ -1,4 +1,4 @@
import { point, pointRotateRads } from "./point";
import { pointFrom, pointRotateRads } from "./point";
import type { Curve, GlobalPoint, LocalPoint, Radians } from "./types";
/**
@ -43,10 +43,10 @@ export function curveToBezier<Point extends LocalPoint | GlobalPoint>(
const out: Point[] = [];
if (len === 3) {
out.push(
point(pointsIn[0][0], pointsIn[0][1]), // Points need to be cloned
point(pointsIn[1][0], pointsIn[1][1]), // Points need to be cloned
point(pointsIn[2][0], pointsIn[2][1]), // Points need to be cloned
point(pointsIn[2][0], pointsIn[2][1]), // Points need to be cloned
pointFrom(pointsIn[0][0], pointsIn[0][1]), // Points need to be cloned
pointFrom(pointsIn[1][0], pointsIn[1][1]), // Points need to be cloned
pointFrom(pointsIn[2][0], pointsIn[2][1]), // Points need to be cloned
pointFrom(pointsIn[2][0], pointsIn[2][1]), // Points need to be cloned
);
} else {
const points: Point[] = [];
@ -59,19 +59,19 @@ export function curveToBezier<Point extends LocalPoint | GlobalPoint>(
}
const b: Point[] = [];
const s = 1 - curveTightness;
out.push(point(points[0][0], points[0][1]));
out.push(pointFrom(points[0][0], points[0][1]));
for (let i = 1; i + 2 < points.length; i++) {
const cachedVertArray = points[i];
b[0] = point(cachedVertArray[0], cachedVertArray[1]);
b[1] = point(
b[0] = pointFrom(cachedVertArray[0], cachedVertArray[1]);
b[1] = pointFrom(
cachedVertArray[0] + (s * points[i + 1][0] - s * points[i - 1][0]) / 6,
cachedVertArray[1] + (s * points[i + 1][1] - s * points[i - 1][1]) / 6,
);
b[2] = point(
b[2] = pointFrom(
points[i + 1][0] + (s * points[i][0] - s * points[i + 2][0]) / 6,
points[i + 1][1] + (s * points[i][1] - s * points[i + 2][1]) / 6,
);
b[3] = point(points[i + 1][0], points[i + 1][1]);
b[3] = pointFrom(points[i + 1][0], points[i + 1][1]);
out.push(b[1], b[2], b[3]);
}
}
@ -102,7 +102,7 @@ export const cubicBezierPoint = <Point extends LocalPoint | GlobalPoint>(
3 * (1 - t) * Math.pow(t, 2) * p2[1] +
Math.pow(t, 3) * p3[1];
return point(x, y);
return pointFrom(x, y);
};
/**

10
packages/math/point.test.ts
View file

@ -1,4 +1,4 @@
import { point, pointRotateRads } from "./point";
import { pointFrom, pointRotateRads } from "./point";
import type { Radians } from "./types";
describe("rotate", () => {
@ -9,14 +9,14 @@ describe("rotate", () => {
const y2 = 30;
const angle = (Math.PI / 2) as Radians;
const [rotatedX, rotatedY] = pointRotateRads(
point(x1, y1),
point(x2, y2),
pointFrom(x1, y1),
pointFrom(x2, y2),
angle,
);
expect([rotatedX, rotatedY]).toEqual([30, 20]);
const res2 = pointRotateRads(
point(rotatedX, rotatedY),
point(x2, y2),
pointFrom(rotatedX, rotatedY),
pointFrom(x2, y2),
-angle as Radians,
);
expect(res2).toEqual([x1, x2]);

14
packages/math/point.ts
View file

@ -16,7 +16,7 @@ import { vectorFromPoint, vectorScale } from "./vector";
* @param y The Y coordinate
* @returns The branded and created point
*/
export function point<Point extends GlobalPoint | LocalPoint>(
export function pointFrom<Point extends GlobalPoint | LocalPoint>(
x: number,
y: number,
): Point {
@ -33,7 +33,7 @@ export function pointFromArray<Point extends GlobalPoint | LocalPoint>(
numberArray: number[],
): Point | undefined {
return numberArray.length === 2
? point<Point>(numberArray[0], numberArray[1])
? pointFrom<Point>(numberArray[0], numberArray[1])
: undefined;
}
@ -107,7 +107,7 @@ export function pointRotateRads<Point extends GlobalPoint | LocalPoint>(
[cx, cy]: Point,
angle: Radians,
): Point {
return point(
return pointFrom(
(x - cx) * Math.cos(angle) - (y - cy) * Math.sin(angle) + cx,
(x - cx) * Math.sin(angle) + (y - cy) * Math.cos(angle) + cy,
);
@ -146,7 +146,7 @@ export function pointTranslate<
From extends GlobalPoint | LocalPoint,
To extends GlobalPoint | LocalPoint,
>(p: From, v: Vector = [0, 0] as Vector): To {
return point(p[0] + v[0], p[1] + v[1]);
return pointFrom(p[0] + v[0], p[1] + v[1]);
}
/**
@ -157,7 +157,7 @@ export function pointTranslate<
* @returns The middle point
*/
export function pointCenter<P extends LocalPoint | GlobalPoint>(a: P, b: P): P {
return point((a[0] + b[0]) / 2, (a[1] + b[1]) / 2);
return pointFrom((a[0] + b[0]) / 2, (a[1] + b[1]) / 2);
}
/**
@ -172,7 +172,7 @@ export function pointAdd<Point extends LocalPoint | GlobalPoint>(
a: Point,
b: Point,
): Point {
return point(a[0] + b[0], a[1] + b[1]);
return pointFrom(a[0] + b[0], a[1] + b[1]);
}
/**
@ -187,7 +187,7 @@ export function pointSubtract<Point extends LocalPoint | GlobalPoint>(
a: Point,
b: Point,
): Point {
return point(a[0] - b[0], a[1] - b[1]);
return pointFrom(a[0] - b[0], a[1] - b[1]);
}
/**

66
packages/utils/collision.test.ts
View file

@ -4,7 +4,7 @@ import {
degreesToRadians,
lineSegment,
lineSegmentRotate,
point,
pointFrom,
pointRotateDegs,
} from "../math";
import { pointOnCurve, pointOnPolyline } from "./collision";
@ -12,21 +12,21 @@ import type { Polyline } from "./geometry/shape";
describe("point and curve", () => {
const c: Curve<GlobalPoint> = curve(
point(1.4, 1.65),
point(1.9, 7.9),
point(5.9, 1.65),
point(6.44, 4.84),
pointFrom(1.4, 1.65),
pointFrom(1.9, 7.9),
pointFrom(5.9, 1.65),
pointFrom(6.44, 4.84),
);
it("point on curve", () => {
expect(pointOnCurve(c[0], c, 10e-5)).toBe(true);
expect(pointOnCurve(c[3], c, 10e-5)).toBe(true);
expect(pointOnCurve(point(2, 4), c, 0.1)).toBe(true);
expect(pointOnCurve(point(4, 4.4), c, 0.1)).toBe(true);
expect(pointOnCurve(point(5.6, 3.85), c, 0.1)).toBe(true);
expect(pointOnCurve(pointFrom(2, 4), c, 0.1)).toBe(true);
expect(pointOnCurve(pointFrom(4, 4.4), c, 0.1)).toBe(true);
expect(pointOnCurve(pointFrom(5.6, 3.85), c, 0.1)).toBe(true);
expect(pointOnCurve(point(5.6, 4), c, 0.1)).toBe(false);
expect(pointOnCurve(pointFrom(5.6, 4), c, 0.1)).toBe(false);
expect(pointOnCurve(c[1], c, 0.1)).toBe(false);
expect(pointOnCurve(c[2], c, 0.1)).toBe(false);
});
@ -34,52 +34,52 @@ describe("point and curve", () => {
describe("point and polylines", () => {
const polyline: Polyline<GlobalPoint> = [
lineSegment(point(1, 0), point(1, 2)),
lineSegment(point(1, 2), point(2, 2)),
lineSegment(point(2, 2), point(2, 1)),
lineSegment(point(2, 1), point(3, 1)),
lineSegment(pointFrom(1, 0), pointFrom(1, 2)),
lineSegment(pointFrom(1, 2), pointFrom(2, 2)),
lineSegment(pointFrom(2, 2), pointFrom(2, 1)),
lineSegment(pointFrom(2, 1), pointFrom(3, 1)),
];
it("point on the line", () => {
expect(pointOnPolyline(point(1, 0), polyline)).toBe(true);
expect(pointOnPolyline(point(1, 2), polyline)).toBe(true);
expect(pointOnPolyline(point(2, 2), polyline)).toBe(true);
expect(pointOnPolyline(point(2, 1), polyline)).toBe(true);
expect(pointOnPolyline(point(3, 1), polyline)).toBe(true);
expect(pointOnPolyline(pointFrom(1, 0), polyline)).toBe(true);
expect(pointOnPolyline(pointFrom(1, 2), polyline)).toBe(true);
expect(pointOnPolyline(pointFrom(2, 2), polyline)).toBe(true);
expect(pointOnPolyline(pointFrom(2, 1), polyline)).toBe(true);
expect(pointOnPolyline(pointFrom(3, 1), polyline)).toBe(true);
expect(pointOnPolyline(point(1, 1), polyline)).toBe(true);
expect(pointOnPolyline(point(2, 1.5), polyline)).toBe(true);
expect(pointOnPolyline(point(2.5, 1), polyline)).toBe(true);
expect(pointOnPolyline(pointFrom(1, 1), polyline)).toBe(true);
expect(pointOnPolyline(pointFrom(2, 1.5), polyline)).toBe(true);
expect(pointOnPolyline(pointFrom(2.5, 1), polyline)).toBe(true);
expect(pointOnPolyline(point(0, 1), polyline)).toBe(false);
expect(pointOnPolyline(point(2.1, 1.5), polyline)).toBe(false);
expect(pointOnPolyline(pointFrom(0, 1), polyline)).toBe(false);
expect(pointOnPolyline(pointFrom(2.1, 1.5), polyline)).toBe(false);
});
it("point on the line with rotation", () => {
const truePoints = [
point(1, 0),
point(1, 2),
point(2, 2),
point(2, 1),
point(3, 1),
pointFrom(1, 0),
pointFrom(1, 2),
pointFrom(2, 2),
pointFrom(2, 1),
pointFrom(3, 1),
];
truePoints.forEach((p) => {
const rotation = (Math.random() * 360) as Degrees;
const rotatedPoint = pointRotateDegs(p, point(0, 0), rotation);
const rotatedPoint = pointRotateDegs(p, pointFrom(0, 0), rotation);
const rotatedPolyline = polyline.map((line) =>
lineSegmentRotate(line, degreesToRadians(rotation), point(0, 0)),
lineSegmentRotate(line, degreesToRadians(rotation), pointFrom(0, 0)),
);
expect(pointOnPolyline(rotatedPoint, rotatedPolyline)).toBe(true);
});
const falsePoints = [point(0, 1), point(2.1, 1.5)];
const falsePoints = [pointFrom(0, 1), pointFrom(2.1, 1.5)];
falsePoints.forEach((p) => {
const rotation = (Math.random() * 360) as Degrees;
const rotatedPoint = pointRotateDegs(p, point(0, 0), rotation);
const rotatedPoint = pointRotateDegs(p, pointFrom(0, 0), rotation);
const rotatedPolyline = polyline.map((line) =>
lineSegmentRotate(line, degreesToRadians(rotation), point(0, 0)),
lineSegmentRotate(line, degreesToRadians(rotation), pointFrom(0, 0)),
);
expect(pointOnPolyline(rotatedPoint, rotatedPolyline)).toBe(false);
});

4
packages/utils/collision.ts
View file

@ -7,7 +7,7 @@ import {
import type { Curve } from "../math";
import {
lineSegment,
point,
pointFrom,
polygonIncludesPoint,
pointOnLineSegment,
pointOnPolygon,
@ -110,7 +110,7 @@ const polyLineFromCurve = <Point extends LocalPoint | GlobalPoint>(
for (let i = 0; i < segments; i++) {
t += increment;
if (t <= 1) {
const nextPoint: Point = point(equation(t, 0), equation(t, 1));
const nextPoint: Point = pointFrom(equation(t, 0), equation(t, 1));
lineSegments.push(lineSegment(startingPoint, nextPoint));
startingPoint = nextPoint;
}

124
packages/utils/geometry/geometry.test.ts
View file

@ -1,6 +1,6 @@
import type { GlobalPoint, LineSegment, Polygon, Radians } from "../../math";
import {
point,
pointFrom,
lineSegment,
polygon,
pointOnLineSegment,
@ -23,93 +23,127 @@ describe("point and line", () => {
// expect(pointRightofLine(point(2, 1), l)).toBe(true);
// });
const s: LineSegment<GlobalPoint> = lineSegment(point(1, 0), point(1, 2));
const s: LineSegment<GlobalPoint> = lineSegment(
pointFrom(1, 0),
pointFrom(1, 2),
);
it("point on the line", () => {
expect(pointOnLineSegment(point(0, 1), s)).toBe(false);
expect(pointOnLineSegment(point(1, 1), s, 0)).toBe(true);
expect(pointOnLineSegment(point(2, 1), s)).toBe(false);
expect(pointOnLineSegment(pointFrom(0, 1), s)).toBe(false);
expect(pointOnLineSegment(pointFrom(1, 1), s, 0)).toBe(true);
expect(pointOnLineSegment(pointFrom(2, 1), s)).toBe(false);
});
});
describe("point and polygon", () => {
const poly: Polygon<GlobalPoint> = polygon(
point(10, 10),
point(50, 10),
point(50, 50),
point(10, 50),
pointFrom(10, 10),
pointFrom(50, 10),
pointFrom(50, 50),
pointFrom(10, 50),
);
it("point on polygon", () => {
expect(pointOnPolygon(point(30, 10), poly)).toBe(true);
expect(pointOnPolygon(point(50, 30), poly)).toBe(true);
expect(pointOnPolygon(point(30, 50), poly)).toBe(true);
expect(pointOnPolygon(point(10, 30), poly)).toBe(true);
expect(pointOnPolygon(point(30, 30), poly)).toBe(false);
expect(pointOnPolygon(point(30, 70), poly)).toBe(false);
expect(pointOnPolygon(pointFrom(30, 10), poly)).toBe(true);
expect(pointOnPolygon(pointFrom(50, 30), poly)).toBe(true);
expect(pointOnPolygon(pointFrom(30, 50), poly)).toBe(true);
expect(pointOnPolygon(pointFrom(10, 30), poly)).toBe(true);
expect(pointOnPolygon(pointFrom(30, 30), poly)).toBe(false);
expect(pointOnPolygon(pointFrom(30, 70), poly)).toBe(false);
});
it("point in polygon", () => {
const poly: Polygon<GlobalPoint> = polygon(
point(0, 0),
point(2, 0),
point(2, 2),
point(0, 2),
pointFrom(0, 0),
pointFrom(2, 0),
pointFrom(2, 2),
pointFrom(0, 2),
);
expect(polygonIncludesPoint(point(1, 1), poly)).toBe(true);
expect(polygonIncludesPoint(point(3, 3), poly)).toBe(false);
expect(polygonIncludesPoint(pointFrom(1, 1), poly)).toBe(true);
expect(polygonIncludesPoint(pointFrom(3, 3), poly)).toBe(false);
});
});
describe("point and ellipse", () => {
const ellipse: Ellipse<GlobalPoint> = {
center: point(0, 0),
center: pointFrom(0, 0),
angle: 0 as Radians,
halfWidth: 2,
halfHeight: 1,
};
it("point on ellipse", () => {
[point(0, 1), point(0, -1), point(2, 0), point(-2, 0)].forEach((p) => {
[
pointFrom(0, 1),
pointFrom(0, -1),
pointFrom(2, 0),
pointFrom(-2, 0),
].forEach((p) => {
expect(pointOnEllipse(p, ellipse)).toBe(true);
});
expect(pointOnEllipse(point(-1.4, 0.7), ellipse, 0.1)).toBe(true);
expect(pointOnEllipse(point(-1.4, 0.71), ellipse, 0.01)).toBe(true);
expect(pointOnEllipse(pointFrom(-1.4, 0.7), ellipse, 0.1)).toBe(true);
expect(pointOnEllipse(pointFrom(-1.4, 0.71), ellipse, 0.01)).toBe(true);
expect(pointOnEllipse(point(1.4, 0.7), ellipse, 0.1)).toBe(true);
expect(pointOnEllipse(point(1.4, 0.71), ellipse, 0.01)).toBe(true);
expect(pointOnEllipse(pointFrom(1.4, 0.7), ellipse, 0.1)).toBe(true);
expect(pointOnEllipse(pointFrom(1.4, 0.71), ellipse, 0.01)).toBe(true);
expect(pointOnEllipse(point(1, -0.86), ellipse, 0.1)).toBe(true);
expect(pointOnEllipse(point(1, -0.86), ellipse, 0.01)).toBe(true);
expect(pointOnEllipse(pointFrom(1, -0.86), ellipse, 0.1)).toBe(true);
expect(pointOnEllipse(pointFrom(1, -0.86), ellipse, 0.01)).toBe(true);
expect(pointOnEllipse(point(-1, -0.86), ellipse, 0.1)).toBe(true);
expect(pointOnEllipse(point(-1, -0.86), ellipse, 0.01)).toBe(true);
expect(pointOnEllipse(pointFrom(-1, -0.86), ellipse, 0.1)).toBe(true);
expect(pointOnEllipse(pointFrom(-1, -0.86), ellipse, 0.01)).toBe(true);
expect(pointOnEllipse(point(-1, 0.8), ellipse)).toBe(false);
expect(pointOnEllipse(point(1, -0.8), ellipse)).toBe(false);
expect(pointOnEllipse(pointFrom(-1, 0.8), ellipse)).toBe(false);
expect(pointOnEllipse(pointFrom(1, -0.8), ellipse)).toBe(false);
});
it("point in ellipse", () => {
[point(0, 1), point(0, -1), point(2, 0), point(-2, 0)].forEach((p) => {
[
pointFrom(0, 1),
pointFrom(0, -1),
pointFrom(2, 0),
pointFrom(-2, 0),
].forEach((p) => {
expect(pointInEllipse(p, ellipse)).toBe(true);
});
expect(pointInEllipse(point(-1, 0.8), ellipse)).toBe(true);
expect(pointInEllipse(point(1, -0.8), ellipse)).toBe(true);
expect(pointInEllipse(pointFrom(-1, 0.8), ellipse)).toBe(true);
expect(pointInEllipse(pointFrom(1, -0.8), ellipse)).toBe(true);
expect(pointInEllipse(point(-1, 1), ellipse)).toBe(false);
expect(pointInEllipse(point(-1.4, 0.8), ellipse)).toBe(false);
expect(pointInEllipse(pointFrom(-1, 1), ellipse)).toBe(false);
expect(pointInEllipse(pointFrom(-1.4, 0.8), ellipse)).toBe(false);
});
});
describe("line and line", () => {
const lineA: LineSegment<GlobalPoint> = lineSegment(point(1, 4), point(3, 4));
const lineB: LineSegment<GlobalPoint> = lineSegment(point(2, 1), point(2, 7));
const lineC: LineSegment<GlobalPoint> = lineSegment(point(1, 8), point(3, 8));
const lineD: LineSegment<GlobalPoint> = lineSegment(point(1, 8), point(3, 8));
const lineE: LineSegment<GlobalPoint> = lineSegment(point(1, 9), point(3, 9));
const lineF: LineSegment<GlobalPoint> = lineSegment(point(1, 2), point(3, 4));
const lineG: LineSegment<GlobalPoint> = lineSegment(point(0, 1), point(2, 3));
const lineA: LineSegment<GlobalPoint> = lineSegment(
pointFrom(1, 4),
pointFrom(3, 4),
);
const lineB: LineSegment<GlobalPoint> = lineSegment(
pointFrom(2, 1),
pointFrom(2, 7),
);
const lineC: LineSegment<GlobalPoint> = lineSegment(
pointFrom(1, 8),
pointFrom(3, 8),
);
const lineD: LineSegment<GlobalPoint> = lineSegment(
pointFrom(1, 8),
pointFrom(3, 8),
);
const lineE: LineSegment<GlobalPoint> = lineSegment(
pointFrom(1, 9),
pointFrom(3, 9),
);
const lineF: LineSegment<GlobalPoint> = lineSegment(
pointFrom(1, 2),
pointFrom(3, 4),
);
const lineG: LineSegment<GlobalPoint> = lineSegment(
pointFrom(0, 1),
pointFrom(2, 3),
);
it("intersection", () => {
expect(segmentsIntersectAt(lineA, lineB)).toEqual([2, 4]);

85
packages/utils/geometry/shape.ts
View file

@ -16,7 +16,7 @@ import type { Curve, LineSegment, Polygon, Radians } from "../../math";
import {
curve,
lineSegment,
point,
pointFrom,
pointDistance,
pointFromArray,
pointFromVector,
@ -118,23 +118,23 @@ export const getPolygonShape = <Point extends GlobalPoint | LocalPoint>(
const cx = x + width / 2;
const cy = y + height / 2;
const center: Point = point(cx, cy);
const center: Point = pointFrom(cx, cy);
let data: Polygon<Point>;
if (element.type === "diamond") {
data = polygon(
pointRotateRads(point(cx, y), center, angle),
pointRotateRads(point(x + width, cy), center, angle),
pointRotateRads(point(cx, y + height), center, angle),
pointRotateRads(point(x, cy), center, angle),
pointRotateRads(pointFrom(cx, y), center, angle),
pointRotateRads(pointFrom(x + width, cy), center, angle),
pointRotateRads(pointFrom(cx, y + height), center, angle),
pointRotateRads(pointFrom(x, cy), center, angle),
);
} else {
data = polygon(
pointRotateRads(point(x, y), center, angle),
pointRotateRads(point(x + width, y), center, angle),
pointRotateRads(point(x + width, y + height), center, angle),
pointRotateRads(point(x, y + height), center, angle),
pointRotateRads(pointFrom(x, y), center, angle),
pointRotateRads(pointFrom(x + width, y), center, angle),
pointRotateRads(pointFrom(x + width, y + height), center, angle),
pointRotateRads(pointFrom(x, y + height), center, angle),
);
}
@ -162,11 +162,11 @@ export const getSelectionBoxShape = <Point extends GlobalPoint | LocalPoint>(
y2 += padding;
//const angleInDegrees = angleToDegrees(element.angle);
const center = point(cx, cy);
const topLeft = pointRotateRads(point(x1, y1), center, element.angle);
const topRight = pointRotateRads(point(x2, y1), center, element.angle);
const bottomLeft = pointRotateRads(point(x1, y2), center, element.angle);
const bottomRight = pointRotateRads(point(x2, y2), center, element.angle);
const center = pointFrom(cx, cy);
const topLeft = pointRotateRads(pointFrom(x1, y1), center, element.angle);
const topRight = pointRotateRads(pointFrom(x2, y1), center, element.angle);
const bottomLeft = pointRotateRads(pointFrom(x1, y2), center, element.angle);
const bottomRight = pointRotateRads(pointFrom(x2, y2), center, element.angle);
return {
type: "polygon",
@ -183,7 +183,7 @@ export const getEllipseShape = <Point extends GlobalPoint | LocalPoint>(
return {
type: "ellipse",
data: {
center: point(x + width / 2, y + height / 2),
center: pointFrom(x + width / 2, y + height / 2),
angle,
halfWidth: width / 2,
halfHeight: height / 2,
@ -203,20 +203,20 @@ export const getCurvePathOps = (shape: Drawable): Op[] => {
// linear
export const getCurveShape = <Point extends GlobalPoint | LocalPoint>(
roughShape: Drawable,
startingPoint: Point = point(0, 0),
startingPoint: Point = pointFrom(0, 0),
angleInRadian: Radians,
center: Point,
): GeometricShape<Point> => {
const transform = (p: Point): Point =>
pointRotateRads(
point(p[0] + startingPoint[0], p[1] + startingPoint[1]),
pointFrom(p[0] + startingPoint[0], p[1] + startingPoint[1]),
center,
angleInRadian,
);
const ops = getCurvePathOps(roughShape);
const polycurve: Polycurve<Point> = [];
let p0 = point<Point>(0, 0);
let p0 = pointFrom<Point>(0, 0);
for (const op of ops) {
if (op.op === "move") {
@ -225,9 +225,9 @@ export const getCurveShape = <Point extends GlobalPoint | LocalPoint>(
p0 = transform(p);
}
if (op.op === "bcurveTo") {
const p1 = transform(point<Point>(op.data[0], op.data[1]));
const p2 = transform(point<Point>(op.data[2], op.data[3]));
const p3 = transform(point<Point>(op.data[4], op.data[5]));
const p1 = transform(pointFrom<Point>(op.data[0], op.data[1]));
const p2 = transform(pointFrom<Point>(op.data[2], op.data[3]));
const p3 = transform(pointFrom<Point>(op.data[4], op.data[5]));
polycurve.push(curve<Point>(p0, p1, p2, p3));
p0 = p3;
}
@ -288,13 +288,13 @@ export const getFreedrawShape = <Point extends GlobalPoint | LocalPoint>(
export const getClosedCurveShape = <Point extends GlobalPoint | LocalPoint>(
element: ExcalidrawLinearElement,
roughShape: Drawable,
startingPoint: Point = point<Point>(0, 0),
startingPoint: Point = pointFrom<Point>(0, 0),
angleInRadian: Radians,
center: Point,
): GeometricShape<Point> => {
const transform = (p: Point) =>
pointRotateRads(
point(p[0] + startingPoint[0], p[1] + startingPoint[1]),
pointFrom(p[0] + startingPoint[0], p[1] + startingPoint[1]),
center,
angleInRadian,
);
@ -316,17 +316,17 @@ export const getClosedCurveShape = <Point extends GlobalPoint | LocalPoint>(
if (operation.op === "move") {
odd = !odd;
if (odd) {
points.push(point(operation.data[0], operation.data[1]));
points.push(pointFrom(operation.data[0], operation.data[1]));
}
} else if (operation.op === "bcurveTo") {
if (odd) {
points.push(point(operation.data[0], operation.data[1]));
points.push(point(operation.data[2], operation.data[3]));
points.push(point(operation.data[4], operation.data[5]));
points.push(pointFrom(operation.data[0], operation.data[1]));
points.push(pointFrom(operation.data[2], operation.data[3]));
points.push(pointFrom(operation.data[4], operation.data[5]));
}
} else if (operation.op === "lineTo") {
if (odd) {
points.push(point(operation.data[0], operation.data[1]));
points.push(pointFrom(operation.data[0], operation.data[1]));
}
}
}
@ -364,27 +364,27 @@ export const segmentIntersectRectangleElement = <
element.x + element.width + gap,
element.y + element.height + gap,
];
const center = point(
const center = pointFrom(
(bounds[0] + bounds[2]) / 2,
(bounds[1] + bounds[3]) / 2,
);
return [
lineSegment(
pointRotateRads(point(bounds[0], bounds[1]), center, element.angle),
pointRotateRads(point(bounds[2], bounds[1]), center, element.angle),
pointRotateRads(pointFrom(bounds[0], bounds[1]), center, element.angle),
pointRotateRads(pointFrom(bounds[2], bounds[1]), center, element.angle),
),
lineSegment(
pointRotateRads(point(bounds[2], bounds[1]), center, element.angle),
pointRotateRads(point(bounds[2], bounds[3]), center, element.angle),
pointRotateRads(pointFrom(bounds[2], bounds[1]), center, element.angle),
pointRotateRads(pointFrom(bounds[2], bounds[3]), center, element.angle),
),
lineSegment(
pointRotateRads(point(bounds[2], bounds[3]), center, element.angle),
pointRotateRads(point(bounds[0], bounds[3]), center, element.angle),
pointRotateRads(pointFrom(bounds[2], bounds[3]), center, element.angle),
pointRotateRads(pointFrom(bounds[0], bounds[3]), center, element.angle),
),
lineSegment(
pointRotateRads(point(bounds[0], bounds[3]), center, element.angle),
pointRotateRads(point(bounds[0], bounds[1]), center, element.angle),
pointRotateRads(pointFrom(bounds[0], bounds[3]), center, element.angle),
pointRotateRads(pointFrom(bounds[0], bounds[1]), center, element.angle),
),
]
.map((s) => segmentsIntersectAt(segment, s))
@ -404,7 +404,7 @@ const distanceToEllipse = <Point extends LocalPoint | GlobalPoint>(
);
const [rotatedPointX, rotatedPointY] = pointRotateRads(
pointFromVector(translatedPoint),
point(0, 0),
pointFrom(0, 0),
-angle as Radians,
);
@ -442,7 +442,10 @@ const distanceToEllipse = <Point extends LocalPoint | GlobalPoint>(
b * ty * Math.sign(rotatedPointY),
];
return pointDistance(point(rotatedPointX, rotatedPointY), point(minX, minY));
return pointDistance(
pointFrom(rotatedPointX, rotatedPointY),
pointFrom(minX, minY),
);
};
export const pointOnEllipse = <Point extends LocalPoint | GlobalPoint>(
@ -464,7 +467,7 @@ export const pointInEllipse = <Point extends LocalPoint | GlobalPoint>(
);
const [rotatedPointX, rotatedPointY] = pointRotateRads(
pointFromVector(translatedPoint),
point(0, 0),
pointFrom(0, 0),
-angle as Radians,
);

20
packages/utils/withinBounds.ts
View file

@ -17,7 +17,7 @@ import { arrayToMap } from "../excalidraw/utils";
import type { LocalPoint } from "../math";
import {
rangeIncludesValue,
point,
pointFrom,
pointRotateRads,
rangeInclusive,
} from "../math";
@ -41,17 +41,17 @@ const getNonLinearElementRelativePoints = (
] => {
if (element.type === "diamond") {
return [
point(element.width / 2, 0),
point(element.width, element.height / 2),
point(element.width / 2, element.height),
point(0, element.height / 2),
pointFrom(element.width / 2, 0),
pointFrom(element.width, element.height / 2),
pointFrom(element.width / 2, element.height),
pointFrom(0, element.height / 2),
];
}
return [
point(0, 0),
point(0 + element.width, 0),
point(0 + element.width, element.height),
point(0, element.height),
pointFrom(0, 0),
pointFrom(0 + element.width, 0),
pointFrom(0 + element.width, element.height),
pointFrom(0, element.height),
];
};
@ -94,7 +94,7 @@ const getRotatedBBox = (element: Element): Bounds => {
const points = getElementRelativePoints(element);
const { cx, cy } = getMinMaxPoints(points);
const centerPoint = point<LocalPoint>(cx, cy);
const centerPoint = pointFrom<LocalPoint>(cx, cy);
const rotatedPoints = points.map((p) =>
pointRotateRads(p, centerPoint, element.angle),