lint

This reverts commit 702e029755.

.codesandbox/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-bullseye
+FROM node:24-bullseye
 
 # Vite wants to open the browser using `open`, so we
 # need to install those utils.

.playwright-mcp/page-2026-06-26T08-26-20-195Z.yml

@@ -1,124 +0,0 @@
-- generic [ref=e1]:
-  - banner:
-    - heading "Excalidraw" [level=1] [ref=e2]
-  - generic [active] [ref=e5]:
-    - generic:
-      - generic:
-        - generic:
-          - button [ref=e9] [cursor=pointer]:
-            - img [ref=e10]
-          - region "Shapes":
-            - generic [ref=e16]:
-              - generic:
-                - generic:
-                  - text: To move canvas, hold
-                  - generic: Scroll wheel
-                  - text: or
-                  - generic: Space
-                  - text: while dragging, or use the hand tool
-              - heading "Shapes" [level=2] [ref=e17]
-              - generic [ref=e18]:
-                - generic "Keep selected tool active after drawing — Q" [ref=e19] [cursor=pointer]:
-                  - checkbox "Keep selected tool active after drawing"
-                  - img [ref=e21]
-                - generic "Hand (panning tool) — H or null" [ref=e29] [cursor=pointer]:
-                  - radio "Hand (panning tool)"
-                  - img [ref=e31]
-                - generic "Selection — V or 1" [ref=e38] [cursor=pointer]:
-                  - radio "Selection" [checked]
-                  - generic [ref=e39]:
-                    - img [ref=e40]
-                    - generic [ref=e45]: "1"
-                - generic "Rectangle — R or 2" [ref=e46] [cursor=pointer]:
-                  - radio "Rectangle"
-                  - generic [ref=e47]:
-                    - img [ref=e48]
-                    - generic [ref=e52]: "2"
-                - generic "Diamond — D or 3" [ref=e53] [cursor=pointer]:
-                  - radio "Diamond"
-                  - generic [ref=e54]:
-                    - img [ref=e55]
-                    - generic [ref=e59]: "3"
-                - generic "Ellipse — O or 4" [ref=e60] [cursor=pointer]:
-                  - radio "Ellipse"
-                  - generic [ref=e61]:
-                    - img [ref=e62]
-                    - generic [ref=e66]: "4"
-                - generic "Arrow — A or 5" [ref=e67] [cursor=pointer]:
-                  - radio "Arrow"
-                  - generic [ref=e68]:
-                    - img [ref=e69]
-                    - generic [ref=e74]: "5"
-                - generic "Line — L or 6" [ref=e75] [cursor=pointer]:
-                  - radio "Line"
-                  - generic [ref=e76]:
-                    - img [ref=e77]
-                    - generic [ref=e78]: "6"
-                - generic "Draw — P or 7" [ref=e79] [cursor=pointer]:
-                  - radio "Draw"
-                  - generic [ref=e80]:
-                    - img [ref=e81]
-                    - generic [ref=e85]: "7"
-                - generic "Text — T or 8" [ref=e86] [cursor=pointer]:
-                  - radio "Text"
-                  - generic [ref=e87]:
-                    - img [ref=e88]
-                    - generic [ref=e93]: "8"
-                - generic "Insert image — 9" [ref=e94] [cursor=pointer]:
-                  - radio "Insert image"
-                  - generic [ref=e95]:
-                    - img [ref=e96]
-                    - generic [ref=e101]: "9"
-                - generic "Eraser — E or 0" [ref=e102] [cursor=pointer]:
-                  - radio "Eraser"
-                  - generic [ref=e103]:
-                    - img [ref=e104]
-                    - generic [ref=e109]: "0"
-                - button "More tools" [ref=e112] [cursor=pointer]:
-                  - img [ref=e113]
-          - generic:
-            - generic [ref=e119]:
-              - link "Excalidraw+" [ref=e120] [cursor=pointer]:
-                - /url: https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=guestBanner#excalidraw-redirect
-              - button "Live collaboration..." [ref=e121] [cursor=pointer]:
-                - img [ref=e122]
-            - generic "Library" [ref=e124]:
-              - checkbox "Library"
-              - img [ref=e127] [cursor=pointer]
-      - contentinfo:
-        - region "Canvas actions" [ref=e132]:
-          - heading "Canvas actions" [level=2] [ref=e133]
-          - generic [ref=e135]:
-            - button "Zoom out" [ref=e136] [cursor=pointer]:
-              - img [ref=e138]
-            - button "Reset zoom" [ref=e140] [cursor=pointer]: 100%
-            - button "Zoom in" [ref=e141] [cursor=pointer]:
-              - img [ref=e143]
-          - generic [ref=e145]:
-            - button "Undo" [disabled] [ref=e148]:
-              - img [ref=e150]
-            - button "Redo" [disabled] [ref=e154]:
-              - img [ref=e156]
-        - generic [ref=e158]:
-          - generic [ref=e159]:
-            - button "lock scroll" [ref=e160] [cursor=pointer]
-            - generic [ref=e161]:
-              - text: overscroll
-              - spinbutton "overscroll" [ref=e162]: "0.2"
-            - generic [ref=e163]:
-              - text: zoom factor
-              - spinbutton "zoom factor" [ref=e164]: "0.2"
-            - generic [ref=e165]:
-              - checkbox "lock zoom" [ref=e166]
-              - text: lock zoom
-            - generic [ref=e167]:
-              - checkbox "animate" [ref=e168]
-              - text: animate
-          - link "Blog post on end-to-end encryption in Excalidraw" [ref=e169] [cursor=pointer]:
-            - /url: https://plus.excalidraw.com/blog/end-to-end-encryption
-            - img [ref=e171]
-        - button "Help" [ref=e174] [cursor=pointer]:
-          - img [ref=e175]
-    - generic:
-      - img
-    - generic [ref=e180]: Drawing canvas

.playwright-mcp/page-2026-06-26T08-26-34-790Z.yml

@@ -1,126 +0,0 @@
-- generic [ref=e1]:
-  - banner:
-    - heading "Excalidraw" [level=1] [ref=e2]
-  - generic [ref=e5]:
-    - generic:
-      - generic:
-        - generic:
-          - generic:
-            - img
-            - img
-        - generic:
-          - text: Your drawings are saved in your browser's storage.
-          - text: Browser storage can be cleared unexpectedly.
-          - text: Save your work to a file regularly to avoid losing it.
-        - generic:
-          - button "Open Ctrl+O" [ref=e181] [cursor=pointer]:
-            - img [ref=e183]
-            - generic [ref=e185]: Open
-            - generic [ref=e186]: Ctrl+O
-          - button "Help ?" [ref=e187] [cursor=pointer]:
-            - img [ref=e189]
-            - generic [ref=e194]: Help
-            - generic [ref=e195]: "?"
-          - button "Live collaboration..." [ref=e196] [cursor=pointer]:
-            - img [ref=e198]
-            - generic [ref=e205]: Live collaboration...
-          - link "Sign up" [ref=e206] [cursor=pointer]:
-            - /url: https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenGuest
-            - img [ref=e208]
-            - generic [ref=e214]: Sign up
-      - generic:
-        - generic:
-          - button [ref=e9] [cursor=pointer]:
-            - img [ref=e10]
-          - region "Shapes":
-            - generic [ref=e16]:
-              - generic:
-                - generic:
-                  - text: To move canvas, hold
-                  - generic: Scroll wheel
-                  - text: or
-                  - generic: Space
-                  - text: while dragging, or use the hand tool
-              - heading "Shapes" [level=2] [ref=e17]
-              - generic [ref=e18]:
-                - generic "Keep selected tool active after drawing — Q" [ref=e19] [cursor=pointer]:
-                  - checkbox "Keep selected tool active after drawing"
-                  - img [ref=e21]
-                - generic "Hand (panning tool) — H or null" [ref=e29] [cursor=pointer]:
-                  - radio "Hand (panning tool)"
-                  - img [ref=e31]
-                - generic "Selection" [ref=e215] [cursor=pointer]:
-                  - radio "Selection" [checked]
-                  - img [ref=e217]
-                - generic "Rectangle — R or 2" [ref=e46] [cursor=pointer]:
-                  - radio "Rectangle"
-                  - img [ref=e48]
-                - generic "Diamond — D or 3" [ref=e53] [cursor=pointer]:
-                  - radio "Diamond"
-                  - img [ref=e55]
-                - generic "Ellipse — O or 4" [ref=e60] [cursor=pointer]:
-                  - radio "Ellipse"
-                  - img [ref=e62]
-                - generic "Arrow — A or 5" [ref=e67] [cursor=pointer]:
-                  - radio "Arrow"
-                  - img [ref=e69]
-                - generic "Line — L or 6" [ref=e75] [cursor=pointer]:
-                  - radio "Line"
-                  - img [ref=e77]
-                - generic "Draw — P or 7" [ref=e79] [cursor=pointer]:
-                  - radio "Draw"
-                  - img [ref=e81]
-                - generic "Text — T or 8" [ref=e86] [cursor=pointer]:
-                  - radio "Text"
-                  - img [ref=e88]
-                - generic "Insert image — 9" [ref=e94] [cursor=pointer]:
-                  - radio "Insert image"
-                  - img [ref=e96]
-                - generic "Eraser — E or 0" [ref=e102] [cursor=pointer]:
-                  - radio "Eraser"
-                  - img [ref=e104]
-                - button "More tools" [ref=e112] [cursor=pointer]:
-                  - img [ref=e113]
-          - generic:
-            - button "Live collaboration..." [ref=e121] [cursor=pointer]:
-              - img [ref=e122]
-            - generic "Library" [ref=e124]:
-              - checkbox "Library"
-              - img [ref=e127] [cursor=pointer]
-      - contentinfo:
-        - region "Canvas actions" [ref=e132]:
-          - heading "Canvas actions" [level=2] [ref=e133]
-          - generic [ref=e135]:
-            - button "Zoom out" [ref=e136] [cursor=pointer]:
-              - img [ref=e138]
-            - button "Reset zoom" [disabled] [ref=e140]: 100%
-            - button "Zoom in" [ref=e141] [cursor=pointer]:
-              - img [ref=e143]
-          - generic [ref=e145]:
-            - button "Undo" [disabled] [ref=e148]:
-              - img [ref=e150]
-            - button "Redo" [disabled] [ref=e154]:
-              - img [ref=e156]
-        - generic [ref=e158]:
-          - generic [ref=e159]:
-            - button "disable scroll lock" [active] [ref=e222] [cursor=pointer]
-            - generic [ref=e161]:
-              - text: overscroll
-              - spinbutton "overscroll" [ref=e162]: "0.2"
-            - generic [ref=e163]:
-              - text: zoom factor
-              - spinbutton "zoom factor" [ref=e164]: "0.2"
-            - generic [ref=e165]:
-              - checkbox "lock zoom" [ref=e166]
-              - text: lock zoom
-            - generic [ref=e167]:
-              - checkbox "animate" [ref=e168]
-              - text: animate
-          - link "Blog post on end-to-end encryption in Excalidraw" [ref=e169] [cursor=pointer]:
-            - /url: https://plus.excalidraw.com/blog/end-to-end-encryption
-            - img [ref=e171]
-        - button "Help" [ref=e174] [cursor=pointer]:
-          - img [ref=e175]
-    - generic:
-      - img
-    - generic [ref=e180]: Drawing canvas

Dockerfile

@@ -1,4 +1,4 @@
-FROM --platform=${BUILDPLATFORM} node:18 AS build
+FROM --platform=${BUILDPLATFORM} node:24 AS build
 
 WORKDIR /opt/node_app
 
@@ -13,7 +13,7 @@ ARG NODE_ENV=production
 
 RUN npm_config_target_arch=${TARGETARCH} yarn build:app:docker
 
-FROM --platform=${TARGETPLATFORM} nginx:1.27-alpine
+FROM nginx:1.27-alpine
 
 COPY --from=build /opt/node_app/excalidraw-app/build /usr/share/nginx/html
 

dev-docs/docusaurus.config.js

@@ -97,8 +97,8 @@ const config = {
                 href: "https://discord.gg/UexuTaE",
               },
               {
-                label: "Twitter",
+                label: "𝕏",
-                href: "https://twitter.com/excalidraw",
+                href: "https://x.com/excalidraw",
               },
               {
                 label: "Linkedin",

examples/with-nextjs/src/excalidrawWrapper.tsx

@@ -4,20 +4,8 @@ import { Excalidraw } from "@excalidraw/excalidraw";
 
 import "@excalidraw/excalidraw/index.css";
 
-import type { ScrollConstraints } from "@excalidraw/excalidraw/types";
-
 import App from "../../with-script-in-browser/components/ExampleApp";
 
-const scrollConstraints: ScrollConstraints = {
-  x: 0,
-  y: 0,
-  width: 850,
-  height: 400,
-  lockZoom: true,
-  overscrollAllowance: 0,
-  viewportZoomFactor: 1,
-};
-
 const ExcalidrawWrapper: React.FC = () => {
   return (
     <>
@@ -26,7 +14,7 @@ const ExcalidrawWrapper: React.FC = () => {
         useCustom={(api: any, args?: any[]) => {}}
         excalidrawLib={excalidrawLib}
       >
-        <Excalidraw scrollConstraints={scrollConstraints} />
+        <Excalidraw />
       </App>
     </>
   );

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

@@ -178,8 +178,7 @@ export default function ExampleApp({
     const newElement = cloneElement(
       Excalidraw,
       {
-        onExcalidrawAPI: (api: ExcalidrawImperativeAPI | null) =>
+        excalidrawAPI: (api: ExcalidrawImperativeAPI) => setExcalidrawAPI(api),
-          setExcalidrawAPI(api),
         initialData: initialStatePromiseRef.current.promise,
         onChange: (
           elements: NonDeletedExcalidrawElement[],
@@ -821,48 +820,6 @@ export default function ExampleApp({
             />
             Export with embed scene
           </label>
-          <button
-            type="button"
-            onClick={() => {
-              if (!excalidrawAPI) {
-                return;
-              }
-
-              const elements = excalidrawAPI.getSceneElements();
-              excalidrawAPI.scrollToContent(elements[0], {
-                animate: true,
-                fitToViewport: true,
-                viewportZoomFactor: 0.9,
-                scrollLock: {
-                  lockZoom: true,
-                  overscrollAllowance: 0,
-                },
-              });
-            }}
-          >
-            Fit and lock first element
-          </button>
-          <button
-            type="button"
-            onClick={() => {
-              if (!excalidrawAPI) {
-                return;
-              }
-
-              const elements = excalidrawAPI.getSceneElements();
-              excalidrawAPI.scrollToContent(elements[1], {
-                animate: true,
-                fitToViewport: true,
-                viewportZoomFactor: 0.9,
-                scrollLock: {
-                  lockZoom: true,
-                  overscrollAllowance: 0,
-                },
-              });
-            }}
-          >
-            Fit and lock second element
-          </button>
           <button
             onClick={async () => {
               if (!excalidrawAPI) {

excalidraw-app/App.tsx

@@ -1015,10 +1015,7 @@ const ExcalidrawWrapper = () => {
             </OverwriteConfirmDialog.Action>
           )}
         </OverwriteConfirmDialog>
-        <AppFooter
+        <AppFooter onChange={() => excalidrawAPI?.refresh()} />
-          excalidrawAPI={excalidrawAPI}
-          onChange={() => excalidrawAPI?.refresh()}
-        />
         {excalidrawAPI && <AIComponents excalidrawAPI={excalidrawAPI} />}
 
         <TTDDialogTrigger />

excalidraw-app/components/AppFooter.tsx

@@ -1,178 +1,13 @@
 import { Footer } from "@excalidraw/excalidraw/index";
-import {
+import React from "react";
-  getCommonBounds,
-  getSelectedElements,
-  getVisibleSceneBounds,
-} from "@excalidraw/element";
-import React, { useCallback, useState } from "react";
-
-import type {
-  ExcalidrawImperativeAPI,
-  ScrollConstraints,
-} from "@excalidraw/excalidraw/types";
 
 import { isExcalidrawPlusSignedUser } from "../app_constants";
 
 import { DebugFooter, isVisualDebuggerEnabled } from "./DebugCanvas";
 import { EncryptedIcon } from "./EncryptedIcon";
 
-type ScrollConstraintOptions = Pick<
-  ScrollConstraints,
-  "lockZoom" | "overscrollAllowance" | "viewportZoomFactor"
->;
-
-const ScrollConstraintsDebugFooter = ({
-  excalidrawAPI,
-}: {
-  excalidrawAPI: ExcalidrawImperativeAPI | null;
-}) => {
-  const [activeLock, setActiveLock] = useState<ScrollConstraints | null>(null);
-  const [options, setOptions] = useState<ScrollConstraintOptions>({
-    lockZoom: false,
-    overscrollAllowance: 0.2,
-    viewportZoomFactor: 0.2,
-  });
-
-  const setLock = useCallback(
-    (nextLock: ScrollConstraints) => {
-      excalidrawAPI?.setScrollConstraints(nextLock);
-      setActiveLock(nextLock);
-    },
-    [excalidrawAPI],
-  );
-
-  const toggleScrollLock = useCallback(() => {
-    if (!excalidrawAPI) {
-      return;
-    }
-
-    if (activeLock) {
-      excalidrawAPI.setScrollConstraints(null);
-      setActiveLock(null);
-      return;
-    }
-
-    const selectedElements = getSelectedElements(
-      excalidrawAPI.getSceneElements(),
-      excalidrawAPI.getAppState(),
-      {
-        includeBoundTextElement: true,
-        includeElementsInFrames: true,
-      },
-    );
-    const [x1, y1, x2, y2] = selectedElements.length
-      ? getCommonBounds(
-          selectedElements,
-          excalidrawAPI.getSceneElementsMapIncludingDeleted(),
-        )
-      : getVisibleSceneBounds(excalidrawAPI.getAppState());
-
-    setLock({
-      x: x1,
-      y: y1,
-      width: x2 - x1,
-      height: y2 - y1,
-      ...options,
-    });
-  }, [activeLock, excalidrawAPI, options, setLock]);
-
-  const updateOptions = useCallback(
-    (nextOptions: ScrollConstraintOptions) => {
-      setOptions(nextOptions);
-
-      if (activeLock) {
-        setLock({ ...activeLock, ...nextOptions });
-      }
-    },
-    [activeLock, setLock],
-  );
-
-  const updateNumberOption = useCallback(
-    (option: "overscrollAllowance" | "viewportZoomFactor", value: string) => {
-      updateOptions({
-        ...options,
-        [option]: value === "" ? undefined : Number(value),
-      });
-    },
-    [options, updateOptions],
-  );
-
-  const updateBooleanOption = useCallback(
-    (option: "lockZoom", value: boolean) => {
-      updateOptions({
-        ...options,
-        [option]: value,
-      });
-    },
-    [options, updateOptions],
-  );
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        gap: ".45rem",
-        alignItems: "center",
-        padding: "0 .35rem",
-        fontSize: 12,
-      }}
-    >
-      <button
-        className="ToolIcon_type_button"
-        type="button"
-        onClick={toggleScrollLock}
-      >
-        {activeLock ? "disable scroll lock" : "lock scroll"}
-      </button>
-      <label style={{ display: "flex", gap: ".25rem", alignItems: "center" }}>
-        overscroll
-        <input
-          type="number"
-          min={0}
-          max={1}
-          step={0.05}
-          value={options.overscrollAllowance ?? ""}
-          onChange={(event) =>
-            updateNumberOption("overscrollAllowance", event.target.value)
-          }
-          style={{ width: 56 }}
-        />
-      </label>
-      <label style={{ display: "flex", gap: ".25rem", alignItems: "center" }}>
-        zoom factor
-        <input
-          type="number"
-          min={0.1}
-          step={0.1}
-          value={options.viewportZoomFactor ?? ""}
-          onChange={(event) =>
-            updateNumberOption("viewportZoomFactor", event.target.value)
-          }
-          style={{ width: 56 }}
-        />
-      </label>
-      <label style={{ display: "flex", gap: ".2rem", alignItems: "center" }}>
-        <input
-          type="checkbox"
-          checked={!!options.lockZoom}
-          onChange={(event) =>
-            updateBooleanOption("lockZoom", event.target.checked)
-          }
-        />
-        lock zoom
-      </label>
-    </div>
-  );
-};
-
 export const AppFooter = React.memo(
-  ({
+  ({ onChange }: { onChange: () => void }) => {
-    excalidrawAPI,
-    onChange,
-  }: {
-    excalidrawAPI: ExcalidrawImperativeAPI | null;
-    onChange: () => void;
-  }) => {
     return (
       <Footer>
         <div
@@ -182,7 +17,6 @@ export const AppFooter = React.memo(
             alignItems: "center",
           }}
         >
-          <ScrollConstraintsDebugFooter excalidrawAPI={excalidrawAPI} />
           {isVisualDebuggerEnabled() && <DebugFooter onChange={onChange} />}
           {!isExcalidrawPlusSignedUser && <EncryptedIcon />}
         </div>

packages/element/src/binding.ts

@@ -1943,9 +1943,9 @@ export const calculateFixedPointForElbowArrowBinding = (
   return {
     fixedPoint: normalizeFixedPoint([
       (nonRotatedSnappedGlobalPoint[0] - hoveredElement.x) /
-        hoveredElement.width,
+        Math.max(hoveredElement.width, PRECISION),
       (nonRotatedSnappedGlobalPoint[1] - hoveredElement.y) /
-        hoveredElement.height,
+        Math.max(hoveredElement.height, PRECISION),
     ]),
   };
 };
@@ -1976,9 +1976,11 @@ export const calculateFixedPointForNonElbowArrowBinding = (
 
   // Calculate the ratio relative to the element's bounds
   const fixedPointX =
-    (nonRotatedPoint[0] - hoveredElement.x) / hoveredElement.width;
+    (nonRotatedPoint[0] - hoveredElement.x) /
+    Math.max(hoveredElement.width, PRECISION);
   const fixedPointY =
-    (nonRotatedPoint[1] - hoveredElement.y) / hoveredElement.height;
+    (nonRotatedPoint[1] - hoveredElement.y) /
+    Math.max(hoveredElement.height, PRECISION);
 
   return {
     fixedPoint: normalizeFixedPoint([fixedPointX, fixedPointY]),

packages/element/src/elbowArrow.ts

@@ -2124,8 +2124,8 @@ const normalizeArrowElementUpdate = (
     offsetY < -MAX_POS ||
     offsetY > MAX_POS ||
     offsetX + points[points.length - 1][0] < -MAX_POS ||
-    offsetY + points[points.length - 1][0] > MAX_POS ||
+    offsetX + points[points.length - 1][0] > MAX_POS ||
-    offsetX + points[points.length - 1][1] < -MAX_POS ||
+    offsetY + points[points.length - 1][1] < -MAX_POS ||
     offsetY + points[points.length - 1][1] > MAX_POS
   ) {
     console.error(

packages/element/src/index.ts

@@ -88,6 +88,7 @@ export * from "./selection";
 export * from "./shape";
 export * from "./showSelectedShapeActions";
 export * from "./sizeHelpers";
+export * from "./snapping";
 export * from "./sortElements";
 export * from "./store";
 export * from "./textElement";

packages/element/src/linearElementEditor.ts

@@ -7,6 +7,7 @@ import {
   type LocalPoint,
   pointDistance,
   vectorFromPoint,
+  line,
   curveLength,
   curvePointAtLength,
 } from "@excalidraw/math";
@@ -29,6 +30,9 @@ import {
   isPathALoop,
   moveArrowAboveBindable,
   projectFixedPointOntoDiagonal,
+  snapLinearElementPoint,
+  snapToDiscreteAngle,
+  type SnapLine,
   type Store,
 } from "@excalidraw/element";
 
@@ -48,6 +52,7 @@ import {
   calculateFixedPointForNonElbowArrowBinding,
   getBindingStrategyForDraggingBindingElementEndpoints,
   isBindingEnabled,
+  maxBindingDistance_simple,
   snapToMid,
   updateBoundPoint,
 } from "./binding";
@@ -56,6 +61,7 @@ import {
   getElementPointsCoords,
   getMinMaxXYFromCurvePathOps,
 } from "./bounds";
+import { getHoveredElementForBinding } from "./collision";
 
 import { headingIsHorizontal, vectorToHeading } from "./heading";
 import { mutateElement } from "./mutateElement";
@@ -294,7 +300,10 @@ export class LinearElementEditor {
     scenePointerX: number,
     scenePointerY: number,
     linearElementEditor: LinearElementEditor,
-  ): Pick<AppState, "suggestedBinding" | "selectedLinearElement"> | null {
+  ): Pick<
+    AppState,
+    "suggestedBinding" | "selectedLinearElement" | "snapLines"
+  > | null {
     const elementsMap = app.scene.getNonDeletedElementsMap();
     const elements = app.scene.getNonDeletedElements();
     const { elementId } = linearElementEditor;
@@ -311,36 +320,26 @@ export class LinearElementEditor {
       linearElementEditor.customLineAngle ??
       determineCustomLinearAngle(pivotPoint, element.points[idx]);
 
-    // Determine if point movement should happen and how much
+    const { point: newDraggingPointPosition, snapLines } =
-    let deltaX = 0;
+      LinearElementEditor._getSnappedPointForLinearElement({
-    let deltaY = 0;
+        app,
-    if (shouldRotateWithDiscreteAngle(event)) {
+        event,
-      const [width, height] = LinearElementEditor._getShiftLockedDelta(
+        elements,
-        element,
         elementsMap,
-        pivotPoint,
+        element,
-        pointFrom(scenePointerX, scenePointerY),
+        pointIndex: idx,
-        event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
+        scenePointerX,
+        scenePointerY,
+        pointerOffset: linearElementEditor.pointerOffset,
+        referencePoint: shouldRotateWithDiscreteAngle(event)
+          ? pivotPoint
+          : null,
+        selectedPointsIndices: [idx],
         customLineAngle,
-      );
+      });
-      const target = pointFrom<LocalPoint>(
-        width + pivotPoint[0],
-        height + pivotPoint[1],
-      );
 
-      deltaX = target[0] - point[0];
+    const deltaX = newDraggingPointPosition[0] - point[0];
-      deltaY = target[1] - point[1];
+    const deltaY = newDraggingPointPosition[1] - point[1];
-    } else {
-      const newDraggingPointPosition = LinearElementEditor.createPointAt(
-        element,
-        elementsMap,
-        scenePointerX - linearElementEditor.pointerOffset.x,
-        scenePointerY - linearElementEditor.pointerOffset.y,
-        event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
-      );
-      deltaX = newDraggingPointPosition[0] - point[0];
-      deltaY = newDraggingPointPosition[1] - point[1];
-    }
 
     // Apply the point movement if needed
     let suggestedBinding: AppState["suggestedBinding"] = null;
@@ -398,6 +397,8 @@ export class LinearElementEditor {
     // PERF: Avoid state updates if not absolutely necessary
     if (
       app.state.selectedLinearElement?.customLineAngle === customLineAngle &&
+      app.state.snapLines.length === 0 &&
+      snapLines.length === 0 &&
       linearElementEditor.initialState.altFocusPoint &&
       (!suggestedBinding ||
         isShallowEqual(app.state.suggestedBinding ?? [], suggestedBinding))
@@ -436,6 +437,7 @@ export class LinearElementEditor {
     return {
       selectedLinearElement: newLinearElementEditor,
       suggestedBinding,
+      snapLines,
     };
   }
 
@@ -445,7 +447,10 @@ export class LinearElementEditor {
     scenePointerX: number,
     scenePointerY: number,
     linearElementEditor: LinearElementEditor,
-  ): Pick<AppState, "suggestedBinding" | "selectedLinearElement"> | null {
+  ): Pick<
+    AppState,
+    "suggestedBinding" | "selectedLinearElement" | "snapLines"
+  > | null {
     const elementsMap = app.scene.getNonDeletedElementsMap();
     const elements = app.scene.getNonDeletedElements();
     const { elbowed, elementId, initialState } = linearElementEditor;
@@ -493,7 +498,6 @@ export class LinearElementEditor {
       lastClickedPoint = element.points.length - 1;
     }
 
-    // point that's being dragged (out of all selected points)
     const draggingPoint = element.points[lastClickedPoint];
     // The adjacent point to the one dragged point
     const pivotPoint =
@@ -507,35 +511,27 @@ export class LinearElementEditor {
       element.points.length - 1,
     );
 
-    // Determine if point movement should happen and how much
+    const { point: newDraggingPointPosition, snapLines } =
-    let deltaX = 0;
+      LinearElementEditor._getSnappedPointForLinearElement({
-    let deltaY = 0;
+        app,
-    if (shouldRotateWithDiscreteAngle(event) && singlePointDragged) {
+        event,
-      const [width, height] = LinearElementEditor._getShiftLockedDelta(
+        elements,
-        element,
         elementsMap,
-        pivotPoint,
+        element,
-        pointFrom(scenePointerX, scenePointerY),
+        pointIndex: lastClickedPoint,
-        event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
+        scenePointerX,
+        scenePointerY,
+        pointerOffset: linearElementEditor.pointerOffset,
+        referencePoint:
+          shouldRotateWithDiscreteAngle(event) && singlePointDragged
+            ? pivotPoint
+            : null,
+        selectedPointsIndices,
         customLineAngle,
-      );
+      });
-      const target = pointFrom<LocalPoint>(
+
-        width + pivotPoint[0],
+    const deltaX = newDraggingPointPosition[0] - draggingPoint[0];
-        height + pivotPoint[1],
+    const deltaY = newDraggingPointPosition[1] - draggingPoint[1];
-      );
-      deltaX = target[0] - draggingPoint[0];
-      deltaY = target[1] - draggingPoint[1];
-    } else {
-      const newDraggingPointPosition = LinearElementEditor.createPointAt(
-        element,
-        elementsMap,
-        scenePointerX - linearElementEditor.pointerOffset.x,
-        scenePointerY - linearElementEditor.pointerOffset.y,
-        event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
-      );
-      deltaX = newDraggingPointPosition[0] - draggingPoint[0];
-      deltaY = newDraggingPointPosition[1] - draggingPoint[1];
-    }
 
     // Apply the point movement if needed
     let suggestedBinding: AppState["suggestedBinding"] = null;
@@ -674,6 +670,7 @@ export class LinearElementEditor {
     return {
       selectedLinearElement: newLinearElementEditor,
       suggestedBinding,
+      snapLines,
     };
   }
 
@@ -1178,7 +1175,10 @@ export class LinearElementEditor {
     scenePointerX: number,
     scenePointerY: number,
     app: AppClassProperties,
-  ): LinearElementEditor | null {
+  ): {
+    editingLinearElement: LinearElementEditor;
+    snapLines: readonly SnapLine[];
+  } | null {
     const appState = app.state;
     if (!appState.selectedLinearElement?.isEditing) {
       return null;
@@ -1187,7 +1187,10 @@ export class LinearElementEditor {
     const elementsMap = app.scene.getNonDeletedElementsMap();
     const element = LinearElementEditor.getElement(elementId, elementsMap);
     if (!element) {
-      return appState.selectedLinearElement;
+      return {
+        editingLinearElement: appState.selectedLinearElement,
+        snapLines: appState.snapLines,
+      };
     }
 
     const { points } = element;
@@ -1199,36 +1202,37 @@ export class LinearElementEditor {
       }
       return appState.selectedLinearElement?.lastUncommittedPoint
         ? {
-            ...appState.selectedLinearElement,
+            editingLinearElement: {
-            lastUncommittedPoint: null,
+              ...appState.selectedLinearElement,
+              lastUncommittedPoint: null,
+            },
+            snapLines: [],
           }
-        : appState.selectedLinearElement;
+        : {
+            editingLinearElement: appState.selectedLinearElement,
+            snapLines: [],
+          };
     }
 
-    let newPoint: LocalPoint;
+    const anchor = points[points.length - 2];
-
+    const elements = app.scene.getNonDeletedElements();
-    if (shouldRotateWithDiscreteAngle(event) && points.length >= 2) {
+    const { point: newPoint, snapLines } =
-      const anchor = points[points.length - 2];
+      LinearElementEditor._getSnappedPointForLinearElement({
-      const [width, height] = LinearElementEditor._getShiftLockedDelta(
+        app,
-        element,
+        event,
+        elements,
         elementsMap,
-        anchor,
-        pointFrom(scenePointerX, scenePointerY),
-        event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
-      );
-
-      newPoint = pointFrom(width + anchor[0], height + anchor[1]);
-    } else {
-      newPoint = LinearElementEditor.createPointAt(
         element,
-        elementsMap,
+        pointIndex: points.length - 1,
-        scenePointerX - appState.selectedLinearElement.pointerOffset.x,
+        scenePointerX,
-        scenePointerY - appState.selectedLinearElement.pointerOffset.y,
+        scenePointerY,
-        event[KEYS.CTRL_OR_CMD] || isElbowArrow(element)
+        pointerOffset: appState.selectedLinearElement.pointerOffset,
-          ? null
+        referencePoint:
-          : app.getEffectiveGridSize(),
+          shouldRotateWithDiscreteAngle(event) && points.length >= 2
-      );
+            ? anchor
-    }
+            : null,
+        selectedPointsIndices: [points.length - 1],
+      });
 
     if (lastPoint === lastUncommittedPoint) {
       LinearElementEditor.movePoints(
@@ -1236,7 +1240,7 @@ export class LinearElementEditor {
         app.scene,
         new Map([
           [
-            element.points.length - 1,
+            points.length - 1,
             {
               point: newPoint,
             },
@@ -1246,9 +1250,13 @@ export class LinearElementEditor {
     } else {
       LinearElementEditor.addPoints(element, app.scene, [newPoint]);
     }
+
     return {
-      ...appState.selectedLinearElement,
+      editingLinearElement: {
-      lastUncommittedPoint: element.points[element.points.length - 1],
+        ...appState.selectedLinearElement,
+        lastUncommittedPoint: element.points[element.points.length - 1],
+      },
+      snapLines,
     };
   }
 
@@ -1274,18 +1282,53 @@ export class LinearElementEditor {
   static getPointsGlobalCoordinates(
     element: NonDeleted<ExcalidrawLinearElement>,
     elementsMap: ElementsMap,
+    options: {
+      dragOffset?: { x: number; y: number };
+      excludePointsIndices?: readonly number[];
+    } = {},
   ): GlobalPoint[] {
+    const { dragOffset, excludePointsIndices } = options;
+
+    if (!element.points || element.points.length === 0) {
+      return [];
+    }
+
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
-    return element.points.map((p) => {
+
-      const { x, y } = element;
+    let elementX = element.x;
-      return pointRotateRads(
+    let elementY = element.y;
-        pointFrom(x + p[0], y + p[1]),
+
+    if (dragOffset) {
+      elementX += dragOffset.x;
+      elementY += dragOffset.y;
+    }
+
+    const globalPoints: GlobalPoint[] = [];
+
+    for (let i = 0; i < element.points.length; i++) {
+      // Skip the point being edited if specified
+      if (
+        excludePointsIndices?.length &&
+        excludePointsIndices.find((index) => index === i) !== undefined
+      ) {
+        continue;
+      }
+
+      const p = element.points[i];
+      const globalX = elementX + p[0];
+      const globalY = elementY + p[1];
+
+      const rotated = pointRotateRads<GlobalPoint>(
+        pointFrom(globalX, globalY),
         pointFrom(cx, cy),
         element.angle,
       );
-    });
+      globalPoints.push(rotated);
+    }
+
+    return globalPoints;
   }
 
   static getPointAtIndexGlobalCoordinates(
@@ -1839,6 +1882,222 @@ export class LinearElementEditor {
     );
   }
 
+  private static _getPointPlacementGridSize(
+    element: NonDeleted<ExcalidrawLinearElement>,
+    app: AppClassProperties,
+    event: Pick<KeyboardEvent | PointerEvent, typeof KEYS.CTRL_OR_CMD>,
+  ): NullableGridSize {
+    return event[KEYS.CTRL_OR_CMD] || isElbowArrow(element)
+      ? null
+      : app.getEffectiveGridSize();
+  }
+
+  private static _shouldSkipExternalSnapForBindableTarget({
+    appState,
+    elements,
+    elementsMap,
+    element,
+    pointIndex,
+    scenePoint,
+    selectedPointsIndices,
+  }: {
+    appState: AppState;
+    elements: readonly Ordered<NonDeletedExcalidrawElement>[];
+    elementsMap: NonDeletedSceneElementsMap;
+    element: NonDeleted<ExcalidrawLinearElement>;
+    pointIndex: number;
+    scenePoint: GlobalPoint;
+    selectedPointsIndices?: readonly number[];
+  }) {
+    if (
+      isElbowArrow(element) ||
+      !isBindingElement(element) ||
+      !isBindingEnabled(appState) ||
+      selectedPointsIndices?.length !== 1
+    ) {
+      return false;
+    }
+
+    if (pointIndex !== 0 && pointIndex !== element.points.length - 1) {
+      return false;
+    }
+
+    return !!getHoveredElementForBinding(
+      scenePoint,
+      elements,
+      elementsMap,
+      maxBindingDistance_simple(appState.zoom),
+    );
+  }
+
+  private static _getSnappedPointForLinearElement({
+    app,
+    event,
+    elements,
+    elementsMap,
+    element,
+    pointIndex,
+    scenePointerX,
+    scenePointerY,
+    pointerOffset,
+    referencePoint,
+    selectedPointsIndices,
+    customLineAngle,
+  }: {
+    app: AppClassProperties;
+    event: PointerEvent | React.PointerEvent<HTMLCanvasElement>;
+    elements: readonly Ordered<NonDeletedExcalidrawElement>[];
+    elementsMap: NonDeletedSceneElementsMap;
+    element: NonDeleted<ExcalidrawLinearElement>;
+    pointIndex: number;
+    scenePointerX: number;
+    scenePointerY: number;
+    pointerOffset: Readonly<{ x: number; y: number }>;
+    referencePoint?: LocalPoint | null;
+    selectedPointsIndices?: readonly number[];
+    customLineAngle?: number | null;
+  }): {
+    point: LocalPoint;
+    snapLines: SnapLine[];
+  } {
+    const gridSize = LinearElementEditor._getPointPlacementGridSize(
+      element,
+      app,
+      event,
+    );
+
+    if (referencePoint) {
+      const referencePointCoords =
+        LinearElementEditor.getPointGlobalCoordinates(
+          element,
+          referencePoint,
+          elementsMap,
+        );
+      const [gridX, gridY] = getGridPoint(
+        scenePointerX,
+        scenePointerY,
+        gridSize,
+      );
+
+      let { width: dxFromReference, height: dyFromReference } =
+        getLockedLinearCursorAlignSize(
+          referencePointCoords[0],
+          referencePointCoords[1],
+          gridX,
+          gridY,
+          customLineAngle ?? undefined,
+        );
+
+      const effectiveGridX = referencePointCoords[0] + dxFromReference;
+      const effectiveGridY = referencePointCoords[1] + dyFromReference;
+
+      let snapLines: SnapLine[] = [];
+      const shouldSkipExternalSnap =
+        LinearElementEditor._shouldSkipExternalSnapForBindableTarget({
+          appState: app.state,
+          elements,
+          elementsMap,
+          element,
+          pointIndex,
+          scenePoint: pointFrom<GlobalPoint>(effectiveGridX, effectiveGridY),
+          selectedPointsIndices,
+        });
+
+      if (!isElbowArrow(element)) {
+        const { snapOffset, snapLines: nextSnapLines } = snapLinearElementPoint(
+          elements,
+          element,
+          pointFrom<GlobalPoint>(effectiveGridX, effectiveGridY),
+          app,
+          event,
+          elementsMap,
+          {
+            includeExternalPoints: !shouldSkipExternalSnap,
+            includeSelfPoints: true,
+            selectedPointsIndices,
+          },
+        );
+
+        snapLines = nextSnapLines;
+
+        if (nextSnapLines.length > 0) {
+          const result = snapToDiscreteAngle(
+            nextSnapLines,
+            line(
+              pointFrom(effectiveGridX, effectiveGridY),
+              pointFrom(referencePointCoords[0], referencePointCoords[1]),
+            ),
+            pointFrom(gridX, gridY),
+            referencePointCoords,
+          );
+
+          if (result.snapLines.length > 0) {
+            dxFromReference = result.dxFromReference;
+            dyFromReference = result.dyFromReference;
+            snapLines = result.snapLines;
+          } else {
+            dxFromReference =
+              effectiveGridX + snapOffset.x - referencePointCoords[0];
+            dyFromReference =
+              effectiveGridY + snapOffset.y - referencePointCoords[1];
+          }
+        }
+      }
+
+      const [rotatedX, rotatedY] = pointRotateRads(
+        pointFrom(dxFromReference, dyFromReference),
+        pointFrom(0, 0),
+        -element.angle as Radians,
+      );
+
+      return {
+        point: pointFrom(
+          referencePoint[0] + rotatedX,
+          referencePoint[1] + rotatedY,
+        ),
+        snapLines,
+      };
+    }
+
+    const originalPointerX = scenePointerX - pointerOffset.x;
+    const originalPointerY = scenePointerY - pointerOffset.y;
+    const shouldSkipExternalSnap =
+      LinearElementEditor._shouldSkipExternalSnapForBindableTarget({
+        appState: app.state,
+        elements,
+        elementsMap,
+        element,
+        pointIndex,
+        scenePoint: pointFrom<GlobalPoint>(originalPointerX, originalPointerY),
+        selectedPointsIndices,
+      });
+
+    const { snapOffset, snapLines } = snapLinearElementPoint(
+      elements,
+      element,
+      pointFrom(originalPointerX, originalPointerY),
+      app,
+      event,
+      elementsMap,
+      {
+        includeExternalPoints: !shouldSkipExternalSnap,
+        includeSelfPoints: true,
+        selectedPointsIndices,
+      },
+    );
+
+    return {
+      point: LinearElementEditor.createPointAt(
+        element,
+        elementsMap,
+        originalPointerX + snapOffset.x,
+        originalPointerY + snapOffset.y,
+        gridSize,
+      ),
+      snapLines,
+    };
+  }
+
   static getBoundTextElementPosition = (
     element: ExcalidrawLinearElement,
     boundTextElement: ExcalidrawTextElementWithContainer,

packages/element/src/snapping.ts

@@ -1,4 +1,8 @@
 import {
+  isCloseTo,
+  line,
+  linesIntersectAt,
+  pointDistance,
   pointFrom,
   pointRotateRads,
   rangeInclusive,
@@ -13,7 +17,7 @@ import {
   getDraggedElementsBounds,
   getElementAbsoluteCoords,
 } from "@excalidraw/element";
-import { isBoundToContainer } from "@excalidraw/element";
+import { isBoundToContainer, isElbowArrow } from "@excalidraw/element";
 
 import { getMaximumGroups } from "@excalidraw/element";
 
@@ -29,14 +33,18 @@ import type { MaybeTransformHandleType } from "@excalidraw/element";
 import type {
   ElementsMap,
   ExcalidrawElement,
+  ExcalidrawLinearElement,
   NonDeletedExcalidrawElement,
+  NonDeleted,
 } from "@excalidraw/element/types";
 
 import type {
   AppClassProperties,
   AppState,
   KeyboardModifiersObject,
-} from "./types";
+} from "@excalidraw/excalidraw/types";
+
+import { LinearElementEditor } from "./linearElementEditor";
 
 const SNAP_DISTANCE = 8;
 
@@ -122,6 +130,11 @@ export type SnapLine = PointSnapLine | GapSnapLine | PointerSnapLine;
 export class SnapCache {
   private static referenceSnapPoints: GlobalPoint[] | null = null;
 
+  private static linearElementAxisSnapTargets: {
+    editingElementId: ExcalidrawElement["id"];
+    snapTargets: GlobalPoint[];
+  } | null = null;
+
   private static visibleGaps: {
     verticalGaps: Gap[];
     horizontalGaps: Gap[];
@@ -135,6 +148,27 @@ export class SnapCache {
     return SnapCache.referenceSnapPoints;
   };
 
+  public static setLinearElementAxisSnapTargets = (
+    editingElementId: ExcalidrawElement["id"],
+    snapTargets: GlobalPoint[] | null,
+  ) => {
+    SnapCache.linearElementAxisSnapTargets = snapTargets
+      ? {
+          editingElementId,
+          snapTargets,
+        }
+      : null;
+  };
+
+  public static getLinearElementAxisSnapTargets = (
+    editingElementId: ExcalidrawElement["id"],
+  ) => {
+    return SnapCache.linearElementAxisSnapTargets?.editingElementId ===
+      editingElementId
+      ? SnapCache.linearElementAxisSnapTargets.snapTargets
+      : null;
+  };
+
   public static setVisibleGaps = (
     gaps: {
       verticalGaps: Gap[];
@@ -150,6 +184,7 @@ export class SnapCache {
 
   public static destroy = () => {
     SnapCache.referenceSnapPoints = null;
+    SnapCache.linearElementAxisSnapTargets = null;
     SnapCache.visibleGaps = null;
   };
 }
@@ -235,6 +270,19 @@ export const getElementsCorners = (
     const halfHeight = (y2 - y1) / 2;
 
     if (
+      (element.type === "line" || element.type === "arrow") &&
+      !boundingBoxCorners
+    ) {
+      // For linear elements, use actual points instead of bounding box
+      const linearPoints = LinearElementEditor.getPointsGlobalCoordinates(
+        element as NonDeleted<ExcalidrawLinearElement>,
+        elementsMap,
+        {
+          dragOffset,
+        },
+      );
+      result = linearPoints;
+    } else if (
       (element.type === "diamond" || element.type === "ellipse") &&
       !boundingBoxCorners
     ) {
@@ -633,6 +681,227 @@ export const getReferenceSnapPoints = (
     .flatMap((elementGroup) => getElementsCorners(elementGroup, elementsMap));
 };
 
+const getExternalAxisSnapTargets = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  editingElement: ExcalidrawLinearElement,
+  appState: AppState,
+  elementsMap: ElementsMap,
+) => {
+  const cachedAxisSnapTargets = SnapCache.getLinearElementAxisSnapTargets(
+    editingElement.id,
+  );
+
+  const externalAxisSnapTargets =
+    cachedAxisSnapTargets ??
+    getReferenceSnapPoints(elements, [editingElement], appState, elementsMap);
+
+  if (!cachedAxisSnapTargets) {
+    SnapCache.setLinearElementAxisSnapTargets(
+      editingElement.id,
+      externalAxisSnapTargets,
+    );
+  }
+
+  return externalAxisSnapTargets;
+};
+
+const getOwnAxisSnapTargets = (
+  editingElement: ExcalidrawLinearElement,
+  elementsMap: ElementsMap,
+  selectedPointsIndices?: readonly number[],
+) => {
+  return LinearElementEditor.getPointsGlobalCoordinates(
+    editingElement as NonDeleted<ExcalidrawLinearElement>,
+    elementsMap,
+    {
+      excludePointsIndices: selectedPointsIndices,
+    },
+  );
+};
+
+export const getAxisSnapTargets = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  editingElement: ExcalidrawLinearElement,
+  appState: AppState,
+  elementsMap: ElementsMap,
+  options: {
+    includeSelfPoints?: boolean;
+    selectedPointsIndices?: readonly number[];
+  } = {},
+) => {
+  const externalAxisSnapTargets = getExternalAxisSnapTargets(
+    elements,
+    editingElement,
+    appState,
+    elementsMap,
+  );
+
+  if (!options.includeSelfPoints) {
+    return externalAxisSnapTargets;
+  }
+
+  return externalAxisSnapTargets.concat(
+    getOwnAxisSnapTargets(
+      editingElement,
+      elementsMap,
+      options.selectedPointsIndices,
+    ),
+  );
+};
+
+const collectNearestAxisSnapCandidates = (
+  axisSnapTargets: readonly GlobalPoint[],
+  pointerPosition: GlobalPoint,
+  nearestSnapsX: Snaps,
+  nearestSnapsY: Snaps,
+  minOffset: Vector2D,
+) => {
+  for (const snapTarget of axisSnapTargets) {
+    const offsetX = snapTarget[0] - pointerPosition[0];
+    const offsetY = snapTarget[1] - pointerPosition[1];
+    const absOffsetX = Math.abs(offsetX);
+    const absOffsetY = Math.abs(offsetY);
+
+    if (absOffsetX > minOffset.x && absOffsetY > minOffset.y) {
+      continue;
+    }
+
+    if (absOffsetX <= minOffset.x) {
+      if (absOffsetX < minOffset.x) {
+        nearestSnapsX.length = 0;
+      }
+
+      nearestSnapsX.push({
+        type: "point",
+        points: [pointerPosition, snapTarget],
+        offset: offsetX,
+      });
+
+      minOffset.x = absOffsetX;
+    }
+
+    if (absOffsetY <= minOffset.y) {
+      if (absOffsetY < minOffset.y) {
+        nearestSnapsY.length = 0;
+      }
+
+      nearestSnapsY.push({
+        type: "point",
+        points: [pointerPosition, snapTarget],
+        offset: offsetY,
+      });
+
+      minOffset.y = absOffsetY;
+    }
+  }
+};
+
+export const snapLinearElementPoint = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  editingElement: ExcalidrawLinearElement,
+  pointerPosition: GlobalPoint,
+  app: AppClassProperties,
+  event: KeyboardModifiersObject,
+  elementsMap: ElementsMap,
+  options: {
+    includeExternalPoints?: boolean;
+    includeSelfPoints?: boolean;
+    selectedPointsIndices?: readonly number[];
+  } = {},
+) => {
+  if (
+    !isSnappingEnabled({ app, event, selectedElements: [editingElement] }) ||
+    isElbowArrow(editingElement)
+  ) {
+    return {
+      snapOffset: { x: 0, y: 0 },
+      snapLines: [],
+    };
+  }
+
+  const snapDistance = getSnapDistance(app.state.zoom.value);
+  const minOffset = {
+    x: snapDistance,
+    y: snapDistance,
+  };
+
+  const nearestSnapsX: Snaps = [];
+  const nearestSnapsY: Snaps = [];
+
+  if (options.includeExternalPoints !== false) {
+    collectNearestAxisSnapCandidates(
+      getExternalAxisSnapTargets(
+        elements,
+        editingElement,
+        app.state,
+        elementsMap,
+      ),
+      pointerPosition,
+      nearestSnapsX,
+      nearestSnapsY,
+      minOffset,
+    );
+  }
+
+  if (options.includeSelfPoints) {
+    collectNearestAxisSnapCandidates(
+      getOwnAxisSnapTargets(
+        editingElement,
+        elementsMap,
+        options.selectedPointsIndices,
+      ),
+      pointerPosition,
+      nearestSnapsX,
+      nearestSnapsY,
+      minOffset,
+    );
+  }
+
+  const snapOffset = {
+    x: nearestSnapsX[0]?.offset ?? 0,
+    y: nearestSnapsY[0]?.offset ?? 0,
+  };
+
+  // Create snap lines using the snapped position (fixed position)
+  let pointSnapLines: SnapLine[] = [];
+
+  if (snapOffset.x !== 0 || snapOffset.y !== 0) {
+    const snappedPosition = pointFrom<GlobalPoint>(
+      pointerPosition[0] + snapOffset.x,
+      pointerPosition[1] + snapOffset.y,
+    );
+
+    const snappedSnapsX = nearestSnapsX
+      .filter(
+        (snap): snap is PointSnap =>
+          snap.type === "point" && isCloseTo(snap.offset, snapOffset.x, 0.01),
+      )
+      .map((snap) => ({
+        type: "point" as const,
+        points: [snappedPosition, snap.points[1]] as [GlobalPoint, GlobalPoint],
+        offset: 0,
+      }));
+
+    const snappedSnapsY = nearestSnapsY
+      .filter(
+        (snap): snap is PointSnap =>
+          snap.type === "point" && isCloseTo(snap.offset, snapOffset.y, 0.01),
+      )
+      .map((snap) => ({
+        type: "point" as const,
+        points: [snappedPosition, snap.points[1]] as [GlobalPoint, GlobalPoint],
+        offset: 0,
+      }));
+
+    pointSnapLines = createPointSnapLines(snappedSnapsX, snappedSnapsY);
+  }
+
+  return {
+    snapOffset,
+    snapLines: pointSnapLines,
+  };
+};
+
 const getPointSnaps = (
   selectedElements: ExcalidrawElement[],
   selectionSnapPoints: GlobalPoint[],
@@ -1412,3 +1681,79 @@ export const isActiveToolNonLinearSnappable = (
     activeToolType === TOOL_TYPE.text
   );
 };
+
+/**
+ * Snaps to discrete angle rotation logic.
+ * This function handles the common pattern of finding intersections between
+ * angle lines and snap lines, and updating the snap lines accordingly.
+ *
+ * @param snapLines - The original snap lines from snapping
+ * @param angleLine - The line representing the discrete angle constraint
+ * @param gridPosition - The grid position (original pointer position)
+ * @param referencePosition - The reference position (usually the start point)
+ * @returns Object containing updated snap lines and position deltas
+ */
+export const snapToDiscreteAngle = (
+  snapLines: SnapLine[],
+  angleLine: [GlobalPoint, GlobalPoint],
+  gridPosition: GlobalPoint,
+  referencePosition: GlobalPoint,
+): {
+  snapLines: SnapLine[];
+  dxFromReference: number;
+  dyFromReference: number;
+} => {
+  if (snapLines.length === 0) {
+    return {
+      snapLines: [],
+      dxFromReference: gridPosition[0] - referencePosition[0],
+      dyFromReference: gridPosition[1] - referencePosition[1],
+    };
+  }
+
+  const firstSnapLine = snapLines[0];
+  if (firstSnapLine.type === "points" && firstSnapLine.points.length > 1) {
+    const snapLine = line(firstSnapLine.points[0], firstSnapLine.points[1]);
+    const intersection = linesIntersectAt<GlobalPoint>(
+      line(angleLine[0], angleLine[1]),
+      snapLine,
+    );
+
+    if (intersection) {
+      const dxFromReference = intersection[0] - referencePosition[0];
+      const dyFromReference = intersection[1] - referencePosition[1];
+
+      const furthestPoint = firstSnapLine.points.reduce(
+        (furthest, point) => {
+          const distance = pointDistance(intersection, point);
+          if (distance > furthest.distance) {
+            return { point, distance };
+          }
+          return furthest;
+        },
+        {
+          point: firstSnapLine.points[0],
+          distance: pointDistance(intersection, firstSnapLine.points[0]),
+        },
+      );
+
+      const updatedSnapLine: PointSnapLine = {
+        type: "points",
+        points: [furthestPoint.point, intersection],
+      };
+
+      return {
+        snapLines: [updatedSnapLine],
+        dxFromReference,
+        dyFromReference,
+      };
+    }
+  }
+
+  // If no intersection found, return original snap lines with grid position
+  return {
+    snapLines,
+    dxFromReference: gridPosition[0] - referencePosition[0],
+    dyFromReference: gridPosition[1] - referencePosition[1],
+  };
+};

packages/element/tests/linearElementEditor.test.tsx

@@ -155,6 +155,24 @@ describe("Test Linear Elements", () => {
     });
   };
 
+  const dragMove = (startPoint: GlobalPoint, endPoint: GlobalPoint) => {
+    fireEvent.pointerDown(interactiveCanvas, {
+      clientX: startPoint[0],
+      clientY: startPoint[1],
+    });
+    fireEvent.pointerMove(interactiveCanvas, {
+      clientX: endPoint[0],
+      clientY: endPoint[1],
+    });
+  };
+
+  const dragEnd = (endPoint: GlobalPoint) => {
+    fireEvent.pointerUp(interactiveCanvas, {
+      clientX: endPoint[0],
+      clientY: endPoint[1],
+    });
+  };
+
   const deletePoint = (point: GlobalPoint) => {
     fireEvent.pointerDown(interactiveCanvas, {
       clientX: point[0],
@@ -258,6 +276,73 @@ describe("Test Linear Elements", () => {
     expect(h.state.selectedLinearElement?.elementId).toEqual(h.elements[0].id);
   });
 
+  it("shows snap lines and snaps the endpoint when creating a line", () => {
+    const rect = API.createElement({
+      type: "rectangle",
+      x: 100,
+      y: 100,
+      width: 40,
+      height: 40,
+    });
+    API.setElements([rect]);
+    API.setAppState({ objectsSnapModeEnabled: true });
+
+    UI.clickTool("line");
+
+    const startPoint = pointFrom<GlobalPoint>(20, 20);
+    const pointerNearCorner = pointFrom<GlobalPoint>(95, 95);
+
+    dragMove(startPoint, pointerNearCorner);
+
+    expect(h.state.snapLines.length).toBeGreaterThan(0);
+
+    dragEnd(pointerNearCorner);
+
+    const line = h.elements.find(
+      (element): element is ExcalidrawLinearElement => element.type === "line",
+    );
+
+    expect(line).toBeDefined();
+
+    const endpoint = LinearElementEditor.getPointGlobalCoordinates(
+      line!,
+      line!.points[line!.points.length - 1],
+      h.app.scene.getNonDeletedElementsMap(),
+    );
+
+    expect(endpoint).toEqual(pointFrom<GlobalPoint>(100, 100));
+  });
+
+  it("prefers binding over external snaps when creating an arrow endpoint", () => {
+    const rect = API.createElement({
+      type: "rectangle",
+      x: 100,
+      y: 100,
+      width: 40,
+      height: 40,
+    });
+    API.setElements([rect]);
+    API.setAppState({ objectsSnapModeEnabled: true });
+
+    UI.clickTool("arrow");
+
+    const startPoint = pointFrom<GlobalPoint>(20, 20);
+    const pointerNearBindable = pointFrom<GlobalPoint>(96, 118);
+
+    dragMove(startPoint, pointerNearBindable);
+
+    expect(h.state.suggestedBinding?.element.id).toBe(rect.id);
+    expect(h.state.snapLines).toEqual([]);
+
+    dragEnd(pointerNearBindable);
+
+    const arrow = h.elements.find(
+      (element): element is ExcalidrawLinearElement => element.type === "arrow",
+    );
+
+    expect(arrow?.endBinding?.elementId).toBe(rect.id);
+  });
+
   it("should enter line editor via enter (line)", () => {
     createTwoPointerLinearElement("line");
     expect(h.state.selectedLinearElement?.isEditing).toBe(false);
@@ -401,6 +486,77 @@ describe("Test Linear Elements", () => {
       `);
     });
 
+    it("shows snap lines when dragging a point to another line point axis", () => {
+      const line = API.createElement({
+        type: "line",
+        x: 20,
+        y: 20,
+        width: 100,
+        height: 50,
+        roughness: 0,
+        points: [
+          pointFrom<LocalPoint>(0, 0),
+          pointFrom<LocalPoint>(50, 50),
+          pointFrom<LocalPoint>(100, 0),
+        ],
+      });
+
+      API.setElements([line]);
+      API.setAppState({ objectsSnapModeEnabled: true });
+      enterLineEditingMode(line);
+
+      const middlePoint = pointFrom<GlobalPoint>(70, 70);
+      const pointerNearEndPointX = pointFrom<GlobalPoint>(117, 65);
+
+      dragMove(middlePoint, pointerNearEndPointX);
+
+      expect(h.state.snapLines.length).toBeGreaterThan(0);
+
+      dragEnd(pointerNearEndPointX);
+
+      expect(API.getElement(line).points[1]).toEqual(
+        pointFrom<LocalPoint>(100, 45),
+      );
+    });
+
+    it("prefers binding over external snaps when dragging an existing arrow endpoint", () => {
+      const rect = API.createElement({
+        type: "rectangle",
+        x: 100,
+        y: 100,
+        width: 40,
+        height: 40,
+      });
+      const arrow = API.createElement({
+        type: "arrow",
+        x: 20,
+        y: 20,
+        width: 40,
+        height: 0,
+        points: [pointFrom<LocalPoint>(0, 0), pointFrom<LocalPoint>(40, 0)],
+      });
+
+      API.setElements([rect, arrow]);
+      API.setAppState({ objectsSnapModeEnabled: true });
+      enterLineEditingMode(arrow);
+
+      const endPoint = LinearElementEditor.getPointGlobalCoordinates(
+        arrow,
+        arrow.points[arrow.points.length - 1],
+        h.app.scene.getNonDeletedElementsMap(),
+      );
+      const pointerNearBindable = pointFrom<GlobalPoint>(96, 118);
+
+      dragMove(endPoint, pointerNearBindable);
+
+      expect(h.state.suggestedBinding?.element.id).toBe(rect.id);
+      expect(h.state.snapLines).toEqual([]);
+
+      dragEnd(pointerNearBindable);
+
+      expect(API.getElement(arrow).endBinding?.elementId).toBe(rect.id);
+    });
+
     it("should update the midpoints when element roundness changed", async () => {
       createThreePointerLinearElement("line");
 

packages/excalidraw/actions/actionCanvas.tsx

@@ -40,7 +40,6 @@ import {
   ZoomResetIcon,
 } from "../components/icons";
 import { setCursor } from "../cursor";
-import { constrainScrollState } from "../scene/scrollConstraints";
 
 import { t } from "../i18n";
 import { getNormalizedZoom } from "../scene";
@@ -52,8 +51,6 @@ import { register } from "./register";
 
 import type { AppState, Offsets } from "../types";
 
-const canUseZoomActions = (appState: AppState) => !appState.scrollConstraints;
-
 export const actionChangeViewBackgroundColor = register<Partial<AppState>>({
   name: "changeViewBackgroundColor",
   label: "labels.canvasBackground",
@@ -142,7 +139,7 @@ export const actionZoomIn = register({
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
-      appState: constrainScrollState({
+      appState: {
         ...appState,
         ...getStateForZoom(
           {
@@ -153,7 +150,7 @@ export const actionZoomIn = register({
           appState,
         ),
         userToFollow: null,
-      }),
+      },
       captureUpdate: CaptureUpdateAction.EVENTUALLY,
     };
   },
@@ -183,7 +180,7 @@ export const actionZoomOut = register({
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
-      appState: constrainScrollState({
+      appState: {
         ...appState,
         ...getStateForZoom(
           {
@@ -194,7 +191,7 @@ export const actionZoomOut = register({
           appState,
         ),
         userToFollow: null,
-      }),
+      },
       captureUpdate: CaptureUpdateAction.EVENTUALLY,
     };
   },
@@ -246,7 +243,6 @@ export const actionResetZoom = register({
         className="reset-zoom-button zoom-button"
         title={t("buttons.resetZoom")}
         aria-label={t("buttons.resetZoom")}
-        disabled={!canUseZoomActions(appState)}
         onClick={() => {
           updateData(null);
         }}
@@ -255,7 +251,6 @@ export const actionResetZoom = register({
       </ToolButton>
     </Tooltip>
   ),
-  predicate: (_elements, appState) => canUseZoomActions(appState),
   keyTest: (event) =>
     (event.code === CODES.ZERO || event.code === CODES.NUM_ZERO) &&
     (event[KEYS.CTRL_OR_CMD] || event.shiftKey),
@@ -279,7 +274,7 @@ const zoomValueToFitBoundsOnViewport = (
   return Math.min(adjustedZoomValue, 1);
 };
 
-export function resolveViewportForBounds({
+export const zoomToFitBounds = ({
   bounds,
   appState,
   canvasOffsets,
@@ -297,7 +292,7 @@ export function resolveViewportForBounds({
   viewportZoomFactor?: number;
   minZoom?: number;
   maxZoom?: number;
-}) {
+}) => {
   viewportZoomFactor = clamp(viewportZoomFactor, MIN_ZOOM, MAX_ZOOM);
 
   const [x1, y1, x2, y2] = bounds;
@@ -350,58 +345,12 @@ export function resolveViewportForBounds({
     zoom: { value: newZoomValue },
   });
 
-  return {
-    bounds,
-    scrollX: centerScroll.scrollX,
-    scrollY: centerScroll.scrollY,
-    zoom: { value: newZoomValue },
-    viewportZoomFactor,
-    viewportDimensions: {
-      width: appState.width,
-      height: appState.height,
-    },
-    effectiveViewportDimensions: {
-      width: effectiveCanvasWidth,
-      height: effectiveCanvasHeight,
-    },
-  };
-}
-
-export const zoomToFitBounds = ({
-  bounds,
-  appState,
-  canvasOffsets,
-  fitToViewport = false,
-  viewportZoomFactor = 1,
-  minZoom = -Infinity,
-  maxZoom = Infinity,
-}: {
-  bounds: SceneBounds;
-  canvasOffsets?: Offsets;
-  appState: Readonly<AppState>;
-  /** whether to fit content to viewport (beyond >100%) */
-  fitToViewport: boolean;
-  /** zoom content to cover X of the viewport, when fitToViewport=true */
-  viewportZoomFactor?: number;
-  minZoom?: number;
-  maxZoom?: number;
-}) => {
-  const resolvedViewport = resolveViewportForBounds({
-    bounds,
-    appState,
-    canvasOffsets,
-    fitToViewport,
-    viewportZoomFactor,
-    minZoom,
-    maxZoom,
-  });
-
   return {
     appState: {
       ...appState,
-      scrollX: resolvedViewport.scrollX,
+      scrollX: centerScroll.scrollX,
-      scrollY: resolvedViewport.scrollY,
+      scrollY: centerScroll.scrollY,
-      zoom: resolvedViewport.zoom,
+      zoom: { value: newZoomValue },
     },
     captureUpdate: CaptureUpdateAction.EVENTUALLY,
   };
@@ -459,7 +408,6 @@ export const actionZoomToFitSelectionInViewport = register({
       canvasOffsets: app.getEditorUIOffsets(),
     });
   },
-  predicate: (_elements, appState) => canUseZoomActions(appState),
   // NOTE shift-2 should have been assigned actionZoomToFitSelection.
   // TBD on how proceed
   keyTest: (event) =>
@@ -486,7 +434,6 @@ export const actionZoomToFitSelection = register({
       canvasOffsets: app.getEditorUIOffsets(),
     });
   },
-  predicate: (_elements, appState) => canUseZoomActions(appState),
   // NOTE this action should use shift-2 per figma, alas
   keyTest: (event) =>
     event.code === CODES.THREE &&
@@ -511,7 +458,6 @@ export const actionZoomToFit = register({
       fitToViewport: false,
       canvasOffsets: app.getEditorUIOffsets(),
     }),
-  predicate: (_elements, appState) => canUseZoomActions(appState),
   keyTest: (event) =>
     event.code === CODES.ONE &&
     event.shiftKey &&

packages/excalidraw/actions/actionGroup.tsx

@@ -49,18 +49,9 @@ import { register } from "./register";
 
 import type { AppClassProperties, AppState } from "../types";
 
-const allElementsInSameGroup = (
+const allElementsInSameGroup = (elements: readonly ExcalidrawElement[]) => {
-  elements: readonly ExcalidrawElement[],
-  editingGroupId: AppState["editingGroupId"],
-) => {
   if (elements.length >= 2) {
-    const editingGroupIndex = editingGroupId
+    const groupIds = elements[0].groupIds;
-      ? elements[0].groupIds.indexOf(editingGroupId)
-      : -1;
-    const groupIds =
-      editingGroupIndex > -1
-        ? elements[0].groupIds.slice(0, editingGroupIndex)
-        : elements[0].groupIds;
     for (const groupId of groupIds) {
       if (
         elements.reduce(
@@ -87,7 +78,7 @@ const enableActionGroup = (
 
   return (
     selectedElements.length >= 2 &&
-    !allElementsInSameGroup(selectedElements, appState.editingGroupId) &&
+    !allElementsInSameGroup(selectedElements) &&
     !frameAndChildrenSelectedTogether(selectedElements)
   );
 };

packages/excalidraw/actions/actionToggleSearchMenu.ts

@@ -53,5 +53,8 @@ export const actionToggleSearchMenu = register({
     };
   },
   checked: (appState: AppState) => appState.gridModeEnabled,
+  predicate: (element, appState, props) => {
+    return props.gridModeEnabled === undefined;
+  },
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.F,
 });

packages/excalidraw/actions/manager.tsx

@@ -95,13 +95,6 @@ export class ActionManager {
           (action.name in canvasActions
             ? canvasActions[action.name as keyof typeof canvasActions]
             : true) &&
-          (!action.predicate ||
-            action.predicate(
-              this.getElementsIncludingDeleted(),
-              this.getAppState(),
-              this.app.props,
-              this.app,
-            )) &&
           action.keyTest &&
           action.keyTest(
             event,

packages/excalidraw/appState.ts

@@ -122,7 +122,6 @@ export const getDefaultAppState = (): Omit<
     objectsSnapModeEnabled: false,
     userToFollow: null,
     followedBy: new Set(),
-    scrollConstraints: null,
     isCropping: false,
     croppingElementId: null,
     searchMatches: null,
@@ -251,7 +250,6 @@ const APP_STATE_STORAGE_CONF = (<
   objectsSnapModeEnabled: { browser: true, export: false, server: false },
   userToFollow: { browser: false, export: false, server: false },
   followedBy: { browser: false, export: false, server: false },
-  scrollConstraints: { browser: true, export: false, server: false },
   isCropping: { browser: false, export: false, server: false },
   croppingElementId: { browser: false, export: false, server: false },
   searchMatches: { browser: false, export: false, server: false },

packages/excalidraw/components/App.tsx

@@ -239,6 +239,16 @@ import {
   hitElementBoundingBox,
   isLineElement,
   isSimpleArrow,
+  isGridModeEnabled,
+  SnapCache,
+  isActiveToolNonLinearSnappable,
+  getSnapLinesAtPointer,
+  isSnappingEnabled,
+  getReferenceSnapPoints,
+  getVisibleGaps,
+  snapDraggedElements,
+  snapNewElement,
+  snapResizingElements,
   StoreDelta,
   type ApplyToOptions,
   positionElementsOnGrid,
@@ -326,10 +336,7 @@ import {
   actionToggleCropEditor,
 } from "../actions";
 import { actionWrapTextInContainer } from "../actions/actionBoundText";
-import {
+import { actionToggleHandTool, zoomToFit } from "../actions/actionCanvas";
-  actionToggleHandTool,
-  resolveViewportForBounds,
-} from "../actions/actionCanvas";
 import { actionPaste } from "../actions/actionClipboard";
 import { actionCopyElementLink } from "../actions/actionElementLink";
 import { actionUnlockAllElements } from "../actions/actionElementLock";
@@ -373,7 +380,7 @@ import {
   hasBackground,
   isSomeElementSelected,
 } from "../scene";
-import { getConstrainedZoomAnchor, getStateForZoom } from "../scene/zoom";
+import { getStateForZoom } from "../scene/zoom";
 import {
   dataURLToString,
   generateIdFromFile,
@@ -399,18 +406,6 @@ import {
 import { Fonts } from "../fonts";
 import { editorJotaiStore, type WritableAtom } from "../editor-jotai";
 import { ImageSceneDataError } from "../errors";
-import {
-  getSnapLinesAtPointer,
-  snapDraggedElements,
-  isActiveToolNonLinearSnappable,
-  snapNewElement,
-  snapResizingElements,
-  isSnappingEnabled,
-  getVisibleGaps,
-  getReferenceSnapPoints,
-  SnapCache,
-  isGridModeEnabled,
-} from "../snapping";
 import { Renderer } from "../scene/Renderer";
 import {
   setEraserCursor,
@@ -429,12 +424,6 @@ import { isMaybeMermaidDefinition } from "../mermaid";
 
 import { LassoTrail } from "../lasso";
 
-import {
-  constrainScrollState,
-  calculateConstrainedScrollCenter,
-  areCanvasTranslatesClose,
-  getScrollConstraintsForBounds,
-} from "../scene/scrollConstraints";
 import { EraserTrail } from "../eraser";
 
 import { getShortcutKey } from "../shortcut";
@@ -497,9 +486,6 @@ import type {
   CollaboratorPointer,
   ToolType,
   OnUserFollowedPayload,
-  ScrollConstraints,
-  AnimateTranslateCanvasValues,
-  ScrollToContentOptions,
   UnsubscribeCallback,
   EmbedsValidationStatus,
   ElementsPendingErasure,
@@ -552,7 +538,6 @@ const ExcalidrawAppStateContext = React.createContext<AppState>({
   height: 0,
   offsetLeft: 0,
   offsetTop: 0,
-  scrollConstraints: null,
 });
 ExcalidrawAppStateContext.displayName = "ExcalidrawAppStateContext";
 
@@ -607,20 +592,6 @@ let isDraggingScrollBar: boolean = false;
 let currentScrollBars: ScrollBars = { horizontal: null, vertical: null };
 let touchTimeout = 0;
 let invalidateContextMenu = false;
-let scrollConstraintsAnimationTimeout: ReturnType<typeof setTimeout> | null =
-  null;
-
-const areScrollConstraintsEqual = (
-  left: ScrollConstraints | null | undefined,
-  right: ScrollConstraints | null | undefined,
-) => {
-  return left === right || (!!left && !!right && isShallowEqual(left, right));
-};
-
-const SET_SCROLL_CONSTRAINTS_CONTROLLED_WARNING =
-  "Excalidraw: `setScrollConstraints()` is ignored when the `scrollConstraints` prop is controlled.";
-const SCROLL_TO_CONTENT_SCROLL_LOCK_CONTROLLED_WARNING =
-  "Excalidraw: `scrollToContent()` with `scrollLock` is ignored when the `scrollConstraints` prop is controlled.";
 
 /**
  * Map of youtube embed video states
@@ -808,12 +779,33 @@ class App extends React.Component<AppProps, AppState> {
       onUserFollow: (cb) => this.onUserFollowEmitter.on(cb),
       onStateChange: this.onStateChange,
       onEvent: this.onEvent,
-      app: this,
-      setScrollConstraints: this.setScrollConstraints,
     };
     return api;
   }
 
+  private withStableSnapLines<T extends { snapLines: AppState["snapLines"] }>(
+    state: T,
+  ): T {
+    const snapLines = updateStable(this.state.snapLines, state.snapLines);
+
+    return snapLines === state.snapLines
+      ? state
+      : {
+          ...state,
+          snapLines,
+        };
+  }
+
+  private shouldUpdateSelectedLinearElementState(
+    selectedLinearElement: AppState["selectedLinearElement"],
+    snapLines: AppState["snapLines"],
+  ) {
+    return (
+      selectedLinearElement !== this.state.selectedLinearElement ||
+      snapLines !== this.state.snapLines
+    );
+  }
+
   constructor(props: AppProps) {
     super(props);
     const defaultAppState = getDefaultAppState();
@@ -824,7 +816,6 @@ class App extends React.Component<AppProps, AppState> {
       objectsSnapModeEnabled = false,
       theme = defaultAppState.theme,
       name = `${t("labels.untitled")}-${getDateTime()}`,
-      scrollConstraints,
     } = props;
 
     this.state = {
@@ -840,7 +831,6 @@ class App extends React.Component<AppProps, AppState> {
       name,
       width: window.innerWidth,
       height: window.innerHeight,
-      scrollConstraints: scrollConstraints ?? null,
     };
 
     this.refreshEditorInterface();
@@ -2976,13 +2966,7 @@ class App extends React.Component<AppProps, AppState> {
       toast: this.state.toast,
     };
 
-    if (this.props.scrollConstraints) {
+    if (initialData?.scrollToContent) {
-      restoredAppState = {
-        ...restoredAppState,
-        scrollConstraints: this.props.scrollConstraints,
-        ...calculateConstrainedScrollCenter(this.state, restoredAppState),
-      };
-    } else if (initialData?.scrollToContent) {
       restoredAppState = {
         ...restoredAppState,
         ...calculateScrollCenter(restoredElements, {
@@ -2991,18 +2975,10 @@ class App extends React.Component<AppProps, AppState> {
           height: this.state.height,
           offsetTop: this.state.offsetTop,
           offsetLeft: this.state.offsetLeft,
-          scrollConstraints: this.state.scrollConstraints,
         }),
       };
     }
 
-    if (initialData?.scrollX != null) {
-      restoredAppState.scrollX = initialData.scrollX;
-    }
-    if (initialData?.scrollY != null) {
-      restoredAppState.scrollY = initialData.scrollY;
-    }
-
     this.resetStore();
     this.resetHistory();
     this.syncActionResult({
@@ -3253,11 +3229,7 @@ class App extends React.Component<AppProps, AppState> {
       .forEach((element) => ShapeCache.delete(element));
     this.refreshEditorInterface();
     this.updateDOMRect();
-    if (this.state.scrollConstraints) {
+    this.setState({});
-      this.setState((state) => constrainScrollState(state));
-    } else {
-      this.setState({});
-    }
   });
 
   /** generally invoked only if fullscreen was invoked programmatically */
@@ -3507,15 +3479,6 @@ class App extends React.Component<AppProps, AppState> {
       this.setState({ viewModeEnabled: !!this.props.viewModeEnabled });
     }
 
-    if (
-      !areScrollConstraintsEqual(
-        prevProps.scrollConstraints,
-        this.props.scrollConstraints,
-      )
-    ) {
-      this.syncScrollConstraints(this.props.scrollConstraints ?? null);
-    }
-
     if (prevState.viewModeEnabled !== this.state.viewModeEnabled) {
       this.addEventListeners();
       this.deselectElements();
@@ -3576,33 +3539,6 @@ class App extends React.Component<AppProps, AppState> {
       this.props.onChange?.(elements, this.state, this.files);
       this.onChangeEmitter.trigger(elements, this.state, this.files);
     }
-
-    if (this.state.scrollConstraints?.animateOnNextUpdate) {
-      const newState = constrainScrollState(this.state, "rigid");
-      const fromValues = {
-        scrollX: this.state.scrollX,
-        scrollY: this.state.scrollY,
-        zoom: this.state.zoom.value,
-      };
-      const toValues = {
-        scrollX: newState.scrollX,
-        scrollY: newState.scrollY,
-        zoom: newState.zoom.value,
-      };
-
-      if (areCanvasTranslatesClose(fromValues, toValues)) {
-        return;
-      }
-
-      if (scrollConstraintsAnimationTimeout) {
-        clearTimeout(scrollConstraintsAnimationTimeout);
-      }
-
-      scrollConstraintsAnimationTimeout = setTimeout(() => {
-        this.cancelInProgressAnimation?.();
-        this.animateToConstrainedArea(fromValues, toValues);
-      }, 200);
-    }
   }
 
   private renderInteractiveSceneCallback = ({
@@ -4370,8 +4306,8 @@ class App extends React.Component<AppProps, AppState> {
      */
     value: number,
   ) => {
-    this.setState(
+    this.setState({
-      getStateForZoom(
+      ...getStateForZoom(
         {
           viewportX: this.state.width / 2 + this.state.offsetLeft,
           viewportY: this.state.height / 2 + this.state.offsetTop,
@@ -4379,13 +4315,11 @@ class App extends React.Component<AppProps, AppState> {
         },
         this.state,
       ),
-    );
+    });
   };
 
   private cancelInProgressAnimation: (() => void) | null = null;
 
-  private scrollToContentRequestId = 0;
-
   scrollToContent = (
     /**
      * target to scroll to
@@ -4397,13 +4331,30 @@ class App extends React.Component<AppProps, AppState> {
       | string
       | ExcalidrawElement
       | readonly ExcalidrawElement[] = this.scene.getNonDeletedElements(),
-    opts?: ScrollToContentOptions,
+    opts?: (
+      | {
+          fitToContent?: boolean;
+          fitToViewport?: never;
+          viewportZoomFactor?: number;
+          animate?: boolean;
+          duration?: number;
+        }
+      | {
+          fitToContent?: never;
+          fitToViewport?: boolean;
+          /** when fitToViewport=true, how much screen should the content cover,
+           * between 0.1 (10%) and 1 (100%)
+           */
+          viewportZoomFactor?: number;
+          animate?: boolean;
+          duration?: number;
+        }
+    ) & {
+      minZoom?: number;
+      maxZoom?: number;
+      canvasOffsets?: Offsets;
+    },
   ) => {
-    if (opts?.scrollLock && this.props.scrollConstraints !== undefined) {
-      console.warn(SCROLL_TO_CONTENT_SCROLL_LOCK_CONTROLLED_WARNING);
-      opts = { ...opts, scrollLock: undefined };
-    }
-
     if (typeof target === "string") {
       let id: string | null;
       if (isElementLink(target)) {
@@ -4415,29 +4366,10 @@ class App extends React.Component<AppProps, AppState> {
         const elements = this.scene.getElementsFromId(id);
 
         if (elements?.length) {
-          if (opts?.fitToViewport) {
+          this.scrollToContent(elements, {
-            this.scrollToContent(elements, {
+            fitToContent: opts?.fitToContent ?? true,
-              fitToViewport: true,
+            animate: opts?.animate ?? true,
-              viewportZoomFactor: opts.viewportZoomFactor,
+          });
-              animate: opts.animate ?? true,
-              duration: opts.duration,
-              scrollLock: opts.scrollLock,
-              minZoom: opts.minZoom,
-              maxZoom: opts.maxZoom,
-              canvasOffsets: opts.canvasOffsets,
-            });
-          } else {
-            this.scrollToContent(elements, {
-              fitToContent: opts?.fitToContent ?? true,
-              viewportZoomFactor: opts?.viewportZoomFactor,
-              animate: opts?.animate ?? true,
-              duration: opts?.duration,
-              scrollLock: opts?.scrollLock,
-              minZoom: opts?.minZoom,
-              maxZoom: opts?.maxZoom,
-              canvasOffsets: opts?.canvasOffsets,
-            });
-          }
         } else if (isElementLink(target)) {
           this.setState({
             toast: {
@@ -4452,45 +4384,27 @@ class App extends React.Component<AppProps, AppState> {
     }
 
     this.cancelInProgressAnimation?.();
-    this.scrollToContentRequestId += 1;
-    this.debounceConstrainScrollState.cancel();
-
-    if (scrollConstraintsAnimationTimeout) {
-      clearTimeout(scrollConstraintsAnimationTimeout);
-      scrollConstraintsAnimationTimeout = null;
-    }
-
-    if (opts?.scrollLock != null && this.state.scrollConstraints) {
-      // Clear the previous lock before starting the next locked transition so
-      // stale constraint enforcement cannot snap us back mid-flight.
-      this.setState({ scrollConstraints: null });
-    }
 
     // convert provided target into ExcalidrawElement[] if necessary
     const targetElements = Array.isArray(target) ? target : [target];
 
-    if (!targetElements.length) {
-      return;
-    }
-
     let zoom = this.state.zoom;
     let scrollX = this.state.scrollX;
     let scrollY = this.state.scrollY;
-    const targetBounds = getCommonBounds(targetElements);
 
     if (opts?.fitToContent || opts?.fitToViewport) {
-      const resolvedViewport = resolveViewportForBounds({
+      const { appState } = zoomToFit({
-        bounds: targetBounds,
         canvasOffsets: opts.canvasOffsets,
+        targetElements,
         appState: this.state,
         fitToViewport: !!opts?.fitToViewport,
         viewportZoomFactor: opts?.viewportZoomFactor,
         minZoom: opts?.minZoom,
         maxZoom: opts?.maxZoom,
       });
-      zoom = resolvedViewport.zoom;
+      zoom = appState.zoom;
-      scrollX = resolvedViewport.scrollX;
+      scrollX = appState.scrollX;
-      scrollY = resolvedViewport.scrollY;
+      scrollY = appState.scrollY;
     } else {
       // compute only the viewport location, without any zoom adjustment
       const scroll = calculateScrollCenter(targetElements, this.state);
@@ -4498,72 +4412,51 @@ class App extends React.Component<AppProps, AppState> {
       scrollY = scroll.scrollY;
     }
 
-    const scrollConstraints = opts?.scrollLock
-      ? getScrollConstraintsForBounds({
-          bounds: targetBounds,
-          zoom,
-          viewportDimensions: {
-            width: this.state.width,
-            height: this.state.height,
-          },
-          scrollLock: opts.scrollLock,
-        })
-      : null;
-    const requestId = this.scrollToContentRequestId;
-
-    const installScrollConstraints = () => {
-      if (!scrollConstraints || requestId !== this.scrollToContentRequestId) {
-        return;
-      }
-
-      this.setState({
-        scrollConstraints,
-      });
-    };
-
     // when animating, we use RequestAnimationFrame to prevent the animation
     // from slowing down other processes
     if (opts?.animate) {
-      const fromValues = {
+      const origScrollX = this.state.scrollX;
-        scrollX: this.state.scrollX,
+      const origScrollY = this.state.scrollY;
-        scrollY: this.state.scrollY,
+      const origZoom = this.state.zoom.value;
-        zoom: this.state.zoom.value,
-      };
 
-      const toValues = { scrollX, scrollY, zoom: zoom.value };
+      const cancel = easeToValuesRAF({
-
+        fromValues: {
-      this.animateTranslateCanvas({
+          scrollX: origScrollX,
-        fromValues,
+          scrollY: origScrollY,
-        toValues,
+          zoom: origZoom,
-        duration: opts?.duration ?? 500,
+        },
+        toValues: { scrollX, scrollY, zoom: zoom.value },
+        interpolateValue: (from, to, progress, key) => {
+          // for zoom, use different easing
+          if (key === "zoom") {
+            return from * Math.pow(to / from, easeOut(progress));
+          }
+          // handle using default
+          return undefined;
+        },
+        onStep: ({ scrollX, scrollY, zoom }) => {
+          this.setState({
+            scrollX,
+            scrollY,
+            zoom: { value: zoom },
+          });
+        },
         onStart: () => {
           this.setState({ shouldCacheIgnoreZoom: true });
         },
         onEnd: () => {
-          if (requestId !== this.scrollToContentRequestId) {
-            return;
-          }
-
-          this.setState(
-            { shouldCacheIgnoreZoom: false },
-            installScrollConstraints,
-          );
-        },
-        onCancel: () => {
-          if (requestId !== this.scrollToContentRequestId) {
-            return;
-          }
-
           this.setState({ shouldCacheIgnoreZoom: false });
         },
+        onCancel: () => {
+          this.setState({ shouldCacheIgnoreZoom: false });
+        },
+        duration: opts?.duration ?? 500,
       });
-    } else if (scrollConstraints) {
+
-      this.setState({
+      this.cancelInProgressAnimation = () => {
-        scrollX,
+        cancel();
-        scrollY,
+        this.cancelInProgressAnimation = null;
-        zoom,
+      };
-        scrollConstraints,
-      });
     } else {
       this.setState({ scrollX, scrollY, zoom });
     }
@@ -4577,165 +4470,11 @@ class App extends React.Component<AppProps, AppState> {
 
   /** use when changing scrollX/scrollY/zoom based on user interaction */
   private translateCanvas: React.Component<any, AppState>["setState"] = (
-    stateUpdate,
+    state,
   ) => {
     this.cancelInProgressAnimation?.();
     this.maybeUnfollowRemoteUser();
-
+    this.setState(state);
-    if (scrollConstraintsAnimationTimeout) {
-      clearTimeout(scrollConstraintsAnimationTimeout);
-    }
-
-    const partialNewState =
-      typeof stateUpdate === "function"
-        ? (
-            stateUpdate as (
-              prevState: Readonly<AppState>,
-              props: Readonly<AppProps>,
-            ) => AppState
-          )(this.state, this.props)
-        : stateUpdate;
-
-    const newState: AppState = {
-      ...this.state,
-      ...partialNewState,
-      ...(this.state.scrollConstraints && {
-        // manually reset if setState in onCancel wasn't committed yet
-        shouldCacheIgnoreZoom: false,
-      }),
-    };
-
-    // RULE: cannot go below the minimum zoom level if zoom lock is enabled
-    const constrainedState =
-      newState.scrollConstraints && newState.scrollConstraints.lockZoom
-        ? constrainScrollState(newState, "elastic")
-        : newState;
-    if (constrainedState.zoom.value > newState.zoom.value) {
-      newState.zoom = constrainedState.zoom;
-      newState.scrollX = constrainedState.scrollX;
-      newState.scrollY = constrainedState.scrollY;
-
-      this.debounceConstrainScrollState(newState);
-      return;
-    }
-
-    this.setState(newState);
-    if (this.state.scrollConstraints) {
-      if (newState.zoom.value < this.state.zoom.value) {
-        // zoom-out: debounce to allow centering on user's cursor position before constraining
-        this.debounceConstrainScrollState(newState);
-      } else {
-        // zoom-in or pan: valid range only expands on zoom-in, constrain immediately
-        this.setState(constrainScrollState(newState));
-      }
-    }
-  };
-
-  private debounceConstrainScrollState = debounce((state: AppState) => {
-    const newState = constrainScrollState(state, "rigid");
-
-    const fromValues = {
-      scrollX: this.state.scrollX,
-      scrollY: this.state.scrollY,
-      zoom: this.state.zoom.value,
-    };
-    const toValues = {
-      scrollX: newState.scrollX,
-      scrollY: newState.scrollY,
-      zoom: newState.zoom.value,
-    };
-
-    if (areCanvasTranslatesClose(fromValues, toValues)) {
-      return;
-    }
-
-    this.cancelInProgressAnimation?.();
-    this.animateToConstrainedArea(fromValues, toValues);
-  }, 200);
-
-  private animateToConstrainedArea = (
-    fromValues: AnimateTranslateCanvasValues,
-    toValues: AnimateTranslateCanvasValues,
-  ) => {
-    const cleanUp = () => {
-      this.setState((state) => ({
-        shouldCacheIgnoreZoom: false,
-        scrollConstraints: {
-          ...state.scrollConstraints!,
-          animateOnNextUpdate: false,
-        },
-      }));
-    };
-
-    this.animateTranslateCanvas({
-      fromValues,
-      toValues,
-      duration: 200,
-      onStart: () => {
-        this.setState((state) => {
-          return {
-            shouldCacheIgnoreZoom: true,
-            scrollConstraints: {
-              ...state.scrollConstraints!,
-              animateOnNextUpdate: false,
-            },
-          };
-        });
-      },
-      onEnd: cleanUp,
-      onCancel: cleanUp,
-    });
-  };
-
-  private animateTranslateCanvas = ({
-    fromValues,
-    toValues,
-    duration,
-    onStart,
-    onEnd,
-    onCancel,
-  }: {
-    fromValues: AnimateTranslateCanvasValues;
-    toValues: AnimateTranslateCanvasValues;
-    duration: number;
-    onStart: () => void;
-    onEnd: () => void;
-    onCancel: () => void;
-  }) => {
-    const cancel = easeToValuesRAF({
-      fromValues,
-      toValues,
-      interpolateValue: (from, to, progress, key) => {
-        // for zoom, use different easing
-        if (key === "zoom") {
-          return from * Math.pow(to / from, easeOut(progress));
-        }
-        // handle using default
-        return undefined;
-      },
-      onStep: ({ scrollX, scrollY, zoom }) => {
-        this.setState({
-          scrollX,
-          scrollY,
-          zoom: { value: zoom },
-        });
-      },
-      onStart,
-      onEnd: () => {
-        this.cancelInProgressAnimation = null;
-        onEnd();
-      },
-      onCancel: () => {
-        this.cancelInProgressAnimation = null;
-        onCancel();
-      },
-      duration,
-    });
-
-    this.cancelInProgressAnimation = () => {
-      cancel();
-      this.cancelInProgressAnimation = null;
-    };
   };
 
   setToast = (toast: AppState["toast"]) => {
@@ -5916,22 +5655,16 @@ class App extends React.Component<AppProps, AppState> {
 
     const initialScale = gesture.initialScale;
     if (initialScale) {
-      this.setState((state) =>
+      this.setState((state) => ({
-        constrainScrollState(
+        ...getStateForZoom(
           {
-            ...state,
+            viewportX: this.lastViewportPosition.x,
-            ...getStateForZoom(
+            viewportY: this.lastViewportPosition.y,
-              {
+            nextZoom: getNormalizedZoom(initialScale * event.scale),
-                viewportX: this.lastViewportPosition.x,
-                viewportY: this.lastViewportPosition.y,
-                nextZoom: getNormalizedZoom(initialScale * event.scale),
-              },
-              state,
-            ),
           },
-          "loose",
+          state,
         ),
-      );
+      }));
     }
   });
 
@@ -7074,7 +6807,10 @@ class App extends React.Component<AppProps, AppState> {
 
     if (
       !this.state.newElement &&
-      isActiveToolNonLinearSnappable(this.state.activeTool.type)
+      (isActiveToolNonLinearSnappable(this.state.activeTool.type) ||
+        ((this.state.activeTool.type === "line" ||
+          this.state.activeTool.type === "arrow") &&
+          this.state.currentItemArrowType !== ARROW_TYPE.elbow))
     ) {
       const { originOffset, snapLines } = getSnapLinesAtPointer(
         this.scene.getNonDeletedElements(),
@@ -7123,7 +6859,7 @@ class App extends React.Component<AppProps, AppState> {
       this.state.selectedLinearElement?.isEditing &&
       !this.state.selectedLinearElement.isDragging
     ) {
-      const editingLinearElement = this.state.newElement
+      const result = this.state.newElement
         ? null
         : LinearElementEditor.handlePointerMoveInEditMode(
             event,
@@ -7132,18 +6868,33 @@ class App extends React.Component<AppProps, AppState> {
             this,
           );
 
-      if (
+      if (result) {
-        editingLinearElement &&
+        const { editingLinearElement, snapLines } = result;
-        editingLinearElement !== this.state.selectedLinearElement
+        const nextState = this.withStableSnapLines({
-      ) {
+          selectedLinearElement: editingLinearElement,
-        // Since we are reading from previous state which is not possible with
+          snapLines,
-        // automatic batching in React 18 hence using flush sync to synchronously
-        // update the state. Check https://github.com/excalidraw/excalidraw/pull/5508 for more details.
-        flushSync(() => {
-          this.setState({
-            selectedLinearElement: editingLinearElement,
-          });
         });
+
+        if (
+          editingLinearElement &&
+          this.shouldUpdateSelectedLinearElementState(
+            nextState.selectedLinearElement,
+            nextState.snapLines,
+          )
+        ) {
+          // Since we are reading from previous state which is not possible with
+          // automatic batching in React 18 hence using flush sync to synchronously
+          // update the state. Check https://github.com/excalidraw/excalidraw/pull/5508 for more details.
+          flushSync(() => {
+            this.setState(nextState);
+          });
+        }
+        if (
+          editingLinearElement.lastUncommittedPoint == null &&
+          this.state.suggestedBinding
+        ) {
+          this.setState({ suggestedBinding: null });
+        }
       }
     }
 
@@ -10001,25 +9752,27 @@ class App extends React.Component<AppProps, AppState> {
             pointerDownState.lastCoords.x = pointerCoords.x;
             pointerDownState.lastCoords.y = pointerCoords.y;
             pointerDownState.drag.hasOccurred = true;
+            const nextState = this.withStableSnapLines(newState);
 
             // NOTE: Optimize setState calls because it
             // affects history and performance
             if (
-              newState.suggestedBinding !== this.state.suggestedBinding ||
+              nextState.suggestedBinding !== this.state.suggestedBinding ||
               !isShallowEqual(
-                newState.selectedLinearElement?.selectedPointsIndices ?? [],
+                nextState.selectedLinearElement?.selectedPointsIndices ?? [],
                 this.state.selectedLinearElement?.selectedPointsIndices ?? [],
               ) ||
-              newState.selectedLinearElement?.hoverPointIndex !==
+              nextState.selectedLinearElement?.hoverPointIndex !==
                 this.state.selectedLinearElement?.hoverPointIndex ||
-              newState.selectedLinearElement?.customLineAngle !==
+              nextState.selectedLinearElement?.customLineAngle !==
                 this.state.selectedLinearElement?.customLineAngle ||
               this.state.selectedLinearElement.isDragging !==
-                newState.selectedLinearElement?.isDragging ||
+                nextState.selectedLinearElement?.isDragging ||
               this.state.selectedLinearElement?.initialState?.altFocusPoint !==
-                newState.selectedLinearElement?.initialState?.altFocusPoint
+                nextState.selectedLinearElement?.initialState?.altFocusPoint ||
+              nextState.snapLines !== this.state.snapLines
             ) {
-              this.setState(newState);
+              this.setState(nextState);
             }
 
             return;
@@ -10708,8 +10461,7 @@ class App extends React.Component<AppProps, AppState> {
       this.lassoTrail.endPath();
       this.previousPointerMoveCoords = null;
 
-      SnapCache.setReferenceSnapPoints(null);
+      SnapCache.destroy();
-      SnapCache.setVisibleGaps(null);
 
       this.savePointer(childEvent.clientX, childEvent.clientY, "up");
 
@@ -12908,21 +12660,17 @@ class App extends React.Component<AppProps, AppState> {
           // reduced amplification for small deltas (small movements on a trackpad)
           Math.min(1, absDelta / 20);
 
-        this.translateCanvas((state) => {
+        this.translateCanvas((state) => ({
-          const nextZoom = getNormalizedZoom(newZoom);
+          ...getStateForZoom(
-          const anchor = getConstrainedZoomAnchor(
             {
               viewportX: this.lastViewportPosition.x,
               viewportY: this.lastViewportPosition.y,
-              nextZoom,
+              nextZoom: getNormalizedZoom(newZoom),
             },
             state,
-          );
+          ),
-          return {
+          shouldCacheIgnoreZoom: true,
-            ...getStateForZoom({ ...anchor, nextZoom }, state),
+        }));
-            shouldCacheIgnoreZoom: true,
-          };
-        });
         this.resetShouldCacheIgnoreZoomDebounced();
         return;
       }
@@ -13080,71 +12828,6 @@ class App extends React.Component<AppProps, AppState> {
     await setLanguage(currentLang);
     this.setAppState({});
   }
-
-  /**
-   * Sets the scroll constraints of the application state.
-   *
-   * @param scrollConstraints - The new scroll constraints.
-   */
-  public setScrollConstraints = (
-    scrollConstraints: ScrollConstraints | null,
-  ) => {
-    if (this.props.scrollConstraints !== undefined) {
-      console.warn(SET_SCROLL_CONSTRAINTS_CONTROLLED_WARNING);
-      return;
-    }
-
-    this.syncScrollConstraints(scrollConstraints);
-  };
-
-  private syncScrollConstraints = (
-    scrollConstraints: ScrollConstraints | null,
-  ) => {
-    this.debounceConstrainScrollState.cancel();
-
-    if (scrollConstraintsAnimationTimeout) {
-      clearTimeout(scrollConstraintsAnimationTimeout);
-      scrollConstraintsAnimationTimeout = null;
-    }
-
-    this.cancelInProgressAnimation?.();
-
-    if (scrollConstraints) {
-      this.setState(
-        {
-          scrollConstraints,
-          shouldCacheIgnoreZoom: false,
-        },
-        () => {
-          const newState = constrainScrollState(
-            {
-              ...this.state,
-              scrollConstraints,
-            },
-            "rigid",
-          );
-
-          this.animateToConstrainedArea(
-            {
-              scrollX: this.state.scrollX,
-              scrollY: this.state.scrollY,
-              zoom: this.state.zoom.value,
-            },
-            {
-              scrollX: newState.scrollX,
-              scrollY: newState.scrollY,
-              zoom: newState.zoom.value,
-            },
-          );
-        },
-      );
-    } else {
-      this.setState({
-        scrollConstraints: null,
-        shouldCacheIgnoreZoom: false,
-      });
-    }
-  };
 }
 
 // -----------------------------------------------------------------------------

packages/excalidraw/components/HintViewer.tsx

@@ -3,6 +3,7 @@ import { CANVAS_SEARCH_TAB, DEFAULT_SIDEBAR } from "@excalidraw/common";
 import {
   isFlowchartNodeElement,
   isImageElement,
+  isGridModeEnabled,
   isLinearElement,
   isLineElement,
   isTextBindableContainer,
@@ -16,7 +17,6 @@ import type { EditorInterface } from "@excalidraw/common";
 import { t } from "../i18n";
 import { getShortcutKey } from "../shortcut";
 import { isEraserActive } from "../appState";
-import { isGridModeEnabled } from "../snapping";
 
 import "./HintViewer.scss";
 

packages/excalidraw/components/Stats/index.tsx

@@ -12,10 +12,11 @@ import { frameAndChildrenSelectedTogether } from "@excalidraw/element";
 
 import { elementsAreInSameGroup } from "@excalidraw/element";
 
+import { isGridModeEnabled } from "@excalidraw/element";
+
 import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
 
 import { t } from "../../i18n";
-import { isGridModeEnabled } from "../../snapping";
 import { useExcalidrawAppState, useExcalidrawSetAppState } from "../App";
 import { Island } from "../Island";
 import { CloseIcon } from "../icons";

packages/excalidraw/data/restore.ts

@@ -96,6 +96,8 @@ type RestoredAppState = Omit<
   "offsetTop" | "offsetLeft" | "width" | "height"
 >;
 
+const MAX_ARROW_PX = 75_000;
+
 export const AllowedExcalidrawActiveTools: Record<
   AppState["activeTool"]["type"],
   boolean
@@ -467,8 +469,8 @@ export const restoreElement = (
         element.endArrowhead === undefined
           ? "arrow"
           : normalizeArrowhead(element.endArrowhead);
-      const x: number | undefined = element.x;
+      const x = element.x as number | undefined;
-      const y: number | undefined = element.y;
+      const y = element.y as number | undefined;
       const points: readonly LocalPoint[] | undefined = // migrate old arrow model to new one
         !Array.isArray(element.points) || element.points.length < 2
           ? [pointFrom(0, 0), pointFrom(element.width, element.height)]
@@ -493,8 +495,8 @@ export const restoreElement = (
         startArrowhead,
         endArrowhead,
         points,
-        x,
+        x: x ?? 0,
-        y,
+        y: y ?? 0,
         elbowed: (element as ExcalidrawArrowElement).elbowed,
         ...getSizeFromPoints(points),
       };
@@ -513,12 +515,44 @@ export const restoreElement = (
           })
         : restoreElementWithProperties(element as ExcalidrawArrowElement, base);
 
-      return {
+      const normalizedRestoredElement = {
         ...restoredElement,
         ...LinearElementEditor.getNormalizeElementPointsAndCoords(
           restoredElement,
         ),
       };
+
+      // Last resort fix for extremely large arrows
+      if (
+        normalizedRestoredElement.width > MAX_ARROW_PX ||
+        normalizedRestoredElement.height > MAX_ARROW_PX
+      ) {
+        console.error(
+          `Removing extremely large arrow ${
+            normalizedRestoredElement.id
+          } (type: ${
+            isElbowArrow(normalizedRestoredElement) ? "elbow" : "simple"
+          }, width: ${normalizedRestoredElement.width}, height: ${
+            normalizedRestoredElement.height
+          }, x: ${normalizedRestoredElement.x}, y: ${
+            normalizedRestoredElement.y
+          })`,
+        );
+        return {
+          ...normalizedRestoredElement,
+          x: 0,
+          y: 0,
+          width: 100,
+          height: 100,
+          points: [
+            pointFrom<LocalPoint>(0, 0),
+            pointFrom<LocalPoint>(100, 100),
+          ],
+          isDeleted: true,
+        };
+      }
+
+      return normalizedRestoredElement;
     }
 
     // generic elements
@@ -666,6 +700,7 @@ export const restoreElements = <T extends ExcalidrawElement>(
   const existingElementsMap = existingElements
     ? arrayToMap(existingElements)
     : null;
+
   const restoredElements = syncInvalidIndices(
     (targetElements || []).reduce((elements, element) => {
       // filtering out selection, which is legacy, no longer kept in elements,
@@ -762,7 +797,7 @@ export const restoreElements = <T extends ExcalidrawElement>(
     }
   }
 
-  // NOTE (mtolmacs): Temporary fix for extremely large arrows
+  // NOTE (mtolmacs): Temporary fix for invalid/self-bound elbow arrows
   // Need to iterate again so we have attached text nodes in elementsMap
   return restoredElements.map((element) => {
     if (

packages/excalidraw/index.tsx

@@ -98,7 +98,6 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     aiEnabled,
     showDeprecatedFonts,
     renderScrollbars,
-    scrollConstraints,
   } = props;
 
   const canvasActions = props.UIOptions?.canvasActions;
@@ -209,7 +208,6 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           aiEnabled={aiEnabled !== false}
           showDeprecatedFonts={showDeprecatedFonts}
           renderScrollbars={renderScrollbars}
-          scrollConstraints={scrollConstraints}
         >
           {children}
         </App>

packages/excalidraw/renderer/renderSnaps.ts

@@ -2,7 +2,8 @@ import { pointFrom, type GlobalPoint, type LocalPoint } from "@excalidraw/math";
 
 import { THEME } from "@excalidraw/common";
 
-import type { PointSnapLine, PointerSnapLine } from "../snapping";
+import type { PointSnapLine, PointerSnapLine } from "@excalidraw/element";
+
 import type { InteractiveCanvasAppState } from "../types";
 
 const SNAP_COLOR_LIGHT = "#ff6b6b";

packages/excalidraw/scene/scrollConstraints.ts

@@ -1,590 +0,0 @@
-import { MAX_ZOOM } from "@excalidraw/common";
-
-import { isShallowEqual } from "@excalidraw/common";
-
-import { clamp } from "@excalidraw/math";
-
-import { getNormalizedZoom } from "./normalize";
-
-import type {
-  AnimateTranslateCanvasValues,
-  AppState,
-  ScrollConstraints,
-  ScrollToContentLockOptions,
-} from "../types";
-
-// Constants for viewport zoom factor and overscroll allowance
-const MIN_VIEWPORT_ZOOM_FACTOR = 0.1;
-const MAX_VIEWPORT_ZOOM_FACTOR = MAX_ZOOM;
-const DEFAULT_VIEWPORT_ZOOM_FACTOR = 0.2;
-const DEFAULT_OVERSCROLL_ALLOWANCE = 0.2;
-
-// Memoization variable to cache constraints for performance optimization
-let memoizedValues: {
-  previousState: Pick<
-    AppState,
-    "zoom" | "width" | "height" | "scrollConstraints"
-  >;
-  constraints: ReturnType<typeof calculateConstraints>;
-  allowOverscroll: boolean;
-} | null = null;
-
-type CanvasTranslate = Pick<AppState, "scrollX" | "scrollY" | "zoom">;
-
-export const getScrollConstraintsForBounds = ({
-  bounds,
-  zoom,
-  viewportDimensions,
-  scrollLock,
-}: {
-  bounds: readonly [number, number, number, number];
-  zoom: AppState["zoom"];
-  viewportDimensions: Pick<AppState, "width" | "height">;
-  scrollLock?: boolean | ScrollToContentLockOptions;
-}): ScrollConstraints => {
-  const [x1, y1, x2, y2] = bounds;
-  const width = x2 - x1;
-  const height = y2 - y1;
-  const baseZoom = Math.min(
-    viewportDimensions.width / width,
-    viewportDimensions.height / height,
-  );
-  const lockOptions =
-    scrollLock && typeof scrollLock === "object" ? scrollLock : undefined;
-  const viewportZoomFactor =
-    lockOptions?.viewportZoomFactor ?? zoom.value / baseZoom;
-
-  return {
-    x: x1,
-    y: y1,
-    width,
-    height,
-    animateOnNextUpdate: false,
-    lockZoom: !!lockOptions?.lockZoom,
-    overscrollAllowance: lockOptions?.overscrollAllowance,
-    viewportZoomFactor,
-  };
-};
-
-/**
- * Calculates the zoom levels necessary to fit the constrained scrollable area within the viewport on the X and Y axes.
- *
- * The function considers the dimensions of the scrollable area, the dimensions of the viewport, the viewport zoom factor,
- * and whether the zoom should be locked. It then calculates the necessary zoom levels for the X and Y axes separately.
- * If the zoom should be locked, it calculates the maximum zoom level that fits the scrollable area within the viewport,
- * factoring in the viewport zoom factor. If the zoom should not be locked, the maximum zoom level is set to null.
- *
- * @param scrollConstraints - The constraints of the scrollable area including width, height, and position.
- * @param width - The width of the viewport.
- * @param height - The height of the viewport.
- * @returns An object containing the calculated zoom levels for the X and Y axes, and the initial zoom level.
- */
-const calculateZoomLevel = (
-  scrollConstraints: ScrollConstraints,
-  width: AppState["width"],
-  height: AppState["height"],
-) => {
-  const viewportZoomFactor = scrollConstraints.viewportZoomFactor
-    ? clamp(
-        scrollConstraints.viewportZoomFactor,
-        MIN_VIEWPORT_ZOOM_FACTOR,
-        MAX_VIEWPORT_ZOOM_FACTOR,
-      )
-    : DEFAULT_VIEWPORT_ZOOM_FACTOR;
-
-  const scrollableWidth = scrollConstraints.width;
-  const scrollableHeight = scrollConstraints.height;
-  const zoomLevelX = width / scrollableWidth;
-  const zoomLevelY = height / scrollableHeight;
-  const initialZoomLevel = getNormalizedZoom(
-    Math.min(zoomLevelX, zoomLevelY) * viewportZoomFactor,
-  );
-  return { zoomLevelX, zoomLevelY, initialZoomLevel };
-};
-
-/**
- * Calculates the effective zoom level based on the scroll constraints and current zoom.
- *
- * @param params - Object containing scrollConstraints, width, height, and zoom.
- * @returns An object with the effective zoom level, initial zoom level, and zoom levels for X and Y axes.
- */
-const calculateZoom = ({
-  scrollConstraints,
-  width,
-  height,
-  zoom,
-}: {
-  scrollConstraints: ScrollConstraints;
-  width: AppState["width"];
-  height: AppState["height"];
-  zoom: AppState["zoom"];
-}) => {
-  const { zoomLevelX, zoomLevelY, initialZoomLevel } = calculateZoomLevel(
-    scrollConstraints,
-    width,
-    height,
-  );
-  const effectiveZoom = scrollConstraints.lockZoom
-    ? Math.max(initialZoomLevel, zoom.value)
-    : zoom.value;
-  return {
-    effectiveZoom: getNormalizedZoom(effectiveZoom),
-    initialZoomLevel,
-    zoomLevelX,
-    zoomLevelY,
-  };
-};
-
-/**
- * Calculates the scroll bounds (min and max scroll values) based on the scroll constraints and zoom level.
- *
- * @param params - Object containing scrollConstraints, width, height, effectiveZoom, zoomLevelX, zoomLevelY, and allowOverscroll.
- * @returns An object with min and max scroll values for X and Y axes.
- */
-const calculateScrollBounds = ({
-  scrollConstraints,
-  width,
-  height,
-  effectiveZoom,
-  zoomLevelX,
-  zoomLevelY,
-  allowOverscroll,
-}: {
-  scrollConstraints: ScrollConstraints;
-  width: AppState["width"];
-  height: AppState["height"];
-  effectiveZoom: number;
-  zoomLevelX: number;
-  zoomLevelY: number;
-  allowOverscroll: boolean;
-}) => {
-  const overscrollAllowance =
-    scrollConstraints.overscrollAllowance ?? DEFAULT_OVERSCROLL_ALLOWANCE;
-  const validatedOverscroll = clamp(overscrollAllowance, 0, 1);
-
-  const calculateCenter = (zoom: number) => {
-    const centerX =
-      scrollConstraints.x + (scrollConstraints.width - width / zoom) / -2;
-    const centerY =
-      scrollConstraints.y + (scrollConstraints.height - height / zoom) / -2;
-    return { centerX, centerY };
-  };
-
-  const { centerX, centerY } = calculateCenter(effectiveZoom);
-
-  const overscrollValue = Math.min(
-    validatedOverscroll * scrollConstraints.width,
-    validatedOverscroll * scrollConstraints.height,
-  );
-
-  const fitsX = effectiveZoom <= zoomLevelX;
-  const fitsY = effectiveZoom <= zoomLevelY;
-
-  const getScrollRange = (
-    axis: "x" | "y",
-    fits: boolean,
-    constraint: ScrollConstraints,
-    viewportSize: number,
-    zoom: number,
-    overscroll: number,
-  ) => {
-    const { pos, size } =
-      axis === "x"
-        ? { pos: constraint.x, size: constraint.width }
-        : { pos: constraint.y, size: constraint.height };
-    const center = axis === "x" ? centerX : centerY;
-    if (allowOverscroll) {
-      return fits
-        ? { min: center - overscroll, max: center + overscroll }
-        : {
-            min: pos - size + viewportSize / zoom - overscroll,
-            max: pos + overscroll,
-          };
-    }
-    return fits
-      ? { min: center, max: center }
-      : { min: pos - size + viewportSize / zoom, max: pos };
-  };
-
-  const xRange = getScrollRange(
-    "x",
-    fitsX,
-    scrollConstraints,
-    width,
-    effectiveZoom,
-    overscrollValue,
-  );
-  const yRange = getScrollRange(
-    "y",
-    fitsY,
-    scrollConstraints,
-    height,
-    effectiveZoom,
-    overscrollValue,
-  );
-
-  return {
-    minScrollX: xRange.min,
-    maxScrollX: xRange.max,
-    minScrollY: yRange.min,
-    maxScrollY: yRange.max,
-  };
-};
-
-/**
- * Calculates the scroll constraints including min and max scroll values and the effective zoom level.
- *
- * @param params - Object containing scrollConstraints, width, height, zoom, and allowOverscroll.
- * @returns An object with min and max scroll values, effective zoom, and initial zoom level.
- */
-const calculateConstraints = ({
-  scrollConstraints,
-  width,
-  height,
-  zoom,
-  allowOverscroll,
-}: {
-  scrollConstraints: ScrollConstraints;
-  width: AppState["width"];
-  height: AppState["height"];
-  zoom: AppState["zoom"];
-  allowOverscroll: boolean;
-}) => {
-  const { effectiveZoom, initialZoomLevel, zoomLevelX, zoomLevelY } =
-    calculateZoom({ scrollConstraints, width, height, zoom });
-  const scrollBounds = calculateScrollBounds({
-    scrollConstraints,
-    width,
-    height,
-    effectiveZoom,
-    zoomLevelX,
-    zoomLevelY,
-    allowOverscroll,
-  });
-
-  return {
-    ...scrollBounds,
-    effectiveZoom: { value: effectiveZoom },
-    initialZoomLevel,
-  };
-};
-
-/**
- * Constrains the scroll values within the provided min and max bounds.
- *
- * @param params - Object containing scrollX, scrollY, minScrollX, maxScrollX, minScrollY, maxScrollY, and constrainedZoom.
- * @returns An object with constrained scrollX, scrollY, and zoom.
- */
-const constrainScrollValues = ({
-  scrollX,
-  scrollY,
-  minScrollX,
-  maxScrollX,
-  minScrollY,
-  maxScrollY,
-  constrainedZoom,
-}: {
-  scrollX: number;
-  scrollY: number;
-  minScrollX: number;
-  maxScrollX: number;
-  minScrollY: number;
-  maxScrollY: number;
-  constrainedZoom: AppState["zoom"];
-}): CanvasTranslate => {
-  const constrainedScrollX = clamp(scrollX, minScrollX, maxScrollX);
-  const constrainedScrollY = clamp(scrollY, minScrollY, maxScrollY);
-  return {
-    scrollX: constrainedScrollX,
-    scrollY: constrainedScrollY,
-    zoom: constrainedZoom,
-  };
-};
-
-/**
- * Inverts the scroll constraints to align with the state scrollX and scrollY values, which are inverted.
- * This is a temporary fix and should be removed once issue #5965 is resolved.
- *
- * @param originalScrollConstraints - The original scroll constraints.
- * @returns The aligned scroll constraints with inverted x and y coordinates.
- */
-const alignScrollConstraints = (
-  originalScrollConstraints: ScrollConstraints,
-): ScrollConstraints => {
-  return {
-    ...originalScrollConstraints,
-    x: originalScrollConstraints.x * -1,
-    y: originalScrollConstraints.y * -1,
-  };
-};
-
-/**
- * Determines whether the current viewport is outside the constrained area.
- *
- * @param state - The application state.
- * @returns True if the viewport is outside the constrained area, false otherwise.
- */
-const isViewportOutsideOfConstrainedArea = (state: AppState): boolean => {
-  if (!state.scrollConstraints) {
-    return false;
-  }
-
-  const {
-    scrollX,
-    scrollY,
-    width,
-    height,
-    scrollConstraints: inverseScrollConstraints,
-    zoom,
-  } = state;
-
-  const scrollConstraints = alignScrollConstraints(inverseScrollConstraints);
-
-  const adjustedWidth = width / zoom.value;
-  const adjustedHeight = height / zoom.value;
-
-  return (
-    scrollX > scrollConstraints.x ||
-    scrollX - adjustedWidth < scrollConstraints.x - scrollConstraints.width ||
-    scrollY > scrollConstraints.y ||
-    scrollY - adjustedHeight < scrollConstraints.y - scrollConstraints.height
-  );
-};
-
-/**
- * Calculates the scroll center coordinates and the optimal zoom level to fit the constrained scrollable area within the viewport.
- *
- * @param state - The application state.
- * @param scroll - Object containing current scrollX and scrollY.
- * @returns An object with the calculated scrollX, scrollY, and zoom.
- */
-export const calculateConstrainedScrollCenter = (
-  state: AppState,
-  { scrollX, scrollY }: Pick<AppState, "scrollX" | "scrollY">,
-): CanvasTranslate => {
-  const { width, height, scrollConstraints } = state;
-  if (!scrollConstraints) {
-    return { scrollX, scrollY, zoom: state.zoom };
-  }
-
-  const adjustedConstraints = alignScrollConstraints(scrollConstraints);
-  const zoomLevels = calculateZoomLevel(adjustedConstraints, width, height);
-  const initialZoom = { value: zoomLevels.initialZoomLevel };
-  const constraints = calculateConstraints({
-    scrollConstraints: adjustedConstraints,
-    width,
-    height,
-    zoom: initialZoom,
-    allowOverscroll: false,
-  });
-
-  return {
-    scrollX: constraints.minScrollX,
-    scrollY: constraints.minScrollY,
-    zoom: constraints.effectiveZoom,
-  };
-};
-
-/**
- * Encodes scroll constraints into a compact string.
- *
- * @param constraints - The scroll constraints to encode.
- * @returns A compact encoded string representing the scroll constraints.
- */
-export const encodeConstraints = (constraints: ScrollConstraints): string => {
-  const payload = {
-    x: constraints.x,
-    y: constraints.y,
-    w: constraints.width,
-    h: constraints.height,
-    a: !!constraints.animateOnNextUpdate,
-    l: !!constraints.lockZoom,
-    v: constraints.viewportZoomFactor ?? 1,
-    oa: constraints.overscrollAllowance ?? DEFAULT_OVERSCROLL_ALLOWANCE,
-  };
-  const serialized = JSON.stringify(payload);
-  return encodeURIComponent(window.btoa(serialized).replace(/=+/, ""));
-};
-
-/**
- * Decodes a compact string back into scroll constraints.
- *
- * @param encoded - The encoded string representing the scroll constraints.
- * @returns The decoded scroll constraints object.
- */
-export const decodeConstraints = (encoded: string): ScrollConstraints => {
-  try {
-    const decodedStr = window.atob(decodeURIComponent(encoded));
-    const parsed = JSON.parse(decodedStr) as {
-      x: number;
-      y: number;
-      w: number;
-      h: number;
-      a: boolean;
-      l: boolean;
-      v: number;
-      oa: number;
-    };
-    return {
-      x: parsed.x || 0,
-      y: parsed.y || 0,
-      width: parsed.w || 0,
-      height: parsed.h || 0,
-      lockZoom: parsed.l || false,
-      viewportZoomFactor: parsed.v || 1,
-      animateOnNextUpdate: parsed.a || false,
-      overscrollAllowance: parsed.oa || DEFAULT_OVERSCROLL_ALLOWANCE,
-    };
-  } catch (error) {
-    return {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0,
-      animateOnNextUpdate: false,
-      lockZoom: false,
-      viewportZoomFactor: 1,
-      overscrollAllowance: DEFAULT_OVERSCROLL_ALLOWANCE,
-    };
-  }
-};
-
-type Options = { allowOverscroll: boolean; disableAnimation: boolean };
-const DEFAULT_OPTION: Options = {
-  allowOverscroll: true,
-  disableAnimation: false,
-};
-
-/**
- * Constrains the AppState scroll values within the defined scroll constraints.
- *
- * constraintMode can be "elastic", "rigid", or "loose":
- * - "elastic": snaps to constraints but allows overscroll
- * - "rigid": snaps to constraints without overscroll
- * - "loose": allows overscroll and disables animation/snapping to constraints
- *
- * @param state - The original AppState.
- * @param options - Options for allowing overscroll and disabling animation.
- * @returns A new AppState object with constrained scroll values.
- */
-export const constrainScrollState = (
-  state: AppState,
-  constraintMode: "elastic" | "rigid" | "loose" = "elastic",
-): AppState => {
-  if (!state.scrollConstraints) {
-    return state;
-  }
-  const {
-    scrollX,
-    scrollY,
-    width,
-    height,
-    scrollConstraints: inverseScrollConstraints,
-    zoom,
-  } = state;
-
-  let allowOverscroll: boolean;
-  let disableAnimation: boolean;
-
-  switch (constraintMode) {
-    case "elastic":
-      ({ allowOverscroll, disableAnimation } = DEFAULT_OPTION);
-      break;
-    case "rigid":
-      allowOverscroll = false;
-      disableAnimation = false;
-      break;
-    case "loose":
-      allowOverscroll = true;
-      disableAnimation = true;
-      break;
-    default:
-      ({ allowOverscroll, disableAnimation } = DEFAULT_OPTION);
-      break;
-  }
-
-  const scrollConstraints = alignScrollConstraints(inverseScrollConstraints);
-
-  const canUseMemoizedValues =
-    memoizedValues &&
-    memoizedValues.previousState.scrollConstraints &&
-    memoizedValues.allowOverscroll === allowOverscroll &&
-    isShallowEqual(
-      state.scrollConstraints,
-      memoizedValues.previousState.scrollConstraints,
-    ) &&
-    isShallowEqual(
-      { zoom: zoom.value, width, height },
-      {
-        zoom: memoizedValues.previousState.zoom.value,
-        width: memoizedValues.previousState.width,
-        height: memoizedValues.previousState.height,
-      },
-    );
-
-  const constraints = canUseMemoizedValues
-    ? memoizedValues!.constraints
-    : calculateConstraints({
-        scrollConstraints,
-        width,
-        height,
-        zoom,
-        allowOverscroll,
-      });
-
-  if (!canUseMemoizedValues) {
-    memoizedValues = {
-      previousState: {
-        zoom: state.zoom,
-        width: state.width,
-        height: state.height,
-        scrollConstraints: state.scrollConstraints,
-      },
-      constraints,
-      allowOverscroll,
-    };
-  }
-
-  const constrainedValues =
-    zoom.value >= constraints.effectiveZoom.value
-      ? constrainScrollValues({
-          scrollX,
-          scrollY,
-          minScrollX: constraints.minScrollX,
-          maxScrollX: constraints.maxScrollX,
-          minScrollY: constraints.minScrollY,
-          maxScrollY: constraints.maxScrollY,
-          constrainedZoom: constraints.effectiveZoom,
-        })
-      : calculateConstrainedScrollCenter(state, { scrollX, scrollY });
-
-  return {
-    ...state,
-    scrollConstraints: {
-      ...state.scrollConstraints,
-      animateOnNextUpdate: disableAnimation
-        ? false
-        : isViewportOutsideOfConstrainedArea(state),
-    },
-    ...constrainedValues,
-  };
-};
-
-/**
- * Checks if two canvas translate values are close within a threshold.
- *
- * @param from - First set of canvas translate values.
- * @param to - Second set of canvas translate values.
- * @returns True if the values are close, false otherwise.
- */
-export const areCanvasTranslatesClose = (
-  from: AnimateTranslateCanvasValues,
-  to: AnimateTranslateCanvasValues,
-): boolean => {
-  const threshold = 0.1;
-  return (
-    Math.abs(from.scrollX - to.scrollX) < threshold &&
-    Math.abs(from.scrollY - to.scrollY) < threshold &&
-    Math.abs(from.zoom - to.zoom) < threshold
-  );
-};

packages/excalidraw/scene/zoom.ts

@@ -1,67 +1,5 @@
-import { constrainScrollState } from "./scrollConstraints";
-
 import type { AppState, NormalizedZoomValue } from "../types";
 
-/**
- * When zooming out with scroll constraints active, the cursor-anchored zoom may
- * produce a scroll position outside the valid bounds, causing a snap-back.
- *
- * This function adjusts the effective zoom anchor point so the resulting scroll
- * stays within bounds — silently, without any snap. When no adjustment is needed
- * (zoom-in, no constraints, or already within bounds) it returns the original
- * viewport position unchanged.
- */
-export const getConstrainedZoomAnchor = (
-  {
-    viewportX,
-    viewportY,
-    nextZoom,
-  }: { viewportX: number; viewportY: number; nextZoom: NormalizedZoomValue },
-  state: AppState,
-): { viewportX: number; viewportY: number } => {
-  if (!state.scrollConstraints || nextZoom >= state.zoom.value) {
-    return { viewportX, viewportY };
-  }
-
-  const appLayerX = viewportX - state.offsetLeft;
-  const appLayerY = viewportY - state.offsetTop;
-  const factor = 1 / nextZoom - 1 / state.zoom.value;
-
-  const newScrollX = state.scrollX + appLayerX * factor;
-  const newScrollY = state.scrollY + appLayerY * factor;
-
-  const constrained = constrainScrollState(
-    {
-      ...state,
-      scrollX: newScrollX,
-      scrollY: newScrollY,
-      zoom: { value: nextZoom },
-    },
-    "rigid",
-  );
-
-  if (
-    constrained.scrollX === newScrollX &&
-    constrained.scrollY === newScrollY
-  ) {
-    return { viewportX, viewportY };
-  }
-
-  const adjustedAppLayerX =
-    constrained.scrollX !== newScrollX
-      ? (constrained.scrollX - state.scrollX) / factor
-      : appLayerX;
-  const adjustedAppLayerY =
-    constrained.scrollY !== newScrollY
-      ? (constrained.scrollY - state.scrollY) / factor
-      : appLayerY;
-
-  return {
-    viewportX: adjustedAppLayerX + state.offsetLeft,
-    viewportY: adjustedAppLayerY + state.offsetTop,
-  };
-};
-
 export const getStateForZoom = (
   {
     viewportX,

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

@@ -961,7 +961,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -1159,7 +1158,6 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": true,
@@ -1375,7 +1373,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -1708,7 +1705,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2041,7 +2037,6 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": true,
@@ -2257,7 +2252,6 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2500,7 +2494,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2802,7 +2795,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3174,7 +3166,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3669,7 +3660,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3994,7 +3984,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -4321,7 +4310,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -5608,7 +5596,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -6827,7 +6814,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -7787,7 +7773,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -8786,7 +8771,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": true,
@@ -9782,7 +9766,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,

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

@@ -85,7 +85,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
     "id4": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -720,7 +719,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
     "id4": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -1284,7 +1282,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -1646,7 +1643,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -2010,7 +2006,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -2272,7 +2267,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -2730,7 +2724,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -3035,7 +3028,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -3356,7 +3348,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -3652,7 +3643,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -3940,7 +3930,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -4177,7 +4166,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -4436,7 +4424,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -4709,7 +4696,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -4940,7 +4926,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -5171,7 +5156,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -5420,7 +5404,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -5678,7 +5661,6 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -5937,7 +5919,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
     "id1": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -6268,7 +6249,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
     "id8": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -6697,7 +6677,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
     "id1": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -7074,7 +7053,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -7385,7 +7363,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -7679,7 +7656,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -7911,7 +7887,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -8265,7 +8240,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -8622,7 +8596,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -9027,7 +9000,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -9308,7 +9280,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -9574,7 +9545,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -9841,7 +9811,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -10078,7 +10047,6 @@ exports[`history > multiplayer undo/redo > should override remotely added groups
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -10374,7 +10342,6 @@ exports[`history > multiplayer undo/redo > should override remotely added points
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -10693,7 +10660,6 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -10934,7 +10900,6 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -11858,7 +11823,6 @@ exports[`history > multiplayer undo/redo > should update history entries after r
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -12120,7 +12084,6 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -12357,7 +12320,6 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -12596,7 +12558,6 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -12992,7 +12953,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on e
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -13201,7 +13161,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on e
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -13413,7 +13372,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on i
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -13713,7 +13671,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on i
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -14016,7 +13973,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on s
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": -50,
   "scrollY": -50,
   "searchMatches": null,
@@ -14260,7 +14216,6 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -14499,7 +14454,6 @@ exports[`history > singleplayer undo/redo > should end up with no history entry
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -14740,7 +14694,6 @@ exports[`history > singleplayer undo/redo > should iterate through the history w
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -14987,7 +14940,6 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -15323,7 +15275,6 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -15492,7 +15443,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -15781,7 +15731,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -16046,7 +15995,6 @@ exports[`history > singleplayer undo/redo > should not modify anything on unrela
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -16200,7 +16148,6 @@ exports[`history > singleplayer undo/redo > should not override appstate changes
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -16485,7 +16432,6 @@ exports[`history > singleplayer undo/redo > should support appstate name or view
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -16648,7 +16594,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -17398,7 +17343,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -18046,7 +17990,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -18692,7 +18635,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -19445,7 +19387,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -20215,7 +20156,6 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -20697,7 +20637,6 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
     "id1": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -21210,7 +21149,6 @@ exports[`history > singleplayer undo/redo > should support element creation, del
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -21671,7 +21609,6 @@ exports[`history > singleplayer undo/redo > should support linear element creati
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,

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

@@ -88,7 +88,6 @@ exports[`given element A and group of elements B and given both are selected whe
     "id6": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -516,7 +515,6 @@ exports[`given element A and group of elements B and given both are selected whe
     "id6": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -930,7 +928,6 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -1498,7 +1495,6 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -1709,7 +1705,6 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2095,7 +2090,6 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2340,7 +2334,6 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2524,7 +2517,6 @@ exports[`regression tests > can drag element that covers another element, while
     "id6": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2849,7 +2841,6 @@ exports[`regression tests > change the properties of a shape > [end of test] app
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3108,7 +3099,6 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3351,7 +3341,6 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3589,7 +3578,6 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3849,7 +3837,6 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
     "id6": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -4163,7 +4150,6 @@ exports[`regression tests > deleting last but one element in editing group shoul
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -4604,7 +4590,6 @@ exports[`regression tests > deselects group of selected elements on pointer down
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -4889,7 +4874,6 @@ exports[`regression tests > deselects group of selected elements on pointer up w
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -5166,7 +5150,6 @@ exports[`regression tests > deselects selected element on pointer down when poin
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -5376,7 +5359,6 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -5576,7 +5558,6 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -5974,7 +5955,6 @@ exports[`regression tests > drags selected elements from point inside common bou
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -6270,7 +6250,6 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -7063,7 +7042,6 @@ exports[`regression tests > given a group of selected elements with an element t
     "id6": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -7398,7 +7376,6 @@ exports[`regression tests > given a selected element A and a not selected elemen
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -7679,7 +7656,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -7916,7 +7892,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -8156,7 +8131,6 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -8338,7 +8312,6 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -8520,7 +8493,6 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -8693,7 +8665,14 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": null,
+  "originSnapOffset": {
+    "x": 0,
+    "y": 0,
+  },
+  "pasteDialog": {
+    "data": null,
+    "shown": false,
+  },
   "penDetected": false,
   "penMode": false,
   "preferredSelectionTool": {
@@ -8702,7 +8681,6 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -8936,7 +8914,6 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -9168,7 +9145,6 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -9353,7 +9329,14 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
   "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
-  "originSnapOffset": null,
+  "originSnapOffset": {
+    "x": 0,
+    "y": 0,
+  },
+  "pasteDialog": {
+    "data": null,
+    "shown": false,
+  },
   "penDetected": false,
   "penMode": false,
   "preferredSelectionTool": {
@@ -9362,7 +9345,6 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -9596,7 +9578,6 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -9778,7 +9759,6 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -10010,7 +9990,6 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -10192,7 +10171,6 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -10386,7 +10364,6 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -10572,7 +10549,6 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
     "id6": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -11103,7 +11079,6 @@ exports[`regression tests > noop interaction after undo shouldn't create history
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -11383,7 +11358,6 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": "-6.25000",
   "scrollY": 0,
   "scrolledOutside": false,
@@ -11510,7 +11484,6 @@ exports[`regression tests > shift click on selected element should deselect it o
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -11713,7 +11686,6 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -12035,7 +12007,6 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
     "id6": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -12467,7 +12438,6 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -13107,7 +13077,6 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 60,
   "scrollY": 60,
   "scrolledOutside": false,
@@ -13234,7 +13203,6 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -13868,7 +13836,6 @@ exports[`regression tests > switches from group of selected elements to another
     "id6": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -14208,7 +14175,6 @@ exports[`regression tests > switches selected element on pointer down > [end of
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -14472,7 +14438,6 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 20,
   "scrollY": "-18.53553",
   "scrolledOutside": false,
@@ -14597,7 +14562,6 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -14963,7 +14927,6 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -15091,7 +15054,6 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,

packages/excalidraw/tests/scrollConstraints.test.tsx

@@ -1,135 +0,0 @@
-import React from "react";
-import { vi } from "vitest";
-
-import { resolvablePromise } from "@excalidraw/common";
-
-import { Excalidraw } from "../index";
-
-import { API } from "./helpers/api";
-import { act, render, waitFor } from "./test-utils";
-
-import type { ExcalidrawImperativeAPI, ScrollConstraints } from "../types";
-
-const FIRST_SCROLL_CONSTRAINTS: ScrollConstraints = {
-  x: 0,
-  y: 0,
-  width: 400,
-  height: 300,
-  lockZoom: true,
-  overscrollAllowance: 0,
-  viewportZoomFactor: 1,
-  animateOnNextUpdate: false,
-};
-
-const SECOND_SCROLL_CONSTRAINTS: ScrollConstraints = {
-  x: 100,
-  y: 200,
-  width: 500,
-  height: 350,
-  lockZoom: false,
-  overscrollAllowance: 0.2,
-  viewportZoomFactor: 0.8,
-  animateOnNextUpdate: false,
-};
-
-describe("scrollConstraints", () => {
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it("syncs prop updates after mount", async () => {
-    const { rerender } = await render(<Excalidraw />);
-
-    expect(window.h.state.scrollConstraints).toBe(null);
-
-    rerender(<Excalidraw scrollConstraints={FIRST_SCROLL_CONSTRAINTS} />);
-
-    await waitFor(() => {
-      expect(window.h.state.scrollConstraints).toEqual(
-        FIRST_SCROLL_CONSTRAINTS,
-      );
-    });
-
-    rerender(<Excalidraw scrollConstraints={SECOND_SCROLL_CONSTRAINTS} />);
-
-    await waitFor(() => {
-      expect(window.h.state.scrollConstraints).toEqual(
-        SECOND_SCROLL_CONSTRAINTS,
-      );
-    });
-
-    rerender(<Excalidraw />);
-
-    await waitFor(() => {
-      expect(window.h.state.scrollConstraints).toBe(null);
-    });
-  });
-
-  it("ignores setScrollConstraints() when the prop is controlled", async () => {
-    const excalidrawAPIPromise = resolvablePromise<ExcalidrawImperativeAPI>();
-    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
-
-    await render(
-      <Excalidraw
-        scrollConstraints={FIRST_SCROLL_CONSTRAINTS}
-        onExcalidrawAPI={(api) => {
-          if (api) {
-            excalidrawAPIPromise.resolve(api);
-          }
-        }}
-      />,
-    );
-
-    const excalidrawAPI = await excalidrawAPIPromise;
-
-    act(() => {
-      excalidrawAPI.setScrollConstraints(SECOND_SCROLL_CONSTRAINTS);
-    });
-
-    expect(warn).toHaveBeenCalledWith(
-      "Excalidraw: `setScrollConstraints()` is ignored when the `scrollConstraints` prop is controlled. Update the prop value instead.",
-    );
-    expect(window.h.state.scrollConstraints).toEqual(FIRST_SCROLL_CONSTRAINTS);
-  });
-
-  it("ignores scrollToContent() scrollLock when the prop is controlled", async () => {
-    const excalidrawAPIPromise = resolvablePromise<ExcalidrawImperativeAPI>();
-    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
-
-    await render(
-      <Excalidraw
-        scrollConstraints={FIRST_SCROLL_CONSTRAINTS}
-        onExcalidrawAPI={(api) => {
-          if (api) {
-            excalidrawAPIPromise.resolve(api);
-          }
-        }}
-      />,
-    );
-
-    const excalidrawAPI = await excalidrawAPIPromise;
-    const rectangle = API.createElement({
-      x: 1000,
-      y: 1000,
-      width: 100,
-      height: 100,
-    });
-    API.setElements([rectangle]);
-
-    act(() => {
-      excalidrawAPI.scrollToContent(rectangle, {
-        animate: false,
-        fitToViewport: true,
-        scrollLock: {
-          lockZoom: true,
-          overscrollAllowance: 0,
-        },
-      });
-    });
-
-    expect(warn).toHaveBeenCalledWith(
-      "Excalidraw: `scrollToContent()` with `scrollLock` is ignored when the `scrollConstraints` prop is controlled. Update the prop value instead.",
-    );
-    expect(window.h.state.scrollConstraints).toEqual(FIRST_SCROLL_CONSTRAINTS);
-  });
-});

packages/excalidraw/types.ts

@@ -10,6 +10,8 @@ import type { LinearElementEditor } from "@excalidraw/element";
 
 import type { MaybeTransformHandleType } from "@excalidraw/element";
 
+import type { SnapLine } from "@excalidraw/element";
+
 import type {
   PointerType,
   ExcalidrawLinearElement,
@@ -55,7 +57,6 @@ import type { ClipboardData } from "./clipboard";
 import type App from "./components/App";
 import type Library from "./data/library";
 import type { ContextMenuItems } from "./components/ContextMenu";
-import type { SnapLine } from "./snapping";
 import type { ImportedDataState } from "./data/types";
 
 import type { Language } from "./i18n";
@@ -454,7 +455,6 @@ export interface AppState {
   userToFollow: UserToFollow | null;
   /** the socket ids of the users following the current user */
   followedBy: Set<SocketId>;
-  scrollConstraints: ScrollConstraints | null;
 
   /** image cropping */
   isCropping: boolean;
@@ -547,8 +547,6 @@ export type ExcalidrawInitialDataState = Merge<
   ImportedDataState,
   {
     libraryItems?: MaybePromise<Required<ImportedDataState>["libraryItems"]>;
-    scrollX?: number;
-    scrollY?: number;
   }
 >;
 
@@ -665,7 +663,6 @@ export interface ExcalidrawProps {
   onScrollChange?: (scrollX: number, scrollY: number, zoom: Zoom) => void;
   onUserFollow?: (payload: OnUserFollowedPayload) => void;
   children?: React.ReactNode;
-  scrollConstraints?: AppState["scrollConstraints"];
   validateEmbeddable?:
     | boolean
     | string[]
@@ -992,8 +989,6 @@ export interface ExcalidrawImperativeAPI {
   ) => UnsubscribeCallback;
   onStateChange: InstanceType<typeof App>["onStateChange"];
   onEvent: InstanceType<typeof App>["onEvent"];
-  app: InstanceType<typeof App>;
-  setScrollConstraints: InstanceType<typeof App>["setScrollConstraints"];
 }
 
 export type FrameNameBounds = {
@@ -1060,69 +1055,3 @@ export type Offsets = Partial<{
   bottom: number;
   left: number;
 }>;
-
-export type ScrollConstraints = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  animateOnNextUpdate?: boolean;
-  /**
-   * A factor that determines the minimum zoom level that should fit the
-   * constrained area into the viewport.
-   */
-  viewportZoomFactor?: number;
-  /**
-   * If true, the user will not be able to zoom out beyond the scroll
-   * constraints (taking into account the viewportZoomFactor).
-   */
-  lockZoom?: boolean;
-  /**
-   * <0-1> - how much can you scroll beyond the constrained area within the
-   * timeout window. Note you will still be snapped back to the constrained area
-   * after the timeout.
-   */
-  overscrollAllowance?: number;
-};
-
-/**
- * Optional scroll constraint settings derived from the final viewport computed
- * by `scrollToContent()`.
- */
-export type ScrollToContentLockOptions = {
-  lockZoom?: boolean;
-  overscrollAllowance?: number;
-  viewportZoomFactor?: number;
-};
-
-export type ScrollToContentOptions =
-  | ({
-      fitToContent?: boolean;
-      fitToViewport?: never;
-      viewportZoomFactor?: number;
-      animate?: boolean;
-      duration?: number;
-      scrollLock?: boolean | ScrollToContentLockOptions;
-    } & {
-      minZoom?: number;
-      maxZoom?: number;
-      canvasOffsets?: Offsets;
-    })
-  | ({
-      fitToContent?: never;
-      fitToViewport?: boolean;
-      viewportZoomFactor?: number;
-      animate?: boolean;
-      duration?: number;
-      scrollLock?: boolean | ScrollToContentLockOptions;
-    } & {
-      minZoom?: number;
-      maxZoom?: number;
-      canvasOffsets?: Offsets;
-    });
-
-export type AnimateTranslateCanvasValues = {
-  scrollX: AppState["scrollX"];
-  scrollY: AppState["scrollY"];
-  zoom: AppState["zoom"]["value"];
-};

packages/math/src/constants.ts

@@ -1,5 +1,3 @@
-export const PRECISION = 10e-5;
-
 // Legendre-Gauss abscissae (x values) and weights for n=24
 // Refeerence: https://pomax.github.io/bezierinfo/legendre-gauss.html
 export const LegendreGaussN24TValues = [

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

@@ -85,7 +85,6 @@ exports[`exportToSvg > with default arguments 1`] = `
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,

vercel.json

@@ -1,4 +1,5 @@
 {
+  "public": true,
   "headers": [
     {
       "source": "/(.*)",