change selection/line/draw shortcut defaults (#1953)

src/components/Actions.tsx

@@ -104,9 +104,11 @@ export const ShapesSwitcher = ({
   <>
     {SHAPES.map(({ value, icon, key }, index) => {
       const label = t(`toolBar.${value}`);
-      const shortcut = `${capitalizeString(key)} ${t("shortcutsDialog.or")} ${
-        index + 1
-      }`;
+      const letter = typeof key === "string" ? key : key[0];
+      const letterShortcut = /[a-z]/.test(letter) ? letter : `Shift+${letter}`;
+      const shortcut = `${capitalizeString(letterShortcut)} ${t(
+        "shortcutsDialog.or",
+      )} ${index + 1}`;
       return (
         <ToolButton
           className="Shape"

src/components/App.tsx

@@ -85,7 +85,7 @@ import {
   getRotateWithDiscreteAngleKey,
 } from "../keys";
 
-import { findShapeByKey, shapesShortcutKeys } from "../shapes";
+import { findShapeByKey } from "../shapes";
 import { createHistory, SceneHistory } from "../history";
 
 import ContextMenu from "./ContextMenu";
@@ -1379,8 +1379,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       this.setState({ isLibraryOpen: !this.state.isLibraryOpen });
     }
 
-    const shape = findShapeByKey(event.key);
-
     if (isArrowKey(event.key)) {
       const step =
         (this.state.gridSize &&
@@ -1444,7 +1442,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       !event.metaKey &&
       this.state.draggingElement === null
     ) {
-      if (shapesShortcutKeys.includes(event.key.toLowerCase())) {
+      const shape = findShapeByKey(event.key);
+      if (shape) {
         this.selectShapeTool(shape);
       } else if (event.key === "q") {
         this.toggleLock();

src/components/ShortcutsDialog.tsx

@@ -178,13 +178,16 @@ export const ShortcutsDialog = ({ onClose }: { onClose?: () => void }) => {
         <Columns>
           <Column>
             <ShortcutIsland caption={t("shortcutsDialog.shapes")}>
-              <Shortcut label={t("toolBar.selection")} shortcuts={["S", "1"]} />
+              <Shortcut label={t("toolBar.selection")} shortcuts={["V", "1"]} />
               <Shortcut label={t("toolBar.rectangle")} shortcuts={["R", "2"]} />
               <Shortcut label={t("toolBar.diamond")} shortcuts={["D", "3"]} />
               <Shortcut label={t("toolBar.ellipse")} shortcuts={["E", "4"]} />
               <Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} />
-              <Shortcut label={t("toolBar.line")} shortcuts={["L", "6"]} />
-              <Shortcut label={t("toolBar.draw")} shortcuts={["X", "7"]} />
+              <Shortcut label={t("toolBar.line")} shortcuts={["P", "6"]} />
+              <Shortcut
+                label={t("toolBar.draw")}
+                shortcuts={["Shift+P", "7"]}
+              />
               <Shortcut label={t("toolBar.text")} shortcuts={["T", "8"]} />
               <Shortcut
                 label={t("shortcutsDialog.textNewLine")}

src/shapes.tsx

@@ -11,7 +11,7 @@ export const SHAPES = [
       </svg>
     ),
     value: "selection",
-    key: "s",
+    key: ["v", "s"],
   },
   {
     icon: (
@@ -68,7 +68,7 @@ export const SHAPES = [
       </svg>
     ),
     value: "line",
-    key: "l",
+    key: ["p", "l"],
   },
   {
     icon: (
@@ -81,7 +81,7 @@ export const SHAPES = [
       </svg>
     ),
     value: "draw",
-    key: "x",
+    key: ["P", "x"],
   },
   {
     icon: (
@@ -95,12 +95,14 @@ export const SHAPES = [
   },
 ] as const;
 
-export const shapesShortcutKeys = SHAPES.map((shape, index) => [
-  shape.key,
-  (index + 1).toString(),
-]).flat(1);
-
-export const findShapeByKey = (key: string) =>
-  SHAPES.find((shape, index) => {
-    return shape.key === key.toLowerCase() || key === (index + 1).toString();
-  })?.value || "selection";
+export const findShapeByKey = (key: string) => {
+  const shape = SHAPES.find((shape, index) => {
+    return (
+      key === (index + 1).toString() ||
+      (typeof shape.key === "string"
+        ? shape.key === key
+        : (shape.key as readonly string[]).includes(key))
+    );
+  });
+  return shape?.value || null;
+};