fix: extend wait time for file loading on mobile devices

excalidraw-app/App.tsx

@@ -4,7 +4,6 @@ import {
   TTDDialogTrigger,
   CaptureUpdateAction,
   reconcileElements,
-  getCommonBounds,
 } from "@excalidraw/excalidraw";
 import { trackEvent } from "@excalidraw/excalidraw/analytics";
 import { getDefaultAppState } from "@excalidraw/excalidraw/appState";
@@ -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";
@@ -155,274 +141,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 {
@@ -494,20 +212,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();
@@ -517,7 +225,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
@@ -527,16 +235,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
@@ -553,7 +261,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);
@@ -614,12 +322,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 };
   }
@@ -1031,32 +739,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
@@ -1182,7 +864,6 @@ const ExcalidrawWrapper = () => {
             </div>
           );
         }}
-        scrollConstraints={constraints.enabled ? constraints : undefined}
         onLinkOpen={(element, event) => {
           if (element.link && isElementLink(element.link)) {
             event.preventDefault();
@@ -1190,12 +871,6 @@ const ExcalidrawWrapper = () => {
           }
         }}
       >
-        {excalidrawAPI && !isTestEnv() && (
-          <ConstraintsSettings
-            excalidrawAPI={excalidrawAPI}
-            initialConstraints={constraints}
-          />
-        )}
         <AppMainMenu
           onCollabDialogOpen={onCollabDialogOpen}
           isCollaborating={isCollaborating}

excalidraw-app/index.html

@@ -2,9 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>
-      Free, collaborative whiteboard • Hand-drawn look & feel | Excalidraw
-    </title>
+    <title>Excalidraw | Hand-drawn look & feel • Collaborative • Secure</title>
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no"
@@ -16,7 +14,7 @@
     <!-- Primary Meta Tags -->
     <meta
       name="title"
-      content="Free, collaborative whiteboard • Hand-drawn look & feel | Excalidraw"
+      content="Excalidraw — Collaborative whiteboarding made easy"
     />
     <meta
       name="description"

packages/excalidraw/actions/actionCanvas.tsx

@@ -41,7 +41,6 @@ import {
   ZoomResetIcon,
 } from "../components/icons";
 import { setCursor } from "../cursor";
-import { constrainScrollState } from "../scene/scrollConstraints";
 
 import { t } from "../i18n";
 import { getNormalizedZoom } from "../scene";
@@ -138,7 +137,7 @@ export const actionZoomIn = register({
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
-      appState: constrainScrollState({
+      appState: {
         ...appState,
         ...getStateForZoom(
           {
@@ -149,7 +148,7 @@ export const actionZoomIn = register({
           appState,
         ),
         userToFollow: null,
-      }),
+      },
       captureUpdate: CaptureUpdateAction.EVENTUALLY,
     };
   },
@@ -179,7 +178,7 @@ export const actionZoomOut = register({
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
-      appState: constrainScrollState({
+      appState: {
         ...appState,
         ...getStateForZoom(
           {
@@ -190,7 +189,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,
@@ -242,7 +242,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

@@ -391,11 +391,6 @@ import { isMaybeMermaidDefinition } from "../mermaid";
 
 import { LassoTrail } from "../lasso";
 
-import {
-  constrainScrollState,
-  calculateConstrainedScrollCenter,
-  areCanvasTranslatesClose,
-} from "../scene/scrollConstraints";
 import { EraserTrail } from "../eraser";
 
 import ConvertElementTypePopup, {
@@ -453,8 +448,6 @@ import type {
   FrameNameBoundsCache,
   SidebarName,
   SidebarTabName,
-  ScrollConstraints,
-  AnimateTranslateCanvasValues,
   KeyboardModifiersObject,
   CollaboratorPointer,
   ToolType,
@@ -503,7 +496,6 @@ const ExcalidrawAppStateContext = React.createContext<AppState>({
   height: 0,
   offsetLeft: 0,
   offsetTop: 0,
-  scrollConstraints: null,
 });
 ExcalidrawAppStateContext.displayName = "ExcalidrawAppStateContext";
 
@@ -541,8 +533,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
@@ -671,9 +661,7 @@ class App extends React.Component<AppProps, AppState> {
       objectsSnapModeEnabled = false,
       theme = defaultAppState.theme,
       name = `${t("labels.untitled")}-${getDateTime()}`,
-      scrollConstraints,
     } = props;
-
     this.state = {
       ...defaultAppState,
       theme,
@@ -686,7 +674,6 @@ class App extends React.Component<AppProps, AppState> {
       name,
       width: window.innerWidth,
       height: window.innerHeight,
-      scrollConstraints: scrollConstraints ?? null,
     };
 
     this.id = nanoid();
@@ -736,7 +723,6 @@ class App extends React.Component<AppProps, AppState> {
         resetCursor: this.resetCursor,
         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),
@@ -2372,12 +2358,7 @@ class App extends React.Component<AppProps, AppState> {
       isLoading: false,
       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, {
@@ -2386,7 +2367,6 @@ class App extends React.Component<AppProps, AppState> {
           height: this.state.height,
           offsetTop: this.state.offsetTop,
           offsetLeft: this.state.offsetLeft,
-          scrollConstraints: this.state.scrollConstraints,
         }),
       };
     }
@@ -2610,11 +2590,7 @@ class App extends React.Component<AppProps, AppState> {
     if (!supportsResizeObserver) {
       this.refreshEditorBreakpoints();
     }
-    if (this.state.scrollConstraints) {
-      this.setState((state) => constrainScrollState(state));
-    } else {
-      this.setState({});
-    }
+    this.setState({});
   });
 
   /** generally invoked only if fullscreen was invoked programmatically */
@@ -2923,33 +2899,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 = ({
@@ -3682,8 +3631,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,
@@ -3691,7 +3640,7 @@ class App extends React.Component<AppProps, AppState> {
         },
         this.state,
       ),
-    );
+    });
   };
 
   private cancelInProgressAnimation: (() => void) | null = null;
@@ -3791,18 +3740,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 });
         },
@@ -3812,7 +3775,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 });
     }
@@ -3826,158 +3795,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 = (
@@ -5020,22 +4842,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,
         ),
-      );
+      }));
     }
   });
 
@@ -11337,51 +11153,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

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

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

packages/excalidraw/data/filesystem.ts

@@ -4,7 +4,13 @@ import {
   supported as nativeFileSystemSupported,
 } from "browser-fs-access";
 
-import { EVENT, MIME_TYPES, debounce } from "@excalidraw/common";
+import {
+  EVENT,
+  MIME_TYPES,
+  debounce,
+  isIOS,
+  isAndroid,
+} from "@excalidraw/common";
 
 import { AbortError } from "../errors";
 
@@ -13,6 +19,8 @@ import type { FileSystemHandle } from "browser-fs-access";
 type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">;
 
 const INPUT_CHANGE_INTERVAL_MS = 500;
+// increase timeout for mobile devices to give more time for file selection
+const MOBILE_INPUT_CHANGE_INTERVAL_MS = 2000;
 
 export const fileOpen = <M extends boolean | undefined = false>(opts: {
   extensions?: FILE_EXTENSION[];
@@ -41,13 +49,22 @@ export const fileOpen = <M extends boolean | undefined = false>(opts: {
     mimeTypes,
     multiple: opts.multiple ?? false,
     legacySetup: (resolve, reject, input) => {
-      const scheduleRejection = debounce(reject, INPUT_CHANGE_INTERVAL_MS);
+      const isMobile = isIOS || isAndroid;
+      const intervalMs = isMobile
+        ? MOBILE_INPUT_CHANGE_INTERVAL_MS
+        : INPUT_CHANGE_INTERVAL_MS;
+      const scheduleRejection = debounce(reject, intervalMs);
+
       const focusHandler = () => {
         checkForFile();
-        document.addEventListener(EVENT.KEYUP, scheduleRejection);
-        document.addEventListener(EVENT.POINTER_UP, scheduleRejection);
-        scheduleRejection();
+        // on mobile, be less aggressive with rejection
+        if (!isMobile) {
+          document.addEventListener(EVENT.KEYUP, scheduleRejection);
+          document.addEventListener(EVENT.POINTER_UP, scheduleRejection);
+          scheduleRejection();
+        }
       };
+
       const checkForFile = () => {
         // this hack might not work when expecting multiple files
         if (input.files?.length) {
@@ -55,12 +72,15 @@ export const fileOpen = <M extends boolean | undefined = false>(opts: {
           resolve(ret as RetType);
         }
       };
+
       requestAnimationFrame(() => {
         window.addEventListener(EVENT.FOCUS, focusHandler);
       });
+
       const interval = window.setInterval(() => {
         checkForFile();
-      }, INPUT_CHANGE_INTERVAL_MS);
+      }, intervalMs);
+
       return (rejectPromise) => {
         clearInterval(interval);
         scheduleRejection.cancel();
@@ -69,7 +89,9 @@ export const fileOpen = <M extends boolean | undefined = false>(opts: {
         document.removeEventListener(EVENT.POINTER_UP, scheduleRejection);
         if (rejectPromise) {
           // so that something is shown in console if we need to debug this
-          console.warn("Opening the file was canceled (legacy-fs).");
+          console.warn(
+            "Opening the file was canceled (legacy-fs). This may happen on mobile devices.",
+          );
           rejectPromise(new AbortError());
         }
       };

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/index-node.ts

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

packages/excalidraw/index.tsx

@@ -50,7 +50,6 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     onScrollChange,
     onDuplicate,
     children,
-    scrollConstraints,
     validateEmbeddable,
     renderEmbeddable,
     aiEnabled,
@@ -123,7 +122,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           onPointerUpdate={onPointerUpdate}
           renderTopRightUI={renderTopRightUI}
           langCode={langCode}
-          viewModeEnabled={viewModeEnabled ?? !!scrollConstraints}
+          viewModeEnabled={viewModeEnabled}
           zenModeEnabled={zenModeEnabled}
           gridModeEnabled={gridModeEnabled}
           libraryReturnUrl={libraryReturnUrl}
@@ -142,7 +141,6 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           onPointerDown={onPointerDown}
           onPointerUp={onPointerUp}
           onScrollChange={onScrollChange}
-          scrollConstraints={scrollConstraints}
           onDuplicate={onDuplicate}
           validateEmbeddable={validateEmbeddable}
           renderEmbeddable={renderEmbeddable}

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

@@ -141,11 +141,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

@@ -958,7 +958,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -1153,7 +1152,6 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": true,
@@ -1366,7 +1364,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -1696,7 +1693,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2026,7 +2022,6 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": true,
@@ -2239,7 +2234,6 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2479,7 +2473,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2778,7 +2771,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3147,7 +3139,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3639,7 +3630,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3961,7 +3951,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -4285,7 +4274,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -5569,7 +5557,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -6785,7 +6772,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -7720,7 +7706,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -8716,7 +8701,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": true,
@@ -9709,7 +9693,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,

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

@@ -82,7 +82,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
     "id4": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -696,7 +695,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
     "id4": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -1181,7 +1179,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -1544,7 +1541,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -1910,7 +1906,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -2169,7 +2164,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -2612,7 +2606,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -2873,7 +2866,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -3138,7 +3130,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -3431,7 +3422,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -3716,7 +3706,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -3950,7 +3939,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -4206,7 +4194,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -4476,7 +4463,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -4704,7 +4690,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -4932,7 +4917,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -5158,7 +5142,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -5384,7 +5367,6 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -5638,7 +5620,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
     "id1": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -5899,7 +5880,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
     "id8": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -6261,7 +6241,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
     "id1": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -6635,7 +6614,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -6943,7 +6921,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -7247,7 +7224,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -7444,7 +7420,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -7795,7 +7770,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -8149,7 +8123,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,
@@ -8551,7 +8524,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -8837,7 +8809,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -9100,7 +9071,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -9364,7 +9334,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -9598,7 +9567,6 @@ exports[`history > multiplayer undo/redo > should override remotely added groups
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -9891,7 +9859,6 @@ exports[`history > multiplayer undo/redo > should override remotely added points
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -10238,7 +10205,6 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -10465,7 +10431,6 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -10909,7 +10874,6 @@ exports[`history > multiplayer undo/redo > should update history entries after r
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -11168,7 +11132,6 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -11402,7 +11365,6 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -11638,7 +11600,6 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -12903,7 +12864,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on s
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": -50,
   "scrollY": -50,
   "searchMatches": null,
@@ -13144,7 +13104,6 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -13380,7 +13339,6 @@ exports[`history > singleplayer undo/redo > should end up with no history entry
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -13618,7 +13576,6 @@ exports[`history > singleplayer undo/redo > should iterate through the history w
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -13862,7 +13819,6 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -14195,7 +14151,6 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -14361,7 +14316,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -14647,7 +14601,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -15059,7 +15012,6 @@ exports[`history > singleplayer undo/redo > should not override appstate changes
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -15341,7 +15293,6 @@ exports[`history > singleplayer undo/redo > should support appstate name or view
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -15501,7 +15452,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -16203,7 +16153,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -16836,7 +16785,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -17467,7 +17415,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -18185,7 +18132,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -18933,7 +18879,6 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -19412,7 +19357,6 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
     "id1": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -19922,7 +19866,6 @@ exports[`history > singleplayer undo/redo > should support element creation, del
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -20380,7 +20323,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

@@ -85,7 +85,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,
@@ -510,7 +509,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,
@@ -921,7 +919,6 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -1486,7 +1483,6 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -1694,7 +1690,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,
@@ -2077,7 +2072,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,
@@ -2319,7 +2313,6 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2500,7 +2493,6 @@ exports[`regression tests > can drag element that covers another element, while
     "id6": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2822,7 +2814,6 @@ exports[`regression tests > change the properties of a shape > [end of test] app
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3078,7 +3069,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,
@@ -3318,7 +3308,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,
@@ -3553,7 +3542,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,
@@ -3810,7 +3798,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,
@@ -4121,7 +4108,6 @@ exports[`regression tests > deleting last but one element in editing group shoul
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -4559,7 +4545,6 @@ exports[`regression tests > deselects group of selected elements on pointer down
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -4841,7 +4826,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,
@@ -5115,7 +5099,6 @@ exports[`regression tests > deselects selected element on pointer down when poin
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -5322,7 +5305,6 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -5519,7 +5501,6 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -5914,7 +5895,6 @@ exports[`regression tests > drags selected elements from point inside common bou
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -6207,7 +6187,6 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -7053,7 +7032,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,
@@ -7385,7 +7363,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,
@@ -7663,7 +7640,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,
@@ -7897,7 +7873,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,
@@ -8134,7 +8109,6 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -8313,7 +8287,6 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -8492,7 +8465,6 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -8671,7 +8643,6 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -8899,7 +8870,6 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -9125,7 +9095,6 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -9320,7 +9289,6 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -9548,7 +9516,6 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -9727,7 +9694,6 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -9953,7 +9919,6 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -10132,7 +10097,6 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -10327,7 +10291,6 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -10510,7 +10473,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,
@@ -11038,7 +11000,6 @@ exports[`regression tests > noop interaction after undo shouldn't create history
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -11315,7 +11276,6 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": "-6.25000",
   "scrollY": 0,
   "scrolledOutside": false,
@@ -11439,7 +11399,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,
@@ -11639,7 +11598,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,
@@ -11958,7 +11916,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,
@@ -12387,7 +12344,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,
@@ -13024,7 +12980,6 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 60,
   "scrollY": 60,
   "scrolledOutside": false,
@@ -13148,7 +13103,6 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -13779,7 +13733,6 @@ exports[`regression tests > switches from group of selected elements to another
     "id6": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -14116,7 +14069,6 @@ exports[`regression tests > switches selected element on pointer down > [end of
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -14377,7 +14329,6 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 20,
   "scrollY": "-18.53553",
   "scrolledOutside": false,
@@ -14499,7 +14450,6 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -14889,7 +14839,6 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -15014,7 +14963,6 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
   "penMode": false,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,

packages/excalidraw/types.ts

@@ -422,7 +422,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;
@@ -604,7 +603,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[]
@@ -863,7 +861,6 @@ export interface ExcalidrawImperativeAPI {
   onUserFollow: (
     callback: (payload: OnUserFollowedPayload) => void,
   ) => UnsubscribeCallback;
-  setScrollConstraints: InstanceType<typeof App>["setScrollConstraints"];
 }
 
 export type Device = Readonly<{
@@ -899,12 +896,6 @@ export type FrameNameBoundsCache = {
   >;
 };
 
-export type AnimateTranslateCanvasValues = {
-  scrollX: AppState["scrollX"];
-  scrollY: AppState["scrollY"];
-  zoom: AppState["zoom"]["value"];
-};
-
 export type KeyboardModifiersObject = {
   ctrlKey: boolean;
   shiftKey: boolean;
@@ -930,29 +921,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

@@ -53,14 +53,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) => {