kopia lustrzana https://github.com/Tldraw/Tldraw
Adds keyboard shortcuts for tools, colors, sizes.
Steve Ruiz
rodzic
6cc9009e82
commit
bc2633410f
|
|
@ -2,14 +2,17 @@
|
|||
import { useEffect } from 'react'
|
||||
import state from 'state'
|
||||
import inputs from 'state/inputs'
|
||||
import { MoveType } from 'types'
|
||||
import { ColorStyle, MoveType, SizeStyle } from 'types'
|
||||
import { metaKey } from 'utils'
|
||||
|
||||
export default function useKeyboardEvents() {
|
||||
useEffect(() => {
|
||||
function handleKeyDown(e: KeyboardEvent) {
|
||||
const info = inputs.keydown(e)
|
||||
const meta = metaKey(e)
|
||||
|
||||
if (
|
||||
metaKey(e) &&
|
||||
meta &&
|
||||
![
|
||||
'a',
|
||||
'i',
|
||||
|
|
@ -25,9 +28,88 @@ export default function useKeyboardEvents() {
|
|||
e.preventDefault()
|
||||
}
|
||||
|
||||
const info = inputs.keydown(e)
|
||||
|
||||
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': {
|
||||
state.send('NUDGED', { delta: [0, -1], ...info })
|
||||
break
|
||||
|
|
@ -82,7 +164,7 @@ export default function useKeyboardEvents() {
|
|||
break
|
||||
}
|
||||
case 'z': {
|
||||
if (metaKey(e)) {
|
||||
if (meta) {
|
||||
if (e.shiftKey) {
|
||||
state.send('REDO', info)
|
||||
} else {
|
||||
|
|
@ -92,7 +174,7 @@ export default function useKeyboardEvents() {
|
|||
break
|
||||
}
|
||||
case '‘': {
|
||||
if (metaKey(e)) {
|
||||
if (meta) {
|
||||
state.send('MOVED', {
|
||||
...info,
|
||||
type: MoveType.ToFront,
|
||||
|
|
@ -101,7 +183,7 @@ export default function useKeyboardEvents() {
|
|||
break
|
||||
}
|
||||
case '“': {
|
||||
if (metaKey(e)) {
|
||||
if (meta) {
|
||||
state.send('MOVED', {
|
||||
...info,
|
||||
type: MoveType.ToBack,
|
||||
|
|
@ -110,7 +192,7 @@ export default function useKeyboardEvents() {
|
|||
break
|
||||
}
|
||||
case ']': {
|
||||
if (metaKey(e)) {
|
||||
if (meta) {
|
||||
state.send('MOVED', {
|
||||
...info,
|
||||
type: MoveType.Forward,
|
||||
|
|
@ -119,7 +201,7 @@ export default function useKeyboardEvents() {
|
|||
break
|
||||
}
|
||||
case '[': {
|
||||
if (metaKey(e)) {
|
||||
if (meta) {
|
||||
state.send('MOVED', {
|
||||
...info,
|
||||
type: MoveType.Backward,
|
||||
|
|
@ -136,7 +218,7 @@ export default function useKeyboardEvents() {
|
|||
break
|
||||
}
|
||||
case 'Backspace': {
|
||||
if (metaKey(e)) {
|
||||
if (meta) {
|
||||
if (e.shiftKey) {
|
||||
if (window.confirm('Reset document and state?')) {
|
||||
state.send('RESET_DOCUMENT_STATE', info)
|
||||
|
|
@ -150,7 +232,7 @@ export default function useKeyboardEvents() {
|
|||
break
|
||||
}
|
||||
case 'g': {
|
||||
if (metaKey(e)) {
|
||||
if (meta) {
|
||||
if (e.shiftKey) {
|
||||
state.send('UNGROUPED', info)
|
||||
} else {
|
||||
|
|
@ -160,7 +242,7 @@ export default function useKeyboardEvents() {
|
|||
break
|
||||
}
|
||||
case 's': {
|
||||
if (metaKey(e)) {
|
||||
if (meta) {
|
||||
if (e.shiftKey) {
|
||||
state.send('SAVED_AS_TO_FILESYSTEM', info)
|
||||
} else {
|
||||
|
|
@ -170,7 +252,7 @@ export default function useKeyboardEvents() {
|
|||
break
|
||||
}
|
||||
case 'o': {
|
||||
if (metaKey(e)) {
|
||||
if (meta) {
|
||||
break
|
||||
} else {
|
||||
state.send('SELECTED_DOT_TOOL', info)
|
||||
|
|
@ -178,7 +260,7 @@ export default function useKeyboardEvents() {
|
|||
break
|
||||
}
|
||||
case 'v': {
|
||||
if (metaKey(e)) {
|
||||
if (meta) {
|
||||
state.send('PASTED', info)
|
||||
} else {
|
||||
state.send('SELECTED_SELECT_TOOL', info)
|
||||
|
|
@ -186,7 +268,7 @@ export default function useKeyboardEvents() {
|
|||
break
|
||||
}
|
||||
case 'a': {
|
||||
if (metaKey(e)) {
|
||||
if (meta) {
|
||||
state.send('SELECTED_ALL', info)
|
||||
} else {
|
||||
state.send('SELECTED_ARROW_TOOL', info)
|
||||
|
|
@ -194,7 +276,7 @@ export default function useKeyboardEvents() {
|
|||
break
|
||||
}
|
||||
case 'd': {
|
||||
if (metaKey(e)) {
|
||||
if (meta) {
|
||||
state.send('DUPLICATED', info)
|
||||
} else {
|
||||
state.send('SELECTED_DRAW_TOOL', info)
|
||||
|
|
@ -206,7 +288,7 @@ export default function useKeyboardEvents() {
|
|||
break
|
||||
}
|
||||
case 'c': {
|
||||
if (metaKey(e)) {
|
||||
if (meta) {
|
||||
if (e.shiftKey) {
|
||||
state.send('COPIED_TO_SVG', info)
|
||||
} else {
|
||||
|
|
@ -218,7 +300,7 @@ export default function useKeyboardEvents() {
|
|||
break
|
||||
}
|
||||
case 'i': {
|
||||
if (metaKey(e)) {
|
||||
if (meta) {
|
||||
break
|
||||
} else {
|
||||
state.send('SELECTED_CIRCLE_TOOL', info)
|
||||
|
|
@ -226,7 +308,7 @@ export default function useKeyboardEvents() {
|
|||
break
|
||||
}
|
||||
case 'l': {
|
||||
if (metaKey(e)) {
|
||||
if (meta) {
|
||||
if (e.shiftKey) {
|
||||
state.send('TOGGLED_LOGGER')
|
||||
} else {
|
||||
|
|
@ -238,7 +320,7 @@ export default function useKeyboardEvents() {
|
|||
break
|
||||
}
|
||||
case 'y': {
|
||||
if (metaKey(e)) {
|
||||
if (meta) {
|
||||
break
|
||||
} else {
|
||||
state.send('SELECTED_RAY_TOOL', info)
|
||||
|
|
@ -246,7 +328,7 @@ export default function useKeyboardEvents() {
|
|||
break
|
||||
}
|
||||
case 'p': {
|
||||
if (metaKey(e)) {
|
||||
if (meta) {
|
||||
break
|
||||
} else {
|
||||
state.send('SELECTED_POLYLINE_TOOL', info)
|
||||
|
|
@ -254,7 +336,7 @@ export default function useKeyboardEvents() {
|
|||
break
|
||||
}
|
||||
case 'r': {
|
||||
if (metaKey(e)) {
|
||||
if (meta) {
|
||||
break
|
||||
} else {
|
||||
state.send('SELECTED_RECTANGLE_TOOL', info)
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@ const canvasLight = '#fafafa'
|
|||
const canvasDark = '#343d45'
|
||||
|
||||
const colors = {
|
||||
[ColorStyle.Black]: '#212528',
|
||||
[ColorStyle.White]: '#f0f1f3',
|
||||
[ColorStyle.LightGray]: '#c6cbd1',
|
||||
[ColorStyle.Gray]: '#788492',
|
||||
[ColorStyle.Black]: '#212528',
|
||||
[ColorStyle.Green]: '#36b24d',
|
||||
[ColorStyle.Cyan]: '#0e98ad',
|
||||
[ColorStyle.Blue]: '#1c7ed6',
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue