Refactoring points

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

packages/excalidraw/scene/export.ts

@@ -9,7 +9,7 @@ import type {
 import type { Bounds } from "../element/bounds";
 import { getCommonBounds, getElementAbsoluteCoords } from "../element/bounds";
 import { renderSceneToSvg } from "../renderer/staticSvgScene";
-import { arrayToMap, distance, getFontString, toBrandedType } from "../utils";
+import { arrayToMap, getFontString, toBrandedType } from "../utils";
 import type { AppState, BinaryFiles } from "../types";
 import {
   DEFAULT_EXPORT_PADDING,
@@ -40,6 +40,7 @@ import { syncInvalidIndices } from "../fractionalIndex";
 import { renderStaticScene } from "../renderer/staticScene";
 import { Fonts } from "../fonts";
 import type { Font } from "../fonts/ExcalidrawFont";
+import { rangeExtent, rangeInclusive } from "../../math";
 
 const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
 
@@ -427,8 +428,8 @@ const getCanvasSize = (
   exportPadding: number,
 ): Bounds => {
   const [minX, minY, maxX, maxY] = getCommonBounds(elements);
-  const width = distance(minX, maxX) + exportPadding * 2;
-  const height = distance(minY, maxY) + exportPadding * 2;
+  const width = rangeExtent(rangeInclusive(minX, maxX)) + exportPadding * 2;
+  const height = rangeExtent(rangeInclusive(minY, maxY)) + exportPadding * 2;
 
   return [minX, minY, width, height];
 };

packages/excalidraw/scene/scroll.ts

@@ -1,4 +1,4 @@
-import type { AppState, Offsets, PointerCoords, Zoom } from "../types";
+import type { AppState, Offsets, Zoom } from "../types";
 import type { ExcalidrawElement } from "../element/types";
 import {
   getCommonBounds,
@@ -8,17 +8,19 @@ import {
 
 import {
   sceneCoordsToViewportCoords,
+  tupleToCoors,
   viewportCoordsToSceneCoords,
 } from "../utils";
+import { point, type GlobalPoint } from "../../math";
 
 const isOutsideViewPort = (appState: AppState, cords: Array<number>) => {
   const [x1, y1, x2, y2] = cords;
-  const { x: viewportX1, y: viewportY1 } = sceneCoordsToViewportCoords(
-    { sceneX: x1, sceneY: y1 },
+  const [viewportX1, viewportY1] = sceneCoordsToViewportCoords(
+    point(x1, y1),
     appState,
   );
-  const { x: viewportX2, y: viewportY2 } = sceneCoordsToViewportCoords(
-    { sceneX: x2, sceneY: y2 },
+  const [viewportX2, viewportY2] = sceneCoordsToViewportCoords(
+    point(x2, y2),
     appState,
   );
   return (
@@ -33,20 +35,20 @@ export const centerScrollOn = ({
   zoom,
   offsets,
 }: {
-  scenePoint: PointerCoords;
+  scenePoint: GlobalPoint;
   viewportDimensions: { height: number; width: number };
   zoom: Zoom;
   offsets?: Offsets;
 }) => {
   let scrollX =
     (viewportDimensions.width - (offsets?.right ?? 0)) / 2 / zoom.value -
-    scenePoint.x;
+    scenePoint[0];
 
   scrollX += (offsets?.left ?? 0) / 2 / zoom.value;
 
   let scrollY =
     (viewportDimensions.height - (offsets?.bottom ?? 0)) / 2 / zoom.value -
-    scenePoint.y;
+    scenePoint[1];
 
   scrollY += (offsets?.top ?? 0) / 2 / zoom.value;
 
@@ -73,9 +75,11 @@ export const calculateScrollCenter = (
   if (isOutsideViewPort(appState, [x1, y1, x2, y2])) {
     [x1, y1, x2, y2] = getClosestElementBounds(
       elements,
-      viewportCoordsToSceneCoords(
-        { clientX: appState.scrollX, clientY: appState.scrollY },
-        appState,
+      tupleToCoors(
+        viewportCoordsToSceneCoords(
+          point(appState.scrollX, appState.scrollY),
+          appState,
+        ),
       ),
     );
   }
@@ -84,7 +88,7 @@ export const calculateScrollCenter = (
   const centerY = (y1 + y2) / 2;
 
   return centerScrollOn({
-    scenePoint: { x: centerX, y: centerY },
+    scenePoint: point(centerX, centerY),
     viewportDimensions: { width: appState.width, height: appState.height },
     zoom: appState.zoom,
   });

packages/excalidraw/scene/types.ts

@@ -19,6 +19,7 @@ import type {
   PendingExcalidrawElements,
 } from "../types";
 import type { MakeBrand } from "../utility-types";
+import type { ViewportPoint } from "../../math";
 
 export type RenderableElementsMap = NonDeletedElementsMap &
   MakeBrand<"RenderableElementsMap">;
@@ -52,7 +53,7 @@ export type InteractiveCanvasRenderConfig = {
   // collab-related state
   // ---------------------------------------------------------------------------
   remoteSelectedElementIds: Map<ExcalidrawElement["id"], SocketId[]>;
-  remotePointerViewportCoords: Map<SocketId, { x: number; y: number }>;
+  remotePointerViewportCoords: Map<SocketId, ViewportPoint>;
   remotePointerUserStates: Map<SocketId, UserIdleState>;
   remotePointerUsernames: Map<SocketId, string>;
   remotePointerButton: Map<SocketId, string | undefined>;