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;
@@ -14,5 +15,27 @@ function getCursorPosition(e) {
 	x -= canvas.offsetLeft;
 	y -= canvas.offsetTop;
 
+	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

@@ -1,48 +1,48 @@
-/** Handler class for a single canvas (a single layer)
- *
- * @param width Canvas width
- * @param height Canvas height
- * @param canvas HTML canvas element
- */
-function Canvas(width, height, canvas) {
-    this.canvasSize = [width, height],
-    this.canvas = canvas,
-    this.context = this.canvas.getContext("2d"),
-    // Initializes the canvas
-    this.initialize = function() {
-        var maxHorizontalZoom = Math.floor(window.innerWidth/this.canvasSize[0]*0.75);
-        var maxVerticalZoom = Math.floor(window.innerHeight/this.canvasSize[1]*0.75);
-
-        zoom = Math.min(maxHorizontalZoom,maxVerticalZoom);
-        if (zoom < 1) zoom = 1;
-
-        //resize canvas
-        this.canvas.width = this.canvasSize[0];
-        this.canvas.height = this.canvasSize[1];
-        this.canvas.style.width = (this.canvas.width*zoom)+'px';
-        this.canvas.style.height = (this.canvas.height*zoom)+'px';
-
-        //unhide canvas
-        this.canvas.style.display = 'block';
-
-        //center canvas in window
-        this.canvas.style.left = 64+canvasView.clientWidth/2-(this.canvasSize[0]*zoom/2)+'px';
-        this.canvas.style.top = 48+canvasView.clientHeight/2-(this.canvasSize[1]*zoom/2)+'px';
-    },
-    // Resizes canvas
-    this.resize = function() {
-        let newWidth = (this.canvas.width * zoom) + 'px';
-        let newHeight = (this.canvas.height *zoom)+ 'px';
-
-        this.canvas.style.width = newWidth;
-        this.canvas.style.height = newHeight;
-    },
-    // Copies the otherCanvas' position and size
-    this.copyData = function(otherCanvas) {
-        this.canvas.style.width = otherCanvas.canvas.style.width;
-        this.canvas.style.height = otherCanvas.canvas.style.height;
-
-        this.canvas.style.left = otherCanvas.canvas.style.left;
-        this.canvas.style.top = otherCanvas.canvas.style.top;
-    }
+/** Handler class for a single canvas (a single layer)
+ *
+ * @param width Canvas width
+ * @param height Canvas height
+ * @param canvas HTML canvas element
+ */
+function Layer(width, height, canvas) {
+    this.canvasSize = [width, height],
+    this.canvas = canvas,
+    this.context = this.canvas.getContext("2d"),
+    // Initializes the canvas
+    this.initialize = function() {
+        var maxHorizontalZoom = Math.floor(window.innerWidth/this.canvasSize[0]*0.75);
+        var maxVerticalZoom = Math.floor(window.innerHeight/this.canvasSize[1]*0.75);
+
+        zoom = Math.min(maxHorizontalZoom,maxVerticalZoom);
+        if (zoom < 1) zoom = 1;
+
+        //resize canvas
+        this.canvas.width = this.canvasSize[0];
+        this.canvas.height = this.canvasSize[1];
+        this.canvas.style.width = (this.canvas.width*zoom)+'px';
+        this.canvas.style.height = (this.canvas.height*zoom)+'px';
+
+        //unhide canvas
+        this.canvas.style.display = 'block';
+
+        //center canvas in window
+        this.canvas.style.left = 64+canvasView.clientWidth/2-(this.canvasSize[0]*zoom/2)+'px';
+        this.canvas.style.top = 48+canvasView.clientHeight/2-(this.canvasSize[1]*zoom/2)+'px';
+    },
+    // Resizes canvas
+    this.resize = function() {
+        let newWidth = (this.canvas.width * zoom) + 'px';
+        let newHeight = (this.canvas.height *zoom)+ 'px';
+
+        this.canvas.style.width = newWidth;
+        this.canvas.style.height = newHeight;
+    },
+    // Copies the otherCanvas' position and size
+    this.copyData = function(otherCanvas) {
+        this.canvas.style.width = otherCanvas.canvas.style.width;
+        this.canvas.style.height = otherCanvas.canvas.style.height;
+
+        this.canvas.style.left = otherCanvas.canvas.style.left;
+        this.canvas.style.top = otherCanvas.canvas.style.top;
+    }
 }

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

@@ -41,5 +41,4 @@ 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");
-
+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**/