Merge branch 'feature/points' into develop

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,105 +2,115 @@ 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";
-export const selector = (function() {
-  let _objects = [];
-  let _selectorPosStart;
-  let _selectorPosNow;
-  let _mode = "";
-  let _selectorRect = new Konva.Rect({
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
-    stroke: "#33BCFF",
-    dash: [2, 2]
-  });
+import { ELEMENTS_CLASS } from "../enums/elements-class-enum";
+export class Selector {
+  constructor() {
+    this._objects = [];
+    this._selectorPosStart;
+    this._selectorPosNow;
+    this._mode = "";
+    this._stage = Stages.getCurrentStage();
+    this._layer = Stages.getCurrentLayer();
+    this._selectorRect = new Konva.Rect({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      stroke: "#33BCFF",
+      dash: [2, 2]
+    });
+  }
 
-  let _stage = Stages.getCurrentStage();
-  let _layer = Stages.getCurrentLayer();
+  bootstrap() {
+    this.configureSelectorEvents();
+    this.addToLayer();
+  }
 
-  function _bootstrap() {
-    _configureSelectorEvents();
-    _addToLayer();
+  addToLayer() {
+    this._selectorRect.listening(false);
+    this._layer.add(this._selectorRect);
   }
 
-  function _addToLayer() {
-    _selectorRect.listening(false);
-    _layer.add(_selectorRect);
+  getSelectedObjects() {
+    return this._objects;
   }
 
-  function _getSelectedObjects() {
-    return _objects;
+  getPoints() {
+    return this._objects.filter(
+      x => x.attrs.class != undefined && x.attrs.class == ELEMENTS_CLASS.POINT
+    );
   }
 
-  function _configureSelectorEvents() {
-    _stage.on("mousedown", function(e) {
-      _mode = "drawing";
-      _startDragSelector({ x: e.evt.layerX, y: e.evt.layerY });
+  startDragSelector(posIn) {
+    this._selectorPosStart = { x: posIn.x, y: posIn.y };
+    this._selectorPosNow = { x: posIn.x, y: posIn.y };
+  }
+
+  configureSelectorEvents() {
+    var _this = this;
+    this._stage.on("mousedown", function(e) {
+      _this._mode = "drawing";
+      _this.startDragSelector({ x: e.evt.layerX, y: e.evt.layerY });
     });
 
-    _stage.on("mousemove", function(e) {
-      if (_mode === "drawing") {
-        _updateDragSelector({ x: e.evt.layerX, y: e.evt.layerY });
+    this._stage.on("mousemove", function(e) {
+      if (_this._mode === "drawing") {
+        _this.updateDragSelector({ x: e.evt.layerX, y: e.evt.layerY });
       }
     });
-
-    _stage.on("mouseup", function(e) {
-      _mode = "";
-      _selectorRect.visible(false);
-      _stage.draw();
+    this._stage.on("mouseup", function(e) {
+      _this._mode = "";
+      _this._selectorRect.visible(false);
+      _this._stage.draw();
     });
   }
 
-  function _startDragSelector(posIn) {
-    _selectorPosStart = { x: posIn.x, y: posIn.y };
-    _selectorPosNow = { x: posIn.x, y: posIn.y };
-  }
-
-  function _updateDragSelector(posIn) {
+  updateDragSelector(posIn) {
     if (State.getCurrentState() != APP_STATE.NONE) return;
     let currentObjects = Objects.get();
-    let posRect = _reverse(_selectorPosStart, _selectorPosNow);
-    _selectorPosNow = { x: posIn.x, y: posIn.y };
-    _selectorRect.x(posRect.x1);
-    _selectorRect.y(posRect.y1);
-    _selectorRect.width(posRect.x2 - posRect.x1);
-    _selectorRect.height(posRect.y2 - posRect.y1);
-    _selectorRect.visible(true);
-
+    let posRect = this.reverse(this._selectorPosStart, this._selectorPosNow);
+    this._selectorPosNow = { x: posIn.x, y: posIn.y };
+    this._selectorRect.x(posRect.x1);
+    this._selectorRect.y(posRect.y1);
+    this._selectorRect.width(posRect.x2 - posRect.x1);
+    this._selectorRect.height(posRect.y2 - posRect.y1);
+    this._selectorRect.visible(true);
     for (let i = 0; i < currentObjects.length; i = i + 1) {
       let object = currentObjects[i];
       if (object.children != undefined && object.children.length > 0) {
         for (let j = 0; j < object.children.length; j++) {
-          _style(object.children[j], _selectorRect);
+          this.style(object.children[j], this._selectorRect);
         }
       } else {
-        _style(object, _selectorRect);
+        this.style(object, this._selectorRect);
       }
     }
-    _stage.draw();
+    this._stage.draw();
   }
 
-  function _style(object, selectorRect) {
+  style(object, selectorRect) {
     if (object.attrs.selectable != undefined) {
       if (object.attrs.selectable == false) {
         return;
       }
     }
-    if (_hitCheck(object, selectorRect)) {
+    if (this.hitCheck(object, selectorRect)) {
       object.stroke("#33BCFF");
       object.fill("#33BCFF");
+      this.setObject(object);
     } else {
       if (object.attrs.style != undefined) {
+        this.removeObject(object);
         object.stroke(object.attrs.style.stroke);
         object.fill(object.attrs.style.fill);
       } else {
+        this.removeObject(object);
         object.stroke("black");
       }
     }
   }
 
-  function _hitCheck(shape1, shape2) {
+  hitCheck(shape1, shape2) {
     let s1 = shape1.getClientRect();
     let s2 = shape2.getClientRect();
     let X = s1.x;
@@ -119,7 +129,17 @@ export const selector = (function() {
     }
   }
 
-  function _reverse(r1, r2) {
+  setObject(object) {
+    if (this._objects.includes(object)) return;
+    this._objects.push(object);
+  }
+
+  removeObject(object) {
+    if (this._objects.length == 0) return;
+    this._objects.splice(this._objects.indexOf(object), 1);
+  }
+
+  reverse(r1, r2) {
     let r1x = r1.x,
       r1y = r1.y,
       r2x = r2.x,
@@ -137,9 +157,6 @@ export const selector = (function() {
     }
     return { x1: r1x, y1: r1y, x2: r2x, y2: r2y };
   }
+}
 
-  return {
-    selctedObjects: _getSelectedObjects(),
-    bootstrap: _bootstrap
-  };
-})();
+export const selector = new Selector();

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

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