Implemented pixel grid

Added settings for pixel grid, move settings to editor sub menu.

css/pixel-editor.scss

@@ -305,11 +305,17 @@ svg {
 	background: transparent;
 }
 
-#tmp-canvas {
+#pixel-grid {
 	z-index: 3;
 	background: transparent;
 }
 
+#tmp-canvas {
+	z-index: 4;
+	background: transparent;
+}
+
+
 #vfx-canvas {
 	z-index: -5000;
 	background: transparent;
@@ -855,9 +861,11 @@ svg {
 	color: #c0bfc1;
 }
 
-#settings-container {
+.settings-entry {
 	display: flex;
 	align-items: baseline;
+	margin-top:10px;
+
 	label {
 		flex: 1;
 	}
@@ -865,6 +873,7 @@ svg {
 		width: 90px !important;
 		display: block;
 		box-sizing: border-box;
+		float:right;
 	}
 }
 

js/_pixelGrid.js

@@ -1,5 +1,33 @@
+let pixelGridColor = "#0000FF";
+let lineDistance = 12;
 pixelGridCanvas = document.getElementById("pixel-grid");
 
-function fillPixelGrid() {
 
+function fillPixelGrid() {
+    let context = pixelGridCanvas.getContext("2d");
+    let originalSize = layers[0].canvasSize;
+
+    pixelGridCanvas.width = originalSize[0] * lineDistance;
+    pixelGridCanvas.height = originalSize[1] * lineDistance;
+
+    // OPTIMIZABLE, could probably be a bit more elegant
+    // Draw horizontal lines
+    for (let i=0; i<pixelGridCanvas.width / lineDistance; i++) {
+        context.strokeStyle = pixelGridColor;
+
+        context.beginPath();
+        context.moveTo(i * lineDistance + 0.5, 0);
+        context.lineTo(i * lineDistance + 0.5, originalSize[1] * lineDistance);
+        context.stroke();
+        context.closePath();
+    }
+
+    // Draw vertical lines
+    for (let i=0; i<pixelGridCanvas.height / lineDistance; i++) {
+        context.beginPath();
+        context.moveTo(0, i * lineDistance + 0.5);
+        context.lineTo(originalSize[0] * lineDistance, i * lineDistance + 0.5);
+        context.stroke();
+        context.closePath();    
+    }
 }

views/pixel-editor.hbs

@@ -84,13 +84,13 @@
             <button>Editor</button>
             <ul>
                 <li><button id="switch-mode-button">Switch to basic mode</button></li>
+                <li><button>Settings</button></li>
             </ul>
         </li>
 
         <li>
             <button>Help</button>
             <ul>
-                <li><button>Settings</button></li>
                 <li><button>Help</button></li>
                 <li><button>About</button></li>
                 <li><button>Changelog</button></li>
@@ -425,9 +425,20 @@
             <h1>Settings</h1>
 
             <div id="settings-container">
+                <h2>History</h2>
+                <div class = "settings-entry">
                     <label for="setting-numberOfHistoryStates">Number of History States</label> <input id="setting-numberOfHistoryStates" value="20" autocomplete="off" />
                 </div>
 
+                <h2>Pixel grid</h2>
+                <div class = "settings-entry">
+                    <label for="setting-pixelGridLineDistance">Distance between pixel grid lines</label><input id="setting-pixelGridLineDistance" value="12" autocmplete="off"/>
+                </div>
+                <div class = "settings-entry">
+                    <label for="setting-pixelGridColour">Colour of the pixel grid</label><input id="pixelGridColour" value = "#0000FF" autocomplete="off"/>
+                </div>
+            </div>
+
             <p id="cookies-disabled-warning">Your browsers cookies are disabled, settings will be lost upon closing this page.</p>
 
             <div>