Started lasso selection preview

css/_splash-page.scss

@@ -155,9 +155,9 @@
 	.sp-template {
 		display: flex;
   		align-items: center;
-		  
+
 		text-transform: uppercase;
-		width:16%;
+		width:5.5em;
 		border-radius:5%;
 		margin-right:4%;
 		margin-top:4%;

js/ToolManager.js

@@ -38,7 +38,6 @@ const ToolManager = (() => {
     }
 
     function onMouseWheel(mouseEvent) {
-        console.log("MOUSE WHEEL");
         if (!EditorState.documentCreated || Dialogue.isOpen())
             return;
 
@@ -125,11 +124,11 @@ const ToolManager = (() => {
                         tools["eyedropper"].onEnd(mousePos, mouseEvent.target);
                     }
                     else if (!currFile.currentLayer.isLocked || !((Object.getPrototypeOf(currTool) instanceof DrawingTool))) {
-                        currTool.onEnd(mousePos);
+                        currTool.onEnd(mousePos, mouseEvent.target);
                     }
                     break;
                 case 2:
-                    tools["pan"].onEnd(mousePos);
+                    tools["pan"].onEnd(mousePos, mouseEvent.target);
                     break;
                 case 3:
                     currTool.onRightEnd(mousePos, mouseEvent.target);

js/layers/Layer.js

@@ -293,12 +293,14 @@ class Layer {
         while (true) {
             //set pixel
             // If the current tool is the brush
-            if (ToolManager.currentTool().name == 'brush' || ToolManager.currentTool().name == 'rectangle' || ToolManager.currentTool().name == 'ellipse') {
+            // REFACTOR: this is terrible
+            if (ToolManager.currentTool().name == 'brush' || ToolManager.currentTool().name == 'rectangle' || ToolManager.currentTool().name == 'ellipse'
+                || ToolManager.currentTool().name == 'lassoselect') {
                 // I fill the rect
-                currFile.currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
+                this.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
             } else if (ToolManager.currentTool().name == 'eraser') {
                 // In case I'm using the eraser I must clear the rect
-                currFile.currentLayer.context.clearRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
+                this.context.clearRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
             }
     
             //if we've reached the end goal, exit the loop

js/layers/PixelGrid.js

@@ -82,8 +82,6 @@ class PixelGrid extends Layer {
 
         this.context.strokeStyle = Settings.getCurrSettings().pixelGridColour;
 
-        console.log("Line ditance: " + this.lineDistance)
-
         // OPTIMIZABLE, could probably be a bit more elegant
         // Draw horizontal lines
         for (let i=0; i<this.canvas.width / Math.round(this.lineDistance); i++) {

js/tools/LassoSelectionTool.js

@@ -1,29 +1,76 @@
 class LassoSelectionTool extends SelectionTool {
+    currentPixels = []
+
     constructor (name, options, switchFunc, moveTool) {
         super(name, options, switchFunc, moveTool);
+
+        Events.on('click', this.mainButton, switchFunc, this);
     }
 
     onStart(mousePos) {
         super.onStart(mousePos);
+
+        // Putting the vfx layer on top of everything
+        currFile.VFXLayer.canvas.style.zIndex = MAX_Z_INDEX;
+        // clearSelection();
+        this.currentPixels = [];
+        this.drawSelection();
+        this.currentPixels.push([mousePos[0] / currFile.zoom, mousePos[1] / currFile.zoom]);
     }
 
     onDrag(mousePos) {
         super.onDrag(mousePos);
+
+        if (this.currentPixels[this.currentPixels.length - 1] != mousePos)
+            this.currentPixels.push([mousePos[0] / currFile.zoom, mousePos[1] / currFile.zoom]);
+        this.drawSelection();
+        console.log("here selection");
     }
 
     onEnd(mousePos) {
         super.onEnd(mousePos);
     }
 
-    onSelect(mousePos) {
+    onSelect() {
-        super.onSelect(mousePos);
+        super.onSelect();
     }
 
-    onDeselect(mousePos) {
+    onDeselect() {
-        super.onDeselect(mousePos);
+        super.onDeselect();
     }
 
-    drawSelection(mousePos) {
+    drawSelection() {
+        if (this.currentPixels.length <= 1)
+            return;
+        let point = [];
+        let prevPoint = [];
+        
+        currFile.VFXLayer.context.clearRect(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
+        //currFile.VFXLayer.context.setLineDash([2, 2]);
+        currFile.VFXLayer.context.strokeStyle = 'rgba(0,0,0,1)';
+        currFile.VFXLayer.context.fillStyle = 'rgba(0,0,0,1)';
+        currFile.VFXLayer.context.lineWidth = 1;
+        currFile.VFXLayer.context.beginPath();
 
+        for (var index = 0; index < this.currentPixels.length; index ++) {
+            point = this.currentPixels[index];
+            
+            if (index == 0)
+                currFile.VFXLayer.context.moveTo(point[0], point[1]);
+            else {
+                prevPoint = this.currentPixels[index- 1];
+                currFile.VFXLayer.context.lineTo(point[0], point[1]);
+                currFile.VFXLayer.drawLine(Math.floor(prevPoint[0]), Math.floor(prevPoint[1]), 
+                    Math.floor(point[0]), Math.floor(point[1]), 1);
+            }
+        }
+        
+        currFile.VFXLayer.drawLine(Math.floor(prevPoint[0]), Math.floor(prevPoint[1]), 
+                    Math.floor(this.startMousePos[0] / currFile.zoom), Math.floor(this.startMousePos[1] / currFile.zoom), 1);
+        currFile.VFXLayer.context.lineTo(this.startMousePos[0] / currFile.zoom, this.startMousePos[1] / currFile.zoom);
+        
+        currFile.VFXLayer.context.fillStyle = 'rgba(0,0,0,0.3)';
+        currFile.VFXLayer.context.fill();
+        currFile.VFXLayer.context.closePath();
     }
 }

views/tools-menu.hbs

@@ -50,7 +50,7 @@
 
 	<li><button title = "Rectangular Selection Tool (M)" id = "rectselect-button">{{svg "rectselect.svg" width = "24" height = "24"}}</button><li>
 
-	<li><button title = "Lasso Selection Tool (Q)" id = "lasso-button">{{svg "lasso.svg" width = "26" height = "26"}}</button></li>
+	<li><button title = "Lasso Selection Tool (Q)" id = "lassoselect-button">{{svg "lasso.svg" width = "26" height = "26"}}</button></li>
 
 	<li><button title="Eyedropper Tool (E)" id="eyedropper-button">{{svg "eyedropper.svg" width="24" height="24"}}</button></li>