prefer props.viewModeEnabled

fix debug
limit zoom
2025-05-12 21:37:41 +02:00 · 2025-05-12 20:27:22 +02:00 · 2025-05-12 21:29:07 +10:00 · 2025-05-12 21:07:21 +10:00 · 2025-05-12 19:09:21 +10:00 · 2025-05-12 16:24:00 +10:00
16 changed files with 1339 additions and 68 deletions
--- a/excalidraw-app/App.tsx
+++ b/excalidraw-app/App.tsx
@ -4,6 +4,7 @@ import {
  TTDDialogTrigger,
  CaptureUpdateAction,
  reconcileElements,
+  getCommonBounds,
 } from "@excalidraw/excalidraw";
 import { trackEvent } from "@excalidraw/excalidraw/analytics";
 import { getDefaultAppState } from "@excalidraw/excalidraw/appState";
@ -57,9 +58,21 @@ 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,
@ -70,8 +83,9 @@ import type {
  BinaryFiles,
  ExcalidrawInitialDataState,
  UIAppState,
+  ScrollConstraints,
 } from "@excalidraw/excalidraw/types";
-import type { ResolutionType } from "@excalidraw/common/utility-types";
+import type { Merge, ResolutionType } from "@excalidraw/common/utility-types";
 import type { ResolvablePromise } from "@excalidraw/common/utils";

 import CustomStats from "./CustomStats";
@ -141,6 +155,274 @@ 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 {
@ -212,10 +494,20 @@ 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 jsonBackendMatch = window.location.hash.match(
-    /^#json=([a-zA-Z0-9_-]+),([a-zA-Z0-9_-]+)$/,
-  );
+  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 externalUrlMatch = window.location.hash.match(/^#url=(.*)$/);

  const localDataState = importFromLocalStorage();
@ -225,7 +517,7 @@ const initializeScene = async (opts: {
  } = await loadScene(null, null, localDataState);

  let roomLinkData = getCollaborationLinkData(window.location.href);
-  const isExternalScene = !!(id || jsonBackendMatch || roomLinkData);
+  const isExternalScene = !!(id || shareableLink || roomLinkData);
  if (isExternalScene) {
    if (
      // don't prompt if scene is empty
@ -235,16 +527,16 @@ const initializeScene = async (opts: {
      // otherwise, prompt whether user wants to override current scene
      (await openConfirmModal(shareableLinkConfirmDialog))
    ) {
-      if (jsonBackendMatch) {
+      if (shareableLink) {
        scene = await loadScene(
-          jsonBackendMatch[1],
-          jsonBackendMatch[2],
+          shareableLink[0],
+          shareableLink[1],
          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
@ -261,7 +553,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);
@ -322,12 +614,12 @@ const initializeScene = async (opts: {
      key: roomLinkData.roomKey,
    };
  } else if (scene) {
-    return isExternalScene && jsonBackendMatch
+    return isExternalScene && shareableLink
      ? {
          scene,
          isExternalScene,
-          id: jsonBackendMatch[1],
-          key: jsonBackendMatch[2],
+          id: shareableLink[0],
+          key: shareableLink[1],
        }
      : { scene, isExternalScene: false };
  }
@ -739,6 +1031,32 @@ 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
@ -864,6 +1182,7 @@ const ExcalidrawWrapper = () => {
            </div>
          );
        }}
+        scrollConstraints={constraints.enabled ? constraints : undefined}
        onLinkOpen={(element, event) => {
          if (element.link && isElementLink(element.link)) {
            event.preventDefault();
@ -871,6 +1190,12 @@ const ExcalidrawWrapper = () => {
          }
        }}
      >
+        {excalidrawAPI && !isTestEnv() && (
+          <ConstraintsSettings
+            excalidrawAPI={excalidrawAPI}
+            initialConstraints={constraints}
+          />
+        )}
        <AppMainMenu
          onCollabDialogOpen={onCollabDialogOpen}
          isCollaborating={isCollaborating}
--- a/packages/excalidraw/actions/actionCanvas.tsx
+++ b/packages/excalidraw/actions/actionCanvas.tsx
@ -39,6 +39,7 @@ import {
  ZoomResetIcon,
 } from "../components/icons";
 import { setCursor } from "../cursor";
+import { constrainScrollState } from "../scene/scrollConstraints";

 import { t } from "../i18n";
 import { getNormalizedZoom } from "../scene";
@ -136,7 +137,7 @@ export const actionZoomIn = register({
  trackEvent: { category: "canvas" },
  perform: (_elements, appState, _, app) => {
    return {
-      appState: {
+      appState: constrainScrollState({
        ...appState,
        ...getStateForZoom(
          {
@ -147,7 +148,7 @@ export const actionZoomIn = register({
          appState,
        ),
        userToFollow: null,
-      },
+      }),
      captureUpdate: CaptureUpdateAction.EVENTUALLY,
    };
  },
@ -177,7 +178,7 @@ export const actionZoomOut = register({
  trackEvent: { category: "canvas" },
  perform: (_elements, appState, _, app) => {
    return {
-      appState: {
+      appState: constrainScrollState({
        ...appState,
        ...getStateForZoom(
          {
@ -188,7 +189,7 @@ export const actionZoomOut = register({
          appState,
        ),
        userToFollow: null,
-      },
+      }),
      captureUpdate: CaptureUpdateAction.EVENTUALLY,
    };
  },
--- a/packages/excalidraw/appState.ts
+++ b/packages/excalidraw/appState.ts
@ -20,7 +20,7 @@ const defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio)

 export const getDefaultAppState = (): Omit<
  AppState,
-  "offsetTop" | "offsetLeft" | "width" | "height"
+  "offsetTop" | "offsetLeft" | "width" | "height" | "scrollConstraints"
 > => {
  return {
    showWelcomeScreen: false,
@ -243,6 +243,7 @@ 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 },
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@ -464,6 +464,12 @@ import { isMaybeMermaidDefinition } from "../mermaid";

 import { LassoTrail } from "../lasso";

+import {
+  constrainScrollState,
+  calculateConstrainedScrollCenter,
+  areCanvasTranslatesClose,
+} from "../scene/scrollConstraints";
+
 import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
 import BraveMeasureTextError from "./BraveMeasureTextError";
 import { ContextMenu, CONTEXT_MENU_SEPARATOR } from "./ContextMenu";
@ -513,6 +519,8 @@ import type {
  FrameNameBoundsCache,
  SidebarName,
  SidebarTabName,
+  ScrollConstraints,
+  AnimateTranslateCanvasValues,
  KeyboardModifiersObject,
  CollaboratorPointer,
  ToolType,
@ -561,6 +569,7 @@ const ExcalidrawAppStateContext = React.createContext<AppState>({
  height: 0,
  offsetLeft: 0,
  offsetTop: 0,
+  scrollConstraints: null,
 });
 ExcalidrawAppStateContext.displayName = "ExcalidrawAppStateContext";

@ -598,6 +607,8 @@ 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
@ -741,7 +752,9 @@ class App extends React.Component<AppProps, AppState> {
      objectsSnapModeEnabled = false,
      theme = defaultAppState.theme,
      name = `${t("labels.untitled")}-${getDateTime()}`,
+      scrollConstraints,
    } = props;
+
    this.state = {
      ...defaultAppState,
      theme,
@ -754,6 +767,7 @@ class App extends React.Component<AppProps, AppState> {
      name,
      width: window.innerWidth,
      height: window.innerHeight,
+      scrollConstraints: scrollConstraints ?? null,
    };

    this.id = nanoid();
@ -800,6 +814,7 @@ 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),
        onPointerDown: (cb) => this.onPointerDownEmitter.on(cb),
        onPointerUp: (cb) => this.onPointerUpEmitter.on(cb),
@ -2393,7 +2408,12 @@ class App extends React.Component<AppProps, AppState> {
      isLoading: false,
      toast: this.state.toast,
    };
-    if (initialData?.scrollToContent) {
+    if (this.props.scrollConstraints) {
+      scene.appState = {
+        ...scene.appState,
+        ...calculateConstrainedScrollCenter(this.state, scene.appState),
+      };
+    } else if (initialData?.scrollToContent) {
      scene.appState = {
        ...scene.appState,
        ...calculateScrollCenter(scene.elements, {
@ -2402,6 +2422,7 @@ class App extends React.Component<AppProps, AppState> {
          height: this.state.height,
          offsetTop: this.state.offsetTop,
          offsetLeft: this.state.offsetLeft,
+          scrollConstraints: this.state.scrollConstraints,
        }),
      };
    }
@ -2615,7 +2636,11 @@ class App extends React.Component<AppProps, AppState> {
    if (!supportsResizeObserver) {
      this.refreshEditorBreakpoints();
    }
-    this.setState({});
+    if (this.state.scrollConstraints) {
+      this.setState((state) => constrainScrollState(state));
+    } else {
+      this.setState({});
+    }
  });

  /** generally invoked only if fullscreen was invoked programmatically */
@ -2947,6 +2972,33 @@ 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 = ({
@ -3693,8 +3745,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,
@ -3702,7 +3754,7 @@ class App extends React.Component<AppProps, AppState> {
        },
        this.state,
      ),
-    });
+    );
  };

  private cancelInProgressAnimation: (() => void) | null = null;
@ -3802,32 +3854,18 @@ 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 origScrollX = this.state.scrollX;
-      const origScrollY = this.state.scrollY;
-      const origZoom = this.state.zoom.value;
+      const fromValues = {
+        scrollX: this.state.scrollX,
+        scrollY: this.state.scrollY,
+        zoom: this.state.zoom.value,
+      };

-      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 },
-          });
-        },
+      const toValues = { scrollX, scrollY, zoom: zoom.value };
+
+      this.animateTranslateCanvas({
+        fromValues,
+        toValues,
+        duration: opts?.duration ?? 500,
        onStart: () => {
          this.setState({ shouldCacheIgnoreZoom: true });
        },
@ -3837,13 +3875,7 @@ 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 });
    }
@ -3857,11 +3889,158 @@ class App extends React.Component<AppProps, AppState> {

  /** use when changing scrollX/scrollY/zoom based on user interaction */
  private translateCanvas: React.Component<any, AppState>["setState"] = (
-    state,
+    stateUpdate,
  ) => {
    this.cancelInProgressAnimation?.();
    this.maybeUnfollowRemoteUser();
-    this.setState(state);
+
+    if (scrollConstraintsAnimationTimeout) {
+      clearTimeout(scrollConstraintsAnimationTimeout);
+    }
+
+    const partialNewState =
+      typeof stateUpdate === "function"
+        ? (
+            stateUpdate as (
+              prevState: Readonly<AppState>,
+              props: Readonly<AppProps>,
+            ) => AppState
+          )(this.state, this.props)
+        : stateUpdate;
+
+    const newState: AppState = {
+      ...this.state,
+      ...partialNewState,
+      ...(this.state.scrollConstraints && {
+        // manually reset if setState in onCancel wasn't committed yet
+        shouldCacheIgnoreZoom: false,
+      }),
+    };
+
+    // RULE: cannot go below the minimum zoom level if zoom lock is enabled
+    const constrainedState =
+      newState.scrollConstraints && newState.scrollConstraints.lockZoom
+        ? constrainScrollState(newState, "elastic")
+        : newState;
+    if (constrainedState.zoom.value > newState.zoom.value) {
+      newState.zoom = constrainedState.zoom;
+      newState.scrollX = constrainedState.scrollX;
+      newState.scrollY = constrainedState.scrollY;
+
+      this.debounceConstrainScrollState(newState);
+      return;
+    }
+
+    this.setState(newState);
+    if (this.state.scrollConstraints) {
+      // 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;
+    };
  };

  setToast = (
@ -4891,16 +5070,22 @@ class App extends React.Component<AppProps, AppState> {

    const initialScale = gesture.initialScale;
    if (initialScale) {
-      this.setState((state) => ({
-        ...getStateForZoom(
+      this.setState((state) =>
+        constrainScrollState(
          {
-            viewportX: this.lastViewportPosition.x,
-            viewportY: this.lastViewportPosition.y,
-            nextZoom: getNormalizedZoom(initialScale * event.scale),
+            ...state,
+            ...getStateForZoom(
+              {
+                viewportX: this.lastViewportPosition.x,
+                viewportY: this.lastViewportPosition.y,
+                nextZoom: getNormalizedZoom(initialScale * event.scale),
+              },
+              state,
+            ),
          },
-          state,
+          "loose",
        ),
-      }));
+      );
    }
  });

@ -11189,6 +11374,51 @@ 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,
+      });
+    }
+  };
 }

 // -----------------------------------------------------------------------------
--- a/packages/excalidraw/components/LayerUI.tsx
+++ b/packages/excalidraw/components/LayerUI.tsx
@ -553,7 +553,7 @@ const LayerUI = ({
              showExitZenModeBtn={showExitZenModeBtn}
              renderWelcomeScreen={renderWelcomeScreen}
            />
-            {appState.scrolledOutside && (
+            {appState.scrolledOutside && !appState.scrollConstraints && (
              <button
                type="button"
                className="scroll-back-to-content"
--- a/packages/excalidraw/components/MobileMenu.tsx
+++ b/packages/excalidraw/components/MobileMenu.tsx
@ -195,7 +195,8 @@ export const MobileMenu = ({
            {renderAppToolbar()}
            {appState.scrolledOutside &&
              !appState.openMenu &&
-              !appState.openSidebar && (
+              !appState.openSidebar &&
+              !appState.scrollConstraints && (
                <button
                  type="button"
                  className="scroll-back-to-content"
--- a/packages/excalidraw/data/restore.ts
+++ b/packages/excalidraw/data/restore.ts
@ -78,7 +78,7 @@ import type { ImportedDataState, LegacyAppState } from "./types";

 type RestoredAppState = Omit<
  AppState,
-  "offsetTop" | "offsetLeft" | "width" | "height"
+  "offsetTop" | "offsetLeft" | "width" | "height" | "scrollConstraints"
 >;

 export const AllowedExcalidrawActiveTools: Record<
--- a/packages/excalidraw/index-node.ts
+++ b/packages/excalidraw/index-node.ts
@ -67,6 +67,7 @@ const canvas = exportToCanvas(
    offsetLeft: 0,
    width: 0,
    height: 0,
+    scrollConstraints: null,
  },
  {}, // files
  {
--- a/packages/excalidraw/index.tsx
+++ b/packages/excalidraw/index.tsx
@ -49,6 +49,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
    onScrollChange,
    onDuplicate,
    children,
+    scrollConstraints,
    validateEmbeddable,
    renderEmbeddable,
    aiEnabled,
@ -119,7 +120,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
          onPointerUpdate={onPointerUpdate}
          renderTopRightUI={renderTopRightUI}
          langCode={langCode}
-          viewModeEnabled={viewModeEnabled}
+          viewModeEnabled={viewModeEnabled ?? !!scrollConstraints}
          zenModeEnabled={zenModeEnabled}
          gridModeEnabled={gridModeEnabled}
          libraryReturnUrl={libraryReturnUrl}
@ -138,6 +139,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
          onPointerDown={onPointerDown}
          onPointerUp={onPointerUp}
          onScrollChange={onScrollChange}
+          scrollConstraints={scrollConstraints}
          onDuplicate={onDuplicate}
          validateEmbeddable={validateEmbeddable}
          renderEmbeddable={renderEmbeddable}
--- a/packages/excalidraw/scene/scrollConstraints.ts
+++ b/packages/excalidraw/scene/scrollConstraints.ts
@ -0,0 +1,552 @@
+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
+  );
+};
--- a/packages/excalidraw/scene/types.ts
+++ b/packages/excalidraw/scene/types.ts
@ -139,6 +139,11 @@ export type ScrollBars = {
  } | null;
 };

+export type ConstrainedScrollValues = Pick<
+  AppState,
+  "scrollX" | "scrollY" | "zoom"
+> | null;
+
 export type ElementShape = Drawable | Drawable[] | null;

 export type ElementShapes = {
--- a/packages/excalidraw/tests/snapshots/contextmenu.test.tsx.snap
+++ b/packages/excalidraw/tests/snapshots/contextmenu.test.tsx.snap
@ -958,6 +958,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -1165,6 +1166,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -1385,6 +1387,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -1720,6 +1723,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -2055,6 +2059,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -2275,6 +2280,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -2519,6 +2525,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -2826,6 +2833,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
    "id1": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -3197,6 +3205,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -3676,6 +3685,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -4003,6 +4013,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -4332,6 +4343,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
    "id1": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -5613,6 +5625,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
    "id0": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -6835,6 +6848,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
    "id0": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -7771,6 +7785,7 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -8775,6 +8790,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -9767,6 +9783,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
--- a/packages/excalidraw/tests/snapshots/history.test.tsx.snap
+++ b/packages/excalidraw/tests/snapshots/history.test.tsx.snap
@ -82,6 +82,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
    "id172": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -682,6 +683,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
    "id167": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -1191,6 +1193,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -1563,6 +1566,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -1936,6 +1940,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -2204,6 +2209,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -2647,6 +2653,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -2950,6 +2957,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -3238,6 +3246,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -3536,6 +3545,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -3826,6 +3836,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -4065,6 +4076,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -4328,6 +4340,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -4605,6 +4618,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -4840,6 +4854,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -5075,6 +5090,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -5308,6 +5324,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -5541,6 +5558,7 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -5803,6 +5821,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
    "id116": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -6138,6 +6157,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
    "id103": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -6567,6 +6587,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
    "id106": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -6950,6 +6971,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -7270,6 +7292,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -7572,6 +7595,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -7805,6 +7829,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -8164,6 +8189,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -8526,6 +8552,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
    "id134": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -8931,6 +8958,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -9222,6 +9250,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -9491,6 +9520,7 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -9759,6 +9789,7 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -9997,6 +10028,7 @@ exports[`history > multiplayer undo/redo > should override remotely added groups
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -10299,6 +10331,7 @@ exports[`history > multiplayer undo/redo > should override remotely added points
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -10643,6 +10676,7 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -10885,6 +10919,7 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -11335,6 +11370,7 @@ exports[`history > multiplayer undo/redo > should update history entries after r
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -11593,6 +11629,7 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -11836,6 +11873,7 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -12081,6 +12119,7 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -12489,6 +12528,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on s
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": -50,
  "scrollY": -50,
  "searchMatches": [],
@ -12737,6 +12777,7 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -12982,6 +13023,7 @@ exports[`history > singleplayer undo/redo > should end up with no history entry
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -13229,6 +13271,7 @@ exports[`history > singleplayer undo/redo > should iterate through the history w
    "id15": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -13478,6 +13521,7 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -13817,6 +13861,7 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -13990,6 +14035,7 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -14285,6 +14331,7 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -14555,6 +14602,7 @@ exports[`history > singleplayer undo/redo > should not override appstate changes
    "id11": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -14835,6 +14883,7 @@ exports[`history > singleplayer undo/redo > should support appstate name or view
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -14999,6 +15048,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
    "id56": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -15697,6 +15747,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
    "id50": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -16317,6 +16368,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
    "id62": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -16935,6 +16987,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -17648,6 +17701,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
    "id75": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -18396,6 +18450,7 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
    "id45": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -18874,6 +18929,7 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
    "id36": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -19400,6 +19456,7 @@ exports[`history > singleplayer undo/redo > should support element creation, del
    "id23": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
@ -19860,6 +19917,7 @@ exports[`history > singleplayer undo/redo > should support linear element creati
    "id27": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "searchMatches": [],
--- a/packages/excalidraw/tests/snapshots/regressionTests.test.tsx.snap
+++ b/packages/excalidraw/tests/snapshots/regressionTests.test.tsx.snap
@ -85,6 +85,7 @@ exports[`given element A and group of elements B and given both are selected whe
    "id2": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -501,6 +502,7 @@ exports[`given element A and group of elements B and given both are selected whe
    "id2": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -904,6 +906,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -1450,6 +1453,7 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -1657,6 +1661,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
    "id0": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -2033,6 +2038,7 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
    "id0": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -2270,6 +2276,7 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -2453,6 +2460,7 @@ exports[`regression tests > can drag element that covers another element, while
    "id2": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -2772,6 +2780,7 @@ exports[`regression tests > change the properties of a shape > [end of test] app
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -3021,6 +3030,7 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
    "id0": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -3265,6 +3275,7 @@ 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,
@ -3496,6 +3507,7 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
    "id1": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -3753,6 +3765,7 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
    "id2": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -4063,6 +4076,7 @@ exports[`regression tests > deleting last but one element in editing group shoul
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -4489,6 +4503,7 @@ exports[`regression tests > deselects group of selected elements on pointer down
    "id1": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -4773,6 +4788,7 @@ exports[`regression tests > deselects group of selected elements on pointer up w
    "id1": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -5026,6 +5042,7 @@ exports[`regression tests > deselects selected element on pointer down when poin
    "id0": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -5237,6 +5254,7 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
    "id0": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -5435,6 +5453,7 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -5821,6 +5840,7 @@ exports[`regression tests > drags selected elements from point inside common bou
    "id1": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -6109,6 +6129,7 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -6921,6 +6942,7 @@ exports[`regression tests > given a group of selected elements with an element t
    "id2": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -7251,6 +7273,7 @@ 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,
@ -7528,6 +7551,7 @@ 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,
@ -7763,6 +7787,7 @@ 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,
@ -7999,6 +8024,7 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -8180,6 +8206,7 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -8361,6 +8388,7 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -8542,6 +8570,7 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -8766,6 +8795,7 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -8989,6 +9019,7 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -9184,6 +9215,7 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -9408,6 +9440,7 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -9589,6 +9622,7 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -9812,6 +9846,7 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -9993,6 +10028,7 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -10188,6 +10224,7 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -10373,6 +10410,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
    "id2": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -10880,6 +10918,7 @@ exports[`regression tests > noop interaction after undo shouldn't create history
    "id0": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -11156,6 +11195,7 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": "-6.25000",
  "scrollY": 0,
  "scrolledOutside": false,
@ -11285,6 +11325,7 @@ exports[`regression tests > shift click on selected element should deselect it o
    "id0": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -11486,6 +11527,7 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
    "id1": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -11799,6 +11841,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
    "id2": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -12213,6 +12256,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
    "id6": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -12825,6 +12869,7 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 60,
  "scrollY": 60,
  "scrolledOutside": false,
@ -12954,6 +12999,7 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
    "id0": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -13540,6 +13586,7 @@ exports[`regression tests > switches from group of selected elements to another
    "id2": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -13878,6 +13925,7 @@ exports[`regression tests > switches selected element on pointer down > [end of
    "id1": true,
  },
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -14142,6 +14190,7 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 20,
  "scrollY": "-18.53553",
  "scrolledOutside": false,
@ -14269,6 +14318,7 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -14649,6 +14699,7 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
@ -14779,6 +14830,7 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
  "pendingImageElementId": null,
  "previousSelectedElementIds": {},
  "resizingElement": null,
+  "scrollConstraints": null,
  "scrollX": 0,
  "scrollY": 0,
  "scrolledOutside": false,
--- a/packages/excalidraw/types.ts
+++ b/packages/excalidraw/types.ts
@ -422,6 +422,7 @@ 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;
@ -589,6 +590,7 @@ export interface ExcalidrawProps {
  onScrollChange?: (scrollX: number, scrollY: number, zoom: Zoom) => void;
  onUserFollow?: (payload: OnUserFollowedPayload) => void;
  children?: React.ReactNode;
+  scrollConstraints?: AppState["scrollConstraints"];
  validateEmbeddable?:
    | boolean
    | string[]
@ -834,6 +836,7 @@ export interface ExcalidrawImperativeAPI {
  onUserFollow: (
    callback: (payload: OnUserFollowedPayload) => void,
  ) => UnsubscribeCallback;
+  setScrollConstraints: InstanceType<typeof App>["setScrollConstraints"];
 }

 export type Device = Readonly<{
@ -869,6 +872,12 @@ export type FrameNameBoundsCache = {
  >;
 };

+export type AnimateTranslateCanvasValues = {
+  scrollX: AppState["scrollX"];
+  scrollY: AppState["scrollY"];
+  zoom: AppState["zoom"]["value"];
+};
+
 export type KeyboardModifiersObject = {
  ctrlKey: boolean;
  shiftKey: boolean;
@ -894,6 +903,16 @@ export type EmbedsValidationStatus = Map<

 export type ElementsPendingErasure = Set<ExcalidrawElement["id"]>;

+export type ScrollConstraints = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  animateOnNextUpdate?: boolean;
+  viewportZoomFactor?: number;
+  lockZoom?: boolean;
+  overscrollAllowance?: number;
+};
 export type PendingExcalidrawElements = ExcalidrawElement[];

 /** Runtime gridSize value. Null indicates disabled grid. */
--- a/packages/utils/src/export.ts
+++ b/packages/utils/src/export.ts
@ -53,7 +53,14 @@ export const exportToCanvas = ({
  const { exportBackground, viewBackgroundColor } = restoredAppState;
  return _exportToCanvas(
    restoredElements,
-    { ...restoredAppState, offsetTop: 0, offsetLeft: 0, width: 0, height: 0 },
+    {
+      ...restoredAppState,
+      offsetTop: 0,
+      offsetLeft: 0,
+      width: 0,
+      height: 0,
+      scrollConstraints: null,
+    },
    files || {},
    { exportBackground, exportPadding, viewBackgroundColor, exportingFrame },
    (width: number, height: number) => {
Author	SHA1	Message	Date
dwelle	f6ced89c3c	prefer `props.viewModeEnabled`	2025-05-12 21:37:41 +02:00
dwelle	6eb0596638	fix debug	2025-05-12 20:27:22 +02:00
Ryan Di	0607003903	limit zoom	2025-05-12 21:29:07 +10:00
Ryan Di	4e2026e47d	tweak debounce timeout	2025-05-12 21:07:21 +10:00
Ryan Di	67260915cb	improve zoom in/out animation	2025-05-12 19:09:21 +10:00
Ryan Di	c84fad4436	experiment with zooming	2025-05-12 16:24:00 +10:00
Ryan Di	2e9c8851b3	simplify code	2025-05-12 16:23:35 +10:00
Ryan Di	19608b712f	improve debug	2025-05-12 16:23:18 +10:00
Ryan Di	3a566a292c	rename and restrict constraint mode	2025-05-09 18:46:54 +10:00
Ryan Di	62c800c21a	refactor code	2025-05-09 18:07:58 +10:00
Ryan Di	f9723e2d19	do not include constraints in tests	2025-05-09 16:40:35 +10:00
Ryan Di	ffbd4a5dc8	lint	2025-05-09 16:21:02 +10:00
Ryan Di	5dded6112c	rename func	2025-05-09 15:44:39 +10:00
Ryan Di	84c396aec2	fix jumping/flashing when zooming in or out too quickly	2025-05-09 13:00:56 +10:00
Ryan Di	bc6cc83b1e	update encoding & decoding	2025-05-08 15:58:39 +10:00
Ryan Di	baa7b3293a	bringing back scroll constraints debug	2025-05-08 12:21:42 +10:00
Ryan Di	4208c97b62	configurable allowance	2025-05-02 17:52:14 +10:00
Ryan Di	2d0c0afa34	encode and decode constraints	2025-05-02 17:32:44 +10:00
Ryan Di	df26487936	call api to update when debug inputs change	2025-04-14 17:22:23 +10:00
Ryan Di	782772cec5	fix debug inputs	2025-04-14 17:16:15 +10:00
Ryan Di	39f79927ae	merge with master	2025-04-14 16:18:11 +10:00
Arnošt Pleskot	1316d884fe	feat: update constraints on window resize	2024-02-09 21:18:05 +01:00
Arnošt Pleskot	d6710ded04	feat: disable animations during zooms out of translate canvas	2024-02-09 20:57:18 +01:00
Arnošt Pleskot	78d2a6ecc0	feat: add constraints on canvas actions	2024-02-09 20:09:00 +01:00
Arnošt Pleskot	213134bbca	fix: disable overscroll on pinch-to-zoom	2024-02-09 16:17:58 +01:00
Arnošt Pleskot	b5bf346229	fix: prevent jumping when trying to zoom out the zoomFactor	2024-02-09 16:10:58 +01:00
Arnošt Pleskot	4c62eef7da	fix: add scroll constraints to pinch-to-zoom in safari	2024-02-09 15:47:18 +01:00
Arnošt Pleskot	82aa1cf19d	fix: fixed detecting viewport outside of constraints	2024-02-09 15:31:51 +01:00
Arnošt Pleskot	9bc874a61e	fix: adjust the scroll constraints to align with inverted scrollX/Y	2024-02-08 18:40:42 +01:00
dwelle	d5f55aba44	[debug] 2	2024-02-07 17:09:49 +01:00
dwelle	72de65e482	Merge branch 'master' into arnost/scroll-in-read-only-links	2024-02-07 16:07:57 +01:00
dwelle	0f99e823f4	Merge branch 'master' into arnost/scroll-in-read-only-links # Conflicts: # packages/excalidraw/appState.ts # packages/excalidraw/components/App.tsx # packages/excalidraw/element/textWysiwyg.test.tsx # packages/excalidraw/scene/scrollConstraints.ts # packages/excalidraw/scene/types.ts # packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap # packages/excalidraw/tests/__snapshots__/dragCreate.test.tsx.snap # packages/excalidraw/tests/__snapshots__/move.test.tsx.snap # packages/excalidraw/tests/__snapshots__/multiPointCreate.test.tsx.snap # packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap # packages/excalidraw/tests/__snapshots__/selection.test.tsx.snap # packages/excalidraw/tests/linearElementEditor.test.tsx # packages/excalidraw/types.ts # packages/utils/export.ts	2024-01-15 10:37:52 +01:00
Arnošt Pleskot	3ec09988fa	Merge branch 'master' of github.com:excalidraw/excalidraw into arnost/scroll-in-read-only-links	2023-09-20 15:38:30 +02:00
Arnošt Pleskot	b40fd65404	feat: fix overscroll animation trigger when zoomed in	2023-09-18 15:00:52 +02:00
Arnošt Pleskot	266069ae05	test: update snapshots	2023-09-14 23:26:16 +02:00
Arnošt Pleskot	c33fb846ab	chore: cleanup	2023-09-14 23:15:57 +02:00
Arnošt Pleskot	94e9b20951	fix: prevent jitter animation on pinch to zoom and on scroll event	2023-09-14 12:07:30 +02:00
Arnošt Pleskot	186ed43671	feat: animate to constrained area on setting constrains	2023-09-13 16:41:10 +02:00
Arnošt Pleskot	d1e3ea431b	chore: renaming	2023-09-13 16:40:39 +02:00
Arnošt Pleskot	ddb08ce732	feat: use single function for animating canvas translation	2023-09-13 16:20:12 +02:00
Arnošt Pleskot	edf54d1543	fix: scale constrained area based on zoom	2023-09-13 15:58:38 +02:00
Arnošt Pleskot	b4e80b602d	feat: add memoization	2023-09-13 15:57:50 +02:00
Arnošt Pleskot	dd9bde5ee7	feat: animation depending on timeout	2023-09-13 14:54:39 +02:00
Arnošt Pleskot	b99bf74c3d	feat: hide scroll back to content button	2023-09-12 12:23:13 +02:00
Arnošt Pleskot	84b19a77d7	feat: make constrained scroll working with split canvases	2023-09-11 17:07:07 +02:00
Arnošt Pleskot	53a88d4c7a	Merge branch 'master' of github.com:excalidraw/excalidraw into arnost/scroll-in-read-only-links	2023-09-07 13:52:29 +02:00
Arnošt Pleskot	10900f39ee	fix: allow to scroll on one axis when other is fully in view	2023-09-05 17:32:51 +02:00
Arnošt Pleskot	ebbd72e792	feat: use single overscrollAllowance for both axis	2023-09-04 11:55:14 +02:00
Arnošt Pleskot	f8ba862774	feat: set initial zoom to viewportZoomFactor when lockZoom is false	2023-09-03 23:47:48 +02:00
Arnošt Pleskot	806b1e9705	fix: prevent viewport jumping when panning by mouse wheel	2023-09-03 16:54:04 +02:00
dwelle	b0cdd00c2a	[debug]	2023-08-02 17:54:04 +02:00
dwelle	6711735b27	Merge branch 'master' into arnost/scroll-in-read-only-links	2023-08-02 17:53:30 +02:00
dwelle	803e14ada1	Revert "[debug]" This reverts commit 71eb3023b2fd267db44fc5d11c4fb6814b4206a6.	2023-08-02 17:41:32 +02:00
Arnošt Pleskot	4469c02191	chore: move this.scene.getElementsIncludingDeleted() result into const	2023-08-01 16:52:59 +02:00
Arnošt Pleskot	04e23e1d29	fix: do not animate empty scene	2023-08-01 16:30:45 +02:00
Arnošt Pleskot	d24a032dbb	feat: set scroll constraints on initial scene state	2023-07-31 18:33:39 +02:00
Arnošt Pleskot	76d3930983	fix: typo	2023-07-31 09:50:47 +02:00
Arnost Pleskot	af6e64ffc2	Merge branch 'master' into arnost/scroll-in-read-only-links	2023-07-31 09:26:14 +02:00
Arnošt Pleskot	4e9039e850	feat: simplify memoization logic	2023-07-15 12:44:34 +02:00
Arnošt Pleskot	132750f753	feat: splitting logic, memoization	2023-07-15 12:44:33 +02:00
Arnošt Pleskot	71eb3023b2	[debug]	2023-07-15 12:44:32 +02:00
Arnošt Pleskot	6d165971fc	feat: set view mode when constrains set via props	2023-07-15 12:44:31 +02:00
Arnošt Pleskot	9562e4309f	feat: add zoom lock and viewportZoomFactor	2023-07-15 12:44:30 +02:00
Arnošt Pleskot	e8e391e465	refactor: split constrainScroll into smaller functions	2023-07-15 12:44:29 +02:00
Arnošt Pleskot	92be92071a	feat: disable animation on zooming	2023-07-15 12:44:28 +02:00
Arnošt Pleskot	71918e57a8	feat: cleanup	2023-07-15 12:44:27 +02:00
Arnošt Pleskot	c0bd9027cb	feat: animate the scroll to constrained area	2023-07-15 12:44:26 +02:00
Arnošt Pleskot	7336b1c276	test: update snapshot	2023-07-15 12:44:25 +02:00
Arnošt Pleskot	7fb6c23715	fix: remove forgotten console.log	2023-07-15 12:44:24 +02:00
Arnošt Pleskot	82014fe670	chore: comments and variable renaming	2023-07-15 12:44:23 +02:00
Arnošt Pleskot	bc44c3f947	feat: add overscroll when constrained area is smaller than viewport	2023-07-15 12:44:21 +02:00
Arnošt Pleskot	19ba107041	feat: pass scrollConstraints via props	2023-07-15 12:44:18 +02:00
Arnošt Pleskot	381ef93956	feat: remove zoom limit	2023-07-15 12:42:46 +02:00
Arnošt Pleskot	f82363aae9	feat: enforce constrains on setting constrains	2023-07-15 12:42:45 +02:00
Arnošt Pleskot	485c57fd59	chore: remove console.log	2023-07-15 12:42:44 +02:00
Arnošt Pleskot	35b43c14d8	feat: allow scroll over constraints while mouse down	2023-07-15 12:42:43 +02:00
Arnošt Pleskot	f7e8056abe	feat: update constraints on window resize	2023-07-15 12:42:42 +02:00
Arnošt Pleskot	71f7960606	test: fix test snapshots	2023-07-15 12:42:41 +02:00
Arnošt Pleskot	2998573e79	feat: limit scroll in componentDidUpdate	2023-07-15 12:42:40 +02:00
Arnošt Pleskot	209934c90a	feat: center constrained area on zoom out	2023-07-15 12:42:39 +02:00
Arnošt Pleskot	a8158691b7	feat: limit zoom by translateCanvas	2023-07-15 12:42:38 +02:00
Arnošt Pleskot	75f8e904cc	feat: add possibility to limit scroll area	2023-07-15 12:42:37 +02:00