Merge 60907a5a0e into debf2ad608

examples/with-script-in-browser/components/ExampleApp.tsx

@@ -424,7 +424,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,

packages/common/src/points.ts

@@ -1,14 +1,9 @@
-import {
+import { type GenericPoint, pointFromPair } from "@excalidraw/math";
-  pointFromPair,
+import { pointFrom } from "@excalidraw/math";
-  type GlobalPoint,
-  type LocalPoint,
-} from "@excalidraw/math";
 
 import type { NullableGridSize } from "@excalidraw/excalidraw/types";
 
-export const getSizeFromPoints = (
+export const getSizeFromPoints = (points: readonly GenericPoint[]) => {
-  points: readonly (GlobalPoint | LocalPoint)[],
-) => {
   const xs = points.map((point) => point[0]);
   const ys = points.map((point) => point[1]);
   return {
@@ -18,7 +13,7 @@ export const getSizeFromPoints = (
 };
 
 /** @arg dimension, 0 for rescaling only x, 1 for y */
-export const rescalePoints = <Point extends GlobalPoint | LocalPoint>(
+export const rescalePoints = <Point extends GenericPoint>(
   dimension: 0 | 1,
   newSize: number,
   points: readonly Point[],
@@ -65,16 +60,16 @@ export const rescalePoints = <Point extends GlobalPoint | LocalPoint>(
 };
 
 // TODO: Rounding this point causes some shake when free drawing
-export const getGridPoint = (
+export const getGridPoint = <Point extends GenericPoint>(
   x: number,
   y: number,
   gridSize: NullableGridSize,
-): [number, number] => {
+): Point => {
   if (gridSize) {
-    return [
+    return pointFrom(
       Math.round(x / gridSize) * gridSize,
       Math.round(y / gridSize) * gridSize,
-    ];
+    );
   }
-  return [x, y];
+  return pointFrom(x, y);
 };

packages/common/src/utils.ts

@@ -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 */

packages/element/src/binding.ts

@@ -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";
 
@@ -425,10 +425,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 => {
@@ -576,11 +576,8 @@ const unbindLinearElement = (
   return binding.elementId;
 };
 
-export const getHoveredElementForBinding = (
+export const getHoveredElementForBinding = <Point extends GenericPoint>(
-  pointerCoords: {
+  pointerCoords: Point,
-    x: number;
-    y: number;
-  },
   elements: readonly NonDeletedExcalidrawElement[],
   elementsMap: NonDeletedSceneElementsMap,
   zoom?: AppState["zoom"],
@@ -1392,11 +1389,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(
@@ -1516,9 +1513,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,

packages/element/src/bounds.ts

@@ -23,6 +23,7 @@ import { pointsOnBezierCurves } from "points-on-curve";
 import type {
   Curve,
   Degrees,
+  GenericPoint,
   GlobalPoint,
   LineSegment,
   LocalPoint,
@@ -1057,7 +1058,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];
@@ -1070,7 +1071,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) {

packages/element/src/collision.ts

@@ -19,9 +19,9 @@ import { isPointInShape, isPointOnShape } from "@excalidraw/utils/collision";
 import { type GeometricShape, getPolygonShape } from "@excalidraw/utils/shape";
 
 import type {
+  GenericPoint,
   GlobalPoint,
   LineSegment,
-  LocalPoint,
   Polygon,
   Radians,
 } from "@excalidraw/math";
@@ -72,7 +72,7 @@ export const shouldTestInside = (element: ExcalidrawElement) => {
   return isDraggableFromInside || isImageElement(element);
 };
 
-export type HitTestArgs<Point extends GlobalPoint | LocalPoint> = {
+export type HitTestArgs<Point extends GenericPoint> = {
   x: number;
   y: number;
   element: ExcalidrawElement;
@@ -81,7 +81,7 @@ export type HitTestArgs<Point extends GlobalPoint | LocalPoint> = {
   frameNameBound?: FrameNameBounds | null;
 };
 
-export const hitElementItself = <Point extends GlobalPoint | LocalPoint>({
+export const hitElementItself = <Point extends GenericPoint>({
   x,
   y,
   element,
@@ -127,9 +127,7 @@ export const hitElementBoundingBox = (
   );
 };
 
-export const hitElementBoundingBoxOnly = <
+export const hitElementBoundingBoxOnly = <Point extends GenericPoint>(
-  Point extends GlobalPoint | LocalPoint,
->(
   hitArgs: HitTestArgs<Point>,
   elementsMap: ElementsMap,
 ) => {
@@ -145,7 +143,7 @@ export const hitElementBoundingBoxOnly = <
   );
 };
 
-export const hitElementBoundText = <Point extends GlobalPoint | LocalPoint>(
+export const hitElementBoundText = <Point extends GenericPoint>(
   x: number,
   y: number,
   textShape: GeometricShape<Point> | null,

packages/element/src/dragElements.ts

@@ -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?: {
+  originOffset?: GenericPoint | null;
-    x: number;
-    y: number;
-  } | 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),
+        x: newX + originOffsetX,
-        y: newY + (originOffset?.y ?? 0),
+        y: newY + originOffsetY,
         width,
         height,
         ...textAutoResize,

packages/element/src/elbowArrow.ts

@@ -9,6 +9,7 @@ import {
   vectorCross,
   vectorFromPoint,
   vectorScale,
+  type GenericPoint,
   type GlobalPoint,
   type LocalPoint,
 } from "@excalidraw/math";
@@ -1642,7 +1643,7 @@ const pathTo = (start: Node, node: Node) => {
   return path;
 };
 
-const m_dist = (a: GlobalPoint | LocalPoint, b: GlobalPoint | LocalPoint) =>
+const m_dist = (a: GenericPoint, b: GenericPoint) =>
   Math.abs(a[0] - b[0]) + Math.abs(a[1] - b[1]);
 
 /**
@@ -2291,7 +2292,7 @@ const getHoveredElement = (
 const gridAddressesEqual = (a: GridAddress, b: GridAddress): boolean =>
   a[0] === b[0] && a[1] === b[1];
 
-export const validateElbowPoints = <P extends GlobalPoint | LocalPoint>(
+export const validateElbowPoints = <P extends GenericPoint>(
   points: readonly P[],
   tolerance: number = DEDUP_TRESHOLD,
 ) =>

packages/element/src/frame.ts

@@ -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";
 
@@ -152,11 +156,8 @@ export const elementOverlapsWithFrame = (
   );
 };
 
-export const isCursorInFrame = (
+export const isCursorInFrame = <Point extends GenericPoint>(
-  cursorCoords: {
+  cursorCoords: Point,
-    x: number;
-    y: number;
-  },
   frame: NonDeleted<ExcalidrawFrameLikeElement>,
   elementsMap: ElementsMap,
 ) => {
@@ -164,7 +165,7 @@ export const isCursorInFrame = (
 
   return isPointWithinBounds(
     pointFrom(fx1, fy1),
-    pointFrom(cursorCoords.x, cursorCoords.y),
+    cursorCoords,
     pointFrom(fx2, fy2),
   );
 };

packages/element/src/heading.ts

@@ -13,10 +13,10 @@ import {
 } from "@excalidraw/math";
 
 import type {
-  LocalPoint,
   GlobalPoint,
   Triangle,
   Vector,
+  GenericPoint,
 } from "@excalidraw/math";
 
 import { getCenterForBounds, type Bounds } from "./bounds";
@@ -43,12 +43,10 @@ export const vectorToHeading = (vec: Vector): Heading => {
   return HEADING_UP;
 };
 
-export const headingForPoint = <P extends GlobalPoint | LocalPoint>(
+export const headingForPoint = <P extends GenericPoint>(p: P, o: P) =>
-  p: P,
+  vectorToHeading(vectorFromPoint<P>(p, o));
-  o: P,
-) => vectorToHeading(vectorFromPoint<P>(p, o));
 
-export const headingForPointIsHorizontal = <P extends GlobalPoint | LocalPoint>(
+export const headingForPointIsHorizontal = <P extends GenericPoint>(
   p: P,
   o: P,
 ) => headingIsHorizontal(headingForPoint<P>(p, o));

packages/element/src/linearElementEditor.ts

@@ -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,
+          scenePointerX - pointerOffsetX,
-          scenePointerY - linearElementEditor.pointerOffset.y,
+          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,
+                    scenePointerX - pointerOffsetX,
-                    scenePointerY - linearElementEditor.pointerOffset.y,
+                    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,
+      scenePointerX,
-      scenePointer.y,
+      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,
+              scenePointerX,
-              scenePointer.y,
+              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,
+      scenePointerX,
-      scenePointer.y,
+      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
-        ? {
+        ? pointFrom(
-            x: scenePointer.x - targetPoint[0],
+            scenePointerX - targetPoint[0],
-            y: scenePointer.y - targetPoint[1],
+            scenePointerY - targetPoint[1],
-          }
+          )
-        : { x: 0, y: 0 },
+        : 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,
+        scenePointerX - pointerOffsetX,
-        scenePointerY - appState.editingLinearElement.pointerOffset.y,
+        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(
+    const dist = pointDistance(origin, pointerCoords);
-      pointFrom(origin.x, origin.y),
-      pointFrom(pointerCoords.x, pointerCoords.y),
-    );
     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,
+      pointerX,
-      pointerCoords.y,
+      pointerY,
       snapToGrid && !isElbowArrow(element) ? app.getEffectiveGridSize() : null,
     );
     const points = [
@@ -1528,31 +1534,28 @@ export class LinearElementEditor {
     element: NonDeleted<ExcalidrawLinearElement>,
     elementsMap: ElementsMap,
     referencePoint: LocalPoint,
-    scenePointer: GlobalPoint,
+    [scenePointerX, scenePointerY]: GlobalPoint,
     gridSize: NullableGridSize,
   ) {
-    const referencePointCoords = LinearElementEditor.getPointGlobalCoordinates(
+    const [referencePointCoordsX, referencePointCoordsY] =
-      element,
+      LinearElementEditor.getPointGlobalCoordinates(
-      referencePoint,
+        element,
-      elementsMap,
+        referencePoint,
-    );
+        elementsMap,
+      );
 
     if (isElbowArrow(element)) {
       return [
-        scenePointer[0] - referencePointCoords[0],
+        scenePointerX - referencePointCoordsX,
-        scenePointer[1] - referencePointCoords[1],
+        scenePointerY - referencePointCoordsY,
       ];
     }
 
-    const [gridX, gridY] = getGridPoint(
+    const [gridX, gridY] = getGridPoint(scenePointerX, scenePointerY, gridSize);
-      scenePointer[0],
-      scenePointer[1],
-      gridSize,
-    );
 
     const { width, height } = getLockedLinearCursorAlignSize(
-      referencePointCoords[0],
+      referencePointCoordsX,
-      referencePointCoords[1],
+      referencePointCoordsY,
       gridX,
       gridY,
     );

packages/element/src/resizeTest.ts

@@ -7,7 +7,7 @@ import {
 
 import { SIDE_RESIZING_THRESHOLD } from "@excalidraw/common";
 
-import type { GlobalPoint, LineSegment, LocalPoint } from "@excalidraw/math";
+import type { GenericPoint, LineSegment } from "@excalidraw/math";
 
 import type { AppState, Device, Zoom } from "@excalidraw/excalidraw/types";
 
@@ -43,7 +43,7 @@ const isInsideTransformHandle = (
   y >= transformHandle[1] &&
   y <= transformHandle[1] + transformHandle[3];
 
-export const resizeTest = <Point extends GlobalPoint | LocalPoint>(
+export const resizeTest = <Point extends GenericPoint>(
   element: NonDeletedExcalidrawElement,
   elementsMap: ElementsMap,
   appState: AppState,
@@ -152,9 +152,7 @@ export const getElementWithTransformHandleType = (
   }, null as { element: NonDeletedExcalidrawElement; transformHandleType: MaybeTransformHandleType } | null);
 };
 
-export const getTransformHandleTypeFromCoords = <
+export const getTransformHandleTypeFromCoords = <Point extends GenericPoint>(
-  Point extends GlobalPoint | LocalPoint,
->(
   [x1, y1, x2, y2]: Bounds,
   scenePointerX: number,
   scenePointerY: number,
@@ -271,7 +269,7 @@ export const getCursorForResizingElement = (resizingElement: {
   return cursor ? `${cursor}-resize` : "";
 };
 
-const getSelectionBorders = <Point extends LocalPoint | GlobalPoint>(
+const getSelectionBorders = <Point extends GenericPoint>(
   [x1, y1]: Point,
   [x2, y2]: Point,
   center: Point,

packages/element/src/shapes.ts

@@ -13,8 +13,7 @@ import {
   pointFromPair,
   pointRotateRads,
   pointsEqual,
-  type GlobalPoint,
+  type GenericPoint,
-  type LocalPoint,
 } from "@excalidraw/math";
 import {
   getClosedCurveShape,
@@ -46,7 +45,7 @@ import type {
  * get the pure geometric shape of an excalidraw elementw
  * which is then used for hit detection
  */
-export const getElementShape = <Point extends GlobalPoint | LocalPoint>(
+export const getElementShape = <Point extends GenericPoint>(
   element: ExcalidrawElement,
   elementsMap: ElementsMap,
 ): GeometricShape<Point> => {
@@ -98,7 +97,7 @@ export const getElementShape = <Point extends GlobalPoint | LocalPoint>(
   }
 };
 
-export const getBoundTextShape = <Point extends GlobalPoint | LocalPoint>(
+export const getBoundTextShape = <Point extends GenericPoint>(
   element: ExcalidrawElement,
   elementsMap: ElementsMap,
 ): GeometricShape<Point> | null => {
@@ -126,9 +125,7 @@ export const getBoundTextShape = <Point extends GlobalPoint | LocalPoint>(
   return null;
 };
 
-export const getControlPointsForBezierCurve = <
+export const getControlPointsForBezierCurve = <P extends GenericPoint>(
-  P extends GlobalPoint | LocalPoint,
->(
   element: NonDeleted<ExcalidrawLinearElement>,
   endPoint: P,
 ) => {
@@ -170,7 +167,7 @@ export const getControlPointsForBezierCurve = <
   return controlPoints;
 };
 
-export const getBezierXY = <P extends GlobalPoint | LocalPoint>(
+export const getBezierXY = <P extends GenericPoint>(
   p0: P,
   p1: P,
   p2: P,
@@ -187,7 +184,7 @@ export const getBezierXY = <P extends GlobalPoint | LocalPoint>(
   return pointFrom(tx, ty);
 };
 
-const getPointsInBezierCurve = <P extends GlobalPoint | LocalPoint>(
+const getPointsInBezierCurve = <P extends GenericPoint>(
   element: NonDeleted<ExcalidrawLinearElement>,
   endPoint: P,
 ) => {
@@ -217,7 +214,7 @@ const getPointsInBezierCurve = <P extends GlobalPoint | LocalPoint>(
   return pointsOnCurve;
 };
 
-const getBezierCurveArcLengths = <P extends GlobalPoint | LocalPoint>(
+const getBezierCurveArcLengths = <P extends GenericPoint>(
   element: NonDeleted<ExcalidrawLinearElement>,
   endPoint: P,
 ) => {
@@ -236,7 +233,7 @@ const getBezierCurveArcLengths = <P extends GlobalPoint | LocalPoint>(
   return arcLengths;
 };
 
-export const getBezierCurveLength = <P extends GlobalPoint | LocalPoint>(
+export const getBezierCurveLength = <P extends GenericPoint>(
   element: NonDeleted<ExcalidrawLinearElement>,
   endPoint: P,
 ) => {
@@ -245,7 +242,7 @@ export const getBezierCurveLength = <P extends GlobalPoint | LocalPoint>(
 };
 
 // This maps interval to actual interval t on the curve so that when t = 0.5, its actually the point at 50% of the length
-export const mapIntervalToBezierT = <P extends GlobalPoint | LocalPoint>(
+export const mapIntervalToBezierT = <P extends GenericPoint>(
   element: NonDeleted<ExcalidrawLinearElement>,
   endPoint: P,
   interval: number, // The interval between 0 to 1 for which you want to find the point on the curve,
@@ -340,7 +337,7 @@ export const aabbForElement = (
   return bounds;
 };
 
-export const pointInsideBounds = <P extends GlobalPoint | LocalPoint>(
+export const pointInsideBounds = <P extends GenericPoint>(
   p: P,
   bounds: Bounds,
 ): boolean =>

packages/element/src/sizeHelpers.ts

@@ -37,26 +37,28 @@ 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,
+        clientX: viewTransformations.offsetLeft,
-    },
+        clientY: viewTransformations.offsetTop,
-    viewTransformations,
+      },
-  );
+      viewTransformations,
-  const bottomRightSceneCoords = viewportCoordsToSceneCoords(
+    );
-    {
+  const [bottomRightSceneCoordsX, bottomRightSceneCoordsY] =
-      clientX: viewTransformations.offsetLeft + width,
+    viewportCoordsToSceneCoords(
-      clientY: viewTransformations.offsetTop + height,
+      {
-    },
+        clientX: viewTransformations.offsetLeft + width,
-    viewTransformations,
+        clientY: viewTransformations.offsetTop + height,
-  );
+      },
+      viewTransformations,
+    );
 
   return (
-    topLeftSceneCoords.x <= x2 &&
+    topLeftSceneCoordsX <= x2 &&
-    topLeftSceneCoords.y <= y2 &&
+    topLeftSceneCoordsY <= y2 &&
-    bottomRightSceneCoords.x >= x1 &&
+    bottomRightSceneCoordsX >= x1 &&
-    bottomRightSceneCoords.y >= y1
+    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),
+        clientX: viewTransformations.offsetLeft + (padding?.left || 0),
-    },
+        clientY: viewTransformations.offsetTop + (padding?.top || 0),
-    viewTransformations,
+      },
-  );
+      viewTransformations,
-  const bottomRightSceneCoords = viewportCoordsToSceneCoords(
+    );
-    {
+  const [bottomRightSceneCoordsX, bottomRightSceneCoordsY] =
-      clientX: viewTransformations.offsetLeft + width - (padding?.right || 0),
+    viewportCoordsToSceneCoords(
-      clientY: viewTransformations.offsetTop + height - (padding?.bottom || 0),
+      {
-    },
+        clientX: viewTransformations.offsetLeft + width - (padding?.right || 0),
-    viewTransformations,
+        clientY:
-  );
+          viewTransformations.offsetTop + height - (padding?.bottom || 0),
+      },
+      viewTransformations,
+    );
 
   return (
-    x1 >= topLeftSceneCoords.x &&
+    x1 >= topLeftSceneCoordsX &&
-    y1 >= topLeftSceneCoords.y &&
+    y1 >= topLeftSceneCoordsY &&
-    x2 <= bottomRightSceneCoords.x &&
+    x2 <= bottomRightSceneCoordsX &&
-    y2 <= bottomRightSceneCoords.y
+    y2 <= bottomRightSceneCoordsY
   );
 };
 

packages/excalidraw/actions/actionCanvas.tsx

@@ -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,

packages/excalidraw/actions/actionFinalize.tsx

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

packages/excalidraw/animated-trail.ts

@@ -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

packages/excalidraw/appState.ts

@@ -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: {
+    originSnapOffset: pointFrom(0, 0),
-      x: 0,
-      y: 0,
-    },
     objectsSnapModeEnabled: false,
     userToFollow: null,
     followedBy: new Set(),

packages/excalidraw/clients.ts

@@ -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);
 

packages/excalidraw/components/ElementCanvasButtons.tsx

@@ -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,
   );

packages/excalidraw/components/EyeDropper.tsx

@@ -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,
+      clientX: stablePropsAppLastViewportPositionX,
-      clientY: stableProps.app.lastViewportPosition.y,
+      clientY: stablePropsAppLastViewportPositionY,
       altKey: false,
     });
 

packages/excalidraw/components/hyperlink/Hyperlink.tsx

@@ -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,
+      left: linkViewportCoordX,
-      top: linkViewportCoords.y,
+      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,
   );

packages/excalidraw/gesture.ts

@@ -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 {
+  return pointFrom(
-    x: sum(allCoords, (coords) => coords.x) / allCoords.length,
+    sum(allCoords, ([coordsX, _]) => coordsX) / allCoords.length,
-    y: sum(allCoords, (coords) => coords.y) / allCoords.length,
+    sum(allCoords, ([_, coordsY]) => coordsY) / allCoords.length,
-  };
+  );
 };
 
-export const getDistance = ([a, b]: readonly PointerCoords[]) =>
+export const isTwoPointerCoords = <Point extends GenericPoint>(
-  Math.hypot(a.x - b.x, a.y - b.y);
+  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);

packages/excalidraw/renderer/interactiveScene.ts

@@ -2,8 +2,8 @@ import oc from "open-color";
 import {
   pointFrom,
   type GlobalPoint,
-  type LocalPoint,
   type Radians,
+  type GenericPoint,
 } from "@excalidraw/math";
 
 import {
@@ -144,7 +144,7 @@ const renderLinearElementPointHighlight = (
   context.restore();
 };
 
-const highlightPoint = <Point extends LocalPoint | GlobalPoint>(
+const highlightPoint = <Point extends GenericPoint>(
   point: Point,
   context: CanvasRenderingContext2D,
   appState: InteractiveCanvasAppState,
@@ -211,7 +211,7 @@ const strokeDiamondWithRotation = (
   context.restore();
 };
 
-const renderSingleLinearPoint = <Point extends GlobalPoint | LocalPoint>(
+const renderSingleLinearPoint = <Point extends GenericPoint>(
   context: CanvasRenderingContext2D,
   appState: InteractiveCanvasAppState,
   point: Point,

packages/excalidraw/renderer/renderSnaps.ts

@@ -1,4 +1,4 @@
-import { pointFrom, type GlobalPoint, type LocalPoint } from "@excalidraw/math";
+import { pointFrom, type GenericPoint } from "@excalidraw/math";
 
 import { THEME } from "@excalidraw/common";
 
@@ -88,7 +88,7 @@ const drawPointerSnapLine = (
   }
 };
 
-const drawCross = <Point extends LocalPoint | GlobalPoint>(
+const drawCross = <Point extends GenericPoint>(
   [x, y]: Point,
   appState: InteractiveCanvasAppState,
   context: CanvasRenderingContext2D,
@@ -109,7 +109,7 @@ const drawCross = <Point extends LocalPoint | GlobalPoint>(
   context.restore();
 };
 
-const drawLine = <Point extends LocalPoint | GlobalPoint>(
+const drawLine = <Point extends GenericPoint>(
   from: Point,
   to: Point,
   context: CanvasRenderingContext2D,
@@ -120,7 +120,7 @@ const drawLine = <Point extends LocalPoint | GlobalPoint>(
   context.stroke();
 };
 
-const drawGapLine = <Point extends LocalPoint | GlobalPoint>(
+const drawGapLine = <Point extends GenericPoint>(
   from: Point,
   to: Point,
   direction: "horizontal" | "vertical",

packages/excalidraw/scene/scroll.ts

@@ -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,
   });

packages/excalidraw/scene/types.ts

@@ -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>;

packages/excalidraw/snapping.ts

@@ -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: {
+    originOffset: pointFrom(
-      x:
+      verticalSnapLines.length > 0
-        verticalSnapLines.length > 0
+        ? verticalSnapLines[0].points[0][0] - pointer.x
-          ? verticalSnapLines[0].points[0][0] - pointer.x
+        : 0,
-          : 0,
+      horizontalSnapLines.length > 0
-      y:
+        ? horizontalSnapLines[0].points[0][1] - pointer.y
-        horizontalSnapLines.length > 0
+        : 0,
-          ? horizontalSnapLines[0].points[0][1] - pointer.y
+    ),
-          : 0,
-    },
     snapLines: [...verticalSnapLines, ...horizontalSnapLines],
   };
 };

packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap

@@ -945,10 +945,10 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -7758,10 +7758,10 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -9754,10 +9754,10 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,

packages/excalidraw/tests/__snapshots__/history.test.tsx.snap

@@ -1178,10 +1178,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -1550,10 +1550,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -1923,10 +1923,10 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -2634,10 +2634,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -2937,10 +2937,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -3225,10 +3225,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -3523,10 +3523,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -3813,10 +3813,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -4052,10 +4052,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -4315,10 +4315,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -4592,10 +4592,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -4827,10 +4827,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -5062,10 +5062,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -5295,10 +5295,10 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -5528,10 +5528,10 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -6937,10 +6937,10 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -9984,10 +9984,10 @@ exports[`history > multiplayer undo/redo > should override remotely added groups
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -10872,10 +10872,10 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -12476,10 +12476,10 @@ exports[`history > singleplayer undo/redo > should create new history entry on s
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -13804,10 +13804,10 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -14272,10 +14272,10 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -14822,10 +14822,10 @@ exports[`history > singleplayer undo/redo > should support appstate name or view
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,

packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -8566,10 +8566,10 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
         "value": null,
       },
     },
-    "pointerOffset": {
+    "pointerOffset": [
-      "x": 0,
+      0,
-      "y": 0,
+      0,
-    },
+    ],
     "segmentMidPointHoveredCoords": null,
     "selectedPointsIndices": null,
     "startBindingElement": "keep",
@@ -8790,10 +8790,10 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
         "value": null,
       },
     },
-    "pointerOffset": {
+    "pointerOffset": [
-      "x": 0,
+      0,
-      "y": 0,
+      0,
-    },
+    ],
     "segmentMidPointHoveredCoords": null,
     "selectedPointsIndices": null,
     "startBindingElement": "keep",
@@ -9208,10 +9208,10 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
         "value": null,
       },
     },
-    "pointerOffset": {
+    "pointerOffset": [
-      "x": 0,
+      0,
-      "y": 0,
+      0,
-    },
+    ],
     "segmentMidPointHoveredCoords": null,
     "selectedPointsIndices": null,
     "startBindingElement": "keep",
@@ -9613,10 +9613,10 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
         "value": null,
       },
     },
-    "pointerOffset": {
+    "pointerOffset": [
-      "x": 0,
+      0,
-      "y": 0,
+      0,
-    },
+    ],
     "segmentMidPointHoveredCoords": null,
     "selectedPointsIndices": null,
     "startBindingElement": "keep",
@@ -12796,10 +12796,10 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,
@@ -14750,10 +14750,10 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,

packages/excalidraw/types.ts

@@ -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: {
+  originSnapOffset: GenericPoint | null;
-    x: number;
-    y: number;
-  } | 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<{
+export type PointerCoords = Readonly<GenericPoint>;
-  x: number;
-  y: number;
-}>;
 
 export type Gesture = {
   pointers: Map<number, PointerCoords>;
-  lastCenter: { x: number; y: number } | null;
+  lastCenter: PointerCoords | null;
   initialDistance: number | null;
   initialScale: number | null;
 };
@@ -718,13 +713,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;
   // original element frozen snapshots so we can access the original
   // element attribute values at time of pointerdown
   originalElements: Map<string, NonDeleted<ExcalidrawElement>>;
@@ -734,11 +729,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
@@ -759,10 +754,10 @@ 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;
     // by default same as PointerDownState.origin. On alt-duplication, reset
     // to current pointer position at time of duplication.
-    origin: { x: number; y: number };
+    origin: GenericPoint;
   };
   // We need to have these in the state so that we can unsubscribe them
   eventListeners: {

packages/math/src/angle.ts

@@ -1,12 +1,6 @@
 import { PRECISION } from "./utils";
 
-import type {
+import type { Degrees, GenericPoint, PolarCoords, Radians } from "./types";
-  Degrees,
-  GlobalPoint,
-  LocalPoint,
-  PolarCoords,
-  Radians,
-} from "./types";
 
 // TODO: Simplify with modulo and fix for angles beyond 4*Math.PI and - 4*Math.PI
 export const normalizeRadians = (angle: Radians): Radians => {
@@ -24,7 +18,7 @@ export const normalizeRadians = (angle: Radians): Radians => {
  * (x, y) for the center point 0,0 where the first number returned is the radius,
  * the second is the angle in radians.
  */
-export const cartesian2Polar = <P extends GlobalPoint | LocalPoint>([
+export const cartesian2Polar = <P extends GenericPoint>([
   x,
   y,
 ]: P): PolarCoords => [

packages/math/src/curve.ts

@@ -3,7 +3,7 @@ import type { Bounds } from "@excalidraw/element/bounds";
 import { isPoint, pointDistance, pointFrom } from "./point";
 import { rectangle, rectangleIntersectLineSegment } from "./rectangle";
 
-import type { Curve, GlobalPoint, LineSegment, LocalPoint } from "./types";
+import type { Curve, GenericPoint, LineSegment } from "./types";
 
 /**
  *
@@ -13,7 +13,7 @@ import type { Curve, GlobalPoint, LineSegment, LocalPoint } from "./types";
  * @param d
  * @returns
  */
-export function curve<Point extends GlobalPoint | LocalPoint>(
+export function curve<Point extends GenericPoint>(
   a: Point,
   b: Point,
   c: Point,
@@ -82,7 +82,7 @@ function solve(
   return [t0, s0];
 }
 
-const bezierEquation = <Point extends GlobalPoint | LocalPoint>(
+const bezierEquation = <Point extends GenericPoint>(
   c: Curve<Point>,
   t: number,
 ) =>
@@ -100,9 +100,10 @@ const bezierEquation = <Point extends GlobalPoint | LocalPoint>(
 /**
  * Computes the intersection between a cubic spline and a line segment.
  */
-export function curveIntersectLineSegment<
+export function curveIntersectLineSegment<Point extends GenericPoint>(
-  Point extends GlobalPoint | LocalPoint,
+  c: Curve<Point>,
->(c: Curve<Point>, l: LineSegment<Point>): Point[] {
+  l: LineSegment<Point>,
+): Point[] {
   // Optimize by doing a cheap bounding box check first
   const bounds = curveBounds(c);
   if (
@@ -188,7 +189,7 @@ export function curveIntersectLineSegment<
  * @param maxLevel
  * @returns
  */
-export function curveClosestPoint<Point extends GlobalPoint | LocalPoint>(
+export function curveClosestPoint<Point extends GenericPoint>(
   c: Curve<Point>,
   p: Point,
   tolerance: number = 1e-3,
@@ -245,7 +246,7 @@ export function curveClosestPoint<Point extends GlobalPoint | LocalPoint>(
  * @param c The curve to test
  * @param p The point to measure from
  */
-export function curvePointDistance<Point extends GlobalPoint | LocalPoint>(
+export function curvePointDistance<Point extends GenericPoint>(
   c: Curve<Point>,
   p: Point,
 ) {
@@ -261,9 +262,7 @@ export function curvePointDistance<Point extends GlobalPoint | LocalPoint>(
 /**
  * Determines if the parameter is a Curve
  */
-export function isCurve<P extends GlobalPoint | LocalPoint>(
+export function isCurve<P extends GenericPoint>(v: unknown): v is Curve<P> {
-  v: unknown,
-): v is Curve<P> {
   return (
     Array.isArray(v) &&
     v.length === 4 &&
@@ -274,9 +273,7 @@ export function isCurve<P extends GlobalPoint | LocalPoint>(
   );
 }
 
-function curveBounds<Point extends GlobalPoint | LocalPoint>(
+function curveBounds<Point extends GenericPoint>(c: Curve<Point>): Bounds {
-  c: Curve<Point>,
-): Bounds {
   const [P0, P1, P2, P3] = c;
   const x = [P0[0], P1[0], P2[0], P3[0]];
   const y = [P0[1], P1[1], P2[1], P3[1]];

packages/math/src/ellipse.ts

@@ -13,13 +13,7 @@ import {
   vectorScale,
 } from "./vector";
 
-import type {
+import type { Ellipse, GenericPoint, Line, LineSegment } from "./types";
-  Ellipse,
-  GlobalPoint,
-  Line,
-  LineSegment,
-  LocalPoint,
-} from "./types";
 
 /**
  * Construct an Ellipse object from the parameters
@@ -30,7 +24,7 @@ import type {
  * @param halfHeight Half of the height of a non-slanted version of the ellipse
  * @returns The constructed Ellipse object
  */
-export function ellipse<Point extends GlobalPoint | LocalPoint>(
+export function ellipse<Point extends GenericPoint>(
   center: Point,
   halfWidth: number,
   halfHeight: number,
@@ -49,7 +43,7 @@ export function ellipse<Point extends GlobalPoint | LocalPoint>(
  * @param ellipse The ellipse to compare against
  * @returns TRUE if the point is inside or on the outline of the ellipse
  */
-export const ellipseIncludesPoint = <Point extends GlobalPoint | LocalPoint>(
+export const ellipseIncludesPoint = <Point extends GenericPoint>(
   p: Point,
   ellipse: Ellipse<Point>,
 ) => {
@@ -69,7 +63,7 @@ export const ellipseIncludesPoint = <Point extends GlobalPoint | LocalPoint>(
  * @param threshold The distance to consider a point close enough to be "on" the outline
  * @returns TRUE if the point is on the ellise outline
  */
-export const ellipseTouchesPoint = <Point extends GlobalPoint | LocalPoint>(
+export const ellipseTouchesPoint = <Point extends GenericPoint>(
   point: Point,
   ellipse: Ellipse<Point>,
   threshold = PRECISION,
@@ -85,9 +79,7 @@ export const ellipseTouchesPoint = <Point extends GlobalPoint | LocalPoint>(
  * @param ellipse The ellipse to calculate the distance to
  * @returns The eucledian distance
  */
-export const ellipseDistanceFromPoint = <
+export const ellipseDistanceFromPoint = <Point extends GenericPoint>(
-  Point extends GlobalPoint | LocalPoint,
->(
   p: Point,
   ellipse: Ellipse<Point>,
 ): number => {
@@ -140,9 +132,10 @@ export const ellipseDistanceFromPoint = <
  * Calculate a maximum of two intercept points for a line going throug an
  * ellipse.
  */
-export function ellipseSegmentInterceptPoints<
+export function ellipseSegmentInterceptPoints<Point extends GenericPoint>(
-  Point extends GlobalPoint | LocalPoint,
+  e: Readonly<Ellipse<Point>>,
->(e: Readonly<Ellipse<Point>>, s: Readonly<LineSegment<Point>>): Point[] {
+  s: Readonly<LineSegment<Point>>,
+): Point[] {
   const rx = e.halfWidth;
   const ry = e.halfHeight;
 
@@ -194,9 +187,7 @@ export function ellipseSegmentInterceptPoints<
   return intersections;
 }
 
-export function ellipseLineIntersectionPoints<
+export function ellipseLineIntersectionPoints<Point extends GenericPoint>(
-  Point extends GlobalPoint | LocalPoint,
->(
   { center, halfWidth, halfHeight }: Ellipse<Point>,
   [g, h]: Line<Point>,
 ): Point[] {

packages/math/src/line.ts

@@ -1,6 +1,6 @@
 import { pointFrom } from "./point";
 
-import type { GlobalPoint, Line, LocalPoint } from "./types";
+import type { GenericPoint, Line } from "./types";
 
 /**
  * Create a line from two points.
@@ -8,7 +8,7 @@ import type { GlobalPoint, Line, LocalPoint } from "./types";
  * @param points The two points lying on the line
  * @returns The line on which the points lie
  */
-export function line<P extends GlobalPoint | LocalPoint>(a: P, b: P): Line<P> {
+export function line<P extends GenericPoint>(a: P, b: P): Line<P> {
   return [a, b] as Line<P>;
 }
 
@@ -20,7 +20,7 @@ export function line<P extends GlobalPoint | LocalPoint>(a: P, b: P): Line<P> {
  * @param b
  * @returns
  */
-export function linesIntersectAt<Point extends GlobalPoint | LocalPoint>(
+export function linesIntersectAt<Point extends GenericPoint>(
   a: Line<Point>,
   b: Line<Point>,
 ): Point | null {

packages/math/src/point.ts

@@ -2,13 +2,7 @@ import { degreesToRadians } from "./angle";
 import { PRECISION } from "./utils";
 import { vectorFromPoint, vectorScale } from "./vector";
 
-import type {
+import type { Radians, Degrees, Vector, GenericPoint } from "./types";
-  LocalPoint,
-  GlobalPoint,
-  Radians,
-  Degrees,
-  Vector,
-} from "./types";
 
 /**
  * Create a properly typed Point instance from the X and Y coordinates.
@@ -17,7 +11,7 @@ import type {
  * @param y The Y coordinate
  * @returns The branded and created point
  */
-export function pointFrom<Point extends GlobalPoint | LocalPoint>(
+export function pointFrom<Point extends GenericPoint>(
   x: number,
   y: number,
 ): Point {
@@ -30,7 +24,7 @@ export function pointFrom<Point extends GlobalPoint | LocalPoint>(
  * @param numberArray The number array to check and to convert to Point
  * @returns The point instance
  */
-export function pointFromArray<Point extends GlobalPoint | LocalPoint>(
+export function pointFromArray<Point extends GenericPoint>(
   numberArray: number[],
 ): Point | undefined {
   return numberArray.length === 2
@@ -44,7 +38,7 @@ export function pointFromArray<Point extends GlobalPoint | LocalPoint>(
  * @param pair A number pair to convert to Point
  * @returns The point instance
  */
-export function pointFromPair<Point extends GlobalPoint | LocalPoint>(
+export function pointFromPair<Point extends GenericPoint>(
   pair: [number, number],
 ): Point {
   return pair as Point;
@@ -56,7 +50,7 @@ export function pointFromPair<Point extends GlobalPoint | LocalPoint>(
  * @param v The vector to convert
  * @returns The point the vector points at with origin 0,0
  */
-export function pointFromVector<P extends GlobalPoint | LocalPoint>(
+export function pointFromVector<P extends GenericPoint>(
   v: Vector,
   offset: P = pointFrom(0, 0),
 ): P {
@@ -69,7 +63,7 @@ export function pointFromVector<P extends GlobalPoint | LocalPoint>(
  * @param p The value to attempt verification on
  * @returns TRUE if the provided value has the shape of a local or global point
  */
-export function isPoint(p: unknown): p is LocalPoint | GlobalPoint {
+export function isPoint(p: unknown): p is GenericPoint {
   return (
     Array.isArray(p) &&
     p.length === 2 &&
@@ -88,7 +82,7 @@ export function isPoint(p: unknown): p is LocalPoint | GlobalPoint {
  * @param b Point The second point to compare
  * @returns TRUE if the points are sufficiently close to each other
  */
-export function pointsEqual<Point extends GlobalPoint | LocalPoint>(
+export function pointsEqual<Point extends GenericPoint>(
   a: Point,
   b: Point,
 ): boolean {
@@ -104,7 +98,7 @@ export function pointsEqual<Point extends GlobalPoint | LocalPoint>(
  * @param angle The radians to rotate the point by
  * @returns The rotated point
  */
-export function pointRotateRads<Point extends GlobalPoint | LocalPoint>(
+export function pointRotateRads<Point extends GenericPoint>(
   [x, y]: Point,
   [cx, cy]: Point,
   angle: Radians,
@@ -123,7 +117,7 @@ export function pointRotateRads<Point extends GlobalPoint | LocalPoint>(
  * @param angle The degree to rotate the point by
  * @returns The rotated point
  */
-export function pointRotateDegs<Point extends GlobalPoint | LocalPoint>(
+export function pointRotateDegs<Point extends GenericPoint>(
   point: Point,
   center: Point,
   angle: Degrees,
@@ -145,8 +139,8 @@ export function pointRotateDegs<Point extends GlobalPoint | LocalPoint>(
  */
 // TODO 99% of use is translating between global and local coords, which need to be formalized
 export function pointTranslate<
-  From extends GlobalPoint | LocalPoint,
+  From extends GenericPoint,
-  To extends GlobalPoint | LocalPoint,
+  To extends GenericPoint,
 >(p: From, v: Vector = [0, 0] as Vector): To {
   return pointFrom(p[0] + v[0], p[1] + v[1]);
 }
@@ -158,7 +152,7 @@ export function pointTranslate<
  * @param b The other point to create the middle point for
  * @returns The middle point
  */
-export function pointCenter<P extends LocalPoint | GlobalPoint>(a: P, b: P): P {
+export function pointCenter<P extends GenericPoint>(a: P, b: P): P {
   return pointFrom((a[0] + b[0]) / 2, (a[1] + b[1]) / 2);
 }
 
@@ -169,10 +163,7 @@ export function pointCenter<P extends LocalPoint | GlobalPoint>(a: P, b: P): P {
  * @param b Second point
  * @returns The euclidean distance between the two points.
  */
-export function pointDistance<P extends LocalPoint | GlobalPoint>(
+export function pointDistance<P extends GenericPoint>(a: P, b: P): number {
-  a: P,
-  b: P,
-): number {
   return Math.hypot(b[0] - a[0], b[1] - a[1]);
 }
 
@@ -185,10 +176,7 @@ export function pointDistance<P extends LocalPoint | GlobalPoint>(
  * @param b Second point
  * @returns The euclidean distance between the two points.
  */
-export function pointDistanceSq<P extends LocalPoint | GlobalPoint>(
+export function pointDistanceSq<P extends GenericPoint>(a: P, b: P): number {
-  a: P,
-  b: P,
-): number {
   const xDiff = b[0] - a[0];
   const yDiff = b[1] - a[1];
 
@@ -203,7 +191,7 @@ export function pointDistanceSq<P extends LocalPoint | GlobalPoint>(
  * @param multiplier The scaling factor
  * @returns
  */
-export const pointScaleFromOrigin = <P extends GlobalPoint | LocalPoint>(
+export const pointScaleFromOrigin = <P extends GenericPoint>(
   p: P,
   mid: P,
   multiplier: number,
@@ -218,7 +206,7 @@ export const pointScaleFromOrigin = <P extends GlobalPoint | LocalPoint>(
  * @param r The other point to compare against
  * @returns TRUE if q is indeed between p and r
  */
-export const isPointWithinBounds = <P extends GlobalPoint | LocalPoint>(
+export const isPointWithinBounds = <P extends GenericPoint>(
   p: P,
   q: P,
   r: P,

packages/math/src/polygon.ts

@@ -2,21 +2,17 @@ import { pointsEqual } from "./point";
 import { lineSegment, pointOnLineSegment } from "./segment";
 import { PRECISION } from "./utils";
 
-import type { GlobalPoint, LocalPoint, Polygon } from "./types";
+import type { GenericPoint, Polygon } from "./types";
 
-export function polygon<Point extends GlobalPoint | LocalPoint>(
+export function polygon<Point extends GenericPoint>(...points: Point[]) {
-  ...points: Point[]
-) {
   return polygonClose(points) as Polygon<Point>;
 }
 
-export function polygonFromPoints<Point extends GlobalPoint | LocalPoint>(
+export function polygonFromPoints<Point extends GenericPoint>(points: Point[]) {
-  points: Point[],
-) {
   return polygonClose(points) as Polygon<Point>;
 }
 
-export const polygonIncludesPoint = <Point extends LocalPoint | GlobalPoint>(
+export const polygonIncludesPoint = <Point extends GenericPoint>(
   point: Point,
   polygon: Polygon<Point>,
 ) => {
@@ -69,7 +65,7 @@ export const polygonIncludesPointNonZero = <Point extends [number, number]>(
   return windingNumber !== 0;
 };
 
-export const pointOnPolygon = <Point extends LocalPoint | GlobalPoint>(
+export const pointOnPolygon = <Point extends GenericPoint>(
   p: Point,
   poly: Polygon<Point>,
   threshold = PRECISION,
@@ -86,16 +82,12 @@ export const pointOnPolygon = <Point extends LocalPoint | GlobalPoint>(
   return on;
 };
 
-function polygonClose<Point extends LocalPoint | GlobalPoint>(
+function polygonClose<Point extends GenericPoint>(polygon: Point[]) {
-  polygon: Point[],
-) {
   return polygonIsClosed(polygon)
     ? polygon
     : ([...polygon, polygon[0]] as Polygon<Point>);
 }
 
-function polygonIsClosed<Point extends LocalPoint | GlobalPoint>(
+function polygonIsClosed<Point extends GenericPoint>(polygon: Point[]) {
-  polygon: Point[],
-) {
   return pointsEqual(polygon[0], polygon[polygon.length - 1]);
 }

packages/math/src/rectangle.ts

@@ -1,18 +1,19 @@
 import { pointFrom } from "./point";
 import { lineSegment, lineSegmentIntersectionPoints } from "./segment";
 
-import type { GlobalPoint, LineSegment, LocalPoint, Rectangle } from "./types";
+import type { GenericPoint, LineSegment, Rectangle } from "./types";
 
-export function rectangle<P extends GlobalPoint | LocalPoint>(
+export function rectangle<P extends GenericPoint>(
   topLeft: P,
   bottomRight: P,
 ): Rectangle<P> {
   return [topLeft, bottomRight] as Rectangle<P>;
 }
 
-export function rectangleIntersectLineSegment<
+export function rectangleIntersectLineSegment<Point extends GenericPoint>(
-  Point extends LocalPoint | GlobalPoint,
+  r: Rectangle<Point>,
->(r: Rectangle<Point>, l: LineSegment<Point>): Point[] {
+  l: LineSegment<Point>,
+): Point[] {
   return [
     lineSegment(r[0], pointFrom(r[1][0], r[0][1])),
     lineSegment(pointFrom(r[1][0], r[0][1]), r[1]),

packages/math/src/segment.ts

@@ -14,7 +14,7 @@ import {
   vectorSubtract,
 } from "./vector";
 
-import type { GlobalPoint, LineSegment, LocalPoint, Radians } from "./types";
+import type { GenericPoint, LineSegment, Radians } from "./types";
 
 /**
  * Create a line segment from two points.
@@ -22,7 +22,7 @@ import type { GlobalPoint, LineSegment, LocalPoint, Radians } from "./types";
  * @param points The two points delimiting the line segment on each end
  * @returns The line segment delineated by the points
  */
-export function lineSegment<P extends GlobalPoint | LocalPoint>(
+export function lineSegment<P extends GenericPoint>(
   a: P,
   b: P,
 ): LineSegment<P> {
@@ -34,7 +34,7 @@ export function lineSegment<P extends GlobalPoint | LocalPoint>(
  * @param segment
  * @returns
  */
-export const isLineSegment = <Point extends GlobalPoint | LocalPoint>(
+export const isLineSegment = <Point extends GenericPoint>(
   segment: unknown,
 ): segment is LineSegment<Point> =>
   Array.isArray(segment) &&
@@ -51,7 +51,7 @@ export const isLineSegment = <Point extends GlobalPoint | LocalPoint>(
  * @param origin
  * @returns
  */
-export const lineSegmentRotate = <Point extends LocalPoint | GlobalPoint>(
+export const lineSegmentRotate = <Point extends GenericPoint>(
   l: LineSegment<Point>,
   angle: Radians,
   origin?: Point,
@@ -66,7 +66,7 @@ export const lineSegmentRotate = <Point extends LocalPoint | GlobalPoint>(
  * Calculates the point two line segments with a definite start and end point
  * intersect at.
  */
-export const segmentsIntersectAt = <Point extends GlobalPoint | LocalPoint>(
+export const segmentsIntersectAt = <Point extends GenericPoint>(
   a: Readonly<LineSegment<Point>>,
   b: Readonly<LineSegment<Point>>,
 ): Point | null => {
@@ -99,7 +99,7 @@ export const segmentsIntersectAt = <Point extends GlobalPoint | LocalPoint>(
   return null;
 };
 
-export const pointOnLineSegment = <Point extends LocalPoint | GlobalPoint>(
+export const pointOnLineSegment = <Point extends GenericPoint>(
   point: Point,
   line: LineSegment<Point>,
   threshold = PRECISION,
@@ -113,7 +113,7 @@ export const pointOnLineSegment = <Point extends LocalPoint | GlobalPoint>(
   return distance < threshold;
 };
 
-export const distanceToLineSegment = <Point extends LocalPoint | GlobalPoint>(
+export const distanceToLineSegment = <Point extends GenericPoint>(
   point: Point,
   line: LineSegment<Point>,
 ) => {
@@ -158,9 +158,7 @@ export const distanceToLineSegment = <Point extends LocalPoint | GlobalPoint>(
  * @param s
  * @returns
  */
-export function lineSegmentIntersectionPoints<
+export function lineSegmentIntersectionPoints<Point extends GenericPoint>(
-  Point extends GlobalPoint | LocalPoint,
->(
   l: LineSegment<Point>,
   s: LineSegment<Point>,
   threshold?: number,

packages/math/src/triangle.ts

@@ -1,4 +1,4 @@
-import type { GlobalPoint, LocalPoint, Triangle } from "./types";
+import type { GenericPoint, Triangle } from "./types";
 
 // Types
 
@@ -11,7 +11,7 @@ import type { GlobalPoint, LocalPoint, Triangle } from "./types";
  * @param p The point to test whether is in the triangle
  * @returns TRUE if the point is inside of the triangle
  */
-export function triangleIncludesPoint<P extends GlobalPoint | LocalPoint>(
+export function triangleIncludesPoint<P extends GenericPoint>(
   [a, b, c]: Triangle<P>,
   p: P,
 ): boolean {

packages/math/src/types.ts

@@ -27,6 +27,12 @@ export type InclusiveRange = [number, number] & { _brand: "excalimath_degree" };
 // Point
 //
 
+/**
+ * Represents a 2D position in world or canvas space. A
+ * unintified glboal, viewport, or local coordinate.
+ */
+export type GenericPoint = GlobalPoint | ViewportPoint | LocalPoint;
+
 /**
  * Represents a 2D position in world or canvas space. A
  * global coordinate.
@@ -35,6 +41,14 @@ export type GlobalPoint = [x: number, y: number] & {
   _brand: "excalimath__globalpoint";
 };
 
+/**
+ * Represents a 2D position in world or viewport space. A
+ * viewport coordinate.
+ */
+export type ViewportPoint = [x: number, y: number] & {
+  _brand: "excalimath__viewportpoint";
+};
+
 /**
  * Represents a 2D position in whatever local space it's
  * needed. A local coordinate.
@@ -48,7 +62,7 @@ export type LocalPoint = [x: number, y: number] & {
 /**
  * A line is an infinitely long object with no width, depth, or curvature.
  */
-export type Line<P extends GlobalPoint | LocalPoint> = [p: P, q: P] & {
+export type Line<P extends GenericPoint> = [p: P, q: P] & {
   _brand: "excalimath_line";
 };
 
@@ -57,7 +71,7 @@ export type Line<P extends GlobalPoint | LocalPoint> = [p: P, q: P] & {
  * line that is bounded by two distinct end points, and
  * contains every point on the line that is between its endpoints.
  */
-export type LineSegment<P extends GlobalPoint | LocalPoint> = [a: P, b: P] & {
+export type LineSegment<P extends GenericPoint> = [a: P, b: P] & {
   _brand: "excalimath_linesegment";
 };
 
@@ -77,18 +91,14 @@ export type Vector = [u: number, v: number] & {
 /**
  * A triangle represented by 3 points
  */
-export type Triangle<P extends GlobalPoint | LocalPoint> = [
+export type Triangle<P extends GenericPoint> = [a: P, b: P, c: P] & {
-  a: P,
-  b: P,
-  c: P,
-] & {
   _brand: "excalimath__triangle";
 };
 
 /**
  * A rectangular shape represented by 4 points at its corners
  */
-export type Rectangle<P extends GlobalPoint | LocalPoint> = [a: P, b: P] & {
+export type Rectangle<P extends GenericPoint> = [a: P, b: P] & {
   _brand: "excalimath__rectangle";
 };
 
@@ -100,7 +110,7 @@ export type Rectangle<P extends GlobalPoint | LocalPoint> = [a: P, b: P] & {
  * A polygon is a closed shape by connecting the given points
  * rectangles and diamonds are modelled by polygons
  */
-export type Polygon<Point extends GlobalPoint | LocalPoint> = Point[] & {
+export type Polygon<Point extends GenericPoint> = Point[] & {
   _brand: "excalimath_polygon";
 };
 
@@ -111,12 +121,7 @@ export type Polygon<Point extends GlobalPoint | LocalPoint> = Point[] & {
 /**
  * Cubic bezier curve with four control points
  */
-export type Curve<Point extends GlobalPoint | LocalPoint> = [
+export type Curve<Point extends GenericPoint> = [Point, Point, Point, Point] & {
-  Point,
-  Point,
-  Point,
-  Point,
-] & {
   _brand: "excalimath_curve";
 };
 
@@ -131,7 +136,7 @@ export type PolarCoords = [
   but for the sake of simplicity, we've used halfWidth and halfHeight instead
   in replace of semi major and semi minor axes
  */
-export type Ellipse<Point extends GlobalPoint | LocalPoint> = {
+export type Ellipse<Point extends GenericPoint> = {
   center: Point;
   halfWidth: number;
   halfHeight: number;

packages/math/src/vector.ts

@@ -1,4 +1,4 @@
-import type { GlobalPoint, LocalPoint, Vector } from "./types";
+import type { GenericPoint, Vector } from "./types";
 
 /**
  * Create a vector from the x and y coordiante elements.
@@ -23,7 +23,7 @@ export function vector(
  * @param origin The origin point in a given coordiante system
  * @returns The created vector from the point and the origin
  */
-export function vectorFromPoint<Point extends GlobalPoint | LocalPoint>(
+export function vectorFromPoint<Point extends GenericPoint>(
   p: Point,
   origin: Point = [0, 0] as Point,
 ): Vector {

packages/utils/src/bbox.ts

@@ -1,17 +1,14 @@
 import {
   vectorCross,
   vectorFromPoint,
-  type GlobalPoint,
+  type GenericPoint,
-  type LocalPoint,
 } from "@excalidraw/math";
 
 import type { Bounds } from "@excalidraw/element/bounds";
 
-export type LineSegment<P extends LocalPoint | GlobalPoint> = [P, P];
+export type LineSegment<P extends GenericPoint> = [P, P];
 
-export function getBBox<P extends LocalPoint | GlobalPoint>(
+export function getBBox<P extends GenericPoint>(line: LineSegment<P>): Bounds {
-  line: LineSegment<P>,
-): Bounds {
   return [
     Math.min(line[0][0], line[1][0]),
     Math.min(line[0][1], line[1][1]),
@@ -26,10 +23,7 @@ export function doBBoxesIntersect(a: Bounds, b: Bounds) {
 
 const EPSILON = 0.000001;
 
-export function isPointOnLine<P extends GlobalPoint | LocalPoint>(
+export function isPointOnLine<P extends GenericPoint>(l: LineSegment<P>, p: P) {
-  l: LineSegment<P>,
-  p: P,
-) {
   const p1 = vectorFromPoint(l[1], l[0]);
   const p2 = vectorFromPoint(p, l[0]);
 
@@ -38,7 +32,7 @@ export function isPointOnLine<P extends GlobalPoint | LocalPoint>(
   return Math.abs(r) < EPSILON;
 }
 
-export function isPointRightOfLine<P extends GlobalPoint | LocalPoint>(
+export function isPointRightOfLine<P extends GenericPoint>(
   l: LineSegment<P>,
   p: P,
 ) {
@@ -48,9 +42,10 @@ export function isPointRightOfLine<P extends GlobalPoint | LocalPoint>(
   return vectorCross(p1, p2) < 0;
 }
 
-export function isLineSegmentTouchingOrCrossingLine<
+export function isLineSegmentTouchingOrCrossingLine<P extends GenericPoint>(
-  P extends GlobalPoint | LocalPoint,
+  a: LineSegment<P>,
->(a: LineSegment<P>, b: LineSegment<P>) {
+  b: LineSegment<P>,
+) {
   return (
     isPointOnLine(a, b[0]) ||
     isPointOnLine(a, b[1]) ||
@@ -61,7 +56,7 @@ export function isLineSegmentTouchingOrCrossingLine<
 }
 
 // https://martin-thoma.com/how-to-check-if-two-line-segments-intersect/
-export function doLineSegmentsIntersect<P extends GlobalPoint | LocalPoint>(
+export function doLineSegmentsIntersect<P extends GenericPoint>(
   a: LineSegment<P>,
   b: LineSegment<P>,
 ) {

packages/utils/src/collision.ts

@@ -5,19 +5,17 @@ import {
   pointOnLineSegment,
   pointOnPolygon,
   polygonFromPoints,
-  type GlobalPoint,
-  type LocalPoint,
   type Polygon,
 } from "@excalidraw/math";
 
-import type { Curve } from "@excalidraw/math";
+import type { Curve, GenericPoint } from "@excalidraw/math";
 
 import { pointInEllipse, pointOnEllipse } from "./shape";
 
 import type { Polycurve, Polyline, GeometricShape } from "./shape";
 
 // check if the given point is considered on the given shape's border
-export const isPointOnShape = <Point extends GlobalPoint | LocalPoint>(
+export const isPointOnShape = <Point extends GenericPoint>(
   point: Point,
   shape: GeometricShape<Point>,
   tolerance = 0,
@@ -43,7 +41,7 @@ export const isPointOnShape = <Point extends GlobalPoint | LocalPoint>(
 };
 
 // check if the given point is considered inside the element's border
-export const isPointInShape = <Point extends GlobalPoint | LocalPoint>(
+export const isPointInShape = <Point extends GenericPoint>(
   point: Point,
   shape: GeometricShape<Point>,
 ) => {
@@ -69,14 +67,14 @@ export const isPointInShape = <Point extends GlobalPoint | LocalPoint>(
 };
 
 // check if the given element is in the given bounds
-export const isPointInBounds = <Point extends GlobalPoint | LocalPoint>(
+export const isPointInBounds = <Point extends GenericPoint>(
   point: Point,
   bounds: Polygon<Point>,
 ) => {
   return polygonIncludesPoint(point, bounds);
 };
 
-const pointOnPolycurve = <Point extends LocalPoint | GlobalPoint>(
+const pointOnPolycurve = <Point extends GenericPoint>(
   point: Point,
   polycurve: Polycurve<Point>,
   tolerance: number,
@@ -84,7 +82,7 @@ const pointOnPolycurve = <Point extends LocalPoint | GlobalPoint>(
   return polycurve.some((curve) => pointOnCurve(point, curve, tolerance));
 };
 
-const cubicBezierEquation = <Point extends LocalPoint | GlobalPoint>(
+const cubicBezierEquation = <Point extends GenericPoint>(
   curve: Curve<Point>,
 ) => {
   const [p0, p1, p2, p3] = curve;
@@ -96,7 +94,7 @@ const cubicBezierEquation = <Point extends LocalPoint | GlobalPoint>(
     p0[idx] * Math.pow(t, 3);
 };
 
-const polyLineFromCurve = <Point extends LocalPoint | GlobalPoint>(
+const polyLineFromCurve = <Point extends GenericPoint>(
   curve: Curve<Point>,
   segments = 10,
 ): Polyline<Point> => {
@@ -118,7 +116,7 @@ const polyLineFromCurve = <Point extends LocalPoint | GlobalPoint>(
   return lineSegments;
 };
 
-export const pointOnCurve = <Point extends LocalPoint | GlobalPoint>(
+export const pointOnCurve = <Point extends GenericPoint>(
   point: Point,
   curve: Curve<Point>,
   threshold: number,
@@ -126,7 +124,7 @@ export const pointOnCurve = <Point extends LocalPoint | GlobalPoint>(
   return pointOnPolyline(point, polyLineFromCurve(curve), threshold);
 };
 
-export const pointOnPolyline = <Point extends LocalPoint | GlobalPoint>(
+export const pointOnPolyline = <Point extends GenericPoint>(
   point: Point,
   polyline: Polyline<Point>,
   threshold = 10e-5,

packages/utils/src/shape.ts

@@ -30,8 +30,6 @@ import {
   vectorAdd,
   vectorFromPoint,
   vectorScale,
-  type GlobalPoint,
-  type LocalPoint,
 } from "@excalidraw/math";
 
 import { getElementAbsoluteCoords } from "@excalidraw/element/bounds";
@@ -52,31 +50,36 @@ import type {
   ExcalidrawSelectionElement,
   ExcalidrawTextElement,
 } from "@excalidraw/element/types";
-import type { Curve, LineSegment, Polygon, Radians } from "@excalidraw/math";
+import type {
+  Curve,
+  GenericPoint,
+  LineSegment,
+  Polygon,
+  Radians,
+} from "@excalidraw/math";
 
 import type { Drawable, Op } from "roughjs/bin/core";
 
 // a polyline (made up term here) is a line consisting of other line segments
 // this corresponds to a straight line element in the editor but it could also
 // be used to model other elements
-export type Polyline<Point extends GlobalPoint | LocalPoint> =
+export type Polyline<Point extends GenericPoint> = LineSegment<Point>[];
-  LineSegment<Point>[];
 
 // a polycurve is a curve consisting of ther curves, this corresponds to a complex
 // curve on the canvas
-export type Polycurve<Point extends GlobalPoint | LocalPoint> = Curve<Point>[];
+export type Polycurve<Point extends GenericPoint> = Curve<Point>[];
 
 // an ellipse is specified by its center, angle, and its major and minor axes
 // but for the sake of simplicity, we've used halfWidth and halfHeight instead
 // in replace of semi major and semi minor axes
-export type Ellipse<Point extends GlobalPoint | LocalPoint> = {
+export type Ellipse<Point extends GenericPoint> = {
   center: Point;
   angle: Radians;
   halfWidth: number;
   halfHeight: number;
 };
 
-export type GeometricShape<Point extends GlobalPoint | LocalPoint> =
+export type GeometricShape<Point extends GenericPoint> =
   | {
       type: "line";
       data: LineSegment<Point>;
@@ -113,7 +116,7 @@ type RectangularElement =
   | ExcalidrawSelectionElement;
 
 // polygon
-export const getPolygonShape = <Point extends GlobalPoint | LocalPoint>(
+export const getPolygonShape = <Point extends GenericPoint>(
   element: RectangularElement,
 ): GeometricShape<Point> => {
   const { angle, width, height, x, y } = element;
@@ -148,7 +151,7 @@ export const getPolygonShape = <Point extends GlobalPoint | LocalPoint>(
 };
 
 // return the selection box for an element, possibly rotated as well
-export const getSelectionBoxShape = <Point extends GlobalPoint | LocalPoint>(
+export const getSelectionBoxShape = <Point extends GenericPoint>(
   element: ExcalidrawElement,
   elementsMap: ElementsMap,
   padding = 10,
@@ -178,7 +181,7 @@ export const getSelectionBoxShape = <Point extends GlobalPoint | LocalPoint>(
 };
 
 // ellipse
-export const getEllipseShape = <Point extends GlobalPoint | LocalPoint>(
+export const getEllipseShape = <Point extends GenericPoint>(
   element: ExcalidrawEllipseElement,
 ): GeometricShape<Point> => {
   const { width, height, angle, x, y } = element;
@@ -209,7 +212,7 @@ export const getCurvePathOps = (shape: Drawable): Op[] => {
 };
 
 // linear
-export const getCurveShape = <Point extends GlobalPoint | LocalPoint>(
+export const getCurveShape = <Point extends GenericPoint>(
   roughShape: Drawable,
   startingPoint: Point = pointFrom(0, 0),
   angleInRadian: Radians,
@@ -247,7 +250,7 @@ export const getCurveShape = <Point extends GlobalPoint | LocalPoint>(
   };
 };
 
-const polylineFromPoints = <Point extends GlobalPoint | LocalPoint>(
+const polylineFromPoints = <Point extends GenericPoint>(
   points: Point[],
 ): Polyline<Point> => {
   let previousPoint: Point = points[0];
@@ -262,7 +265,7 @@ const polylineFromPoints = <Point extends GlobalPoint | LocalPoint>(
   return polyline;
 };
 
-export const getFreedrawShape = <Point extends GlobalPoint | LocalPoint>(
+export const getFreedrawShape = <Point extends GenericPoint>(
   element: ExcalidrawFreeDrawElement,
   center: Point,
   isClosed: boolean = false,
@@ -293,7 +296,7 @@ export const getFreedrawShape = <Point extends GlobalPoint | LocalPoint>(
   ) as GeometricShape<Point>;
 };
 
-export const getClosedCurveShape = <Point extends GlobalPoint | LocalPoint>(
+export const getClosedCurveShape = <Point extends GenericPoint>(
   element: ExcalidrawLinearElement,
   roughShape: Drawable,
   startingPoint: Point = pointFrom<Point>(0, 0),
@@ -359,9 +362,7 @@ export const getClosedCurveShape = <Point extends GlobalPoint | LocalPoint>(
  * @returns An array of intersections
  */
 // TODO: Replace with final rounded rectangle code
-export const segmentIntersectRectangleElement = <
+export const segmentIntersectRectangleElement = <Point extends GenericPoint>(
-  Point extends LocalPoint | GlobalPoint,
->(
   element: ExcalidrawBindableElement,
   segment: LineSegment<Point>,
   gap: number = 0,
@@ -399,7 +400,7 @@ export const segmentIntersectRectangleElement = <
     .filter((i): i is Point => !!i);
 };
 
-const distanceToEllipse = <Point extends LocalPoint | GlobalPoint>(
+const distanceToEllipse = <Point extends GenericPoint>(
   p: Point,
   ellipse: Ellipse<Point>,
 ) => {
@@ -456,7 +457,7 @@ const distanceToEllipse = <Point extends LocalPoint | GlobalPoint>(
   );
 };
 
-export const pointOnEllipse = <Point extends LocalPoint | GlobalPoint>(
+export const pointOnEllipse = <Point extends GenericPoint>(
   point: Point,
   ellipse: Ellipse<Point>,
   threshold = PRECISION,
@@ -464,7 +465,7 @@ export const pointOnEllipse = <Point extends LocalPoint | GlobalPoint>(
   return distanceToEllipse(point, ellipse) <= threshold;
 };
 
-export const pointInEllipse = <Point extends LocalPoint | GlobalPoint>(
+export const pointInEllipse = <Point extends GenericPoint>(
   p: Point,
   ellipse: Ellipse<Point>,
 ) => {
@@ -486,7 +487,7 @@ export const pointInEllipse = <Point extends LocalPoint | GlobalPoint>(
   );
 };
 
-export const ellipseAxes = <Point extends LocalPoint | GlobalPoint>(
+export const ellipseAxes = <Point extends GenericPoint>(
   ellipse: Ellipse<Point>,
 ) => {
   const widthGreaterThanHeight = ellipse.halfWidth > ellipse.halfHeight;
@@ -504,7 +505,7 @@ export const ellipseAxes = <Point extends LocalPoint | GlobalPoint>(
   };
 };
 
-export const ellipseFocusToCenter = <Point extends LocalPoint | GlobalPoint>(
+export const ellipseFocusToCenter = <Point extends GenericPoint>(
   ellipse: Ellipse<Point>,
 ) => {
   const { majorAxis, minorAxis } = ellipseAxes(ellipse);
@@ -512,7 +513,7 @@ export const ellipseFocusToCenter = <Point extends LocalPoint | GlobalPoint>(
   return Math.sqrt(majorAxis ** 2 - minorAxis ** 2);
 };
 
-export const ellipseExtremes = <Point extends LocalPoint | GlobalPoint>(
+export const ellipseExtremes = <Point extends GenericPoint>(
   ellipse: Ellipse<Point>,
 ) => {
   const { center, angle } = ellipse;

packages/utils/tests/__snapshots__/export.test.ts.snap

@@ -69,10 +69,10 @@ exports[`exportToSvg > with default arguments 1`] = `
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": {
+  "originSnapOffset": [
-    "x": 0,
+    0,
-    "y": 0,
+    0,
-  },
+  ],
   "pasteDialog": {
     "data": null,
     "shown": false,