fix other imports as well

* fix: canvas panning stops when hovering over frame title (#10340)

* improve

---------

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>

excalidraw-app/App.tsx

@@ -4,7 +4,6 @@ import {
   TTDDialogTrigger,
   CaptureUpdateAction,
   reconcileElements,
-  getCommonBounds,
   useEditorInterface,
 } from "@excalidraw/excalidraw";
 import { trackEvent } from "@excalidraw/excalidraw/analytics";
@@ -58,21 +57,9 @@ import {
   useHandleLibrary,
 } from "@excalidraw/excalidraw/data/library";
 
-import { getSelectedElements } from "@excalidraw/element/selection";
-
-import {
-  decodeConstraints,
-  encodeConstraints,
-} from "@excalidraw/excalidraw/scene/scrollConstraints";
-
-import { useApp } from "@excalidraw/excalidraw/components/App";
-
-import { clamp } from "@excalidraw/math";
-
 import type { RemoteExcalidrawElement } from "@excalidraw/excalidraw/data/reconcile";
 import type { RestoredDataState } from "@excalidraw/excalidraw/data/restore";
 import type {
-  ExcalidrawElement,
   FileId,
   NonDeletedExcalidrawElement,
   OrderedExcalidrawElement,
@@ -83,9 +70,8 @@ import type {
   BinaryFiles,
   ExcalidrawInitialDataState,
   UIAppState,
-  ScrollConstraints,
 } from "@excalidraw/excalidraw/types";
-import type { Merge, ResolutionType } from "@excalidraw/common/utility-types";
+import type { ResolutionType } from "@excalidraw/common/utility-types";
 import type { ResolvablePromise } from "@excalidraw/common/utils";
 
 import CustomStats from "./CustomStats";
@@ -159,274 +145,6 @@ import type { CollabAPI } from "./collab/Collab";
 
 polyfill();
 
-type DebugScrollConstraints = Merge<
-  ScrollConstraints,
-  { viewportZoomFactor: number; enabled: boolean }
->;
-
-const ConstraintsSettings = ({
-  initialConstraints,
-  excalidrawAPI,
-}: {
-  initialConstraints: DebugScrollConstraints;
-  excalidrawAPI: ExcalidrawImperativeAPI;
-}) => {
-  const [constraints, setConstraints] =
-    useState<DebugScrollConstraints>(initialConstraints);
-
-  const app = useApp();
-  const frames = app.scene.getNonDeletedFramesLikes();
-  const [activeFrameId, setActiveFrameId] = useState<string | null>(null);
-
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    params.set("constraints", encodeConstraints(constraints));
-    history.replaceState(null, "", `?${params.toString()}`);
-
-    constraints.enabled
-      ? excalidrawAPI.setScrollConstraints(constraints)
-      : excalidrawAPI.setScrollConstraints(null);
-  }, [constraints, excalidrawAPI]);
-
-  useEffect(() => {
-    const frame = frames.find((frame) => frame.id === activeFrameId);
-    if (frame) {
-      const { x, y, width, height } = frame;
-      setConstraints((s) => ({
-        x: Math.round(x),
-        y: Math.round(y),
-        width: Math.round(width),
-        height: Math.round(height),
-        enabled: s.enabled,
-        viewportZoomFactor: s.viewportZoomFactor,
-        lockZoom: s.lockZoom,
-      }));
-    }
-  }, [activeFrameId, frames]);
-
-  const [selection, setSelection] = useState<ExcalidrawElement[]>([]);
-  useEffect(() => {
-    return excalidrawAPI.onChange((elements, appState) => {
-      setSelection(getSelectedElements(elements, appState));
-    });
-  }, [excalidrawAPI]);
-
-  const parseValue = (
-    value: string,
-    opts?: {
-      min?: number;
-      max?: number;
-    },
-  ) => {
-    const { min = -Infinity, max = Infinity } = opts || {};
-    let parsedValue = parseInt(value);
-    if (isNaN(parsedValue)) {
-      parsedValue = 0;
-    }
-    return clamp(parsedValue, min, max);
-  };
-
-  const inputStyle = {
-    width: "4rem",
-    height: "1rem",
-  };
-
-  return (
-    <div
-      style={{
-        position: "fixed",
-        bottom: 10,
-        left: "calc(50%)",
-        transform: "translateX(-50%)",
-        zIndex: 999999,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        flexDirection: "column",
-        gap: "0.5rem",
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          gap: "0.6rem",
-          alignItems: "center",
-        }}
-      >
-        enabled:{" "}
-        <input
-          type="checkbox"
-          defaultChecked={!!constraints.enabled}
-          onChange={(e) =>
-            setConstraints((s) => ({ ...s, enabled: e.target.checked }))
-          }
-        />
-        x:{" "}
-        <input
-          placeholder="x"
-          type="number"
-          step={"10"}
-          value={constraints.x.toString()}
-          onChange={(e) => {
-            setConstraints((s) => ({
-              ...s,
-              x: parseValue(e.target.value),
-            }));
-          }}
-          style={inputStyle}
-        />
-        y:{" "}
-        <input
-          placeholder="y"
-          type="number"
-          step={"10"}
-          value={constraints.y.toString()}
-          onChange={(e) =>
-            setConstraints((s) => ({
-              ...s,
-              y: parseValue(e.target.value),
-            }))
-          }
-          style={inputStyle}
-        />
-        w:{" "}
-        <input
-          placeholder="width"
-          type="number"
-          step={"10"}
-          value={constraints.width.toString()}
-          onChange={(e) =>
-            setConstraints((s) => ({
-              ...s,
-              width: parseValue(e.target.value, {
-                min: 200,
-              }),
-            }))
-          }
-          style={inputStyle}
-        />
-        h:{" "}
-        <input
-          placeholder="height"
-          type="number"
-          step={"10"}
-          value={constraints.height.toString()}
-          onChange={(e) =>
-            setConstraints((s) => ({
-              ...s,
-              height: parseValue(e.target.value, {
-                min: 200,
-              }),
-            }))
-          }
-          style={inputStyle}
-        />
-        zoomFactor:
-        <input
-          placeholder="zoom factor"
-          type="number"
-          min="0.1"
-          max="1"
-          step="0.1"
-          value={constraints.viewportZoomFactor.toString()}
-          onChange={(e) =>
-            setConstraints((s) => ({
-              ...s,
-              viewportZoomFactor: parseFloat(e.target.value.toString()) ?? 0.7,
-            }))
-          }
-          style={inputStyle}
-        />
-        overscrollAllowance:
-        <input
-          placeholder="overscroll allowance"
-          type="number"
-          min="0"
-          max="1"
-          step="0.1"
-          value={constraints.overscrollAllowance?.toString()}
-          onChange={(e) =>
-            setConstraints((s) => ({
-              ...s,
-              overscrollAllowance: parseFloat(e.target.value.toString()) ?? 0.5,
-            }))
-          }
-          style={inputStyle}
-        />
-        lockZoom:{" "}
-        <input
-          type="checkbox"
-          defaultChecked={!!constraints.lockZoom}
-          onChange={(e) =>
-            setConstraints((s) => ({ ...s, lockZoom: e.target.checked }))
-          }
-          value={constraints.lockZoom?.toString()}
-        />
-        {selection.length > 0 && (
-          <button
-            onClick={() => {
-              const bbox = getCommonBounds(selection);
-              setConstraints((s) => ({
-                ...s,
-                x: Math.round(bbox[0]),
-                y: Math.round(bbox[1]),
-                width: Math.round(bbox[2] - bbox[0]),
-                height: Math.round(bbox[3] - bbox[1]),
-              }));
-            }}
-          >
-            use selection
-          </button>
-        )}
-      </div>
-
-      {frames.length > 0 && (
-        <div
-          style={{
-            display: "flex",
-            gap: "0.6rem",
-            flexDirection: "row",
-          }}
-        >
-          <button
-            onClick={() => {
-              const currentIndex = frames.findIndex(
-                (frame) => frame.id === activeFrameId,
-              );
-
-              if (currentIndex === -1) {
-                setActiveFrameId(frames[frames.length - 1].id);
-              } else {
-                const nextIndex =
-                  (currentIndex - 1 + frames.length) % frames.length;
-                setActiveFrameId(frames[nextIndex].id);
-              }
-            }}
-          >
-            Prev
-          </button>
-          <button
-            onClick={() => {
-              const currentIndex = frames.findIndex(
-                (frame) => frame.id === activeFrameId,
-              );
-
-              if (currentIndex === -1) {
-                setActiveFrameId(frames[0].id);
-              } else {
-                const nextIndex = (currentIndex + 1) % frames.length;
-                setActiveFrameId(frames[nextIndex].id);
-              }
-            }}
-          >
-            Next
-          </button>
-        </div>
-      )}
-    </div>
-  );
-};
-
 window.EXCALIDRAW_THROTTLE_RENDER = true;
 
 declare global {
@@ -498,20 +216,10 @@ const initializeScene = async (opts: {
   )
 > => {
   const searchParams = new URLSearchParams(window.location.search);
-  const hashParams = new URLSearchParams(window.location.hash.slice(1));
   const id = searchParams.get("id");
-  const shareableLink = hashParams.get("json")?.split(",");
-
-  if (shareableLink) {
-    hashParams.delete("json");
-    const hash = `#${decodeURIComponent(hashParams.toString())}`;
-    window.history.replaceState(
-      {},
-      APP_NAME,
-      `${window.location.origin}${hash}`,
-    );
-  }
-
+  const jsonBackendMatch = window.location.hash.match(
+    /^#json=([a-zA-Z0-9_-]+),([a-zA-Z0-9_-]+)$/,
+  );
   const externalUrlMatch = window.location.hash.match(/^#url=(.*)$/);
 
   const localDataState = importFromLocalStorage();
@@ -521,7 +229,7 @@ const initializeScene = async (opts: {
   } = await loadScene(null, null, localDataState);
 
   let roomLinkData = getCollaborationLinkData(window.location.href);
-  const isExternalScene = !!(id || shareableLink || roomLinkData);
+  const isExternalScene = !!(id || jsonBackendMatch || roomLinkData);
   if (isExternalScene) {
     if (
       // don't prompt if scene is empty
@@ -531,16 +239,16 @@ const initializeScene = async (opts: {
       // otherwise, prompt whether user wants to override current scene
       (await openConfirmModal(shareableLinkConfirmDialog))
     ) {
-      if (shareableLink) {
+      if (jsonBackendMatch) {
         scene = await loadScene(
-          shareableLink[0],
-          shareableLink[1],
+          jsonBackendMatch[1],
+          jsonBackendMatch[2],
           localDataState,
         );
       }
       scene.scrollToContent = true;
       if (!roomLinkData) {
-        // window.history.replaceState({}, APP_NAME, window.location.origin);
+        window.history.replaceState({}, APP_NAME, window.location.origin);
       }
     } else {
       // https://github.com/excalidraw/excalidraw/issues/1919
@@ -557,7 +265,7 @@ const initializeScene = async (opts: {
       }
 
       roomLinkData = null;
-      // window.history.replaceState({}, APP_NAME, window.location.origin);
+      window.history.replaceState({}, APP_NAME, window.location.origin);
     }
   } else if (externalUrlMatch) {
     window.history.replaceState({}, APP_NAME, window.location.origin);
@@ -618,12 +326,12 @@ const initializeScene = async (opts: {
       key: roomLinkData.roomKey,
     };
   } else if (scene) {
-    return isExternalScene && shareableLink
+    return isExternalScene && jsonBackendMatch
       ? {
           scene,
           isExternalScene,
-          id: shareableLink[0],
-          key: shareableLink[1],
+          id: jsonBackendMatch[1],
+          key: jsonBackendMatch[2],
         }
       : { scene, isExternalScene: false };
   }
@@ -1033,32 +741,6 @@ const ExcalidrawWrapper = () => {
     [setShareDialogState],
   );
 
-  const [constraints] = useState<DebugScrollConstraints>(() => {
-    const stored = new URLSearchParams(location.search.slice(1)).get(
-      "constraints",
-    );
-    let storedConstraints = {};
-    if (stored) {
-      try {
-        storedConstraints = decodeConstraints(stored);
-      } catch {
-        console.error("Invalid scroll constraints in URL");
-      }
-    }
-
-    return {
-      x: 0,
-      y: 0,
-      width: document.body.clientWidth,
-      height: document.body.clientHeight,
-      lockZoom: false,
-      viewportZoomFactor: 0.7,
-      overscrollAllowance: 0.5,
-      enabled: !isTestEnv(),
-      ...storedConstraints,
-    };
-  });
-
   // browsers generally prevent infinite self-embedding, there are
   // cases where it still happens, and while we disallow self-embedding
   // by not whitelisting our own origin, this serves as an additional guard
@@ -1192,7 +874,6 @@ const ExcalidrawWrapper = () => {
             </div>
           );
         }}
-        // scrollConstraints={constraints.enabled ? constraints : undefined}
         onLinkOpen={(element, event) => {
           if (element.link && isElementLink(element.link)) {
             event.preventDefault();
@@ -1200,12 +881,6 @@ const ExcalidrawWrapper = () => {
           }
         }}
       >
-        {/* {excalidrawAPI && !isTestEnv() && (
-          <ConstraintsSettings
-            excalidrawAPI={excalidrawAPI}
-            initialConstraints={constraints}
-          />
-        )} */}
         <AppMainMenu
           onCollabDialogOpen={onCollabDialogOpen}
           isCollaborating={isCollaborating}

excalidraw-app/components/DebugCanvas.tsx

@@ -22,8 +22,8 @@ import {
   isLineSegment,
   type GlobalPoint,
   type LineSegment,
+  isCurve,
 } from "@excalidraw/math";
-import { isCurve } from "@excalidraw/math/curve";
 
 import React from "react";
 

packages/common/src/constants.ts

@@ -105,6 +105,7 @@ export const CLASSES = {
   SEARCH_MENU_INPUT_WRAPPER: "layer-ui__search-inputWrapper",
   CONVERT_ELEMENT_TYPE_POPUP: "ConvertElementTypePopup",
   SHAPE_ACTIONS_THEME_SCOPE: "shape-actions-theme-scope",
+  FRAME_NAME: "frame-name",
 };
 
 export const CJK_HAND_DRAWN_FALLBACK_FONT = "Xiaolai";

packages/element/src/collision.ts

@@ -11,12 +11,9 @@ import {
   vectorFromPoint,
   vectorNormalize,
   vectorScale,
-} from "@excalidraw/math";
-
-import {
   ellipse,
   ellipseSegmentInterceptPoints,
-} from "@excalidraw/math/ellipse";
+} from "@excalidraw/math";
 
 import type {
   Curve,

packages/element/src/distance.ts

@@ -2,10 +2,10 @@ import {
   curvePointDistance,
   distanceToLineSegment,
   pointRotateRads,
+  ellipse,
+  ellipseDistanceFromPoint,
 } from "@excalidraw/math";
 
-import { ellipse, ellipseDistanceFromPoint } from "@excalidraw/math/ellipse";
-
 import type { GlobalPoint, Radians } from "@excalidraw/math";
 
 import {

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";
@@ -141,7 +140,7 @@ export const actionZoomIn = register({
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
-      appState: constrainScrollState({
+      appState: {
         ...appState,
         ...getStateForZoom(
           {
@@ -152,7 +151,7 @@ export const actionZoomIn = register({
           appState,
         ),
         userToFollow: null,
-      }),
+      },
       captureUpdate: CaptureUpdateAction.EVENTUALLY,
     };
   },
@@ -182,7 +181,7 @@ export const actionZoomOut = register({
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
-      appState: constrainScrollState({
+      appState: {
         ...appState,
         ...getStateForZoom(
           {
@@ -193,7 +192,7 @@ export const actionZoomOut = register({
           appState,
         ),
         userToFollow: null,
-      }),
+      },
       captureUpdate: CaptureUpdateAction.EVENTUALLY,
     };
   },

packages/excalidraw/appState.ts

@@ -21,7 +21,7 @@ const defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio)
 
 export const getDefaultAppState = (): Omit<
   AppState,
-  "offsetTop" | "offsetLeft" | "width" | "height" | "scrollConstraints"
+  "offsetTop" | "offsetLeft" | "width" | "height"
 > => {
   return {
     showWelcomeScreen: false,
@@ -247,7 +247,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: false, 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

@@ -404,11 +404,6 @@ import { isMaybeMermaidDefinition } from "../mermaid";
 
 import { LassoTrail } from "../lasso";
 
-import {
-  constrainScrollState,
-  calculateConstrainedScrollCenter,
-  areCanvasTranslatesClose,
-} from "../scene/scrollConstraints";
 import { EraserTrail } from "../eraser";
 
 import { getShortcutKey } from "../shortcut";
@@ -469,8 +464,6 @@ import type {
   FrameNameBoundsCache,
   SidebarName,
   SidebarTabName,
-  ScrollConstraints,
-  AnimateTranslateCanvasValues,
   KeyboardModifiersObject,
   CollaboratorPointer,
   ToolType,
@@ -520,7 +513,6 @@ const ExcalidrawAppStateContext = React.createContext<AppState>({
   height: 0,
   offsetLeft: 0,
   offsetTop: 0,
-  scrollConstraints: null,
 });
 ExcalidrawAppStateContext.displayName = "ExcalidrawAppStateContext";
 
@@ -562,8 +554,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;
 
 /**
  * Map of youtube embed video states
@@ -695,9 +685,7 @@ class App extends React.Component<AppProps, AppState> {
       objectsSnapModeEnabled = false,
       theme = defaultAppState.theme,
       name = `${t("labels.untitled")}-${getDateTime()}`,
-      scrollConstraints,
     } = props;
-
     this.state = {
       ...defaultAppState,
       theme,
@@ -710,7 +698,6 @@ class App extends React.Component<AppProps, AppState> {
       name,
       width: window.innerWidth,
       height: window.innerHeight,
-      scrollConstraints: scrollConstraints ?? null,
     };
 
     this.refreshEditorInterface();
@@ -765,7 +752,6 @@ class App extends React.Component<AppProps, AppState> {
         getEditorInterface: () => this.editorInterface,
         updateFrameRendering: this.updateFrameRendering,
         toggleSidebar: this.toggleSidebar,
-        setScrollConstraints: this.setScrollConstraints,
         onChange: (cb) => this.onChangeEmitter.on(cb),
         onIncrement: (cb) => this.store.onStoreIncrementEmitter.on(cb),
         onPointerDown: (cb) => this.onPointerDownEmitter.on(cb),
@@ -1490,6 +1476,7 @@ class App extends React.Component<AppProps, AppState> {
       return (
         <div
           id={this.getFrameNameDOMId(f)}
+          className={CLASSES.FRAME_NAME}
           key={f.id}
           style={{
             position: "absolute",
@@ -2423,12 +2410,7 @@ class App extends React.Component<AppProps, AppState> {
       toast: this.state.toast,
     };
 
-    if (this.props.scrollConstraints) {
-      scene.appState = {
-        ...scene.appState,
-        ...calculateConstrainedScrollCenter(this.state, scene.appState),
-      };
-    } else if (initialData?.scrollToContent) {
+    if (initialData?.scrollToContent) {
       scene.appState = {
         ...scene.appState,
         ...calculateScrollCenter(scene.elements, {
@@ -2437,7 +2419,6 @@ class App extends React.Component<AppProps, AppState> {
           height: this.state.height,
           offsetTop: this.state.offsetTop,
           offsetLeft: this.state.offsetLeft,
-          scrollConstraints: this.state.scrollConstraints,
         }),
       };
     }
@@ -2658,11 +2639,7 @@ class App extends React.Component<AppProps, AppState> {
       .forEach((element) => ShapeCache.delete(element));
     this.refreshEditorInterface();
     this.updateDOMRect();
-    if (this.state.scrollConstraints) {
-      this.setState((state) => constrainScrollState(state));
-    } else {
-      this.setState({});
-    }
+    this.setState({});
   });
 
   /** generally invoked only if fullscreen was invoked programmatically */
@@ -2964,33 +2941,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 = ({
@@ -3749,8 +3699,8 @@ class App extends React.Component<AppProps, AppState> {
      */
     value: number,
   ) => {
-    this.setState(
-      getStateForZoom(
+    this.setState({
+      ...getStateForZoom(
         {
           viewportX: this.state.width / 2 + this.state.offsetLeft,
           viewportY: this.state.height / 2 + this.state.offsetTop,
@@ -3758,7 +3708,7 @@ class App extends React.Component<AppProps, AppState> {
         },
         this.state,
       ),
-    );
+    });
   };
 
   private cancelInProgressAnimation: (() => void) | null = null;
@@ -3858,18 +3808,32 @@ class App extends React.Component<AppProps, AppState> {
     // when animating, we use RequestAnimationFrame to prevent the animation
     // from slowing down other processes
     if (opts?.animate) {
-      const fromValues = {
-        scrollX: this.state.scrollX,
-        scrollY: this.state.scrollY,
-        zoom: this.state.zoom.value,
-      };
+      const origScrollX = this.state.scrollX;
+      const origScrollY = this.state.scrollY;
+      const origZoom = this.state.zoom.value;
 
-      const toValues = { scrollX, scrollY, zoom: zoom.value };
-
-      this.animateTranslateCanvas({
-        fromValues,
-        toValues,
-        duration: opts?.duration ?? 500,
+      const cancel = easeToValuesRAF({
+        fromValues: {
+          scrollX: origScrollX,
+          scrollY: origScrollY,
+          zoom: origZoom,
+        },
+        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 });
         },
@@ -3879,7 +3843,13 @@ class App extends React.Component<AppProps, AppState> {
         onCancel: () => {
           this.setState({ shouldCacheIgnoreZoom: false });
         },
+        duration: opts?.duration ?? 500,
       });
+
+      this.cancelInProgressAnimation = () => {
+        cancel();
+        this.cancelInProgressAnimation = null;
+      };
     } else {
       this.setState({ scrollX, scrollY, zoom });
     }
@@ -3893,158 +3863,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();
-
-    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) {
-      // debounce to allow centering on user's cursor position before constraining
-      if (newState.zoom.value !== this.state.zoom.value) {
-        this.debounceConstrainScrollState(newState);
-      } else {
-        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,
-      onCancel,
-      duration,
-    });
-
-    this.cancelInProgressAnimation = () => {
-      cancel();
-      this.cancelInProgressAnimation = null;
-    };
+    this.setState(state);
   };
 
   setToast = (
@@ -5110,22 +4933,16 @@ class App extends React.Component<AppProps, AppState> {
 
     const initialScale = gesture.initialScale;
     if (initialScale) {
-      this.setState((state) =>
-        constrainScrollState(
+      this.setState((state) => ({
+        ...getStateForZoom(
           {
-            ...state,
-            ...getStateForZoom(
-              {
-                viewportX: this.lastViewportPosition.x,
-                viewportY: this.lastViewportPosition.y,
-                nextZoom: getNormalizedZoom(initialScale * event.scale),
-              },
-              state,
-            ),
+            viewportX: this.lastViewportPosition.x,
+            viewportY: this.lastViewportPosition.y,
+            nextZoom: getNormalizedZoom(initialScale * event.scale),
           },
-          "loose",
+          state,
         ),
-      );
+      }));
     }
   });
 
@@ -11436,12 +11253,13 @@ class App extends React.Component<AppProps, AppState> {
     (
       event: WheelEvent | React.WheelEvent<HTMLDivElement | HTMLCanvasElement>,
     ) => {
-      // if not scrolling on canvas/wysiwyg, ignore
       if (
         !(
           event.target instanceof HTMLCanvasElement ||
           event.target instanceof HTMLTextAreaElement ||
-          event.target instanceof HTMLIFrameElement
+          event.target instanceof HTMLIFrameElement ||
+          (event.target instanceof HTMLElement &&
+            event.target.classList.contains(CLASSES.FRAME_NAME))
         )
       ) {
         // prevent zooming the browser (but allow scrolling DOM)
@@ -11643,51 +11461,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 (scrollConstraints) {
-      this.setState(
-        {
-          scrollConstraints,
-          viewModeEnabled: true,
-        },
-        () => {
-          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,
-        viewModeEnabled: false,
-      });
-    }
-  };
 }
 
 // -----------------------------------------------------------------------------

packages/excalidraw/components/LayerUI.tsx

@@ -614,7 +614,7 @@ const LayerUI = ({
               showExitZenModeBtn={showExitZenModeBtn}
               renderWelcomeScreen={renderWelcomeScreen}
             />
-            {appState.scrolledOutside && !appState.scrollConstraints && (
+            {appState.scrolledOutside && (
               <button
                 type="button"
                 className="scroll-back-to-content"

packages/excalidraw/components/MobileMenu.tsx

@@ -155,8 +155,7 @@ export const MobileMenu = ({
               renderToolbar()}
             {appState.scrolledOutside &&
               !appState.openMenu &&
-              !appState.openSidebar &&
-              !appState.scrollConstraints && (
+              !appState.openSidebar && (
                 <button
                   type="button"
                   className="scroll-back-to-content"

packages/excalidraw/data/restore.ts

@@ -80,7 +80,7 @@ import type { ImportedDataState, LegacyAppState } from "./types";
 
 type RestoredAppState = Omit<
   AppState,
-  "offsetTop" | "offsetLeft" | "width" | "height" | "scrollConstraints"
+  "offsetTop" | "offsetLeft" | "width" | "height"
 >;
 
 export const AllowedExcalidrawActiveTools: Record<

packages/excalidraw/eraser/index.ts

@@ -30,7 +30,7 @@ import { getBoundTextElementId } from "@excalidraw/element";
 
 import type { Bounds } from "@excalidraw/element";
 
-import type { GlobalPoint, LineSegment } from "@excalidraw/math/types";
+import type { GlobalPoint, LineSegment } from "@excalidraw/math";
 import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
 
 import { AnimatedTrail } from "../animated-trail";

packages/excalidraw/index-node.ts

@@ -67,7 +67,6 @@ const canvas = exportToCanvas(
     offsetLeft: 0,
     width: 0,
     height: 0,
-    scrollConstraints: null,
   },
   {}, // files
   {

packages/excalidraw/index.tsx

@@ -51,7 +51,6 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     onScrollChange,
     onDuplicate,
     children,
-    scrollConstraints,
     validateEmbeddable,
     renderEmbeddable,
     aiEnabled,
@@ -125,10 +124,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           renderTopLeftUI={renderTopLeftUI}
           renderTopRightUI={renderTopRightUI}
           langCode={langCode}
-          viewModeEnabled={
-            viewModeEnabled ??
-            (scrollConstraints != null ? !!scrollConstraints : undefined)
-          }
+          viewModeEnabled={viewModeEnabled}
           zenModeEnabled={zenModeEnabled}
           gridModeEnabled={gridModeEnabled}
           libraryReturnUrl={libraryReturnUrl}
@@ -147,7 +143,6 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           onPointerDown={onPointerDown}
           onPointerUp={onPointerUp}
           onScrollChange={onScrollChange}
-          scrollConstraints={scrollConstraints}
           onDuplicate={onDuplicate}
           validateEmbeddable={validateEmbeddable}
           renderEmbeddable={renderEmbeddable}

packages/excalidraw/lasso/utils.ts

@@ -15,7 +15,7 @@ import {
   intersectElementWithLineSegment,
 } from "@excalidraw/element";
 
-import type { ElementsSegmentsMap, GlobalPoint } from "@excalidraw/math/types";
+import type { ElementsSegmentsMap, GlobalPoint } from "@excalidraw/math";
 import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
 
 export const getLassoSelectedElementIds = (input: {

packages/excalidraw/scene/scrollConstraints.ts

@@ -1,552 +0,0 @@
-import { isShallowEqual } from "@excalidraw/common";
-
-import { clamp } from "@excalidraw/math";
-
-import { getNormalizedZoom } from "./normalize";
-
-import type {
-  AnimateTranslateCanvasValues,
-  AppState,
-  ScrollConstraints,
-} from "../types";
-
-// Constants for viewport zoom factor and overscroll allowance
-const MIN_VIEWPORT_ZOOM_FACTOR = 0.1;
-const MAX_VIEWPORT_ZOOM_FACTOR = 1;
-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">;
-
-/**
- * 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/types.ts

@@ -147,11 +147,6 @@ export type ScrollBars = {
   } | null;
 };
 
-export type ConstrainedScrollValues = Pick<
-  AppState,
-  "scrollX" | "scrollY" | "zoom"
-> | null;
-
 export type ElementShape = Drawable | Drawable[] | null;
 
 export type ElementShapes = {

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

@@ -962,7 +962,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -1161,7 +1160,6 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": true,
@@ -1378,7 +1376,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -1712,7 +1709,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2046,7 +2042,6 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": true,
@@ -2263,7 +2258,6 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2507,7 +2501,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2810,7 +2803,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3183,7 +3175,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3679,7 +3670,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -4005,7 +3995,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -4333,7 +4322,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -5621,7 +5609,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -6841,7 +6828,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -7780,7 +7766,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -8780,7 +8765,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": true,
@@ -9777,7 +9761,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

@@ -86,7 +86,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
     "id4": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -705,7 +704,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
     "id4": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -1195,7 +1193,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -1562,7 +1559,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -1932,7 +1928,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -2195,7 +2190,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -2643,7 +2637,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -2949,7 +2942,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -3271,7 +3263,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -3568,7 +3559,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -3857,7 +3847,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -4095,7 +4084,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -4355,7 +4343,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -4629,7 +4616,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -4861,7 +4847,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -5093,7 +5078,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -5343,7 +5327,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -5602,7 +5585,6 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -5862,7 +5844,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
     "id1": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -6194,7 +6175,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
     "id8": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -6624,7 +6604,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
     "id1": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -7002,7 +6981,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -7314,7 +7292,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -7633,7 +7610,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -7866,7 +7842,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -8221,7 +8196,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -8579,7 +8553,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,
@@ -8985,7 +8958,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -9275,7 +9247,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -9542,7 +9513,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -9810,7 +9780,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -10048,7 +10017,6 @@ exports[`history > multiplayer undo/redo > should override remotely added groups
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -10345,7 +10313,6 @@ exports[`history > multiplayer undo/redo > should override remotely added points
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -10697,7 +10664,6 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -10939,7 +10905,6 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -11387,7 +11352,6 @@ exports[`history > multiplayer undo/redo > should update history entries after r
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -11650,7 +11614,6 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -11888,7 +11851,6 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -12128,7 +12090,6 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -12537,7 +12498,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on e
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -12747,7 +12707,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on e
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -12960,7 +12919,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on i
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -13261,7 +13219,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on i
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -13565,7 +13522,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on s
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": -50,
   "scrollY": -50,
   "searchMatches": null,
@@ -13810,7 +13766,6 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -14050,7 +14005,6 @@ exports[`history > singleplayer undo/redo > should end up with no history entry
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -14292,7 +14246,6 @@ exports[`history > singleplayer undo/redo > should iterate through the history w
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -14540,7 +14493,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,
@@ -14877,7 +14829,6 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -15047,7 +14998,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -15337,7 +15287,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -15603,7 +15552,6 @@ exports[`history > singleplayer undo/redo > should not modify anything on unrela
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -15758,7 +15706,6 @@ exports[`history > singleplayer undo/redo > should not override appstate changes
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -16044,7 +15991,6 @@ exports[`history > singleplayer undo/redo > should support appstate name or view
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -16208,7 +16154,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -16916,7 +16861,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -17554,7 +17498,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -18190,7 +18133,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -18914,7 +18856,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -19668,7 +19609,6 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -20151,7 +20091,6 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
     "id1": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -20665,7 +20604,6 @@ exports[`history > singleplayer undo/redo > should support element creation, del
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -21127,7 +21065,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

@@ -89,7 +89,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,
@@ -518,7 +517,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,
@@ -933,7 +931,6 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -1502,7 +1499,6 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -1714,7 +1710,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,
@@ -2101,7 +2096,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,
@@ -2347,7 +2341,6 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2532,7 +2525,6 @@ exports[`regression tests > can drag element that covers another element, while
     "id6": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2858,7 +2850,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,
@@ -3118,7 +3109,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,
@@ -3362,7 +3352,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,
@@ -3601,7 +3590,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,
@@ -3862,7 +3850,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,
@@ -4177,7 +4164,6 @@ exports[`regression tests > deleting last but one element in editing group shoul
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -4619,7 +4605,6 @@ exports[`regression tests > deselects group of selected elements on pointer down
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -4905,7 +4890,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,
@@ -5183,7 +5167,6 @@ exports[`regression tests > deselects selected element on pointer down when poin
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -5394,7 +5377,6 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -5595,7 +5577,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,
@@ -5994,7 +5975,6 @@ exports[`regression tests > drags selected elements from point inside common bou
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -6291,7 +6271,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,
@@ -7153,7 +7132,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,
@@ -7489,7 +7467,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,
@@ -7771,7 +7748,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,
@@ -8009,7 +7985,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,
@@ -8250,7 +8225,6 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -8433,7 +8407,6 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -8616,7 +8589,6 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -8799,7 +8771,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,
@@ -9032,7 +9003,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,
@@ -9263,7 +9233,6 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -9462,7 +9431,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,
@@ -9695,7 +9663,6 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -9878,7 +9845,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,
@@ -10109,7 +10075,6 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -10292,7 +10257,6 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -10491,7 +10455,6 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -10678,7 +10641,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,
@@ -11210,7 +11172,6 @@ exports[`regression tests > noop interaction after undo shouldn't create history
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -11491,7 +11452,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,
@@ -11619,7 +11579,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,
@@ -11823,7 +11782,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,
@@ -12146,7 +12104,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,
@@ -12579,7 +12536,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,
@@ -13220,7 +13176,6 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 60,
   "scrollY": 60,
   "scrolledOutside": false,
@@ -13348,7 +13303,6 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -13983,7 +13937,6 @@ exports[`regression tests > switches from group of selected elements to another
     "id6": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -14324,7 +14277,6 @@ exports[`regression tests > switches selected element on pointer down > [end of
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -14589,7 +14541,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,
@@ -14715,7 +14666,6 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -15110,7 +15060,6 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -15239,7 +15188,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/contextmenu.test.tsx

@@ -100,18 +100,12 @@ describe("contextMenu element", () => {
     ];
 
     expect(contextMenu).not.toBeNull();
-    expectedShortcutNames.forEach((shortcutName) => {
-      try {
-        expect(
-          contextMenu?.querySelector(`li[data-testid="${shortcutName}"]`),
-        ).not.toBeNull();
-      } catch (err) {
-        throw new Error(
-          `Failed to find context menu item with test id: ${shortcutName}`,
-        );
-      }
-    });
     expect(contextMenuOptions?.length).toBe(expectedShortcutNames.length);
+    expectedShortcutNames.forEach((shortcutName) => {
+      expect(
+        contextMenu?.querySelector(`li[data-testid="${shortcutName}"]`),
+      ).not.toBeNull();
+    });
   });
 
   it("shows context menu for element", () => {

packages/excalidraw/types.ts

@@ -432,7 +432,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;
@@ -618,7 +617,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[]
@@ -890,7 +888,6 @@ export interface ExcalidrawImperativeAPI {
   onUserFollow: (
     callback: (payload: OnUserFollowedPayload) => void,
   ) => UnsubscribeCallback;
-  setScrollConstraints: InstanceType<typeof App>["setScrollConstraints"];
 }
 
 export type FrameNameBounds = {
@@ -914,12 +911,6 @@ export type FrameNameBoundsCache = {
   >;
 };
 
-export type AnimateTranslateCanvasValues = {
-  scrollX: AppState["scrollX"];
-  scrollY: AppState["scrollY"];
-  zoom: AppState["zoom"]["value"];
-};
-
 export type KeyboardModifiersObject = {
   ctrlKey: boolean;
   shiftKey: boolean;
@@ -945,29 +936,6 @@ export type EmbedsValidationStatus = Map<
 
 export type ElementsPendingErasure = Set<ExcalidrawElement["id"]>;
 
-export type ScrollConstraints = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  animateOnNextUpdate?: boolean;
-  /**
-   * a facotr <0-1> that determines how much you can zoom out beyond the scroll
-   * constraints.
-   */
-  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;
-};
 export type PendingExcalidrawElements = ExcalidrawElement[];
 
 /** Runtime gridSize value. Null indicates disabled grid. */

packages/utils/src/export.ts

@@ -54,14 +54,7 @@ export const exportToCanvas = ({
   const { exportBackground, viewBackgroundColor } = restoredAppState;
   return _exportToCanvas(
     restoredElements,
-    {
-      ...restoredAppState,
-      offsetTop: 0,
-      offsetLeft: 0,
-      width: 0,
-      height: 0,
-      scrollConstraints: null,
-    },
+    { ...restoredAppState, offsetTop: 0, offsetLeft: 0, width: 0, height: 0 },
     files || {},
     { exportBackground, exportPadding, viewBackgroundColor, exportingFrame },
     (width: number, height: number) => {