Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-09-08 12:16:12 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

hotkeys for map planner tools

Browse Source
This commit is contained in:
Sendou
2020-01-10 00:23:19 +02:00
parent bd60a61ed9
commit 079d0bf4e4
3 changed files with 91 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend-react/package-lock.json generated
View File

@@ -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",

1
frontend-react/package.json
View File

@@ -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",

118
frontend-react/src/components/plans/ToolsSelector.js
View File

@@ -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>