draw line-segment

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

@@ -1,9 +1,9 @@
 import { Drawer } from "../../../core/drawers/drawer";
 import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
 import { label as Label } from "../../../component-registry/label";
-import { app as App } from "../../../app";
 import { DrawerAggregator } from "../../../core/drawers/drawer-aggregator";
 import { selector as Selector } from "../../../core/application/selector";
+import { LineSegmentModel } from "../models/line-segment-model";
 export class LineSegmentDrawer extends Drawer {
   static FIRST_POINT() {
     return "FIRST_POINT";
@@ -15,10 +15,12 @@ export class LineSegmentDrawer extends Drawer {
     super();
     this.pointA;
     this.pointB;
+    this.label;
     this.states = [
       LineSegmentDrawer.FIRST_POINT,
       LineSegmentDrawer.SECOND_POINT
     ];
+    this.lineSegment;
   }
   setPointA(point) {
     this.pointA = point;
@@ -27,32 +29,51 @@ export class LineSegmentDrawer extends Drawer {
     this.pointB = point;
   }
   draw() {
-    // 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;
-    // }
-    const points = Selector.getPoints();
-    console.info("points", points);
+    const points = Selector.getSelectedPoints();
+    const aggregators = Selector.getSelectedPointsAggregators();
     if (points == undefined || points.length < 1) return;
-    console.info("pointA", points[0]);
-    console.info("pointB", points[1]);
+    this.setPointA(points[0]);
+    this.setPointB(points[1]);
+    this.label = Label.draw();
+    this.lineSegment = new LineSegmentModel(
+      this.pointA,
+      this.pointB,
+      this.label
+    );
+    const konvaObject = LineSegmentDrawer.getKonvaLine(
+      this.pointA,
+      this.pointB
+    );
+    super.setKonvaObject(konvaObject);
+    const aggregator = new DrawerAggregator(
+      this,
+      this.lineSegment,
+      this.konvaObject,
+      ELEMENTS_CLASS.LINE_SEGMENT
+    );
+    super.addAggregator(aggregator);
+    aggregators[1].addAggregator(aggregator);
+    aggregators[0].addAggregator(aggregator);
+    Drawer.drawObject(this.konvaObject);
+    this.konvaObject.zIndex(0);
+    super.batchDraw();
   }
-  update() {}
 
-  static getKonvaLine(pointA, pointB) {
+  update(aggregator) {
+    const pointA = aggregator.genericObject.pointA;
+    const pointB = aggregator.genericObject.pointB;
+    aggregator.konvaObject.points([
+      pointA.posX,
+      pointA.posY,
+      pointB.posX,
+      pointB.posY
+    ]);
+    super.batchDraw();
+  }
+
+  static getKonvaLine(pointA, pointB, useLabel) {
     const points = [pointA.posX, pointA.posY, pointB.posX, pointB.posY];
-    return new Konva.Line({
+    const line = new Konva.Line({
       points: points,
       stroke: "grey",
       strokeWidth: 2,
@@ -60,8 +81,10 @@ export class LineSegmentDrawer extends Drawer {
       draggable: false,
       strokeScaleEnabled: false,
       class: ELEMENTS_CLASS.LINE_SEGMENT,
-      connections: []
+      connections: [],
+      index: 0
     });
+    return line;
   }
 
   static drawKonvaLine(pointA, pointB) {

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

@@ -37,14 +37,24 @@ export class PointDrawer extends Drawer {
       const drawResult = PointDrawer.drawAndGetPoint(pos.x, pos.y, true);
       this.point = drawResult.geometricObject;
       super.setKonvaObject(drawResult.konvaObject);
-      super.addAggregator(
-        new DrawerAggregator(this, this.point, this.konvaObject)
+      const aggregator = new DrawerAggregator(
+        this,
+        this.point,
+        this.konvaObject,
+        ELEMENTS_CLASS.POINT
       );
+      super.addAggregator(aggregator);
+      this.konvaObject.on("dragmove", aggregator.update.bind(aggregator));
       super.setState(this.states[0]);
     }
   }
-
-  update() {}
+  updatePositions(aggregator, event) {
+    aggregator.konvaObject.children.forEach(function(element) {
+      if (element.attrs.class == ELEMENTS_CLASS.POINT) {
+        aggregator.genericObject.update(element, event);
+      }
+    });
+  }
 
   static drawAndGetPoint(x, y, useLabel) {
     return PointDrawer.drawPoint(new PointModel(x, y), useLabel);
@@ -52,7 +62,7 @@ export class PointDrawer extends Drawer {
   static drawPoint(point, useLabel) {
     const group = Drawer.getKonvaGroup();
     const circle = PointDrawer.getKonvaCircle(point);
-    group.add(circle);
+
     if (useLabel != undefined && useLabel) {
       const label = Label.draw();
       point.setLabel(label);
@@ -64,12 +74,14 @@ export class PointDrawer extends Drawer {
         group.add(text);
       }
     }
+    group.zIndex(1);
+    group.add(circle);
     PointDrawer.configureCircleEvents(circle);
     Drawer.drawObject(group);
     return { geometricObject: point, konvaObject: group };
   }
   static getKonvaCircle(point) {
-    return new Konva.Circle({
+    const circle = new Konva.Circle({
       x: point.posX,
       y: point.posY,
       radius: 5,
@@ -83,8 +95,11 @@ export class PointDrawer extends Drawer {
       style: STYLE,
       class: ELEMENTS_CLASS.POINT,
       connections: [],
-      listening: true
+      listening: true,
+      index: 1
     });
+    circle.zIndex(1);
+    return circle;
   }
   static getKonvaText(point, label) {
     return new Konva.Text({

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

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

src/app/core/application/objects.js

@@ -8,5 +8,14 @@ class Objects {
   get() {
     return StageManager.getCurrentLayer().getAggregators();
   }
+  getSelectedObjects() {
+    return StageManager.getCurrentLayer().getSelectedAggregators();
+  }
+  setSelectedOject(aggregator) {
+    return StageManager.getCurrentLayer().setSelectedAggregator(aggregator);
+  }
+  removeSelectedOject(aggregator) {
+    return StageManager.getCurrentLayer().removeSelectedAggregator(aggregator);
+  }
 }
 export const objects = new Objects();

src/app/core/application/selector.js

@@ -6,7 +6,6 @@ import { ELEMENTS_CLASS } from "../enums/elements-class-enum";
 import { app as App } from "../../app";
 export class Selector {
   constructor() {
-    this._objects = [];
     this._selectorPosStart;
     this._selectorPosNow;
     this._mode = "";
@@ -32,20 +31,41 @@ export class Selector {
     Stages.getCurrentKonvaLayer().add(this._selectorRect);
   }
 
-  getSelectedObjects() {
-    return this._objects;
+  getSelectedAggregators() {
+    return Objects.getSelectedObjects();
   }
 
-  getPoints() {
-    return this._objects.filter(
+  getSelectedKonvaObjects() {
+    return this.getSelectedAggregators().map(function(aggregator) {
+      if (aggregator.konvaObject.children == undefined) {
+        return aggregator.konvaObject;
+      } else {
+        return aggregator.konvaObject.children.map(function(object) {
+          return object;
+        })[0];
+      }
+    });
+  }
+
+  getSelectedKonvaPoints() {
+    const objects = this.getSelectedKonvaObjects();
+    return objects.filter(
       x => x.attrs.class != undefined && x.attrs.class == ELEMENTS_CLASS.POINT
     );
   }
 
-  getKonvaPoints() {
-    return this._objects.filter(
-      x => x.attrs.class != undefined && x.attrs.class == ELEMENTS_CLASS.POINT
+  getSelectedPoints() {
+    const objects = this.getSelectedAggregators().filter(
+      x => x.elementClass === ELEMENTS_CLASS.POINT
+    );
+    return objects.map(x => x.genericObject);
+  }
+
+  getSelectedPointsAggregators() {
+    const objects = this.getSelectedAggregators().filter(
+      x => x.elementClass === ELEMENTS_CLASS.POINT
     );
+    return objects;
   }
 
   startDragSelector(posIn) {
@@ -77,8 +97,8 @@ export class Selector {
   updateDragSelector(posIn) {
     if (State.getCurrentState() != APP_STATE.NONE) return;
     App.clearSelectedTool();
-    let currentObjects = Objects.get();
-    let posRect = this.reverse(this._selectorPosStart, this._selectorPosNow);
+    const currentObjects = Objects.get();
+    const 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);
@@ -86,19 +106,22 @@ export class Selector {
     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].konvaObject;
+      const aggregator = currentObjects[i];
+      const object = aggregator.konvaObject;
+      if (object == undefined) return;
       if (object.children != undefined && object.children.length > 0) {
         for (let j = 0; j < object.children.length; j++) {
-          this.style(object.children[j], this._selectorRect);
+          this.style(object.children[j], this._selectorRect, aggregator);
         }
       } else {
-        this.style(object, this._selectorRect);
+        this.style(object, this._selectorRect, aggregator);
       }
     }
     this._stage.draw();
   }
 
-  style(object, selectorRect) {
+  style(object, selectorRect, aggregator) {
+    if (object == undefined) return;
     if (object.attrs.selectable != undefined) {
       if (object.attrs.selectable == false) {
         return;
@@ -107,14 +130,14 @@ export class Selector {
     if (this.hitCheck(object, selectorRect)) {
       object.stroke("#33BCFF");
       object.fill("#33BCFF");
-      this.setObject(object);
+      this.setObject(aggregator);
     } else {
       if (object.attrs.style != undefined) {
-        this.removeObject(object);
+        this.removeObject(aggregator);
         object.stroke(object.attrs.style.stroke);
         object.fill(object.attrs.style.fill);
       } else {
-        this.removeObject(object);
+        this.removeObject(aggregator);
         object.stroke("black");
       }
     }
@@ -140,13 +163,11 @@ export class Selector {
   }
 
   setObject(object) {
-    if (this._objects.includes(object)) return;
-    this._objects.push(object);
+    Objects.setSelectedOject(object);
   }
 
   removeObject(object) {
-    if (this._objects.length == 0) return;
-    this._objects.splice(this._objects.indexOf(object), 1);
+    Objects.removeSelectedOject(object);
   }
 
   reverse(r1, r2) {

src/app/core/application/stage-manager.js

@@ -22,10 +22,10 @@ class StageManager {
   }
   create() {
     var id = this._files.length + 1;
-    this._makeTemplate(id);
     this._createLayer();
+    this._makeTemplate(this._stage.layer);
     this._files.push(this._stage.layer);
-    this._cleanLayers();
+    this._clearLayers();
     return this._stage;
   }
   getFiles() {
@@ -49,7 +49,7 @@ class StageManager {
     return _files;
   }
 
-  _cleanLayers(layer) {
+  _clearLayers(layer) {
     this._files.forEach(element => {
       element.konvaLayer.hide();
     });
@@ -85,13 +85,14 @@ class StageManager {
     const file = $(e.currentTarget);
     const id = parseInt(file.attr("file-id"));
     const layer = this._files.find(function(element) {
-      return element.sequence == id;
+      return element.id == id;
     });
     $(".file").each(function() {
       $(this).removeClass("active");
     });
     file.addClass("active");
-    if (layer != undefined) this._cleanLayers(layer);
+    if (layer != undefined) this._clearLayers(layer);
+    this._setLayerTitle(layer);
   }
 
   _bootstrap() {
@@ -109,13 +110,18 @@ class StageManager {
     this.create();
   }
 
-  _makeTemplate(id) {
+  _makeTemplate(layer) {
     $(".file").each(function() {
       $(this).removeClass("active");
     });
     $("#files").append(
-      `<li class="file active" file-id="${id}"><button>New Document ${id}</button></li>`
+      `<li class="file active" file-id="${layer.id}"><button>${layer.name}</button></li>`
     );
+    this._setLayerTitle(layer);
+  }
+  _setLayerTitle(layer) {
+    $("#selected-document").empty();
+    $("#selected-document").append(layer.name);
   }
 }
 

src/app/core/drawers/drawer-aggregator.js

@@ -1,8 +1,17 @@
 export class DrawerAggregator {
-  constructor(drawer, geometricObject, konvaObject) {
+  constructor(drawer, geometricObject, konvaObject, elementClass) {
     this.drawer = drawer;
     this.genericObject = geometricObject;
     this.konvaObject = konvaObject;
+    this.aggregators = [];
+    if (elementClass != undefined) this.elementClass = elementClass;
+    else {
+      if (
+        konvaObject.attrs != undefined &&
+        konvaObject.attrs.class != undefined
+      )
+        this.elementClass = konvaObject.attrs.class;
+    }
   }
   setGeometricObject(genericObject) {
     this.genericObject = genericObject;
@@ -13,7 +22,19 @@ export class DrawerAggregator {
   setKonvaObject(konvaObject) {
     this.konvaObject = konvaObject;
   }
-  update() {
-    this.drawer.update();
+  setElementClass(elementClass) {
+    this.elementClass = elementClass;
+  }
+  addAggregator(aggregator) {
+    if (!this.aggregators.includes(aggregator)) {
+      this.aggregators.push(aggregator);
+    }
+  }
+  update(e) {
+    this.drawer.updatePositions(this, e);
+    this.aggregators.forEach(aggregator => {
+      aggregator.drawer.update(aggregator);
+    });
+    // this.drawer.update();
   }
 }

src/app/core/drawers/drawer-manager.js

@@ -19,5 +19,10 @@ class DrawerManager {
   addAggregator(aggregator) {
     this.currentStage.addAggregator(aggregator);
   }
+  batchDraw() {
+    Stages.getCurrentStage()
+      .getCurrentKonvaLayer()
+      .batchDraw();
+  }
 }
 export const drawerManager = new DrawerManager();

src/app/core/drawers/drawer.js

@@ -31,7 +31,13 @@ export class Drawer {
   draw(object) {
     Drawer.drawObject(object);
   }
-  update() {
+  batchDraw() {
+    DrawerManager.batchDraw();
+  }
+  update(aggregator) {
+    throw "Not implemented exception";
+  }
+  updatePositions(aggregator, event) {
     throw "Not implemented exception";
   }
   setKonvaObject(konvaObject) {

src/app/core/drawers/layer.js

@@ -1,8 +1,20 @@
+import Konva from "konva";
+
 export class Layer {
-  constructor(sequence, konvaLayer) {
-    this.sequence = sequence;
+  constructor(id, konvaLayer) {
+    this.id = id;
+    this.name = "New document " + this.id;
     this.konvaLayer = konvaLayer;
     this.aggregators = [];
+    this.selectedAggregators = [];
+    this.konvaGroup = new Konva.Group({
+      draggable: false,
+      resizeEnabled: false
+    });
+    this.konvaLayer.add(this.konvaGroup);
+  }
+  getKonvaGroup() {
+    return this.konvaGroup;
   }
   getKonvaLayer() {
     return this.konvaLayer;
@@ -13,4 +25,18 @@ export class Layer {
   getAggregators() {
     return this.aggregators;
   }
+  getSelectedAggregators() {
+    return this.selectedAggregators;
+  }
+  setSelectedAggregator(aggregator) {
+    if (!this.selectedAggregators.includes(aggregator)) {
+      this.selectedAggregators.push(aggregator);
+    }
+  }
+  removeSelectedAggregator(aggregator) {
+    if (!this.selectedAggregators.includes(aggregator)) {
+      var index = this.selectedAggregators.indexOf(aggregator);
+      this.selectedAggregators.splice(index, 1);
+    }
+  }
 }

src/app/core/drawers/stage.js

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

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

@@ -1,4 +1,24 @@
 export const ELEMENTS_CLASS = {
   POINT: 0,
-  LINE_SEGMENT: 1
+  LINE_SEGMENT: 6
+  // TO: PONTO                      =   0;
+  // TO: PONTO_INTERSECAO           =   1;
+  // TO: PONTO_SOBRE                =   2;
+  // TO: CIRCUNFERENCIA             =   3;
+  // TO: RETA                       =   4;
+  // TO: SEMIRETA                   =   5;
+  // TO: SEGMENTO                   =   6;
+  // TO: MED_DISTANCIA              =   7; //  Script: MEDIDA = 7
+  // TO: MED_AREA                   =   8;
+  // TO: PARALELA                   =   9;
+  // TO: PERPENDICULAR              =  10;
+  // TO: MED_ARCO                   =  11;
+  // TO: MED_EXPR                   =  12;
+  // TO: PONTO_MEDIO                =  13;
+  // TO: CIRC_RAIO                  =  14;
+  // TO: POLIGONO                   =  15;
+  // TO: PONTO_SOBRE_DIST           =  16;
+  // TO: LOCUS                      =  17;
+  // TO: MED_TEXTO                  =  20;  // para textos
+  // TO: CIRCUNFERENCIA_INT         =  21; // [11/01/2006] estava 56, mas este num. e de rotacao
 };

src/app/core/models/objects/geometric-object.js

@@ -16,7 +16,7 @@ export class GeometricObject extends DynamicObject {
   setEdgeThinckness(edgeThinckness) {
     this.edgeThinckness = edgeThinckness;
   }
-  update() {
+  update(konvaObject, event) {
     throw "not implemented exception";
   }
 }