diff --git a/js/_clickedColor.js b/js/_clickedColor.js index 57566ce..f09ef07 100644 --- a/js/_clickedColor.js +++ b/js/_clickedColor.js @@ -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 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); } diff --git a/js/_hotkeyListener.js b/js/_hotkeyListener.js index 47c82e5..c0dec89 100644 --- a/js/_hotkeyListener.js +++ b/js/_hotkeyListener.js @@ -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() } } diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js index fa62a34..3fd2caa 100644 --- a/js/_mouseEvents.js +++ b/js/_mouseEvents.js @@ -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)); } } } diff --git a/js/_move.js b/js/_move.js index ae98086..f371a63 100644 --- a/js/_move.js +++ b/js/_move.js @@ -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 +
  • + +
      +
    • +
    • +
    • +
    • +