Fixed zooming bug. Eraser tool implementation definitely completed.

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

js/_canvas.js

@@ -25,8 +25,15 @@ 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.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/_changeZoom.js

@@ -1,6 +1,5 @@
 
 function changeZoom (layer, direction, cursorLocation) {
-
 	var oldWidth = canvasSize[0] * zoom;
 	var oldHeight = canvasSize[1] * zoom;
 	var newWidth, newHeight;
@@ -22,13 +21,11 @@ function changeZoom (layer, direction, cursorLocation) {
 		newHeight = canvasSize[1] * zoom;
 		
 		//adjust canvas position
-		setCanvasOffset(layer.canvas, canvas, layer.canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth), layer.canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight))
+		setCanvasOffset(layer.canvas, layer.canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth), layer.canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight))
 	}
 	
 	//resize canvas
-	for (let i=0; i<layers.length; i++) {
 	layer.resize();
-    }
 
 	// adjust brush size
 	updateCursor();

js/_mouseEvents.js

@@ -93,7 +93,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
     //fill starting at the location
 		fill(cursorLocation);
 	}
-	else if (currentTool == 'zoom' && mouseEvent.target == currentLayer.canvas) {
+	else if (currentTool == 'zoom') {
 		let mode;
 		if (mouseEvent.which == 1){
 			mode = "in";
@@ -102,8 +102,10 @@ window.addEventListener("mouseup", function (mouseEvent) {
 			mode = "out";
         }
 
-        for (let i=0; i<layers.length; i++) {
+        changeZoom(layers[0], mode, getCursorPosition(mouseEvent));
-            changeZoom(layers[i], mode, getCursorPosition(mouseEvent))
+
+        for (let i=1; i<layers.length; i++) {
+			layers[i].copyData(layers[0]);
         }
 	}
 
@@ -180,21 +182,6 @@ function draw (mouseEvent) {
 		for (let i=0; i<layers.length; i++) {
             setCanvasOffset(layers[i].canvas, layers[i].canvas.offsetLeft + (cursorLocation[0] - lastPos[0]), layers[i].canvas.offsetTop + (cursorLocation[1] - lastPos[1]))
         }
-		/*
-		if 	(
-			//right
-			currentLayer.canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) < window.innerWidth - currentLayer.canvasSize[0]*zoom*0.25 - 48 &&
-			//left
-			currentLayer.canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) > -canvasSize[0]*zoom*0.75 + 64)
-				canvas.style.left = canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) +'px';
-			
-		if (
-			//bottom
-			canvas.offsetTop + (cursorLocation[1] - lastPos[1]) < window.innerHeight-canvasSize[1]*zoom*0.25 &&
-			//top
-			currentLayer.canvas.offsetTop + (cursorLocation[1] - lastPos[1]) > -canvasSize[0]*zoom*0.75 + 48)
-				currentLayer.canvas.style.top = currentLayer.canvas.offsetTop + (cursorLocation[1] - lastPos[1]) +'px';
-    	*/
     }
     else if (currentTool == 'eyedropper' && dragging && mouseEvent.target == currentLayer.canvas) {
         var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data;
@@ -242,8 +229,10 @@ canvasView.addEventListener("wheel", function(mouseEvent){
 			mode = 'out';
         }
 
-        for (let i=0; i<layers.length; i++) {
+        changeZoom(layers[0], mode, getCursorPosition(mouseEvent))
-            changeZoom(layers[i], mode, getCursorPosition(mouseEvent))
+
+        for (let i=1; i<layers.length; i++) {
+            layers[i].copyData(layers[0]);
 		}
 	}
 		

js/_setCanvasOffset.js

@@ -1,8 +1,7 @@
 function setCanvasOffset (canvas, offsetLeft, offsetTop) {
-		
 		//horizontal offset
 		var minXOffset = -canvasSize[0]*zoom+ 164;
-		var maxXOffset = window.innerWidth - 148
+		var maxXOffset = window.innerWidth - 148;
 		
 		if 	(offsetLeft < minXOffset)
 			canvas.style.left = minXOffset +'px';

js/_toolButtons.js

@@ -55,14 +55,18 @@ 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]);
-    for (let i=0; i<layers.length; i++) {
+    changeZoom(layers[0],'in', [canvasSize[0] * zoom / 2, canvasSize[1] * zoom / 2]);
-        changeZoom(layers[i],'in', [canvasSize[0] * zoom / 2, canvasSize[1] * zoom / 2]);
+
+    for (let i=1; i<layers.length; i++) {
+        layers[i].copyData(layers[0]);
     }
 }, false);
 
 //zoom out button
 on('click',"zoom-out-button", function(){
-    for (let i=0; i<layers.length; i++) {
+    changeZoom(layers[0],'out',[canvasSize[0]*zoom/2,canvasSize[1]*zoom/2]);
-        changeZoom(layers[i],'out',[canvasSize[0]*zoom/2,canvasSize[1]*zoom/2]);
+
+    for (let i=1; i<layers.length; i++) {
+        layers[i].copyData(layers[0]);
     }
 }, false);

js/pixel-editor.js

@@ -43,6 +43,7 @@
 //=include _replaceAllOfColor.js
 //=include _checkerboard.js
 //=include _canvas.js
+//=include _layers.js
 
 
 /**load file**/