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

Merge pull request #11 from unsettledgames/master

Browse Source 
Implemented copy / cut / paste tool
This commit is contained in:
Lospec 2020-06-16 15:24:53 -04:00 committed by GitHub
commit 3072a69b55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 202 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/_clickedColor.js
View File

@ -8,9 +8,11 @@ function clickedColor (e){
if (selectedColor) selectedColor.classList.remove('selected');
//set current color
currentLayer.context.fillStyle = this.style.backgroundColor;
currentGlobalColor = this.style.backgroundColor;
for (let i=1; i<layers.length - 2; i++) {
layers[i].context.fillStyle = this.style.backgroundColor;
}
currentGlobalColor = this.style.backgroundColor;
//make color selected
e.target.parentElement.classList.add('selected');

16
js/_colorChanged.js
View File

@ -23,11 +23,13 @@ on('input', 'jscolor-hex-input', function (e) {
//changes all of one color to another after being changed from color picker
function colorChanged(e) {
console.log('colorChanged()');
console.log('colorChanged() to ' + e.target.value);
//get colors
var newColor = hexToRgb(e.target.value);
var oldColor = e.target.oldColor;
newColor.a = 255;
//save undo state
//saveHistoryState({type: 'colorchange', newColor: e.target.value, oldColor: rgbToHex(oldColor), canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
new HistoryStateEditColor(e.target.value.toLowerCase(), rgbToHex(oldColor));
@ -38,6 +40,7 @@ function colorChanged(e) {
//check if selected color already matches another color
colors = document.getElementsByClassName('color-button');
console.log(colors);
var colorCheckingStyle = 'background: #bc60c4; color: white';
var newColorHex = e.target.value.toLowerCase();
@ -50,11 +53,11 @@ function colorChanged(e) {
//if generated color matches this color
if (newColorHex == colors[i].jscolor.toString()) {
// console.log('%ccolor already exists'+(colors[i].parentElement.classList.contains('jscolor-active')?' (but is the current color)':''), colorCheckingStyle);
console.log('%ccolor already exists'+(colors[i].parentElement.classList.contains('jscolor-active')?' (but is the current color)':''), colorCheckingStyle);
//if the color isnt the one that has the picker currently open
if (!colors[i].parentElement.classList.contains('jscolor-active')) {
// console.log('%cColor is duplicate', colorCheckingStyle);
console.log('%cColor is duplicate', colorCheckingStyle);
//show the duplicate color warning
duplicateColorWarning.style.visibility = 'visible';
@ -83,8 +86,11 @@ function colorChanged(e) {
//if this is the current color, update the drawing color
if (e.target.colorElement.parentElement.classList.contains('selected')) {
// console.log('this color is the current color');
context.fillStyle = currentColor;
for (let i=1; i<layers.length - 2; i++) {
layers[i].context.fillStyle = '#'+ rgbToHex(newColor.r,newColor.g,newColor.b);
}
currentGlobalColor = newColor;
}
/* this is wrong and bad
if (settings.switchToChangedColor) {

69
js/_copyPaste.js Normal file
View File

@ -0,0 +1,69 @@
let clipboardData;
let isPasting = false;
let copiedStartX;
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);
// Setting up the move tool to move the pasted value
selectionCanceled = false;
imageDataToMove = clipboardData;
firstTimeMove = false;
isRectSelecting = false;
// Switching to the move tool
tool.moveselection.switchTo();
// Updating the rectangle preview
moveSelection(
copiedStartX + (copiedEndX - copiedStartX) / 2,
copiedStartY + (copiedEndY - copiedStartY) / 2,
clipboardData.width, clipboardData.height);
//drawRect(copiedStartX, copiedEndX, copiedStartY, copiedEndY);
}
function cutSelectionTool() {
console.log("Taglio");
copiedEndX = endX;
copiedEndY = endY;
copiedStartX = startX;
copiedStartY = startY;
// Getting the selected pixels
if (imageDataToMove !== undefined) {
clipboardData = imageDataToMove;
TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
imageDataToMove = undefined;
}
else {
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);
//originalDataPosition = [currentPos[0], currentPos[1]];
}

15
js/_fileMenu.js
View File

@ -103,6 +103,21 @@ for (var i = 1; i < mainMenuItems.length; i++) {
case 'Add color':
addColor('#eeeeee');
break;
// SELECTION MENU
case 'Paste':
pasteSelection();
break;
case 'Copy':
copySelection();
tool.pencil.switchTo();
break;
case 'Cut':
cutSelectionTool();
tool.pencil.switchTo();
break;
case 'Cancel':
tool.pencil.switchTo();
break;
//Help Menu
case 'Settings':

28
js/_history.js
View File

@ -87,7 +87,7 @@ function HistoryStateEditColor (newColorValue, oldColorValue) {
//find new color in palette and change it back to old color
var colors = document.getElementsByClassName('color-button');
for (var i = 0; i < colors.length; i++) {
console.log(newColorValue, '==', colors[i].jscolor.toString());
//console.log(newColorValue, '==', colors[i].jscolor.toString());
if (newColorValue == colors[i].jscolor.toString()) {
colors[i].jscolor.fromString(oldColorValue);
break;
@ -105,7 +105,7 @@ function HistoryStateEditColor (newColorValue, oldColorValue) {
//find old color in palette and change it back to new color
var colors = document.getElementsByClassName('color-button');
for (var i = 0; i < colors.length; i++) {
console.log(oldColorValue, '==', colors[i].jscolor.toString());
//console.log(oldColorValue, '==', colors[i].jscolor.toString());
if (oldColorValue == colors[i].jscolor.toString()) {
colors[i].jscolor.fromString(newColorValue);
break;
@ -123,8 +123,8 @@ function HistoryStateEditColor (newColorValue, oldColorValue) {
//rename to add undo state
function saveHistoryState (state) {
console.log('%csaving history state', undoLogStyle);
console.log(state);
//console.log('%csaving history state', undoLogStyle);
//console.log(state);
//get current canvas data and save to undoStates array
undoStates.push(state);
@ -140,12 +140,12 @@ function saveHistoryState (state) {
//there should be no redoStates after an undoState is saved
redoStates = [];
console.log(undoStates);
console.log(redoStates);
//console.log(undoStates);
//console.log(redoStates);
}
function undo () {
console.log('%cundo', undoLogStyle);
//console.log('%cundo', undoLogStyle);
//if there are any states saved to undo
if (undoStates.length > 0) {
@ -154,7 +154,7 @@ function undo () {
//get state
var undoState = undoStates[undoStates.length-1];
console.log(undoState);
//console.log(undoState);
//restore the state
undoState.undo();
@ -167,12 +167,12 @@ function undo () {
document.getElementById('undo-button').classList.add('disabled');
}
console.log(undoStates);
console.log(redoStates);
//console.log(undoStates);
//console.log(redoStates);
}
function redo () {
console.log('%credo', undoLogStyle);
//console.log('%credo', undoLogStyle);
if (redoStates.length > 0) {
@ -181,7 +181,7 @@ function redo () {
//get state
var redoState = redoStates[redoStates.length-1];
console.log(redoState);
//console.log(redoState);
//restore the state
redoState.redo();
@ -193,6 +193,6 @@ function redo () {
if (redoStates.length == 0)
document.getElementById('redo-button').classList.add('disabled');
}
console.log(undoStates);
console.log(redoStates);
//console.log(undoStates);
//console.log(redoStates);
}

41
js/_hotkeyListener.js
View File

@ -1,5 +1,22 @@
var spacePressed = false;
/**
Copy / paste / cut logic:
- The user selects an area
- Pressing ctrl+c copies the selection
- Pressing ctrl+v ends the current selection and copies the clipboard in the tmp layer:
the editor enters move mode and lets the user move the copied selection around.
Pressing ctrl+v while moving a copy has the same effect of pressing ctrl+v after a ctrl+c
- The behaviour of ctrl+v is the same and doesn't depend on how the selected area was obtained
(with ctrl+c or with ctrl+v)
- Selecting a different tool while moving the copied or cut selection has the same effect of selecting
a different tool while moving a standard selection
- You can paste at any other time
BUGS:
-
*/
function KeyPress(e) {
var keyboardEvent = window.event? event : e;
@ -14,7 +31,6 @@ function KeyPress(e) {
//
if (e.key === "Escape") {
if (!selectionCanceled) {
endSelection();
tool.pencil.switchTo();
}
}
@ -24,6 +40,13 @@ function KeyPress(e) {
case 49: case 66:
tool.pencil.switchTo();
break;
// copy tool c
case 67: case 99:
console.log("Copying");
if (keyboardEvent.ctrlKey && !dragging && currentTool.name == 'moveselection') {
copySelection();
}
break;
//fill tool - 2, f
case 50: case 70:
tool.fill.switchTo();
@ -49,6 +72,20 @@ function KeyPress(e) {
case 77: case 109:
tool.rectselect.switchTo()
break;
// Paste tool
case 86: case 118:
console.log("Pasting");
if (keyboardEvent.ctrlKey && !dragging) {
pasteSelection();
}
break;
case 88: case 120:
console.log("Cutting");
if (keyboardEvent.ctrlKey && !dragging && currentTool.name == 'moveselection') {
cutSelectionTool();
tool.pencil.switchTo();
}
break;
//Z
case 90:
console.log('PRESSED Z ', keyboardEvent.ctrlKey)
@ -56,14 +93,12 @@ function KeyPress(e) {
if (keyboardEvent.altKey && keyboardEvent.ctrlKey)
redo();
if (!selectionCanceled) {
endSelection();
tool.pencil.switchTo()
}
//CTRL+Z undo
else if (keyboardEvent.ctrlKey) {
undo();
if (!selectionCanceled) {
endSelection();
tool.pencil.switchTo()
}
}

5
js/_mouseEvents.js
View File

@ -26,7 +26,8 @@ window.addEventListener("mousedown", function (mouseEvent) {
(currentTool.name == 'pencil' || currentTool.name == 'eraser' || currentTool.name == 'rectangle'))
new HistoryStateEditCanvas();
else if (currentTool.name == 'moveselection') {
if (!cursorInSelectedArea()) {
if (!cursorInSelectedArea() &&
((mouseEvent.target.id == 'canvas-view') || mouseEvent.target.className == 'drawingCanvas')) {
tool.pencil.switchTo();
canDraw = false;
}
@ -355,7 +356,7 @@ function draw (mouseEvent) {
// If I'm dragging, I move the preview
if (dragging && cursorInSelectedArea()) {
updateMovePreview(mouseEvent);
updateMovePreview(getCursorPosition(mouseEvent));
}
}
}

33
js/_move.js
View File

@ -6,24 +6,23 @@ var selectionCanceled = true;
var firstTimeMove = true;
// TODO: move with arrows
function updateMovePreview(mouseEvent) {
// ISSUE
function updateMovePreview(mousePosition) {
selectionCanceled = false;
if (firstTimeMove) {
cutSelection(mouseEvent);
cutSelection(mousePosition);
}
firstTimeMove = false;
lastMousePos = getCursorPosition(mouseEvent);
lastMousePos = mousePosition;
// clear the entire tmp layer
TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
// 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,13 @@ function updateMovePreview(mouseEvent) {
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) {
console.log("definito");
// 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,13 +64,26 @@ 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 {
currentLayer.context.putImageData(
imageDataToMove,
copiedStartX,
copiedStartY);
}
imageDataToMove.data.set(cleanImageData.data);
}
selectionCanceled = true;
isRectSelecting = false;
firstTimeMove = true;
imageDataToMove = undefined;
isPasting = false;
isCutting = false;
lastMovePos = undefined;
new HistoryStateEditCanvas();
}

4
js/_newPixel.js
View File

@ -17,10 +17,10 @@ function newPixel (width, height, palette) {
canvasSize = currentLayer.canvasSize;
// Adding the first layer and the checkerboard to the list of layers
layers.push(checkerBoard);
layers.push(currentLayer);
layers.push(VFXLayer);
layers.push(TMPLayer);
layers.push(currentLayer);
layers.push(checkerBoard);
//remove current palette
colors = document.getElementsByClassName('color-button');

9
js/_rectSelect.js
View File

@ -72,11 +72,10 @@ function endRectSelection(mouseEvent) {
currentTool.updateCursor();
}
function cutSelection(mouseEvent) {
console.log("Coordinate: start x, y: " + startX + ", " + startY + " end x, y: " + endX + ", " + endY);
function cutSelection(mousePosition) {
// Getting the selected pixels
imageDataToMove = 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);
@ -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);

9
js/_tools.js
View File

@ -48,7 +48,7 @@ class Tool {
endSelection();
}
//set tool and temp tje tje tpp;
//set tool and temp tje tje tpp <--- he's speaking the language of the gods, don't delete
currentTool = this;
currentToolTemp = this;
@ -58,8 +58,11 @@ class Tool {
tools[i].classList.remove("selected");
}
//give the button of the selected tool the .selected class
document.getElementById(this.name+"-button").parentNode.classList.add("selected");
let buttonNode = document.getElementById(this.name + "-button");
//give the button of the selected tool the .selected class if the tool has a button
if(buttonNode != null && buttonNode.parentNode != null) {
document.getElementById(this.name+"-button").parentNode.classList.add("selected");
}
//change cursor
this.updateCursor();

5
js/_updateCursor.js
View File

@ -2,15 +2,14 @@
//set the correct cursor for the current tool
Tool.prototype.updateCursor = function () {
console.log('updateCursor()', currentTool)
//console.log('updateCursor()', currentTool)
//switch to that tools cursor
canvasView.style.cursor = this.cursor || 'default';
//if the tool uses a brush preview, make it visible and update the size
if (this.brushPreview) {
console.log('brush size',this.currentBrushSize)
//console.log('brush size',this.currentBrushSize)
brushPreview.style.display = 'block';
brushPreview.style.width = this.currentBrushSize * zoom + 'px';
brushPreview.style.height = this.currentBrushSize * zoom + 'px';

1
js/pixel-editor.js
View File

@ -42,6 +42,7 @@
//=include _replaceAllOfColor.js
//=include _checkerboard.js
//=include _layer.js
//=include _copyPaste.js
/**load file**/
//=include _loadImage.js

8
views/pixel-editor.hbs
View File

@ -61,6 +61,14 @@
<li><button id="redo-button" class="disabled">Redo</button></li>
</ul>
</li>
<li>
<button>Selection</button>
<ul>
<li><button id="copy-button">Copy</button></li>
<li><button id="cut-button">Cut</button></li>
<li><button id="paste-button">Paste</button></li>
<li><button id="cancelSelection-button">Cancel</button></li>
</ul>
<li>
<button>Help</button>
<ul>