Merge branch 'feature/line_point_dependency' into develop

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

@@ -2,6 +2,13 @@ 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";
+
+const HOVER_STYLE = {
+  fill: "#9bc364",
+  strokeWidth: 2,
+  stroke: "#FF0000"
+};
+
 export const point = (function() {
   let style = {
     fill: "#9bc364",
@@ -19,10 +26,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("");
     }
   }
 
@@ -48,7 +58,19 @@ export const point = (function() {
       transformEnabled: false,
       style: style,
       class: ELEMENTS_CLASS.POINT,
-      connections: []
+      connections: [],
+      listening: true
+    });
+    // mouse over event
+    circle.on('mouseover', function () {
+      this.strokeWidth(HOVER_STYLE.strokeWidth);
+      this.stroke(HOVER_STYLE.stroke);
+      App.stage.draw();
+    });
+    circle.on('mouseout', function () {
+      this.strokeWidth(style.strokeWidth);
+      this.stroke(style.stroke);
+      App.stage.draw();
     });
     let text = new Konva.Text({
       x: x + 10,
@@ -73,9 +95,7 @@ export const point = (function() {
 
     App.pushObject(group);
 
-    _clearState();
-    App.clearSelectedTool();
-    App.setStatus("");
+   return group;
   }
 
   function _click(e) {
@@ -106,6 +126,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 {