fix test

* Fix #5848.

* Add test.

* some tweaks

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>

.dockerignore

@@ -1,5 +1,6 @@
 *
-!.env
+!.env.development
+!.env.production
 !.eslintrc.json
 !.npmrc
 !.prettierrc

.env.development

@@ -20,3 +20,5 @@ REACT_APP_DEV_ENABLE_SW=
 # whether to disable live reload / HMR. Usuaully what you want to do when
 # debugging Service Workers.
 REACT_APP_DEV_DISABLE_LIVE_RELOAD=
+
+FAST_REFRESH=false

src/components/Actions.tsx

@@ -218,13 +218,12 @@ export const ShapesSwitcher = ({
   appState: AppState;
 }) => (
   <>
-    {SHAPES.map(({ value, icon, key, fillable }, index) => {
+    {SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {
-      const numberKey = value === "eraser" ? 0 : index + 1;
       const label = t(`toolBar.${value}`);
       const letter = key && (typeof key === "string" ? key : key[0]);
       const shortcut = letter
-        ? `${capitalizeString(letter)} ${t("helpDialog.or")} ${numberKey}`
+        ? `${capitalizeString(letter)} ${t("helpDialog.or")} ${numericKey}`
-        : `${numberKey}`;
+        : `${numericKey}`;
       return (
         <ToolButton
           className={clsx("Shape", { fillable })}
@@ -234,7 +233,7 @@ export const ShapesSwitcher = ({
           checked={activeTool.type === value}
           name="editor-current-shape"
           title={`${capitalizeString(label)} — ${shortcut}`}
-          keyBindingLabel={`${numberKey}`}
+          keyBindingLabel={numericKey}
           aria-label={capitalizeString(label)}
           aria-keyshortcuts={shortcut}
           data-testid={`toolbar-${value}`}

src/components/App.tsx

@@ -1912,18 +1912,6 @@ class App extends React.Component<AppProps, AppState> {
         this.setState({ isBindingEnabled: false });
       }
 
-      if (event.code === CODES.ZERO) {
-        const nextState = this.toggleMenu("library");
-        // track only openings
-        if (nextState) {
-          trackEvent(
-            "library",
-            "toggleLibrary (open)",
-            `keyboard (${this.device.isMobile ? "mobile" : "desktop"})`,
-          );
-        }
-      }
-
       if (isArrowKey(event.key)) {
         const step =
           (this.state.gridSize &&
@@ -5243,6 +5231,7 @@ class App extends React.Component<AppProps, AppState> {
               id: fileId,
               dataURL,
               created: Date.now(),
+              lastRetrieved: Date.now(),
             },
           };
           const cachedImageData = this.imageCache.get(fileId);

src/components/HelpDialog.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { t } from "../i18n";
-import { isDarwin, isWindows } from "../keys";
+import { isDarwin, isWindows, KEYS } from "../keys";
 import { Dialog } from "./Dialog";
 import { getShortcutKey } from "../utils";
 import "./HelpDialog.scss";
@@ -118,22 +118,42 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
             className="HelpDialog__island--tools"
             caption={t("helpDialog.tools")}
           >
-            <Shortcut label={t("toolBar.selection")} shortcuts={["V", "1"]} />
+            <Shortcut
-            <Shortcut label={t("toolBar.rectangle")} shortcuts={["R", "2"]} />
+              label={t("toolBar.selection")}
-            <Shortcut label={t("toolBar.diamond")} shortcuts={["D", "3"]} />
+              shortcuts={[KEYS.V, KEYS["1"]]}
-            <Shortcut label={t("toolBar.ellipse")} shortcuts={["O", "4"]} />
+            />
-            <Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} />
+            <Shortcut
-            <Shortcut label={t("toolBar.line")} shortcuts={["P", "6"]} />
+              label={t("toolBar.rectangle")}
+              shortcuts={[KEYS.R, KEYS["2"]]}
+            />
+            <Shortcut
+              label={t("toolBar.diamond")}
+              shortcuts={[KEYS.D, KEYS["3"]]}
+            />
+            <Shortcut
+              label={t("toolBar.ellipse")}
+              shortcuts={[KEYS.O, KEYS["4"]]}
+            />
+            <Shortcut
+              label={t("toolBar.arrow")}
+              shortcuts={[KEYS.A, KEYS["5"]]}
+            />
+            <Shortcut
+              label={t("toolBar.line")}
+              shortcuts={[KEYS.P, KEYS["6"]]}
+            />
             <Shortcut
               label={t("toolBar.freedraw")}
-              shortcuts={["Shift + P", "X", "7"]}
+              shortcuts={["Shift + P", KEYS["7"]]}
             />
-            <Shortcut label={t("toolBar.text")} shortcuts={["T", "8"]} />
+            <Shortcut
-            <Shortcut label={t("toolBar.image")} shortcuts={["9"]} />
+              label={t("toolBar.text")}
-            <Shortcut label={t("toolBar.library")} shortcuts={["0"]} />
+              shortcuts={[KEYS.T, KEYS["8"]]}
+            />
+            <Shortcut label={t("toolBar.image")} shortcuts={[KEYS["9"]]} />
             <Shortcut
               label={t("toolBar.eraser")}
-              shortcuts={[getShortcutKey("E")]}
+              shortcuts={[KEYS.E, KEYS["0"]]}
             />
             <Shortcut
               label={t("helpDialog.editSelectedShape")}
@@ -173,7 +193,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               ]}
               isOr={false}
             />
-            <Shortcut label={t("toolBar.lock")} shortcuts={["Q"]} />
+            <Shortcut label={t("toolBar.lock")} shortcuts={[KEYS.Q]} />
             <Shortcut
               label={t("helpDialog.preventBinding")}
               shortcuts={[getShortcutKey("CtrlOrCmd")]}

src/components/LibraryButton.tsx

@@ -22,7 +22,7 @@ export const LibraryButton: React.FC<{
   }
 
   return (
-    <label title={`${capitalizeString(t("toolBar.library"))} — 0`}>
+    <label title={`${capitalizeString(t("toolBar.library"))}`}>
       <input
         className="ToolIcon_type_checkbox"
         type="checkbox"

src/element/newElement.ts

@@ -169,8 +169,7 @@ const getAdjustedDimensions = (
   let maxWidth = null;
   const container = getContainerElement(element);
   if (container) {
-    const containerDims = getContainerDims(container);
+    maxWidth = getMaxContainerWidth(container);
-    maxWidth = containerDims.width - BOUND_TEXT_PADDING * 2;
   }
   const {
     width: nextWidth,
@@ -258,7 +257,6 @@ export const refreshTextDimensions = (
 ) => {
   const container = getContainerElement(textElement);
   if (container) {
-    // text = wrapText(text, getFontString(textElement), container.width);
     text = wrapText(
       text,
       getFontString(textElement),

src/element/textElement.ts

@@ -19,13 +19,12 @@ export const redrawTextBoundingBox = (
 ) => {
   let maxWidth = undefined;
   let text = textElement.text;
-
   if (container) {
     maxWidth = getMaxContainerWidth(container);
     text = wrapText(
       textElement.originalText,
       getFontString(textElement),
-      getMaxContainerWidth(container),
+      maxWidth,
     );
   }
   const metrics = measureText(
@@ -230,10 +229,9 @@ export const measureText = (
   const baseline = span.offsetTop + span.offsetHeight;
   // Since span adds 1px extra width to the container
   const width = container.offsetWidth + 1;
-
   const height = container.offsetHeight;
-  document.body.removeChild(container);
 
+  document.body.removeChild(container);
   return { width, height, baseline };
 };
 

src/element/textWysiwyg.test.tsx

@@ -10,11 +10,13 @@ import { BOUND_TEXT_PADDING, FONT_FAMILY } from "../constants";
 import {
   ExcalidrawTextElement,
   ExcalidrawTextElementWithContainer,
+  FontString,
 } from "./types";
 import * as textElementUtils from "./textElement";
 import { API } from "../tests/helpers/api";
 import { mutateElement } from "./mutateElement";
 import { resize } from "../tests/utils";
+import { getMaxContainerWidth } from "./newElement";
 // Unmount ReactDOM from root
 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
 
@@ -433,6 +435,25 @@ describe("textWysiwyg", () => {
       );
       expect(h.state.zoom.value).toBe(1);
     });
+
+    it("should paste text correctly", async () => {
+      Keyboard.keyPress(KEYS.ENTER);
+      await new Promise((r) => setTimeout(r, 0));
+      const text = "A quick brown fox jumps over the lazy dog.";
+
+      //@ts-ignore
+      textarea.onpaste({
+        preventDefault: () => {},
+        //@ts-ignore
+        clipboardData: {
+          getData: () => text,
+        },
+      });
+
+      await new Promise((cb) => setTimeout(cb, 0));
+      textarea.blur();
+      expect(textElement.text).toBe(text);
+    });
   });
 
   describe("Test container-bound text", () => {
@@ -876,5 +897,68 @@ describe("textWysiwyg", () => {
         ]
       `);
     });
+
+    it("should compute the dimensions correctly when text pasted", async () => {
+      Keyboard.keyPress(KEYS.ENTER);
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+      await new Promise((r) => setTimeout(r, 0));
+      const font = "20px Cascadia, width: Segoe UI Emoji" as FontString;
+
+      const wrappedText = textElementUtils.wrapText(
+        "Wikipedia is hosted by the Wikimedia Foundation, a non-profit organization that also hosts a range of other projects.",
+        font,
+        getMaxContainerWidth(rectangle),
+      );
+
+      jest
+        .spyOn(textElementUtils, "measureText")
+        .mockImplementation((text, font, maxWidth) => {
+          if (text === wrappedText) {
+            return { width: rectangle.width, height: 200, baseline: 30 };
+          }
+          return { width: 0, height: 0, baseline: 0 };
+        });
+
+      //@ts-ignore
+      editor.onpaste({
+        preventDefault: () => {},
+        //@ts-ignore
+        clipboardData: {
+          getData: () =>
+            "Wikipedia is hosted by the Wikimedia Foundation, a non-profit organization that also hosts a range of other projects.",
+        },
+      });
+
+      await new Promise((cb) => setTimeout(cb, 0));
+      editor.blur();
+      expect(rectangle.width).toBe(100);
+      expect(rectangle.height).toBe(210);
+      const textElement = h.elements[1] as ExcalidrawTextElement;
+      expect(textElement.text).toMatchInlineSnapshot(
+        `
+        "Wikipedi
+        a is 
+        hosted 
+        by the 
+        Wikimedi
+        a 
+        Foundati
+        on, a 
+        non-prof
+        it 
+        organiza
+        tion 
+        that 
+        also 
+        hosts a 
+        range of
+        other 
+        projects
+        ."
+      `,
+      );
+    });
   });
 });

src/element/textWysiwyg.tsx

@@ -20,6 +20,7 @@ import {
   getBoundTextElementId,
   getContainerDims,
   getContainerElement,
+  measureText,
   wrapText,
 } from "./textElement";
 import {
@@ -29,6 +30,7 @@ import {
 import { actionZoomIn, actionZoomOut } from "../actions/actionCanvas";
 import App from "../components/App";
 import { getMaxContainerWidth } from "./newElement";
+import { parseClipboard } from "../clipboard";
 
 const normalizeText = (text: string) => {
   return (
@@ -275,6 +277,35 @@ export const textWysiwyg = ({
   updateWysiwygStyle();
 
   if (onChange) {
+    editable.onpaste = async (event) => {
+      event.preventDefault();
+      const clipboardData = await parseClipboard(event);
+      if (!clipboardData.text) {
+        return;
+      }
+      const data = normalizeText(clipboardData.text);
+      const container = getContainerElement(element);
+
+      const font = getFontString({
+        fontSize: app.state.currentItemFontSize,
+        fontFamily: app.state.currentItemFontFamily,
+      });
+
+      if (data) {
+        const text = editable.value;
+        const start = Math.min(editable.selectionStart, editable.selectionEnd);
+        const end = Math.max(editable.selectionStart, editable.selectionEnd);
+        const newText = `${text.substring(0, start)}${data}${text.substring(
+          end,
+        )}`;
+        const wrappedText = container
+          ? wrapText(newText, font, getMaxContainerWidth(container!))
+          : newText;
+        const dimensions = measureText(wrappedText, font);
+        editable.style.height = `${dimensions.height}px`;
+        onChange(newText);
+      }
+    };
     editable.oninput = () => {
       const updatedTextElement = Scene.getScene(element)?.getElement(
         id,

src/excalidraw-app/collab/Collab.tsx

@@ -310,16 +310,27 @@ class Collab extends PureComponent<Props, CollabState> {
     }
   };
 
-  private fetchImageFilesFromFirebase = async (scene: {
+  private fetchImageFilesFromFirebase = async (opts: {
     elements: readonly ExcalidrawElement[];
+    /**
+     * Indicates whether to fetch files that are errored or pending and older
+     * than 10 seconds.
+     *
+     * Use this as a machanism to fetch files which may be ok but for some
+     * reason their status was not updated correctly.
+     */
+    forceFetchFiles?: boolean;
   }) => {
-    const unfetchedImages = scene.elements
+    const unfetchedImages = opts.elements
       .filter((element) => {
         return (
           isInitializedImageElement(element) &&
           !this.fileManager.isFileHandled(element.fileId) &&
           !element.isDeleted &&
-          element.status === "saved"
+          (opts.forceFetchFiles
+            ? element.status !== "pending" ||
+              Date.now() - element.updated > 10000
+            : element.status === "saved")
         );
       })
       .map((element) => (element as InitializedExcalidrawImageElement).fileId);

src/excalidraw-app/data/FileManager.ts

@@ -195,6 +195,7 @@ export const encodeFilesForUpload = async ({
         id,
         mimeType: fileData.mimeType,
         created: Date.now(),
+        lastRetrieved: Date.now(),
       },
     });
 

src/excalidraw-app/data/LocalData.ts

@@ -10,7 +10,7 @@
  *   (localStorage, indexedDB).
  */
 
-import { createStore, keys, del, getMany, set } from "idb-keyval";
+import { createStore, entries, del, getMany, set, setMany } from "idb-keyval";
 import { clearAppStateForLocalStorage } from "../../appState";
 import { clearElementsForLocalStorage } from "../../element";
 import { ExcalidrawElement, FileId } from "../../element/types";
@@ -25,12 +25,21 @@ const filesStore = createStore("files-db", "files-store");
 
 class LocalFileManager extends FileManager {
   clearObsoleteFiles = async (opts: { currentFileIds: FileId[] }) => {
-    const allIds = await keys(filesStore);
+    await entries(filesStore).then((entries) => {
-    for (const id of allIds) {
+      for (const [id, imageData] of entries as [FileId, BinaryFileData][]) {
-      if (!opts.currentFileIds.includes(id as FileId)) {
+        // if image is unused (not on canvas) & is older than 1 day, delete it
-        del(id, filesStore);
+        // from storage. We check `lastRetrieved` we care about the last time
+        // the image was used (loaded on canvas), not when it was initially
+        // created.
+        if (
+          (!imageData.lastRetrieved ||
+            Date.now() - imageData.lastRetrieved > 24 * 3600 * 1000) &&
+          !opts.currentFileIds.includes(id as FileId)
+        ) {
+          del(id, filesStore);
+        }
       }
-    }
+    });
   };
 }
 
@@ -111,18 +120,33 @@ export class LocalData {
   static fileStorage = new LocalFileManager({
     getFiles(ids) {
       return getMany(ids, filesStore).then(
-        (filesData: (BinaryFileData | undefined)[]) => {
+        async (filesData: (BinaryFileData | undefined)[]) => {
           const loadedFiles: BinaryFileData[] = [];
           const erroredFiles = new Map<FileId, true>();
+
+          const filesToSave: [FileId, BinaryFileData][] = [];
+
           filesData.forEach((data, index) => {
             const id = ids[index];
             if (data) {
-              loadedFiles.push(data);
+              const _data: BinaryFileData = {
+                ...data,
+                lastRetrieved: Date.now(),
+              };
+              filesToSave.push([id, _data]);
+              loadedFiles.push(_data);
             } else {
               erroredFiles.set(id, true);
             }
           });
 
+          try {
+            // save loaded files back to storage with updated `lastRetrieved`
+            setMany(filesToSave, filesStore);
+          } catch (error) {
+            console.warn(error);
+          }
+
           return { loadedFiles, erroredFiles };
         },
       );

src/excalidraw-app/data/firebase.ts

@@ -330,6 +330,7 @@ export const loadFilesFromFirebase = async (
             id,
             dataURL,
             created: metadata?.created || Date.now(),
+            lastRetrieved: metadata?.created || Date.now(),
           });
         } else {
           erroredFiles.set(id, true);

src/excalidraw-app/index.tsx

@@ -285,6 +285,7 @@ const ExcalidrawWrapper = () => {
           collabAPI
             .fetchImageFilesFromFirebase({
               elements: data.scene.elements,
+              forceFetchFiles: true,
             })
             .then(({ loadedFiles, erroredFiles }) => {
               excalidrawAPI.addFiles(loadedFiles);

src/keys.ts

@@ -63,6 +63,17 @@ export const KEYS = {
   Y: "y",
   Z: "z",
   K: "k",
+
+  0: "0",
+  1: "1",
+  2: "2",
+  3: "3",
+  4: "4",
+  5: "5",
+  6: "6",
+  7: "7",
+  8: "8",
+  9: "9",
 } as const;
 
 export type Key = keyof typeof KEYS;

src/packages/excalidraw/example/App.tsx

@@ -148,6 +148,7 @@ export default function App() {
             dataURL: reader.result as BinaryFileData["dataURL"],
             mimeType: MIME_TYPES.jpg,
             created: 1644915140367,
+            lastRetrieved: 1644915140367,
           },
         ];
 

src/renderer/renderScene.ts

@@ -406,6 +406,8 @@ export const _renderScene = ({
       }),
     );
 
+    let editingLinearElement: NonDeleted<ExcalidrawLinearElement> | undefined =
+      undefined;
     visibleElements.forEach((element) => {
       try {
         renderElement(element, rc, context, renderConfig);
@@ -414,15 +416,10 @@ export const _renderScene = ({
         // correct element from visible elements
         if (appState.editingLinearElement?.elementId === element.id) {
           if (element) {
-            renderLinearPointHandles(
+            editingLinearElement =
-              context,
+              element as NonDeleted<ExcalidrawLinearElement>;
-              appState,
-              renderConfig,
-              element as NonDeleted<ExcalidrawLinearElement>,
-            );
           }
         }
-
         if (!isExporting) {
           renderLinkIcon(element, context, appState);
         }
@@ -431,6 +428,15 @@ export const _renderScene = ({
       }
     });
 
+    if (editingLinearElement) {
+      renderLinearPointHandles(
+        context,
+        appState,
+        renderConfig,
+        editingLinearElement,
+      );
+    }
+
     // Paint selection element
     if (appState.selectionElement) {
       try {

src/shapes.tsx

@@ -17,60 +17,70 @@ export const SHAPES = [
     icon: SelectionIcon,
     value: "selection",
     key: KEYS.V,
+    numericKey: KEYS["1"],
     fillable: true,
   },
   {
     icon: RectangleIcon,
     value: "rectangle",
     key: KEYS.R,
+    numericKey: KEYS["2"],
     fillable: true,
   },
   {
     icon: DiamondIcon,
     value: "diamond",
     key: KEYS.D,
+    numericKey: KEYS["3"],
     fillable: true,
   },
   {
     icon: EllipseIcon,
     value: "ellipse",
     key: KEYS.O,
+    numericKey: KEYS["4"],
     fillable: true,
   },
   {
     icon: ArrowIcon,
     value: "arrow",
     key: KEYS.A,
+    numericKey: KEYS["5"],
     fillable: true,
   },
   {
     icon: LineIcon,
     value: "line",
-    key: [KEYS.P, KEYS.L],
+    key: KEYS.L,
+    numericKey: KEYS["6"],
     fillable: true,
   },
   {
     icon: FreedrawIcon,
     value: "freedraw",
-    key: [KEYS.X, KEYS.P.toUpperCase()],
+    key: [KEYS.P, KEYS.X],
+    numericKey: KEYS["7"],
     fillable: false,
   },
   {
     icon: TextIcon,
     value: "text",
     key: KEYS.T,
+    numericKey: KEYS["8"],
     fillable: false,
   },
   {
     icon: ImageIcon,
     value: "image",
     key: null,
+    numericKey: KEYS["9"],
     fillable: false,
   },
   {
     icon: EraserIcon,
     value: "eraser",
     key: KEYS.E,
+    numericKey: KEYS["0"],
     fillable: false,
   },
 ] as const;
@@ -78,7 +88,7 @@ export const SHAPES = [
 export const findShapeByKey = (key: string) => {
   const shape = SHAPES.find((shape, index) => {
     return (
-      key === (shape.value === "eraser" ? 0 : index + 1).toString() ||
+      (shape.numericKey != null && key === shape.numericKey.toString()) ||
       (shape.key &&
         (typeof shape.key === "string"
           ? shape.key === key

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -12410,6 +12410,234 @@ exports[`regression tests key o selects ellipse tool: [end of test] number of el
 
 exports[`regression tests key o selects ellipse tool: [end of test] number of renders 1`] = `9`;
 
+exports[`regression tests key p selects freedraw tool: [end of test] appState 1`] = `
+Object {
+  "activeTool": Object {
+    "customType": null,
+    "lastActiveToolBeforeEraser": null,
+    "locked": false,
+    "type": "freedraw",
+  },
+  "collaborators": Map {},
+  "currentChartType": "bar",
+  "currentItemBackgroundColor": "transparent",
+  "currentItemEndArrowhead": "arrow",
+  "currentItemFillStyle": "hachure",
+  "currentItemFontFamily": 1,
+  "currentItemFontSize": 20,
+  "currentItemLinearStrokeSharpness": "round",
+  "currentItemOpacity": 100,
+  "currentItemRoughness": 1,
+  "currentItemStartArrowhead": null,
+  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeSharpness": "sharp",
+  "currentItemStrokeStyle": "solid",
+  "currentItemStrokeWidth": 1,
+  "currentItemTextAlign": "left",
+  "cursorButton": "up",
+  "draggingElement": null,
+  "editingElement": null,
+  "editingGroupId": null,
+  "editingLinearElement": null,
+  "errorMessage": null,
+  "exportBackground": true,
+  "exportEmbedScene": false,
+  "exportScale": 1,
+  "exportWithDarkMode": false,
+  "fileHandle": null,
+  "gridSize": null,
+  "height": 768,
+  "isBindingEnabled": true,
+  "isLoading": false,
+  "isResizing": false,
+  "isRotating": false,
+  "isSidebarDocked": false,
+  "lastPointerDownWith": "mouse",
+  "multiElement": null,
+  "name": "Untitled-201933152653",
+  "offsetLeft": 0,
+  "offsetTop": 0,
+  "openDialog": null,
+  "openMenu": null,
+  "openPopup": null,
+  "openSidebar": null,
+  "pasteDialog": Object {
+    "data": null,
+    "shown": false,
+  },
+  "penDetected": false,
+  "penMode": false,
+  "pendingImageElementId": null,
+  "previousSelectedElementIds": Object {},
+  "resizingElement": null,
+  "scrollX": 0,
+  "scrollY": 0,
+  "scrolledOutside": false,
+  "selectedElementIds": Object {
+    "id0": false,
+  },
+  "selectedGroupIds": Object {},
+  "selectedLinearElement": null,
+  "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
+  "showHyperlinkPopup": false,
+  "showStats": false,
+  "showWelcomeScreen": true,
+  "startBoundElement": null,
+  "suggestedBindings": Array [],
+  "theme": "light",
+  "toast": null,
+  "viewBackgroundColor": "#ffffff",
+  "viewModeEnabled": false,
+  "width": 1024,
+  "zenModeEnabled": false,
+  "zoom": Object {
+    "value": 1,
+  },
+}
+`;
+
+exports[`regression tests key p selects freedraw tool: [end of test] element 0 1`] = `
+Object {
+  "angle": 0,
+  "backgroundColor": "transparent",
+  "boundElements": null,
+  "fillStyle": "hachure",
+  "groupIds": Array [],
+  "height": 10,
+  "id": "id0",
+  "isDeleted": false,
+  "lastCommittedPoint": Array [
+    10,
+    10,
+  ],
+  "link": null,
+  "locked": false,
+  "opacity": 100,
+  "points": Array [
+    Array [
+      0,
+      0,
+    ],
+    Array [
+      10,
+      10,
+    ],
+    Array [
+      10,
+      10,
+    ],
+  ],
+  "pressures": Array [
+    0,
+    0,
+    0,
+  ],
+  "roughness": 1,
+  "seed": 337897,
+  "simulatePressure": false,
+  "strokeColor": "#000000",
+  "strokeSharpness": "round",
+  "strokeStyle": "solid",
+  "strokeWidth": 1,
+  "type": "freedraw",
+  "updated": 1,
+  "version": 4,
+  "versionNonce": 453191,
+  "width": 10,
+  "x": 10,
+  "y": 10,
+}
+`;
+
+exports[`regression tests key p selects freedraw tool: [end of test] history 1`] = `
+Object {
+  "recording": false,
+  "redoStack": Array [],
+  "stateHistory": Array [
+    Object {
+      "appState": Object {
+        "editingGroupId": null,
+        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
+        "selectedElementIds": Object {},
+        "selectedGroupIds": Object {},
+        "viewBackgroundColor": "#ffffff",
+      },
+      "elements": Array [],
+    },
+    Object {
+      "appState": Object {
+        "editingGroupId": null,
+        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
+        "selectedElementIds": Object {
+          "id0": false,
+        },
+        "selectedGroupIds": Object {},
+        "viewBackgroundColor": "#ffffff",
+      },
+      "elements": Array [
+        Object {
+          "angle": 0,
+          "backgroundColor": "transparent",
+          "boundElements": null,
+          "fillStyle": "hachure",
+          "groupIds": Array [],
+          "height": 10,
+          "id": "id0",
+          "isDeleted": false,
+          "lastCommittedPoint": Array [
+            10,
+            10,
+          ],
+          "link": null,
+          "locked": false,
+          "opacity": 100,
+          "points": Array [
+            Array [
+              0,
+              0,
+            ],
+            Array [
+              10,
+              10,
+            ],
+            Array [
+              10,
+              10,
+            ],
+          ],
+          "pressures": Array [
+            0,
+            0,
+            0,
+          ],
+          "roughness": 1,
+          "seed": 337897,
+          "simulatePressure": false,
+          "strokeColor": "#000000",
+          "strokeSharpness": "round",
+          "strokeStyle": "solid",
+          "strokeWidth": 1,
+          "type": "freedraw",
+          "updated": 1,
+          "version": 4,
+          "versionNonce": 453191,
+          "width": 10,
+          "x": 10,
+          "y": 10,
+        },
+      ],
+    },
+  ],
+}
+`;
+
+exports[`regression tests key p selects freedraw tool: [end of test] number of elements 1`] = `1`;
+
+exports[`regression tests key p selects freedraw tool: [end of test] number of renders 1`] = `9`;
+
 exports[`regression tests key r selects rectangle tool: [end of test] appState 1`] = `
 Object {
   "activeTool": Object {
@@ -12590,234 +12818,6 @@ exports[`regression tests key r selects rectangle tool: [end of test] number of
 
 exports[`regression tests key r selects rectangle tool: [end of test] number of renders 1`] = `9`;
 
-exports[`regression tests key x selects freedraw tool: [end of test] appState 1`] = `
-Object {
-  "activeTool": Object {
-    "customType": null,
-    "lastActiveToolBeforeEraser": null,
-    "locked": false,
-    "type": "freedraw",
-  },
-  "collaborators": Map {},
-  "currentChartType": "bar",
-  "currentItemBackgroundColor": "transparent",
-  "currentItemEndArrowhead": "arrow",
-  "currentItemFillStyle": "hachure",
-  "currentItemFontFamily": 1,
-  "currentItemFontSize": 20,
-  "currentItemLinearStrokeSharpness": "round",
-  "currentItemOpacity": 100,
-  "currentItemRoughness": 1,
-  "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
-  "currentItemStrokeSharpness": "sharp",
-  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 1,
-  "currentItemTextAlign": "left",
-  "cursorButton": "up",
-  "draggingElement": null,
-  "editingElement": null,
-  "editingGroupId": null,
-  "editingLinearElement": null,
-  "errorMessage": null,
-  "exportBackground": true,
-  "exportEmbedScene": false,
-  "exportScale": 1,
-  "exportWithDarkMode": false,
-  "fileHandle": null,
-  "gridSize": null,
-  "height": 768,
-  "isBindingEnabled": true,
-  "isLoading": false,
-  "isResizing": false,
-  "isRotating": false,
-  "isSidebarDocked": false,
-  "lastPointerDownWith": "mouse",
-  "multiElement": null,
-  "name": "Untitled-201933152653",
-  "offsetLeft": 0,
-  "offsetTop": 0,
-  "openDialog": null,
-  "openMenu": null,
-  "openPopup": null,
-  "openSidebar": null,
-  "pasteDialog": Object {
-    "data": null,
-    "shown": false,
-  },
-  "penDetected": false,
-  "penMode": false,
-  "pendingImageElementId": null,
-  "previousSelectedElementIds": Object {},
-  "resizingElement": null,
-  "scrollX": 0,
-  "scrollY": 0,
-  "scrolledOutside": false,
-  "selectedElementIds": Object {
-    "id0": false,
-  },
-  "selectedGroupIds": Object {},
-  "selectedLinearElement": null,
-  "selectionElement": null,
-  "shouldCacheIgnoreZoom": false,
-  "showHyperlinkPopup": false,
-  "showStats": false,
-  "showWelcomeScreen": true,
-  "startBoundElement": null,
-  "suggestedBindings": Array [],
-  "theme": "light",
-  "toast": null,
-  "viewBackgroundColor": "#ffffff",
-  "viewModeEnabled": false,
-  "width": 1024,
-  "zenModeEnabled": false,
-  "zoom": Object {
-    "value": 1,
-  },
-}
-`;
-
-exports[`regression tests key x selects freedraw tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "lastCommittedPoint": Array [
-    10,
-    10,
-  ],
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      10,
-      10,
-    ],
-    Array [
-      10,
-      10,
-    ],
-  ],
-  "pressures": Array [
-    0,
-    0,
-    0,
-  ],
-  "roughness": 1,
-  "seed": 337897,
-  "simulatePressure": false,
-  "strokeColor": "#000000",
-  "strokeSharpness": "round",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "freedraw",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
-exports[`regression tests key x selects freedraw tool: [end of test] history 1`] = `
-Object {
-  "recording": false,
-  "redoStack": Array [],
-  "stateHistory": Array [
-    Object {
-      "appState": Object {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": Object {},
-        "selectedGroupIds": Object {},
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": Array [],
-    },
-    Object {
-      "appState": Object {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": Object {
-          "id0": false,
-        },
-        "selectedGroupIds": Object {},
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": Array [
-        Object {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "groupIds": Array [],
-          "height": 10,
-          "id": "id0",
-          "isDeleted": false,
-          "lastCommittedPoint": Array [
-            10,
-            10,
-          ],
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "points": Array [
-            Array [
-              0,
-              0,
-            ],
-            Array [
-              10,
-              10,
-            ],
-            Array [
-              10,
-              10,
-            ],
-          ],
-          "pressures": Array [
-            0,
-            0,
-            0,
-          ],
-          "roughness": 1,
-          "seed": 337897,
-          "simulatePressure": false,
-          "strokeColor": "#000000",
-          "strokeSharpness": "round",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "freedraw",
-          "updated": 1,
-          "version": 4,
-          "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
-        },
-      ],
-    },
-  ],
-}
-`;
-
-exports[`regression tests key x selects freedraw tool: [end of test] number of elements 1`] = `1`;
-
-exports[`regression tests key x selects freedraw tool: [end of test] number of renders 1`] = `9`;
-
 exports[`regression tests make a group and duplicate it: [end of test] appState 1`] = `
 Object {
   "activeTool": Object {

src/tests/export.test.tsx

@@ -158,6 +158,7 @@ describe("export", () => {
         dataURL: await getDataURL(await API.loadFile("./fixtures/deer.png")),
         mimeType: "image/png",
         created: Date.now(),
+        lastRetrieved: Date.now(),
       },
     } as const;
 

src/tests/linearElementEditor.test.tsx

@@ -16,7 +16,7 @@ const renderScene = jest.spyOn(Renderer, "renderScene");
 
 const { h } = window;
 
-describe(" Test Linear Elements", () => {
+describe("Test Linear Elements", () => {
   let container: HTMLElement;
   let canvas: HTMLCanvasElement;
 
@@ -89,8 +89,15 @@ describe(" Test Linear Elements", () => {
     mouse.clickAt(p1[0], p1[1]);
   };
 
-  const enterLineEditingMode = (line: ExcalidrawLinearElement) => {
+  const enterLineEditingMode = (
-    mouse.clickAt(p1[0], p1[1]);
+    line: ExcalidrawLinearElement,
+    selectProgrammatically = false,
+  ) => {
+    if (selectProgrammatically) {
+      API.setSelectedElements([line]);
+    } else {
+      mouse.clickAt(p1[0], p1[1]);
+    }
     Keyboard.keyPress(KEYS.ENTER);
     expect(h.state.editingLinearElement?.elementId).toEqual(line.id);
   };
@@ -604,5 +611,43 @@ describe(" Test Linear Elements", () => {
         `);
       });
     });
+
+    it("in-editor dragging a line point covered by another element", () => {
+      createTwoPointerLinearElement("line");
+      const line = h.elements[0] as ExcalidrawLinearElement;
+      h.elements = [
+        line,
+        API.createElement({
+          type: "rectangle",
+          x: line.x - 50,
+          y: line.y - 50,
+          width: 100,
+          height: 100,
+          backgroundColor: "red",
+          fillStyle: "solid",
+        }),
+      ];
+
+      const origPoints = line.points.map((point) => [...point]);
+      const dragEndPositionOffset = [100, 100] as const;
+      API.setSelectedElements([line]);
+      enterLineEditingMode(line, true);
+      drag(
+        [line.points[0][0] + line.x, line.points[0][1] + line.y],
+        [dragEndPositionOffset[0] + line.x, dragEndPositionOffset[1] + line.y],
+      );
+      expect(line.points).toMatchInlineSnapshot(`
+        Array [
+          Array [
+            0,
+            0,
+          ],
+          Array [
+            ${origPoints[1][0] - dragEndPositionOffset[0]},
+            ${origPoints[1][1] - dragEndPositionOffset[1]},
+          ],
+        ]
+      `);
+    });
   });
 });

src/tests/regressionTests.test.tsx

@@ -138,7 +138,7 @@ describe("regression tests", () => {
     [`4${KEYS.O}`, "ellipse", true],
     [`5${KEYS.A}`, "arrow", true],
     [`6${KEYS.L}`, "line", true],
-    [`7${KEYS.X}`, "freedraw", false],
+    [`7${KEYS.P}`, "freedraw", false],
   ] as [string, ExcalidrawElement["type"], boolean][]) {
     for (const key of keys) {
       it(`key ${key} selects ${shape} tool`, () => {

src/types.ts

@@ -61,7 +61,18 @@ export type BinaryFileData = {
     | typeof MIME_TYPES.binary;
   id: FileId;
   dataURL: DataURL;
+  /**
+   * Epoch timestamp in milliseconds
+   */
   created: number;
+  /**
+   * Indicates when the file was last retrieved from storage to be loaded
+   * onto the scene. We use this flag to determine whether to delete unused
+   * files from storage.
+   *
+   * Epoch timestamp in milliseconds.
+   */
+  lastRetrieved?: number;
 };
 
 export type BinaryFileMetadata = Omit<BinaryFileData, "dataURL">;