feat: Map shortcut O to ellipse and Add eraser shortcut E (#4930)

* feat: Add erase shortcut Shift+E

* map o to ellipse and E to Eraser

* fix tests

* use key

* move eraser to tools and rename shape to tools

src/actions/actionCanvas.tsx

@@ -304,12 +304,13 @@ export const actionErase = register({
       commitToHistory: true,
     };
   },
+  keyTest: (event) => event.key === KEYS.E,
   PanelComponent: ({ elements, appState, updateData, data }) => (
     <ToolButton
       type="button"
       icon={eraser}
       className={clsx("eraser", { active: isEraserActive(appState) })}
-      title={t("toolBar.eraser")}
+      title={`${t("toolBar.eraser")}-${getShortcutKey("E")}`}
       aria-label={t("toolBar.eraser")}
       onClick={() => {
         updateData(null);

src/components/HelpDialog.tsx

@@ -139,7 +139,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
         <Section title={t("helpDialog.shortcuts")}>
           <Columns>
             <Column>
-              <ShortcutIsland caption={t("helpDialog.shapes")}>
+              <ShortcutIsland caption={t("helpDialog.tools")}>
                 <Shortcut
                   label={t("toolBar.selection")}
                   shortcuts={["V", "1"]}
@@ -149,7 +149,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                   shortcuts={["R", "2"]}
                 />
                 <Shortcut label={t("toolBar.diamond")} shortcuts={["D", "3"]} />
-                <Shortcut label={t("toolBar.ellipse")} shortcuts={["E", "4"]} />
+                <Shortcut label={t("toolBar.ellipse")} shortcuts={["O", "4"]} />
                 <Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} />
                 <Shortcut label={t("toolBar.line")} shortcuts={["P", "6"]} />
                 <Shortcut
@@ -160,6 +160,10 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                 <Shortcut label={t("toolBar.image")} shortcuts={["9"]} />
                 <Shortcut label={t("toolBar.library")} shortcuts={["0"]} />
                 <Shortcut
+                  label={t("toolBar.eraser")}
+                  shortcuts={[getShortcutKey("E")]}
+                />
+                <Shortcut
                   label={t("helpDialog.editSelectedShape")}
                   shortcuts={[
                     getShortcutKey("Enter"),

src/locales/en.json

@@ -283,7 +283,7 @@
     "howto": "Follow our guides",
     "or": "or",
     "preventBinding": "Prevent arrow binding",
-    "shapes": "Shapes",
+    "tools": "Tools",
     "shortcuts": "Keyboard shortcuts",
     "textFinish": "Finish editing (text editor)",
     "textNewLine": "Add new line (text editor)",

src/shapes.tsx

@@ -40,7 +40,7 @@ export const SHAPES = [
       </svg>
     ),
     value: "ellipse",
-    key: KEYS.E,
+    key: KEYS.O,
   },
   {
     icon: (

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

@@ -11510,7 +11510,7 @@ exports[`regression tests key d selects diamond tool: [end of test] number of el
 
 exports[`regression tests key d selects diamond tool: [end of test] number of renders 1`] = `8`;
 
-exports[`regression tests key e selects ellipse tool: [end of test] appState 1`] = `
+exports[`regression tests key l selects line tool: [end of test] appState 1`] = `
 Object {
   "collaborators": Map {},
   "currentChartType": "bar",
@@ -11590,35 +11590,50 @@ Object {
 }
 `;
 
-exports[`regression tests key e selects ellipse tool: [end of test] element 0 1`] = `
+exports[`regression tests key l selects line tool: [end of test] element 0 1`] = `
 Object {
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
+  "endArrowhead": null,
+  "endBinding": null,
   "fillStyle": "hachure",
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
   "isDeleted": false,
+  "lastCommittedPoint": null,
   "link": null,
   "opacity": 100,
+  "points": Array [
+    Array [
+      0,
+      0,
+    ],
+    Array [
+      10,
+      10,
+    ],
+  ],
   "roughness": 1,
   "seed": 337897,
+  "startArrowhead": null,
+  "startBinding": null,
   "strokeColor": "#000000",
-  "strokeSharpness": "sharp",
+  "strokeSharpness": "round",
   "strokeStyle": "solid",
   "strokeWidth": 1,
-  "type": "ellipse",
+  "type": "line",
   "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
+  "version": 3,
+  "versionNonce": 449462985,
   "width": 10,
   "x": 10,
   "y": 10,
 }
 `;
 
-exports[`regression tests key e selects ellipse tool: [end of test] history 1`] = `
+exports[`regression tests key l selects line tool: [end of test] history 1`] = `
 Object {
   "recording": false,
   "redoStack": Array [],
@@ -11650,23 +11665,38 @@ Object {
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
+          "endArrowhead": null,
+          "endBinding": null,
           "fillStyle": "hachure",
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
           "isDeleted": false,
+          "lastCommittedPoint": null,
           "link": null,
           "opacity": 100,
+          "points": Array [
+            Array [
+              0,
+              0,
+            ],
+            Array [
+              10,
+              10,
+            ],
+          ],
           "roughness": 1,
           "seed": 337897,
+          "startArrowhead": null,
+          "startBinding": null,
           "strokeColor": "#000000",
-          "strokeSharpness": "sharp",
+          "strokeSharpness": "round",
           "strokeStyle": "solid",
           "strokeWidth": 1,
-          "type": "ellipse",
+          "type": "line",
           "updated": 1,
-          "version": 2,
-          "versionNonce": 1278240551,
+          "version": 3,
+          "versionNonce": 449462985,
           "width": 10,
           "x": 10,
           "y": 10,
@@ -11677,11 +11707,11 @@ Object {
 }
 `;
 
-exports[`regression tests key e selects ellipse tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key l selects line tool: [end of test] number of elements 1`] = `1`;
 
-exports[`regression tests key e selects ellipse tool: [end of test] number of renders 1`] = `8`;
+exports[`regression tests key l selects line tool: [end of test] number of renders 1`] = `8`;
 
-exports[`regression tests key l selects line tool: [end of test] appState 1`] = `
+exports[`regression tests key o selects ellipse tool: [end of test] appState 1`] = `
 Object {
   "collaborators": Map {},
   "currentChartType": "bar",
@@ -11761,50 +11791,35 @@ Object {
 }
 `;
 
-exports[`regression tests key l selects line tool: [end of test] element 0 1`] = `
+exports[`regression tests key o selects ellipse tool: [end of test] element 0 1`] = `
 Object {
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "endArrowhead": null,
-  "endBinding": null,
   "fillStyle": "hachure",
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
   "isDeleted": false,
-  "lastCommittedPoint": null,
   "link": null,
   "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      10,
-      10,
-    ],
-  ],
   "roughness": 1,
   "seed": 337897,
-  "startArrowhead": null,
-  "startBinding": null,
   "strokeColor": "#000000",
-  "strokeSharpness": "round",
+  "strokeSharpness": "sharp",
   "strokeStyle": "solid",
   "strokeWidth": 1,
-  "type": "line",
+  "type": "ellipse",
   "updated": 1,
-  "version": 3,
-  "versionNonce": 449462985,
+  "version": 2,
+  "versionNonce": 1278240551,
   "width": 10,
   "x": 10,
   "y": 10,
 }
 `;
 
-exports[`regression tests key l selects line tool: [end of test] history 1`] = `
+exports[`regression tests key o selects ellipse tool: [end of test] history 1`] = `
 Object {
   "recording": false,
   "redoStack": Array [],
@@ -11836,38 +11851,23 @@ Object {
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "endArrowhead": null,
-          "endBinding": null,
           "fillStyle": "hachure",
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
           "isDeleted": false,
-          "lastCommittedPoint": null,
           "link": null,
           "opacity": 100,
-          "points": Array [
-            Array [
-              0,
-              0,
-            ],
-            Array [
-              10,
-              10,
-            ],
-          ],
           "roughness": 1,
           "seed": 337897,
-          "startArrowhead": null,
-          "startBinding": null,
           "strokeColor": "#000000",
-          "strokeSharpness": "round",
+          "strokeSharpness": "sharp",
           "strokeStyle": "solid",
           "strokeWidth": 1,
-          "type": "line",
+          "type": "ellipse",
           "updated": 1,
-          "version": 3,
-          "versionNonce": 449462985,
+          "version": 2,
+          "versionNonce": 1278240551,
           "width": 10,
           "x": 10,
           "y": 10,
@@ -11878,9 +11878,9 @@ Object {
 }
 `;
 
-exports[`regression tests key l selects line tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key o selects ellipse tool: [end of test] number of elements 1`] = `1`;
 
-exports[`regression tests key l selects line tool: [end of test] number of renders 1`] = `8`;
+exports[`regression tests key o selects ellipse tool: [end of test] number of renders 1`] = `8`;
 
 exports[`regression tests key r selects rectangle tool: [end of test] appState 1`] = `
 Object {

src/tests/regressionTests.test.tsx

@@ -135,7 +135,7 @@ describe("regression tests", () => {
   for (const [keys, shape, shouldSelect] of [
     [`2${KEYS.R}`, "rectangle", true],
     [`3${KEYS.D}`, "diamond", true],
-    [`4${KEYS.E}`, "ellipse", true],
+    [`4${KEYS.O}`, "ellipse", true],
     [`5${KEYS.A}`, "arrow", true],
     [`6${KEYS.L}`, "line", true],
     [`7${KEYS.X}`, "freedraw", false],