mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Refactored Input.js to Events.js
Started working on Input.js, this time it's used to handle mouse clicks and keyboard shortcuts.
This commit is contained in:
189
js/Input.js
189
js/Input.js
@ -1,48 +1,155 @@
|
||||
class Input {
|
||||
/** Used to programmatically create an input event
|
||||
const Input = (() => {
|
||||
let spaceKeyPressed = false;
|
||||
let dragging = false;
|
||||
|
||||
// Hotkeys when pressing a key
|
||||
Events.on("keydown", document, KeyPress);
|
||||
|
||||
// Update held keys when releasing a key
|
||||
Events.on("keyup", window, function (e) {
|
||||
if (e.keyCode == 32) spaceKeyPressed = false;
|
||||
});
|
||||
|
||||
// Update variables on mouse clicks
|
||||
Events.on("mousedown", window, onMouseDown);
|
||||
Events.on("mouseup", window, onMouseUp);
|
||||
|
||||
function onMouseDown(event) {
|
||||
dragging = true;
|
||||
}
|
||||
|
||||
function onMouseUp(event) {
|
||||
dragging = false;
|
||||
}
|
||||
|
||||
/** Just listens to hotkeys and calls the linked functions
|
||||
*
|
||||
* @param {*} keyCode KeyCode of the key to press
|
||||
* @param {*} ctrl Is ctrl pressed?
|
||||
* @param {*} alt Is alt pressed?
|
||||
* @param {*} shift Is shift pressed?
|
||||
* @param {*} e
|
||||
*/
|
||||
static simulateInput(keyCode, ctrl, alt, shift) {
|
||||
// I just copy pasted this from stack overflow lol please have mercy
|
||||
let keyboardEvent = document.createEvent("KeyboardEvent");
|
||||
let initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";
|
||||
function KeyPress(e) {
|
||||
var keyboardEvent = window.event? event : e;
|
||||
|
||||
keyboardEvent[initMethod](
|
||||
"keydown", // event type: keydown, keyup, keypress
|
||||
true, // bubbles
|
||||
true, // cancelable
|
||||
window, // view: should be window
|
||||
ctrl, // ctrlKey
|
||||
alt, // altKey
|
||||
shift, // shiftKey
|
||||
false, // metaKey
|
||||
keyCode, // keyCode: unsigned long - the virtual key code, else 0
|
||||
keyCode // charCode: unsigned long - the Unicode character associated with the depressed key, else 0
|
||||
);
|
||||
document.dispatchEvent(keyboardEvent);
|
||||
}
|
||||
|
||||
static on(event, elementId, functionCallback, ...args) {
|
||||
//if element provided is string, get the actual element
|
||||
const element = Util.getElement(elementId);
|
||||
//if the user is typing in an input field or renaming a layer, ignore these hotkeys, unless it's an enter key
|
||||
if (document.activeElement.tagName == 'INPUT' || isRenamingLayer) {
|
||||
if (e.keyCode == 13) {
|
||||
currentLayer.closeOptionsMenu();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
element.addEventListener(event,
|
||||
function (e) {
|
||||
functionCallback(...args, e);
|
||||
});
|
||||
}
|
||||
//if no document has been created yet,
|
||||
//orthere is a dialog box open
|
||||
//ignore hotkeys
|
||||
if (!documentCreated || Dialogue.isOpen()) return;
|
||||
|
||||
static onChildren(event, parentElement, functionCallback, ...args) {
|
||||
parentElement = Util.getElement(parentElement);
|
||||
const children = parentElement.children;
|
||||
|
||||
//loop through children and add onClick listener
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
on(event, children[i], functionCallback, ...args);
|
||||
//
|
||||
if (e.key === "Escape") {
|
||||
if (!selectionCanceled) {
|
||||
tool.pencil.switchTo();
|
||||
}
|
||||
}
|
||||
else {
|
||||
switch (keyboardEvent.keyCode) {
|
||||
//pencil tool - 1, b
|
||||
case 49: case 66:
|
||||
tool.pencil.switchTo();
|
||||
break;
|
||||
// copy tool c
|
||||
case 67: case 99:
|
||||
if (keyboardEvent.ctrlKey && !dragging && currentTool.name == 'moveselection') {
|
||||
copySelection();
|
||||
}
|
||||
break;
|
||||
//fill tool - 2, f
|
||||
case 50: case 70:
|
||||
tool.fill.switchTo();
|
||||
break;
|
||||
//eyedropper - 3, e
|
||||
case 51: case 69:
|
||||
tool.eyedropper.switchTo();
|
||||
break;
|
||||
//pan - 4, p,
|
||||
case 52: case 80:
|
||||
tool.pan.switchTo();
|
||||
break;
|
||||
case 76:
|
||||
tool.line.switchTo();
|
||||
break;
|
||||
//zoom - 5
|
||||
case 53:
|
||||
tool.zoom.switchTo();
|
||||
break;
|
||||
// eraser -6, r
|
||||
case 54: case 82:
|
||||
tool.eraser.switchTo()
|
||||
break;
|
||||
// Rectangular selection
|
||||
case 77: case 109:
|
||||
tool.rectselect.switchTo()
|
||||
break;
|
||||
// TODO: [ELLIPSE] Decide on a shortcut to use. "s" was chosen without any in-team consultation.
|
||||
// ellipse tool, s
|
||||
case 83:
|
||||
tool.ellipse.switchTo()
|
||||
break;
|
||||
// rectangle tool, u
|
||||
case 85:
|
||||
tool.rectangle.switchTo()
|
||||
break;
|
||||
// Paste tool
|
||||
case 86: case 118:
|
||||
if (keyboardEvent.ctrlKey && !dragging) {
|
||||
pasteSelection();
|
||||
}
|
||||
break;
|
||||
case 88: case 120:
|
||||
if (keyboardEvent.ctrlKey && !dragging && currentTool.name == 'moveselection') {
|
||||
cutSelectionTool();
|
||||
tool.pencil.switchTo();
|
||||
}
|
||||
break;
|
||||
//Z
|
||||
case 90:
|
||||
//CTRL+ALT+Z redo
|
||||
if (keyboardEvent.altKey && keyboardEvent.ctrlKey) {
|
||||
History.redo();
|
||||
if (!selectionCanceled) {
|
||||
tool.pencil.switchTo()
|
||||
}
|
||||
}
|
||||
//CTRL+Z undo
|
||||
else if (keyboardEvent.ctrlKey) {
|
||||
History.undo();
|
||||
if (!selectionCanceled) {
|
||||
tool.pencil.switchTo()
|
||||
}
|
||||
}
|
||||
//Z switch to zoom tool
|
||||
else
|
||||
tool.zoom.switchTo()
|
||||
break;
|
||||
//redo - ctrl y
|
||||
case 89:
|
||||
if (keyboardEvent.ctrlKey)
|
||||
History.redo();
|
||||
break;
|
||||
case 32:
|
||||
spaceKeyPressed=true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function spacePressed() {
|
||||
return spaceKeyPressed;
|
||||
}
|
||||
|
||||
function isDragging() {
|
||||
return dragging;
|
||||
}
|
||||
|
||||
return {
|
||||
spacePressed,
|
||||
isDragging
|
||||
}
|
||||
})();
|
Reference in New Issue
Block a user