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

@@ -57,29 +57,27 @@ window.addEventListener("mouseup", function (mouseEvent) {
 		console.log(newColor);
 		
 		var colors = document.getElementsByClassName('color-button');
-    for (var i = 0; i < colors.length; i++) {
-      console.log(colors[i].jscolor.toString());
-      
-      //if picked color matches this color
-      if (newColor == colors[i].jscolor.toString()) {
-        console.log('color found');
-        
-        //remove current color selection
-        var selectedColor = document.querySelector("#colors-menu li.selected")
-        if (selectedColor) selectedColor.classList.remove("selected");
-        
-      	//set current color
-      	context.fillStyle = '#'+newColor;
-      	
-      	//make color selected
-      	colors[i].parentElement.classList.add('selected');
-        
-        //hide eyedropper
-        eyedropperPreview.style.display = 'none';
-      }
-    }
-		
-		
+	    for (var i = 0; i < colors.length; i++) {
+	      console.log(colors[i].jscolor.toString());
+	      
+	      //if picked color matches this color
+	      if (newColor == colors[i].jscolor.toString()) {
+	        console.log('color found');
+	        
+	        //remove current color selection
+	        var selectedColor = document.querySelector("#colors-menu li.selected")
+	        if (selectedColor) selectedColor.classList.remove("selected");
+	        
+	      	//set current color
+	      	context.fillStyle = '#'+newColor;
+	      	
+	      	//make color selected
+	      	colors[i].parentElement.classList.add('selected');
+	        
+	        //hide eyedropper
+	        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/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>