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

Finished copy / cut /paste

Browse Source 
Also fixed a minor bug that caused the preview rectangle for the selection tool to not be aligned to the actual selection.
This commit is contained in:
unsettledgames 2020-06-05 22:19:48 +02:00
parent 12e43e0449
commit 9beeefd399
3 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
js/_copyPaste.js
View File

@ -6,19 +6,22 @@ let copiedStartY;
let copiedEndX;
let copiedEndY;
// BUG: when merging tmp layer to currentLayer there are offset problems
// FIX: maybe copy the entire tmp layer and paste it so that the merging happens at 0,0
function copySelection() {
/*
copiedEndX = endX;
copiedEndY = endY;
copiedStartX = startX;
copiedStartY = startY;
*/
// Getting the selected pixels
clipboardData = currentLayer.context.getImageData(startX, startY, endX - startX + 1, endY - startY + 1);
}
function pasteSelection() {
endSelection();
isPasting = true;
// Putting the image data on the tmp layer
TMPLayer.context.putImageData(clipboardData, copiedStartX, copiedStartY);
@ -35,11 +38,12 @@ function pasteSelection() {
moveSelection(
copiedStartX + (copiedEndX - copiedStartX) / 2,
copiedStartY + (copiedEndY - copiedStartY) / 2,
imageDataToMove.width, imageDataToMove.height);
clipboardData.width, clipboardData.height);
//drawRect(copiedStartX, copiedEndX, copiedStartY, copiedEndY);
}
function cutSelectionTool() {
console.log("Taglio");
// Saving the canvas
new HistoryStateEditCanvas();
@ -59,7 +63,6 @@ function cutSelectionTool() {
clipboardData = currentLayer.context.getImageData(startX, startY, endX - startX + 1, endY - startY + 1);
currentLayer.context.clearRect(startX - 0.5, startY - 0.5, endX - startX + 1, endY - startY + 1);
}
// Moving those pixels from the current layer to the tmp layer
//TMPLayer.context.putImageData(imageDataToMove, startX + 1, startY);

22
js/_move.js
View File

@ -7,7 +7,6 @@ var firstTimeMove = true;
// TODO: move with arrows
function updateMovePreview(mousePosition) {
// ISSUE
selectionCanceled = false;
if (firstTimeMove) {
@ -22,8 +21,8 @@ function updateMovePreview(mousePosition) {
// put the image data with offset
TMPLayer.context.putImageData(
imageDataToMove,
Math.round(lastMousePos[0] / zoom - imageDataToMove.width / 2),
Math.round(lastMousePos[1] / zoom - imageDataToMove.height / 2));
Math.round(lastMousePos[0] / zoom) - imageDataToMove.width / 2,
Math.round(lastMousePos[1] / zoom) - imageDataToMove.height / 2);
lastMovePos = lastMousePos;
moveSelection(lastMousePos[0] / zoom, lastMousePos[1] / zoom, imageDataToMove.width, imageDataToMove.height);
@ -32,8 +31,12 @@ function updateMovePreview(mousePosition) {
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 cleanImageData = new ImageData(endX - startX, endY - startY);
if (imageDataToMove !== undefined) {
// Saving the current clipboard before editing it in order to merge it with the current layer
cleanImageData.data.set(imageDataToMove.data);
let underlyingImageData = currentLayer.context.getImageData(startX, startY, endX - startX, endY - startY);
for (let i=0; i<underlyingImageData.data.length; i+=4) {
@ -60,12 +63,18 @@ function endSelection() {
if (lastMovePos !== undefined) {
currentLayer.context.putImageData(
imageDataToMove,
Math.round(lastMovePos[0] / zoom - imageDataToMove.width / 2),
Math.round(lastMovePos[1] / zoom - imageDataToMove.height / 2));
Math.round(lastMovePos[0] / zoom) - imageDataToMove.width / 2,
Math.round(lastMovePos[1] / zoom) - imageDataToMove.height / 2);
}
else {
undo();
console.log("yo");
currentLayer.context.putImageData(
imageDataToMove,
copiedStartX,
copiedStartY);
}
imageDataToMove.data.set(cleanImageData.data);
}
selectionCanceled = true;
@ -73,4 +82,5 @@ function endSelection() {
firstTimeMove = true;
imageDataToMove = undefined;
isPasting = false;
isCutting = false;
}

5
js/_rectSelect.js
View File

@ -73,7 +73,6 @@ function endRectSelection(mouseEvent) {
}
function cutSelection(mousePosition) {
console.log("Coordinate: start x, y: " + startX + ", " + startY + " end x, y: " + endX + ", " + endY);
// Getting the selected pixels
imageDataToMove = currentLayer.context.getImageData(startX, startY, endX - startX + 1, endY - startY + 1);
@ -138,8 +137,8 @@ function moveSelection(x, y, width, height) {
vfxContext.lineWidth = 1;
vfxContext.setLineDash([4]);
startX = Math.round(Math.round(x) - Math.round(width / 2)) + 0.5;
startY = Math.round(Math.round(y) - Math.round(height / 2)) + 0.5;
startX = Math.round(Math.round(x) - 0.5 - Math.round(width / 2)) + 0.5;
startY = Math.round(Math.round(y) - 0.5 - Math.round(height / 2)) + 0.5;
endX = startX + Math.round(width);
endY = startY + Math.round(height);