From 079d0bf4e4cad81452dec664c5b6894fc2ddfb7f Mon Sep 17 00:00:00 2001
From: Sendou <sendou77@gmail.com>
Date: Fri, 10 Jan 2020 00:23:19 +0200
Subject: [PATCH] hotkeys for map planner tools

---
 frontend-react/package-lock.json              |  13 ++
 frontend-react/package.json                   |   1 +
 .../src/components/plans/ToolsSelector.js     | 118 ++++++++++++------
 3 files changed, 91 insertions(+), 41 deletions(-)

diff --git a/frontend-react/package-lock.json b/frontend-react/package-lock.json
index 28542bc60..63401ede8 100644
--- a/frontend-react/package-lock.json
+++ b/frontend-react/package-lock.json
@@ -6442,6 +6442,11 @@
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz",
       "integrity": "sha512-kssjab8CvdXfcXMXVcvsXum4Hwdq9XGtRD3TteMEvEbq0LXyiNQr6AprqKqfeaDXze7SxWvRxdpwE6ku7ikLkg=="
     },
+    "hotkeys-js": {
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.7.3.tgz",
+      "integrity": "sha512-CSaeVPAKEEYNexYR35znMJnCqoofk7oqG/AOOqWow1qDT0Yxy+g+Y8Hs/LhGlsZaSJ7973YN6/N41LAr3t30QQ=="
+    },
     "hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -11209,6 +11214,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.4.tgz",
       "integrity": "sha512-ueZzLmHltszTshDMwyfELDq8zOA803wQ1ZuzCccXa1m57k1PxSHfflPD5W9YIiTXLs0JTLzoj6o1LuM5N6zzNA=="
     },
+    "react-hotkeys-hook": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-1.5.4.tgz",
+      "integrity": "sha512-skGZ6hrnyJUPXFC9fXvs0oO4mX0P2hkpukkGtZdhQjSSrp6LyoH1/SIv4isJn2X1VI/MO1cMnV5ZdFySc4IPvw==",
+      "requires": {
+        "hotkeys-js": "3.7.3"
+      }
+    },
     "react-infinite-scroller": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/react-infinite-scroller/-/react-infinite-scroller-1.2.4.tgz",
diff --git a/frontend-react/package.json b/frontend-react/package.json
index 4d9de9395..fb545aed5 100644
--- a/frontend-react/package.json
+++ b/frontend-react/package.json
@@ -13,6 +13,7 @@
     "react-datepicker": "^2.10.1",
     "react-dom": "^16.12.0",
     "react-draggable": "^4.2.0",
+    "react-hotkeys-hook": "^1.5.4",
     "react-infinite-scroller": "^1.2.4",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.3.0",
diff --git a/frontend-react/src/components/plans/ToolsSelector.js b/frontend-react/src/components/plans/ToolsSelector.js
index bbc6843aa..165ab7294 100644
--- a/frontend-react/src/components/plans/ToolsSelector.js
+++ b/frontend-react/src/components/plans/ToolsSelector.js
@@ -1,10 +1,16 @@
 import React, { useState } from "react"
 import Draggable from "react-draggable"
-import { Icon } from "semantic-ui-react"
+import { Icon, Popup } from "semantic-ui-react"
 import { Tools } from "@sendou/react-sketch"
+import { useHotkeys } from "react-hotkeys-hook"
 
 const ToolsSelector = ({ tool, setTool }) => {
   const [activeDrags, setActiveDrags] = useState(0)
+  useHotkeys("p", () => setTool(Tools.Pencil))
+  useHotkeys("l", () => setTool(Tools.Line))
+  useHotkeys("r", () => setTool(Tools.Rectangle))
+  useHotkeys("c", () => setTool(Tools.Circle))
+  useHotkeys("s", () => setTool(Tools.Select))
 
   const onStart = () => {
     setActiveDrags(activeDrags + 1)
@@ -40,50 +46,80 @@ const ToolsSelector = ({ tool, setTool }) => {
           </div>
         </strong>
         <div>
-          <Icon
-            name="pencil"
-            color="blue"
-            size="big"
-            bordered
-            inverted={tool === Tools.Pencil}
-            onClick={() => setTool(Tools.Pencil)}
-            style={{ cursor: "pointer", marginTop: "0.1em" }}
+          <Popup
+            header="Pencil"
+            content="Shortcut key: P"
+            trigger={
+              <Icon
+                name="pencil"
+                color="blue"
+                size="big"
+                bordered
+                inverted={tool === Tools.Pencil}
+                onClick={() => setTool(Tools.Pencil)}
+                style={{ cursor: "pointer", marginTop: "0.1em" }}
+              />
+            }
           />
-          <Icon
-            name="window minimize outline"
-            color="blue"
-            size="big"
-            bordered
-            inverted={tool === Tools.Line}
-            onClick={() => setTool(Tools.Line)}
-            style={{ cursor: "pointer", marginTop: "0.1em" }}
+          <Popup
+            header="Line"
+            content="Shortcut key: L"
+            trigger={
+              <Icon
+                name="window minimize outline"
+                color="blue"
+                size="big"
+                bordered
+                inverted={tool === Tools.Line}
+                onClick={() => setTool(Tools.Line)}
+                style={{ cursor: "pointer", marginTop: "0.1em" }}
+              />
+            }
           />
-          <Icon
-            name="square outline"
-            color="blue"
-            size="big"
-            bordered
-            inverted={tool === Tools.Rectangle}
-            onClick={() => setTool(Tools.Rectangle)}
-            style={{ cursor: "pointer", marginTop: "0.1em" }}
+          <Popup
+            header="Rectangle"
+            content="Shortcut key: R"
+            trigger={
+              <Icon
+                name="square outline"
+                color="blue"
+                size="big"
+                bordered
+                inverted={tool === Tools.Rectangle}
+                onClick={() => setTool(Tools.Rectangle)}
+                style={{ cursor: "pointer", marginTop: "0.1em" }}
+              />
+            }
           />
-          <Icon
-            name="circle outline"
-            color="blue"
-            size="big"
-            bordered
-            inverted={tool === Tools.Circle}
-            onClick={() => setTool(Tools.Circle)}
-            style={{ cursor: "pointer", marginTop: "0.1em" }}
+          <Popup
+            header="Circle"
+            content="Shortcut key: C"
+            trigger={
+              <Icon
+                name="circle outline"
+                color="blue"
+                size="big"
+                bordered
+                inverted={tool === Tools.Circle}
+                onClick={() => setTool(Tools.Circle)}
+                style={{ cursor: "pointer", marginTop: "0.1em" }}
+              />
+            }
           />
-          <Icon
-            name="object group outline"
-            color="blue"
-            size="big"
-            bordered
-            inverted={tool === Tools.Select}
-            onClick={() => setTool(Tools.Select)}
-            style={{ cursor: "pointer", marginTop: "0.1em" }}
+          <Popup
+            header="Select"
+            content="Shortcut key: S"
+            trigger={
+              <Icon
+                name="object group outline"
+                color="blue"
+                size="big"
+                bordered
+                inverted={tool === Tools.Select}
+                onClick={() => setTool(Tools.Select)}
+                style={{ cursor: "pointer", marginTop: "0.1em" }}
+              />
+            }
           />
         </div>
       </div>