construção de arquivos

app/app.js

@@ -1,52 +1,23 @@
 var app = (function() {
-  let _width = $("#content").width();
-  let _height =
-    $("#sidebar").height() - $("#header").height() - $("#files").height() - 2;
-  let _screen = {
-    width: _width,
-    height: _height
-  };
-  let _layers = [];
-  let _currentLayers = [];
   let _tools = [];
   let _menu = [];
-  let _layer = undefined;
   let _selectedTool = [];
   let _objects = [];
-  let _stage = new Konva.Stage({
-    container: "container",
-    width: _width,
-    height: _height
-  });
   let _state = APP_STATE.NONE;
-
-  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 (_currentLayer() == undefined && _currentLayers.length == 0) {
-      _currentLayers = [];
-      _currentLayers.push(layer);
-    }
-    _stage.add(layer.layer);
-    return layer;
-  }
+  let _stage = _createStage();
 
   function _bootstrap() {
-    _createLayer();
     configureStageEvents();
     _layer = _currentLayer();
     selector.bootstrap();
   }
 
+  function _createStage() {
+    return stages.create();
+  }
+
   function _currentLayer() {
-    if (_currentLayers[0] == undefined) return undefined;
-    return _currentLayers[0].layer;
+    return stages.getCurrentLayer();
   }
 
   function configureStageEvents() {
@@ -128,10 +99,7 @@ var app = (function() {
   return {
     stage: _stage,
     currentLayer: _currentLayer,
-    createLayer: _createLayer,
-    screen: _screen,
     bootstrap: _bootstrap,
-    layers: _layers,
     tools: _tools,
     setSelectedTool: _setSelectedTool,
     clearSelectedTool: _clearSelectedTool,

app/core/components/stages.js

@@ -0,0 +1,99 @@
+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
+  };
+})();

css/app.css

@@ -86,13 +86,13 @@
   transition: background-color 0.5s linear;
 }
 
-#files {
+.files {
   background: #eaeaea;
   height: 32.02px;
   padding: 0px;
   margin: 0px;
 }
-#files ul,
+.files ul,
 #header ul {
   list-style: none;
   list-style-type: none;
@@ -101,7 +101,7 @@
   vertical-align: middle;
   height: 100%;
 }
-#files ul li {
+.files ul li {
   margin: 0px 10px 0px 0px;
   padding: 0px;
   font-size: 12px;
@@ -109,19 +109,19 @@
   list-style: none;
   height: 100%;
 }
-#files ul .file:hover {
+.files ul .file:hover {
   background: #e0e0e0 !important;
   color: #333333 !important;
   transition: background-color 0.3s linear;
   transition: color 0.3s linear;
 }
-#files ul .file,
-#files ul .file button {
+.files ul .file,
+.files ul .file button {
   padding: 0px;
   color: #aaaaaa;
 }
 
-#files ul .file button {
+.files ul .file button {
   border: none;
   margin: 0px;
   background: transparent;
@@ -129,19 +129,19 @@
   height: 100%;
 }
 
-#files ul .active button {
+.files ul .active button {
   background: #d4d4d4;
   color: #555555;
   margin: 0px;
 }
 
-#files ul .active {
+.files ul .active {
   background: #d4d4d4;
   color: #555555;
   margin: 0px;
 }
 
-#files ul .new button {
+.files ul .new button {
   border: none;
   padding: 0px;
   margin: -3px 0px 0px 0px;
@@ -157,3 +157,7 @@
   vertical-align: middle;
   color: #555555;
 }
+
+.hidden {
+  display: none !important;
+}

index.html

@@ -62,20 +62,26 @@
             <div class="p-1 flex-fill"></div>
           </div>
         </nav>
-        <nav id="files">
+        <nav class="files">
           <ul>
-            <li class="file active"><button>New Document 1</button></li>
-            <li class="file"><button>New Document 2</button></li>
-            <li class="new"><button class="new-file">+</button></li>
+            <li>
+              <ul id="files">
+                <li class="file active"><button>New Document 1</button></li>
+              </ul>
+            </li>
+            <li id="new-document" class="new">
+              <button class="new-file">+</button>
+            </li>
           </ul>
         </nav>
-        <div id="container"></div>
+        <div id="stages"></div>
       </div>
     </div>
     <script src="node_modules/jquery/dist/jquery.min.js"></script>
     <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
     <script src="node_modules/konva/konva.min.js"></script>
     <script src="app/core/enums/app-state-enum.js"></script>
+    <script src="app/core/components/stages.js"></script>
     <script src="app/core/components/selector.js"></script>
     <script src="app/app.js"></script>
     <script src="app/components/label.js"></script>