refactor stages and create line-segment

src/app/app.js

@@ -6,48 +6,16 @@ import { selector as Selector } from "./core/application/selector";
 import { menu as Menu } from "./core/application/menu";
 export const app = (function() {
   let _selectedTool = [];
-  let _stage = _createStage();
   function _bootstrap() {
-    configureStageEvents();
     Selector.bootstrap();
     requireAll(require.context("./component-registry/", true, /\.js$/));
     _refreshMenu();
   }
 
-  function _createStage() {
-    return Stages.getCurrentStage();
-  }
-
   function _currentLayer() {
     return Stages.getCurrentLayer();
   }
 
-  function configureStageEvents() {
-    _stage.on("mousedown ", function(e) {
-      if (e.target === _stage) {
-        _setState(APP_STATE.NONE);
-        return;
-      }
-      if (e.target.id != undefined) {
-        _setState(APP_STATE.OBJECT_SELECTED);
-        return;
-      }
-    });
-    _stage.on("click tap", function(e) {
-      const tool = _getSelectedTool();
-      console.info("state", State.getCurrentState());
-      if (tool != undefined) {
-        const fun = tool.draw.bind(tool);
-        fun();
-        return;
-      }
-      if (e.target === _stage) {
-        _setState(APP_STATE.NONE);
-        return;
-      }
-    });
-  }
-
   function _setSelectedTool(tool) {
     _clearSelectedTool();
     _setState(APP_STATE.TOOL_SELECTED);
@@ -75,7 +43,8 @@ export const app = (function() {
   }
 
   function _getRelativePointerPosition() {
-    return _stage.getPointerPosition();
+    const stage = Stages.getCurrentKonvaStage();
+    return stage.getPointerPosition();
   }
 
   function _setStatus(status) {
@@ -103,7 +72,7 @@ export const app = (function() {
 
   _bootstrap();
   return {
-    stage: _stage,
+    stage: Stages.getCurrentKonvaStage,
     currentLayer: _currentLayer,
     bootstrap: _bootstrap,
     setSelectedTool: _setSelectedTool,
@@ -112,6 +81,7 @@ export const app = (function() {
     pos: _getRelativePointerPosition,
     setStatus: _setStatus,
     pushObject: _pushObject,
-    getObjects: _getObjects
+    getObjects: _getObjects,
+    setState: _setState
   };
 })();

src/app/component-registry/line-segment-component.js

@@ -0,0 +1,15 @@
+import { Component } from "../core/models/components/component";
+import { ComponentOptions } from "../core/models/components/component-options";
+import { LineSegmentDrawer } from "../components/line-segment-component/drawers/line-segment-drawer";
+class LineSegmentComponent extends Component {
+  constructor() {
+    const options = new ComponentOptions(
+      "0566268b76d744f28c79e482e26fab3a",
+      "Line",
+      "line-segment"
+    );
+    super(new LineSegmentDrawer(), options);
+  }
+}
+
+export const lineSegmenComonent = new LineSegmentComponent();

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

@@ -0,0 +1,70 @@
+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 { selector as Selector } from "../../../core/application/selector";
+export class LineSegmentDrawer extends Drawer {
+  static FIRST_POINT() {
+    return "FIRST_POINT";
+  }
+  static SECOND_POINT() {
+    return "SECOND_POINT";
+  }
+  constructor() {
+    super();
+    this.pointA;
+    this.pointB;
+    this.states = [
+      LineSegmentDrawer.FIRST_POINT,
+      LineSegmentDrawer.SECOND_POINT
+    ];
+  }
+  setPointA(point) {
+    this.pointA = point;
+  }
+  setPointB(point) {
+    this.pointB = point;
+  }
+  draw() {
+    // if (this._state == null) {
+    //   this._state = LineSegment.STATE_PRIMEIRO_PONTO;
+    //   this._points.clear();
+    //   App.setStatus("Selecione o primeiro ponto no canvas");
+    // } else if (this._state === LineSegment.STATE_PRIMEIRO_PONTO) {
+    //   const pos = App.pos();
+    //   this._points.add({ x: pos.x, y: pos.y });
+    //   this._state = LineSegment.STATE_SEGUNDO_PONTO;
+    // } else if (this._state === LineSegment.STATE_SEGUNDO_PONTO) {
+    //   const pos = App.pos();
+    //   this._points.add({ x: pos.x, y: pos.y });
+    //   this.drawPoint(this._points);
+    //   this._points.clear();
+    //   this._state = LineSegment.STATE_PRIMEIRO_PONTO;
+    // }
+    const points = Selector.getPoints();
+    console.info("points", points);
+    if (points == undefined || points.length < 1) return;
+    console.info("pointA", points[0]);
+    console.info("pointB", points[1]);
+  }
+  update() {}
+
+  static getKonvaLine(pointA, pointB) {
+    const points = [pointA.posX, pointA.posY, pointB.posX, pointB.posY];
+    return new Konva.Line({
+      points: points,
+      stroke: "grey",
+      strokeWidth: 2,
+      lineJoin: "round",
+      draggable: false,
+      strokeScaleEnabled: false,
+      class: ELEMENTS_CLASS.LINE_SEGMENT,
+      connections: []
+    });
+  }
+
+  static drawKonvaLine(pointA, pointB) {
+    const line = LineSegmentDrawer.getKonvaLine(pointA, pointB);
+  }
+}

src/app/components/line-segment-component/models/line-segment-model.js

@@ -0,0 +1,10 @@
+import { GeometricObject } from "../../../core/models/objects/geometric-object";
+export class LineSegmentModel extends GeometricObject {
+  constructor(pointA, pointB, label) {
+    super();
+    this.pointA = pointA;
+    this.pointB = pointB;
+    this.setLabel(label);
+  }
+  update() {}
+}

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

@@ -4,6 +4,7 @@ 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 { stages as Stages } from "../../../core/application/stages";
 
 const HOVER_STYLE = {
   fill: "#9bc364",
@@ -24,56 +25,47 @@ export class PointDrawer extends Drawer {
     this.text;
     this.states = ["center"];
   }
-  setPoint(point, useLabel) {
-    this.point = point;
-    this.group = this._createGroup();
-    this.circle = this._getCircle(point);
-    this.label = Label.draw();
-    this.text = this._createText(point);
-    this.group.add(this.circle);
-    if (useLabel != undefined && useLabel) {
-      this.group.add(this.text);
-    }
-    this._configureCircleEvents(this.circle);
-  }
+
   draw() {
     if (this.state == undefined) {
       super.setState(this.states[0]);
       App.setStatus("Selecione o centro do Ponto");
-      return;
-    } else if (this.state == this.states[0]) {
-      let pos = App.pos();
-      this.point = new PointModel(pos.x, pos.y);
-      this.setPoint(this.point, true);
+    }
+    if (this.state == this.states[0]) {
+      App.setStatus("Selecione o centro do Ponto");
+      const pos = App.pos();
+      if (pos == undefined) return;
+      this.point = PointDrawer.drawAndGetPoint(pos.x, pos.y, true);
       super.addAggregator(new DrawerAggragator(this, this.point));
-      super.draw(this.group);
       super.setState(this.states[0]);
-      return this.group;
     }
   }
-  _createGroup() {
-    this.group = new Konva.Group({
-      draggable: true,
-      resizeEnabled: false
-    });
-    return this.group;
+
+  update() {}
+
+  static drawAndGetPoint(x, y, useLabel) {
+    return PointDrawer.drawPoint(new PointModel(x, y), useLabel);
   }
-  _createText(point) {
-    this.text = new Konva.Text({
-      x: point.posX + 10,
-      y: point.posY - 10,
-      text: this.label,
-      fontSize: 12,
-      fontFamily: "Calibri",
-      fill: "#434a45",
-      draggable: false,
-      resizeEnabled: false,
-      transformEnabled: false,
-      selectable: false
-    });
-    return this.text;
+  static drawPoint(point, useLabel) {
+    const group = Drawer.getKonvaGroup();
+    const circle = PointDrawer.getKonvaCircle(point);
+    group.add(circle);
+    if (useLabel != undefined && useLabel) {
+      const label = Label.draw();
+      point.setLabel(label);
+      const text = PointDrawer.getKonvaText(point, label);
+      group.add(text);
+    } else {
+      if (point.label != undefined) {
+        const text = PointDrawer.getKonvaText(point, point.label);
+        group.add(text);
+      }
+    }
+    PointDrawer.configureCircleEvents(circle);
+    Drawer.drawObject(group);
+    return point;
   }
-  _getCircle(point) {
+  static getKonvaCircle(point) {
     return new Konva.Circle({
       x: point.posX,
       y: point.posY,
@@ -91,17 +83,30 @@ export class PointDrawer extends Drawer {
       listening: true
     });
   }
-  _configureCircleEvents(circle) {
+  static getKonvaText(point, label) {
+    return new Konva.Text({
+      x: point.posX + 10,
+      y: point.posY - 10,
+      text: label,
+      fontSize: 12,
+      fontFamily: "Calibri",
+      fill: "#434a45",
+      draggable: false,
+      resizeEnabled: false,
+      transformEnabled: false,
+      selectable: false
+    });
+  }
+  static configureCircleEvents(circle) {
     circle.on("mouseover", function() {
       this.strokeWidth(HOVER_STYLE.strokeWidth);
       this.stroke(HOVER_STYLE.stroke);
-      App.stage.draw();
+      Stages.getCurrentKonvaStage().draw();
     });
     circle.on("mouseout", function() {
       this.strokeWidth(STYLE.strokeWidth);
       this.stroke(STYLE.stroke);
-      App.stage.draw();
+      Stages.getCurrentKonvaStage().draw();
     });
   }
-  update() {}
 }

src/app/core/application/selector.js

@@ -10,7 +10,7 @@ export class Selector {
     this._selectorPosStart;
     this._selectorPosNow;
     this._mode = "";
-    this._stage = Stages.getCurrentStage();
+    this._stage = Stages.getCurrentKonvaStage();
     this._layer = Stages.getCurrentLayer();
     this._selectorRect = new Konva.Rect({
       x: 0,

src/app/core/application/stages.js

@@ -1,83 +1,85 @@
-export const 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({
+import { Stage } from "../drawers/stage";
+class Stages {
+  constructor() {
+    this._width = this._getWidth();
+    this._height = this._getHeigth();
+    this._files = [];
+    this.stages = [];
+    this._stage;
+    this._bootstrap();
+  }
+  getCurrentStage() {
+    return this._stage;
+  }
+  getCurrentKonvaStage() {
+    return this._stage.konvaStage;
+  }
+  getCurrentLayer() {
+    return this._stage.getCurrentKonvaLayer();
+  }
+  create() {
+    var id = this._files.length;
+    this._makeTemplate(id);
+    this._setStage(new Stage());
+    const stage = new Konva.Stage({
       container: `container-${id}`,
-      width: _width,
-      height: _height
+      width: this._width,
+      height: this._height
     });
-    _setStage(_stage);
-    _files.push(_stage);
-    _createLayer();
-    return _stage;
+    this._stage.setKonvaStage(stage);
+    this._files.push(this._stage);
+    this._createLayer();
+    return this._stage;
   }
-
-  function _getStage() {
-    return _stage;
+  getFiles() {
+    return this._files;
+  }
+  _getStage() {
+    return this._stage;
   }
 
-  function _setStage(stage) {
-    _stage = stage;
+  _setStage(stage) {
+    this._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;
+  _createLayer() {
+    const stage = this.getCurrentStage();
+    if (stage != undefined) return stage.createLayer();
   }
 
-  function _getFiles() {
+  _getFiles() {
     return _files;
   }
 
-  function _getWidth() {
+  _getWidth() {
     return $("#content").width();
   }
 
-  function _getHeigth() {
+  _getHeigth() {
     return (
       $("#sidebar").height() - $("#header").height() - $("#files").height() - 2
     );
   }
 
-  function _evenNewDocument() {
-    _createStage();
+  _evenNewDocument() {
+    this.create();
   }
 
-  function _getCurrentLayer() {
+  _getCurrentLayer() {
     return _layer.layer;
   }
 
-  function _getCurrentLayerWithSequence() {
+  _getCurrentLayerWithSequence() {
     return _layer;
   }
 
-  function _bootstrap() {
+  _bootstrap() {
     $("#files").empty();
-    $("body").on("click", "#new-document", _evenNewDocument);
-    _createStage();
+    $("body").on("click", "#new-document", this._evenNewDocument.bind(this));
+    this.create();
   }
 
-  function _makeTemplate(id) {
+  _makeTemplate(id) {
     $(".stage").each(function() {
       $(this).addClass("hidden");
     });
@@ -89,12 +91,6 @@ export const stages = (function() {
       `<li class="file active"><button>New Document ${id + 1}</button></li>`
     );
   }
+}
 
-  _bootstrap();
-  return {
-    create: _createStage,
-    getFiles: _getFiles,
-    getCurrentStage: _getStage,
-    getCurrentLayer: _getCurrentLayer
-  };
-})();
+export const stages = new Stages();

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

@@ -1,21 +1,23 @@
-import { Stage } from "../drawers/stage";
+import { stages as Stages } from "../application/stages";
 
 class DrawerManager {
   constructor() {
-    this.currentStage = this.newStage();
-    this.stages = [this.currentStage];
+    this.currentStage = this._getCurrentStage();
   }
-  newStage() {
-    const stage = new Stage();
-    stage.newStage();
-    return stage;
+  _getCurrentStage() {
+    return Stages.getCurrentStage();
+  }
+  _getCurrentKonvaStage() {
+    return Stages.getCurrentKonvaStage();
   }
   getStages() {
-    this.stages;
+    return Stages.getStages();
   }
   draw(object) {
     this.currentStage.draw(object);
   }
-  addAggregator(aggregator) {}
+  addAggregator(aggregator) {
+    this.currentStage.addAggregator(aggregator);
+  }
 }
 export const drawerManager = new DrawerManager();

src/app/core/drawers/drawer.js

@@ -1,5 +1,6 @@
 import { drawerManager as DrawerManager } from "./drawer-manager";
 import { app as App } from "../../app";
+
 export class Drawer {
   constructor() {
     this.component;
@@ -24,12 +25,22 @@ export class Drawer {
     this.setStatus("");
   }
   addAggregator(aggregator) {
-    this.drawerManager.addAggregator(aggregator);
+    DrawerManager.addAggregator(aggregator);
   }
   draw(object) {
-    this.drawerManager.draw(object);
+    Drawer.drawObject(object);
   }
   update() {
     throw "Not implemented exception";
   }
+  static drawObject(object) {
+    DrawerManager.draw(object);
+  }
+  static getKonvaGroup() {
+    const group = new Konva.Group({
+      draggable: true,
+      resizeEnabled: false
+    });
+    return group;
+  }
 }

src/app/core/drawers/layer.js

@@ -0,0 +1,9 @@
+export class Layer {
+  constructor(sequence, konvaLayer) {
+    this.sequence = sequence;
+    this.konvaLayer = konvaLayer;
+  }
+  getKonvaLayer() {
+    return this.konvaLayer;
+  }
+}

src/app/core/drawers/stage.js

@@ -1,33 +1,83 @@
-import { stages as Stages } from "../application/stages";
 import { app as App } from "../../app";
+import { Layer } from "../drawers/layer";
+import { APP_STATE } from "../enums/app-state-enum";
 export class Stage {
   constructor() {
-    this.konvaLayer;
-    this.konvaStage;
+    this.layers = [];
     this.aggregators = [];
+    this.layer;
+    this.konvaStage;
     this._bootstrap();
   }
   addAggregator(aggregator) {
     this.aggregators.push(aggregator);
   }
-  setStage(stage) {
+  setKonvaStage(stage) {
     this.konvaStage = stage;
+    this.configureStageEvents(this.konvaStage);
   }
-  newStage() {
-    this.konvaStage = Stages.getCurrentStage();
-    this.konvaLayer = Stages.getCurrentLayer();
-    return this.konvaStage;
+  createLayer() {
+    let sequence = 0;
+    if (this.layers == null || this.layers.length == 0) {
+      sequence++;
+    } else {
+      sequence = this.layers.length + 1;
+    }
+    const layer = new Layer(sequence, new Konva.Layer());
+    this.layers.push(layer);
+    if (this.getCurrentLayer() == undefined && this.layers.length == 0) {
+      this.layers = [];
+      this.layers.push(layer);
+    }
+    this.layer = layer;
+    this.konvaStage.add(this.layer.konvaLayer);
+    return layer;
+  }
+  getCurrentLayer() {
+    return this.layer;
+  }
+  getCurrentKonvaLayer() {
+    return this.layer.getKonvaLayer();
   }
   draw(object) {
     if (object == undefined) this.konvaStage.draw();
     else {
-      this.konvaLayer.add(object);
-      this.konvaStage.draw(this.konvaLayer);
-      //todo: remove this from Drawer delegate to Stages
+      var layer = this.layer.getKonvaLayer();
+      layer.add(object);
+      this.konvaStage.draw(layer);
       App.pushObject(object);
     }
   }
-  _bootstrap() {
-    this.newStage();
+  _setState(state) {
+    App.setState(state);
+  }
+  configureStageEvents(stage) {
+    stage.on("mousedown ", this._mouseDown.bind(this));
+    stage.on("click tap", this._clickTap.bind(this));
+  }
+
+  _mouseDown(e) {
+    if (e.target === this.konvaStage) {
+      this._setState(APP_STATE.NONE);
+      return;
+    }
+    if (e.target.id != undefined) {
+      this._setState(APP_STATE.OBJECT_SELECTED);
+      return;
+    }
+  }
+
+  _clickTap(e) {
+    const tool = App.getSelectedTool();
+    if (tool != undefined) {
+      tool.draw.bind(tool)();
+      return;
+    }
+    if (e.target === this.konvaStage) {
+      this._setState(APP_STATE.NONE);
+      return;
+    }
   }
+
+  _bootstrap() {}
 }

src/app/core/models/components/component.js

@@ -6,6 +6,7 @@ export class Component {
     // this.genericObject;
     this.states;
     this.drawer;
+    this.state;
     this.setDrawer(drawer);
     this._bootstrap();
   }
@@ -20,6 +21,7 @@ export class Component {
     this.drawer.draw();
   }
   click() {
+    this.state = undefined;
     App.setSelectedTool(this);
     this.draw();
   }