implementation of straight line construction through points

src/app/app.js

@@ -36,7 +36,7 @@ export const app = (function() {
     _stage.on("click tap", function(e) {
       let tool = _getSelectedTool();
       if (tool != undefined) {
-        tool.draw();
+        tool.draw(tool.object);
         return;
       }
       if (e.target === _stage) {

src/app/components/line.js

@@ -1,77 +1,125 @@
 import { app as App } from "../app";
 import { menu as Menu } from "../core/components/menu";
-export const line = (function() {
-  let _tool = {};
-  let _states = ["primeiro_ponto", "segundo_ponto"];
-  let _state = undefined;
-  let _points = [0, 0, 0, 0];
+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();
+  }
 
-  function _draw() {
-    if (_state == undefined) {
-      _state = _states[0];
+  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 (_state == _states[0]) {
+    } else if (_this._state == _this._states[0]) {
       let pos = App.pos();
-      _points[0] = pos.x;
-      _points[1] = pos.y;
-      _state = _states[1];
+      _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 (_state == _states[1]) {
+    } else if (_this._state == _this._states[1]) {
       let pos = App.pos();
-      _points[2] = pos.x;
-      _points[3] = pos.y;
-      let p = _points.slice();
-      let ln = new Konva.Line({
-        points: p,
-        stroke: "grey",
-        strokeWidth: 2,
-        lineJoin: "round",
-        draggable: true,
-        strokeScaleEnabled: false
-      });
-
-      let layer = App.currentLayer();
-      layer.add(ln);
-      App.stage.draw();
-
-      _clearState();
-      App.clearSelectedTool();
-      App.setStatus("");
+      _this._points[2] = pos.x;
+      _this._points[3] = pos.y;
+      let p = _this._points.slice();
+      _this.drawPoint(p);
     }
   }
 
-  function _bootstrap() {
-    Menu.add(_tool);
-  }
+  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();
+      });
 
-  function _click() {
-    if (_state == _states[0] || _state == _states[1]) {
+      _this.drawPoint(p);
       App.clearSelectedTool();
-      _clearState();
+      _this.clearState();
       return;
     }
-    App.setSelectedTool(_tool);
-    _state = _states[0];
+    App.setSelectedTool(_this._tool);
+    _this._state = _this._states[0];
     App.setStatus("Selecione o primeiro ponto no canvas");
   }
 
-  function _clearState() {
-    _state = undefined;
+  clearState() {
+    this._state = undefined;
   }
 
-  _tool = {
-    id: "line",
-    title: "Reta",
-    icon: "line",
-    click: _click,
-    draw: _draw,
-    points: _points
-  };
+  drawPoint(p) {
+    let ln = this.createLine(p);
 
-  _bootstrap();
+    let layer = App.currentLayer();
+    layer.add(ln);
+    App.stage.draw();
 
-  return {
-    draw: _draw,
-    click: _click
-  };
-})();
+    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

@@ -1,6 +1,7 @@
 import { app as App } from "../app";
 import { label as Label } from "../components/label";
 import { menu as Menu } from "../core/components/menu";
+import { ELEMENTS_CLASS } from "../core/enums/elements-class-enum";
 export const point = (function() {
   let style = {
     fill: "#9bc364",
@@ -12,7 +13,7 @@ export const point = (function() {
   let state = undefined;
   let points = [0, 0];
 
-  function _draw() {
+  function _draw(e) {
     if (state == undefined) {
       state = states[0];
       App.setStatus("Selecione o centro do Ponto");
@@ -45,7 +46,9 @@ export const point = (function() {
       draggable: false,
       resizeEnabled: false,
       transformEnabled: false,
-      style: style
+      style: style,
+      class: ELEMENTS_CLASS.POINT,
+      connections: []
     });
     let text = new Konva.Text({
       x: x + 10,
@@ -75,7 +78,7 @@ export const point = (function() {
     App.setStatus("");
   }
 
-  function _click(id) {
+  function _click(e) {
     if (state == states[0]) {
       App.clearSelectedTool();
       _clearState();

src/app/core/components/menu.js

@@ -12,7 +12,9 @@ class Menu {
       id="btn-${tool.id}"
       class="tool icon icon-${tool.id}">
       <span> ${tool.title} </span></button>`);
-      $("body").on("click", `#btn-${tool.id}`, tool.click);
+      $("body").on("click", `#btn-${tool.id}`, () => {
+        tool.click(tool.object);
+      });
     });
   }
 }

src/app/core/components/selector.js

@@ -2,7 +2,8 @@ import { APP_STATE } from "../enums/app-state-enum";
 import { stages as Stages } from "../components/stages";
 import { state as State } from "../components/state";
 import { objects as Objects } from "../components/objects";
-class Selector {
+import { ELEMENTS_CLASS } from "../enums/elements-class-enum";
+export class Selector {
   constructor() {
     this._objects = [];
     this._selectorPosStart;
@@ -34,6 +35,12 @@ class Selector {
     return this._objects;
   }
 
+  getPoints() {
+    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 };

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

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