2020-01-22 14:34:46 +00:00
|
|
|
/*
|
|
|
|
* keypress actions
|
|
|
|
*/
|
2021-01-30 07:02:31 +00:00
|
|
|
import { t } from 'ttag';
|
2020-04-28 05:16:47 +00:00
|
|
|
import copy from '../utils/clipboard';
|
2020-01-22 14:34:46 +00:00
|
|
|
import {
|
|
|
|
toggleGrid,
|
2020-06-23 16:49:56 +00:00
|
|
|
toggleHistoricalView,
|
2024-01-24 12:51:26 +00:00
|
|
|
toggleEasterEgg,
|
2020-01-22 14:34:46 +00:00
|
|
|
togglePixelNotify,
|
2024-01-22 23:39:29 +00:00
|
|
|
toggleMvmCtrls,
|
2020-01-22 14:34:46 +00:00
|
|
|
toggleMute,
|
2021-06-18 11:35:53 +00:00
|
|
|
selectCanvas,
|
2024-01-22 19:49:42 +00:00
|
|
|
selectHoverColor,
|
|
|
|
selectHoldPaint,
|
|
|
|
setMoveU,
|
|
|
|
setMoveV,
|
|
|
|
setMoveW,
|
2022-07-11 12:42:09 +00:00
|
|
|
} from '../store/actions';
|
2024-01-23 23:59:22 +00:00
|
|
|
import { HOLD_PAINT } from '../core/constants';
|
|
|
|
import { notify } from '../store/actions/thunks';
|
2020-01-22 14:34:46 +00:00
|
|
|
|
2024-01-24 12:54:14 +00:00
|
|
|
const charKeys = ['g', 'h', 'x', 'm', 'r', 'z', '+', '-'];
|
2024-01-22 19:49:42 +00:00
|
|
|
|
|
|
|
export function createKeyUpHandler(store) {
|
|
|
|
return (event) => {
|
|
|
|
/*
|
|
|
|
* key locations
|
|
|
|
*/
|
|
|
|
switch (event.code) {
|
|
|
|
case 'ArrowUp':
|
|
|
|
case 'KeyW':
|
|
|
|
store.dispatch(setMoveV(0));
|
|
|
|
return;
|
|
|
|
case 'ArrowLeft':
|
|
|
|
case 'KeyA':
|
|
|
|
store.dispatch(setMoveU(0));
|
|
|
|
return;
|
|
|
|
case 'ArrowDown':
|
|
|
|
case 'KeyS':
|
|
|
|
store.dispatch(setMoveV(0));
|
|
|
|
return;
|
|
|
|
case 'ArrowRight':
|
|
|
|
case 'KeyD':
|
|
|
|
store.dispatch(setMoveU(0));
|
|
|
|
return;
|
|
|
|
case 'KeyE':
|
|
|
|
store.dispatch(setMoveW(0));
|
|
|
|
return;
|
|
|
|
case 'KeyQ':
|
|
|
|
store.dispatch(setMoveW(0));
|
|
|
|
return;
|
|
|
|
default:
|
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
* key char
|
|
|
|
*/
|
|
|
|
switch (event.key) {
|
|
|
|
case '+':
|
|
|
|
store.dispatch(setMoveW(0));
|
|
|
|
return;
|
|
|
|
case '-':
|
|
|
|
store.dispatch(setMoveW(0));
|
|
|
|
return;
|
|
|
|
case 'Shift':
|
|
|
|
case 'CapsLock':
|
|
|
|
store.dispatch(selectHoldPaint(HOLD_PAINT.OFF));
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
2020-01-22 14:34:46 +00:00
|
|
|
|
2024-01-22 19:49:42 +00:00
|
|
|
export function createKeyDownHandler(store) {
|
2022-07-11 13:33:29 +00:00
|
|
|
return (event) => {
|
|
|
|
// ignore key presses if modal is open or chat is used
|
|
|
|
if (event.target.nodeName === 'INPUT'
|
|
|
|
|| event.target.nodeName === 'TEXTAREA'
|
|
|
|
) {
|
|
|
|
return;
|
|
|
|
}
|
2020-01-22 14:34:46 +00:00
|
|
|
|
2022-07-11 13:33:29 +00:00
|
|
|
let { key } = event;
|
2021-06-18 11:35:53 +00:00
|
|
|
|
2022-07-11 13:33:29 +00:00
|
|
|
const num = Number(key);
|
|
|
|
if (!Number.isNaN(num) && num > 0) {
|
|
|
|
// switch to canvas on num keys
|
|
|
|
const { canvases, canvasId: curCanvasId } = store.getState().canvas;
|
|
|
|
const canvasIds = Object.keys(canvases).filter((id) => !canvases[id].hid);
|
|
|
|
if (num <= canvasIds.length) {
|
|
|
|
const canvasId = canvasIds[num - 1];
|
2022-10-03 10:47:03 +00:00
|
|
|
if (canvasId !== curCanvasId) {
|
2022-07-11 13:33:29 +00:00
|
|
|
store.dispatch(selectCanvas(canvasId));
|
|
|
|
const canvasName = canvases[canvasId].title;
|
|
|
|
store.dispatch(notify(t`Switched to ${canvasName}`));
|
|
|
|
}
|
2021-07-16 10:06:20 +00:00
|
|
|
}
|
2022-07-11 13:33:29 +00:00
|
|
|
return;
|
2021-06-18 11:35:53 +00:00
|
|
|
}
|
|
|
|
|
2024-01-22 19:49:42 +00:00
|
|
|
/*
|
|
|
|
* key locations
|
|
|
|
*/
|
|
|
|
switch (event.code) {
|
|
|
|
case 'ArrowUp':
|
|
|
|
case 'KeyW':
|
|
|
|
store.dispatch(setMoveV(-1));
|
|
|
|
return;
|
|
|
|
case 'ArrowLeft':
|
|
|
|
case 'KeyA':
|
|
|
|
store.dispatch(setMoveU(-1));
|
|
|
|
return;
|
|
|
|
case 'ArrowDown':
|
|
|
|
case 'KeyS':
|
|
|
|
store.dispatch(setMoveV(1));
|
|
|
|
return;
|
|
|
|
case 'ArrowRight':
|
|
|
|
case 'KeyD':
|
|
|
|
store.dispatch(setMoveU(1));
|
|
|
|
return;
|
|
|
|
case 'KeyE':
|
|
|
|
store.dispatch(setMoveW(1));
|
|
|
|
return;
|
|
|
|
case 'KeyQ':
|
|
|
|
store.dispatch(setMoveW(-1));
|
|
|
|
return;
|
|
|
|
default:
|
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
* key char
|
|
|
|
*/
|
|
|
|
switch (event.key) {
|
|
|
|
case '+':
|
|
|
|
store.dispatch(setMoveW(1));
|
|
|
|
return;
|
|
|
|
case '-':
|
|
|
|
store.dispatch(setMoveW(-1));
|
|
|
|
return;
|
|
|
|
case 'Control':
|
|
|
|
store.dispatch(selectHoverColor(-1));
|
|
|
|
return;
|
|
|
|
case 'Shift': {
|
|
|
|
if (event.location === KeyboardEvent.DOM_KEY_LOCATION_LEFT) {
|
|
|
|
// left shift
|
2024-01-24 02:52:50 +00:00
|
|
|
store.dispatch(selectHoldPaint(HOLD_PAINT.PENCIL, true));
|
2024-01-22 19:49:42 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (event.location === KeyboardEvent.DOM_KEY_LOCATION_RIGHT) {
|
|
|
|
// right shift
|
2024-01-24 02:52:50 +00:00
|
|
|
store.dispatch(selectHoldPaint(HOLD_PAINT.HISTORY, true));
|
2024-01-22 19:49:42 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
default:
|
|
|
|
}
|
|
|
|
|
2022-07-11 13:33:29 +00:00
|
|
|
/*
|
|
|
|
* if char of key isn't used by a keybind,
|
|
|
|
* we check if the key location is where a
|
|
|
|
* key that is used would be on QWERTY
|
|
|
|
*/
|
2024-01-22 19:49:42 +00:00
|
|
|
if (!charKeys.includes(key)) {
|
2022-07-11 13:33:29 +00:00
|
|
|
key = event.code;
|
|
|
|
if (!key.startsWith('Key')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
key = key.slice(-1).toLowerCase();
|
2021-01-29 21:46:58 +00:00
|
|
|
}
|
2021-01-27 21:10:06 +00:00
|
|
|
|
2022-07-11 13:33:29 +00:00
|
|
|
switch (key) {
|
|
|
|
case 'g':
|
|
|
|
store.dispatch(toggleGrid());
|
|
|
|
store.dispatch(notify((store.getState().gui.showGrid)
|
|
|
|
? t`Grid ON`
|
|
|
|
: t`Grid OFF`));
|
|
|
|
return;
|
|
|
|
case 'h':
|
2024-01-04 14:41:23 +00:00
|
|
|
if (window?.ssv.backupurl) {
|
2022-07-11 13:33:29 +00:00
|
|
|
store.dispatch(toggleHistoricalView());
|
|
|
|
}
|
|
|
|
return;
|
|
|
|
case 'x':
|
|
|
|
store.dispatch(togglePixelNotify());
|
|
|
|
store.dispatch(notify((store.getState().gui.showPixelNotify)
|
|
|
|
? t`Pixel Notify ON`
|
|
|
|
: t`Pixel Notify OFF`));
|
|
|
|
return;
|
|
|
|
case 'm':
|
|
|
|
store.dispatch(toggleMute());
|
2022-09-05 08:59:06 +00:00
|
|
|
store.dispatch(notify((store.getState().gui.mute)
|
2022-07-11 13:33:29 +00:00
|
|
|
? t`Muted Sound`
|
|
|
|
: t`Unmuted Sound`));
|
|
|
|
return;
|
2024-01-22 23:39:29 +00:00
|
|
|
case 'n':
|
|
|
|
store.dispatch(toggleMvmCtrls());
|
|
|
|
return;
|
2022-07-11 13:33:29 +00:00
|
|
|
case 'r': {
|
2022-08-17 19:48:50 +00:00
|
|
|
const { hover } = store.getState().canvas;
|
2022-07-11 13:33:29 +00:00
|
|
|
const text = hover.join('_');
|
|
|
|
copy(text);
|
|
|
|
store.dispatch(notify(t`Copied!`));
|
|
|
|
return;
|
2021-07-07 07:19:19 +00:00
|
|
|
}
|
2024-01-24 12:54:14 +00:00
|
|
|
case 'z':
|
2024-01-24 12:51:26 +00:00
|
|
|
store.dispatch(toggleEasterEgg());
|
|
|
|
store.dispatch(notify((store.getState().gui.easterEgg)
|
|
|
|
? t`Easter Egg ON`
|
|
|
|
: t`Easter Egg OFF`));
|
2022-07-11 13:33:29 +00:00
|
|
|
break;
|
|
|
|
default:
|
2020-04-28 05:16:47 +00:00
|
|
|
}
|
2022-07-11 13:33:29 +00:00
|
|
|
};
|
2020-01-22 14:34:46 +00:00
|
|
|
}
|