board: disabled zoom for now (it's buggy) and cleaned up some stuff.

package-lock.json

@@ -1773,14 +1773,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -1795,20 +1793,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -1925,8 +1920,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -1938,7 +1932,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -1953,7 +1946,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -1961,14 +1953,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -1987,7 +1977,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -2068,8 +2057,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -2081,7 +2069,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -2203,7 +2190,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",

src/board/board.js

@@ -4,13 +4,13 @@ fabric.perfLimitSizeTotal = 134217728;
 fabric.maxCacheSideLimit = 65536;
 
 export default class Board {
-  constructor(id) {
+  constructor(id, {grid} = {grid: {}}) {
     this.id = id;
-    this.state = {a: 32};
+    this.state = {};
 
     this.containerElement = document.getElementById(id);
     if (this.containerElement == null) {
-      throw new Error(`Container ${this.id} not found`)
+      throw new Error(`Container "${this.id}" not found`)
     }
 
     this.canvasElement = document.createElement("canvas");
@@ -22,6 +22,7 @@ export default class Board {
     this.canvas.add(this.gridGroup);
 
     this.gridOptions = {
+      ...(grid || {}),
       enabled: true,
       size: 64,
       hightlightInterval: 8,
@@ -59,19 +60,19 @@ export default class Board {
     const wCount = Math.ceil((this.canvas.getWidth() / this.canvas.getZoom()) / size) + (hightlightInterval * 2);
     const hCount = Math.ceil((this.canvas.getHeight() / this.canvas.getZoom()) / size) + (hightlightInterval * 2);
 
-    const width2 = wCount * (size);
+    const width = wCount * (size);
-    const height2 = hCount * (size);
+    const height = hCount * (size);
 
     this.gridGroup.set("left", 0);
     this.gridGroup.set("top", 0);
-    this.gridGroup.set("width", width2);
+    this.gridGroup.set("width", width);
-    this.gridGroup.set("height", height2);
+    this.gridGroup.set("height", height);
     this.gridGroup.set("selectable", false);
     this.gridGroup.set("hoverCursor", "default");
 
     for (let i = 0; i <= wCount; ++i) {
       let x = i * size;
-      let line = new fabric.Line([x, 0, x, height2], {stroke: lineColor, strokeWidth: 2, selectable: false});
+      let line = new fabric.Line([x, 0, x, height], {stroke: lineColor, strokeWidth: 2, selectable: false});
 
       if (i % hightlightInterval == 0) {
         line.set("stroke", highlightColor);
@@ -82,7 +83,7 @@ export default class Board {
 
     for (let i = 0; i <= hCount; ++i) {
       let y = i * size;
-      let line = new fabric.Line([0, y, width2, y], {stroke: lineColor, strokeWidth: 2, selectable: false});
+      let line = new fabric.Line([0, y, width, y], {stroke: lineColor, strokeWidth: 2, selectable: false});
 
       if (i % hightlightInterval == 0) {
         line.set("stroke", highlightColor);
@@ -101,14 +102,14 @@ export default class Board {
     this.gridGroup.set("left", x - xOffset);
     this.gridGroup.set("top", y - yOffset);
     this.gridGroup.setCoords();
-
-    console.log(this.gridGroup);
   }
 
   setupPanning() {
     const parent = this;
 
     this.canvas.on('mouse:wheel', ({e}) => { 
+      return; // TODO: Fix bugs with the grid when zoomed in/out.
+      
       if (e.shiftKey === false) {
         return;
       }
@@ -129,7 +130,7 @@ export default class Board {
 
       e.preventDefault();
       e.stopPropagation();
-    })
+    });
     
     this.canvas.on('mouse:down', function(opt) {
       var evt = opt.e;