mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Refactored Input.js to Events.js

Browse Source 
Started working on Input.js, this time it's used to handle mouse clicks and keyboard shortcuts.
This commit is contained in:
unsettledgames 2021-07-20 22:52:51 +02:00
parent 4525519071
commit 1b1290c017
14 changed files with 242 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
js/ColorModule.js
View File

@ -18,6 +18,7 @@ const ColorModule = (() => {
animation:100,
filter: ".noshrink",
draggable: ".draggable-colour",
// REFACTOR: Don't touch dragging, simulate a mouseup event instead
onEnd: function() {dragging = false}
});

48
js/Events.js Normal file
View File

@ -0,0 +1,48 @@
class Events {
/** Used to programmatically create an input event
*
* @param {*} keyCode KeyCode of the key to press
* @param {*} ctrl Is ctrl pressed?
* @param {*} alt Is alt pressed?
* @param {*} shift Is shift pressed?
*/
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";
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);
element.addEventListener(event,
function (e) {
functionCallback(...args, e);
});
}
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);
}
}
}

2
js/FileManager.js
View File

@ -2,7 +2,7 @@ const FileManager = (() => {
// Binding the browse holder change event to file loading
const browseHolder = document.getElementById('open-image-browse-holder');
Input.on('change', browseHolder, loadFile);
Events.on('change', browseHolder, loadFile);
function saveProject() {
//create name

4
js/History.js
View File

@ -29,8 +29,8 @@ const History = (() => {
let undoStates = [];
let redoStates = [];
Input.on('click', 'undo-button', undo);
Input.on('click', 'redo-button', redo);
Events.on('click', 'undo-button', undo);
Events.on('click', 'redo-button', redo);
//rename to add undo state
function saveHistoryState (state) {

189
js/Input.js
View File

@ -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
}
})();

4
js/Startup.js
View File

@ -3,8 +3,8 @@ const Startup = (() => {
let firstPixel = true;
let splashPostfix = '';
Input.on('click', 'create-button', create, false);
Input.on('click', 'create-button-splash', create, true);
Events.on('click', 'create-button', create, false);
Events.on('click', 'create-button-splash', create, true);
function create(isSplash) {
// If I'm creating from the splash menu, I append '-splash' so I get the corresponding values

26
js/TopMenuModule.js
View File

@ -13,7 +13,7 @@ const TopMenuModule = (() => {
const menuButton = menuItem.children[0];
//when you click a main menu items button
Input.on('click', menuButton, function (e) {
Events.on('click', menuButton, function (e) {
// Select the item
Util.select(e.target.parentElement);
});
@ -29,16 +29,16 @@ const TopMenuModule = (() => {
switch (currSubmenuButton.textContent) {
case 'New':
Input.on('click', currSubmenuButton, Dialogue.showDialogue, 'new-pixel');
Events.on('click', currSubmenuButton, Dialogue.showDialogue, 'new-pixel');
break;
case 'Save project':
Input.on('click', currSubmenuButton, FileManager.saveProject);
Events.on('click', currSubmenuButton, FileManager.saveProject);
break;
case 'Open':
Input.on('click', currSubmenuButton, FileManager.open);
Events.on('click', currSubmenuButton, FileManager.open);
break;
case 'Export':
Input.on('click', currSubmenuButton, FileManager.exportProject);
Events.on('click', currSubmenuButton, FileManager.exportProject);
break;
case 'Exit':
//if a document exists, make sure they want to delete it
@ -53,31 +53,31 @@ const TopMenuModule = (() => {
break;
// REFACTOR: move the binding to the Selection IIFE or something like that once it's done
case 'Paste':
Input.on('click', currSubmenuButton, pasteSelection);
Events.on('click', currSubmenuButton, pasteSelection);
break;
case 'Copy':
Input.on('click', currSubmenuButton, copySelection);
Events.on('click', currSubmenuButton, copySelection);
break;
case 'Cut':
Input.on('click', currSubmenuButton, cutSelectionTool);
Events.on('click', currSubmenuButton, cutSelectionTool);
break;
case 'Cancel':
Input.on('click', currSubmenuButton, tool.pencil.switchTo);
Events.on('click', currSubmenuButton, tool.pencil.switchTo);
break;
//Help Menu
case 'Settings':
//fill form with current settings values
//Util.setValue('setting-numberOfHistoryStates', settings.numberOfHistoryStates);
Input.on('click', currSubmenuButton, Dialogue.showDialogue, 'settings');
Events.on('click', currSubmenuButton, Dialogue.showDialogue, 'settings');
break;
case 'Help':
Input.on('click', currSubmenuButton, Dialogue.showDialogue, 'help');
Events.on('click', currSubmenuButton, Dialogue.showDialogue, 'help');
break;
case 'About':
Input.on('click', currSubmenuButton, Dialogue.showDialogue, 'about');
Events.on('click', currSubmenuButton, Dialogue.showDialogue, 'about');
break;
case 'Changelog':
Input.on('click', currSubmenuButton, Dialogue.showDialogue, 'changelog');
Events.on('click', currSubmenuButton, Dialogue.showDialogue, 'changelog');
break;
}
}

4
js/_editorMode.js
View File

@ -12,7 +12,7 @@ let modes = {
}
}
Input.on('click', 'switch-editor-mode-splash', function (e) {
Events.on('click', 'switch-editor-mode-splash', function (e) {
toggleMode();
});
@ -75,6 +75,6 @@ function toggleMode() {
switchMode('Advanced');
}
Input.on('click', 'switch-mode-button', function (e) {
Events.on('click', 'switch-mode-button', function (e) {
toggleMode();
});

128
js/_hotkeyListener.js
View File

@ -1,128 +0,0 @@
// REFACTOR: rename Input into Events and have an Input IIFE to take care of hotkeys, cursor ecc?
var spacePressed = false;
/** Just listens to hotkeys and calls the linked functions
*
* @param {*} e
*/
function KeyPress(e) {
var keyboardEvent = window.event? event : e;
//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;
}
//if no document has been created yet,
//orthere is a dialog box open
//ignore hotkeys
if (!documentCreated || Dialogue.isOpen()) return;
//
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:
spacePressed=true;
break;
}
}
}
document.onkeydown = KeyPress;
window.addEventListener("keyup", function (e) {
if (e.keyCode == 32) spacePressed = false;
});

4
js/_layer.js
View File

@ -24,7 +24,7 @@ let oldLayerName = null;
let dragStartLayer;
// Binding the add layer button to the function
Input.on('click',"add-layer-button", addLayer, false);
Events.on('click',"add-layer-button", addLayer, false);
/** Handler class for a single canvas (a single layer)
*
@ -475,7 +475,7 @@ function renameLayer(event) {
p.classList.add("layer-name-editable");
p.focus();
Input.simulateInput(65, true, false, false);
Events.simulateInput(65, true, false, false);
isRenamingLayer = true;
}

2
js/_mouseEvents.js
View File

@ -17,7 +17,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
dragging = true;
//left or right click ?
if (mouseEvent.which == 1) {
if (spacePressed)
if (Input.spacePressed())
currentTool = tool.pan;
else if (mouseEvent.altKey)
currentTool = tool.eyedropper;

2
js/_settings.js
View File

@ -26,7 +26,7 @@ else{
console.log(settings);
//on clicking the save button in the settings dialog
Input.on('click', 'save-settings', saveSettings);
Events.on('click', 'save-settings', saveSettings);
function saveSettings() {
//check if values are valid

38
js/_toolButtons.js
View File

@ -1,38 +1,38 @@
//pencil
Input.on('click',"pencil-button", function(){
Events.on('click',"pencil-button", function(){
tool.pencil.switchTo();
}, false);
//pencil bigger
Input.on('click',"pencil-bigger-button", function(){
Events.on('click',"pencil-bigger-button", function(){
tool.pencil.brushSize++;
}, false);
//pencil smaller
Input.on('click',"pencil-smaller-button", function(){
Events.on('click',"pencil-smaller-button", function(){
if(tool.pencil.brushSize > 1)
tool.pencil.brushSize--;
}, false);
//eraser
Input.on('click',"eraser-button", function(){
Events.on('click',"eraser-button", function(){
console.log("selecting eraser");
tool.eraser.switchTo();
}, false);
//eraser bigger
Input.on('click',"eraser-bigger-button", function(){
Events.on('click',"eraser-bigger-button", function(){
tool.eraser.brushSize++;
}, false);
//eraser smaller
Input.on('click',"eraser-smaller-button", function(e){
Events.on('click',"eraser-smaller-button", function(e){
if(tool.eraser.brushSize > 1)
tool.eraser.brushSize--;
}, false);
// rectangle
Input.on('click','rectangle-button', function(e){
Events.on('click','rectangle-button', function(e){
// If the user clicks twice on the button, they change the draw mode
if (currentTool.name == 'rectangle') {
if (rectangleDrawMode == 'empty') {
@ -50,7 +50,7 @@ Input.on('click','rectangle-button', function(e){
}, false);
// ellipse
Input.on('click','ellipse-button', function(e){
Events.on('click','ellipse-button', function(e){
// If the user clicks twice on the button, they change the draw mode
if (currentTool.name == 'ellipse') {
if (ellipseDrawMode == 'empty') {
@ -68,57 +68,57 @@ Input.on('click','ellipse-button', function(e){
}, false);
// rectangle bigger
Input.on('click',"rectangle-bigger-button", function(){
Events.on('click',"rectangle-bigger-button", function(){
tool.rectangle.brushSize++;
}, false);
// rectangle smaller
Input.on('click',"rectangle-smaller-button", function(e){
Events.on('click',"rectangle-smaller-button", function(e){
if(tool.rectangle.brushSize > 1)
tool.rectangle.brushSize--;
}, false);
// ellipse bigger
Input.on('click',"ellipse-bigger-button", function(){
Events.on('click',"ellipse-bigger-button", function(){
tool.ellipse.brushSize++;
}, false);
// ellipse smaller
Input.on('click',"ellipse-smaller-button", function(e){
Events.on('click',"ellipse-smaller-button", function(e){
if(tool.ellipse.brushSize > 1)
tool.ellipse.brushSize--;
}, false);
//fill
Input.on('click',"fill-button", function(){
Events.on('click',"fill-button", function(){
tool.fill.switchTo();
}, false);
//pan
Input.on('click',"pan-button", function(){
Events.on('click',"pan-button", function(){
tool.pan.switchTo();
}, false);
//eyedropper
Input.on('click',"eyedropper-button", function(){
Events.on('click',"eyedropper-button", function(){
tool.eyedropper.switchTo();
}, false);
//rectangular selection button
Input.on('click', "rectselect-button", function(){
Events.on('click', "rectselect-button", function(){
tool.rectselect.switchTo();
}, false);
//line
Input.on('click',"line-button", function(){
Events.on('click',"line-button", function(){
tool.line.switchTo();
}, false);
Input.on('click',"line-bigger-button", function(){
Events.on('click',"line-bigger-button", function(){
tool.line.brushSize++;
}, false);
Input.on('click',"line-smaller-button", function(){
Events.on('click',"line-smaller-button", function(){
if(tool.line.brushSize > 1)
tool.line.brushSize--;
}, false);

4
js/pixel-editor.js
View File

@ -4,7 +4,7 @@
//=include _pixelEditorUtility.js
//=include lib/sortable.js
//=include Util.js
//=include Input.js
//=include Events.js
//=include Color.js
//=include Dialogue.js
//=include History.js
@ -42,7 +42,7 @@
//=include _loadPalette.js
/**event listeners**/
//=include _hotkeyListener.js
//=include Input.js
//=include _mouseEvents.js
/**buttons**/