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

Fixed a few minor bugs

Browse Source 
Undoing while selecting caused mess.
Selecting outside the canvas caused empty lines to appear on the canvas.
This commit is contained in:
unsettledgames 2020-04-09 16:48:19 +02:00
parent 4b78e8fee1
commit f92a7f4a46
4 changed files with 74 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
js/_hotkeyListener.js
View File

@ -13,8 +13,10 @@ function KeyPress(e) {
//
if (e.key === "Escape") {
endSelection();
changeTool('pencil');
if (!selectionCanceled) {
endSelection();
changeTool('pencil');
}
}
else {
switch (keyboardEvent.keyCode) {
@ -53,9 +55,18 @@ function KeyPress(e) {
//CTRL+ALT+Z redo
if (keyboardEvent.altKey && keyboardEvent.ctrlKey)
redo();
if (!selectionCanceled) {
endSelection();
changeTool('pencil');
}
//CTRL+Z undo
else if (keyboardEvent.ctrlKey)
undo();
else if (keyboardEvent.ctrlKey) {
undo();
if (!selectionCanceled) {
endSelection();
changeTool('pencil');
}
}
//Z switch to zoom tool
else
changeTool('zoom');

10
js/_mouseEvents.js
View File

@ -127,7 +127,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
layers[i].copyData(layers[0]);
}
}
else if (currentTool == 'rectselect') {
else if (currentTool == 'rectselect' && isRectSelecting) {
endRectSelection(mouseEvent);
}
else if (currentTool == 'rectangle') {
@ -143,6 +143,8 @@ window.addEventListener("mouseup", function (mouseEvent) {
}, false);
// OPTIMIZABLE: redundant || mouseEvent.target.className in currentTool ifs
//mouse is moving on canvas
window.addEventListener("mousemove", draw, false);
function draw (mouseEvent) {
@ -300,13 +302,17 @@ function draw (mouseEvent) {
updateCursor();
}
else if (currentTool == 'rectselect') {
if (dragging && !isRectSelecting) {
if (dragging && !isRectSelecting && mouseEvent.target.className == 'drawingCanvas') {
isRectSelecting = true;
console.log("cominciata selezione su " + mouseEvent.target.className);
startRectSelection(mouseEvent);
}
else if (dragging && isRectSelecting) {
updateRectSelection(mouseEvent);
}
else if (isRectSelecting) {
endRectSelection();
}
}
else if (currentTool == 'moveselection') {
// Updating the cursor (move if inside rect, cross if not)

68
js/_move.js
View File

@ -2,10 +2,20 @@ var imageDataToMove;
var originalDataPosition;
var canMoveSelection = false;
var lastMovePos;
var selectionCanceled = false;
var selectionCanceled = true;
var firstTimeMove = true;
// TODO: move with arrows
function updateMovePreview(mouseEvent) {
// ISSUE
selectionCanceled = false;
if (firstTimeMove) {
cutSelection(mouseEvent);
}
firstTimeMove = false;
lastMousePos = getCursorPosition(mouseEvent);
// clear the entire tmp layer
TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
@ -23,42 +33,40 @@ function endSelection() {
TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
VFXLayer.context.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
let underlyingImageData = currentLayer.context.getImageData(startX, startY, endX - startX, endY - startY);
if (imageDataToMove !== undefined) {
let underlyingImageData = currentLayer.context.getImageData(startX, startY, endX - startX, endY - startY);
for (let i=0; i<underlyingImageData.data.length; i+=4) {
let currentMovePixel = [
imageDataToMove.data[i], imageDataToMove.data[i+1],
imageDataToMove.data[i+2], imageDataToMove.data[i+3]
];
for (let i=0; i<underlyingImageData.data.length; i+=4) {
let currentMovePixel = [
imageDataToMove.data[i], imageDataToMove.data[i+1],
imageDataToMove.data[i+2], imageDataToMove.data[i+3]
];
let currentUnderlyingPixel = [
underlyingImageData.data[i], underlyingImageData.data[i+1],
underlyingImageData.data[i+2], underlyingImageData.data[i+3]
];
let currentUnderlyingPixel = [
underlyingImageData.data[i], underlyingImageData.data[i+1],
underlyingImageData.data[i+2], underlyingImageData.data[i+3]
];
if (isPixelEmpty(currentMovePixel)) {
if (!isPixelEmpty(underlyingImageData)) {
imageDataToMove.data[i] = currentUnderlyingPixel[0];
imageDataToMove.data[i+1] = currentUnderlyingPixel[1];
imageDataToMove.data[i+2] = currentUnderlyingPixel[2];
imageDataToMove.data[i+3] = currentUnderlyingPixel[3];
if (isPixelEmpty(currentMovePixel)) {
if (!isPixelEmpty(underlyingImageData)) {
imageDataToMove.data[i] = currentUnderlyingPixel[0];
imageDataToMove.data[i+1] = currentUnderlyingPixel[1];
imageDataToMove.data[i+2] = currentUnderlyingPixel[2];
imageDataToMove.data[i+3] = currentUnderlyingPixel[3];
}
}
}
}
if (lastMovePos !== undefined) {
currentLayer.context.putImageData(
imageDataToMove,
Math.round(lastMovePos[0] / zoom - imageDataToMove.width / 2),
Math.round(lastMovePos[1] / zoom - imageDataToMove.height / 2));
}
else {
currentLayer.context.putImageData(
imageDataToMove,
originalDataPosition[0],
originalDataPosition[1]);
if (lastMovePos !== undefined) {
currentLayer.context.putImageData(
imageDataToMove,
Math.round(lastMovePos[0] / zoom - imageDataToMove.width / 2),
Math.round(lastMovePos[1] / zoom - imageDataToMove.height / 2));
}
}
selectionCanceled = true;
isRectSelecting = false;
firstTimeMove = true;
imageDataToMove = undefined;
}

21
js/_rectSelect.js
View File

@ -5,6 +5,8 @@ let endX;
let endY;
function startRectSelection(mouseEvent) {
// Saving the canvas
new HistoryStateEditCanvas();
// Putting the vfx layer on top of everything
VFXCanvas.style.zIndex = MAX_Z_INDEX;
@ -59,8 +61,18 @@ function endRectSelection(mouseEvent) {
startY = tmp;
}
// Selecting the move tool
currentTool = 'moveselection';
currentToolTemp = currentTool;
// Resetting this
isRectSelecting = false;
// Updating the cursor
updateCursor();
}
function cutSelection(mouseEvent) {
// Getting the selected pixels
imageDataToMove = currentLayer.context.getImageData(startX, startY, endX - startX + 1, endY - startY + 1);
@ -68,13 +80,7 @@ function endRectSelection(mouseEvent) {
// Moving those pixels from the current layer to the tmp layer
TMPLayer.context.putImageData(imageDataToMove, startX, startY);
// Selecting the move tool
currentTool = 'moveselection';
currentToolTemp = currentTool;
originalDataPosition = [startX, startY];
// Updating the cursor
updateCursor();
//originalDataPosition = [currentPos[0], currentPos[1]];
}
function drawRect(x, y) {
@ -111,7 +117,6 @@ function cursorInSelectedArea() {
let topY = Math.max(startY, endY);
let bottomY = Math.min(startY, endY);
// ISSUE: is it <= or <? test it
if (leftX <= x && x <= rightX) {
if (bottomY <= y && y <= topY) {
return true;