Refactor: e -> event or error, err -> error, p -> pointer (#831)

* Refactor: e -> event or error, err -> error, p -> pointer

* simplify

src/actions/actionExport.tsx

@@ -31,9 +31,7 @@ export const actionChangeExportBackground: Action = {
       <input
         type="checkbox"
         checked={appState.exportBackground}
-        onChange={e => {
-          updateData(e.target.checked);
-        }}
+        onChange={event => updateData(event.target.checked)}
       />{" "}
       {t("labels.withBackground")}
     </label>
@@ -43,7 +41,7 @@ export const actionChangeExportBackground: Action = {
 export const actionSaveScene: Action = {
   name: "saveScene",
   perform: (elements, appState, value) => {
-    saveAsJSON(elements, appState).catch(err => console.error(err));
+    saveAsJSON(elements, appState).catch(error => console.error(error));
     return {};
   },
   PanelComponent: ({ updateData }) => (
@@ -79,7 +77,7 @@ export const actionLoadScene: Action = {
           .then(({ elements, appState }) => {
             updateData({ elements: elements, appState: appState });
           })
-          .catch(err => console.error(err));
+          .catch(error => console.error(error));
       }}
     />
   ),

src/actions/actionProperties.tsx

@@ -229,18 +229,18 @@ export const actionChangeOpacity: Action = {
         min="0"
         max="100"
         step="10"
-        onChange={e => updateData(+e.target.value)}
-        onWheel={e => {
-          e.stopPropagation();
-          const target = e.target as HTMLInputElement;
+        onChange={event => updateData(+event.target.value)}
+        onWheel={event => {
+          event.stopPropagation();
+          const target = event.target as HTMLInputElement;
           const STEP = 10;
           const MAX = 100;
           const MIN = 0;
           const value = +target.value;
 
-          if (e.deltaY < 0 && value < MAX) {
+          if (event.deltaY < 0 && value < MAX) {
             updateData(value + STEP);
-          } else if (e.deltaY > 0 && value > MIN) {
+          } else if (event.deltaY > 0 && value > MIN) {
             updateData(value - STEP);
           }
         }}

src/actions/actionZindex.tsx

@@ -91,7 +91,7 @@ export const actionSendBackward: Action = {
     <button
       type="button"
       className="zIndexButton"
-      onClick={e => updateData(null)}
+      onClick={event => updateData(null)}
       title={t("labels.sendBackward")}
     >
       {ICONS.sendBackward}
@@ -115,7 +115,7 @@ export const actionBringForward: Action = {
     <button
       type="button"
       className="zIndexButton"
-      onClick={e => updateData(null)}
+      onClick={event => updateData(null)}
       title={t("labels.bringForward")}
     >
       {ICONS.bringForward}
@@ -138,7 +138,7 @@ export const actionSendToBack: Action = {
     <button
       type="button"
       className="zIndexButton"
-      onClick={e => updateData(null)}
+      onClick={event => updateData(null)}
       title={t("labels.sendToBack")}
     >
       {ICONS.sendToBack}
@@ -161,7 +161,7 @@ export const actionBringToFront: Action = {
     <button
       type="button"
       className="zIndexButton"
-      onClick={e => updateData(null)}
+      onClick={event => updateData(null)}
       title={t("labels.bringToFront")}
     >
       {ICONS.bringToFront}

src/clipboard.ts

@@ -28,7 +28,7 @@ export async function copyToAppClipboard(
     //  copied elements, and thus we should prefer the text content.
     await copyTextToSystemClipboard(null);
     PREFER_APP_CLIPBOARD = false;
-  } catch (err) {
+  } catch (error) {
     // if clearing system clipboard didn't work, we should prefer in-app
     //  clipboard even if there's text in system clipboard on paste, because
     //  we can't be sure of the order of copy operations
@@ -49,30 +49,30 @@ export function getAppClipboard(): {
     ) {
       return { elements: clipboardElements };
     }
-  } catch (err) {
-    console.error(err);
+  } catch (error) {
+    console.error(error);
   }
 
   return {};
 }
 
 export async function getClipboardContent(
-  e: ClipboardEvent | null,
+  event: ClipboardEvent | null,
 ): Promise<{
   text?: string;
   elements?: readonly ExcalidrawElement[];
 }> {
   try {
-    const text = e
-      ? e.clipboardData?.getData("text/plain").trim()
+    const text = event
+      ? event.clipboardData?.getData("text/plain").trim()
       : probablySupportsClipboardReadText &&
         (await navigator.clipboard.readText());
 
     if (text && !PREFER_APP_CLIPBOARD) {
       return { text };
     }
-  } catch (err) {
-    console.error(err);
+  } catch (error) {
+    console.error(error);
   }
 
   return getAppClipboard();
@@ -87,12 +87,12 @@ export async function copyCanvasToClipboardAsPng(canvas: HTMLCanvasElement) {
             new window.ClipboardItem({ "image/png": blob }),
           ]);
           resolve();
-        } catch (err) {
-          reject(err);
+        } catch (error) {
+          reject(error);
         }
       });
-    } catch (err) {
-      reject(err);
+    } catch (error) {
+      reject(error);
     }
   });
 }
@@ -105,7 +105,7 @@ export async function copyTextToSystemClipboard(text: string | null) {
       //  not focused
       await navigator.clipboard.writeText(text || "");
       copied = true;
-    } catch (err) {}
+    } catch (error) {}
   }
 
   // Note that execCommand doesn't allow copying empty strings, so if we're
@@ -143,7 +143,7 @@ function copyTextViaExecCommand(text: string) {
     textarea.setSelectionRange(0, textarea.value.length);
 
     success = document.execCommand("copy");
-  } catch (err) {}
+  } catch (error) {}
 
   textarea.remove();
 

src/components/ColorPicker.tsx

@@ -45,25 +45,25 @@ const Picker = function({
     }
   }, []);
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === KEYS.TAB) {
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === KEYS.TAB) {
       const { activeElement } = document;
-      if (e.shiftKey) {
+      if (event.shiftKey) {
         if (activeElement === firstItem.current) {
           colorInput.current?.focus();
-          e.preventDefault();
+          event.preventDefault();
         }
       } else {
         if (activeElement === colorInput.current) {
           firstItem.current?.focus();
-          e.preventDefault();
+          event.preventDefault();
         }
       }
     } else if (
-      e.key === KEYS.ARROW_RIGHT ||
-      e.key === KEYS.ARROW_LEFT ||
-      e.key === KEYS.ARROW_UP ||
-      e.key === KEYS.ARROW_DOWN
+      event.key === KEYS.ARROW_RIGHT ||
+      event.key === KEYS.ARROW_LEFT ||
+      event.key === KEYS.ARROW_UP ||
+      event.key === KEYS.ARROW_DOWN
     ) {
       const { activeElement } = document;
       const index = Array.prototype.indexOf.call(
@@ -73,30 +73,30 @@ const Picker = function({
       if (index !== -1) {
         const length = gallery!.current!.children.length;
         const nextIndex =
-          e.key === KEYS.ARROW_RIGHT
+          event.key === KEYS.ARROW_RIGHT
             ? (index + 1) % length
-            : e.key === KEYS.ARROW_LEFT
+            : event.key === KEYS.ARROW_LEFT
             ? (length + index - 1) % length
-            : e.key === KEYS.ARROW_DOWN
+            : event.key === KEYS.ARROW_DOWN
             ? (index + 5) % length
-            : e.key === KEYS.ARROW_UP
+            : event.key === KEYS.ARROW_UP
             ? (length + index - 5) % length
             : index;
         (gallery!.current!.children![nextIndex] as any).focus();
       }
-      e.preventDefault();
+      event.preventDefault();
     } else if (
-      keyBindings.includes(e.key.toLowerCase()) &&
-      !isWritableElement(e.target)
+      keyBindings.includes(event.key.toLowerCase()) &&
+      !isWritableElement(event.target)
     ) {
-      const index = keyBindings.indexOf(e.key.toLowerCase());
+      const index = keyBindings.indexOf(event.key.toLowerCase());
       (gallery!.current!.children![index] as any).focus();
-      e.preventDefault();
-    } else if (e.key === KEYS.ESCAPE || e.key === KEYS.ENTER) {
-      e.preventDefault();
+      event.preventDefault();
+    } else if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {
+      event.preventDefault();
       onClose();
     }
-    e.nativeEvent.stopImmediatePropagation();
+    event.nativeEvent.stopImmediatePropagation();
   };
 
   return (
@@ -193,15 +193,15 @@ const ColorInput = React.forwardRef(
           spellCheck={false}
           className="color-picker-input"
           aria-label={label}
-          onChange={e => {
-            const value = e.target.value.toLowerCase();
+          onChange={event => {
+            const value = event.target.value.toLowerCase();
             if (value.match(colorRegex)) {
               onChange(value === "transparent" ? "transparent" : `#${value}`);
             }
             setInnerValue(value);
           }}
           value={(innerValue || "").replace(/^#/, "")}
-          onPaste={e => onChange(e.clipboardData.getData("text"))}
+          onPaste={event => onChange(event.clipboardData.getData("text"))}
           onBlur={() => setInnerValue(color)}
           ref={inputRef}
         />

src/components/ContextMenu.tsx

@@ -24,7 +24,10 @@ function ContextMenu({ options, onCloseRequest, top, left }: Props) {
       left={left}
       fitInViewport={true}
     >
-      <ul className="context-menu" onContextMenu={e => e.preventDefault()}>
+      <ul
+        className="context-menu"
+        onContextMenu={event => event.preventDefault()}
+      >
         {options.map((option, idx) => (
           <li key={idx} onClick={onCloseRequest}>
             <ContextMenuOption {...option} />

src/components/ExportDialog.tsx

@@ -89,22 +89,22 @@ function ExportModal({
     pngButton.current?.focus();
   }, []);
 
-  function handleKeyDown(e: React.KeyboardEvent) {
-    if (e.key === KEYS.TAB) {
+  function handleKeyDown(event: React.KeyboardEvent) {
+    if (event.key === KEYS.TAB) {
       const { activeElement } = document;
-      if (e.shiftKey) {
+      if (event.shiftKey) {
         if (activeElement === pngButton.current) {
           closeButton.current?.focus();
-          e.preventDefault();
+          event.preventDefault();
         }
       } else {
         if (activeElement === closeButton.current) {
           pngButton.current?.focus();
-          e.preventDefault();
+          event.preventDefault();
         }
         if (activeElement === onlySelectedInput.current) {
           closeButton.current?.focus();
-          e.preventDefault();
+          event.preventDefault();
         }
       }
     }
@@ -186,7 +186,9 @@ function ExportModal({
                   <input
                     type="checkbox"
                     checked={exportSelected}
-                    onChange={e => setExportSelected(e.currentTarget.checked)}
+                    onChange={event =>
+                      setExportSelected(event.currentTarget.checked)
+                    }
                     ref={onlySelectedInput}
                   />{" "}
                   {t("labels.onlySelected")}

src/components/Modal.tsx

@@ -12,9 +12,9 @@ export function Modal(props: {
 }) {
   const modalRoot = useBodyRoot();
 
-  const handleKeydown = (e: React.KeyboardEvent) => {
-    if (e.key === KEYS.ESCAPE) {
-      e.nativeEvent.stopImmediatePropagation();
+  const handleKeydown = (event: React.KeyboardEvent) => {
+    if (event.key === KEYS.ESCAPE) {
+      event.nativeEvent.stopImmediatePropagation();
       props.onCloseRequest();
     }
   };

src/components/Popover.tsx

@@ -40,8 +40,8 @@ export function Popover({
       <div
         className="cover"
         onClick={onCloseRequest}
-        onContextMenu={e => {
-          e.preventDefault();
+        onContextMenu={event => {
+          event.preventDefault();
           if (onCloseRequest) {
             onCloseRequest();
           }

src/components/ProjectName.tsx

@@ -10,25 +10,25 @@ type Props = {
 };
 
 export class ProjectName extends Component<Props> {
-  private handleFocus = (e: React.FocusEvent<HTMLElement>) => {
-    selectNode(e.currentTarget);
+  private handleFocus = (event: React.FocusEvent<HTMLElement>) => {
+    selectNode(event.currentTarget);
   };
 
-  private handleBlur = (e: React.FocusEvent<HTMLElement>) => {
-    const value = e.currentTarget.innerText.trim();
+  private handleBlur = (event: React.FocusEvent<HTMLElement>) => {
+    const value = event.currentTarget.innerText.trim();
     if (value !== this.props.value) {
       this.props.onChange(value);
     }
     removeSelection();
   };
 
-  private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      if (e.nativeEvent.isComposing || e.keyCode === 229) {
+  private handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (event.nativeEvent.isComposing || event.keyCode === 229) {
         return;
       }
-      e.currentTarget.blur();
+      event.currentTarget.blur();
     }
   };
   private makeEditable = (editable: HTMLSpanElement | null) => {

src/element/textWysiwyg.tsx

@@ -84,8 +84,8 @@ export function textWysiwyg({
       selection.addRange(range);
 
       ev.preventDefault();
-    } catch (err) {
-      console.error(err);
+    } catch (error) {
+      console.error(error);
     }
   };
 

src/gesture.ts

@@ -3,8 +3,8 @@ import { normalizeScroll } from "./scene/data";
 
 export function getCenter(pointers: readonly Pointer[]) {
   return {
-    x: normalizeScroll(sum(pointers, p => p.x) / pointers.length),
-    y: normalizeScroll(sum(pointers, p => p.y) / pointers.length),
+    x: normalizeScroll(sum(pointers, pointer => pointer.x) / pointers.length),
+    y: normalizeScroll(sum(pointers, pointer => pointer.y) / pointers.length),
   };
 }
 

src/index.tsx

@@ -151,7 +151,7 @@ document.addEventListener(
   { passive: false },
 );
 
-let lastPointerUp: ((e: any) => void) | null = null;
+let lastPointerUp: ((event: any) => void) | null = null;
 const gesture: Gesture = {
   pointers: [],
   lastCenter: null,
@@ -712,22 +712,22 @@ export class App extends React.Component<any, AppState> {
     }
   };
 
-  private onCut = (e: ClipboardEvent) => {
-    if (isWritableElement(e.target)) {
+  private onCut = (event: ClipboardEvent) => {
+    if (isWritableElement(event.target)) {
       return;
     }
     copyToAppClipboard(elements);
     elements = deleteSelectedElements(elements);
     history.resumeRecording();
     this.setState({});
-    e.preventDefault();
+    event.preventDefault();
   };
-  private onCopy = (e: ClipboardEvent) => {
-    if (isWritableElement(e.target)) {
+  private onCopy = (event: ClipboardEvent) => {
+    if (isWritableElement(event.target)) {
       return;
     }
     copyToAppClipboard(elements);
-    e.preventDefault();
+    event.preventDefault();
   };
 
   private onUnload = () => {
@@ -736,8 +736,8 @@ export class App extends React.Component<any, AppState> {
     this.saveDebounced.flush();
   };
 
-  private disableEvent: EventHandlerNonNull = e => {
-    e.preventDefault();
+  private disableEvent: EventHandlerNonNull = event => {
+    event.preventDefault();
   };
 
   private unmounted = false;
@@ -803,9 +803,9 @@ export class App extends React.Component<any, AppState> {
     this.setState({});
   };
 
-  private updateCurrentCursorPosition = (e: MouseEvent) => {
-    cursorX = e.x;
-    cursorY = e.y;
+  private updateCurrentCursorPosition = (event: MouseEvent) => {
+    cursorX = event.x;
+    cursorY = event.y;
   };
 
   private onKeyDown = (event: KeyboardEvent) => {
@@ -907,18 +907,18 @@ export class App extends React.Component<any, AppState> {
     copyToAppClipboard(elements);
   };
 
-  private pasteFromClipboard = async (e: ClipboardEvent | null) => {
+  private pasteFromClipboard = async (event: ClipboardEvent | null) => {
     // #686
     const target = document.activeElement;
     const elementUnderCursor = document.elementFromPoint(cursorX, cursorY);
     if (
       // if no ClipboardEvent supplied, assume we're pasting via contextMenu
       //  thus these checks don't make sense
-      !e ||
+      !event ||
       (elementUnderCursor instanceof HTMLCanvasElement &&
         !isWritableElement(target))
     ) {
-      const data = await getClipboardContent(e);
+      const data = await getClipboardContent(event);
       if (data.elements) {
         this.addElementsFromPaste(data.elements);
       } else if (data.text) {
@@ -950,7 +950,7 @@ export class App extends React.Component<any, AppState> {
         history.resumeRecording();
       }
       this.selectShapeTool("selection");
-      e?.preventDefault();
+      event?.preventDefault();
     }
   };
 
@@ -976,8 +976,10 @@ export class App extends React.Component<any, AppState> {
     this.setState({});
   };
 
-  removePointer = (e: React.PointerEvent<HTMLElement>) => {
-    gesture.pointers = gesture.pointers.filter(p => p.id !== e.pointerId);
+  removePointer = (event: React.PointerEvent<HTMLElement>) => {
+    gesture.pointers = gesture.pointers.filter(
+      pointer => pointer.id !== event.pointerId,
+    );
   };
 
   public render() {
@@ -1026,11 +1028,11 @@ export class App extends React.Component<any, AppState> {
                 this.canvas?.removeEventListener("wheel", this.handleWheel);
               }
             }}
-            onContextMenu={e => {
-              e.preventDefault();
+            onContextMenu={event => {
+              event.preventDefault();
 
               const { x, y } = viewportCoordsToSceneCoords(
-                e,
+                event,
                 this.state,
                 this.canvas,
               );
@@ -1052,8 +1054,8 @@ export class App extends React.Component<any, AppState> {
                       this.canvasOnlyActions.includes(action),
                     ),
                   ],
-                  top: e.clientY,
-                  left: e.clientX,
+                  top: event.clientY,
+                  left: event.clientX,
                 });
                 return;
               }
@@ -1078,38 +1080,38 @@ export class App extends React.Component<any, AppState> {
                     action => !this.canvasOnlyActions.includes(action),
                   ),
                 ],
-                top: e.clientY,
-                left: e.clientX,
+                top: event.clientY,
+                left: event.clientX,
               });
             }}
-            onPointerDown={e => {
+            onPointerDown={event => {
               if (lastPointerUp !== null) {
                 // Unfortunately, sometimes we don't get a pointerup after a pointerdown,
                 // this can happen when a contextual menu or alert is triggered. In order to avoid
                 // being in a weird state, we clean up on the next pointerdown
-                lastPointerUp(e);
+                lastPointerUp(event);
               }
 
               if (isPanning) {
                 return;
               }
 
-              this.setState({ lastPointerDownWith: e.pointerType });
+              this.setState({ lastPointerDownWith: event.pointerType });
 
               // pan canvas on wheel button drag or space+drag
               if (
                 gesture.pointers.length === 0 &&
-                (e.button === POINTER_BUTTON.WHEEL ||
-                  (e.button === POINTER_BUTTON.MAIN && isHoldingSpace))
+                (event.button === POINTER_BUTTON.WHEEL ||
+                  (event.button === POINTER_BUTTON.MAIN && isHoldingSpace))
               ) {
                 isPanning = true;
                 document.documentElement.style.cursor = CURSOR_TYPE.GRABBING;
-                let { clientX: lastX, clientY: lastY } = e;
-                const onPointerMove = (e: PointerEvent) => {
-                  const deltaX = lastX - e.clientX;
-                  const deltaY = lastY - e.clientY;
-                  lastX = e.clientX;
-                  lastY = e.clientY;
+                let { clientX: lastX, clientY: lastY } = event;
+                const onPointerMove = (event: PointerEvent) => {
+                  const deltaX = lastX - event.clientX;
+                  const deltaY = lastY - event.clientY;
+                  lastX = event.clientX;
+                  lastY = event.clientY;
 
                   this.setState({
                     scrollX: normalizeScroll(
@@ -1140,16 +1142,16 @@ export class App extends React.Component<any, AppState> {
 
               // only handle left mouse button or touch
               if (
-                e.button !== POINTER_BUTTON.MAIN &&
-                e.button !== POINTER_BUTTON.TOUCH
+                event.button !== POINTER_BUTTON.MAIN &&
+                event.button !== POINTER_BUTTON.TOUCH
               ) {
                 return;
               }
 
               gesture.pointers.push({
-                id: e.pointerId,
-                x: e.clientX,
-                y: e.clientY,
+                id: event.pointerId,
+                x: event.clientX,
+                y: event.clientY,
               });
               if (gesture.pointers.length === 2) {
                 gesture.lastCenter = getCenter(gesture.pointers);
@@ -1158,7 +1160,7 @@ export class App extends React.Component<any, AppState> {
               }
 
               // fixes pointermove causing selection of UI texts #32
-              e.preventDefault();
+              event.preventDefault();
               // Preventing the event above disables default behavior
               //  of defocusing potentially focused element, which is what we
               //  want when clicking inside the canvas.
@@ -1177,15 +1179,15 @@ export class App extends React.Component<any, AppState> {
                 isOverVerticalScrollBar,
               } = isOverScrollBars(
                 elements,
-                e.clientX / window.devicePixelRatio,
-                e.clientY / window.devicePixelRatio,
+                event.clientX / window.devicePixelRatio,
+                event.clientY / window.devicePixelRatio,
                 canvasWidth / window.devicePixelRatio,
                 canvasHeight / window.devicePixelRatio,
                 this.state,
               );
 
               const { x, y } = viewportCoordsToSceneCoords(
-                e,
+                event,
                 this.state,
                 this.canvas,
               );
@@ -1224,7 +1226,7 @@ export class App extends React.Component<any, AppState> {
                   elements,
                   { x, y },
                   this.state.zoom,
-                  e.pointerType,
+                  event.pointerType,
                 );
 
                 const selectedElements = getSelectedElements(elements);
@@ -1248,7 +1250,7 @@ export class App extends React.Component<any, AppState> {
                     this.state.zoom,
                   );
                   // clear selection if shift is not clicked
-                  if (!hitElement?.isSelected && !e.shiftKey) {
+                  if (!hitElement?.isSelected && !event.shiftKey) {
                     elements = clearSelection(elements);
                   }
 
@@ -1265,7 +1267,7 @@ export class App extends React.Component<any, AppState> {
                     }
 
                     // We duplicate the selected element if alt is pressed on pointer down
-                    if (e.altKey) {
+                    if (event.altKey) {
                       elements = [
                         ...elements.map(element => ({
                           ...element,
@@ -1294,9 +1296,9 @@ export class App extends React.Component<any, AppState> {
                 if (elementIsAddedToSelection) {
                   element = hitElement!;
                 }
-                let textX = e.clientX;
-                let textY = e.clientY;
-                if (!e.altKey) {
+                let textX = event.clientX;
+                let textY = event.clientY;
+                if (!event.altKey) {
                   const snappedToCenterPosition = this.getTextWysiwygSnappedToCenterPosition(
                     x,
                     y,
@@ -1394,8 +1396,8 @@ export class App extends React.Component<any, AppState> {
               let lastY = y;
 
               if (isOverHorizontalScrollBar || isOverVerticalScrollBar) {
-                lastX = e.clientX;
-                lastY = e.clientY;
+                lastX = event.clientX;
+                lastY = event.clientY;
               }
 
               let resizeArrowFn:
@@ -1466,14 +1468,14 @@ export class App extends React.Component<any, AppState> {
                 }
               };
 
-              const onPointerMove = (e: PointerEvent) => {
-                const target = e.target;
+              const onPointerMove = (event: PointerEvent) => {
+                const target = event.target;
                 if (!(target instanceof HTMLElement)) {
                   return;
                 }
 
                 if (isOverHorizontalScrollBar) {
-                  const x = e.clientX;
+                  const x = event.clientX;
                   const dx = x - lastX;
                   this.setState({
                     scrollX: normalizeScroll(
@@ -1485,7 +1487,7 @@ export class App extends React.Component<any, AppState> {
                 }
 
                 if (isOverVerticalScrollBar) {
-                  const y = e.clientY;
+                  const y = event.clientY;
                   const dy = y - lastY;
                   this.setState({
                     scrollY: normalizeScroll(
@@ -1506,7 +1508,7 @@ export class App extends React.Component<any, AppState> {
                     this.state.elementType === "line")
                 ) {
                   const { x, y } = viewportCoordsToSceneCoords(
-                    e,
+                    event,
                     this.state,
                     this.canvas,
                   );
@@ -1521,7 +1523,7 @@ export class App extends React.Component<any, AppState> {
                   const selectedElements = getSelectedElements(elements);
                   if (selectedElements.length === 1) {
                     const { x, y } = viewportCoordsToSceneCoords(
-                      e,
+                      event,
                       this.state,
                       this.canvas,
                     );
@@ -1549,13 +1551,13 @@ export class App extends React.Component<any, AppState> {
                             deltaY,
                             x,
                             y,
-                            e.shiftKey,
+                            event.shiftKey,
                           );
                         } else {
                           element.width -= deltaX;
                           element.x += deltaX;
 
-                          if (e.shiftKey) {
+                          if (event.shiftKey) {
                             element.y += element.height - element.width;
                             element.height = element.width;
                           } else {
@@ -1581,11 +1583,11 @@ export class App extends React.Component<any, AppState> {
                             deltaY,
                             x,
                             y,
-                            e.shiftKey,
+                            event.shiftKey,
                           );
                         } else {
                           element.width += deltaX;
-                          if (e.shiftKey) {
+                          if (event.shiftKey) {
                             element.y += element.height - element.width;
                             element.height = element.width;
                           } else {
@@ -1611,12 +1613,12 @@ export class App extends React.Component<any, AppState> {
                             deltaY,
                             x,
                             y,
-                            e.shiftKey,
+                            event.shiftKey,
                           );
                         } else {
                           element.width -= deltaX;
                           element.x += deltaX;
-                          if (e.shiftKey) {
+                          if (event.shiftKey) {
                             element.height = element.width;
                           } else {
                             element.height += deltaY;
@@ -1640,10 +1642,10 @@ export class App extends React.Component<any, AppState> {
                             deltaY,
                             x,
                             y,
-                            e.shiftKey,
+                            event.shiftKey,
                           );
                         } else {
-                          if (e.shiftKey) {
+                          if (event.shiftKey) {
                             element.width += deltaX;
                             element.height = element.width;
                           } else {
@@ -1748,7 +1750,7 @@ export class App extends React.Component<any, AppState> {
                   const selectedElements = getSelectedElements(elements);
                   if (selectedElements.length > 0) {
                     const { x, y } = viewportCoordsToSceneCoords(
-                      e,
+                      event,
                       this.state,
                       this.canvas,
                     );
@@ -1772,7 +1774,7 @@ export class App extends React.Component<any, AppState> {
                 }
 
                 const { x, y } = viewportCoordsToSceneCoords(
-                  e,
+                  event,
                   this.state,
                   this.canvas,
                 );
@@ -1790,7 +1792,7 @@ export class App extends React.Component<any, AppState> {
                   let dx = x - draggingElement.x;
                   let dy = y - draggingElement.y;
 
-                  if (e.shiftKey && points.length === 2) {
+                  if (event.shiftKey && points.length === 2) {
                     ({ width: dx, height: dy } = getPerfectElementSize(
                       this.state.elementType,
                       dx,
@@ -1806,7 +1808,7 @@ export class App extends React.Component<any, AppState> {
                     pnt[1] = dy;
                   }
                 } else {
-                  if (e.shiftKey) {
+                  if (event.shiftKey) {
                     ({ width, height } = getPerfectElementSize(
                       this.state.elementType,
                       width,
@@ -1828,7 +1830,7 @@ export class App extends React.Component<any, AppState> {
                 draggingElement.shape = null;
 
                 if (this.state.elementType === "selection") {
-                  if (!e.shiftKey && isSomeElementSelected(elements)) {
+                  if (!event.shiftKey && isSomeElementSelected(elements)) {
                     elements = clearSelection(elements);
                   }
                   const elementsWithinSelection = getElementsWithinSelection(
@@ -1842,7 +1844,7 @@ export class App extends React.Component<any, AppState> {
                 this.setState({});
               };
 
-              const onPointerUp = (e: PointerEvent) => {
+              const onPointerUp = (event: PointerEvent) => {
                 const {
                   draggingElement,
                   resizingElement,
@@ -1869,7 +1871,7 @@ export class App extends React.Component<any, AppState> {
                   }
                   if (!draggingOccurred && draggingElement && !multiElement) {
                     const { x, y } = viewportCoordsToSceneCoords(
-                      e,
+                      event,
                       this.state,
                       this.canvas,
                     );
@@ -1940,7 +1942,7 @@ export class App extends React.Component<any, AppState> {
                   !draggingOccurred &&
                   !elementIsAddedToSelection
                 ) {
-                  if (e.shiftKey) {
+                  if (event.shiftKey) {
                     hitElement.isSelected = false;
                   } else {
                     elements = clearSelection(elements);
@@ -1984,11 +1986,11 @@ export class App extends React.Component<any, AppState> {
               window.addEventListener("pointermove", onPointerMove);
               window.addEventListener("pointerup", onPointerUp);
             }}
-            onDoubleClick={e => {
+            onDoubleClick={event => {
               resetCursor();
 
               const { x, y } = viewportCoordsToSceneCoords(
-                e,
+                event,
                 this.state,
                 this.canvas,
               );
@@ -2021,8 +2023,8 @@ export class App extends React.Component<any, AppState> {
 
               this.setState({ editingElement: element });
 
-              let textX = e.clientX;
-              let textY = e.clientY;
+              let textX = event.clientX;
+              let textY = event.clientY;
 
               if (elementAtPosition && isTextElement(elementAtPosition)) {
                 elements = elements.filter(
@@ -2050,7 +2052,7 @@ export class App extends React.Component<any, AppState> {
                 // x and y will change after calling newTextElement function
                 element.x = centerElementX;
                 element.y = centerElementY;
-              } else if (!e.altKey) {
+              } else if (!event.altKey) {
                 const snappedToCenterPosition = this.getTextWysiwygSnappedToCenterPosition(
                   x,
                   y,
@@ -2099,15 +2101,15 @@ export class App extends React.Component<any, AppState> {
                 },
               });
             }}
-            onPointerMove={e => {
-              gesture.pointers = gesture.pointers.map(p =>
-                p.id === e.pointerId
+            onPointerMove={event => {
+              gesture.pointers = gesture.pointers.map(pointer =>
+                pointer.id === event.pointerId
                   ? {
-                      id: e.pointerId,
-                      x: e.clientX,
-                      y: e.clientY,
+                      id: event.pointerId,
+                      x: event.clientX,
+                      y: event.clientY,
                     }
-                  : p,
+                  : pointer,
               );
 
               if (gesture.pointers.length === 2) {
@@ -2135,10 +2137,10 @@ export class App extends React.Component<any, AppState> {
               if (isHoldingSpace || isPanning) {
                 return;
               }
-              const hasDeselectedButton = Boolean(e.buttons);
+              const hasDeselectedButton = Boolean(event.buttons);
 
               const { x, y } = viewportCoordsToSceneCoords(
-                e,
+                event,
                 this.state,
                 this.canvas,
               );
@@ -2168,7 +2170,7 @@ export class App extends React.Component<any, AppState> {
                   elements,
                   { x, y },
                   this.state.zoom,
-                  e.pointerType,
+                  event.pointerType,
                 );
                 if (resizeElement && resizeElement.resizeHandle) {
                   document.documentElement.style.cursor = getCursorForResizingElement(
@@ -2187,14 +2189,14 @@ export class App extends React.Component<any, AppState> {
             }}
             onPointerUp={this.removePointer}
             onPointerLeave={this.removePointer}
-            onDrop={e => {
-              const file = e.dataTransfer.files[0];
+            onDrop={event => {
+              const file = event.dataTransfer.files[0];
               if (file?.type === "application/json") {
                 loadFromBlob(file)
                   .then(({ elements, appState }) =>
                     this.syncActionResult({ elements, appState }),
                   )
-                  .catch(err => console.error(err));
+                  .catch(error => console.error(error));
               }
             }}
           >
@@ -2205,11 +2207,11 @@ export class App extends React.Component<any, AppState> {
     );
   }
 
-  private handleWheel = (e: WheelEvent) => {
-    e.preventDefault();
-    const { deltaX, deltaY } = e;
+  private handleWheel = (event: WheelEvent) => {
+    event.preventDefault();
+    const { deltaX, deltaY } = event;
 
-    if (e[KEYS.META]) {
+    if (event[KEYS.META]) {
       const sign = Math.sign(deltaY);
       const MAX_STEP = 10;
       let delta = Math.abs(deltaY);
@@ -2342,7 +2344,7 @@ class TopErrorBoundary extends React.Component<any, TopErrorBoundaryState> {
     for (const [key, value] of Object.entries({ ...localStorage })) {
       try {
         _localStorage[key] = JSON.parse(value);
-      } catch (err) {
+      } catch (error) {
         _localStorage[key] = value;
       }
     }
@@ -2366,8 +2368,8 @@ class TopErrorBoundary extends React.Component<any, TopErrorBoundaryState> {
         try {
           const StackTrace = await import("stacktrace-js");
           stack += (await StackTrace.fromError(error)).join("\n");
-        } catch (err) {
-          console.error(err);
+        } catch (error) {
+          console.error(error);
           stack += error.stack || "";
         }
       }

src/scene/data.ts

@@ -114,7 +114,7 @@ export async function loadFromBlob(blob: any) {
       }
       elements = data.elements || [];
       appState = { ...defaultAppState, ...data.appState };
-    } catch (e) {
+    } catch (error) {
       // Do nothing because elements array is already empty
     }
     return { elements, appState };
@@ -195,8 +195,8 @@ export async function exportToBackend(
     } else {
       window.alert(t("alerts.couldNotCreateShareableLink"));
     }
-  } catch (e) {
-    console.error(e);
+  } catch (error) {
+    console.error(error);
     window.alert(t("alerts.couldNotCreateShareableLink"));
   }
 }
@@ -320,7 +320,7 @@ export async function exportCanvas(
   } else if (type === "clipboard") {
     try {
       copyCanvasToClipboardAsPng(tempCanvas);
-    } catch (err) {
+    } catch (error) {
       window.alert(t("alerts.couldNotCopyToClipboard"));
     }
   } else if (type === "backend") {
@@ -418,7 +418,7 @@ export function restoreFromLocalStorage() {
       elements = JSON.parse(savedElements).map(
         ({ shape, ...element }: ExcalidrawElement) => element,
       );
-    } catch (e) {
+    } catch (error) {
       // Do nothing because elements array is already empty
     }
   }
@@ -427,7 +427,7 @@ export function restoreFromLocalStorage() {
   if (savedState) {
     try {
       appState = JSON.parse(savedState) as AppState;
-    } catch (e) {
+    } catch (error) {
       // Do nothing because appState is already null
     }
   }