Connected events to rect selection

_rectSelect.js now knows when the user started and finished drawing a rect and is able to edit a preview.

css/pixel-editor.scss

@@ -63,6 +63,11 @@ svg {
   background:transparent;
 }
 
+#pixel-canvas {
+  z-index:1000;
+  background:transparent;
+}
+
 #eyedropper-preview {
   position: absolute;
   width: 45px;

js/_mouseEvents.js

@@ -78,8 +78,6 @@ window.addEventListener("mouseup", function (mouseEvent) {
 	        eyedropperPreview.style.display = 'none';
 	      }
 	    }
-		
-		
 	}
 	else if (currentTool == 'fill' && mouseEvent.target == currentLayer.canvas) {
 	  console.log('filling')
@@ -111,6 +109,9 @@ window.addEventListener("mouseup", function (mouseEvent) {
 			layers[i].copyData(layers[0]);
         }
 	}
+	else if (currentTool == 'rectselect') {
+		endRectSelection();
+	}
 
 	dragging = false;
 	currentTool = currentToolTemp;
@@ -237,6 +238,15 @@ function draw (mouseEvent) {
 
         updateCursor();
     }
+    else if (currentTool == 'rectselect') {
+    	if (dragging && !isRectSelecting) {
+    		isRectSelecting = true;
+    		startRectSelection();
+    	}
+    	else if (dragging && isRectSelecting) {
+    		updateRectSelection();
+    	}
+    }
 }
 
 //mousewheel scrroll

js/_newPixel.js

@@ -1,13 +1,21 @@
 
 function newPixel (width, height, palette) {
+	// Setting the current layer
     currentLayer = new Canvas(width, height, canvas);
     currentLayer.initialize();
 
+    // Adding the checkerboard behind it
     checkerBoard = new Canvas(width, height, checkerBoardCanvas);
     checkerBoard.initialize();
 
+    // Creating the vfx layer on top of everything
+    VFXLayer = new Canvas(width, height, VFXCanvas);
+    VFXLayer.initialize();
+
 	canvasSize = currentLayer.canvasSize;
 
+	// Adding the first layer and the checkerboard to the list of layers
+	layers.push(VFXLayer);
 	layers.push(currentLayer);
 	layers.push(checkerBoard);
 

js/_rectSelect.js

@@ -0,0 +1,13 @@
+var isRectSelecting = false;
+
+function startRectSelection() {
+	console.log("Started selecting");
+}
+
+function updateRectSelection() {
+	console.log("Editing selecting");
+}
+
+function endRectSelection() {
+	console.log("Finished selecting");
+}

js/_variables.js

@@ -38,3 +38,8 @@ var layers = [];
 // Currently selected layer
 var currentLayer;
 
+// VFX layer used to draw previews of the selection and things like that
+var VFXLayer;
+// VFX canvas
+var VFXCanvas = document.getElementById("vfx-canvas");
+

js/pixel-editor.js

@@ -59,6 +59,7 @@
 //=include _clickedColor.js 
 //=include _fileMenu.js 
 //=include _createButton.js 
+//=include _rectSelect.js
 
 
 /**onload**/

views/pixel-editor.hbs

@@ -103,6 +103,7 @@
     <div id="brush-preview"></div>
 
     <div id="canvas-view">
+        <canvas id="vfx-canvas" class = "drawingCanvas"></canvas>
         <canvas id="pixel-canvas" class = "drawingCanvas"></canvas>
         <canvas id="checkerboard" class = "drawingCanvas"></canvas>
     </div>