import { app as App } from "../../app"; import { Layer } from "../drawers/layer"; import { APP_STATE } from "../enums/app-state-enum"; export class Stage { constructor() { this.layers = []; this.layer; this.konvaStage; this._bootstrap(); } addAggregator(aggregator) { this.layer.addAggregator(aggregator); } setKonvaStage(stage) { this.konvaStage = stage; this.configureStageEvents(this.konvaStage); } createLayer() { let sequence = 0; if (this.layers == null || this.layers.length == 0) { sequence++; } else { sequence = this.layers.length + 1; } const layer = new Layer(sequence, new Konva.Layer()); this.layers.push(layer); if (this.getCurrentLayer() == undefined && this.layers.length == 0) { this.layers = []; this.layers.push(layer); } this.layer = layer; this.konvaStage.add(this.layer.konvaLayer); return layer; } setCurrentLayer(layer) { this.layer = layer; } getCurrentLayer() { return this.layer; } getCurrentKonvaLayer() { return this.layer.getKonvaLayer(); } draw(object) { if (object == undefined) this.konvaStage.draw(); else { var layer = this.layer.getKonvaLayer(); this.layer.getKonvaGroup().add(object); this.konvaStage.draw(layer); } } _setState(state) { App.setState(state); } configureStageEvents(stage) { stage.on("mousedown ", this._mouseDown.bind(this)); stage.on("click", this._clickTap.bind(this)); } _mouseDown(e) { if (e.target === this.konvaStage) { this._setState(APP_STATE.NONE); return; } if (e.target.id != undefined) { this._setState(APP_STATE.OBJECT_SELECTED); return; } } _clickTap(e) { const tool = App.getSelectedTool(); if (tool != undefined) { tool.draw.bind(tool)(e); return; } if (e.target === this.konvaStage) { this._setState(APP_STATE.NONE); return; } } _bootstrap() {} }