diff --git a/src/board/board.js b/src/board/board.js index 6523d64..ebcfea8 100644 --- a/src/board/board.js +++ b/src/board/board.js @@ -1,8 +1,5 @@ import { fabric } from "fabric"; -fabric.perfLimitSizeTotal = 134217728; -fabric.maxCacheSideLimit = 65536; - export default class Board { constructor(id, {grid} = {grid: {}}) { this.id = id; @@ -18,18 +15,21 @@ export default class Board { this.canvas = new fabric.Canvas(this.canvasElement, {backgroundColor: "#555"}); + this.contentGroup = new fabric.Group(); this.gridGroup = new fabric.Group(); - this.canvas.add(this.gridGroup); + this.cursorGroup = new fabric.Group(); + this.canvas.add(this.contentGroup, this.gridGroup, this.cursorGroup); this.gridOptions = { - ...(grid || {}), enabled: true, size: 64, hightlightInterval: 8, lineColor: "#444", highlightColor: "#333", + ...(grid || {}), }; + this.redrawGrid(); this.setupPanning(); } diff --git a/src/board/layer.js b/src/board/layer.js index 7ba3526..cb11071 100644 --- a/src/board/layer.js +++ b/src/board/layer.js @@ -2,6 +2,6 @@ import { fabric } from "fabric"; export default class Layer { constructor() { - this.group = new fabric.Group([], {}); + this.group = new fabric.Group(); } } \ No newline at end of file diff --git a/src/board/room.js b/src/board/room.js new file mode 100644 index 0000000..f0c8dd1 --- /dev/null +++ b/src/board/room.js @@ -0,0 +1,15 @@ +import { fabric } from "fabric"; + +export default class Room { + constructor() { + this.group = new fabric.Group(); + } + + addLayer(layer) { + this.group.addWithUpdate(layer.group); + } + + removeLayer(layer) { + this.group.removeWithUpdate(layer.group); + } +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 0a02001..5c03f85 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,8 @@ +import { fabric } from "fabric"; + +fabric.perfLimitSizeTotal = 134217728; +fabric.maxCacheSideLimit = 65536; + import Board from "./board/board"; export { diff --git a/src/tiles/tilemap.js b/src/tiles/tilemap.js new file mode 100644 index 0000000..8a4e450 --- /dev/null +++ b/src/tiles/tilemap.js @@ -0,0 +1,43 @@ +import { fabric } from "fabric"; +import TileSet from "./tileset"; + +const image = new fabric.Image(); + +export default class TileMap { + /** + * @param {TileSet} tileset + * @param {{chunkSiz:number}} opts + */ + constructor(tileset, opts = {}) { + this.tileset = tileset; + + this.opts = { + chunkSize: 8, + ...opts, + } + + this.chunks = []; + } + + getChunk(x, y) { + const cs = this.opts.chunkSize; + const cx = x > 0 ? Math.floor(x / cs) : Math.ceil(x / cs); + const cy = y > 0 ? Math.floor(y / cs) : Math.ceil(y / cs); + + let chunk = this.chunks.find(c => c.x === cx && c.y === cy); + if (chunk == null) { + chunk = new Chunk(x, y, cs); + this.chunks.push(chunk); + } + + return chunk; + } +} + +class Chunk { + constructor(x, y, size) { + this.x = x; + this.y = y; + this.size = size; + } +} \ No newline at end of file diff --git a/src/tiles/tileset.js b/src/tiles/tileset.js new file mode 100644 index 0000000..a1279c3 --- /dev/null +++ b/src/tiles/tileset.js @@ -0,0 +1,12 @@ +import { fabric } from "fabric"; + +export default class TileSet { + constructor(opts) { + this.opts = { + tileSize: [32, 32], + tileSep: [0, 0], + src: "/res/tilesets/default.png", + ...opts, + } + } +} \ No newline at end of file