src/app/core/application/stage-manager.js
import { Stage } from "../drawers/stage";
class StageManager {
constructor() {
this._width = this._getWidth();
this._height = this._getHeigth();
this._files = [];
this.stages = [];
this._stage;
this._bootstrap();
}
getSize() {
return {
w: this._width,
h: this._height
}
}
getCurrentStage() {
return this._stage;
}
getCurrentKonvaStage() {
return this._stage.konvaStage;
}
getCurrentLayer() {
return this._stage.getCurrentLayer();
}
getCurrentKonvaLayer() {
return this._stage.getCurrentKonvaLayer();
}
create() {
let id = this._files.length + 1;
this._createLayer();
this._makeTemplate(this._stage.layer);
this._files.push(this._stage.layer);
this._clearLayers();
return this._stage;
}
getFiles() {
return this._files;
}
_getStage() {
return this._stage;
}
_setStage(stage) {
this._stage = stage;
}
_createLayer() {
const stage = this.getCurrentStage();
const layer = stage.createLayer();
return layer;
}
_getFiles() {
return _files;
}
_clearLayers(layer) {
this._files.forEach(element => {
element.konvaLayer.hide();
});
if (layer == undefined) layer = this.getCurrentLayer();
else this._stage.setCurrentLayer(layer);
layer.konvaLayer.show();
this.getCurrentKonvaStage().draw();
}
_getWidth() {
return $("#content").width();
}
_getHeigth() {
return (
$("#sidebar").height() - $("#header").height() - $("#files").height() - 2
);
}
_evenNewDocument() {
this.create();
}
_getCurrentLayer() {
return _layer.layer;
}
_getCurrentLayerWithSequence() {
return _layer;
}
_selectFile(e) {
const file = $(e.currentTarget);
const id = parseInt(file.attr("file-id"));
const layer = this._files.find(function (element) {
return element.id == id;
});
$(".file").each(function () {
$(this).removeClass("active");
});
file.addClass("active");
if (layer != undefined) this._clearLayers(layer);
this._setLayerTitle(layer);
}
_bootstrap() {
$("#files").empty();
$("body").on("click", "#new-document", this._evenNewDocument.bind(this));
$("body").on("click", ".file", this._selectFile.bind(this));
$("#stages").append(`<div id="container" class="stage"></div>`);
const stage = new Konva.Stage({
container: `container`,
width: this._width,
height: this._height
});
this._setStage(new Stage());
this._stage.setKonvaStage(stage);
this.create();
}
_makeTemplate(layer) {
$(".file").each(function () {
$(this).removeClass("active");
});
$("#files").append(
`<li class="file active" file-id="${layer.id}"><button>${layer.name}</button></li>`
);
this._setLayerTitle(layer);
}
_setLayerTitle(layer) {
$("#selected-document").empty();
$("#selected-document").append(layer.name);
}
}
export const stageManager = new StageManager();