mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
chore: Unify math types, utils and functions (#8389)
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
This commit is contained in:
Márk Tolmács
GitHub
parent
e3d1dee9d0
commit
f4dd23fc31
98 changed files with 4291 additions and 3661 deletions
|
|
@ -210,12 +210,6 @@ import {
|
|||
isElementCompletelyInViewport,
|
||||
isElementInViewport,
|
||||
} from "../element/sizeHelpers";
|
||||
import {
|
||||
distance2d,
|
||||
getCornerRadius,
|
||||
getGridPoint,
|
||||
isPathALoop,
|
||||
} from "../math";
|
||||
import {
|
||||
calculateScrollCenter,
|
||||
getElementsWithinSelection,
|
||||
|
|
@ -230,7 +224,13 @@ import type {
|
|||
ScrollBars,
|
||||
} from "../scene/types";
|
||||
import { getStateForZoom } from "../scene/zoom";
|
||||
import { findShapeByKey, getBoundTextShape, getElementShape } from "../shapes";
|
||||
import {
|
||||
findShapeByKey,
|
||||
getBoundTextShape,
|
||||
getCornerRadius,
|
||||
getElementShape,
|
||||
isPathALoop,
|
||||
} from "../shapes";
|
||||
import { getSelectionBoxShape } from "../../utils/geometry/shape";
|
||||
import { isPointInShape } from "../../utils/collision";
|
||||
import type {
|
||||
|
|
@ -386,6 +386,7 @@ import {
|
|||
getReferenceSnapPoints,
|
||||
SnapCache,
|
||||
isGridModeEnabled,
|
||||
getGridPoint,
|
||||
} from "../snapping";
|
||||
import { actionWrapTextInContainer } from "../actions/actionBoundText";
|
||||
import BraveMeasureTextError from "./BraveMeasureTextError";
|
||||
|
|
@ -439,6 +440,8 @@ import {
|
|||
FlowChartNavigator,
|
||||
getLinkDirectionFromKey,
|
||||
} from "../element/flowchart";
|
||||
import type { LocalPoint, Radians } from "../../math";
|
||||
import { point, pointDistance, vector } from "../../math";
|
||||
|
||||
const AppContext = React.createContext<AppClassProperties>(null!);
|
||||
const AppPropsContext = React.createContext<AppProps>(null!);
|
||||
|
|
@ -4844,7 +4847,7 @@ class App extends React.Component<AppProps, AppState> {
|
|||
this.getElementHitThreshold(),
|
||||
);
|
||||
|
||||
return isPointInShape([x, y], selectionShape);
|
||||
return isPointInShape(point(x, y), selectionShape);
|
||||
}
|
||||
|
||||
// take bound text element into consideration for hit collision as well
|
||||
|
|
@ -5035,7 +5038,7 @@ class App extends React.Component<AppProps, AppState> {
|
|||
containerId: shouldBindToContainer ? container?.id : undefined,
|
||||
groupIds: container?.groupIds ?? [],
|
||||
lineHeight,
|
||||
angle: container?.angle ?? 0,
|
||||
angle: container?.angle ?? (0 as Radians),
|
||||
frameId: topLayerFrame ? topLayerFrame.id : null,
|
||||
});
|
||||
|
||||
|
|
@ -5203,7 +5206,7 @@ class App extends React.Component<AppProps, AppState> {
|
|||
element,
|
||||
this.scene.getNonDeletedElementsMap(),
|
||||
this.state,
|
||||
[scenePointer.x, scenePointer.y],
|
||||
point(scenePointer.x, scenePointer.y),
|
||||
this.device.editor.isMobile,
|
||||
)
|
||||
);
|
||||
|
|
@ -5214,11 +5217,12 @@ class App extends React.Component<AppProps, AppState> {
|
|||
event: React.PointerEvent<HTMLCanvasElement>,
|
||||
isTouchScreen: boolean,
|
||||
) => {
|
||||
const draggedDistance = distance2d(
|
||||
this.lastPointerDownEvent!.clientX,
|
||||
this.lastPointerDownEvent!.clientY,
|
||||
this.lastPointerUpEvent!.clientX,
|
||||
this.lastPointerUpEvent!.clientY,
|
||||
const draggedDistance = pointDistance(
|
||||
point(
|
||||
this.lastPointerDownEvent!.clientX,
|
||||
this.lastPointerDownEvent!.clientY,
|
||||
),
|
||||
point(this.lastPointerUpEvent!.clientX, this.lastPointerUpEvent!.clientY),
|
||||
);
|
||||
if (
|
||||
!this.hitLinkElement ||
|
||||
|
|
@ -5237,7 +5241,7 @@ class App extends React.Component<AppProps, AppState> {
|
|||
this.hitLinkElement,
|
||||
elementsMap,
|
||||
this.state,
|
||||
[lastPointerDownCoords.x, lastPointerDownCoords.y],
|
||||
point(lastPointerDownCoords.x, lastPointerDownCoords.y),
|
||||
this.device.editor.isMobile,
|
||||
);
|
||||
const lastPointerUpCoords = viewportCoordsToSceneCoords(
|
||||
|
|
@ -5248,7 +5252,7 @@ class App extends React.Component<AppProps, AppState> {
|
|||
this.hitLinkElement,
|
||||
elementsMap,
|
||||
this.state,
|
||||
[lastPointerUpCoords.x, lastPointerUpCoords.y],
|
||||
point(lastPointerUpCoords.x, lastPointerUpCoords.y),
|
||||
this.device.editor.isMobile,
|
||||
);
|
||||
if (lastPointerDownHittingLinkIcon && lastPointerUpHittingLinkIcon) {
|
||||
|
|
@ -5497,17 +5501,18 @@ class App extends React.Component<AppProps, AppState> {
|
|||
// if we haven't yet created a temp point and we're beyond commit-zone
|
||||
// threshold, add a point
|
||||
if (
|
||||
distance2d(
|
||||
scenePointerX - rx,
|
||||
scenePointerY - ry,
|
||||
lastPoint[0],
|
||||
lastPoint[1],
|
||||
pointDistance(
|
||||
point(scenePointerX - rx, scenePointerY - ry),
|
||||
lastPoint,
|
||||
) >= LINE_CONFIRM_THRESHOLD
|
||||
) {
|
||||
mutateElement(
|
||||
multiElement,
|
||||
{
|
||||
points: [...points, [scenePointerX - rx, scenePointerY - ry]],
|
||||
points: [
|
||||
...points,
|
||||
point<LocalPoint>(scenePointerX - rx, scenePointerY - ry),
|
||||
],
|
||||
},
|
||||
false,
|
||||
);
|
||||
|
|
@ -5519,11 +5524,9 @@ class App extends React.Component<AppProps, AppState> {
|
|||
} else if (
|
||||
points.length > 2 &&
|
||||
lastCommittedPoint &&
|
||||
distance2d(
|
||||
scenePointerX - rx,
|
||||
scenePointerY - ry,
|
||||
lastCommittedPoint[0],
|
||||
lastCommittedPoint[1],
|
||||
pointDistance(
|
||||
point(scenePointerX - rx, scenePointerY - ry),
|
||||
lastCommittedPoint,
|
||||
) < LINE_CONFIRM_THRESHOLD
|
||||
) {
|
||||
setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
|
||||
|
|
@ -5570,10 +5573,10 @@ class App extends React.Component<AppProps, AppState> {
|
|||
this.scene.getNonDeletedElementsMap(),
|
||||
[
|
||||
...points.slice(0, -1),
|
||||
[
|
||||
point<LocalPoint>(
|
||||
lastCommittedX + dxFromLastCommitted,
|
||||
lastCommittedY + dyFromLastCommitted,
|
||||
],
|
||||
),
|
||||
],
|
||||
undefined,
|
||||
undefined,
|
||||
|
|
@ -5589,10 +5592,10 @@ class App extends React.Component<AppProps, AppState> {
|
|||
{
|
||||
points: [
|
||||
...points.slice(0, -1),
|
||||
[
|
||||
point<LocalPoint>(
|
||||
lastCommittedX + dxFromLastCommitted,
|
||||
lastCommittedY + dyFromLastCommitted,
|
||||
],
|
||||
),
|
||||
],
|
||||
},
|
||||
false,
|
||||
|
|
@ -5817,17 +5820,15 @@ class App extends React.Component<AppProps, AppState> {
|
|||
}
|
||||
};
|
||||
|
||||
const distance = distance2d(
|
||||
pointerDownState.lastCoords.x,
|
||||
pointerDownState.lastCoords.y,
|
||||
scenePointer.x,
|
||||
scenePointer.y,
|
||||
const distance = pointDistance(
|
||||
point(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y),
|
||||
point(scenePointer.x, scenePointer.y),
|
||||
);
|
||||
const threshold = this.getElementHitThreshold();
|
||||
const point = { ...pointerDownState.lastCoords };
|
||||
const p = { ...pointerDownState.lastCoords };
|
||||
let samplingInterval = 0;
|
||||
while (samplingInterval <= distance) {
|
||||
const hitElements = this.getElementsAtPosition(point.x, point.y);
|
||||
const hitElements = this.getElementsAtPosition(p.x, p.y);
|
||||
processElements(hitElements);
|
||||
|
||||
// Exit since we reached current point
|
||||
|
|
@ -5839,12 +5840,10 @@ class App extends React.Component<AppProps, AppState> {
|
|||
samplingInterval = Math.min(samplingInterval + threshold, distance);
|
||||
|
||||
const distanceRatio = samplingInterval / distance;
|
||||
const nextX =
|
||||
(1 - distanceRatio) * point.x + distanceRatio * scenePointer.x;
|
||||
const nextY =
|
||||
(1 - distanceRatio) * point.y + distanceRatio * scenePointer.y;
|
||||
point.x = nextX;
|
||||
point.y = nextY;
|
||||
const nextX = (1 - distanceRatio) * p.x + distanceRatio * scenePointer.x;
|
||||
const nextY = (1 - distanceRatio) * p.y + distanceRatio * scenePointer.y;
|
||||
p.x = nextX;
|
||||
p.y = nextY;
|
||||
}
|
||||
|
||||
pointerDownState.lastCoords.x = scenePointer.x;
|
||||
|
|
@ -6325,7 +6324,7 @@ class App extends React.Component<AppProps, AppState> {
|
|||
this.hitLinkElement,
|
||||
this.scene.getNonDeletedElementsMap(),
|
||||
this.state,
|
||||
[scenePointer.x, scenePointer.y],
|
||||
point(scenePointer.x, scenePointer.y),
|
||||
)
|
||||
) {
|
||||
this.handleEmbeddableCenterClick(this.hitLinkElement);
|
||||
|
|
@ -7008,7 +7007,7 @@ class App extends React.Component<AppProps, AppState> {
|
|||
simulatePressure,
|
||||
locked: false,
|
||||
frameId: topLayerFrame ? topLayerFrame.id : null,
|
||||
points: [[0, 0]],
|
||||
points: [point<LocalPoint>(0, 0)],
|
||||
pressures: simulatePressure ? [] : [event.pressure],
|
||||
});
|
||||
|
||||
|
|
@ -7216,11 +7215,9 @@ class App extends React.Component<AppProps, AppState> {
|
|||
if (
|
||||
multiElement.points.length > 1 &&
|
||||
lastCommittedPoint &&
|
||||
distance2d(
|
||||
pointerDownState.origin.x - rx,
|
||||
pointerDownState.origin.y - ry,
|
||||
lastCommittedPoint[0],
|
||||
lastCommittedPoint[1],
|
||||
pointDistance(
|
||||
point(pointerDownState.origin.x - rx, pointerDownState.origin.y - ry),
|
||||
lastCommittedPoint,
|
||||
) < LINE_CONFIRM_THRESHOLD
|
||||
) {
|
||||
this.actionManager.executeAction(actionFinalize);
|
||||
|
|
@ -7321,7 +7318,7 @@ class App extends React.Component<AppProps, AppState> {
|
|||
};
|
||||
});
|
||||
mutateElement(element, {
|
||||
points: [...element.points, [0, 0]],
|
||||
points: [...element.points, point<LocalPoint>(0, 0)],
|
||||
});
|
||||
const boundElement = getHoveredElementForBinding(
|
||||
pointerDownState.origin,
|
||||
|
|
@ -7573,11 +7570,9 @@ class App extends React.Component<AppProps, AppState> {
|
|||
this.state.activeTool.type === "line")
|
||||
) {
|
||||
if (
|
||||
distance2d(
|
||||
pointerCoords.x,
|
||||
pointerCoords.y,
|
||||
pointerDownState.origin.x,
|
||||
pointerDownState.origin.y,
|
||||
pointDistance(
|
||||
point(pointerCoords.x, pointerCoords.y),
|
||||
point(pointerDownState.origin.x, pointerDownState.origin.y),
|
||||
) < DRAGGING_THRESHOLD
|
||||
) {
|
||||
return;
|
||||
|
|
@ -7926,7 +7921,7 @@ class App extends React.Component<AppProps, AppState> {
|
|||
mutateElement(
|
||||
newElement,
|
||||
{
|
||||
points: [...points, [dx, dy]],
|
||||
points: [...points, point<LocalPoint>(dx, dy)],
|
||||
pressures,
|
||||
},
|
||||
false,
|
||||
|
|
@ -7955,7 +7950,7 @@ class App extends React.Component<AppProps, AppState> {
|
|||
mutateElement(
|
||||
newElement,
|
||||
{
|
||||
points: [...points, [dx, dy]],
|
||||
points: [...points, point<LocalPoint>(dx, dy)],
|
||||
},
|
||||
false,
|
||||
);
|
||||
|
|
@ -7963,8 +7958,8 @@ class App extends React.Component<AppProps, AppState> {
|
|||
mutateElbowArrow(
|
||||
newElement,
|
||||
elementsMap,
|
||||
[...points.slice(0, -1), [dx, dy]],
|
||||
[0, 0],
|
||||
[...points.slice(0, -1), point<LocalPoint>(dx, dy)],
|
||||
vector(0, 0),
|
||||
undefined,
|
||||
{
|
||||
isDragging: true,
|
||||
|
|
@ -7975,7 +7970,7 @@ class App extends React.Component<AppProps, AppState> {
|
|||
mutateElement(
|
||||
newElement,
|
||||
{
|
||||
points: [...points.slice(0, -1), [dx, dy]],
|
||||
points: [...points.slice(0, -1), point<LocalPoint>(dx, dy)],
|
||||
},
|
||||
false,
|
||||
);
|
||||
|
|
@ -8284,9 +8279,9 @@ class App extends React.Component<AppProps, AppState> {
|
|||
: [...newElement.pressures, childEvent.pressure];
|
||||
|
||||
mutateElement(newElement, {
|
||||
points: [...points, [dx, dy]],
|
||||
points: [...points, point<LocalPoint>(dx, dy)],
|
||||
pressures,
|
||||
lastCommittedPoint: [dx, dy],
|
||||
lastCommittedPoint: point<LocalPoint>(dx, dy),
|
||||
});
|
||||
|
||||
this.actionManager.executeAction(actionFinalize);
|
||||
|
|
@ -8333,7 +8328,10 @@ class App extends React.Component<AppProps, AppState> {
|
|||
mutateElement(newElement, {
|
||||
points: [
|
||||
...newElement.points,
|
||||
[pointerCoords.x - newElement.x, pointerCoords.y - newElement.y],
|
||||
point<LocalPoint>(
|
||||
pointerCoords.x - newElement.x,
|
||||
pointerCoords.y - newElement.y,
|
||||
),
|
||||
],
|
||||
});
|
||||
this.setState({
|
||||
|
|
@ -8643,11 +8641,9 @@ class App extends React.Component<AppProps, AppState> {
|
|||
if (isEraserActive(this.state) && pointerStart && pointerEnd) {
|
||||
this.eraserTrail.endPath();
|
||||
|
||||
const draggedDistance = distance2d(
|
||||
pointerStart.clientX,
|
||||
pointerStart.clientY,
|
||||
pointerEnd.clientX,
|
||||
pointerEnd.clientY,
|
||||
const draggedDistance = pointDistance(
|
||||
point(pointerStart.clientX, pointerStart.clientY),
|
||||
point(pointerEnd.clientX, pointerEnd.clientY),
|
||||
);
|
||||
|
||||
if (draggedDistance === 0) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue