Fixed #52

The pixel grid is now disabled when the zoom level is too low; in addition, the thickness of the grid now changes depending on the zoom level.

js/EditorState.js

@@ -1,8 +1,8 @@
 const EditorState = (() => {
     let pixelEditorMode = "Basic";
     
-    Events.on('click', 'switch-editor-mode-splash', function (e) {toggleMode();});
+    Events.on('click', 'switch-editor-mode-splash', chooseMode);
-    Events.on('click', 'switch-mode-button', function (e) {toggleMode();});
+    Events.on('click', 'switch-mode-button', toggleMode);
 
     function getCurrentMode() {
         return pixelEditorMode;
@@ -10,18 +10,13 @@ const EditorState = (() => {
 
     function switchMode(newMode) {
         //switch to advanced mode
-        if (newMode == 'Advanced' && pixelEditorMode == 'Basic') {
+        if (newMode == 'Advanced') {
-            // Switch to advanced ez pez lemon squez
-            document.getElementById('switch-mode-button').innerHTML = 'Switch to basic mode';
             // Show the layer menus
             LayerList.getLayerListEntries().style.display = "inline-block";
             document.getElementById('layer-button').style.display = 'inline-block';
             // Hide the palette menu
             document.getElementById('colors-menu').style.right = '200px'
     
-            //change splash text
-            document.querySelector('#sp-quickstart-container .mode-switcher').classList.add('advanced-mode');
-    
             pixelEditorMode = 'Advanced';
     
             //turn pixel grid off
@@ -30,7 +25,7 @@ const EditorState = (() => {
         //switch to basic mode
         else {
             //if there is a current layer (a document is active)
-            if (currentLayer) {
+            if (Startup.documentCreated()) {
                 if (!confirm('Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?')) {
                     return;
                 }
@@ -41,9 +36,6 @@ const EditorState = (() => {
                 LayerList.flatten(true);
             }
     
-            //change menu text
-            document.getElementById('switch-mode-button').innerHTML = 'Switch to advanced mode';
-    
             // Hide the layer menus
             LayerList.getLayerListEntries().style.display = 'none';
             document.getElementById('layer-button').style.display = 'none';
@@ -51,14 +43,27 @@ const EditorState = (() => {
             document.getElementById('colors-menu').style.display = 'flex';
             // Move the palette menu
             document.getElementById('colors-menu').style.right = '0px';
-    
+
-            //change splash text
-            document.querySelector('#sp-quickstart-container .mode-switcher').classList.remove('advanced-mode');
-    
             pixelEditorMode = 'Basic';
-            togglePixelGrid('off');
+            togglePixelGrid('on');
         }
     }
+
+    function chooseMode() {
+        console.log("Here");
+        let prevMode = pixelEditorMode.toLowerCase();
+
+        if (pixelEditorMode === "Basic") {
+            pixelEditorMode = "Advanced";
+        }
+        else {
+            pixelEditorMode = "Basic";
+        }
+
+        //change splash text
+        document.querySelector('#sp-quickstart-container .mode-switcher').classList.remove(prevMode + '-mode');
+        document.querySelector('#sp-quickstart-container .mode-switcher').classList.add(pixelEditorMode.toLowerCase() + '-mode');
+    }
     
     function toggleMode() {
         if (pixelEditorMode == 'Advanced')

js/Startup.js

@@ -1,6 +1,7 @@
 const Startup = (() => {
 
     let firstPixel = true;
+    let editorMode = "Basic";
     let splashPostfix = '';
 
     Events.on('click', 'create-button', create, false);
@@ -8,23 +9,16 @@ const Startup = (() => {
 
     function create(isSplash) {
         // If I'm creating from the splash menu, I append '-splash' so I get the corresponding values
-        if (isSplash) {
+        if (isSplash)
             splashPostfix = '-splash';
-        }
+        else
-        else {
             splashPostfix = '';
-        }
     
         var width = Util.getValue('size-width' + splashPostfix);
         var height = Util.getValue('size-height' + splashPostfix);
         var selectedPalette = Util.getText('palette-button' + splashPostfix);
     
         newPixel(width, height);
-        
-        // If I'm not creating from the splash page, then this is not the first project I've created
-        if (!isSplash)
-            document.getElementById('new-pixel-warning').style.display = 'block';
-    
         resetInput();
     
         //track google event
@@ -38,7 +32,7 @@ const Startup = (() => {
      * @param {*} height Start height of the canvas
      * @param {*} fileContent If fileContent != null, then the newPixel is being called from the open menu
      */
-    function newPixel (width, height, fileContent = null) {
+    function newPixel (width, height, fileContent = null) {       
         // The palette is empty, at the beginning
         ColorModule.resetPalette();
 
@@ -57,9 +51,6 @@ const Startup = (() => {
         // The user is now able to export the Pixel
         document.getElementById('export-button').classList.remove('disabled');
 
-        // This is not the first Pixel anymore
-        firstPixel = false;
-
         // Now, if I opened an LPE file
         if (fileContent != null) {
             loadFromLPE(fileContent);
@@ -68,6 +59,11 @@ const Startup = (() => {
             // Selecting the new one
             layers[1].selectLayer();
         }
+
+        console.log("Starting with mode " + EditorState.getCurrentMode());
+        EditorState.switchMode(EditorState.getCurrentMode());
+        // This is not the first Pixel anymore
+        firstPixel = false;
     }
 
     function initLayers(width, height) {
@@ -246,10 +242,15 @@ const Startup = (() => {
         return !firstPixel;
     }
 
+    function splashEditorMode(mode) {
+        editorMode = mode;
+    }
+
     return {
         create,
         newPixel,
         newFromTemplate,
-        documentCreated
+        documentCreated,
+        splashEditorMode
     }
 })();

js/_changeZoom.js

@@ -4,13 +4,16 @@
  */
 function changeZoom (direction, cursorLocation) {
 	// Computing current width and height
-	var oldWidth = canvasSize[0] * zoom;
+	let oldWidth = canvasSize[0] * zoom;
-	var oldHeight = canvasSize[1] * zoom;
+	let oldHeight = canvasSize[1] * zoom;
-	var newWidth, newHeight;
+	let newWidth, newHeight;
+	let prevZoom = zoom;
+	let zoomed = false;
 
 	//change zoom level
 	//if you want to zoom out, and the zoom isnt already at the smallest level
 	if (direction == 'out' && zoom > 1) {
+		zoomed = true;
 		zoom -= Math.ceil(zoom / 10);
 		newWidth = canvasSize[0] * zoom;
 		newHeight = canvasSize[1] * zoom;
@@ -21,7 +24,8 @@ function changeZoom (direction, cursorLocation) {
 			layers[0].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){
+	else if (direction == 'in' && zoom + Math.ceil(zoom/10) < window.innerHeight/4) {
+		zoomed = true;
 		zoom += Math.ceil(zoom/10);
 		newWidth = canvasSize[0] * zoom;
 		newHeight = canvasSize[1] * zoom;
@@ -34,7 +38,23 @@ function changeZoom (direction, cursorLocation) {
 
 	//resize canvas
 	layers[0].resize();
-
 	// adjust brush size
 	currentTool.updateCursor();
+
+	// Adjust pixel grid thickness
+	if (zoomed) {
+		if (zoom <= 7)
+			disablePixelGrid();
+		else if (zoom >= 20 && direction == 'in') {
+			enablePixelGrid();
+			repaintPixelGrid(zoom - prevZoom);
+		}
+		else if ((prevZoom >= 20 && direction == 'out')) {
+			enablePixelGrid();
+			repaintPixelGrid(zoom - prevZoom);
+		}
+		else {
+			enablePixelGrid();
+		}
+	}
 }

js/_colorPicker.js

@@ -501,7 +501,6 @@ function updateMiniSlider(hex) {
 function updateMiniPickerSpectrum() {
     let ctx = miniPickerCanvas.getContext('2d');
     let hsv = new Color("hex", colourValue.value).hsv;
-    console.log("Spectrum hex: " + new Color("hex", colourValue.value).hex);
     let white = new Color("hsv", hsv.h, 0, parseInt(miniPickerSlider.value)).rgb;
 
     ctx.clearRect(0, 0, miniPickerCanvas.width, miniPickerCanvas.height);

js/_pixelGrid.js

@@ -4,15 +4,37 @@
 let pixelGridColor = "#000000";
 // Distance between one line and another in HTML pixels
 let lineDistance = 12;
-// The grid is visible by default
+// 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;
+    pixelGrid.canvas.style.display = "none";
+}
+
+function enablePixelGrid() {
+    pixelGridEnabled = true;
+    pixelGrid.canvas.style.display = "inline-block";
+}
+
+function repaintPixelGrid(factor) {
+    lineDistance += factor;
+    console.log("Line distance: " + lineDistance + " zoom: " + zoom);
+    fillPixelGrid();
+}
 
 /** Shows or hides the pixel grid depening on its current visibility
  *  (triggered by the show pixel grid button in the top menu)
  * 
  */
 function togglePixelGrid(newState) {
+    // Ignore the event if the grid is disabled
+    if (!pixelGridEnabled) return;
+
     // Getting the button because I have to change its text
     let button = document.getElementById("toggle-pixelgrid-button");
 
@@ -42,26 +64,26 @@ function fillPixelGrid() {
 
     // The pixelGridCanvas is lineDistance times bigger so that the lines don't take 1 canvas pixel 
     // (which would cover the whole canvas with the pixelGridColour), but they take 1/lineDistance canvas pixels
-    pixelGrid.canvas.width = originalSize[0] * lineDistance;
+    pixelGrid.canvas.width = originalSize[0] * Math.round(lineDistance);
-    pixelGrid.canvas.height = originalSize[1] * lineDistance;
+    pixelGrid.canvas.height = originalSize[1] * Math.round(lineDistance);
 
     // OPTIMIZABLE, could probably be a bit more elegant
     // Draw horizontal lines
-    for (let i=0; i<pixelGrid.canvas.width / lineDistance; i++) {
+    for (let i=0; i<pixelGrid.canvas.width / Math.round(lineDistance); i++) {
         context.strokeStyle = settings.pixelGridColour;
 
         context.beginPath();
-        context.moveTo(i * lineDistance + 0.5, 0);
+        context.moveTo(i * Math.round(lineDistance) + 0.5, 0);
-        context.lineTo(i * lineDistance + 0.5, originalSize[1] * lineDistance);
+        context.lineTo(i * Math.round(lineDistance) + 0.5, originalSize[1] * Math.round(lineDistance));
         context.stroke();
         context.closePath();
     }
 
     // Draw vertical lines
-    for (let i=0; i<pixelGrid.canvas.height / lineDistance; i++) {
+    for (let i=0; i<pixelGrid.canvas.height / Math.round(lineDistance); i++) {
         context.beginPath();
-        context.moveTo(0, i * lineDistance + 0.5);
+        context.moveTo(0, i * Math.round(lineDistance) + 0.5);
-        context.lineTo(originalSize[0] * lineDistance, i * lineDistance + 0.5);
+        context.lineTo(originalSize[0] * Math.round(lineDistance), i * Math.round(lineDistance) + 0.5);
         context.stroke();
         context.closePath();    
     }