wip: get exact bounding box from bitmap when exporting w/o padding

* feat: stop deleting whole line when no point select in line editor

* Comments typo

Co-authored-by: DanielJGeiger <1852529+DanielJGeiger@users.noreply.github.com>

src/actions/actionDeleteSelected.tsx

@@ -72,13 +72,22 @@ export const actionDeleteSelected = register({
       if (!element) {
         return false;
       }
-      if (
-        // case: no point selected → delete whole element
-        selectedPointsIndices == null ||
-        // case: deleting last remaining point
-        element.points.length < 2
-      ) {
-        const nextElements = elements.filter((el) => el.id !== element.id);
+      // case: no point selected → do nothing, as deleting the whole element
+      // is most likely a mistake, where you wanted to delete a specific point
+      // but failed to select it (or you thought it's selected, while it was
+      // only in a hover state)
+      if (selectedPointsIndices == null) {
+        return false;
+      }
+
+      // case: deleting last remaining point
+      if (element.points.length < 2) {
+        const nextElements = elements.map((el) => {
+          if (el.id === element.id) {
+            return newElementWith(el, { isDeleted: true });
+          }
+          return el;
+        });
         const nextAppState = handleGroupEditingState(appState, nextElements);
 
         return {

src/actions/actionExport.tsx

@@ -89,6 +89,28 @@ export const actionChangeExportScale = register({
   },
 });
 
+export const actionChangeExportPadding = register({
+  name: "changeExportPadding",
+  trackEvent: { category: "export", action: "togglePadding" },
+  perform: (_elements, appState, value) => {
+    return {
+      appState: {
+        ...appState,
+        exportPadding: value ? DEFAULT_EXPORT_PADDING : 0,
+      },
+      commitToHistory: false,
+    };
+  },
+  PanelComponent: ({ appState, updateData }) => (
+    <CheckboxItem
+      checked={!!appState.exportPadding}
+      onChange={(checked) => updateData(checked)}
+    >
+      {"Padding"}
+    </CheckboxItem>
+  ),
+});
+
 export const actionChangeExportBackground = register({
   name: "changeExportBackground",
   trackEvent: { category: "export", action: "toggleBackground" },

src/actions/shortcuts.ts

@@ -38,7 +38,7 @@ export type ShortcutName =
   | "imageExport";
 
 const shortcutMap: Record<ShortcutName, string[]> = {
-  toggleTheme: [getShortcutKey("Shit+Alt+D")],
+  toggleTheme: [getShortcutKey("Shift+Alt+D")],
   saveScene: [getShortcutKey("CtrlOrCmd+S")],
   loadScene: [getShortcutKey("CtrlOrCmd+O")],
   imageExport: [getShortcutKey("CtrlOrCmd+Shift+E")],

src/actions/types.ts

@@ -68,6 +68,7 @@ export type ActionName =
   | "finalize"
   | "changeProjectName"
   | "changeExportBackground"
+  | "changeExportPadding"
   | "changeExportEmbedScene"
   | "changeExportScale"
   | "saveToActiveFile"

src/appState.ts

@@ -1,5 +1,6 @@
 import oc from "open-color";
 import {
+  DEFAULT_EXPORT_PADDING,
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   DEFAULT_TEXT_ALIGN,
@@ -55,6 +56,7 @@ export const getDefaultAppState = (): Omit<
     exportScale: defaultExportScale,
     exportEmbedScene: false,
     exportWithDarkMode: false,
+    exportPadding: DEFAULT_EXPORT_PADDING,
     fileHandle: null,
     gridSize: null,
     isBindingEnabled: true,
@@ -145,6 +147,7 @@ const APP_STATE_STORAGE_CONF = (<
   exportBackground: { browser: true, export: false, server: false },
   exportEmbedScene: { browser: true, export: false, server: false },
   exportScale: { browser: true, export: false, server: false },
+  exportPadding: { browser: true, export: false, server: false },
   exportWithDarkMode: { browser: true, export: false, server: false },
   fileHandle: { browser: false, export: false, server: false },
   gridSize: { browser: true, export: true, server: true },

src/components/Actions.tsx

@@ -237,7 +237,7 @@ export const ShapesSwitcher = ({
           keyBindingLabel={`${numberKey}`}
           aria-label={capitalizeString(label)}
           aria-keyshortcuts={shortcut}
-          data-testid={value}
+          data-testid={`toolbar-${value}`}
           onPointerDown={({ pointerType }) => {
             if (!appState.penDetected && pointerType === "pen") {
               setAppState({

src/components/App.tsx

@@ -4836,10 +4836,6 @@ class App extends React.Component<AppProps, AppState> {
           } else {
             this.setState((prevState) => ({
               draggingElement: null,
-              selectedElementIds: {
-                ...prevState.selectedElementIds,
-                [draggingElement.id]: true,
-              },
             }));
           }
         }

src/components/ImageExportDialog.tsx

@@ -79,7 +79,6 @@ const ImageExportModal = ({
   elements,
   appState,
   files,
-  exportPadding = DEFAULT_EXPORT_PADDING,
   actionManager,
   onExportToPng,
   onExportToSvg,
@@ -88,7 +87,6 @@ const ImageExportModal = ({
   appState: AppState;
   elements: readonly NonDeletedExcalidrawElement[];
   files: BinaryFiles;
-  exportPadding?: number;
   actionManager: ActionManager;
   onExportToPng: ExportCB;
   onExportToSvg: ExportCB;
@@ -116,7 +114,7 @@ const ImageExportModal = ({
     exportToCanvas(exportedElements, appState, files, {
       exportBackground,
       viewBackgroundColor,
-      exportPadding,
+      exportPadding: appState.exportPadding,
     })
       .then((canvas) => {
         // if converting to blob fails, there's some problem that will
@@ -134,7 +132,6 @@ const ImageExportModal = ({
     files,
     exportedElements,
     exportBackground,
-    exportPadding,
     viewBackgroundColor,
   ]);
 
@@ -151,8 +148,10 @@ const ImageExportModal = ({
             // dunno why this is needed, but when the items wrap it creates
             // an overflow
             overflow: "hidden",
+            gap: ".6rem",
           }}
         >
+          {actionManager.renderAction("changeExportPadding")}
           {actionManager.renderAction("changeExportBackground")}
           {someElementIsSelected && (
             <CheckboxItem
@@ -221,7 +220,6 @@ export const ImageExportDialog = ({
   appState,
   setAppState,
   files,
-  exportPadding = DEFAULT_EXPORT_PADDING,
   actionManager,
   onExportToPng,
   onExportToSvg,
@@ -231,7 +229,6 @@ export const ImageExportDialog = ({
   setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
   files: BinaryFiles;
-  exportPadding?: number;
   actionManager: ActionManager;
   onExportToPng: ExportCB;
   onExportToSvg: ExportCB;
@@ -249,7 +246,6 @@ export const ImageExportDialog = ({
             elements={elements}
             appState={appState}
             files={files}
-            exportPadding={exportPadding}
             actionManager={actionManager}
             onExportToPng={onExportToPng}
             onExportToSvg={onExportToSvg}

src/components/LayerUI.tsx

@@ -144,6 +144,7 @@ const LayerUI = ({
             exportBackground: appState.exportBackground,
             name: appState.name,
             viewBackgroundColor: appState.viewBackgroundColor,
+            exportPadding: appState.exportPadding,
           },
         )
           .catch(muteFSAbortError)
@@ -213,7 +214,8 @@ const LayerUI = ({
               padding={2}
               style={{ zIndex: 1 }}
             >
-              {actionManager.renderAction("loadScene")}
+              {!appState.viewModeEnabled &&
+                actionManager.renderAction("loadScene")}
               {/* // TODO barnabasmolnar/editor-redesign  */}
               {/* is this fine here? */}
               {appState.fileHandle &&
@@ -234,7 +236,8 @@ const LayerUI = ({
                 />
               )}
               {actionManager.renderAction("toggleShortcuts", undefined, true)}
-              {actionManager.renderAction("clearCanvas")}
+              {!appState.viewModeEnabled &&
+                actionManager.renderAction("clearCanvas")}
               <Separator />
               <MenuLinks />
               <Separator />
@@ -249,14 +252,16 @@ const LayerUI = ({
                 <div style={{ padding: "0 0.625rem" }}>
                   <LanguageList style={{ width: "100%" }} />
                 </div>
-                <div>
-                  <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
-                    {t("labels.canvasBackground")}
+                {!appState.viewModeEnabled && (
+                  <div>
+                    <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
+                      {t("labels.canvasBackground")}
+                    </div>
+                    <div style={{ padding: "0 0.625rem" }}>
+                      {actionManager.renderAction("changeViewBackgroundColor")}
+                    </div>
                   </div>
-                  <div style={{ padding: "0 0.625rem" }}>
-                    {actionManager.renderAction("changeViewBackgroundColor")}
-                  </div>
-                </div>
+                )}
               </div>
             </Island>
           </Section>
@@ -299,12 +304,12 @@ const LayerUI = ({
     return (
       <FixedSideContainer side="top">
         {renderWelcomeScreen && !appState.isLoading && (
-          <WelcomeScreen actionManager={actionManager} />
+          <WelcomeScreen appState={appState} actionManager={actionManager} />
         )}
         <div className="App-menu App-menu_top">
           <Stack.Col
             gap={6}
-            className={clsx({
+            className={clsx("App-menu_top__left", {
               "disable-pointerEvents": appState.zenModeEnabled,
             })}
           >
@@ -405,7 +410,9 @@ const LayerUI = ({
               />
             )}
             {renderTopRightUI?.(device.isMobile, appState)}
-            <LibraryButton appState={appState} setAppState={setAppState} />
+            {!appState.viewModeEnabled && (
+              <LibraryButton appState={appState} setAppState={setAppState} />
+            )}
           </div>
         </div>
       </FixedSideContainer>

src/components/LockButton.tsx

@@ -39,6 +39,7 @@ export const LockButton = (props: LockIconProps) => {
         onChange={props.onChange}
         checked={props.checked}
         aria-label={props.title}
+        data-testid="toolbar-lock"
       />
       <div className="ToolIcon__icon">
         {props.checked ? ICONS.CHECKED : ICONS.UNCHECKED}

src/components/MobileMenu.tsx

@@ -75,7 +75,7 @@ export const MobileMenu = ({
     return (
       <FixedSideContainer side="top" className="App-top-bar">
         {renderWelcomeScreen && !appState.isLoading && (
-          <WelcomeScreen actionManager={actionManager} />
+          <WelcomeScreen appState={appState} actionManager={actionManager} />
         )}
         <Section heading="shapes">
           {(heading: React.ReactNode) => (
@@ -127,11 +127,13 @@ export const MobileMenu = ({
                     title={t("toolBar.lock")}
                     isMobile
                   />
-                  <LibraryButton
-                    appState={appState}
-                    setAppState={setAppState}
-                    isMobile
-                  />
+                  {!appState.viewModeEnabled && (
+                    <LibraryButton
+                      appState={appState}
+                      setAppState={setAppState}
+                      isMobile
+                    />
+                  )}
                 </div>
               </Stack.Row>
             </Stack.Col>
@@ -187,7 +189,7 @@ export const MobileMenu = ({
     }
     return (
       <>
-        {actionManager.renderAction("loadScene")}
+        {!appState.viewModeEnabled && actionManager.renderAction("loadScene")}
         {renderJSONExportDialog()}
         {renderImageExportDialog()}
         <MenuItem
@@ -204,18 +206,20 @@ export const MobileMenu = ({
           />
         )}
         {actionManager.renderAction("toggleShortcuts", undefined, true)}
-        {actionManager.renderAction("clearCanvas")}
+        {!appState.viewModeEnabled && actionManager.renderAction("clearCanvas")}
         <Separator />
         <MenuLinks />
         <Separator />
-        <div style={{ marginBottom: ".5rem" }}>
-          <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
-            {t("labels.canvasBackground")}
+        {!appState.viewModeEnabled && (
+          <div style={{ marginBottom: ".5rem" }}>
+            <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
+              {t("labels.canvasBackground")}
+            </div>
+            <div style={{ padding: "0 0.625rem" }}>
+              {actionManager.renderAction("changeViewBackgroundColor")}
+            </div>
           </div>
-          <div style={{ padding: "0 0.625rem" }}>
-            {actionManager.renderAction("changeViewBackgroundColor")}
-          </div>
-        </div>
+        )}
         {actionManager.renderAction("toggleTheme")}
       </>
     );

src/components/WelcomeScreen.tsx

@@ -5,6 +5,7 @@ import { getShortcutFromShortcutName } from "../actions/shortcuts";
 import { COOKIES } from "../constants";
 import { collabDialogShownAtom } from "../excalidraw-app/collab/Collab";
 import { t } from "../i18n";
+import { AppState } from "../types";
 import {
   ExcalLogo,
   HelpIcon,
@@ -60,7 +61,13 @@ const WelcomeScreenItem = ({
   );
 };
 
-const WelcomeScreen = ({ actionManager }: { actionManager: ActionManager }) => {
+const WelcomeScreen = ({
+  appState,
+  actionManager,
+}: {
+  appState: AppState;
+  actionManager: ActionManager;
+}) => {
   const [, setCollabDialogShown] = useAtom(collabDialogShownAtom);
 
   let subheadingJSX;
@@ -68,12 +75,13 @@ const WelcomeScreen = ({ actionManager }: { actionManager: ActionManager }) => {
   if (isExcalidrawPlusSignedUser) {
     subheadingJSX = t("welcomeScreen.switchToPlusApp")
       .split(/(Excalidraw\+)/)
-      .map((bit) => {
+      .map((bit, idx) => {
         if (bit === "Excalidraw+") {
           return (
             <a
               style={{ pointerEvents: "all" }}
               href={`${process.env.REACT_APP_PLUS_APP}?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenSignedInUser`}
+              key={idx}
             >
               Excalidraw+
             </a>
@@ -94,15 +102,17 @@ const WelcomeScreen = ({ actionManager }: { actionManager: ActionManager }) => {
         {subheadingJSX}
       </div>
       <div className="WelcomeScreen-items">
-        <WelcomeScreenItem
-          // TODO barnabasmolnar/editor-redesign
-          // do we want the internationalized labels here that are currently
-          // in use elsewhere or new ones?
-          label={t("buttons.load")}
-          onClick={() => actionManager.executeAction(actionLoadScene)}
-          shortcut={getShortcutFromShortcutName("loadScene")}
-          icon={LoadIcon}
-        />
+        {!appState.viewModeEnabled && (
+          <WelcomeScreenItem
+            // TODO barnabasmolnar/editor-redesign
+            // do we want the internationalized labels here that are currently
+            // in use elsewhere or new ones?
+            label={t("buttons.load")}
+            onClick={() => actionManager.executeAction(actionLoadScene)}
+            shortcut={getShortcutFromShortcutName("loadScene")}
+            icon={LoadIcon}
+          />
+        )}
         <WelcomeScreenItem
           label={t("labels.liveCollaboration")}
           shortcut={null}

src/element/bounds.ts

@@ -492,7 +492,7 @@ export const getElementBounds = (
 
 export const getCommonBounds = (
   elements: readonly ExcalidrawElement[],
-): [number, number, number, number] => {
+): [minX: number, minY: number, maxX: number, maxY: number] => {
   if (!elements.length) {
     return [0, 0, 0, 0];
   }

src/hooks/useOutsideClick.ts

@@ -21,10 +21,11 @@ export const useOutsideClickHook = (handler: (event: Event) => void) => {
 
         handler(event);
       };
-      document.addEventListener("mousedown", listener);
+
+      document.addEventListener("pointerdown", listener);
       document.addEventListener("touchstart", listener);
       return () => {
-        document.removeEventListener("mousedown", listener);
+        document.removeEventListener("pointerdown", listener);
         document.removeEventListener("touchstart", listener);
       };
     },

src/scene/export.ts

@@ -14,6 +14,102 @@ import {
 
 export const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
 
+const getExactBoundingBox = async (
+  elements: readonly NonDeletedExcalidrawElement[],
+  appState: {
+    exportBackground: boolean;
+    exportPadding?: number;
+    exportScale?: number;
+    viewBackgroundColor: string;
+    exportWithDarkMode?: boolean;
+    exportEmbedScene?: boolean;
+  },
+  files: BinaryFiles,
+): Promise<
+  [offsetLeft: number, offsetTop: number, width: number, height: number]
+> => {
+  const padding = DEFAULT_EXPORT_PADDING;
+  // const padding = 0;
+  const [minX, minY, width, height] = getApproximateCanvasSize(
+    elements,
+    padding,
+  );
+
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+
+  const { imageCache } = await updateImageCache({
+    imageCache: new Map(),
+    fileIds: getInitializedImageElements(elements).map(
+      (element) => element.fileId,
+    ),
+    files,
+  });
+
+  const defaultAppState = getDefaultAppState();
+
+  renderScene({
+    elements,
+    // @ts-ignore
+    appState,
+    scale: 1,
+    rc: rough.canvas(canvas),
+    canvas,
+    renderConfig: {
+      viewBackgroundColor: null,
+      scrollX: -minX + padding,
+      scrollY: -minY + padding,
+      zoom: defaultAppState.zoom,
+      remotePointerViewportCoords: {},
+      remoteSelectedElementIds: {},
+      shouldCacheIgnoreZoom: false,
+      remotePointerUsernames: {},
+      remotePointerUserStates: {},
+      theme: "light",
+      imageCache,
+      renderScrollbars: false,
+      renderSelection: false,
+      renderGrid: false,
+      isExporting: true,
+    },
+  });
+
+  const ctx = canvas.getContext("2d")!;
+  const { data } = ctx.getImageData(0, 0, width, height);
+
+  let _minX = Infinity;
+  let _minY = Infinity;
+  let _maxX = -Infinity;
+  let _maxY = -Infinity;
+
+  const rows = [];
+  let row: number[][] = [];
+  for (let i = 0; i < data.length - 1; i = i + 4) {
+    if (i && i % (width * 4) === 0) {
+      rows.push(row);
+      row = [];
+    }
+    const pixel = [data[i], data[i + 1], data[i + 2], data[i + 3]];
+    row.push(pixel);
+  }
+
+  for (const [y, row] of rows.entries()) {
+    for (const [x, pixel] of row.entries()) {
+      if (pixel[3] > 0) {
+        _minX = Math.min(_minX, x);
+        _minY = Math.min(_minY, y);
+        _maxX = Math.max(_maxX, x);
+        _maxY = Math.max(_maxY, y);
+      }
+    }
+  }
+
+  const offsetLeft = padding - _minX;
+  const offsetTop = padding - _minY;
+
+  return [offsetLeft, offsetTop, _maxX - _minX, _maxY - _minY];
+};
 export const exportToCanvas = async (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: AppState,
@@ -37,7 +133,12 @@ export const exportToCanvas = async (
     return { canvas, scale: appState.exportScale };
   },
 ) => {
-  const [minX, minY, width, height] = getCanvasSize(elements, exportPadding);
+  const [scrollX, scrollY, width, height] = await getCanvasSize(
+    elements,
+    appState,
+    files,
+    exportPadding,
+  );
 
   const { canvas, scale = 1 } = createCanvas(width, height);
 
@@ -59,8 +160,8 @@ export const exportToCanvas = async (
     canvas,
     renderConfig: {
       viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
-      scrollX: -minX + exportPadding,
-      scrollY: -minY + exportPadding,
+      scrollX,
+      scrollY,
       zoom: defaultAppState.zoom,
       remotePointerViewportCoords: {},
       remoteSelectedElementIds: {},
@@ -109,7 +210,12 @@ export const exportToSvg = async (
       console.error(error);
     }
   }
-  const [minX, minY, width, height] = getCanvasSize(elements, exportPadding);
+  const [minX, minY, width, height] = await getCanvasSize(
+    elements,
+    appState,
+    files || {},
+    exportPadding,
+  );
 
   // initialize SVG root
   const svgRoot = document.createElementNS(SVG_NS, "svg");
@@ -172,26 +278,66 @@ export const exportToSvg = async (
   return svgRoot;
 };
 
-// calculate smallest area to fit the contents in
-const getCanvasSize = (
+const getApproximateCanvasSize = (
   elements: readonly NonDeletedExcalidrawElement[],
   exportPadding: number,
 ): [number, number, number, number] => {
-  const [minX, minY, maxX, maxY] = getCommonBounds(elements);
+  const bounds = getCommonBounds(elements);
+
+  const minX = Math.floor(bounds[0]);
+  const minY = Math.floor(bounds[1]);
+  const maxX = Math.ceil(bounds[2]);
+  const maxY = Math.ceil(bounds[3]);
+
   const width = distance(minX, maxX) + exportPadding * 2;
-  const height = distance(minY, maxY) + exportPadding + exportPadding;
+  const height =
+    Math.ceil(distance(minY, maxY)) + exportPadding + exportPadding;
 
   return [minX, minY, width, height];
 };
 
+// calculate smallest area to fit the contents in
+const getCanvasSize = async (
+  elements: readonly NonDeletedExcalidrawElement[],
+  appState: {
+    exportBackground: boolean;
+    exportPadding?: number;
+    exportScale?: number;
+    viewBackgroundColor: string;
+    exportWithDarkMode?: boolean;
+    exportEmbedScene?: boolean;
+  },
+  files: BinaryFiles,
+  exportPadding: number,
+): Promise<[number, number, number, number]> => {
+  if (exportPadding) {
+    const [minX, minY, width, height] = getApproximateCanvasSize(
+      elements,
+      exportPadding,
+    );
+
+    return [-minX + exportPadding, -minY + exportPadding, width, height];
+  } else {
+    const [minX, minY] = getApproximateCanvasSize(elements, exportPadding);
+
+    const [offsetLeft, offsetRight, width, height] = await getExactBoundingBox(
+      elements,
+      appState,
+      files,
+    );
+    return [-minX + offsetLeft, -minY + offsetRight, width, height];
+  }
+};
+
 export const getExportSize = (
   elements: readonly NonDeletedExcalidrawElement[],
   exportPadding: number,
   scale: number,
 ): [number, number] => {
-  const [, , width, height] = getCanvasSize(elements, exportPadding).map(
-    (dimension) => Math.trunc(dimension * scale),
-  );
+  const [, , width, height] = getApproximateCanvasSize(
+    elements,
+    exportPadding,
+  ).map((dimension) => Math.trunc(dimension * scale));
 
   return [width, height];
 };

src/tests/queries/toolQueries.ts

@@ -1,6 +1,7 @@
 import { queries, buildQueries } from "@testing-library/react";
 
 const toolMap = {
+  lock: "lock",
   selection: "selection",
   rectangle: "rectangle",
   diamond: "diamond",
@@ -15,7 +16,7 @@ export type ToolName = keyof typeof toolMap;
 
 const _getAllByToolName = (container: HTMLElement, tool: string) => {
   const toolTitle = toolMap[tool as ToolName];
-  return queries.getAllByTestId(container, toolTitle);
+  return queries.getAllByTestId(container, `toolbar-${toolTitle}`);
 };
 
 const getMultipleError = (_container: any, tool: any) =>

src/tests/selection.test.tsx

@@ -11,7 +11,8 @@ import * as Renderer from "../renderer/renderScene";
 import { KEYS } from "../keys";
 import { reseed } from "../random";
 import { API } from "./helpers/api";
-import { Keyboard, Pointer } from "./helpers/ui";
+import { Keyboard, Pointer, UI } from "./helpers/ui";
+import { SHAPES } from "../shapes";
 
 // Unmount ReactDOM from root
 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
@@ -380,3 +381,19 @@ describe("select single element on the scene", () => {
     h.elements.forEach((element) => expect(element).toMatchSnapshot());
   });
 });
+
+describe("tool locking & selection", () => {
+  it("should not select newly created element while tool is locked", async () => {
+    await render(<ExcalidrawApp />);
+
+    UI.clickTool("lock");
+    expect(h.state.activeTool.locked).toBe(true);
+
+    for (const { value } of Object.values(SHAPES)) {
+      if (value !== "image" && value !== "selection") {
+        const element = UI.createElement(value);
+        expect(h.state.selectedElementIds[element.id]).not.toBe(true);
+      }
+    }
+  });
+});

src/types.ts

@@ -113,6 +113,7 @@ export type AppState = {
   exportEmbedScene: boolean;
   exportWithDarkMode: boolean;
   exportScale: number;
+  exportPadding: number;
   currentItemStrokeColor: string;
   currentItemBackgroundColor: string;
   currentItemFillStyle: ExcalidrawElement["fillStyle"];