igeom/app/core/components/stages.js

var stages = (function() {
  let _width = _getWidth();
  let _height = _getHeigth();
  let _stage = new Object();
  let _layer = new Object();
  let _files = [];
  let _layers = [];
  function _createStage() {
    var id = _files.length;
    _makeTemplate(id);
    _stage = new Konva.Stage({
      container: `container-${id}`,
      width: _width,
      height: _height
    });
    _setStage(_stage);
    _files.push(_stage);
    _createLayer();
    return _stage;
  }

  function _getStage() {
    return _stage;
  }

  function _setStage(stage) {
    _stage = stage;
  }

  function _createLayer() {
    let sequence = 0;
    if (_layers == null || _layers.length == 0) {
      sequence++;
    } else {
      sequence = _layers.length + 1;
    }
    let layer = { sequence: sequence, layer: new Konva.Layer() };
    _layers.push(layer);
    if (_getCurrentLayer() == undefined && _layers.length == 0) {
      _layers = [];
      _layers.push(layer);
    }
    _layer = layer;
    _stage.add(_layer.layer);
    return layer;
  }

  function _getFiles() {
    return _files;
  }

  function _getWidth() {
    return $("#content").width();
  }

  function _getHeigth() {
    return (
      $("#sidebar").height() - $("#header").height() - $("#files").height() - 2
    );
  }

  function _evenNewDocument() {
    _createStage();
  }

  function _getCurrentLayer() {
    return _layer.layer;
  }

  function _getCurrentLayerWithSequence() {
    return _layer;
  }

  function _bootstrap() {
    $("#files").empty();
    $("body").on("click", "#new-document", _evenNewDocument);
  }

  function _makeTemplate(id) {
    $(".stage").each(function() {
      $(this).addClass("hidden");
    });
    $(".file").each(function() {
      $(this).removeClass("active");
    });
    $("#stages").append(`<div id="container-${id}" class="stage"></div>`);
    $("#files").append(
      `<li class="file active"><button>New Document ${id + 1}</button></li>`
    );
  }

  _bootstrap();
  return {
    create: _createStage,
    getFiles: _getFiles,
    _getStage: _getStage,
    getCurrentLayer: _getCurrentLayer
  };
})();