Add Edge Rendering with Toggle Button

lib/app_component.dart

@@ -52,4 +52,8 @@ class AppComponent implements OnInit {
     engine.running = false;
     engine.grid.addPattern();
   }
+
+  void onEdgesClicked() {
+    engine.grid.switchEdgeRendering();
+  }
 }

lib/app_component.html

@@ -17,4 +17,5 @@
     <button id="reset" (click)="onResetClicked()"><i class="fas fa-undo"></i></button>
     <button id="random" (click)="onRandomClicked()"><i class="fas fa-random"></i></button>
     <i class="fas fa-clock"> Speed:</i><input type="text" title="speed" value="1">
+    <button id="edges" (click)="onEdgesClicked()"><i class="fas fa-chess-board"></i> </button>
 </div>

lib/src/Grid.dart

@@ -12,6 +12,8 @@ class Grid {
   final List<List<Cell>> map;
 
   bool _dirty = true;
+  bool _renderEdges = true;
+
   int _startingSeed;
   int _x;
   int _y;
@@ -174,8 +176,14 @@ class Grid {
     int brickW = (canvas.width ~/ map[0].length);
     int brickH = (canvas.height ~/ map.length);
     ctx.clearRect(0, 0, canvas.width, canvas.height);
+
     for (int y = 0; y < map.length; y++) {
       for (int x = 0; x < map[y].length; x++) {
+        if(_renderEdges) {
+          ctx.setStrokeColorRgb(100, 100, 100);
+          ctx.strokeRect(x * brickW, y * brickH, brickW, brickH);
+        }
+
         Cell c = map[y][x];
         if (c.state == true)
           ctx.setFillColorRgb(155, 155, 255);
@@ -187,4 +195,9 @@ class Grid {
 
     _dirty = false;
   }
+
+  void switchEdgeRendering([bool on]) {
+    _renderEdges = on ?? !_renderEdges;
+    _dirty = true;
+  }
 }