diff --git a/package-lock.json b/package-lock.json index bd46300..52d10b9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1773,14 +1773,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": 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, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -1925,8 +1920,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": 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, - "optional": true + "dev": 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, - "optional": true + "dev": 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", diff --git a/src/board/board.js b/src/board/board.js index fe374a0..6523d64 100644 --- a/src/board/board.js +++ b/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 height2 = hCount * (size); + const width = wCount * (size); + const height = hCount * (size); this.gridGroup.set("left", 0); this.gridGroup.set("top", 0); - this.gridGroup.set("width", width2); - this.gridGroup.set("height", height2); + this.gridGroup.set("width", width); + 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;