Fixed #54

js/_changeZoom.js

@@ -12,21 +12,36 @@ function changeZoom (direction, cursorLocation) {
 
 	//change zoom level
 	//if you want to zoom out, and the zoom isnt already at the smallest level
-	if (direction == 'out' && zoom > 1) {
+	if (direction == 'out' && zoom > MIN_ZOOM_LEVEL) {
 		zoomed = true;
-		zoom -= Math.ceil(zoom / 10);
+		if (zoom > 2)
+			zoom -= Math.ceil(zoom / 10);
+		else
+			zoom -= Math.ceil(zoom * 2 / 10) / 2;
+
 		newWidth = canvasSize[0] * zoom;
 		newHeight = canvasSize[1] * zoom;
 
 		//adjust canvas position
 		layers[0].setCanvasOffset(
 			layers[0].canvas.offsetLeft + (oldWidth - newWidth) * cursorLocation[0]/oldWidth, 
-			layers[0].canvas.offsetTop + (oldHeight - newHeight) * cursorLocation[1]/oldWidth);
+			layers[0].canvas.offsetTop + (oldHeight - newHeight) * cursorLocation[1]/oldHeight);
 	}
 	//if you want to zoom in
 	else if (direction == 'in' && zoom + Math.ceil(zoom/10) < window.innerHeight/4) {
 		zoomed = true;
-		zoom += Math.ceil(zoom/10);
+		if (zoom > 2)
+			zoom += Math.ceil(zoom/10);
+		else {
+			if (zoom + zoom/10 > 2) {
+				zoom += Math.ceil(zoom/10);
+				zoom = Math.ceil(zoom);
+			}
+			else {
+				zoom += Math.ceil(zoom * 2 / 10) / 2;
+			}
+		}
+			
 		newWidth = canvasSize[0] * zoom;
 		newHeight = canvasSize[1] * zoom;
 
@@ -47,11 +62,11 @@ function changeZoom (direction, cursorLocation) {
 			disablePixelGrid();
 		else if (zoom >= 20 && direction == 'in') {
 			enablePixelGrid();
-			repaintPixelGrid(zoom - prevZoom);
+			repaintPixelGrid((zoom - prevZoom) * 0.6);
 		}
-		else if ((prevZoom >= 20 && direction == 'out')) {
+		else if (prevZoom >= 20 && direction == 'out') {
 			enablePixelGrid();
-			repaintPixelGrid(zoom - prevZoom);
+			repaintPixelGrid((zoom - prevZoom) * 0.6);
 		}
 		else {
 			enablePixelGrid();

js/_consts.js

@@ -4,4 +4,6 @@ const MAX_Z_INDEX = 5000;
 // Index of the first layer the user can use in the layers array
 const firstUserLayerIndex = 2;
 // Number of layers that are only used by the editor
-const nAppLayers = 3;
+const nAppLayers = 3;
+
+const MIN_ZOOM_LEVEL = 0.5;

js/_pixelGrid.js

@@ -1,15 +1,15 @@
 // REFACTOR: inherit from Layer, override init method (call super as well)
+// OPTIMIZABLE: only draw the grid for the current viewport. The grid should be refreshed
+//              everytime the user pans the view
 
 // Start colour of the pixel grid (can be changed in the preferences)
 let pixelGridColor = "#000000";
 // Distance between one line and another in HTML pixels
-let lineDistance = 12;
+let lineDistance = 11;
 // The grid is not visible by default
 let pixelGridVisible = false;
 // The grid is enabled, but is disabled in order to save performance with big sprites
 let pixelGridEnabled = true;
-// Used to edit lineDistance depending on the zoom level
-let zoomFactor = 1;
 
 function disablePixelGrid() {
     pixelGridEnabled = false;
@@ -23,7 +23,6 @@ function enablePixelGrid() {
 
 function repaintPixelGrid(factor) {
     lineDistance += factor;
-    console.log("Line distance: " + lineDistance + " zoom: " + zoom);
     fillPixelGrid();
 }
 
@@ -67,11 +66,11 @@ function fillPixelGrid() {
     pixelGrid.canvas.width = originalSize[0] * Math.round(lineDistance);
     pixelGrid.canvas.height = originalSize[1] * Math.round(lineDistance);
 
+    context.strokeStyle = settings.pixelGridColour;
+
     // OPTIMIZABLE, could probably be a bit more elegant
     // Draw horizontal lines
     for (let i=0; i<pixelGrid.canvas.width / Math.round(lineDistance); i++) {
-        context.strokeStyle = settings.pixelGridColour;
-
         context.beginPath();
         context.moveTo(i * Math.round(lineDistance) + 0.5, 0);
         context.lineTo(i * Math.round(lineDistance) + 0.5, originalSize[1] * Math.round(lineDistance));