From 8df8b3ac54b3782c09165579a05113d24bb5bda2 Mon Sep 17 00:00:00 2001
From: Nicola <47360416+unsettledgames@users.noreply.github.com>
Date: Tue, 28 Dec 2021 22:51:18 +0100
Subject: [PATCH] Started lasso selection preview

---
 css/_splash-page.scss          |  4 +--
 js/ToolManager.js              |  5 ++-
 js/layers/Layer.js             |  8 +++--
 js/layers/PixelGrid.js         |  2 --
 js/tools/LassoSelectionTool.js | 57 +++++++++++++++++++++++++++++++---
 views/tools-menu.hbs           |  2 +-
 6 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/css/_splash-page.scss b/css/_splash-page.scss
index fd03cdc..1bf440a 100644
--- a/css/_splash-page.scss
+++ b/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%;
diff --git a/js/ToolManager.js b/js/ToolManager.js
index 65bcd5e..1b07d2d 100644
--- a/js/ToolManager.js
+++ b/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);
diff --git a/js/layers/Layer.js b/js/layers/Layer.js
index 466086c..3922f5c 100644
--- a/js/layers/Layer.js
+++ b/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
diff --git a/js/layers/PixelGrid.js b/js/layers/PixelGrid.js
index 5401ccb..8b9c5fb 100644
--- a/js/layers/PixelGrid.js
+++ b/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++) {
diff --git a/js/tools/LassoSelectionTool.js b/js/tools/LassoSelectionTool.js
index 9d926db..1380f7e 100644
--- a/js/tools/LassoSelectionTool.js
+++ b/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) {
-        super.onSelect(mousePos);
+    onSelect() {
+        super.onSelect();
     }
 
-    onDeselect(mousePos) {
-        super.onDeselect(mousePos);
+    onDeselect() {
+        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();
     }
 }
\ No newline at end of file
diff --git a/views/tools-menu.hbs b/views/tools-menu.hbs
index 1b87fa7..a50b534 100644
--- a/views/tools-menu.hbs
+++ b/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>