Added back rect selection

js/ColorModule.js

@@ -401,7 +401,7 @@ const ColorModule = (() => {
                 let dataLength = imageData.length;
 
                 for (let j=0; j<dataLength; j += 4) {
-                    if (!isPixelEmpty(imageData[j])) {
+                    if (!Util.isPixelEmpty(imageData[j])) {
                         let color = imageData[j]+','+imageData[j + 1]+','+imageData[j + 2];
                         
                         if (!colors[color]) {

js/LayerList.js

@@ -83,8 +83,8 @@ const LayerList = (() => {
                 belowImageData.data[i+2], belowImageData.data[i+3]
             ];
 
-            if (isPixelEmpty(currentMovePixel)) {
+            if (Util.isPixelEmpty(currentMovePixel)) {
-                if (!isPixelEmpty(belowImageData)) {
+                if (!Util.isPixelEmpty(belowImageData)) {
                     toMergeImageData.data[i] = currentUnderlyingPixel[0];
                     toMergeImageData.data[i+1] = currentUnderlyingPixel[1];
                     toMergeImageData.data[i+2] = currentUnderlyingPixel[2];

js/ToolManager.js

@@ -9,10 +9,10 @@ const ToolManager = (() => {
     panTool = new PanTool("pan", {type: 'custom'}, switchTool);
     zoomTool = new ZoomTool("zoom", {type:'custom'});
 
-    rectSelectTool = new RectangularSelectionTool("rectselect", 
-        {type: 'cursor', style:'crosshair'}, switchTool);
     moveSelectionTool = new MoveSelectionTool("moveselection", 
-        {type:'cursor', style:'crosshair'}, switchTool);
+        {type:'cursor', style:'crosshair'}, switchTool, brushTool);
+    rectSelectTool = new RectangularSelectionTool("rectselect", 
+        {type: 'cursor', style:'crosshair'}, switchTool, moveSelectionTool);
     
     currTool = brushTool;
     currTool.onSelect();

js/_move.js

@@ -1,111 +0,0 @@
-// REFACTOR: let's keep this one for the end
-var imageDataToMove;
-var originalDataPosition;
-var canMoveSelection = false;
-var lastMovePos;
-var selectionCanceled = true;
-var firstTimeMove = true;
-
-// TODO: move with arrows
-/** Updates the move preview so that is placed in the right position
- * 
- * @param {*} mousePosition The position of the cursor
- */
-function updateMovePreview(mousePosition) {
-    // I haven't canceled the selection
-    selectionCanceled = false;
-
-    // If it's the first time that I move the selection, I cut it from its original position
-    if (firstTimeMove) {
-        cutSelection(mousePosition);
-    }
-
-    firstTimeMove = false;
-
-    lastMousePos = mousePosition;
-    // clear the entire tmp layer
-    TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
-    // put the image data on the tmp layer with offset
-    TMPLayer.context.putImageData(
-        imageDataToMove, 
-        Math.round(lastMousePos[0] / zoom) - imageDataToMove.width / 2, 
-        Math.round(lastMousePos[1] / zoom) - imageDataToMove.height / 2);
-
-    lastMovePos = lastMousePos;
-    // Moving the the rectangular ants
-    moveSelection(lastMousePos[0] / zoom, lastMousePos[1] / zoom, imageDataToMove.width, imageDataToMove.height); 
-}
-
-/** Ends a selection, meaning that it makes the changes definitive and creates the history states
- * 
- */
-function endSelection() {
-    // Clearing the tmp (move preview) and vfx (ants) layers
-    TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
-    VFXLayer.context.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
-    // Preparing an empty imageData with the size of the canvas
-    let cleanImageData = new ImageData(endX - startX, endY - startY);
-
-    // If I was moving something
-    if (imageDataToMove !== undefined) {
-        // Saving the current clipboard before editing it in order to merge it with the current layer
-        cleanImageData.data.set(imageDataToMove.data);
-
-        // I have to save the underlying data, so that the transparent pixels in the clipboard 
-        // don't override the coloured pixels in the canvas
-        let underlyingImageData = currentLayer.context.getImageData(startX, startY, endX - startX, endY - startY);
-		
-        for (let i=0; i<underlyingImageData.data.length; i+=4) {
-            let currentMovePixel = [
-                imageDataToMove.data[i], imageDataToMove.data[i+1], 
-                imageDataToMove.data[i+2], imageDataToMove.data[i+3]
-            ];
-
-            let currentUnderlyingPixel = [
-                underlyingImageData.data[i], underlyingImageData.data[i+1], 
-                underlyingImageData.data[i+2], underlyingImageData.data[i+3]
-            ];
-
-            // If the pixel of the clipboard is empty, but the one below it isn't, I use the pixel below
-            if (isPixelEmpty(currentMovePixel)) {
-                if (!isPixelEmpty(underlyingImageData)) {
-                    imageDataToMove.data[i] = currentUnderlyingPixel[0];
-                    imageDataToMove.data[i+1] = currentUnderlyingPixel[1];
-                    imageDataToMove.data[i+2] = currentUnderlyingPixel[2];
-                    imageDataToMove.data[i+3] = currentUnderlyingPixel[3];
-                }
-            }
-        }
-
-        // If I moved the selection before confirming it
-        if (lastMovePos !== undefined) {
-            // I put it in the new position
-            currentLayer.context.putImageData(
-                imageDataToMove, 
-                Math.round(lastMovePos[0] / zoom) - imageDataToMove.width / 2, 
-                Math.round(lastMovePos[1] / zoom) - imageDataToMove.height / 2);
-        }
-        else {
-            // I put it in the same position
-            currentLayer.context.putImageData(
-                imageDataToMove, 
-                copiedStartX, 
-                copiedStartY);
-        }
-
-        imageDataToMove.data.set(cleanImageData.data);
-    }
-
-    // Resetting all the flags
-    selectionCanceled = true;
-    isRectSelecting = false;
-    firstTimeMove = true;
-    imageDataToMove = undefined;
-    isPasting = false;
-    isCutting = false;
-    lastMovePos = undefined;
-    currentLayer.updateLayerPreview();
-
-    // Saving the history
-    new HistoryState().EditCanvas();
-}

js/_rectSelect.js

@@ -1,70 +0,0 @@
-/** Cuts the selection from its canvas and puts it in the tmp layer so it can be moved
- * 
- * @param {*} mousePosition 
- */
-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);
-}
-
-function applyChanges() {
-    VFXLayer.canvas.style.zIndex = MIN_Z_INDEX;
-}
-
-// Checks whether the pointer is inside the selected area or not
-function cursorInSelectedArea() {
-    // Getting the cursor position
-    let cursorPos = Input.getCursorPosition(Input.getCurrMouseEvent());
-    // Getting the coordinates relatively to the canvas
-    let x = cursorPos[0] / zoom;
-    let y = cursorPos[1] / zoom;
-
-    // This is to avoid rightX or topY being less than leftX or bottomY
-    let leftX = Math.min(startX, endX);
-    let rightX = Math.max(startX, endX);
-    let topY = Math.max(startY, endY);
-    let bottomY = Math.min(startY, endY);
-
-    if (leftX <= x && x <= rightX) {
-        if (bottomY <= y && y <= topY) {
-            return true;
-        }
-
-        return false;
-    }
-
-    return false;
-}
-
-/** Moves the rect ants to the specified position 
- * 
- * @param {*} x X coordinate of the rect ants
- * @param {*} y Y coordinat of the rect ants
- * @param {*} width Width of the selection
- * @param {*} height Height of the selectin
- */
-function moveSelection(x, y, width, height) {
-    // Getting the vfx context
-    let vfxContext = VFXLayer.context;
-
-    // Clearing the vfx canvas
-    vfxContext.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
-    vfxContext.lineWidth = 1;
-    vfxContext.setLineDash([4]);
-
-    // Fixing the coordinates
-    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);
-
-    // Drawing the rect
-    vfxContext.beginPath();
-    vfxContext.rect(startX, startY, width, height);
-
-    vfxContext.stroke();
-}

js/_resizeCanvas.js

@@ -227,7 +227,7 @@ function trimCanvas(event, saveHistory) {
         let pixelPosition;
 
         for (let i=imageData.data.length - 1; i>= 0; i-=4) {
-            if (!isPixelEmpty(
+            if (!Util.isPixelEmpty(
                 [imageData.data[i - 3], imageData.data[i - 2], 
                 -imageData.data[i - 1], imageData.data[i]])) {
                 pixelPosition = getPixelPosition(i);        

js/_tools.js

@@ -35,6 +35,7 @@ class Tool {
 	}
 
 	onSelect() {
+		if (this.mainButton != undefined)
 			this.mainButton.parentElement.classList.add("selected");
 		this.isSelected = true;
 
@@ -83,6 +84,7 @@ class Tool {
 	}
 
 	onDeselect() {
+		if (this.mainButton != undefined)
 			this.mainButton.parentElement.classList.remove("selected");
 		this.isSelected = false;
 	}

js/pixel-editor.js

@@ -56,8 +56,6 @@
 //=include _toolButtons.js
 //=include FileManager.js
 //=include TopMenuModule.js
-//=include _rectSelect.js
-//=include _move.js
 //=include _ellipse.js
 
 /**event listeners**/

js/tools/FillTool.js

@@ -53,7 +53,7 @@ class FillTool extends Tool {
         //the color of the cluster that is being filled
         let clusterColor = [tempImage.data[startingPosition],tempImage.data[startingPosition+1],tempImage.data[startingPosition+2], tempImage.data[startingPosition+3]];
 
-        //the new color to fill with
+        //the color to fill with
         let fillColor = Color.hexToRgb(currentLayer.context.fillStyle);
         
         //if you try to fill with the same color that's already there, exit the function
@@ -61,7 +61,6 @@ class FillTool extends Tool {
             clusterColor[1] == fillColor.g &&
             clusterColor[2] == fillColor.b &&
             clusterColor[3] != 0) {
-                console.log("Returned");
                 return;
             }
             
@@ -90,6 +89,7 @@ class FillTool extends Tool {
             ++y;
             reachLeft = false;
             reachRight = false;
+            
             while (y++ < canvasSize[1] - 1 && matchStartColor(tempImage, pixelPos, clusterColor)) {
                 colorPixel(tempImage, pixelPos, fillColor);
                 if (x > 0) {

js/tools/MoveSelectionTool.js

@@ -1,14 +1,39 @@
 class MoveSelectionTool extends Tool {
-    constructor (name, options, switchFunc) {
+    currSelection = undefined;
+    selectionTool = undefined;
+    endTool = undefined;
+    switchFunc = undefined;
+
+    constructor (name, options, switchFunc, endTool) {
         super(name, options, switchFunc);
+
+        this.switchFunc = switchFunc;
+        this.endTool = endTool;
     }
 
     onStart(mousePos) {
         super.onStart(mousePos);
+
+        if (!this.cursorInSelectedArea(mousePos)) {
+            this.endSelection();
+        }
     }
 
     onDrag(mousePos) {
         super.onDrag(mousePos);
+
+        if (this.cursorInSelectedArea(mousePos)) {
+            this.currSelection = this.selectionTool.moveAnts(mousePos[0]/zoom, 
+                mousePos[1]/zoom, this.currSelection.width, this.currSelection.height);
+
+            // clear the entire tmp layer
+            TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
+            // put the image data on the tmp layer with offset
+            TMPLayer.context.putImageData(
+                this.currSelection.data, 
+                Math.round(mousePos[0] / zoom) - this.currSelection.width / 2, 
+                Math.round(mousePos[1] / zoom) - this.currSelection.height / 2);
+        }
     }
 
     onEnd(mousePos) {
@@ -16,10 +41,90 @@ class MoveSelectionTool extends Tool {
     }
 
     onSelect() {
-        super.onSelect(mousePos);
+        super.onSelect();
     }
 
     onDeselect() {
-        super.onDeselect(mousePos);
+        super.onDeselect();
+    }
+
+    setSelectionData(data, tool) {
+        this.currSelection = data;
+        this.selectionTool = tool;
+        this.firstTimeMove = true;
+    }
+
+    onHover(mousePos) {
+        super.onHover(mousePos);
+
+        if (this.cursorInSelectedArea(mousePos)) {
+            canvasView.style.cursor = 'move';
+        }
+        else {
+            canvasView.style.cursor = 'default';
+        }
+    }
+
+    cursorInSelectedArea(cursorPos) {        
+        // Getting the coordinates relatively to the canvas
+        let x = cursorPos[0] / zoom;
+        let y = cursorPos[1] / zoom;
+    
+        if (this.currSelection.left <= x && x <= this.currSelection.right) {
+            if (y <= this.currSelection.bottom && y >= this.currSelection.top) {
+                return true;
+            }
+            return false;
+        }
+        return false;
+    }    
+
+    endSelection() {
+        // Clearing the tmp (move preview) and vfx (ants) layers
+        TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
+        VFXLayer.context.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
+
+        // I have to save the underlying data, so that the transparent pixels in the clipboard 
+        // don't override the coloured pixels in the canvas
+        let underlyingImageData = currentLayer.context.getImageData(
+            this.currSelection.left, this.currSelection.top, 
+            this.currSelection.width, this.currSelection.height
+        );
+        
+        for (let i=0; i<underlyingImageData.data.length; i+=4) {
+            let currentMovePixel = [
+                this.currSelection.data.data[i], this.currSelection.data.data[i+1], 
+                this.currSelection.data.data[i+2], this.currSelection.data.data[i+3]
+            ];
+
+            let currentUnderlyingPixel = [
+                underlyingImageData.data[i], underlyingImageData.data[i+1], 
+                underlyingImageData.data[i+2], underlyingImageData.data[i+3]
+            ];
+
+            // If the pixel of the clipboard is empty, but the one below it isn't, I use the pixel below
+            if (Util.isPixelEmpty(currentMovePixel)) {
+                if (!Util.isPixelEmpty(underlyingImageData)) {
+                    this.currSelection.data.data[i] = currentUnderlyingPixel[0];
+                    this.currSelection.data.data[i+1] = currentUnderlyingPixel[1];
+                    this.currSelection.data.data[i+2] = currentUnderlyingPixel[2];
+                    this.currSelection.data.data[i+3] = currentUnderlyingPixel[3];
+                }
+            }
+        }
+
+        currentLayer.context.putImageData(
+            this.currSelection.data, 
+            this.currSelection.left, 
+            this.currSelection.top);
+
+        this.currSelection = undefined;
+        currentLayer.updateLayerPreview();
+        VFXLayer.canvas.style.zIndex = MIN_Z_INDEX;
+
+        // Saving history
+        new HistoryState().EditCanvas();
+        // Switch to brush
+        this.switchFunc(this.endTool);
     }
 }

js/tools/RectangleTool.js

@@ -20,7 +20,7 @@ class RectangleTool extends ResizableTool {
     changeFillType() {
         if (this.isSelected)
             if (this.currFillMode == 'empty') {
-                this.currFillMode = 'full';
+                this.currFillMode = 'fill';
                 this.emptyRectangleSVG.setAttribute('display', 'none');
                 this.fullRectangleSVG.setAttribute('display', 'visible');
             }
@@ -36,8 +36,6 @@ class RectangleTool extends ResizableTool {
     onStart(mousePos) {
         super.onStart(mousePos);
 
-        console.log("Rect start");
-
         // Putting the tmp layer on top of everything
         TMPLayer.canvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;
 
@@ -46,8 +44,6 @@ class RectangleTool extends ResizableTool {
 	}
 
 	onDrag(mousePos, cursorTarget) {
-        super.onDrag(mousePos);
-        console.log("dragging");
 
         // Drawing the rect at the right position
 	    this.drawRect(Math.floor(mousePos[0] / zoom) + 0.5, Math.floor(mousePos[1] / zoom) + 0.5);
@@ -123,7 +119,6 @@ class RectangleTool extends ResizableTool {
      * @param {*} y The current end y of the rectangle
      */
     drawRect(x, y) {
-        console.log("here");
         // Getting the tmp context
         let tmpContext = TMPLayer.context;
 

js/tools/RectangularSelectionTool.js

@@ -1,7 +1,13 @@
 class RectangularSelectionTool extends SelectionTool {
-    constructor (name, options, switchFunc) {
+    switchFunc = undefined;
+    moveTool = undefined;
+    currSelection = {};
+
+    constructor (name, options, switchFunc, moveTool) {
         super(name, options, switchFunc);
 
+        this.switchFunc = switchFunc;
+        this.moveTool = moveTool;
         Events.on('click', this.mainButton, switchFunc, this);
     }
 
@@ -33,14 +39,14 @@ class RectangularSelectionTool extends SelectionTool {
         }
 
         // Drawing the rect
-        this.drawRect(this.startMousePos[0], this.startMousePos[1]);
+        this.drawSelection(this.startMousePos[0], this.startMousePos[1]);
     }
 
     onDrag(mousePos) {
         super.onDrag(mousePos);
 
         // Drawing the rect
-        this.drawRect(Math.round(mousePos[0] / zoom) + 0.5, Math.round(mousePos[1] / zoom) + 0.5);
+        this.drawSelection(Math.round(mousePos[0] / zoom) + 0.5, Math.round(mousePos[1] / zoom) + 0.5);
     }
 
     onEnd(mousePos) {
@@ -62,6 +68,33 @@ class RectangularSelectionTool extends SelectionTool {
             this.endMousePos[1] = this.startMousePos[1];
             this.startMousePos[1] = tmp;
         }
+
+        // Switch to the move tool so that the user can move the selection
+        this.switchFunc(this.moveTool);
+        // Preparing data for the move tool
+        let dataWidth = this.endMousePos[0] - this.startMousePos[0];
+        let dataHeight = this.endMousePos[1] - this.startMousePos[1];
+
+        this.currSelection = {
+            left: this.startMousePos[0], right: this.endMousePos[0], 
+            top: this.startMousePos[1], bottom: this.endMousePos[1], 
+
+            width: dataWidth,
+            height: dataHeight,
+            
+            data: currentLayer.context.getImageData(
+                this.startMousePos[0], this.startMousePos[1], 
+                dataWidth + 1, dataHeight + 1)
+        };
+        
+        // Moving the selection to the TMP layer. It will be moved back to the original
+        // layer if the user will cancel or end the selection
+        currentLayer.context.clearRect(this.startMousePos[0] - 0.5, this.startMousePos[1] - 0.5, 
+            dataWidth + 1, dataHeight + 1);
+        // Moving those pixels from the current layer to the tmp layer
+        TMPLayer.context.putImageData(this.currSelection.data, this.startMousePos[0], this.startMousePos[1]);
+
+        this.moveTool.setSelectionData(this.currSelection, this);
     }
 
     onSelect() {
@@ -72,7 +105,7 @@ class RectangularSelectionTool extends SelectionTool {
         super.onDeselect();
     }
 
-    drawRect(x, y) {
+    drawSelection(x, y) {
         // Getting the vfx context
         let vfxContext = VFXLayer.context;
     
@@ -88,4 +121,37 @@ class RectangularSelectionTool extends SelectionTool {
     
         vfxContext.stroke();
     }
+
+    /** Moves the rect ants to the specified position 
+     * 
+     * @param {*} x X coordinate of the rect ants
+     * @param {*} y Y coordinat of the rect ants
+     * @param {*} width Width of the selection
+     * @param {*} height Height of the selectione
+     * 
+     * @return The data regarding the current position and size of the selection
+     */
+    moveAnts(x, y, width, height) {
+        // Getting the vfx context
+        let vfxContext = VFXLayer.context;
+        let ret = this.currSelection;
+
+        // Clearing the vfx canvas
+        vfxContext.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
+        vfxContext.lineWidth = 1;
+        vfxContext.setLineDash([4]);
+
+        // Fixing the coordinates
+        this.currSelection.left = Math.round(Math.round(x) - 0.5 - Math.round(width / 2)) + 0.5;
+        this.currSelection.top = Math.round(Math.round(y) - 0.5 - Math.round(height / 2)) + 0.5;
+        this.currSelection.right = this.currSelection.left + Math.round(width);
+        this.currSelection.bottom = this.currSelection.top + Math.round(height);
+
+        // Drawing the rect
+        vfxContext.beginPath();
+        vfxContext.rect(this.currSelection.left, this.currSelection.top, width, height);
+        vfxContext.stroke();
+
+        return ret;
+    }
 }