diff --git a/js/_getCursorPosition.js b/js/_getCursorPosition.js index 6aa3bc0..5855409 100644 --- a/js/_getCursorPosition.js +++ b/js/_getCursorPosition.js @@ -20,6 +20,8 @@ function getCursorPosition(e) { // TODO: apply the function below to every getCursorPosition call +// TODO: FIX THIS BELOW + //get cursor position relative to canvas function getCursorPositionRelative(e, layer) { var x; diff --git a/js/_move.js b/js/_move.js new file mode 100644 index 0000000..a08b30f --- /dev/null +++ b/js/_move.js @@ -0,0 +1 @@ +var imageDataToMove; \ No newline at end of file diff --git a/js/_rectSelect.js b/js/_rectSelect.js index 2f8b8da..de1af64 100644 --- a/js/_rectSelect.js +++ b/js/_rectSelect.js @@ -1,32 +1,54 @@ var isRectSelecting = false; let startX; let startY; +let workingLayer; +let imageData; function startRectSelection(mouseEvent) { // Putting the vfx layer on top of everything VFXCanvas.style.zIndex = MAX_Z_INDEX; - console.log("Started selecting"); + // Saving the layer the user is working on + workingLayer = currentLayer; + // Saving the start coords of the rect - cursorPos = getCursorPositionRelative(mouseEvent, VFXCanvas) - startX = cursorPos[0]; - startY = cursorPos[1]; + let cursorPos = getCursorPosition(mouseEvent); + startX = Math.floor(cursorPos[0] / zoom) + 0.5; + startY = Math.floor(cursorPos[1] / zoom) + 0.5; // Drawing the rect drawRect(startX, startY); } function updateRectSelection(mouseEvent) { - pos = getCursorPositionRelative(mouseEvent, VFXCanvas); + let pos = getCursorPosition(mouseEvent); // Drawing the rect - drawRect(pos[0], pos[1]); + drawRect(Math.floor(pos[0] / zoom) + 0.5, Math.floor(pos[1] / zoom) + 0.5); } function endRectSelection(mouseEvent) { - console.log("Finished selecting"); + // Getting the end position + let currentPos = getCursorPosition(mouseEvent); + let x = currentPos[0] / zoom; + let y = currentPos[1] / zoom; + // Putting the vfx layer behind everything - //VFXCanvas.style.zIndex = MIN_Z_INDEX; isRectSelecting = false; + // Getting the selected pixels + imageData = currentLayer.context.createImageData(x - startX, y - startY); + + // NOW + // Select the move tool + // the move tool moves stuff only if the cursor is on the selected area + // the move tool stops working when esc is pressed + // when the move tool is disabled, the control is given to the brush tool + // on click: start dragging + // on drag: render preview by changing the position of the image data and change the position of the selection rect + // IMPORTANT: the image data must be deleted from the original layer + // the image data must be copied to a temporary layer + // the image data is added to the original layer when the move tool is disabled + + workingLayer.context.putImageData(imageData, startX, startY); } function drawRect(x, y) { @@ -36,10 +58,18 @@ function drawRect(x, y) { // Clearing the vfx canvas vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height); + vfxContext.lineWidth = 1; + vfxContext.setLineDash([4]); + // Drawing the rect vfxContext.beginPath(); vfxContext.rect(startX, startY, x - startX, y - startY); + vfxContext.stroke(); + + // TODO: make the rect blink from black to white in case of dark backgrounds } -// TODO: esc to exit selection mode \ No newline at end of file +function applyChanges() { + VFXCanvas.style.zIndex = MIN_Z_INDEX; +} \ No newline at end of file diff --git a/js/pixel-editor.js b/js/pixel-editor.js index 06fa35b..ebae4e9 100644 --- a/js/pixel-editor.js +++ b/js/pixel-editor.js @@ -61,6 +61,7 @@ //=include _fileMenu.js //=include _createButton.js //=include _rectSelect.js +//=include _move.js /**onload**/