Started implementing preview rect

At the moment there's a bug in the getCursorPos function, may have something to do with offsets. The rect is correctly drawn, but with a weird offset.

Added vfx canvas for tools previews.

css/pixel-editor.scss

@@ -63,8 +63,8 @@ svg {
   background:transparent;
 }
 
-#pixel-canvas {
-  z-index:1000;
+#vfx-canvas {
+  z-index:-5000;
   background:transparent;
 }
 

js/_consts.js

@@ -0,0 +1,2 @@
+const MIN_Z_INDEX = -5000;
+const MAX_Z_INDEX = 5000;

js/_getCursorPosition.js

@@ -2,6 +2,7 @@
 function getCursorPosition(e) {
 	var x;
 	var y;
+
 	if (e.pageX != undefined && e.pageY != undefined) {
 		x = e.pageX;
 		y = e.pageY;
@@ -16,3 +17,25 @@ function getCursorPosition(e) {
 
 	return [x,y];
 }
+
+// TODO: apply the function below to every getCursorPosition call
+
+//get cursor position relative to canvas
+function getCursorPositionRelative(e, layer) {
+	var x;
+	var y;
+	
+	if (e.pageX != undefined && e.pageY != undefined) {
+		x = e.pageX;
+		y = e.pageY;
+	}
+	else {
+		x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
+		y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;			
+	}
+
+	x -= layer.canvas.offsetLeft;
+	y -= layer.canvas.offsetTop;
+
+	return [x,y];
+}

js/_layer.js

@@ -4,7 +4,7 @@
  * @param height Canvas height
  * @param canvas HTML canvas element
  */
-function Canvas(width, height, canvas) {
+function Layer(width, height, canvas) {
     this.canvasSize = [width, height],
     this.canvas = canvas,
     this.context = this.canvas.getContext("2d"),

js/_mouseEvents.js

@@ -110,7 +110,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
         }
 	}
 	else if (currentTool == 'rectselect') {
-		endRectSelection();
+		endRectSelection(mouseEvent);
 	}
 
 	dragging = false;
@@ -241,10 +241,10 @@ function draw (mouseEvent) {
     else if (currentTool == 'rectselect') {
     	if (dragging && !isRectSelecting) {
     		isRectSelecting = true;
-    		startRectSelection();
+    		startRectSelection(mouseEvent);
     	}
     	else if (dragging && isRectSelecting) {
-    		updateRectSelection();
+    		updateRectSelection(mouseEvent);
     	}
     }
 }

js/_newPixel.js

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

js/_rectSelect.js

@@ -1,13 +1,45 @@
 var isRectSelecting = false;
+let startX;
+let startY;
 
-function startRectSelection() {
+function startRectSelection(mouseEvent) {
+	// Putting the vfx layer on top of everything
+	VFXCanvas.style.zIndex = MAX_Z_INDEX;
 	console.log("Started selecting");
+	// Saving the start coords of the rect
+	cursorPos = getCursorPositionRelative(mouseEvent, VFXCanvas)
+	startX = cursorPos[0];
+	startY = cursorPos[1];
+
+	// Drawing the rect
+	drawRect(startX, startY);
 }
 
-function updateRectSelection() {
-	console.log("Editing selecting");
+function updateRectSelection(mouseEvent) {
+	pos = getCursorPositionRelative(mouseEvent, VFXCanvas);
+	
+	// Drawing the rect
+	drawRect(pos[0], pos[1]);
 }
 
-function endRectSelection() {
+function endRectSelection(mouseEvent) {
 	console.log("Finished selecting");
+	// Putting the vfx layer behind everything
+	//VFXCanvas.style.zIndex = MIN_Z_INDEX;
+	isRectSelecting = false;
 }
+
+function drawRect(x, y) {
+	console.log("Currently selecting");
+	// Getting the vfx context
+	let vfxContext = VFXCanvas.getContext("2d");
+
+	// Clearing the vfx canvas
+	vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
+	// Drawing the rect
+	vfxContext.beginPath();
+	vfxContext.rect(startX, startY, x - startX, y - startY);
+	vfxContext.stroke();
+}
+
+// TODO: esc to exit selection mode

js/_variables.js

@@ -42,4 +42,3 @@ var currentLayer;
 var VFXLayer;
 // VFX canvas
 var VFXCanvas = document.getElementById("vfx-canvas");
-

js/pixel-editor.js

@@ -17,6 +17,7 @@
 
 
 /**init**/
+//=include _consts.js
 //=include _variables.js 
 //=include _settings.js 
 
@@ -42,7 +43,7 @@
 //=include _deleteColor.js 
 //=include _replaceAllOfColor.js
 //=include _checkerboard.js
-//=include _canvas.js
+//=include _layer.js
 
 
 /**load file**/