Implement LineSegment and Point dependency

Change Line.js to LineSegment.js since the geometry being presented is not an actual line

Change the draw methods inside Line and LineSegment to return the Konva object

Change LineSegment _points structure to a Set instead of an array and its states to static values

src/app/components/line-segment.js

@@ -0,0 +1,198 @@
+import { app as App } from "../app";
+import { menu as Menu } from "../core/components/menu";
+import { point as Point } from "./point";
+import { selector as Selector } from "../core/components/selector";
+import { ELEMENTS_CLASS } from "../core/enums/elements-class-enum";
+export class LineSegment {
+
+  static get STATE_PRIMEIRO_PONTO () {
+    return "primeiro_ponto";
+  }
+  static get STATE_SEGUNDO_PONTO () {
+    return "segundo_ponto";
+  }
+  
+  constructor() {
+    this._state = undefined;
+    this._points = new Set();
+    this._tool = {
+      id: "line-segment",
+      title: "Reta",
+      icon: "line-segment",
+      click: this.click,
+      draw: this.draw,
+      points: this.points,
+      object: this
+    };
+    this.bootstrap();
+  }
+
+  draw (event) {
+    console.log("chamou o método draw()");
+    console.log("evento: ", event);
+    let _this = this;
+    if(event != null) {
+      _this = event;
+    }
+    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;
+    }
+    // let _this = e;
+    // if (e == undefined) {
+    //   _this = this;
+    // }
+    // if (_this._state == undefined) {
+    //   _this._state = _this._states[0];
+    //   App.setStatus("Selecione o primeiro ponto no canvas");
+    // } else if (_this._state == _this._states[0]) {
+    //   let pos = App.pos();
+    //   _this._points[0] = pos.x;
+    //   _this._points[1] = pos.y;
+    //   _this._state = _this._states[1];
+    //   App.setStatus("Selecione o segundo ponto no canvas");
+    // } else if (_this._state == _this._states[1]) {
+    //   let pos = App.pos();
+    //   _this._points[2] = pos.x;
+    //   _this._points[3] = pos.y;
+    //   let p = _this._points.slice();
+    //   _this.drawPoint(p);
+    // }
+  }
+
+  click(e) {
+    console.log("chamou o método click()");
+    let _this = e;
+    if (e == undefined) {
+      _this = this;
+    }
+    if (_this._state == LineSegment.STATE_PRIMEIRO_PONTO ||
+      _this._state == LineSegment.STATE_SEGUNDO_PONTO) {
+      App.clearSelectedTool();
+      _this.clearState();
+      return;
+    }
+    let objects = Selector.getPoints();
+    if (
+      _this._state == undefined &&
+      objects != undefined &&
+      objects.length > 0
+    ) {
+      let layer = App.currentLayer();
+      let p = [];
+      let ln = _this.createLine(p);
+      objects.forEach(object => {
+        object.attrs.connections.push(ln);
+        p.push(object.x());
+        p.push(object.y());
+        object.parent.on("dragmove", () => {
+          let p = [];
+          p.push(object.x());
+          p.push(object.y());
+          //object.attrs.connections[0].points(p.slice());
+          layer.batchDraw();
+        });
+        ln.points(p.slice());
+        layer.batchDraw();
+      });
+
+      _this.drawPoint(p);
+      App.clearSelectedTool();
+      _this.clearState();
+      return;
+    }
+    App.setSelectedTool(_this._tool);
+    _this._state = LineSegment.STATE_PRIMEIRO_PONTO;
+    App.setStatus("Selecione o primeiro ponto no canvas");
+  }
+
+  clearState() {
+    this._state = undefined;
+    this._points.clear();
+  }
+
+  drawPoint (p) {
+    const points = Array.from(p).map(xy => {
+      return Point.drawPoint(xy.x, xy.y, true);
+    });
+    const points_xy = points.map( group => this.getPoint(group))
+      .reduce((prev, next) => prev.concat([next.x(), next.y()]), []);
+    let ln = this.createLine(points_xy);
+    let layer = App.currentLayer();
+    this.attachPoints(ln, points);
+    layer.add(ln);
+    App.stage.draw();
+    
+    //this.clearState();
+    //App.clearSelectedTool();
+    //App.setStatus("");
+    return ln;
+  }
+
+  createLine (points) {
+    return new Konva.Line({
+      points: points,
+      stroke: "grey",
+      strokeWidth: 2,
+      lineJoin: "round",
+      draggable: false,
+      strokeScaleEnabled: false,
+      class: ELEMENTS_CLASS.LINE_SEGMENT,
+      connections: []
+    });
+  }
+
+  getPoint (group) {
+    const point_collection = group.find(node => {
+      return node.getClassName() === 'Circle';
+    });
+    return point_collection.toArray()[0];
+  }
+
+  attachPoints (line, points) {
+    line._parents = []
+    points.forEach( (p, idx)=> {
+      line._parents.push(p);
+      const point = this.getPoint(p);
+      point._name = idx;
+      if(!p._parents) {
+        p._children = [];
+      }
+      p._children.push(line);
+      p.on('dragmove', () => {
+        App.clearSelectedTool();
+        this.clearState();
+        const current_points = line.points();
+        const new_point = this.getPoint(p);
+        const new_x = new_point.x() + p.x();
+        const new_y = new_point.y() + p.y();
+        if(new_point._name == 0) {
+          // pos 0 ,1
+          current_points[0] = new_x;
+          current_points[1] = new_y;
+        } else {
+          current_points[2] = new_x;
+          current_points[3] = new_y;
+        }
+        line.points(current_points);
+        //App.stage.draw();
+      });
+    })
+  }
+
+  bootstrap() {
+    Menu.add(this._tool);
+  }
+}
+export const line_segment = new LineSegment();

src/app/components/line.js

@@ -1,125 +0,0 @@
-import { app as App } from "../app";
-import { menu as Menu } from "../core/components/menu";
-import { selector as Selector } from "../core/components/selector";
-import { ELEMENTS_CLASS } from "../core/enums/elements-class-enum";
-export class Line {
-  constructor() {
-    this._states = ["primeiro_ponto", "segundo_ponto"];
-    this._state = undefined;
-    this._points = [0, 0, 0, 0];
-    this._tool = {
-      id: "line",
-      title: "Reta",
-      icon: "line",
-      click: this.click,
-      draw: this.draw,
-      points: this.points,
-      object: this
-    };
-    this.bootstrap();
-  }
-
-  draw(e) {
-    let _this = e;
-    if (e == undefined) {
-      _this = this;
-    }
-    if (_this._state == undefined) {
-      _this._state = _this._states[0];
-      App.setStatus("Selecione o primeiro ponto no canvas");
-    } else if (_this._state == _this._states[0]) {
-      let pos = App.pos();
-      _this._points[0] = pos.x;
-      _this._points[1] = pos.y;
-      _this._state = _this._states[1];
-      App.setStatus("Selecione o segundo ponto no canvas");
-    } else if (_this._state == _this._states[1]) {
-      let pos = App.pos();
-      _this._points[2] = pos.x;
-      _this._points[3] = pos.y;
-      let p = _this._points.slice();
-      _this.drawPoint(p);
-    }
-  }
-
-  click(e) {
-    let _this = e;
-    if (e == undefined) {
-      _this = this;
-    }
-    if (_this._state == _this._states[0] || _this._state == _this._states[1]) {
-      App.clearSelectedTool();
-      _this.clearState();
-      return;
-    }
-    let objects = Selector.getPoints();
-    if (
-      _this._state == undefined &&
-      objects != undefined &&
-      objects.length > 0
-    ) {
-      let layer = App.currentLayer();
-      let p = [];
-      let ln = _this.createLine(p);
-      objects.forEach(object => {
-        object.attrs.connections.push(ln);
-        p.push(object.x());
-        p.push(object.y());
-        object.parent.on("dragmove", () => {
-          let p = [];
-          let objects = Selector.getPoints();
-          objects.forEach(object => {
-            p.push(object.x());
-            p.push(object.y());
-          });
-          object.attrs.connections[0].points(p.slice());
-          layer.batchDraw();
-        });
-        ln.points(p.slice());
-        layer.batchDraw();
-      });
-
-      _this.drawPoint(p);
-      App.clearSelectedTool();
-      _this.clearState();
-      return;
-    }
-    App.setSelectedTool(_this._tool);
-    _this._state = _this._states[0];
-    App.setStatus("Selecione o primeiro ponto no canvas");
-  }
-
-  clearState() {
-    this._state = undefined;
-  }
-
-  drawPoint(p) {
-    let ln = this.createLine(p);
-
-    let layer = App.currentLayer();
-    layer.add(ln);
-    App.stage.draw();
-
-    this.clearState();
-    App.clearSelectedTool();
-    App.setStatus("");
-  }
-
-  createLine(p) {
-    return new Konva.Line({
-      points: p,
-      stroke: "grey",
-      strokeWidth: 2,
-      lineJoin: "round",
-      draggable: true,
-      strokeScaleEnabled: false,
-      class: ELEMENTS_CLASS.LINE,
-      connections: []
-    });
-  }
-
-  bootstrap() {
-    Menu.add(this._tool);
-  }
-}
-export const line = new Line();

src/app/components/point.js

@@ -19,10 +19,13 @@ export const point = (function() {
       App.setStatus("Selecione o centro do Ponto");
     } else if (state == states[0]) {
       let pos = App.pos();
-      points[0] = pos.x;
-      points[1] = pos.y;
-      let p = points.slice();
-      let po = _drawPoint(p[0], p[1], true);
+      this.points[0] = pos.x;
+      this.points[1] = pos.y;
+      let p = this.points.slice();
+      this._drawPoint(p[0], p[1], true);
+      this._clearState();
+      App.clearSelectedTool();
+      App.setStatus("");
     }
   }
 
@@ -73,9 +76,7 @@ export const point = (function() {
 
     App.pushObject(group);
 
-    _clearState();
-    App.clearSelectedTool();
-    App.setStatus("");
+   return group;
   }
 
   function _click(e) {
@@ -106,6 +107,7 @@ export const point = (function() {
 
   return {
     draw: _draw,
-    click: _click
+    click: _click,
+    drawPoint: _drawPoint
   };
 })();

src/app/core/enums/elements-class-enum.js

@@ -1,4 +1,4 @@
 export const ELEMENTS_CLASS = {
   POINT: 0,
-  LINE: 1
+  LINE_SEGMENT: 1
 };

src/css/icons.css

@@ -2,8 +2,8 @@
   background: center no-repeat;
 }
 
-.icon-line {
-  background-image: url("../assets/images/icons/Line.png");
+.icon-line-segment {
+  background-image: url("../assets/images/icons/Line_Segment.png");
 }
 
 .icon-circumference {