igeom/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();