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

Fixing midpoint object MiddlePoint: now constructing only one geometric object
Indentantion adjusts: inserted space in all function/method declaration (before open parenthesis) to distinguish it from its use

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

@@ -20,13 +20,13 @@ export class LineSegmentDrawer extends SelectableDrawer {
 
   static FIRST_POINT_STATE() {
     return "FIRST_POINT";
-  }
+    }
 
   static SECOND_POINT_STATE() {
     return "SECOND_POINT";
-  }
+    }
 
-  constructor() {
+  constructor () {
     super();
     this.pointA;
     this.pointB;
@@ -37,77 +37,80 @@ export class LineSegmentDrawer extends SelectableDrawer {
     this.lineSegment;
     this.pointDrawer = new PointDrawer();
     super.setElementClass(ELEMENTS_CLASS.LINE_SEGMENT);
-  }
+    }
 
-  setPointA(point) {
+  setPointA (point) {
     this.pointA = point;
-  }
-  setPointB(point) {
+    }
+  setPointB (point) {
     this.pointB = point;
-  }
-  setAggregatorA(aggregator) {
+    }
+  setAggregatorA (aggregator) {
     this.aggregatorA = aggregator;
     this.setPointA(aggregator.genericObject);
-  }
-  setAggregatorB(aggregator) {
+    }
+  setAggregatorB (aggregator) {
     this.aggregatorB = aggregator;
     this.setPointB(aggregator.genericObject);
-  }
+    }
 
-  draw(e) {
+  draw (e) {
     if (e != undefined) {
       if (e.target != undefined && e.target.attrs.class != undefined &&
         (e.target.attrs.class == ELEMENTS_CLASS.POINT || e.target.attrs.class == ELEMENTS_CLASS.INTERSECTION_POINT)) {
         this.drawByStates(e.target);
         return;
-      }
+        }
       else if (e.attrs != undefined && e.attrs.genericObject != undefined) {
         this.drawByLineSegment(e.attrs.genericObject)
         return;
+        }
       }
-    }
     const points = Selector.getSelectedPoints();
     if (points == undefined || points.length == 0) {
       this.drawByStates();
       return;
-    }
+      }
     this.drawByPoints(points);
-  }
+    }
 
 
-  drawByStates(konvaObject) {
+  drawByStates (konvaObject) {
     let aggregator = undefined;
     if (konvaObject != undefined) {
       aggregator = Objects.getByKonvaObject(konvaObject)[0];
-    }
+      }
     if (this.state == undefined) {
       super.setState(LineSegmentDrawer.FIRST_POINT_STATE);
-    }
+      }
     else if (this.state == LineSegmentDrawer.FIRST_POINT_STATE) {
+console.log("line-segment-drawer.js!drawByStates(.): 1");
       aggregator = aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
       this.setAggregatorA(aggregator);
       super.setState(LineSegmentDrawer.SECOND_POINT_STATE);
-    }
+      }
     else if (this.state == LineSegmentDrawer.SECOND_POINT_STATE) {
+console.log("line-segment-drawer.js!drawByStates(.): 1");
       aggregator = aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
       this.setAggregatorB(aggregator);
       this.drawByPoints([this.pointA, this.pointB], [this.aggregatorA, this.aggregatorB]);
       super.setState(LineSegmentDrawer.FIRST_POINT_STATE);
+      }
     }
-  }
 
-  drawByPoints(points, aggregators) {
+  drawByPoints (points, aggregators) { // create 2 point with the points already created
     if (points == undefined || points.length < 1) return;
     this.setPointA(points[0]);
     this.setPointB(points[1]);
+console.log("line-segment-drawer.js!drawByPoints(.): pointA.id=" + this.pointA.id + ", pointB.id=" + this.pointB.id);
     aggregators = this.resolveAggregators(points, aggregators, true);
     this.label = Label.draw(true);
     this.lineSegment = new LineSegmentModel(this.pointA, this.pointB, this.label);
     this.drawByLineSegment(this.lineSegment);
     this.reset();
-  }
+    }
 
-  drawByLineSegment(lineSegment) {
+  drawByLineSegment (lineSegment) {
     this.lineSegment = lineSegment;
     const group = SelectableDrawer.getKonvaGroup(false);
     const text = LineSegmentDrawer.getKonvaText(lineSegment, lineSegment.label);
@@ -132,9 +135,9 @@ export class LineSegmentDrawer extends SelectableDrawer {
     super.batchDraw(); // ../../../core/drawers/drawer-aggregator.js
     SelectableDrawer.setMaxIndex(aggregators[0].konvaObject);
     SelectableDrawer.setMaxIndex(aggregators[1].konvaObject);
-  }
+    }
 
-  resolveAggregators(points, aggregators, selected) {
+  resolveAggregators (points, aggregators, selected) {
     this.pointA = points[0];
     this.pointB = points[1];
 
@@ -145,25 +148,26 @@ export class LineSegmentDrawer extends SelectableDrawer {
         Objects.getByGenericObject(this.pointA)[0],
         Objects.getByGenericObject(this.pointB)[0]
       ];
-    }
+      }
     return aggregators;
-  }
+    }
 
-  update(aggregator, e) {
+  update (aggregator, e) {
     if (!aggregator.visible) return;
     const pointA = aggregator.genericObject.pointA;
     const pointB = aggregator.genericObject.pointB;
-    const pos = aggregator.genericObject.getMiddlePoint();
+
+    // Update label position (in the middle point os pointA and pointB)
+    // app/components/line-segment-component/models/line-segment-model.js: getMiddlePoint(): return { posX: x, posY: y   };
+    const pos = aggregator.genericObject.getMiddlePoint(); // used to calculate label position
     aggregator.konvaObject.children[0].x(pos.posX);
     aggregator.konvaObject.children[0].y(pos.posY - 20);
-    aggregator.konvaObject.children[1].points([
-      pointA.posX, pointA.posY,
-      pointB.posX, pointB.posY
-    ]);
+    aggregator.konvaObject.children[1].points([pointA.posX, pointA.posY, pointB.posX, pointB.posY]);
+
     super.batchDraw();
-  }
+    }
 
-  insertPoint(aggregator) {
+  insertPoint (aggregator) {
     const pointA = aggregator.genericObject.pointA;
     const pointB = aggregator.genericObject.pointB;
     const pointCAggregator = this.pointDrawer.drawPoint();
@@ -174,9 +178,9 @@ export class LineSegmentDrawer extends SelectableDrawer {
       pointC.posX, pointC.posY
     ]);
     super.batchDraw();
-  }
+    }
 
-  static getKonvaText(lineSegment, label) {
+  static getKonvaText (lineSegment, label) {
     const pos = lineSegment.getMiddlePoint();
     return new Konva.Text({
       x: pos.posX,
@@ -191,10 +195,10 @@ export class LineSegmentDrawer extends SelectableDrawer {
       resizeEnabled: false,
       transformEnabled: false,
       selectable: false
-    });
-  }
+      });
+    }
 
-  static getKonvaLine(pointA, pointB, useLabel) {
+  static getKonvaLine (pointA, pointB, useLabel) {
     const points = [pointA.posX, pointA.posY, pointB.posX, pointB.posY];
     const line = new Konva.Line({
       points: points,
@@ -209,14 +213,14 @@ export class LineSegmentDrawer extends SelectableDrawer {
       selectable: false,
       draggable: false,
       style: { stroke: "grey", fill: "grey" }
-    });
+      });
     SelectableDrawer.setSelectableIfIntersectionChanged(line);
     return line;
-  }
+    }
 
-  static drawKonvaLine(pointA, pointB) {
+  static drawKonvaLine (pointA, pointB) {
     const line = LineSegmentDrawer.getKonvaLine(pointA, pointB);
     return line;
-  }
+    }
 
-}
+  }