mirror
/
pixel-editor
mirror of https://github.com/lospec/pixel-editor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added back eyedropper alt key binding

This commit is contained in:
unsettledgames 2021-11-09 12:53:19 +01:00
parent 2ca5aa75b4
commit 73f7c980eb
4 changed files with 70 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
js/Input.js
View File

@ -1,11 +1,18 @@
const Input = (() => {
let dragging = false;
let currentMouseEvent = 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) Events.emit("space-released");;});
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);
@ -54,6 +61,8 @@ const Input = (() => {
*/
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()) {
@ -145,7 +154,7 @@ const Input = (() => {
History.redo();
break;
case 32:
Events.emit("space-pressed");
spacePressed = true;
break;
}
}
@ -159,9 +168,24 @@ const Input = (() => {
return currentMouseEvent;
}
function isAltPressed() {
return altPressed;
}
function isCtrlPressed() {
return ctrlPressed;
}
function isSpacePressed() {
return spacePressed;
}
return {
isDragging,
getCurrMouseEvent,
getCursorPosition
getCursorPosition,
isAltPressed,
isCtrlPressed,
isSpacePressed
}
})();

20
js/Tool.js
View File

@ -39,7 +39,7 @@ class Tool {
switch (this.cursorType.type) {
case 'html':
canvasView.style.cursor = 'default';
canvasView.style.cursor = 'none';
break;
case 'cursor':
this.cursor = this.cursorType.style;
@ -50,7 +50,11 @@ class Tool {
}
}
updateCursor() {}
updateCursor() {
brushPreview.style.display = 'block';
brushPreview.style.width = this.currSize * zoom + 'px';
brushPreview.style.height = this.currSize * zoom + 'px';
}
onMouseWheel(mousePos, mode) {}
@ -58,6 +62,8 @@ class Tool {
this.prevMousePos = this.currMousePos;
this.currMousePos = cursorLocation;
this.updateCursor();
let toSub = 1;
// Prevents the brush to be put in the middle of pixels
if (this.currSize % 2 == 0) {
@ -68,16 +74,14 @@ class Tool {
brushPreview.style.top = (Math.floor(cursorLocation[1] / zoom) * zoom + currentLayer.canvas.offsetTop - this.currSize * zoom / 2 - zoom / 2 + toSub * zoom) + 'px';
if (this.cursorType.type == 'html') {
if (cursorTarget == 'drawingCanvas'|| cursorTarget.className == 'drawingCanvas') {
if (cursorTarget.className == 'drawingCanvas'|| cursorTarget.className == 'drawingCanvas') {
brushPreview.style.visibility = 'visible';
canvasView.style.cursor = 'none';
}
else {
brushPreview.style.visibility = 'hidden';
canvasView.style.cursor = 'default';
}
brushPreview.style.display = 'block';
brushPreview.style.width = this.currSize * zoom + 'px';
brushPreview.style.height = this.currSize * zoom + 'px';
}
}
@ -85,7 +89,9 @@ class Tool {
if (this.mainButton != undefined)
this.mainButton.parentElement.classList.remove("selected");
this.isSelected = false;
brushPreview.style.visibility = 'hidden';
canvasView.style.cursor = 'default';
}
onStart(mousePos) {

32
js/ToolManager.js
View File

@ -1,5 +1,6 @@
const ToolManager = (() => {
tools = {};
isPanning = false;
tools["brush"] = new BrushTool("brush", {type: 'html'}, switchTool);
tools["eraser"] = new EraserTool("eraser", {type: 'html'}, switchTool);
@ -25,6 +26,7 @@ const ToolManager = (() => {
Events.on("mousedown", window, onMouseDown);
Events.on("mousewheel", window, onMouseWheel);
// Bind tool shortcuts
Events.onCustom("tool-shortcut", onShortcut);
function onShortcut(tool) {
@ -45,7 +47,15 @@ const ToolManager = (() => {
if (!Input.isDragging()) {
switch(mouseEvent.which) {
case 1:
currTool.onStart(mousePos, mouseEvent.target);
if (Input.isSpacePressed()) {
tools["pan"].onStart(mousePos, mouseEvent.target);
}
else if (Input.isAltPressed()) {
tools["eyedropper"].onStart(mousePos, mouseEvent.target);
}
else {
currTool.onStart(mousePos, mouseEvent.target);
}
break;
case 2:
tools["pan"].onStart(mousePos, mouseEvent.target);
@ -69,7 +79,15 @@ const ToolManager = (() => {
if (Input.isDragging()) {
switch (mouseEvent.which) {
case 1:
currTool.onDrag(mousePos, mouseEvent.target);
if (Input.isSpacePressed()) {
tools["pan"].onDrag(mousePos, mouseEvent.target);
}
else if (Input.isAltPressed()) {
tools["eyedropper"].onDrag(mousePos, mouseEvent.target);
}
else {
currTool.onDrag(mousePos, mouseEvent.target);
}
break;
case 2:
tools["pan"].onDrag(mousePos, mouseEvent.target);
@ -92,7 +110,15 @@ const ToolManager = (() => {
if (Input.isDragging()) {
switch(mouseEvent.which) {
case 1:
currTool.onEnd(mousePos);
if (Input.isSpacePressed()) {
tools["pan"].onEnd(mousePos, mouseEvent.target);
}
else if (Input.isAltPressed()) {
tools["eyedropper"].onEnd(mousePos, mouseEvent.target);
}
else {
currTool.onEnd(mousePos);
}
break;
case 2:
tools["pan"].onEnd(mousePos);

2
js/tools/EyeDropperTool.js
View File

@ -77,7 +77,7 @@ class EyedropperTool extends Tool {
// Returned colour
let selectedColor;
for (let i=1; i<layers.length; i++) {
for (let i=1; i<layers.length-3; i++) {
// Getting the colour of the pixel in the cursorLocation
tmpColour = layers[i].context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data;