Adds keyboard shortcuts for tools, colors, sizes.
This commit is contained in:
parent
6cc9009e82
commit
bc2633410f
2 changed files with 105 additions and 23 deletions
|
@ -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)
|
||||||
|
|
|
@ -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',
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue