create line by states

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

@@ -4,23 +4,28 @@ import { label as Label } from "../../../component-registry/label";
 import { DrawerAggregator } from "../../../core/drawers/drawer-aggregator";
 import { selector as Selector } from "../../../core/application/selector";
 import { LineSegmentModel } from "../models/line-segment-model";
+import { PointDrawer } from "../../point-component/drawers/point-drawer";
+import { objects as Objects } from "../../../core/application/objects";
 export class LineSegmentDrawer extends Drawer {
-  static FIRST_POINT() {
+  static FIRST_POINT_STATE() {
     return "FIRST_POINT";
   }
-  static SECOND_POINT() {
+  static SECOND_POINT_STATE() {
     return "SECOND_POINT";
   }
   constructor() {
     super();
     this.pointA;
     this.pointB;
+    this.aggregatorA;
+    this.aggregatorB;
     this.label;
     this.states = [
-      LineSegmentDrawer.FIRST_POINT,
-      LineSegmentDrawer.SECOND_POINT
+      LineSegmentDrawer.FIRST_POINT_STATE,
+      LineSegmentDrawer.SECOND_POINT_STATE
     ];
     this.lineSegment;
+    this.pointDrawer = new PointDrawer();
   }
   setPointA(point) {
     this.pointA = point;
@@ -28,12 +33,54 @@ export class LineSegmentDrawer extends Drawer {
   setPointB(point) {
     this.pointB = point;
   }
+  setAggregatorA(aggregator) {
+    this.aggregatorA = aggregator;
+    this.setPointA(aggregator.genericObject);
+  }
+  setAggregatorB(aggregator) {
+    this.aggregatorB = aggregator;
+    this.setPointB(aggregator.genericObject);
+  }
   draw() {
+    console.info("objects", Objects.get());
     const points = Selector.getSelectedPoints();
-    const aggregators = Selector.getSelectedPointsAggregators();
+    if (points == undefined || points.length < 1) {
+      this.drawByState();
+    }
+    this.drawByPoints(points);
+  }
+  drawByState() {
+    if (this.state == undefined) {
+      super.setState(LineSegmentDrawer.FIRST_POINT_STATE);
+    } else if (this.state == LineSegmentDrawer.FIRST_POINT_STATE) {
+      const aggregator = this.pointDrawer.drawPoint();
+      this.setAggregatorA(aggregator);
+      super.setState(LineSegmentDrawer.SECOND_POINT_STATE);
+    } else if (this.state == LineSegmentDrawer.SECOND_POINT_STATE) {
+      const aggregator = this.pointDrawer.drawPoint();
+      this.setAggregatorB(aggregator);
+      this.drawByPoints(
+        [this.pointA, this.pointB],
+        [this.aggregatorA, this.aggregatorB]
+      );
+      super.setState(undefined);
+    } else {
+      super.setState(undefined);
+    }
+  }
+  drawByPoints(points, aggregators) {
     if (points == undefined || points.length < 1) return;
     this.setPointA(points[0]);
     this.setPointB(points[1]);
+    if (aggregators == undefined)
+      aggregators = Selector.getSelectedPointsAggregators();
+    else {
+      aggregators = [
+        Objects.getByGenericObject(this.pointA)[0],
+        Objects.getByGenericObject(this.pointB)[0]
+      ];
+    }
+
     this.label = Label.draw();
     this.lineSegment = new LineSegmentModel(
       this.pointA,
@@ -73,7 +120,7 @@ export class LineSegmentDrawer extends Drawer {
 
   static getKonvaLine(pointA, pointB, useLabel) {
     const points = [pointA.posX, pointA.posY, pointB.posX, pointB.posY];
-    const line = new Konva.Line({
+    return new Konva.Line({
       points: points,
       stroke: "grey",
       strokeWidth: 2,
@@ -82,9 +129,10 @@ export class LineSegmentDrawer extends Drawer {
       strokeScaleEnabled: false,
       class: ELEMENTS_CLASS.LINE_SEGMENT,
       connections: [],
-      index: 0
+      index: 0,
+      selectable: false,
+      draggable: false
     });
-    return line;
   }
 
   static drawKonvaLine(pointA, pointB) {

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

@@ -32,22 +32,29 @@ export class PointDrawer extends Drawer {
     }
     if (this.state == this.states[0]) {
       App.setStatus("Selecione o centro do Ponto");
-      const pos = App.pos();
-      if (pos == undefined) return;
-      const drawResult = PointDrawer.drawAndGetPoint(pos.x, pos.y, true);
-      this.point = drawResult.geometricObject;
-      super.setKonvaObject(drawResult.konvaObject);
-      const aggregator = new DrawerAggregator(
-        this,
-        this.point,
-        this.konvaObject,
-        ELEMENTS_CLASS.POINT
-      );
-      super.addAggregator(aggregator);
-      this.konvaObject.on("dragmove", aggregator.update.bind(aggregator));
+      const aggregator = this.drawPoint();
       super.setState(this.states[0]);
+      return aggregator;
     }
   }
+
+  drawPoint() {
+    const pos = App.pos();
+    if (pos == undefined) return;
+    const drawResult = PointDrawer.drawAndGetPoint(pos.x, pos.y, true);
+    this.point = drawResult.geometricObject;
+    super.setKonvaObject(drawResult.konvaObject);
+    const aggregator = new DrawerAggregator(
+      this,
+      this.point,
+      this.konvaObject,
+      ELEMENTS_CLASS.POINT
+    );
+    super.addAggregator(aggregator);
+    this.konvaObject.on("dragmove", aggregator.update.bind(aggregator));
+    return aggregator;
+  }
+
   updatePositions(aggregator, event) {
     aggregator.konvaObject.children.forEach(function(element) {
       if (element.attrs.class == ELEMENTS_CLASS.POINT) {
@@ -59,6 +66,7 @@ export class PointDrawer extends Drawer {
   static drawAndGetPoint(x, y, useLabel) {
     return PointDrawer.drawPoint(new PointModel(x, y), useLabel);
   }
+
   static drawPoint(point, useLabel) {
     const group = Drawer.getKonvaGroup();
     const circle = PointDrawer.getKonvaCircle(point);
@@ -74,14 +82,16 @@ export class PointDrawer extends Drawer {
         group.add(text);
       }
     }
-    group.zIndex(1);
     group.add(circle);
     PointDrawer.configureCircleEvents(circle);
     Drawer.drawObject(group);
+    group.zIndex(1);
+    Drawer.stageBatchDraw();
     return { geometricObject: point, konvaObject: group };
   }
+
   static getKonvaCircle(point) {
-    const circle = new Konva.Circle({
+    return new Konva.Circle({
       x: point.posX,
       y: point.posY,
       radius: 5,
@@ -95,11 +105,8 @@ export class PointDrawer extends Drawer {
       style: STYLE,
       class: ELEMENTS_CLASS.POINT,
       connections: [],
-      listening: true,
-      index: 1
+      listening: true
     });
-    circle.zIndex(1);
-    return circle;
   }
   static getKonvaText(point, label) {
     return new Konva.Text({
@@ -115,6 +122,7 @@ export class PointDrawer extends Drawer {
       selectable: false
     });
   }
+
   static configureCircleEvents(circle) {
     circle.on("mouseover", function() {
       this.strokeWidth(HOVER_STYLE.strokeWidth);

src/app/components/point-component/models/point-model.js

@@ -7,6 +7,7 @@ export class PointModel extends GeometricObject {
     this.setLabel(label);
   }
   update(konvaObject, event) {
+    console.info(event.target.x());
     this.posX = event.evt.x;
     this.posY = event.evt.y - 70;
     konvaObject.x = this.posX;

src/app/core/application/objects.js

@@ -8,6 +8,9 @@ class Objects {
   get() {
     return StageManager.getCurrentLayer().getAggregators();
   }
+  getByGenericObject(genericObject) {
+    return this.get().filter(e => e.genericObject == genericObject);
+  }
   getSelectedObjects() {
     return StageManager.getCurrentLayer().getSelectedAggregators();
   }

src/app/core/drawers/drawer.js

@@ -12,6 +12,7 @@ export class Drawer {
   }
   onDragMove() {}
   setState(state) {
+    console.info(state);
     this.state = state;
   }
   clearState() {
@@ -32,7 +33,7 @@ export class Drawer {
     Drawer.drawObject(object);
   }
   batchDraw() {
-    DrawerManager.batchDraw();
+    Drawer.stageBatchDraw();
   }
   update(aggregator) {
     throw "Not implemented exception";
@@ -53,4 +54,7 @@ export class Drawer {
     });
     return group;
   }
+  static stageBatchDraw() {
+    DrawerManager.batchDraw();
+  }
 }

src/app/core/drawers/stage.js

@@ -45,10 +45,8 @@ export class Stage {
     if (object == undefined) this.konvaStage.draw();
     else {
       var layer = this.layer.getKonvaLayer();
-      console.info(this.layer.getKonvaGroup());
       this.layer.getKonvaGroup().add(object);
       this.konvaStage.draw(layer);
-      // App.pushObject(object);
     }
   }
   _setState(state) {