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: Replace { x: number, y: number } type declarations with Point type

Browse source 
- Updated type declarations written as { x: number, y: number } to use the Point type as per requirements.
- Explicit names were used for variables by destructuring previously used object types.
- For example, scenePointer.x, scenePointer.y are now destructured as scenePointerX and scenePointerY.
- When a Point type was required as an argument, the `pointFrom` helper function was used to convert and pass the value.
This commit is contained in:
sunub 2025-04-17 13:22:59 +09:00
parent 85cb973936
commit 899c652147
21 changed files with 210 additions and 188 deletions
Download patch file Download diff file Expand all files Collapse all files

2
examples/with-script-in-browser/components/ExampleApp.tsx
View file

@ -422,7 +422,7 @@ export default function ExampleApp({
if (!excalidrawAPI) {
return false;
}
const { x, y } = viewportCoordsToSceneCoords(
const [x, y] = viewportCoordsToSceneCoords(
{
clientX: event.clientX - pointerDownState.hitElementOffsets.x,
clientY: event.clientY - pointerDownState.hitElementOffsets.y,

22
packages/common/src/utils.ts
View file

@ -1,4 +1,10 @@
import { average, pointFrom, type GlobalPoint } from "@excalidraw/math";
import {
average,
pointFrom,
type ViewportPoint,
type GlobalPoint,
type GenericPoint,
} from "@excalidraw/math";
import type {
ExcalidrawBindableElement,
@ -448,11 +454,11 @@ export const viewportCoordsToSceneCoords = (
scrollX: number;
scrollY: number;
},
) => {
): ViewportPoint => {
const x = (clientX - offsetLeft) / zoom.value - scrollX;
const y = (clientY - offsetTop) / zoom.value - scrollY;
return { x, y };
return pointFrom<ViewportPoint>(x, y);
};
export const sceneCoordsToViewportCoords = (
@ -470,10 +476,10 @@ export const sceneCoordsToViewportCoords = (
scrollX: number;
scrollY: number;
},
) => {
): ViewportPoint => {
const x = (sceneX + scrollX) * zoom.value + offsetLeft;
const y = (sceneY + scrollY) * zoom.value + offsetTop;
return { x, y };
return pointFrom<ViewportPoint>(x, y);
};
export const getGlobalCSSVariable = (name: string) =>
@ -492,11 +498,11 @@ const RE_RTL_CHECK = new RegExp(`^[^${RS_LTR_CHARS}]*[${RS_RTL_CHARS}]`);
*/
export const isRTL = (text: string) => RE_RTL_CHECK.test(text);
export const tupleToCoors = (
export const tupleToCoors = <Point extends GenericPoint>(
xyTuple: readonly [number, number],
): { x: number; y: number } => {
): Point => {
const [x, y] = xyTuple;
return { x, y };
return pointFrom(x, y);
};
/** use as a rejectionHandler to mute filesystem Abort errors */

21
packages/element/src/binding.ts
View file

@ -29,7 +29,7 @@ import {
import { isPointOnShape } from "@excalidraw/utils/collision";
import type { LocalPoint, Radians } from "@excalidraw/math";
import type { GenericPoint, LocalPoint, Radians } from "@excalidraw/math";
import type Scene from "@excalidraw/excalidraw/scene/Scene";
@ -426,10 +426,10 @@ export const getSuggestedBindingsForArrows = (
);
};
export const maybeBindLinearElement = (
export const maybeBindLinearElement = <Point extends GenericPoint>(
linearElement: NonDeleted<ExcalidrawLinearElement>,
appState: AppState,
pointerCoords: { x: number; y: number },
pointerCoords: Point,
elementsMap: NonDeletedSceneElementsMap,
elements: readonly NonDeletedExcalidrawElement[],
): void => {
@ -577,11 +577,8 @@ const unbindLinearElement = (
return binding.elementId;
};
export const getHoveredElementForBinding = (
pointerCoords: {
x: number;
y: number;
},
export const getHoveredElementForBinding = <Point extends GenericPoint>(
pointerCoords: Point,
elements: readonly NonDeletedExcalidrawElement[],
elementsMap: NonDeletedSceneElementsMap,
zoom?: AppState["zoom"],
@ -1393,11 +1390,11 @@ const getElligibleElementForBindingElement = (
);
};
const getLinearElementEdgeCoors = (
const getLinearElementEdgeCoors = <Point extends GenericPoint>(
linearElement: NonDeleted<ExcalidrawLinearElement>,
startOrEnd: "start" | "end",
elementsMap: NonDeletedSceneElementsMap,
): { x: number; y: number } => {
): Point => {
const index = startOrEnd === "start" ? 0 : -1;
return tupleToCoors(
LinearElementEditor.getPointAtIndexGlobalCoordinates(
@ -1706,9 +1703,9 @@ const newBoundElements = (
return nextBoundElements;
};
export const bindingBorderTest = (
export const bindingBorderTest = <Point extends GenericPoint>(
element: NonDeleted<ExcalidrawBindableElement>,
{ x, y }: { x: number; y: number },
[x, y]: Point,
elementsMap: NonDeletedSceneElementsMap,
zoom?: AppState["zoom"],
fullShape?: boolean,

5
packages/element/src/bounds.ts
View file

@ -18,6 +18,7 @@ import { pointsOnBezierCurves } from "points-on-curve";
import type {
Curve,
Degrees,
GenericPoint,
GlobalPoint,
LineSegment,
LocalPoint,
@ -1051,7 +1052,7 @@ export const getElementPointsCoords = (
export const getClosestElementBounds = (
elements: readonly ExcalidrawElement[],
from: { x: number; y: number },
from: GenericPoint,
): Bounds => {
if (!elements.length) {
return [0, 0, 0, 0];
@ -1064,7 +1065,7 @@ export const getClosestElementBounds = (
const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
const distance = pointDistance(
pointFrom((x1 + x2) / 2, (y1 + y2) / 2),
pointFrom(from.x, from.y),
from,
);
if (distance < minDistance) {

11
packages/element/src/dragElements.ts
View file

@ -12,6 +12,7 @@ import type {
} from "@excalidraw/excalidraw/types";
import type Scene from "@excalidraw/excalidraw/scene/Scene";
import type { GenericPoint } from "@excalidraw/math";
import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
@ -208,10 +209,7 @@ export const dragNewElement = ({
/** whether to keep given aspect ratio when `isResizeWithSidesSameLength` is
true */
widthAspectRatio?: number | null;
originOffset?: {
x: number;
y: number;
} | null;
originOffset?: GenericPoint | null;
informMutation?: boolean;
}) => {
if (shouldMaintainAspectRatio && newElement.type !== "selection") {
@ -285,11 +283,12 @@ export const dragNewElement = ({
};
}
const [originOffsetX, originOffsetY] = originOffset ?? [0, 0];
mutateElement(
newElement,
{
x: newX + (originOffset?.x ?? 0),
y: newY + (originOffset?.y ?? 0),
x: newX + originOffsetX,
y: newY + originOffsetY,
width,
height,
...textAutoResize,

15
packages/element/src/frame.ts
View file

@ -1,5 +1,9 @@
import { arrayToMap } from "@excalidraw/common";
import { isPointWithinBounds, pointFrom } from "@excalidraw/math";
import {
type GenericPoint,
isPointWithinBounds,
pointFrom,
} from "@excalidraw/math";
import { doLineSegmentsIntersect } from "@excalidraw/utils/bbox";
import { elementsOverlappingBBox } from "@excalidraw/utils/withinBounds";
@ -154,11 +158,8 @@ export const elementOverlapsWithFrame = (
);
};
export const isCursorInFrame = (
cursorCoords: {
x: number;
y: number;
},
export const isCursorInFrame = <Point extends GenericPoint>(
cursorCoords: Point,
frame: NonDeleted<ExcalidrawFrameLikeElement>,
elementsMap: ElementsMap,
) => {
@ -166,7 +167,7 @@ export const isCursorInFrame = (
return isPointWithinBounds(
pointFrom(fx1, fy1),
pointFrom(cursorCoords.x, cursorCoords.y),
cursorCoords,
pointFrom(fx2, fy2),
);
};

111
packages/element/src/linearElementEditor.ts
View file

@ -3,8 +3,6 @@ import {
pointFrom,
pointRotateRads,
pointsEqual,
type GlobalPoint,
type LocalPoint,
pointDistance,
vectorFromPoint,
} from "@excalidraw/math";
@ -26,7 +24,12 @@ import Scene from "@excalidraw/excalidraw/scene/Scene";
import type { Store } from "@excalidraw/excalidraw/store";
import type { Radians } from "@excalidraw/math";
import type {
GlobalPoint,
LocalPoint,
GenericPoint,
Radians,
} from "@excalidraw/math";
import type {
AppState,
@ -106,7 +109,7 @@ export class LinearElementEditor {
/** index */
lastClickedPoint: number;
lastClickedIsEndPoint: boolean;
origin: Readonly<{ x: number; y: number }> | null;
origin: Readonly<GenericPoint> | null;
segmentMidpoint: {
value: GlobalPoint | null;
index: number | null;
@ -117,7 +120,7 @@ export class LinearElementEditor {
/** whether you're dragging a point */
public readonly isDragging: boolean;
public readonly lastUncommittedPoint: LocalPoint | null;
public readonly pointerOffset: Readonly<{ x: number; y: number }>;
public readonly pointerOffset: Readonly<GenericPoint>;
public readonly startBindingElement:
| ExcalidrawBindableElement
| null
@ -139,7 +142,7 @@ export class LinearElementEditor {
this.selectedPointsIndices = null;
this.lastUncommittedPoint = null;
this.isDragging = false;
this.pointerOffset = { x: 0, y: 0 };
this.pointerOffset = pointFrom(0, 0);
this.startBindingElement = "keep";
this.endBindingElement = "keep";
this.pointerDownState = {
@ -242,14 +245,14 @@ export class LinearElementEditor {
/**
* @returns whether point was dragged
*/
static handlePointDragging(
static handlePointDragging<Point extends GenericPoint>(
event: PointerEvent,
app: AppClassProperties,
scenePointerX: number,
scenePointerY: number,
maybeSuggestBinding: (
element: NonDeleted<ExcalidrawLinearElement>,
pointSceneCoords: { x: number; y: number }[],
pointSceneCoords: Point[],
) => void,
linearElementEditor: LinearElementEditor,
scene: Scene,
@ -320,11 +323,13 @@ export class LinearElementEditor {
},
]);
} else {
const [pointerOffsetX, pointerOffsetY] =
linearElementEditor.pointerOffset;
const newDraggingPointPosition = LinearElementEditor.createPointAt(
element,
elementsMap,
scenePointerX - linearElementEditor.pointerOffset.x,
scenePointerY - linearElementEditor.pointerOffset.y,
scenePointerX - pointerOffsetX,
scenePointerY - pointerOffsetY,
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
);
@ -339,8 +344,8 @@ export class LinearElementEditor {
? LinearElementEditor.createPointAt(
element,
elementsMap,
scenePointerX - linearElementEditor.pointerOffset.x,
scenePointerY - linearElementEditor.pointerOffset.y,
scenePointerX - pointerOffsetX,
scenePointerY - pointerOffsetY,
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
)
: pointFrom(
@ -363,7 +368,7 @@ export class LinearElementEditor {
// suggest bindings for first and last point if selected
if (isBindingElement(element, false)) {
const coords: { x: number; y: number }[] = [];
const coords: Point[] = [];
const firstSelectedIndex = selectedPointsIndices[0];
if (firstSelectedIndex === 0) {
@ -511,7 +516,7 @@ export class LinearElementEditor {
? [pointerDownState.lastClickedPoint]
: selectedPointsIndices,
isDragging: false,
pointerOffset: { x: 0, y: 0 },
pointerOffset: pointFrom(0, 0),
};
}
@ -586,9 +591,9 @@ export class LinearElementEditor {
editorMidPointsCache.zoom = appState.zoom.value;
};
static getSegmentMidpointHitCoords = (
static getSegmentMidpointHitCoords = <Point extends GenericPoint>(
linearElementEditor: LinearElementEditor,
scenePointer: { x: number; y: number },
[scenePointerX, scenePointerY]: Point,
appState: AppState,
elementsMap: ElementsMap,
): GlobalPoint | null => {
@ -601,8 +606,8 @@ export class LinearElementEditor {
element,
elementsMap,
appState.zoom,
scenePointer.x,
scenePointer.y,
scenePointerX,
scenePointerY,
);
if (!isElbowArrow(element) && clickedPointIndex >= 0) {
return null;
@ -630,7 +635,7 @@ export class LinearElementEditor {
existingSegmentMidpointHitCoords[0],
existingSegmentMidpointHitCoords[1],
),
pointFrom(scenePointer.x, scenePointer.y),
pointFrom(scenePointerX, scenePointerY),
);
if (distance <= threshold) {
return existingSegmentMidpointHitCoords;
@ -644,7 +649,7 @@ export class LinearElementEditor {
if (midPoints[index] !== null) {
const distance = pointDistance(
midPoints[index]!,
pointFrom(scenePointer.x, scenePointer.y),
pointFrom(scenePointerX, scenePointerY),
);
if (distance <= threshold) {
return midPoints[index];
@ -656,7 +661,7 @@ export class LinearElementEditor {
return null;
};
static isSegmentTooShort<P extends GlobalPoint | LocalPoint>(
static isSegmentTooShort<P extends GenericPoint>(
element: NonDeleted<ExcalidrawLinearElement>,
startPoint: P,
endPoint: P,
@ -747,11 +752,11 @@ export class LinearElementEditor {
return -1;
}
static handlePointerDown(
static handlePointerDown<Point extends GenericPoint>(
event: React.PointerEvent<HTMLElement>,
app: AppClassProperties,
store: Store,
scenePointer: { x: number; y: number },
scenePointer: Point,
linearElementEditor: LinearElementEditor,
scene: Scene,
): {
@ -762,6 +767,7 @@ export class LinearElementEditor {
const appState = app.state;
const elementsMap = scene.getNonDeletedElementsMap();
const elements = scene.getNonDeletedElements();
const [scenePointerX, scenePointerY] = scenePointer;
const ret: ReturnType<typeof LinearElementEditor["handlePointerDown"]> = {
didAddPoint: false,
@ -801,8 +807,8 @@ export class LinearElementEditor {
LinearElementEditor.createPointAt(
element,
elementsMap,
scenePointer.x,
scenePointer.y,
scenePointerX,
scenePointerY,
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
),
],
@ -816,7 +822,7 @@ export class LinearElementEditor {
prevSelectedPointsIndices: linearElementEditor.selectedPointsIndices,
lastClickedPoint: -1,
lastClickedIsEndPoint: false,
origin: { x: scenePointer.x, y: scenePointer.y },
origin: pointFrom(scenePointerX, scenePointerY),
segmentMidpoint: {
value: segmentMidpoint,
index: segmentMidpointIndex,
@ -842,8 +848,8 @@ export class LinearElementEditor {
element,
elementsMap,
appState.zoom,
scenePointer.x,
scenePointer.y,
scenePointerX,
scenePointerY,
);
// if we clicked on a point, set the element as hitElement otherwise
// it would get deselected if the point is outside the hitbox area
@ -897,7 +903,7 @@ export class LinearElementEditor {
prevSelectedPointsIndices: linearElementEditor.selectedPointsIndices,
lastClickedPoint: clickedPointIndex,
lastClickedIsEndPoint: clickedPointIndex === element.points.length - 1,
origin: { x: scenePointer.x, y: scenePointer.y },
origin: pointFrom(scenePointerX, scenePointerY),
segmentMidpoint: {
value: segmentMidpoint,
index: segmentMidpointIndex,
@ -906,17 +912,17 @@ export class LinearElementEditor {
},
selectedPointsIndices: nextSelectedPointsIndices,
pointerOffset: targetPoint
? {
x: scenePointer.x - targetPoint[0],
y: scenePointer.y - targetPoint[1],
}
: { x: 0, y: 0 },
? pointFrom(
scenePointerX - targetPoint[0],
scenePointerY - targetPoint[1],
)
: pointFrom(0, 0),
};
return ret;
}
static arePointsEqual<Point extends LocalPoint | GlobalPoint>(
static arePointsEqual<Point extends GenericPoint>(
point1: Point | null,
point2: Point | null,
) {
@ -977,11 +983,13 @@ export class LinearElementEditor {
height + lastCommittedPoint[1],
);
} else {
const [pointerOffsetX, pointerOffsetY] =
appState.editingLinearElement.pointerOffset;
newPoint = LinearElementEditor.createPointAt(
element,
elementsMap,
scenePointerX - appState.editingLinearElement.pointerOffset.x,
scenePointerY - appState.editingLinearElement.pointerOffset.y,
scenePointerX - pointerOffsetX,
scenePointerY - pointerOffsetY,
event[KEYS.CTRL_OR_CMD] || isElbowArrow(element)
? null
: app.getEffectiveGridSize(),
@ -1376,10 +1384,7 @@ export class LinearElementEditor {
}
const origin = linearElementEditor.pointerDownState.origin!;
const dist = pointDistance(
pointFrom(origin.x, origin.y),
pointFrom(pointerCoords.x, pointerCoords.y),
);
const dist = pointDistance(origin, pointerCoords);
if (
!appState.editingLinearElement &&
dist < DRAGGING_THRESHOLD / appState.zoom.value
@ -1412,11 +1417,12 @@ export class LinearElementEditor {
selectedPointsIndices: linearElementEditor.selectedPointsIndices,
};
const [pointerX, pointerY] = pointerCoords;
const midpoint = LinearElementEditor.createPointAt(
element,
elementsMap,
pointerCoords.x,
pointerCoords.y,
pointerX,
pointerY,
snapToGrid && !isElbowArrow(element) ? app.getEffectiveGridSize() : null,
);
const points = [
@ -1528,10 +1534,11 @@ export class LinearElementEditor {
element: NonDeleted<ExcalidrawLinearElement>,
elementsMap: ElementsMap,
referencePoint: LocalPoint,
scenePointer: GlobalPoint,
[scenePointerX, scenePointerY]: GlobalPoint,
gridSize: NullableGridSize,
) {
const referencePointCoords = LinearElementEditor.getPointGlobalCoordinates(
const [referencePointCoordsX, referencePointCoordsY] =
LinearElementEditor.getPointGlobalCoordinates(
element,
referencePoint,
elementsMap,
@ -1539,20 +1546,16 @@ export class LinearElementEditor {
if (isElbowArrow(element)) {
return [
scenePointer[0] - referencePointCoords[0],
scenePointer[1] - referencePointCoords[1],
scenePointerX - referencePointCoordsX,
scenePointerY - referencePointCoordsY,
];
}
const [gridX, gridY] = getGridPoint(
scenePointer[0],
scenePointer[1],
gridSize,
);
const [gridX, gridY] = getGridPoint(scenePointerX, scenePointerY, gridSize);
const { width, height } = getLockedLinearCursorAlignSize(
referencePointCoords[0],
referencePointCoords[1],
referencePointCoordsX,
referencePointCoordsY,
gridX,
gridY,
);

31
packages/element/src/sizeHelpers.ts
View file

@ -37,14 +37,16 @@ export const isElementInViewport = (
elementsMap: ElementsMap,
) => {
const [x1, y1, x2, y2] = getElementBounds(element, elementsMap); // scene coordinates
const topLeftSceneCoords = viewportCoordsToSceneCoords(
const [topLeftSceneCoordsX, topLeftSceneCoordsY] =
viewportCoordsToSceneCoords(
{
clientX: viewTransformations.offsetLeft,
clientY: viewTransformations.offsetTop,
},
viewTransformations,
);
const bottomRightSceneCoords = viewportCoordsToSceneCoords(
const [bottomRightSceneCoordsX, bottomRightSceneCoordsY] =
viewportCoordsToSceneCoords(
{
clientX: viewTransformations.offsetLeft + width,
clientY: viewTransformations.offsetTop + height,
@ -53,10 +55,10 @@ export const isElementInViewport = (
);
return (
topLeftSceneCoords.x <= x2 &&
topLeftSceneCoords.y <= y2 &&
bottomRightSceneCoords.x >= x1 &&
bottomRightSceneCoords.y >= y1
topLeftSceneCoordsX <= x2 &&
topLeftSceneCoordsY <= y2 &&
bottomRightSceneCoordsX >= x1 &&
bottomRightSceneCoordsY >= y1
);
};
@ -75,26 +77,29 @@ export const isElementCompletelyInViewport = (
padding?: Offsets,
) => {
const [x1, y1, x2, y2] = getCommonBounds(elements, elementsMap); // scene coordinates
const topLeftSceneCoords = viewportCoordsToSceneCoords(
const [topLeftSceneCoordsX, topLeftSceneCoordsY] =
viewportCoordsToSceneCoords(
{
clientX: viewTransformations.offsetLeft + (padding?.left || 0),
clientY: viewTransformations.offsetTop + (padding?.top || 0),
},
viewTransformations,
);
const bottomRightSceneCoords = viewportCoordsToSceneCoords(
const [bottomRightSceneCoordsX, bottomRightSceneCoordsY] =
viewportCoordsToSceneCoords(
{
clientX: viewTransformations.offsetLeft + width - (padding?.right || 0),
clientY: viewTransformations.offsetTop + height - (padding?.bottom || 0),
clientY:
viewTransformations.offsetTop + height - (padding?.bottom || 0),
},
viewTransformations,
);
return (
x1 >= topLeftSceneCoords.x &&
y1 >= topLeftSceneCoords.y &&
x2 <= bottomRightSceneCoords.x &&
y2 <= bottomRightSceneCoords.y
x1 >= topLeftSceneCoordsX &&
y1 >= topLeftSceneCoordsY &&
x2 <= bottomRightSceneCoordsX &&
y2 <= bottomRightSceneCoordsY
);
};

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

@ -1,4 +1,4 @@
import { clamp, roundToStep } from "@excalidraw/math";
import { clamp, pointFrom, roundToStep } from "@excalidraw/math";
import {
DEFAULT_CANVAS_BACKGROUND_PICKS,
@ -333,7 +333,7 @@ export const zoomToFitBounds = ({
);
const centerScroll = centerScrollOn({
scenePoint: { x: centerX, y: centerY },
scenePoint: pointFrom(centerX, centerY),
viewportDimensions: {
width: appState.width,
height: appState.height,

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

@ -143,7 +143,7 @@ export const actionFinalize = register({
maybeBindLinearElement(
multiPointElement,
appState,
{ x, y },
pointFrom(x, y),
elementsMap,
elements,
);

4
packages/excalidraw/animated-trail.ts
View file

@ -182,12 +182,12 @@ export class AnimatedTrail implements Trail {
const _stroke = trail
.getStrokeOutline(trail.options.size / state.zoom.value)
.map(([x, y]) => {
const result = sceneCoordsToViewportCoords(
const [resultX, resultY] = sceneCoordsToViewportCoords(
{ sceneX: x, sceneY: y },
state,
);
return [result.x, result.y];
return [resultX, resultY];
});
const stroke = this.trailAnimation

7
packages/excalidraw/appState.ts
View file

@ -12,6 +12,8 @@ import {
DEFAULT_GRID_STEP,
} from "@excalidraw/common";
import { pointFrom } from "@excalidraw/math";
import type { AppState, NormalizedZoomValue } from "./types";
const defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio)
@ -112,10 +114,7 @@ export const getDefaultAppState = (): Omit<
showHyperlinkPopup: false,
selectedLinearElement: null,
snapLines: [],
originSnapOffset: {
x: 0,
y: 0,
},
originSnapOffset: pointFrom(0, 0),
objectsSnapModeEnabled: false,
userToFollow: null,
followedBy: new Set(),

2
packages/excalidraw/clients.ts
View file

@ -69,7 +69,7 @@ export const renderRemoteCursors = ({
}) => {
// Paint remote pointers
for (const [socketId, pointer] of renderConfig.remotePointerViewportCoords) {
let { x, y } = pointer;
let [x, y] = pointer;
const collaborator = appState.collaborators.get(socketId);

2
packages/excalidraw/components/ElementCanvasButtons.tsx
View file

@ -20,7 +20,7 @@ const getContainerCoords = (
elementsMap: ElementsMap,
) => {
const [x1, y1] = getElementAbsoluteCoords(element, elementsMap);
const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords(
const [viewportX, viewportY] = sceneCoordsToViewportCoords(
{ sceneX: x1 + element.width, sceneY: y1 },
appState,
);

9
packages/excalidraw/components/EyeDropper.tsx
View file

@ -166,9 +166,14 @@ export const EyeDropper: React.FC<{
eyeDropperContainer.focus();
// init color preview else it would show only after the first mouse move
const [
stablePropsAppLastViewportPositionX,
stablePropsAppLastViewportPositionY,
] = stableProps.app.lastViewportPosition;
mouseMoveListener({
clientX: stableProps.app.lastViewportPosition.x,
clientY: stableProps.app.lastViewportPosition.y,
clientX: stablePropsAppLastViewportPositionX,
clientY: stablePropsAppLastViewportPositionY,
altKey: false,
});

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

@ -360,7 +360,7 @@ const getCoordsForPopover = (
elementsMap: ElementsMap,
) => {
const [x1, y1] = getElementAbsoluteCoords(element, elementsMap);
const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords(
const [viewportX, viewportY] = sceneCoordsToViewportCoords(
{ sceneX: x1 + element.width / 2, sceneY: y1 },
appState,
);
@ -422,7 +422,7 @@ const renderTooltip = (
appState,
);
const linkViewportCoords = sceneCoordsToViewportCoords(
const [linkViewportCoordX, linkViewportCoordY] = sceneCoordsToViewportCoords(
{ sceneX: linkX, sceneY: linkY },
appState,
);
@ -430,8 +430,8 @@ const renderTooltip = (
updateTooltipPosition(
tooltipDiv,
{
left: linkViewportCoords.x,
top: linkViewportCoords.y,
left: linkViewportCoordX,
top: linkViewportCoordY,
width: linkWidth,
height: linkHeight,
},
@ -457,7 +457,7 @@ const shouldHideLinkPopup = (
appState: AppState,
[clientX, clientY]: GlobalPoint,
): Boolean => {
const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
const [sceneX, sceneY] = viewportCoordsToSceneCoords(
{ clientX, clientY },
appState,
);

26
packages/excalidraw/gesture.ts
View file

@ -1,15 +1,25 @@
import type { PointerCoords } from "./types";
import { pointFrom, type GenericPoint } from "@excalidraw/math";
export const getCenter = (pointers: Map<number, PointerCoords>) => {
export const getCenter = <Point extends GenericPoint>(
pointers: Map<number, Point>,
): Point => {
const allCoords = Array.from(pointers.values());
return {
x: sum(allCoords, (coords) => coords.x) / allCoords.length,
y: sum(allCoords, (coords) => coords.y) / allCoords.length,
};
return pointFrom(
sum(allCoords, ([coordsX, _]) => coordsX) / allCoords.length,
sum(allCoords, ([_, coordsY]) => coordsY) / allCoords.length,
);
};
export const getDistance = ([a, b]: readonly PointerCoords[]) =>
Math.hypot(a.x - b.x, a.y - b.y);
export const isTwoPointerCoords = <Point extends GenericPoint>(
arr: Point[],
): arr is [Point, Point] => {
return arr.length === 2;
};
export const getDistance = <Point extends GenericPoint>([
[x1, y1],
[x2, y2],
]: readonly [Point, Point]) => Math.hypot(x1 - x2, y1 - y2);
const sum = <T>(array: readonly T[], mapper: (item: T) => number): number =>
array.reduce((acc, item) => acc + mapper(item), 0);

12
packages/excalidraw/scene/scroll.ts
View file

@ -3,6 +3,7 @@ import {
sceneCoordsToViewportCoords,
viewportCoordsToSceneCoords,
} from "@excalidraw/common";
import { pointFrom } from "@excalidraw/math";
import { getClosestElementBounds } from "@excalidraw/element/bounds";
@ -14,11 +15,11 @@ import type { AppState, Offsets, PointerCoords, Zoom } from "../types";
const isOutsideViewPort = (appState: AppState, cords: Array<number>) => {
const [x1, y1, x2, y2] = cords;
const { x: viewportX1, y: viewportY1 } = sceneCoordsToViewportCoords(
const [viewportX1, viewportY1] = sceneCoordsToViewportCoords(
{ sceneX: x1, sceneY: y1 },
appState,
);
const { x: viewportX2, y: viewportY2 } = sceneCoordsToViewportCoords(
const [viewportX2, viewportY2] = sceneCoordsToViewportCoords(
{ sceneX: x2, sceneY: y2 },
appState,
);
@ -39,15 +40,16 @@ export const centerScrollOn = ({
zoom: Zoom;
offsets?: Offsets;
}) => {
const [scenePointX, scenePointY] = scenePoint;
let scrollX =
(viewportDimensions.width - (offsets?.right ?? 0)) / 2 / zoom.value -
scenePoint.x;
scenePointX;
scrollX += (offsets?.left ?? 0) / 2 / zoom.value;
let scrollY =
(viewportDimensions.height - (offsets?.bottom ?? 0)) / 2 / zoom.value -
scenePoint.y;
scenePointY;
scrollY += (offsets?.top ?? 0) / 2 / zoom.value;
@ -85,7 +87,7 @@ export const calculateScrollCenter = (
const centerY = (y1 + y2) / 2;
return centerScrollOn({
scenePoint: { x: centerX, y: centerY },
scenePoint: pointFrom(centerX, centerY),
viewportDimensions: { width: appState.width, height: appState.height },
zoom: appState.zoom,
});

3
packages/excalidraw/scene/types.ts
View file

@ -7,6 +7,7 @@ import type {
} from "@excalidraw/element/types";
import type { MakeBrand } from "@excalidraw/common/utility-types";
import type { GenericPoint } from "@excalidraw/math";
import type {
AppClassProperties,
@ -61,7 +62,7 @@ export type InteractiveCanvasRenderConfig = {
// collab-related state
// ---------------------------------------------------------------------------
remoteSelectedElementIds: Map<ExcalidrawElement["id"], SocketId[]>;
remotePointerViewportCoords: Map<SocketId, { x: number; y: number }>;
remotePointerViewportCoords: Map<SocketId, GenericPoint>;
remotePointerUserStates: Map<SocketId, UserIdleState>;
remotePointerUsernames: Map<SocketId, string>;
remotePointerButton: Map<SocketId, string | undefined>;

8
packages/excalidraw/snapping.ts
View file

@ -1327,7 +1327,7 @@ export const getSnapLinesAtPointer = (
) => {
if (!isSnappingEnabled({ event, selectedElements: [], app })) {
return {
originOffset: { x: 0, y: 0 },
originOffset: pointFrom(0, 0),
snapLines: [],
};
}
@ -1388,16 +1388,14 @@ export const getSnapLinesAtPointer = (
}
return {
originOffset: {
x:
originOffset: pointFrom(
verticalSnapLines.length > 0
? verticalSnapLines[0].points[0][0] - pointer.x
: 0,
y:
horizontalSnapLines.length > 0
? horizontalSnapLines[0].points[0][1] - pointer.y
: 0,
},
),
snapLines: [...verticalSnapLines, ...horizontalSnapLines],
};
};

25
packages/excalidraw/types.ts
View file

@ -42,6 +42,7 @@ import type {
ValueOf,
MakeBrand,
} from "@excalidraw/common/utility-types";
import type { GenericPoint } from "@excalidraw/math";
import type { Action } from "./actions/types";
import type { Spreadsheet } from "./charts";
@ -413,10 +414,7 @@ export interface AppState {
showHyperlinkPopup: false | "info" | "editor";
selectedLinearElement: LinearElementEditor | null;
snapLines: readonly SnapLine[];
originSnapOffset: {
x: number;
y: number;
} | null;
originSnapOffset: GenericPoint | null;
objectsSnapModeEnabled: boolean;
/** the user's socket id & username who is being followed on the canvas */
userToFollow: UserToFollow | null;
@ -456,14 +454,11 @@ export type Zoom = Readonly<{
value: NormalizedZoomValue;
}>;
export type PointerCoords = Readonly<{
x: number;
y: number;
}>;
export type PointerCoords = Readonly<GenericPoint>;
export type Gesture = {
pointers: Map<number, PointerCoords>;
lastCenter: { x: number; y: number } | null;
lastCenter: PointerCoords | null;
initialDistance: number | null;
initialScale: number | null;
};
@ -717,13 +712,13 @@ export type AppClassProperties = {
export type PointerDownState = Readonly<{
// The first position at which pointerDown happened
origin: Readonly<{ x: number; y: number }>;
origin: Readonly<GenericPoint>;
// Same as "origin" but snapped to the grid, if grid is on
originInGrid: Readonly<{ x: number; y: number }>;
originInGrid: Readonly<GenericPoint>;
// Scrollbar checks
scrollbars: ReturnType<typeof isOverScrollBars>;
// The previous pointer position
lastCoords: { x: number; y: number };
lastCoords: GenericPoint;
// map of original elements data
originalElements: Map<string, NonDeleted<ExcalidrawElement>>;
resize: {
@ -732,11 +727,11 @@ export type PointerDownState = Readonly<{
// This is determined on the initial pointer down event
isResizing: boolean;
// This is determined on the initial pointer down event
offset: { x: number; y: number };
offset: GenericPoint;
// This is determined on the initial pointer down event
arrowDirection: "origin" | "end";
// This is a center point of selected elements determined on the initial pointer down event (for rotation only)
center: { x: number; y: number };
center: GenericPoint;
};
hit: {
// The element the pointer is "hitting", is determined on the initial
@ -757,7 +752,7 @@ export type PointerDownState = Readonly<{
// Might change during the pointer interaction
hasOccurred: boolean;
// Might change during the pointer interaction
offset: { x: number; y: number } | null;
offset: GenericPoint | null;
};
// We need to have these in the state so that we can unsubscribe them
eventListeners: {