Grids now available in a number of different formats. Grid rendering has been moved to the ui/Renderer

app/js/ctrls/CTRLPainter.js

@@ -267,19 +267,35 @@ class CTRLPainter {
     GlobalEvents.listen("painter-fit-to-canvas", handle_fittocanvas);
 
     var handle_togglegrid = (function(target, args){
+      var elgridops = document.querySelector(".painter-grid-options");
       if (args.show){
         target.classList.add("pure-button-active");
         target.setAttribute("emit-args", JSON.stringify({show:false}));
+        if (elgridops)
+          elgridops.classList.remove("hidden");
         this.__gridEnabled = true;
       } else {
         target.classList.remove("pure-button-active");
         target.setAttribute("emit-args", JSON.stringify({show:true}));
+        if (elgridops)
+          elgridops.classList.add("hidden");
         this.__gridEnabled = false;
       }
       RenderD();
     }).bind(this);
     GlobalEvents.listen("painter-togglegrid", handle_togglegrid);
 
+    var elgridops = document.querySelector(".painter-grid-options");
+    if (elgridops){
+      let self = this;
+      elgridops.addEventListener("change", function(e){
+        self.__gridSize = parseInt(this.value);
+        if (self.__gridSize < 1 || self.__gridSize > 6)
+          self.__gridSize = 1;
+        RenderD();
+      });
+    }
+
 
     var handle_colormode = (function(target, args){
       if (args.onePaletteMode){
@@ -406,41 +422,59 @@ class CTRLPainter {
   }
 
   renderGrid(){
-    if (context === null || this.__surface === null){return this;}
-    context.save();
-
-    // Draw grid.
-    if (this.__gridEnabled && this.__scale > 0.5){
-      context.strokeStyle = "#00FF00";
-
-      var w = this.__surface.width * this.__scale;
-      var h = this.__surface.height * this.__scale;
-
-      var length = Math.max(this.__surface.width, this.__surface.height);
-      for (var i=0; i < length; i += 8){
-        var x = (i*this.__scale) + this.__offset[0];
-        var y = (i*this.__scale) + this.__offset[1];
-
-        if (i < this.__surface.width){
-          context.beginPath();
-          context.moveTo(x, this.__offset[1]);
-          context.lineTo(x, this.__offset[1] + h);
-          context.stroke();
-          context.closePath();
-        }
-
-        if (i < this.__surface.height){
-          context.beginPath();
-          context.moveTo(this.__offset[0], y);
-          context.lineTo(this.__offset[0] + w, y);
-          context.stroke();
-          context.closePath();
-        }
-      }
+    if (context === null || this.__surface === null || this.__gridEnabled === false){return this;}
+   
+    switch (this.__gridSize){
+      case 1: // 8x8
+        Renderer.renderGridNxN(
+          context, 
+          8, 
+          this.__surface.width, this.__surface.height, 
+          this.__scale, this.__offset, 
+          "#00FF00"
+        ); break;
+      case 2: // 16x8
+        Renderer.renderGridMxN(
+          context, 
+          16, 8, 
+          this.__surface.width, this.__surface.height, 
+          this.__scale, this.__offset, 
+          "#00FF00"
+        ); break;
+      case 3: // 16x16
+        Renderer.renderGridNxN(
+          context, 
+          16, 
+          this.__surface.width, this.__surface.height, 
+          this.__scale, this.__offset, 
+          "#00FF00"
+        ); break;
+      case 4:
+        Renderer.renderGridNxN(
+          context, 
+          32,
+          this.__surface.width, this.__surface.height, 
+          this.__scale, this.__offset, 
+          "#00FF00"
+        ); break;
+      case 5: // 16x16 Major | 8x8 Minor
+        Renderer.renderGridMajorMinor(
+          context,
+          16, 8,
+          this.__surface.width, this.__surface.height,
+          this.__scale, this.__offset,
+          "#00FF00", "#008800"
+        ); break;
+      case 6: // 32x32 Major | 16x16 Minor
+        Renderer.renderGridMajorMinor(
+          context,
+          32, 16,
+          this.__surface.width, this.__surface.height,
+          this.__scale, this.__offset,
+          "#00FF00", "#008800"
+        ); break;
     }
 
-    context.restore();
-
     return this;
   }
 

app/js/ui/Renderer.js

@@ -154,10 +154,93 @@ function renderToFit(surf, ctx, palcolored){
 }
 
 
+function renderGridNxN(ctx, gsize, sw, sh, scale, offset, color){
+  // Draw grid.
+  if (scale > 0.5){
+    ctx.save();
+    ctx.strokeStyle = color;
+
+    var w = sw * scale;
+    var h = sh * scale;
+
+    var length = Math.max(sw, sh);
+    for (var i=0; i < length; i += gsize){
+      var x = (i*scale) + offset[0];
+      var y = (i*scale) + offset[1];
+
+      if (i < sw){
+        ctx.beginPath();
+        ctx.moveTo(x, offset[1]);
+        ctx.lineTo(x, offset[1] + h);
+        ctx.stroke();
+        ctx.closePath();
+      }
+
+      if (i < sh){
+        ctx.beginPath();
+        ctx.moveTo(offset[0], y);
+        ctx.lineTo(offset[0] + w, y);
+        ctx.stroke();
+        ctx.closePath();
+      }
+    }
+    ctx.restore();
+  } 
+}
+
+
+function renderGridMxN(ctx, gw, gh, sw, sh, scale, offset, color){
+  if (scale > 0.5){
+    ctx.save();
+    ctx.strokeStyle = color;
+
+    var w = sw * scale;
+    var h = sh * scale;
+
+    var length = Math.max(sw, sh);
+    for (let i=0; i < sw; i += gw){
+      var x = (i*scale) + offset[0];
+      //var y = (i*scale) + offset[1];
+
+      if (i < sw){
+        ctx.beginPath();
+        ctx.moveTo(x, offset[1]);
+        ctx.lineTo(x, offset[1] + h);
+        ctx.stroke();
+        ctx.closePath();
+      }
+    }
+
+    for (let i=0; i < sh; i += gh){
+      var y = (i * scale) + offset[1];
+
+      if (i < sh){
+        ctx.beginPath();
+        ctx.moveTo(offset[0], y);
+        ctx.lineTo(offset[0] + w, y);
+        ctx.stroke();
+        ctx.closePath();
+      }
+    }
+    ctx.restore();
+  }
+}
+
+
+function renderGridMajorMinor(ctx, mjsize, mnsize, sw, sh, scale, offset, mjcolor, mncolor){
+  if (scale > 0.5){
+    renderGridNxN(ctx, mnsize, sw, sh, scale, offset, mncolor);
+    renderGridNxN(ctx, mjsize, sw, sh, scale, offset, mjcolor);
+  }
+}
+
 
 export default {
   clear: clear,
   render: render,
   renderToFit: renderToFit,
+  renderGridNxN: renderGridNxN,
+  renderGridMxN: renderGridMxN,
+  renderGridMajorMinor: renderGridMajorMinor,
   NESTileSurface: NESTileSurface
 };

views/ctrlpainter.html

@@ -10,12 +10,22 @@
         <i class="fa fa-expand-arrows-alt"></i>
       </button>
 
-      <button emit="painter-togglegrid" title="Toggle Grid" emit-args='{"show":true}' class="pure-button">
-        <i class="fa fa-th"></i>
-      </button>
       <button emit="painter-colormode" title="Toggle Color Mode" emit-args='{"onePaletteMode":false}' class="pure-button">
         <i class="fa fa-palette"></i>
       </button>
+      
+      <button emit="painter-togglegrid" title="Toggle Grid" emit-args='{"show":true}' class="pure-button">
+        <i class="fa fa-th"></i>
+      </button>
+      
+      <select class="painter-grid-options hidden">
+        <option value="1">8x8</option>
+        <option value="2">16x8</option>
+        <option value="3">16x16</option>
+        <option value="4">32x32</option>
+        <option value="5">16mj 8mn</option>
+        <option value="6">32mj 16mn</option>
+      </select>
     </form>
   </div>
 </div>