diff --git a/js/_changeZoom.js b/js/_changeZoom.js index bbccb93..426616a 100644 --- a/js/_changeZoom.js +++ b/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(); diff --git a/js/_consts.js b/js/_consts.js index b0a0e25..f3903f8 100644 --- a/js/_consts.js +++ b/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; \ No newline at end of file +const nAppLayers = 3; + +const MIN_ZOOM_LEVEL = 0.5; \ No newline at end of file diff --git a/js/_pixelGrid.js b/js/_pixelGrid.js index 6d58ede..6fb2833 100644 --- a/js/_pixelGrid.js +++ b/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