fix: Alt-duplication doesn't place the duplicate at the last moment where Alt is pressed

fix: Shift + Alt

fix: Test

chore: Revert to master

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

fix: Arrow re-draw

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

excalidraw-app/App.tsx

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

packages/common/src/utils.ts

@@ -20,6 +20,7 @@ import {
   ENV,
   FONT_FAMILY,
   getFontFamilyFallbacks,
+  isDarwin,
   isAndroid,
   isIOS,
   WINDOWS_EMOJI_FALLBACK_FONT,
@@ -425,6 +426,19 @@ export const allowFullScreen = () =>
 
 export const exitFullScreen = () => document.exitFullscreen();
 
+export const getShortcutKey = (shortcut: string): string => {
+  shortcut = shortcut
+    .replace(/\bAlt\b/i, "Alt")
+    .replace(/\bShift\b/i, "Shift")
+    .replace(/\b(Enter|Return)\b/i, "Enter");
+  if (isDarwin) {
+    return shortcut
+      .replace(/\bCtrlOrCmd\b/gi, "Cmd")
+      .replace(/\bAlt\b/i, "Option");
+  }
+  return shortcut.replace(/\bCtrlOrCmd\b/gi, "Ctrl");
+};
+
 export const viewportCoordsToSceneCoords = (
   { clientX, clientY }: { clientX: number; clientY: number },
   {

packages/element/src/transformHandles.ts

@@ -2,7 +2,6 @@ import {
   DEFAULT_TRANSFORM_HANDLE_SPACING,
   isAndroid,
   isIOS,
-  isMobileOrTablet,
 } from "@excalidraw/common";
 
 import { pointFrom, pointRotateRads } from "@excalidraw/math";
@@ -327,7 +326,7 @@ export const getTransformHandles = (
   );
 };
 
-export const hasBoundingBox = (
+export const shouldShowBoundingBox = (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: InteractiveCanvasAppState,
 ) => {
@@ -346,7 +345,5 @@ export const hasBoundingBox = (
     return true;
   }
 
-  // on mobile/tablet we currently don't show bbox because of resize issues
-  // (also prob best for simplicity's sake)
-  return element.points.length > 2 && !isMobileOrTablet();
+  return element.points.length > 2;
 };

packages/element/tests/binding.test.tsx

@@ -10,8 +10,6 @@ import { API } from "@excalidraw/excalidraw/tests/helpers/api";
 import { UI, Pointer, Keyboard } from "@excalidraw/excalidraw/tests/helpers/ui";
 import { fireEvent, render } from "@excalidraw/excalidraw/tests/test-utils";
 
-import { LinearElementEditor } from "@excalidraw/element";
-
 import { getTransformHandles } from "../src/transformHandles";
 import {
   getTextEditor,
@@ -415,12 +413,16 @@ describe("element binding", () => {
     expect(arrow.endBinding?.elementId).toBe(rectRight.id);
 
     // Drag arrow off of bound rectangle range
-    const [elX, elY] = LinearElementEditor.getPointAtIndexGlobalCoordinates(
+    const handles = getTransformHandles(
       arrow,
-      -1,
-      h.scene.getNonDeletedElementsMap(),
-    );
+      h.state.zoom,
+      arrayToMap(h.elements),
+      "mouse",
+    ).se!;
+
     Keyboard.keyDown(KEYS.CTRL_OR_CMD);
+    const elX = handles[0] + handles[2] / 2;
+    const elY = handles[1] + handles[3] / 2;
     mouse.downAt(elX, elY);
     mouse.moveTo(300, 400);
     mouse.up();

packages/excalidraw/actions/actionAlign.tsx

@@ -4,7 +4,7 @@ import { isFrameLikeElement } from "@excalidraw/element";
 
 import { updateFrameMembershipOfSelectedElements } from "@excalidraw/element";
 
-import { KEYS, arrayToMap } from "@excalidraw/common";
+import { KEYS, arrayToMap, getShortcutKey } from "@excalidraw/common";
 
 import { alignElements } from "@excalidraw/element";
 
@@ -30,8 +30,6 @@ import { t } from "../i18n";
 
 import { isSomeElementSelected } from "../scene";
 
-import { getShortcutKey } from "../shortcut";
-
 import { register } from "./register";
 
 import type { AppClassProperties, AppState, UIAppState } from "../types";

packages/excalidraw/actions/actionCanvas.tsx

@@ -7,6 +7,7 @@ import {
   MIN_ZOOM,
   THEME,
   ZOOM_STEP,
+  getShortcutKey,
   updateActiveTool,
   CODES,
   KEYS,
@@ -40,13 +41,11 @@ import {
   ZoomResetIcon,
 } from "../components/icons";
 import { setCursor } from "../cursor";
-import { constrainScrollState } from "../scene/scrollConstraints";
 
 import { t } from "../i18n";
 import { getNormalizedZoom } from "../scene";
 import { centerScrollOn } from "../scene/scroll";
 import { getStateForZoom } from "../scene/zoom";
-import { getShortcutKey } from "../shortcut";
 
 import { register } from "./register";
 
@@ -142,7 +141,7 @@ export const actionZoomIn = register({
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
-      appState: constrainScrollState({
+      appState: {
         ...appState,
         ...getStateForZoom(
           {
@@ -153,7 +152,7 @@ export const actionZoomIn = register({
           appState,
         ),
         userToFollow: null,
-      }),
+      },
       captureUpdate: CaptureUpdateAction.EVENTUALLY,
     };
   },
@@ -183,7 +182,7 @@ export const actionZoomOut = register({
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
-      appState: constrainScrollState({
+      appState: {
         ...appState,
         ...getStateForZoom(
           {
@@ -194,7 +193,7 @@ export const actionZoomOut = register({
           appState,
         ),
         userToFollow: null,
-      }),
+      },
       captureUpdate: CaptureUpdateAction.EVENTUALLY,
     };
   },

packages/excalidraw/actions/actionDistribute.tsx

@@ -2,7 +2,7 @@ import { getNonDeletedElements } from "@excalidraw/element";
 
 import { isFrameLikeElement } from "@excalidraw/element";
 
-import { CODES, KEYS, arrayToMap } from "@excalidraw/common";
+import { CODES, KEYS, arrayToMap, getShortcutKey } from "@excalidraw/common";
 
 import { updateFrameMembershipOfSelectedElements } from "@excalidraw/element";
 
@@ -26,8 +26,6 @@ import { t } from "../i18n";
 
 import { isSomeElementSelected } from "../scene";
 
-import { getShortcutKey } from "../shortcut";
-
 import { register } from "./register";
 
 import type { AppClassProperties, AppState } from "../types";

packages/excalidraw/actions/actionDuplicateSelection.tsx

@@ -3,6 +3,7 @@ import {
   KEYS,
   MOBILE_ACTION_BUTTON_BG,
   arrayToMap,
+  getShortcutKey,
 } from "@excalidraw/common";
 
 import { getNonDeletedElements } from "@excalidraw/element";
@@ -25,7 +26,6 @@ import { DuplicateIcon } from "../components/icons";
 
 import { t } from "../i18n";
 import { isSomeElementSelected } from "../scene";
-import { getShortcutKey } from "../shortcut";
 
 import { register } from "./register";
 

packages/excalidraw/actions/actionGroup.tsx

@@ -14,7 +14,7 @@ import {
   replaceAllElementsInFrame,
 } from "@excalidraw/element";
 
-import { KEYS, randomId, arrayToMap } from "@excalidraw/common";
+import { KEYS, randomId, arrayToMap, getShortcutKey } from "@excalidraw/common";
 
 import {
   getSelectedGroupIds,
@@ -43,8 +43,6 @@ import { t } from "../i18n";
 
 import { isSomeElementSelected } from "../scene";
 
-import { getShortcutKey } from "../shortcut";
-
 import { register } from "./register";
 
 import type { AppClassProperties, AppState } from "../types";

packages/excalidraw/actions/actionLink.tsx

@@ -1,6 +1,6 @@
 import { isEmbeddableElement } from "@excalidraw/element";
 
-import { KEYS } from "@excalidraw/common";
+import { KEYS, getShortcutKey } from "@excalidraw/common";
 
 import { CaptureUpdateAction } from "@excalidraw/element";
 
@@ -8,8 +8,8 @@ import { ToolButton } from "../components/ToolButton";
 import { getContextMenuLabel } from "../components/hyperlink/Hyperlink";
 import { LinkIcon } from "../components/icons";
 import { t } from "../i18n";
+
 import { getSelectedElements } from "../scene";
-import { getShortcutKey } from "../shortcut";
 
 import { register } from "./register";
 

packages/excalidraw/actions/actionProperties.tsx

@@ -17,6 +17,7 @@ import {
   randomInteger,
   arrayToMap,
   getFontFamilyString,
+  getShortcutKey,
   getLineHeight,
   isTransparent,
   reduceToCommonValue,
@@ -141,8 +142,6 @@ import {
   restoreCaretPosition,
 } from "../hooks/useTextEditorFocus";
 
-import { getShortcutKey } from "../shortcut";
-
 import { register } from "./register";
 
 import type { AppClassProperties, AppState, Primitive } from "../types";

packages/excalidraw/actions/actionZindex.tsx

@@ -1,4 +1,4 @@
-import { KEYS, CODES, isDarwin } from "@excalidraw/common";
+import { KEYS, CODES, getShortcutKey, isDarwin } from "@excalidraw/common";
 
 import {
   moveOneLeft,
@@ -16,7 +16,6 @@ import {
   SendToBackIcon,
 } from "../components/icons";
 import { t } from "../i18n";
-import { getShortcutKey } from "../shortcut";
 
 import { register } from "./register";
 

packages/excalidraw/actions/shortcuts.ts

@@ -1,9 +1,8 @@
-import { isDarwin } from "@excalidraw/common";
+import { isDarwin, getShortcutKey } from "@excalidraw/common";
 
 import type { SubtypeOf } from "@excalidraw/common/utility-types";
 
 import { t } from "../i18n";
-import { getShortcutKey } from "../shortcut";
 
 import type { ActionName } from "./types";
 

packages/excalidraw/appState.ts

@@ -21,7 +21,7 @@ const defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio)
 
 export const getDefaultAppState = (): Omit<
   AppState,
-  "offsetTop" | "offsetLeft" | "width" | "height" | "scrollConstraints"
+  "offsetTop" | "offsetLeft" | "width" | "height"
 > => {
   return {
     showWelcomeScreen: false,
@@ -248,7 +248,6 @@ const APP_STATE_STORAGE_CONF = (<
   objectsSnapModeEnabled: { browser: true, export: false, server: false },
   userToFollow: { browser: false, export: false, server: false },
   followedBy: { browser: false, export: false, server: false },
-  scrollConstraints: { browser: false, export: false, server: false },
   isCropping: { browser: false, export: false, server: false },
   croppingElementId: { browser: false, export: false, server: false },
   searchMatches: { browser: false, export: false, server: false },

packages/excalidraw/components/App.tsx

@@ -80,6 +80,7 @@ import {
   wrapEvent,
   updateObject,
   updateActiveTool,
+  getShortcutKey,
   isTransparent,
   easeToValuesRAF,
   muteFSAbortError,
@@ -172,7 +173,7 @@ import {
   getContainerElement,
   isValidTextContainer,
   redrawTextBoundingBox,
-  hasBoundingBox,
+  shouldShowBoundingBox,
   getFrameChildren,
   isCursorInFrame,
   addElementsToFrame,
@@ -403,15 +404,8 @@ import { isMaybeMermaidDefinition } from "../mermaid";
 
 import { LassoTrail } from "../lasso";
 
-import {
-  constrainScrollState,
-  calculateConstrainedScrollCenter,
-  areCanvasTranslatesClose,
-} from "../scene/scrollConstraints";
 import { EraserTrail } from "../eraser";
 
-import { getShortcutKey } from "../shortcut";
-
 import ConvertElementTypePopup, {
   getConversionTypeFromElements,
   convertElementTypePopupAtom,
@@ -469,8 +463,6 @@ import type {
   FrameNameBoundsCache,
   SidebarName,
   SidebarTabName,
-  ScrollConstraints,
-  AnimateTranslateCanvasValues,
   KeyboardModifiersObject,
   CollaboratorPointer,
   ToolType,
@@ -519,7 +511,6 @@ const ExcalidrawAppStateContext = React.createContext<AppState>({
   height: 0,
   offsetLeft: 0,
   offsetTop: 0,
-  scrollConstraints: null,
 });
 ExcalidrawAppStateContext.displayName = "ExcalidrawAppStateContext";
 
@@ -558,8 +549,6 @@ let isDraggingScrollBar: boolean = false;
 let currentScrollBars: ScrollBars = { horizontal: null, vertical: null };
 let touchTimeout = 0;
 let invalidateContextMenu = false;
-let scrollConstraintsAnimationTimeout: ReturnType<typeof setTimeout> | null =
-  null;
 
 /**
  * Map of youtube embed video states
@@ -688,9 +677,7 @@ class App extends React.Component<AppProps, AppState> {
       objectsSnapModeEnabled = false,
       theme = defaultAppState.theme,
       name = `${t("labels.untitled")}-${getDateTime()}`,
-      scrollConstraints,
     } = props;
-
     this.state = {
       ...defaultAppState,
       theme,
@@ -703,7 +690,6 @@ class App extends React.Component<AppProps, AppState> {
       name,
       width: window.innerWidth,
       height: window.innerHeight,
-      scrollConstraints: scrollConstraints ?? null,
     };
 
     this.id = nanoid();
@@ -754,7 +740,6 @@ class App extends React.Component<AppProps, AppState> {
         resetCursor: this.resetCursor,
         updateFrameRendering: this.updateFrameRendering,
         toggleSidebar: this.toggleSidebar,
-        setScrollConstraints: this.setScrollConstraints,
         onChange: (cb) => this.onChangeEmitter.on(cb),
         onIncrement: (cb) => this.store.onStoreIncrementEmitter.on(cb),
         onPointerDown: (cb) => this.onPointerDownEmitter.on(cb),
@@ -2410,12 +2395,7 @@ class App extends React.Component<AppProps, AppState> {
       toast: this.state.toast,
     };
 
-    if (this.props.scrollConstraints) {
-      scene.appState = {
-        ...scene.appState,
-        ...calculateConstrainedScrollCenter(this.state, scene.appState),
-      };
-    } else if (initialData?.scrollToContent) {
+    if (initialData?.scrollToContent) {
       scene.appState = {
         ...scene.appState,
         ...calculateScrollCenter(scene.elements, {
@@ -2424,7 +2404,6 @@ class App extends React.Component<AppProps, AppState> {
           height: this.state.height,
           offsetTop: this.state.offsetTop,
           offsetLeft: this.state.offsetLeft,
-          scrollConstraints: this.state.scrollConstraints,
         }),
       };
     }
@@ -2679,11 +2658,7 @@ class App extends React.Component<AppProps, AppState> {
     if (!supportsResizeObserver) {
       this.refreshEditorBreakpoints();
     }
-    if (this.state.scrollConstraints) {
-      this.setState((state) => constrainScrollState(state));
-    } else {
-      this.setState({});
-    }
+    this.setState({});
   });
 
   /** generally invoked only if fullscreen was invoked programmatically */
@@ -2992,33 +2967,6 @@ class App extends React.Component<AppProps, AppState> {
       this.props.onChange?.(elements, this.state, this.files);
       this.onChangeEmitter.trigger(elements, this.state, this.files);
     }
-
-    if (this.state.scrollConstraints?.animateOnNextUpdate) {
-      const newState = constrainScrollState(this.state, "rigid");
-      const fromValues = {
-        scrollX: this.state.scrollX,
-        scrollY: this.state.scrollY,
-        zoom: this.state.zoom.value,
-      };
-      const toValues = {
-        scrollX: newState.scrollX,
-        scrollY: newState.scrollY,
-        zoom: newState.zoom.value,
-      };
-
-      if (areCanvasTranslatesClose(fromValues, toValues)) {
-        return;
-      }
-
-      if (scrollConstraintsAnimationTimeout) {
-        clearTimeout(scrollConstraintsAnimationTimeout);
-      }
-
-      scrollConstraintsAnimationTimeout = setTimeout(() => {
-        this.cancelInProgressAnimation?.();
-        this.animateToConstrainedArea(fromValues, toValues);
-      }, 200);
-    }
   }
 
   private renderInteractiveSceneCallback = ({
@@ -3773,8 +3721,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,
@@ -3782,7 +3730,7 @@ class App extends React.Component<AppProps, AppState> {
         },
         this.state,
       ),
-    );
+    });
   };
 
   private cancelInProgressAnimation: (() => void) | null = null;
@@ -3882,18 +3830,32 @@ class App extends React.Component<AppProps, AppState> {
     // when animating, we use RequestAnimationFrame to prevent the animation
     // from slowing down other processes
     if (opts?.animate) {
-      const fromValues = {
-        scrollX: this.state.scrollX,
-        scrollY: this.state.scrollY,
-        zoom: this.state.zoom.value,
-      };
+      const origScrollX = this.state.scrollX;
+      const origScrollY = this.state.scrollY;
+      const origZoom = this.state.zoom.value;
 
-      const toValues = { scrollX, scrollY, zoom: zoom.value };
-
-      this.animateTranslateCanvas({
-        fromValues,
-        toValues,
-        duration: opts?.duration ?? 500,
+      const cancel = easeToValuesRAF({
+        fromValues: {
+          scrollX: origScrollX,
+          scrollY: origScrollY,
+          zoom: origZoom,
+        },
+        toValues: { scrollX, scrollY, zoom: zoom.value },
+        interpolateValue: (from, to, progress, key) => {
+          // for zoom, use different easing
+          if (key === "zoom") {
+            return from * Math.pow(to / from, easeOut(progress));
+          }
+          // handle using default
+          return undefined;
+        },
+        onStep: ({ scrollX, scrollY, zoom }) => {
+          this.setState({
+            scrollX,
+            scrollY,
+            zoom: { value: zoom },
+          });
+        },
         onStart: () => {
           this.setState({ shouldCacheIgnoreZoom: true });
         },
@@ -3903,7 +3865,13 @@ class App extends React.Component<AppProps, AppState> {
         onCancel: () => {
           this.setState({ shouldCacheIgnoreZoom: false });
         },
+        duration: opts?.duration ?? 500,
       });
+
+      this.cancelInProgressAnimation = () => {
+        cancel();
+        this.cancelInProgressAnimation = null;
+      };
     } else {
       this.setState({ scrollX, scrollY, zoom });
     }
@@ -3917,158 +3885,11 @@ class App extends React.Component<AppProps, AppState> {
 
   /** use when changing scrollX/scrollY/zoom based on user interaction */
   private translateCanvas: React.Component<any, AppState>["setState"] = (
-    stateUpdate,
+    state,
   ) => {
     this.cancelInProgressAnimation?.();
     this.maybeUnfollowRemoteUser();
-
-    if (scrollConstraintsAnimationTimeout) {
-      clearTimeout(scrollConstraintsAnimationTimeout);
-    }
-
-    const partialNewState =
-      typeof stateUpdate === "function"
-        ? (
-            stateUpdate as (
-              prevState: Readonly<AppState>,
-              props: Readonly<AppProps>,
-            ) => AppState
-          )(this.state, this.props)
-        : stateUpdate;
-
-    const newState: AppState = {
-      ...this.state,
-      ...partialNewState,
-      ...(this.state.scrollConstraints && {
-        // manually reset if setState in onCancel wasn't committed yet
-        shouldCacheIgnoreZoom: false,
-      }),
-    };
-
-    // RULE: cannot go below the minimum zoom level if zoom lock is enabled
-    const constrainedState =
-      newState.scrollConstraints && newState.scrollConstraints.lockZoom
-        ? constrainScrollState(newState, "elastic")
-        : newState;
-    if (constrainedState.zoom.value > newState.zoom.value) {
-      newState.zoom = constrainedState.zoom;
-      newState.scrollX = constrainedState.scrollX;
-      newState.scrollY = constrainedState.scrollY;
-
-      this.debounceConstrainScrollState(newState);
-      return;
-    }
-
-    this.setState(newState);
-    if (this.state.scrollConstraints) {
-      // debounce to allow centering on user's cursor position before constraining
-      if (newState.zoom.value !== this.state.zoom.value) {
-        this.debounceConstrainScrollState(newState);
-      } else {
-        this.setState(constrainScrollState(newState));
-      }
-    }
-  };
-
-  private debounceConstrainScrollState = debounce((state: AppState) => {
-    const newState = constrainScrollState(state, "rigid");
-
-    const fromValues = {
-      scrollX: this.state.scrollX,
-      scrollY: this.state.scrollY,
-      zoom: this.state.zoom.value,
-    };
-    const toValues = {
-      scrollX: newState.scrollX,
-      scrollY: newState.scrollY,
-      zoom: newState.zoom.value,
-    };
-
-    if (areCanvasTranslatesClose(fromValues, toValues)) {
-      return;
-    }
-
-    this.cancelInProgressAnimation?.();
-    this.animateToConstrainedArea(fromValues, toValues);
-  }, 200);
-
-  private animateToConstrainedArea = (
-    fromValues: AnimateTranslateCanvasValues,
-    toValues: AnimateTranslateCanvasValues,
-  ) => {
-    const cleanUp = () => {
-      this.setState((state) => ({
-        shouldCacheIgnoreZoom: false,
-        scrollConstraints: {
-          ...state.scrollConstraints!,
-          animateOnNextUpdate: false,
-        },
-      }));
-    };
-
-    this.animateTranslateCanvas({
-      fromValues,
-      toValues,
-      duration: 200,
-      onStart: () => {
-        this.setState((state) => {
-          return {
-            shouldCacheIgnoreZoom: true,
-            scrollConstraints: {
-              ...state.scrollConstraints!,
-              animateOnNextUpdate: false,
-            },
-          };
-        });
-      },
-      onEnd: cleanUp,
-      onCancel: cleanUp,
-    });
-  };
-
-  private animateTranslateCanvas = ({
-    fromValues,
-    toValues,
-    duration,
-    onStart,
-    onEnd,
-    onCancel,
-  }: {
-    fromValues: AnimateTranslateCanvasValues;
-    toValues: AnimateTranslateCanvasValues;
-    duration: number;
-    onStart: () => void;
-    onEnd: () => void;
-    onCancel: () => void;
-  }) => {
-    const cancel = easeToValuesRAF({
-      fromValues,
-      toValues,
-      interpolateValue: (from, to, progress, key) => {
-        // for zoom, use different easing
-        if (key === "zoom") {
-          return from * Math.pow(to / from, easeOut(progress));
-        }
-        // handle using default
-        return undefined;
-      },
-      onStep: ({ scrollX, scrollY, zoom }) => {
-        this.setState({
-          scrollX,
-          scrollY,
-          zoom: { value: zoom },
-        });
-      },
-      onStart,
-      onEnd,
-      onCancel,
-      duration,
-    });
-
-    this.cancelInProgressAnimation = () => {
-      cancel();
-      this.cancelInProgressAnimation = null;
-    };
+    this.setState(state);
   };
 
   setToast = (
@@ -5137,22 +4958,16 @@ class App extends React.Component<AppProps, AppState> {
 
     const initialScale = gesture.initialScale;
     if (initialScale) {
-      this.setState((state) =>
-        constrainScrollState(
+      this.setState((state) => ({
+        ...getStateForZoom(
           {
-            ...state,
-            ...getStateForZoom(
-              {
-                viewportX: this.lastViewportPosition.x,
-                viewportY: this.lastViewportPosition.y,
-                nextZoom: getNormalizedZoom(initialScale * event.scale),
-              },
-              state,
-            ),
+            viewportX: this.lastViewportPosition.x,
+            viewportY: this.lastViewportPosition.y,
+            nextZoom: getNormalizedZoom(initialScale * event.scale),
           },
-          "loose",
+          state,
         ),
-      );
+      }));
     }
   });
 
@@ -5447,7 +5262,7 @@ class App extends React.Component<AppProps, AppState> {
     if (
       considerBoundingBox &&
       this.state.selectedElementIds[element.id] &&
-      hasBoundingBox([element], this.state)
+      shouldShowBoundingBox([element], this.state)
     ) {
       // if hitting the bounding box, return early
       // but if not, we should check for other cases as well (e.g. frame name)
@@ -6350,13 +6165,7 @@ class App extends React.Component<AppProps, AppState> {
         (!this.state.selectedLinearElement ||
           this.state.selectedLinearElement.hoverPointIndex === -1) &&
         this.state.openDialog?.name !== "elementLinkSelector" &&
-        !(selectedElements.length === 1 && isElbowArrow(selectedElements[0])) &&
-        // HACK: Disable transform handles for linear elements on mobile until a
-        // better way of showing them is found
-        !(
-          isLinearElement(selectedElements[0]) &&
-          (isMobileOrTablet() || selectedElements[0].points.length === 2)
-        )
+        !(selectedElements.length === 1 && isElbowArrow(selectedElements[0]))
       ) {
         const elementWithTransformHandleType =
           getElementWithTransformHandleType(
@@ -7476,8 +7285,14 @@ class App extends React.Component<AppProps, AppState> {
         !this.state.selectedLinearElement?.isEditing &&
         !isElbowArrow(selectedElements[0]) &&
         !(
-          isLinearElement(selectedElements[0]) &&
-          (isMobileOrTablet() || selectedElements[0].points.length === 2)
+          isLineElement(selectedElements[0]) &&
+          LinearElementEditor.getPointIndexUnderCursor(
+            selectedElements[0],
+            elementsMap,
+            this.state.zoom,
+            pointerDownState.origin.x,
+            pointerDownState.origin.y,
+          ) !== -1
         ) &&
         !(
           this.state.selectedLinearElement &&
@@ -9050,6 +8865,15 @@ class App extends React.Component<AppProps, AppState> {
               }));
 
               this.scene.replaceAllElements(elementsWithIndices);
+              elementsWithIndices.forEach((element) => {
+                if (
+                  isBindableElement(element) &&
+                  element.boundElements?.some((other) => other.type === "arrow")
+                ) {
+                  updateBoundElements(element, this.scene);
+                }
+              });
+
               this.maybeCacheVisibleGaps(event, selectedElements, true);
               this.maybeCacheReferenceSnapPoints(event, selectedElements, true);
             });
@@ -11389,17 +11213,6 @@ class App extends React.Component<AppProps, AppState> {
       return [actionCopy, ...options];
     }
 
-    const zIndexActions: ContextMenuItems =
-      this.state.stylesPanelMode === "full"
-        ? [
-            CONTEXT_MENU_SEPARATOR,
-            actionSendBackward,
-            actionBringForward,
-            actionSendToBack,
-            actionBringToFront,
-          ]
-        : [];
-
     return [
       CONTEXT_MENU_SEPARATOR,
       actionCut,
@@ -11425,7 +11238,11 @@ class App extends React.Component<AppProps, AppState> {
       actionUngroup,
       CONTEXT_MENU_SEPARATOR,
       actionAddToLibrary,
-      ...zIndexActions,
+      CONTEXT_MENU_SEPARATOR,
+      actionSendBackward,
+      actionBringForward,
+      actionSendToBack,
+      actionBringToFront,
       CONTEXT_MENU_SEPARATOR,
       actionFlipHorizontal,
       actionFlipVertical,
@@ -11653,51 +11470,6 @@ class App extends React.Component<AppProps, AppState> {
     await setLanguage(currentLang);
     this.setAppState({});
   }
-
-  /**
-   * Sets the scroll constraints of the application state.
-   *
-   * @param scrollConstraints - The new scroll constraints.
-   */
-  public setScrollConstraints = (
-    scrollConstraints: ScrollConstraints | null,
-  ) => {
-    if (scrollConstraints) {
-      this.setState(
-        {
-          scrollConstraints,
-          viewModeEnabled: true,
-        },
-        () => {
-          const newState = constrainScrollState(
-            {
-              ...this.state,
-              scrollConstraints,
-            },
-            "rigid",
-          );
-
-          this.animateToConstrainedArea(
-            {
-              scrollX: this.state.scrollX,
-              scrollY: this.state.scrollY,
-              zoom: this.state.zoom.value,
-            },
-            {
-              scrollX: newState.scrollX,
-              scrollY: newState.scrollY,
-              zoom: newState.zoom.value,
-            },
-          );
-        },
-      );
-    } else {
-      this.setState({
-        scrollConstraints: null,
-        viewModeEnabled: false,
-      });
-    }
-  };
 }
 
 // -----------------------------------------------------------------------------

packages/excalidraw/components/ColorPicker/ColorInput.tsx

@@ -1,9 +1,8 @@
 import clsx from "clsx";
 import { useCallback, useEffect, useRef, useState } from "react";
 
-import { KEYS } from "@excalidraw/common";
+import { KEYS, getShortcutKey } from "@excalidraw/common";
 
-import { getShortcutKey } from "../..//shortcut";
 import { useAtom } from "../../editor-jotai";
 import { t } from "../../i18n";
 import { useDevice } from "../App";

packages/excalidraw/components/CommandPalette/CommandPalette.tsx

@@ -7,13 +7,12 @@ import {
   EVENT,
   KEYS,
   capitalizeString,
+  getShortcutKey,
   isWritableElement,
 } from "@excalidraw/common";
 
 import { actionToggleShapeSwitch } from "@excalidraw/excalidraw/actions/actionToggleShapeSwitch";
 
-import { getShortcutKey } from "@excalidraw/excalidraw/shortcut";
-
 import type { MarkRequired } from "@excalidraw/common/utility-types";
 
 import {

packages/excalidraw/components/ContextMenu.scss

@@ -1,10 +1,6 @@
 @import "../css/variables.module.scss";
 
 .excalidraw {
-  .context-menu-popover {
-    z-index: var(--zIndex-ui-context-menu);
-  }
-
   .context-menu {
     position: relative;
     border-radius: 4px;

packages/excalidraw/components/ContextMenu.tsx

@@ -64,7 +64,6 @@ export const ContextMenu = React.memo(
         offsetTop={appState.offsetTop}
         viewportWidth={appState.width}
         viewportHeight={appState.height}
-        className="context-menu-popover"
       >
         <ul
           className="context-menu"

packages/excalidraw/components/HelpDialog.tsx

@@ -2,12 +2,11 @@ import React from "react";
 
 import { isDarwin, isFirefox, isWindows } from "@excalidraw/common";
 
-import { KEYS } from "@excalidraw/common";
+import { KEYS, getShortcutKey } from "@excalidraw/common";
 
 import { getShortcutFromShortcutName } from "../actions/shortcuts";
 import { probablySupportsClipboardBlob } from "../clipboard";
 import { t } from "../i18n";
-import { getShortcutKey } from "../shortcut";
 
 import { Dialog } from "./Dialog";
 import { ExternalLinkIcon, GithubIcon, youtubeIcon } from "./icons";

packages/excalidraw/components/HintViewer.scss

@@ -28,24 +28,11 @@ $wide-viewport-width: 1000px;
     > span {
       padding: 0.25rem;
     }
-
-    kbd {
-      display: inline-block;
-      margin: 0 1px;
-      font-family: monospace;
-      border: 1px solid var(--color-gray-40);
-      border-radius: 4px;
-      padding: 1px 3px;
-      font-size: 10px;
-    }
   }
 
   &.theme--dark {
     .HintViewer {
       color: var(--color-gray-60);
-      kbd {
-        border-color: var(--color-gray-60);
-      }
     }
   }
 }

packages/excalidraw/components/HintViewer.tsx

@@ -9,10 +9,11 @@ import {
   isTextElement,
 } from "@excalidraw/element";
 
+import { getShortcutKey } from "@excalidraw/common";
+
 import { isNodeInFlowchart } from "@excalidraw/element";
 
 import { t } from "../i18n";
-import { getShortcutKey } from "../shortcut";
 import { isEraserActive } from "../appState";
 import { isGridModeEnabled } from "../snapping";
 
@@ -27,11 +28,6 @@ interface HintViewerProps {
   app: AppClassProperties;
 }
 
-const getTaggedShortcutKey = (key: string | string[]) =>
-  Array.isArray(key)
-    ? `<kbd>${key.map(getShortcutKey).join(" + ")}</kbd>`
-    : `<kbd>${getShortcutKey(key)}</kbd>`;
-
 const getHints = ({
   appState,
   isMobile,
@@ -46,9 +42,7 @@ const getHints = ({
     appState.openSidebar.tab === CANVAS_SEARCH_TAB &&
     appState.searchMatches?.matches.length
   ) {
-    return t("hints.dismissSearch", {
-      shortcut: getTaggedShortcutKey("Escape"),
-    });
+    return t("hints.dismissSearch");
   }
 
   if (appState.openSidebar && !device.editor.canFitSidebar) {
@@ -56,21 +50,14 @@ const getHints = ({
   }
 
   if (isEraserActive(appState)) {
-    return t("hints.eraserRevert", {
-      shortcut: getTaggedShortcutKey("Alt"),
-    });
+    return t("hints.eraserRevert");
   }
   if (activeTool.type === "arrow" || activeTool.type === "line") {
     if (multiMode) {
-      return t("hints.linearElementMulti", {
-        shortcut_1: getTaggedShortcutKey("Escape"),
-        shortcut_2: getTaggedShortcutKey("Enter"),
-      });
+      return t("hints.linearElementMulti");
     }
     if (activeTool.type === "arrow") {
-      return t("hints.arrowTool", {
-        shortcut: getTaggedShortcutKey("A"),
-      });
+      return t("hints.arrowTool", { arrowShortcut: getShortcutKey("A") });
     }
     return t("hints.linearElement");
   }
@@ -96,51 +83,31 @@ const getHints = ({
   ) {
     const targetElement = selectedElements[0];
     if (isLinearElement(targetElement) && targetElement.points.length === 2) {
-      return t("hints.lockAngle", {
-        shortcut: getTaggedShortcutKey("Shift"),
-      });
+      return t("hints.lockAngle");
     }
     return isImageElement(targetElement)
-      ? t("hints.resizeImage", {
-          shortcut_1: getTaggedShortcutKey("Shift"),
-          shortcut_2: getTaggedShortcutKey("Alt"),
-        })
-      : t("hints.resize", {
-          shortcut_1: getTaggedShortcutKey("Shift"),
-          shortcut_2: getTaggedShortcutKey("Alt"),
-        });
+      ? t("hints.resizeImage")
+      : t("hints.resize");
   }
 
   if (isRotating && lastPointerDownWith === "mouse") {
-    return t("hints.rotate", {
-      shortcut: getTaggedShortcutKey("Shift"),
-    });
+    return t("hints.rotate");
   }
 
   if (selectedElements.length === 1 && isTextElement(selectedElements[0])) {
-    return t("hints.text_selected", {
-      shortcut: getTaggedShortcutKey("Enter"),
-    });
+    return t("hints.text_selected");
   }
 
   if (appState.editingTextElement) {
-    return t("hints.text_editing", {
-      shortcut_1: getTaggedShortcutKey("Escape"),
-      shortcut_2: getTaggedShortcutKey(["CtrlOrCmd", "Enter"]),
-    });
+    return t("hints.text_editing");
   }
 
   if (appState.croppingElementId) {
-    return t("hints.leaveCropEditor", {
-      shortcut_1: getTaggedShortcutKey("Enter"),
-      shortcut_2: getTaggedShortcutKey("Escape"),
-    });
+    return t("hints.leaveCropEditor");
   }
 
   if (selectedElements.length === 1 && isImageElement(selectedElements[0])) {
-    return t("hints.enterCropEditor", {
-      shortcut: getTaggedShortcutKey("Enter"),
-    });
+    return t("hints.enterCropEditor");
   }
 
   if (activeTool.type === "selection") {
@@ -150,57 +117,33 @@ const getHints = ({
       !appState.editingTextElement &&
       !appState.selectedLinearElement?.isEditing
     ) {
-      return t("hints.deepBoxSelect", {
-        shortcut: getTaggedShortcutKey("CtrlOrCmd"),
-      });
+      return [t("hints.deepBoxSelect")];
     }
 
     if (isGridModeEnabled(app) && appState.selectedElementsAreBeingDragged) {
-      return t("hints.disableSnapping", {
-        shortcut: getTaggedShortcutKey("CtrlOrCmd"),
-      });
+      return t("hints.disableSnapping");
     }
 
     if (!selectedElements.length && !isMobile) {
-      return t("hints.canvasPanning", {
-        shortcut_1: getTaggedShortcutKey(t("keys.mmb")),
-        shortcut_2: getTaggedShortcutKey("Space"),
-      });
+      return [t("hints.canvasPanning")];
     }
 
     if (selectedElements.length === 1) {
       if (isLinearElement(selectedElements[0])) {
         if (appState.selectedLinearElement?.isEditing) {
           return appState.selectedLinearElement.selectedPointsIndices
-            ? t("hints.lineEditor_pointSelected", {
-                shortcut_1: getTaggedShortcutKey("Delete"),
-                shortcut_2: getTaggedShortcutKey(["CtrlOrCmd", "D"]),
-              })
-            : t("hints.lineEditor_nothingSelected", {
-                shortcut_1: getTaggedShortcutKey("Shift"),
-                shortcut_2: getTaggedShortcutKey("Alt"),
-              });
+            ? t("hints.lineEditor_pointSelected")
+            : t("hints.lineEditor_nothingSelected");
         }
         return isLineElement(selectedElements[0])
-          ? t("hints.lineEditor_line_info", {
-              shortcut: getTaggedShortcutKey("Enter"),
-            })
-          : t("hints.lineEditor_info", {
-              shortcut_1: getTaggedShortcutKey("CtrlOrCmd"),
-              shortcut_2: getTaggedShortcutKey(["CtrlOrCmd", "Enter"]),
-            });
+          ? t("hints.lineEditor_line_info")
+          : t("hints.lineEditor_info");
       }
       if (
         !appState.newElement &&
         !appState.selectedElementsAreBeingDragged &&
         isTextBindableContainer(selectedElements[0])
       ) {
-        const bindTextToElement = t("hints.bindTextToElement", {
-          shortcut: getTaggedShortcutKey("Enter"),
-        });
-        const createFlowchart = t("hints.createFlowchart", {
-          shortcut: getTaggedShortcutKey(["CtrlOrCmd", "↑↓"]),
-        });
         if (isFlowchartNodeElement(selectedElements[0])) {
           if (
             isNodeInFlowchart(
@@ -208,13 +151,13 @@ const getHints = ({
               app.scene.getNonDeletedElementsMap(),
             )
           ) {
-            return [bindTextToElement, createFlowchart];
+            return [t("hints.bindTextToElement"), t("hints.createFlowchart")];
           }
 
-          return [bindTextToElement, createFlowchart];
+          return [t("hints.bindTextToElement"), t("hints.createFlowchart")];
         }
 
-        return bindTextToElement;
+        return t("hints.bindTextToElement");
       }
     }
   }
@@ -240,21 +183,16 @@ export const HintViewer = ({
   }
 
   const hint = Array.isArray(hints)
-    ? hints.map((hint) => hint.replace(/\. ?$/, "")).join(", ")
-    : hints;
-
-  const hintJSX = hint.split(/(<kbd>[^<]+<\/kbd>)/g).map((part, index) => {
-    if (index % 2 === 1) {
-      const shortcutMatch =
-        part[0] === "<" && part.match(/^<kbd>([^<]+)<\/kbd>$/);
-      return <kbd key={index}>{shortcutMatch ? shortcutMatch[1] : part}</kbd>;
-    }
-    return part;
-  });
+    ? hints
+        .map((hint) => {
+          return getShortcutKey(hint).replace(/\. ?$/, "");
+        })
+        .join(". ")
+    : getShortcutKey(hints);
 
   return (
     <div className="HintViewer">
-      <span>{hintJSX}</span>
+      <span>{hint}</span>
     </div>
   );
 };

packages/excalidraw/components/LayerUI.tsx

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

packages/excalidraw/components/MobileMenu.tsx

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

packages/excalidraw/components/Popover.tsx

@@ -3,8 +3,6 @@ import { unstable_batchedUpdates } from "react-dom";
 
 import { KEYS, queryFocusableElements } from "@excalidraw/common";
 
-import clsx from "clsx";
-
 import "./Popover.scss";
 
 type Props = {
@@ -17,7 +15,6 @@ type Props = {
   offsetTop?: number;
   viewportWidth?: number;
   viewportHeight?: number;
-  className?: string;
 };
 
 export const Popover = ({
@@ -30,7 +27,6 @@ export const Popover = ({
   offsetTop = 0,
   viewportWidth = window.innerWidth,
   viewportHeight = window.innerHeight,
-  className,
 }: Props) => {
   const popoverRef = useRef<HTMLDivElement>(null);
 
@@ -150,7 +146,7 @@ export const Popover = ({
   }, [onCloseRequest]);
 
   return (
-    <div className={clsx("popover", className)} ref={popoverRef} tabIndex={-1}>
+    <div className="popover" ref={popoverRef} tabIndex={-1}>
       {children}
     </div>
   );

packages/excalidraw/components/TTDDialog/TTDDialogSubmitShortcut.tsx

@@ -1,4 +1,4 @@
-import { getShortcutKey } from "@excalidraw/excalidraw/shortcut";
+import { getShortcutKey } from "@excalidraw/common";
 
 export const TTDDialogSubmitShortcut = () => {
   return (

packages/excalidraw/css/styles.scss

@@ -12,10 +12,9 @@
   --zIndex-eyeDropperPreview: 6;
   --zIndex-hyperlinkContainer: 7;
 
+  --zIndex-ui-styles-popup: 40;
   --zIndex-ui-bottom: 60;
   --zIndex-ui-library: 80;
-  --zIndex-ui-context-menu: 90;
-  --zIndex-ui-styles-popup: 100;
   --zIndex-ui-top: 100;
 
   --zIndex-modal: 1000;

packages/excalidraw/data/restore.ts

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

packages/excalidraw/index-node.ts

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

packages/excalidraw/index.tsx

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

packages/excalidraw/locales/en.json

@@ -337,33 +337,33 @@
     "shapes": "Shapes"
   },
   "hints": {
-    "dismissSearch": "{{shortcut}} to dismiss search",
-    "canvasPanning": "To move canvas, hold {{shortcut_1}} or {{shortcut_2}} while dragging, or use the hand tool",
+    "dismissSearch": "Escape to dismiss search",
+    "canvasPanning": "To move canvas, hold mouse wheel or spacebar while dragging, or use the hand tool",
     "linearElement": "Click to start multiple points, drag for single line",
-    "arrowTool": "Click to start multiple points, drag for single line. Press {{shortcut}} again to change arrow type.",
+    "arrowTool": "Click to start multiple points, drag for single line. Press {{arrowShortcut}} again to change arrow type.",
     "freeDraw": "Click and drag, release when you're finished",
     "text": "Tip: you can also add text by double-clicking anywhere with the selection tool",
     "embeddable": "Click-drag to create a website embed",
-    "text_selected": "Double-click or press {{shortcut}} to edit text",
-    "text_editing": "Press {{shortcut_1}} or {{shortcut_2}} to finish editing",
-    "linearElementMulti": "Click on last point or press {{shortcut_1}} or {{shortcut_2}} to finish",
-    "lockAngle": "You can constrain angle by holding {{shortcut}}",
-    "resize": "You can constrain proportions by holding {{shortcut_1}} while resizing,\nhold {{shortcut_2}} to resize from the center",
-    "resizeImage": "You can resize freely by holding {{shortcut_1}},\nhold {{shortcut_2}} to resize from the center",
-    "rotate": "You can constrain angles by holding {{shortcut}} while rotating",
-    "lineEditor_info": "Hold {{shortcut_1}} and Double-click or press {{shortcut_2}} to edit points",
-    "lineEditor_line_info": "Double-click or press {{shortcut}} to edit points",
-    "lineEditor_pointSelected": "Press {{shortcut_1}} to remove point(s),\n{{shortcut_2}} to duplicate, or drag to move",
-    "lineEditor_nothingSelected": "Select a point to edit (hold {{shortcut_1}} to select multiple),\nor hold {{shortcut_2}} and click to add new points",
+    "text_selected": "Double-click or press ENTER to edit text",
+    "text_editing": "Press Escape or CtrlOrCmd+ENTER to finish editing",
+    "linearElementMulti": "Click on last point or press Escape or Enter to finish",
+    "lockAngle": "You can constrain angle by holding SHIFT",
+    "resize": "You can constrain proportions by holding SHIFT while resizing,\nhold ALT to resize from the center",
+    "resizeImage": "You can resize freely by holding SHIFT,\nhold ALT to resize from the center",
+    "rotate": "You can constrain angles by holding SHIFT while rotating",
+    "lineEditor_info": "Hold CtrlOrCmd and Double-click or press CtrlOrCmd + Enter to edit points",
+    "lineEditor_line_info": "Double-click or press Enter to edit points",
+    "lineEditor_pointSelected": "Press Delete to remove point(s),\nCtrlOrCmd+D to duplicate, or drag to move",
+    "lineEditor_nothingSelected": "Select a point to edit (hold SHIFT to select multiple),\nor hold Alt and click to add new points",
     "publishLibrary": "Publish your own library",
-    "bindTextToElement": "{{shortcut}} to add text",
-    "createFlowchart": "{{shortcut}} to create a flowchart",
-    "deepBoxSelect": "Hold {{shortcut}} to deep select, and to prevent dragging",
-    "eraserRevert": "Hold {{shortcut}} to revert the elements marked for deletion",
+    "bindTextToElement": "Press enter to add text",
+    "createFlowchart": "Hold CtrlOrCmd and Arrow key to create a flowchart",
+    "deepBoxSelect": "Hold CtrlOrCmd to deep select, and to prevent dragging",
+    "eraserRevert": "Hold Alt to revert the elements marked for deletion",
     "firefox_clipboard_write": "This feature can likely be enabled by setting the \"dom.events.asyncClipboard.clipboardItem\" flag to \"true\". To change the browser flags in Firefox, visit the \"about:config\" page.",
-    "disableSnapping": "Hold {{shortcut}} to disable snapping",
-    "enterCropEditor": "Double click the image or press {{shortcut}} to crop the image",
-    "leaveCropEditor": "Click outside the image or press {{shortcut_1}} or {{shortcut_2}} to finish cropping"
+    "disableSnapping": "Hold CtrlOrCmd to disable snapping",
+    "enterCropEditor": "Double click the image or press ENTER to crop the image",
+    "leaveCropEditor": "Click outside the image or press ENTER or ESCAPE to finish cropping"
   },
   "canvasError": {
     "cannotShowPreview": "Cannot show preview",
@@ -648,17 +648,5 @@
     },
     "itemNotAvailable": "Command is not available...",
     "shortcutHint": "For Command palette, use {{shortcut}}"
-  },
-  "keys": {
-    "ctrl": "Ctrl",
-    "option": "Option",
-    "cmd": "Cmd",
-    "alt": "Alt",
-    "escape": "Esc",
-    "enter": "Enter",
-    "shift": "Shift",
-    "spacebar": "Space",
-    "delete": "Delete",
-    "mmb": "Scroll wheel"
   }
 }

packages/excalidraw/renderer/interactiveScene.ts

@@ -22,7 +22,7 @@ import {
   getOmitSidesForDevice,
   getTransformHandles,
   getTransformHandlesFromCoords,
-  hasBoundingBox,
+  shouldShowBoundingBox,
 } from "@excalidraw/element";
 import {
   isElbowArrow,
@@ -892,7 +892,7 @@ const _renderInteractiveScene = ({
 
   // Paint selected elements
   if (!appState.multiElement && !appState.selectedLinearElement?.isEditing) {
-    const showBoundingBox = hasBoundingBox(selectedElements, appState);
+    const showBoundingBox = shouldShowBoundingBox(selectedElements, appState);
 
     const isSingleLinearElementSelected =
       selectedElements.length === 1 && isLinearElement(selectedElements[0]);

packages/excalidraw/scene/scrollConstraints.ts

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

packages/excalidraw/scene/types.ts

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

packages/excalidraw/shortcut.ts

@@ -1,19 +0,0 @@
-import { isDarwin } from "@excalidraw/common";
-
-import { t } from "./i18n";
-
-export const getShortcutKey = (shortcut: string): string =>
-  shortcut
-    .replace(
-      /\b(Opt(?:ion)?|Alt)\b/i,
-      isDarwin ? t("keys.option") : t("keys.alt"),
-    )
-    .replace(/\bShift\b/i, t("keys.shift"))
-    .replace(/\b(Enter|Return)\b/i, t("keys.enter"))
-    .replace(
-      /\b(Ctrl|Cmd|Command|CtrlOrCmd)\b/gi,
-      isDarwin ? t("keys.cmd") : t("keys.ctrl"),
-    )
-    .replace(/\b(Esc(?:ape)?)\b/i, t("keys.escape"))
-    .replace(/\b(Space(?:bar)?)\b/i, t("keys.spacebar"))
-    .replace(/\b(Del(?:ete)?)\b/i, t("keys.delete"));

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

@@ -962,7 +962,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -1162,7 +1161,6 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": true,
@@ -1380,7 +1378,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -1715,7 +1712,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2050,7 +2046,6 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": true,
@@ -2268,7 +2263,6 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2513,7 +2507,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2817,7 +2810,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3191,7 +3183,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3688,7 +3679,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -4015,7 +4005,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -4344,7 +4333,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -5633,7 +5621,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -6854,7 +6841,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -7794,7 +7780,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -8795,7 +8780,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": true,
@@ -9793,7 +9777,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,

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

@@ -86,7 +86,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
     "id4": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -706,7 +705,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
     "id4": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -1197,7 +1195,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -1565,7 +1562,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -1936,7 +1932,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -2200,7 +2195,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -2649,7 +2643,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -2956,7 +2949,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -3279,7 +3271,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -3577,7 +3568,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -3867,7 +3857,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -4106,7 +4095,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -4367,7 +4355,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -4642,7 +4629,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -4875,7 +4861,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -5108,7 +5093,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -5359,7 +5343,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -5619,7 +5602,6 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -5880,7 +5862,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
     "id1": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -6213,7 +6194,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
     "id8": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -6644,7 +6624,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
     "id1": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -7023,7 +7002,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -7336,7 +7314,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -7656,7 +7633,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -7890,7 +7866,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -8246,7 +8221,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -8605,7 +8579,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -9012,7 +8985,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -9303,7 +9275,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -9571,7 +9542,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -9840,7 +9810,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -10079,7 +10048,6 @@ exports[`history > multiplayer undo/redo > should override remotely added groups
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -10377,7 +10345,6 @@ exports[`history > multiplayer undo/redo > should override remotely added points
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -10730,7 +10697,6 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -10973,7 +10939,6 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -11422,7 +11387,6 @@ exports[`history > multiplayer undo/redo > should update history entries after r
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -11686,7 +11650,6 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -11925,7 +11888,6 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -12166,7 +12128,6 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -13604,7 +13565,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on s
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": -50,
   "scrollY": -50,
   "searchMatches": null,
@@ -13850,7 +13810,6 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -14091,7 +14050,6 @@ exports[`history > singleplayer undo/redo > should end up with no history entry
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -14334,7 +14292,6 @@ exports[`history > singleplayer undo/redo > should iterate through the history w
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -14583,7 +14540,6 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -14921,7 +14877,6 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -15092,7 +15047,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -15383,7 +15337,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -15805,7 +15758,6 @@ exports[`history > singleplayer undo/redo > should not override appstate changes
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -16092,7 +16044,6 @@ exports[`history > singleplayer undo/redo > should support appstate name or view
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -16257,7 +16208,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -16966,7 +16916,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -17605,7 +17554,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -18242,7 +18190,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -18967,7 +18914,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -19722,7 +19668,6 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -20206,7 +20151,6 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
     "id1": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -20721,7 +20665,6 @@ exports[`history > singleplayer undo/redo > should support element creation, del
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,
@@ -21184,7 +21127,6 @@ exports[`history > singleplayer undo/redo > should support linear element creati
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "searchMatches": null,

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

@@ -89,7 +89,6 @@ exports[`given element A and group of elements B and given both are selected whe
     "id6": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -519,7 +518,6 @@ exports[`given element A and group of elements B and given both are selected whe
     "id6": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -935,7 +933,6 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -1505,7 +1502,6 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -1718,7 +1714,6 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2106,7 +2101,6 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2353,7 +2347,6 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2539,7 +2532,6 @@ exports[`regression tests > can drag element that covers another element, while
     "id6": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2866,7 +2858,6 @@ exports[`regression tests > change the properties of a shape > [end of test] app
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3127,7 +3118,6 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3372,7 +3362,6 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3612,7 +3601,6 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3874,7 +3862,6 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
     "id6": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -4190,7 +4177,6 @@ exports[`regression tests > deleting last but one element in editing group shoul
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -4633,7 +4619,6 @@ exports[`regression tests > deselects group of selected elements on pointer down
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -4920,7 +4905,6 @@ exports[`regression tests > deselects group of selected elements on pointer up w
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -5199,7 +5183,6 @@ exports[`regression tests > deselects selected element on pointer down when poin
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -5411,7 +5394,6 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -5613,7 +5595,6 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -6013,7 +5994,6 @@ exports[`regression tests > drags selected elements from point inside common bou
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -6311,7 +6291,6 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -7174,7 +7153,6 @@ exports[`regression tests > given a group of selected elements with an element t
     "id6": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -7511,7 +7489,6 @@ exports[`regression tests > given a selected element A and a not selected elemen
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -7794,7 +7771,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -8033,7 +8009,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -8275,7 +8250,6 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -8459,7 +8433,6 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -8643,7 +8616,6 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -8827,7 +8799,6 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -9061,7 +9032,6 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -9293,7 +9263,6 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -9493,7 +9462,6 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -9727,7 +9695,6 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -9911,7 +9878,6 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -10143,7 +10109,6 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -10327,7 +10292,6 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -10527,7 +10491,6 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -10715,7 +10678,6 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
     "id6": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -11248,7 +11210,6 @@ exports[`regression tests > noop interaction after undo shouldn't create history
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -11530,7 +11491,6 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": "-6.25000",
   "scrollY": 0,
   "scrolledOutside": false,
@@ -11659,7 +11619,6 @@ exports[`regression tests > shift click on selected element should deselect it o
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -11864,7 +11823,6 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -12188,7 +12146,6 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
     "id6": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -12622,7 +12579,6 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -13264,7 +13220,6 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 60,
   "scrollY": 60,
   "scrolledOutside": false,
@@ -13393,7 +13348,6 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -14029,7 +13983,6 @@ exports[`regression tests > switches from group of selected elements to another
     "id6": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -14371,7 +14324,6 @@ exports[`regression tests > switches selected element on pointer down > [end of
     "id3": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -14637,7 +14589,6 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 20,
   "scrollY": "-18.53553",
   "scrolledOutside": false,
@@ -14764,7 +14715,6 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -15160,7 +15110,6 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -15290,7 +15239,6 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
   },
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,

packages/excalidraw/types.ts

@@ -431,7 +431,6 @@ export interface AppState {
   userToFollow: UserToFollow | null;
   /** the socket ids of the users following the current user */
   followedBy: Set<SocketId>;
-  scrollConstraints: ScrollConstraints | null;
 
   /** image cropping */
   isCropping: boolean;
@@ -620,7 +619,6 @@ export interface ExcalidrawProps {
   onScrollChange?: (scrollX: number, scrollY: number, zoom: Zoom) => void;
   onUserFollow?: (payload: OnUserFollowedPayload) => void;
   children?: React.ReactNode;
-  scrollConstraints?: AppState["scrollConstraints"];
   validateEmbeddable?:
     | boolean
     | string[]
@@ -885,7 +883,6 @@ export interface ExcalidrawImperativeAPI {
   onUserFollow: (
     callback: (payload: OnUserFollowedPayload) => void,
   ) => UnsubscribeCallback;
-  setScrollConstraints: InstanceType<typeof App>["setScrollConstraints"];
 }
 
 export type Device = Readonly<{
@@ -921,12 +918,6 @@ export type FrameNameBoundsCache = {
   >;
 };
 
-export type AnimateTranslateCanvasValues = {
-  scrollX: AppState["scrollX"];
-  scrollY: AppState["scrollY"];
-  zoom: AppState["zoom"]["value"];
-};
-
 export type KeyboardModifiersObject = {
   ctrlKey: boolean;
   shiftKey: boolean;
@@ -952,29 +943,6 @@ export type EmbedsValidationStatus = Map<
 
 export type ElementsPendingErasure = Set<ExcalidrawElement["id"]>;
 
-export type ScrollConstraints = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  animateOnNextUpdate?: boolean;
-  /**
-   * a facotr <0-1> that determines how much you can zoom out beyond the scroll
-   * constraints.
-   */
-  viewportZoomFactor?: number;
-  /**
-   * If true, the user will not be able to zoom out beyond the scroll
-   * constraints (taking into account the viewportZoomFactor).
-   */
-  lockZoom?: boolean;
-  /**
-   * <0-1> - how much can you scroll beyond the constrained area within the
-   * timeout window. Note you will still be snapped back to the constrained area
-   * after the timeout.
-   */
-  overscrollAllowance?: number;
-};
 export type PendingExcalidrawElements = ExcalidrawElement[];
 
 /** Runtime gridSize value. Null indicates disabled grid. */

packages/utils/src/export.ts

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