Browse Source

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

master
Gisle Aune 5 years ago
parent
commit
339e0a8a8b
  1. 28
      package-lock.json
  2. 25
      src/board/board.js

28
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",

25
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;

Loading…
Cancel
Save