diff --git a/js/_copyPaste.js b/js/_copyPaste.js new file mode 100644 index 0000000..7f19b68 --- /dev/null +++ b/js/_copyPaste.js @@ -0,0 +1,21 @@ +let clipboardData; + +function copySelection() { + +} + +function pasteSelection() { + imageDataToMove = clipboardData; + updateMovePreview(); +} + +function cutSelectionTool() { + // Getting the selected pixels + 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]]; +} \ No newline at end of file diff --git a/js/_hotkeyListener.js b/js/_hotkeyListener.js index 47c82e5..1175f4c 100644 --- a/js/_hotkeyListener.js +++ b/js/_hotkeyListener.js @@ -1,5 +1,21 @@ 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 + - Pressing ctrl+x cuts the selection and stores it in the clipboard + - 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't paste while dragging + - You can paste at any other time +*/ + function KeyPress(e) { var keyboardEvent = window.event? event : e; @@ -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,21 @@ 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(); + endSelection(); + tool.pencil.switchTo(); + } + break; //Z case 90: console.log('PRESSED Z ', keyboardEvent.ctrlKey) diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js index fa62a34..5b9cb07 100644 --- a/js/_mouseEvents.js +++ b/js/_mouseEvents.js @@ -355,7 +355,7 @@ function draw (mouseEvent) { // If I'm dragging, I move the preview if (dragging && cursorInSelectedArea()) { - updateMovePreview(mouseEvent); + updateMovePreview(getCursorPosition(mouseEvent)); } } } diff --git a/js/_move.js b/js/_move.js index ae98086..5695527 100644 --- a/js/_move.js +++ b/js/_move.js @@ -6,17 +6,17 @@ var selectionCanceled = true; var firstTimeMove = true; // TODO: move with arrows -function updateMovePreview(mouseEvent) { +function updateMovePreview(mousePosition) { // ISSUE 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 diff --git a/js/_rectSelect.js b/js/_rectSelect.js index 236f92c..60e9b06 100644 --- a/js/_rectSelect.js +++ b/js/_rectSelect.js @@ -72,10 +72,11 @@ function endRectSelection(mouseEvent) { currentTool.updateCursor(); } -function cutSelection(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); + clipBoardData = imageDataToMove; 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 diff --git a/js/_tools.js b/js/_tools.js index f7cca56..160dd88 100644 --- a/js/_tools.js +++ b/js/_tools.js @@ -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; diff --git a/js/_updateCursor.js b/js/_updateCursor.js index bda3ec7..bbd207f 100644 --- a/js/_updateCursor.js +++ b/js/_updateCursor.js @@ -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'; diff --git a/js/pixel-editor.js b/js/pixel-editor.js index efb03b7..2c35eff 100644 --- a/js/pixel-editor.js +++ b/js/pixel-editor.js @@ -42,6 +42,7 @@ //=include _replaceAllOfColor.js //=include _checkerboard.js //=include _layer.js +//=include _copyPaste.js /**load file**/ //=include _loadImage.js