Fixed bug in canvas dragging, must fix the one on resizing.

Signed-off-by: npalomba <nicola.palomba@studenti.galileilivorno.gov.it>

js/_canvas.js

@@ -1,7 +1,7 @@
 function Canvas(width, height, canvas) {
     this.canvasSize = [width, height],
     this.canvas = canvas,
-    this.context = canvas.getContext("2d"),
+    this.context = this.canvas.getContext("2d"),
     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);
@@ -25,11 +25,8 @@ function Canvas(width, height, 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;
 
-        this.width = newWidth;
-        this.height = newHeight;
     }
 }

js/_changeZoom.js

@@ -1,5 +1,5 @@
 
-function changeZoom (direction, cursorLocation) {
+function changeZoom (layer, direction, cursorLocation) {
 
 	var oldWidth = canvasSize[0] * zoom;
 	var oldHeight = canvasSize[1] * zoom;
@@ -13,7 +13,7 @@ function changeZoom (direction, cursorLocation) {
 		newHeight = canvasSize[1] * zoom;
 		
 		//adjust canvas position
-		setCanvasOffset(canvas.offsetLeft + (oldWidth - newWidth) *cursorLocation[0]/oldWidth, canvas.offsetTop + (oldHeight - newHeight) *cursorLocation[1]/oldWidth)
+		setCanvasOffset(layer.canvas, layer.canvas.offsetLeft + (oldWidth - newWidth) *cursorLocation[0]/oldWidth, layer.canvas.offsetTop + (oldHeight - newHeight) *cursorLocation[1]/oldWidth)
 	}
 	//if you want to zoom in
 	else if (direction == 'in' && zoom + Math.ceil(zoom/10) < window.innerHeight/4){
@@ -22,12 +22,13 @@ function changeZoom (direction, cursorLocation) {
 		newHeight = canvasSize[1] * zoom;
 		
 		//adjust canvas position
-		setCanvasOffset(canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth), canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight))
+		setCanvasOffset(layer.canvas, canvas, layer.canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth), layer.canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight))
 	}
 	
 	//resize canvas
-	canvas.style.width = (canvas.width*zoom)+'px';
+	for (let i=0; i<layers.length; i++) {
-	canvas.style.height = (canvas.height*zoom)+'px';
+        layer.resize();
+    }
 
 	// adjust brush size
 	updateCursor();

js/_mouseEvents.js

@@ -94,8 +94,17 @@ window.addEventListener("mouseup", function (mouseEvent) {
 		fill(cursorLocation);
 	}
 	else if (currentTool == 'zoom' && mouseEvent.target == currentLayer.canvas) {
-		if (mouseEvent.which == 1) changeZoom('in', getCursorPosition(mouseEvent));
+		let mode;
-		else if (mouseEvent.which == 3) changeZoom('out', getCursorPosition(mouseEvent))
+		if (mouseEvent.which == 1){
+			mode = "in";
+        }
+		else if (mouseEvent.which == 3){
+			mode = "out";
+        }
+
+        for (let i=0; i<layers.length; i++) {
+            changeZoom(layers[i], mode, getCursorPosition(mouseEvent))
+        }
 	}
 
 	dragging = false;
@@ -168,8 +177,9 @@ function draw (mouseEvent) {
 	}
 	else if (currentTool == 'pan' && dragging) {
 
-		
+		for (let i=0; i<layers.length; i++) {
-		setCanvasOffset(currentLayer.canvas.offsetLeft + (cursorLocation[0] - lastPos[0]), currentLayer.canvas.offsetTop + (cursorLocation[1] - lastPos[1]))
+            setCanvasOffset(layers[i].canvas, layers[i].canvas.offsetLeft + (cursorLocation[0] - lastPos[0]), layers[i].canvas.offsetTop + (cursorLocation[1] - lastPos[1]))
+        }
 		/*
 		if 	(
 			//right
@@ -224,8 +234,17 @@ function draw (mouseEvent) {
 canvasView.addEventListener("wheel", function(mouseEvent){
 	
 	if (currentTool == 'zoom' || mouseEvent.altKey) {
-		if (mouseEvent.deltaY < 0) changeZoom('in', getCursorPosition(mouseEvent));
+		let mode;
-		else if (mouseEvent.deltaY > 0) changeZoom('out', getCursorPosition(mouseEvent))
+		if (mouseEvent.deltaY < 0){
+			mode = 'in';
+        }
+		else if (mouseEvent.deltaY > 0) {
+			mode = 'out';
+        }
+
+        for (let i=0; i<layers.length; i++) {
+            changeZoom(layers[i], mode, getCursorPosition(mouseEvent))
+		}
 	}
 		
 });

js/_newPixel.js

@@ -3,10 +3,14 @@ function newPixel (width, height, palette) {
     currentLayer = new Canvas(width, height, canvas);
     currentLayer.initialize();
 
-    checkerBoard = new Canvas(width, height, checkerBoard);
+    checkerBoard = new Canvas(width, height, checkerBoardCanvas);
     checkerBoard.initialize();
 
 	canvasSize = currentLayer.canvasSize;
+
+	layers.push(currentLayer);
+	layers.push(checkerBoard);
+
 	//remove current palette
 	colors = document.getElementsByClassName('color-button');
 	while (colors.length > 0) {

js/_setCanvasOffset.js

@@ -1,4 +1,4 @@
-function setCanvasOffset (offsetLeft, offsetTop) {
+function setCanvasOffset (canvas, offsetLeft, offsetTop) {
 		
 		//horizontal offset
 		var minXOffset = -canvasSize[0]*zoom+ 164;
@@ -6,19 +6,19 @@ function setCanvasOffset (offsetLeft, offsetTop) {
 		
 		if 	(offsetLeft < minXOffset)
 			canvas.style.left = minXOffset +'px';
-		else if (offsetLeft > maxXOffset) 
+		else if (offsetLeft > maxXOffset)
-			canvas.style.left = maxXOffset +'px';
+            canvas.style.left = maxXOffset +'px';
 		else
-			canvas.style.left = offsetLeft +'px';
+            canvas.style.left = offsetLeft +'px';
 		
 		//vertical offset
 		var minYOffset = -canvasSize[1]*zoom + 164;
 		var maxYOffset = window.innerHeight-100;
 		
 		if 	(offsetTop < minYOffset)
-			canvas.style.top = minYOffset +'px';
+            canvas.style.top = minYOffset +'px';
-		else if (offsetTop > maxYOffset) 
+		else if (offsetTop > maxYOffset)
-			canvas.style.top = maxYOffset +'px';
+            canvas.style.top = maxYOffset +'px';
 		else
-			canvas.style.top = offsetTop +'px';
+            canvas.style.top = offsetTop +'px';
 }

js/_toolButtons.js

@@ -54,11 +54,15 @@ on('click',"zoom-button", function(){
 
 //zoom in button
 on('click',"zoom-in-button", function(){
-	//changeZoom('in',[window.innerWidth/2-canvas.offsetLeft,window.innerHeight/2-canvas.offsetTop]); 
+	//changeZoom('in',[window.innerWidth/2-canvas.offsetLeft,window.innerHeight/2-canvas.offsetTop]);
-	changeZoom('in',[canvasSize[0]*zoom/2,canvasSize[1]*zoom/2]); 
+    for (let i=0; i<layers.length; i++) {
+        changeZoom(layers[i],'in', [canvasSize[0] * zoom / 2, canvasSize[1] * zoom / 2]);
+    }
 }, false);
 
 //zoom out button
 on('click',"zoom-out-button", function(){
-	changeZoom('out',[canvasSize[0]*zoom/2,canvasSize[1]*zoom/2]); 
+    for (let i=0; i<layers.length; i++) {
+        changeZoom(layers[i],'out',[canvasSize[0]*zoom/2,canvasSize[1]*zoom/2]);
+    }
 }, false);

js/_updateCursor.js

@@ -12,7 +12,6 @@ function updateCursor () {
         brushPreview.style.display = 'block';
         brushPreview.style.width = eraserSize * zoom + 'px';
         brushPreview.style.height = eraserSize * zoom + 'px';
-        currentLayer.context.fillStyle = 'rgba(255, 0, 0, 0)';
 	} else
 		brushPreview.style.display = 'none';
 	

js/_variables.js

@@ -17,7 +17,7 @@ var documentCreated = false;
 var firstCheckerBoardColor = 'rgba(139, 139, 139, 1)';
 var secondCheckerBoardColor = 'rgba(105, 105, 105, 1)';
 var checkerBoardSquareSize = 16;
-var checkerBoard = document.getElementById("checkerboard");
+var checkerBoardCanvas = document.getElementById("checkerboard");
 
 //common elements
 var brushPreview = document.getElementById("brush-preview");