src/app/core/drawers/stage.js
import { app as App } from "../../app";
import { Layer } from "../drawers/layer";
import { APP_STATE } from "../enums/app-state-enum";
import { ELEMENTS_CLASS } from "../enums/elements-class-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 {
let layer = this.layer.getKonvaLayer();
this.layer.getKonvaGroup().add(object);
layer.draw();
this.konvaStage.draw(layer);
this.konvaStage.draw();
}
}
_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) {
if (
e.target.attrs != undefined &&
e.target.attrs.class != ELEMENTS_CLASS.CIRCUMFERENCE
) {
this._setState(APP_STATE.OBJECT_SELECTED);
} else {
this._setState(APP_STATE.NONE);
}
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() { }
}