Merge 627f1dd036 into 2a0d15799c

packages/excalidraw/components/App.tsx

@@ -486,7 +486,7 @@ import {
 import { MagicIcon, copyIcon, fullscreenIcon } from "./icons";
 import { Toast } from "./Toast";
 
-import { findShapeByKey } from "./shapes";
+import { findShapeByCode, findShapeByKey } from "./shapes";
 
 import type {
   RenderInteractiveSceneCallback,
@@ -4511,7 +4511,7 @@ class App extends React.Component<AppProps, AppState> {
         !this.state.selectionElement &&
         !this.state.selectedElementsAreBeingDragged
       ) {
-        const shape = findShapeByKey(event.key);
+        const shape = findShapeByKey(event.key) || findShapeByCode(event.code);
         if (shape) {
           if (this.state.activeTool.type !== shape) {
             trackEvent(

packages/excalidraw/components/shapes.tsx

@@ -18,6 +18,7 @@ export const SHAPES = [
     icon: SelectionIcon,
     value: "selection",
     key: KEYS.V,
+    codes: ["KeyV", "Digit1"],
     numericKey: KEYS["1"],
     fillable: true,
   },
@@ -25,6 +26,7 @@ export const SHAPES = [
     icon: RectangleIcon,
     value: "rectangle",
     key: KEYS.R,
+    codes: ["KeyR", "Digit2"],
     numericKey: KEYS["2"],
     fillable: true,
   },
@@ -32,6 +34,7 @@ export const SHAPES = [
     icon: DiamondIcon,
     value: "diamond",
     key: KEYS.D,
+    codes: ["KeyD", "Digit3"],
     numericKey: KEYS["3"],
     fillable: true,
   },
@@ -39,6 +42,7 @@ export const SHAPES = [
     icon: EllipseIcon,
     value: "ellipse",
     key: KEYS.O,
+    codes: ["KeyO", "Digit4"],
     numericKey: KEYS["4"],
     fillable: true,
   },
@@ -46,6 +50,7 @@ export const SHAPES = [
     icon: ArrowIcon,
     value: "arrow",
     key: KEYS.A,
+    codes: ["KeyA", "Digit5"],
     numericKey: KEYS["5"],
     fillable: true,
   },
@@ -53,6 +58,7 @@ export const SHAPES = [
     icon: LineIcon,
     value: "line",
     key: KEYS.L,
+    codes: ["KeyL", "Digit6"],
     numericKey: KEYS["6"],
     fillable: true,
   },
@@ -60,6 +66,7 @@ export const SHAPES = [
     icon: FreedrawIcon,
     value: "freedraw",
     key: [KEYS.P, KEYS.X],
+    codes: ["KeyP", "KeyX", "Digit7"],
     numericKey: KEYS["7"],
     fillable: false,
   },
@@ -67,6 +74,7 @@ export const SHAPES = [
     icon: TextIcon,
     value: "text",
     key: KEYS.T,
+    codes: ["KeyT", "Digit8"],
     numericKey: KEYS["8"],
     fillable: false,
   },
@@ -74,6 +82,7 @@ export const SHAPES = [
     icon: ImageIcon,
     value: "image",
     key: null,
+    codes: ["Digit9"],
     numericKey: KEYS["9"],
     fillable: false,
   },
@@ -81,6 +90,7 @@ export const SHAPES = [
     icon: EraserIcon,
     value: "eraser",
     key: KEYS.E,
+    codes: ["KeyE", "Digit0"],
     numericKey: KEYS["0"],
     fillable: false,
   },
@@ -98,3 +108,10 @@ export const findShapeByKey = (key: string) => {
   });
   return shape?.value || null;
 };
+
+export const findShapeByCode = (code: string) => {
+  const shape = SHAPES.find((shape) =>
+    (shape.codes as readonly string[]).includes(code),
+  );
+  return shape?.value || null;
+};