Adds keyboard shortcuts for tools, colors, sizes.

This commit is contained in:
Steve Ruiz 2021-07-13 21:52:20 +01:00
parent 6cc9009e82
commit bc2633410f
2 changed files with 105 additions and 23 deletions

View file

@ -2,14 +2,17 @@
import { useEffect } from 'react' import { useEffect } from 'react'
import state from 'state' import state from 'state'
import inputs from 'state/inputs' import inputs from 'state/inputs'
import { MoveType } from 'types' import { ColorStyle, MoveType, SizeStyle } from 'types'
import { metaKey } from 'utils' import { metaKey } from 'utils'
export default function useKeyboardEvents() { export default function useKeyboardEvents() {
useEffect(() => { useEffect(() => {
function handleKeyDown(e: KeyboardEvent) { function handleKeyDown(e: KeyboardEvent) {
const info = inputs.keydown(e)
const meta = metaKey(e)
if ( if (
metaKey(e) && meta &&
![ ![
'a', 'a',
'i', 'i',
@ -25,9 +28,88 @@ export default function useKeyboardEvents() {
e.preventDefault() e.preventDefault()
} }
const info = inputs.keydown(e)
switch (e.key) { switch (e.key) {
case '1': {
if (meta) {
state.send('CHANGED_STYLE', { color: ColorStyle.Black })
break
}
if (e.altKey) {
state.send('CHANGED_STYLE', { size: SizeStyle.Small })
break
}
state.send('SELECTED_SELECT_TOOL', info)
break
}
case '2': {
if (meta) {
state.send('CHANGED_STYLE', { color: ColorStyle.White })
break
}
if (e.altKey) {
state.send('CHANGED_STYLE', { size: SizeStyle.Medium })
break
}
state.send('SELECTED_DRAW_TOOL', info)
break
}
case '3': {
if (meta) {
state.send('CHANGED_STYLE', { color: ColorStyle.Green })
break
}
if (e.altKey) {
state.send('CHANGED_STYLE', { size: SizeStyle.Large })
break
}
state.send('SELECTED_RECTANGLE_TOOL', info)
break
}
case '4': {
if (meta) {
state.send('CHANGED_STYLE', { color: ColorStyle.Blue })
}
state.send('SELECTED_ELLIPSE_TOOL', info)
break
}
case '5': {
if (meta) {
state.send('CHANGED_STYLE', { color: ColorStyle.Indigo })
break
}
state.send('SELECTED_ARROW_TOOL', info)
break
}
case '6': {
if (meta) {
state.send('CHANGED_STYLE', { color: ColorStyle.Violet })
break
}
state.send('SELECTED_TEXT_TOOL', info)
break
}
case '7': {
if (meta) {
state.send('CHANGED_STYLE', { color: ColorStyle.Red })
break
}
state.send('TOGGLED_TOOL_LOCK', info)
break
}
case '8': {
if (meta) {
state.send('CHANGED_STYLE', { color: ColorStyle.Orange })
break
}
break
}
case '9': {
if (meta) {
state.send('CHANGED_STYLE', { color: ColorStyle.Yello })
break
}
break
}
case 'ArrowUp': { case 'ArrowUp': {
state.send('NUDGED', { delta: [0, -1], ...info }) state.send('NUDGED', { delta: [0, -1], ...info })
break break
@ -82,7 +164,7 @@ export default function useKeyboardEvents() {
break break
} }
case 'z': { case 'z': {
if (metaKey(e)) { if (meta) {
if (e.shiftKey) { if (e.shiftKey) {
state.send('REDO', info) state.send('REDO', info)
} else { } else {
@ -92,7 +174,7 @@ export default function useKeyboardEvents() {
break break
} }
case '': { case '': {
if (metaKey(e)) { if (meta) {
state.send('MOVED', { state.send('MOVED', {
...info, ...info,
type: MoveType.ToFront, type: MoveType.ToFront,
@ -101,7 +183,7 @@ export default function useKeyboardEvents() {
break break
} }
case '“': { case '“': {
if (metaKey(e)) { if (meta) {
state.send('MOVED', { state.send('MOVED', {
...info, ...info,
type: MoveType.ToBack, type: MoveType.ToBack,
@ -110,7 +192,7 @@ export default function useKeyboardEvents() {
break break
} }
case ']': { case ']': {
if (metaKey(e)) { if (meta) {
state.send('MOVED', { state.send('MOVED', {
...info, ...info,
type: MoveType.Forward, type: MoveType.Forward,
@ -119,7 +201,7 @@ export default function useKeyboardEvents() {
break break
} }
case '[': { case '[': {
if (metaKey(e)) { if (meta) {
state.send('MOVED', { state.send('MOVED', {
...info, ...info,
type: MoveType.Backward, type: MoveType.Backward,
@ -136,7 +218,7 @@ export default function useKeyboardEvents() {
break break
} }
case 'Backspace': { case 'Backspace': {
if (metaKey(e)) { if (meta) {
if (e.shiftKey) { if (e.shiftKey) {
if (window.confirm('Reset document and state?')) { if (window.confirm('Reset document and state?')) {
state.send('RESET_DOCUMENT_STATE', info) state.send('RESET_DOCUMENT_STATE', info)
@ -150,7 +232,7 @@ export default function useKeyboardEvents() {
break break
} }
case 'g': { case 'g': {
if (metaKey(e)) { if (meta) {
if (e.shiftKey) { if (e.shiftKey) {
state.send('UNGROUPED', info) state.send('UNGROUPED', info)
} else { } else {
@ -160,7 +242,7 @@ export default function useKeyboardEvents() {
break break
} }
case 's': { case 's': {
if (metaKey(e)) { if (meta) {
if (e.shiftKey) { if (e.shiftKey) {
state.send('SAVED_AS_TO_FILESYSTEM', info) state.send('SAVED_AS_TO_FILESYSTEM', info)
} else { } else {
@ -170,7 +252,7 @@ export default function useKeyboardEvents() {
break break
} }
case 'o': { case 'o': {
if (metaKey(e)) { if (meta) {
break break
} else { } else {
state.send('SELECTED_DOT_TOOL', info) state.send('SELECTED_DOT_TOOL', info)
@ -178,7 +260,7 @@ export default function useKeyboardEvents() {
break break
} }
case 'v': { case 'v': {
if (metaKey(e)) { if (meta) {
state.send('PASTED', info) state.send('PASTED', info)
} else { } else {
state.send('SELECTED_SELECT_TOOL', info) state.send('SELECTED_SELECT_TOOL', info)
@ -186,7 +268,7 @@ export default function useKeyboardEvents() {
break break
} }
case 'a': { case 'a': {
if (metaKey(e)) { if (meta) {
state.send('SELECTED_ALL', info) state.send('SELECTED_ALL', info)
} else { } else {
state.send('SELECTED_ARROW_TOOL', info) state.send('SELECTED_ARROW_TOOL', info)
@ -194,7 +276,7 @@ export default function useKeyboardEvents() {
break break
} }
case 'd': { case 'd': {
if (metaKey(e)) { if (meta) {
state.send('DUPLICATED', info) state.send('DUPLICATED', info)
} else { } else {
state.send('SELECTED_DRAW_TOOL', info) state.send('SELECTED_DRAW_TOOL', info)
@ -206,7 +288,7 @@ export default function useKeyboardEvents() {
break break
} }
case 'c': { case 'c': {
if (metaKey(e)) { if (meta) {
if (e.shiftKey) { if (e.shiftKey) {
state.send('COPIED_TO_SVG', info) state.send('COPIED_TO_SVG', info)
} else { } else {
@ -218,7 +300,7 @@ export default function useKeyboardEvents() {
break break
} }
case 'i': { case 'i': {
if (metaKey(e)) { if (meta) {
break break
} else { } else {
state.send('SELECTED_CIRCLE_TOOL', info) state.send('SELECTED_CIRCLE_TOOL', info)
@ -226,7 +308,7 @@ export default function useKeyboardEvents() {
break break
} }
case 'l': { case 'l': {
if (metaKey(e)) { if (meta) {
if (e.shiftKey) { if (e.shiftKey) {
state.send('TOGGLED_LOGGER') state.send('TOGGLED_LOGGER')
} else { } else {
@ -238,7 +320,7 @@ export default function useKeyboardEvents() {
break break
} }
case 'y': { case 'y': {
if (metaKey(e)) { if (meta) {
break break
} else { } else {
state.send('SELECTED_RAY_TOOL', info) state.send('SELECTED_RAY_TOOL', info)
@ -246,7 +328,7 @@ export default function useKeyboardEvents() {
break break
} }
case 'p': { case 'p': {
if (metaKey(e)) { if (meta) {
break break
} else { } else {
state.send('SELECTED_POLYLINE_TOOL', info) state.send('SELECTED_POLYLINE_TOOL', info)
@ -254,7 +336,7 @@ export default function useKeyboardEvents() {
break break
} }
case 'r': { case 'r': {
if (metaKey(e)) { if (meta) {
break break
} else { } else {
state.send('SELECTED_RECTANGLE_TOOL', info) state.send('SELECTED_RECTANGLE_TOOL', info)

View file

@ -6,10 +6,10 @@ const canvasLight = '#fafafa'
const canvasDark = '#343d45' const canvasDark = '#343d45'
const colors = { const colors = {
[ColorStyle.Black]: '#212528',
[ColorStyle.White]: '#f0f1f3', [ColorStyle.White]: '#f0f1f3',
[ColorStyle.LightGray]: '#c6cbd1', [ColorStyle.LightGray]: '#c6cbd1',
[ColorStyle.Gray]: '#788492', [ColorStyle.Gray]: '#788492',
[ColorStyle.Black]: '#212528',
[ColorStyle.Green]: '#36b24d', [ColorStyle.Green]: '#36b24d',
[ColorStyle.Cyan]: '#0e98ad', [ColorStyle.Cyan]: '#0e98ad',
[ColorStyle.Blue]: '#1c7ed6', [ColorStyle.Blue]: '#1c7ed6',