123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- 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() {}
- }
|