mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
f499662afc
- added `/:paletteSlug/:resolution` functionality for localhost testing - created `currFile.sublayers` for *things that should zoom with the canvas layers* - `currFile.layers` now solely contains the canvas layers - added `getProjectData` to `FileManager`'s exported methods --- - added `FileManager.localStorageSave` (it's basically just: localStorage.setItem("lpe-cache",FileManager.getProjectData())) - added `FileManager.localStorageCheck` (it's basically just: `!!localStorage.getItem("lpe-cache")`) - added `FileManager.localStorageLoad` (it's basically just: `return localStorage.getItem("lpe-cache")`) - added `FileManager.localStorageReset` (for debugging purity) --- - calling `FileManager.localStorageSave()` on mouse up (we should stress test this) --- - changed lpe file format to `{canvasWidth:number,canvasHeight:number,selectedLayer:number,colors:[],layers:[]}` - added backward compatibility for the old lpe file format --- - added some canvas utility functions in `canvas_util` - added Unsettled's color similarity utility functions in `color_util2` --- - html boilerplate - wang tiles - - POC - tiny text boilerplate - POC - tiny text font scraper --- - WIP - added two optional url route parameters `/:paletteSlug/:resolution/:prefillWidth/:prefillBinaryStr` - WIP POC - hbs_parser.js (outputs tree data about hbs file relationships)
206 lines
6.3 KiB
JavaScript
206 lines
6.3 KiB
JavaScript
const Input = (() => {
|
|
let dragging = false;
|
|
let currentMouseEvent = undefined;
|
|
let lastMouseTarget = undefined;
|
|
let spacePressed = false;
|
|
let altPressed = false;
|
|
let ctrlPressed = 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) spacePressed = false;
|
|
if (!e.altKey) altPressed = false;
|
|
if (!e.ctrlKey) ctrlPressed = false;
|
|
});
|
|
|
|
// Update variables on mouse clicks
|
|
Events.on("mousedown", window, onMouseDown);
|
|
Events.on("mouseup", window, onMouseUp);
|
|
|
|
function onMouseDown(event) {
|
|
lastMouseTarget = event.target;
|
|
currentMouseEvent = event;
|
|
dragging = true;
|
|
|
|
if (!Util.isChildOfByClass(event.target, "editor-top-menu")) {
|
|
TopMenuModule.closeMenu();
|
|
}
|
|
}
|
|
|
|
function onMouseUp(event) {
|
|
currentMouseEvent = event;
|
|
dragging = false;
|
|
|
|
if (currFile.currentLayer != null && !Util.isChildOfByClass(event.target, "layers-menu-entry")) {
|
|
LayerList.closeOptionsMenu();
|
|
}
|
|
}
|
|
|
|
function getCursorPosition(e) {
|
|
var x;
|
|
var y;
|
|
|
|
if (e.pageX != undefined && e.pageY != undefined) {
|
|
x = e.pageX;
|
|
y = e.pageY;
|
|
}
|
|
else {
|
|
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
|
|
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
|
|
}
|
|
|
|
x -= currFile.currentLayer.canvas.offsetLeft;
|
|
y -= currFile.currentLayer.canvas.offsetTop;
|
|
|
|
return [Math.round(x), Math.round(y)];
|
|
}
|
|
|
|
/** Just listens to hotkeys and calls the linked functions
|
|
*
|
|
* @param {*} e
|
|
*/
|
|
function KeyPress(e) {
|
|
var keyboardEvent = window.event? event : e;
|
|
altPressed = e.altKey;
|
|
ctrlPressed = e.ctrlKey;
|
|
|
|
//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' || LayerList.isRenamingLayer()) {
|
|
if (e.keyCode == 13) {
|
|
LayerList.closeOptionsMenu();
|
|
}
|
|
return;
|
|
}
|
|
|
|
//if no document has been created yet or there is a dialog box open ignore hotkeys
|
|
if (!EditorState.documentCreated()) return;
|
|
|
|
if (e.key === "Escape") {
|
|
Events.emit("esc-pressed");
|
|
}
|
|
else if (!Dialogue.isOpen()){
|
|
switch (keyboardEvent.keyCode) {
|
|
//pencil tool - 1, b
|
|
case 49: case 66:
|
|
Events.emit("tool-shortcut", "brush");
|
|
break;
|
|
// copy tool c
|
|
case 67: case 99:
|
|
if (keyboardEvent.ctrlKey) {
|
|
Events.emit("ctrl+c");
|
|
}
|
|
break;
|
|
//fill tool - 2, f
|
|
case 50: case 70:
|
|
Events.emit("tool-shortcut", "fill");
|
|
break;
|
|
//eyedropper - 3, e
|
|
case 51: case 69:
|
|
Events.emit("tool-shortcut", "eyedropper");
|
|
break;
|
|
//pan - 4, p,
|
|
case 52: case 80:
|
|
Events.emit("tool-shortcut", "pan");
|
|
break;
|
|
// line - l
|
|
case 76:
|
|
Events.emit("tool-shortcut", "line");
|
|
break;
|
|
// eraser -6, r
|
|
case 54: case 82:
|
|
Events.emit("tool-shortcut", "eraser");
|
|
break;
|
|
// Rectangular selection m
|
|
case 77: case 109:
|
|
Events.emit("tool-shortcut", "rectselect");
|
|
break;
|
|
// Lasso tool, q
|
|
case 81: case 113:
|
|
Events.emit("tool-shortcut", "lassoselect");
|
|
break;
|
|
// ellipse tool, s
|
|
case 83:
|
|
Events.emit("tool-shortcut", "ellipse");
|
|
break;
|
|
// rectangle tool, u
|
|
case 85:
|
|
Events.emit("tool-shortcut", "rectangle");
|
|
break;
|
|
// magic wand tool
|
|
case 87: case 119:
|
|
Events.emit("tool-shortcut", "magicwand");
|
|
break;
|
|
// Paste tool
|
|
case 86: case 118:
|
|
if (keyboardEvent.ctrlKey) {
|
|
Events.emit("ctrl+v");
|
|
}
|
|
break;
|
|
case 88: case 120:
|
|
if (keyboardEvent.ctrlKey) {
|
|
Events.emit("ctrl+x");
|
|
}
|
|
break;
|
|
//Z
|
|
case 90: case 122:
|
|
//CTRL+ALT+Z redo
|
|
if (keyboardEvent.altKey && keyboardEvent.ctrlKey) {
|
|
History.redo();
|
|
}
|
|
//CTRL+Z undo
|
|
else if (keyboardEvent.ctrlKey) {
|
|
History.undo();
|
|
}
|
|
break;
|
|
//redo - ctrl y
|
|
case 89:
|
|
if (keyboardEvent.ctrlKey)
|
|
History.redo();
|
|
break;
|
|
case 32:
|
|
spacePressed = true;
|
|
break;
|
|
case 46:
|
|
////console.log("Pressed del");
|
|
Events.emit("del");
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
function isDragging() {
|
|
return dragging;
|
|
}
|
|
|
|
function getCurrMouseEvent() {
|
|
return currentMouseEvent;
|
|
}
|
|
|
|
function isAltPressed() {
|
|
return altPressed;
|
|
}
|
|
|
|
function isCtrlPressed() {
|
|
return ctrlPressed;
|
|
}
|
|
|
|
function isSpacePressed() {
|
|
return spacePressed;
|
|
}
|
|
|
|
function getLastTarget() {
|
|
return lastMouseTarget;
|
|
}
|
|
|
|
return {
|
|
isDragging,
|
|
getCurrMouseEvent,
|
|
getCursorPosition,
|
|
isAltPressed,
|
|
isCtrlPressed,
|
|
isSpacePressed,
|
|
getLastTarget
|
|
}
|
|
})(); |