select different files

src/app/app.js

@@ -1,5 +1,5 @@
 import { APP_STATE } from "./core/enums/app-state-enum";
-import { stages as Stages } from "./core/application/stages";
+import { stageManager as Stages } from "./core/application/stage-manager";
 import { objects as Objects } from "./core/application/objects";
 import { state as State } from "./core/application/state";
 import { selector as Selector } from "./core/application/selector";
@@ -13,7 +13,7 @@ export const app = (function() {
   }
 
   function _currentLayer() {
-    return Stages.getCurrentLayer();
+    return Stages.getCurrentKonvaLayer();
   }
 
   function _setSelectedTool(tool) {
@@ -52,6 +52,7 @@ export const app = (function() {
   }
 
   function _pushObject(object) {
+    return;
     Objects.add(object);
   }
 

src/app/components/line-segment-component/drawers/line-segment-drawer.js

@@ -2,7 +2,7 @@ import { Drawer } from "../../../core/drawers/drawer";
 import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
 import { label as Label } from "../../../component-registry/label";
 import { app as App } from "../../../app";
-import { DrawerAggragator } from "../../../core/drawers/drawer-aggregator";
+import { DrawerAggregator } from "../../../core/drawers/drawer-aggregator";
 import { selector as Selector } from "../../../core/application/selector";
 export class LineSegmentDrawer extends Drawer {
   static FIRST_POINT() {

src/app/components/point-component/drawers/point-drawer.js

@@ -3,8 +3,8 @@ import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
 import { label as Label } from "../../../component-registry/label";
 import { app as App } from "../../../app";
 import { PointModel } from "../models/point-model";
-import { DrawerAggragator } from "../../../core/drawers/drawer-aggregator";
+import { DrawerAggregator } from "../../../core/drawers/drawer-aggregator";
-import { stages as Stages } from "../../../core/application/stages";
+import { stageManager as Stages } from "../../../core/application/stage-manager";
 
 const HOVER_STYLE = {
   fill: "#9bc364",
@@ -20,7 +20,6 @@ export class PointDrawer extends Drawer {
   constructor() {
     super();
     this.point;
-    this.group;
     this.label;
     this.text;
     this.states = ["center"];
@@ -35,8 +34,12 @@ export class PointDrawer extends Drawer {
       App.setStatus("Selecione o centro do Ponto");
       const pos = App.pos();
       if (pos == undefined) return;
-      this.point = PointDrawer.drawAndGetPoint(pos.x, pos.y, true);
+      const drawResult = PointDrawer.drawAndGetPoint(pos.x, pos.y, true);
-      super.addAggregator(new DrawerAggragator(this, this.point));
+      this.point = drawResult.geometricObject;
+      super.setKonvaObject(drawResult.konvaObject);
+      super.addAggregator(
+        new DrawerAggregator(this, this.point, this.konvaObject)
+      );
       super.setState(this.states[0]);
     }
   }
@@ -63,7 +66,7 @@ export class PointDrawer extends Drawer {
     }
     PointDrawer.configureCircleEvents(circle);
     Drawer.drawObject(group);
-    return point;
+    return { geometricObject: point, konvaObject: group };
   }
   static getKonvaCircle(point) {
     return new Konva.Circle({

src/app/core/application/objects.js

@@ -1,12 +1,12 @@
+import { stageManager as StageManager } from "./stage-manager";
+
 class Objects {
-  constructor() {
+  constructor() {}
-    this._objects = [];
+  add(aggregator) {
-  }
+    StageManager.getCurrentLayer().addAggregator(aggregator);
-  add(object) {
-    this._objects.push(object);
   }
   get() {
-    return this._objects;
+    return StageManager.getCurrentLayer().getAggregators();
   }
 }
 export const objects = new Objects();

src/app/core/application/selector.js

@@ -1,5 +1,5 @@
 import { APP_STATE } from "../enums/app-state-enum";
-import { stages as Stages } from "../application/stages";
+import { stageManager as Stages } from "./stage-manager";
 import { state as State } from "../application/state";
 import { objects as Objects } from "../application/objects";
 import { ELEMENTS_CLASS } from "../enums/elements-class-enum";
@@ -11,7 +11,7 @@ export class Selector {
     this._selectorPosNow;
     this._mode = "";
     this._stage = Stages.getCurrentKonvaStage();
-    this._layer = Stages.getCurrentLayer();
+    this._layer = Stages.getCurrentKonvaLayer();
     this._selectorRect = new Konva.Rect({
       x: 0,
       y: 0,
@@ -29,7 +29,7 @@ export class Selector {
 
   addToLayer() {
     this._selectorRect.listening(false);
-    this._layer.add(this._selectorRect);
+    Stages.getCurrentKonvaLayer().add(this._selectorRect);
   }
 
   getSelectedObjects() {
@@ -42,6 +42,12 @@ export class Selector {
     );
   }
 
+  getKonvaPoints() {
+    return this._objects.filter(
+      x => x.attrs.class != undefined && x.attrs.class == ELEMENTS_CLASS.POINT
+    );
+  }
+
   startDragSelector(posIn) {
     this._selectorPosStart = { x: posIn.x, y: posIn.y };
     this._selectorPosNow = { x: posIn.x, y: posIn.y };
@@ -50,6 +56,7 @@ export class Selector {
   configureSelectorEvents() {
     var _this = this;
     this._stage.on("mousedown", function(e) {
+      Stages.getCurrentKonvaLayer().add(_this._selectorRect);
       _this._mode = "drawing";
       _this.startDragSelector({ x: e.evt.layerX, y: e.evt.layerY });
     });
@@ -60,6 +67,7 @@ export class Selector {
       }
     });
     this._stage.on("mouseup", function(e) {
+      _this._selectorRect.remove();
       _this._mode = "";
       _this._selectorRect.visible(false);
       _this._stage.draw();
@@ -78,7 +86,7 @@ export class Selector {
     this._selectorRect.height(posRect.y2 - posRect.y1);
     this._selectorRect.visible(true);
     for (let i = 0; i < currentObjects.length; i = i + 1) {
-      let object = currentObjects[i];
+      let object = currentObjects[i].konvaObject;
       if (object.children != undefined && object.children.length > 0) {
         for (let j = 0; j < object.children.length; j++) {
           this.style(object.children[j], this._selectorRect);

src/app/core/application/stages.js

@@ -1,5 +1,5 @@
 import { Stage } from "../drawers/stage";
-class Stages {
+class StageManager {
   constructor() {
     this._width = this._getWidth();
     this._height = this._getHeigth();
@@ -15,20 +15,17 @@ class Stages {
     return this._stage.konvaStage;
   }
   getCurrentLayer() {
+    return this._stage.getCurrentLayer();
+  }
+  getCurrentKonvaLayer() {
     return this._stage.getCurrentKonvaLayer();
   }
   create() {
-    var id = this._files.length;
+    var id = this._files.length + 1;
     this._makeTemplate(id);
-    this._setStage(new Stage());
-    const stage = new Konva.Stage({
-      container: `container-${id}`,
-      width: this._width,
-      height: this._height
-    });
-    this._stage.setKonvaStage(stage);
-    this._files.push(this._stage);
     this._createLayer();
+    this._files.push(this._stage.layer);
+    this._cleanLayers();
     return this._stage;
   }
   getFiles() {
@@ -44,13 +41,24 @@ class Stages {
 
   _createLayer() {
     const stage = this.getCurrentStage();
-    if (stage != undefined) return stage.createLayer();
+    const layer = stage.createLayer();
+    return layer;
   }
 
   _getFiles() {
     return _files;
   }
 
+  _cleanLayers(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();
   }
@@ -73,24 +81,42 @@ class Stages {
     return _layer;
   }
 
+  _selectFile(e) {
+    const file = $(e.currentTarget);
+    const id = parseInt(file.attr("file-id"));
+    const layer = this._files.find(function(element) {
+      return element.sequence == id;
+    });
+    $(".file").each(function() {
+      $(this).removeClass("active");
+    });
+    file.addClass("active");
+    if (layer != undefined) this._cleanLayers(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(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>`
+      `<li class="file active" file-id="${id}"><button>New Document ${id}</button></li>`
     );
   }
 }
 
-export const stages = new Stages();
+export const stageManager = new StageManager();

src/app/core/drawers/drawer-aggregator.js

@@ -1,7 +1,8 @@
-export class DrawerAggragator {
+export class DrawerAggregator {
-  constructor(drawer, geometricObject) {
+  constructor(drawer, geometricObject, konvaObject) {
     this.drawer = drawer;
     this.genericObject = geometricObject;
+    this.konvaObject = konvaObject;
   }
   setGeometricObject(genericObject) {
     this.genericObject = genericObject;
@@ -9,6 +10,9 @@ export class DrawerAggragator {
   setDrawer(drawer) {
     this.drawer = drawer;
   }
+  setKonvaObject(konvaObject) {
+    this.konvaObject = konvaObject;
+  }
   update() {
     this.drawer.update();
   }

src/app/core/drawers/drawer-manager.js

@@ -1,4 +1,4 @@
-import { stages as Stages } from "../application/stages";
+import { stageManager as Stages } from "../application/stage-manager";
 
 class DrawerManager {
   constructor() {

src/app/core/drawers/drawer.js

@@ -8,6 +8,7 @@ export class Drawer {
     this.drawing = false;
     this.states = [];
     this.state = undefined;
+    this.konvaObject;
   }
   onDragMove() {}
   setState(state) {
@@ -33,6 +34,9 @@ export class Drawer {
   update() {
     throw "Not implemented exception";
   }
+  setKonvaObject(konvaObject) {
+    this.konvaObject = konvaObject;
+  }
   static drawObject(object) {
     DrawerManager.draw(object);
   }

src/app/core/drawers/layer.js

@@ -2,8 +2,15 @@ export class Layer {
   constructor(sequence, konvaLayer) {
     this.sequence = sequence;
     this.konvaLayer = konvaLayer;
+    this.aggregators = [];
   }
   getKonvaLayer() {
     return this.konvaLayer;
   }
+  addAggregator(aggregator) {
+    this.aggregators.push(aggregator);
+  }
+  getAggregators() {
+    return this.aggregators;
+  }
 }

src/app/core/drawers/stage.js

@@ -4,13 +4,12 @@ import { APP_STATE } from "../enums/app-state-enum";
 export class Stage {
   constructor() {
     this.layers = [];
-    this.aggregators = [];
     this.layer;
     this.konvaStage;
     this._bootstrap();
   }
   addAggregator(aggregator) {
-    this.aggregators.push(aggregator);
+    this.layer.addAggregator(aggregator);
   }
   setKonvaStage(stage) {
     this.konvaStage = stage;
@@ -33,6 +32,9 @@ export class Stage {
     this.konvaStage.add(this.layer.konvaLayer);
     return layer;
   }
+  setCurrentLayer(layer) {
+    this.layer = layer;
+  }
   getCurrentLayer() {
     return this.layer;
   }
@@ -45,7 +47,7 @@ export class Stage {
       var layer = this.layer.getKonvaLayer();
       layer.add(object);
       this.konvaStage.draw(layer);
-      App.pushObject(object);
+      // App.pushObject(object);
     }
   }
   _setState(state) {