Update 'src/app/components/middle-point/drawers/middle-point-drawer.js'

Some fixes to allow the MidPoint creation through GEO file with the correct ID
(e.g. one with "1:3" was been created with ID=1)
Added debug print and one try/catch to avoid "cyclic" erro in:
* drawByMiddlePoint (middlePoint, draggable, selectable)

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

@@ -58,15 +58,18 @@ console.log("middle-point-drawer.js: setPointB(point): point.id=" + point.id);
       this.pointC = point;
 console.log("middle-point-drawer.js: setPointC(point): point.id=" + point.id);
       }
+
+    // @calledby this.drawByStates(konvaObject): this.setAggregatorA(aggregator);
     setAggregatorA (aggregator) {
       this.aggregatorA = aggregator;
       this.setPointA(aggregator.genericObject);
-console.log("middle-point-drawer.js: setAggregatorA(aggregator): aggregator.genericObject.id=" + aggregator.genericObject.id);
+// console.trace(); //D detectar erro aggregatorA.id=3 mas aggregatorA.genericObject.id=2!
+console.log("middle-point-drawer.js: setAggregatorA(aggregator): aggregatorA.id=" + aggregator.id + ", aggregatorA.genericObject.id=" + aggregator.genericObject.id);
       }
     setAggregatorB (aggregator) {
       this.aggregatorB = aggregator;
       this.setPointB(aggregator.genericObject);
-console.log("middle-point-drawer.js: setAggregatorB(aggregator): aggregator.genericObject.id=" + aggregator.genericObject.id);
+console.log("middle-point-drawer.js: setAggregatorB(aggregator): aggregatorB.id=" + aggregator.id + ", aggregatorB.genericObject.id=" + aggregator.genericObject.id);
       }
     setAggregatorC (aggregator) { //REMOVER
       this.aggregatorC = aggregator;
@@ -83,12 +86,13 @@ console.log("pp(.): erro! " + e); }
 return "(" + px + "," + py + ")";
 }
 
+    // @calledby app/core/models/components/component.js: draw(e): this.drawer.draw(e);
     draw (e) { // First "click" on MidlePoint icon reache this point
 console.log("middle-point-drawer.js!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)) {
-          console.log(" * 4. b"); // first and second point already exists
+          console.log(" * 4. b, e.target.attrs=" + JSON.stringify(e.target.attrs)); // first and second point already exists
           this.drawByStates(e.target); // create the final point defining this MidPoint
           return;
           }
@@ -103,7 +107,8 @@ console.log("middle-point-drawer.js!draw(e)");
       const points = Selector.getSelectedPoints();
       if (points == undefined || points.length == 0) {
         this.drawByStates(); // create this MidPoint
-console.log(" * 6. this.middlePoint.id="+(this.middlePoint&&this.middlePoint.id?this.middlePoint.id:"<>") + " apos 'this.drawByStates()'"); //D //leo
+        var aux1 = (this.middlePoint && this.middlePoint.id ? this.middlePoint.id : "<>");
+console.log(" * 6. apos 'this.drawByStates()' this.middlePoint.id=" + aux1 + "; points=0"); //D //leo
         return;
         }
 console.log(" * 7. this.middlePoint.id="+(this.middlePoint&&this.middlePoint.id?this.middlePoint.id:"<>") + " #points=" + points.length + " xxxxxxxxxxxxxxxxxxxxxxxxxxxx "); //D //leo
@@ -113,18 +118,27 @@ console.log(" * 7. this.middlePoint.id="+(this.middlePoint&&this.middlePoint.id?
 
     drawByStates (konvaObject) {
       let aggregator = undefined;
+      var aux = "";
       if (konvaObject != undefined) {
         aggregator = Objects.getByKonvaObject(konvaObject)[0];
+        aux += " (1) aggregator.id=" + aggregator.id + "; ";
         }
       if (this.state == undefined) {
         super.setState(MiddlePointDrawer.FIRST_POINT_STATE);
+        console.log("middle-point-drawer.js!drawByStates(konvaObject): " + aux + " (2) FIRST_POINT_STATE; ");
         }
       else if (this.state == MiddlePointDrawer.FIRST_POINT_STATE) { // second "click" after initial Point => creates final Point
         try {
+          // aggregator=["id","drawer","genericObject","konvaObject","aggregators","visible","elementClass"]
+          // var aux2 = ", aggregator=" + JSON.stringify(Object.keys(aggregator)); // JSON.stringify(aggregator) => "TypeError: cyclic object value"
+          // aggregator[id, genericObject.id, #aggregators, elementClass]=[3, 2, 0, 13]
+          var aux2 = (aggregator!=undefined ? ", aggregator[id, genericObject.id, #aggregators, elementClass]=[" + aggregator.id + ", " + aggregator.genericObject.id
++ ", " + aggregator.aggregators.length + ", " + aggregator.elementClass + "]" : "<>");
           aggregator = aggregator != undefined ? aggregator : this.pointDrawer.drawPoint(); // drawPoint() provides "point" to "this.pointA"
           this.setAggregatorA(aggregator); // will associate "this.pointA" with "aggregator.genericObject"
+console.log("middle-point-drawer.js!drawByStates(konvaObject): aggregatorA.id=" + aggregator.id + aux2);
         } catch (e) { console.log("middle-point-drawer.js!drawByStates(.):  4 - erro " + e); }
-console.log("middle-point-drawer.js!drawByStates(konvaObject): aggregator.id=" + aggregator.id + ", this.pointA.id=" + this.pointA.id);
+console.log("middle-point-drawer.js!drawByStates(konvaObject): aggregatorA.id=" + aggregator.id + ", this.pointA.id=" + this.pointA.id);
         super.setState(MiddlePointDrawer.SECOND_POINT_STATE);
         }
       else if (this.state == MiddlePointDrawer.SECOND_POINT_STATE) { // second "click" after final Point => creates MidPoint
@@ -132,7 +146,7 @@ console.log("middle-point-drawer.js!drawByStates(.):  5");
         aggregator = aggregator != undefined ? aggregator : this.pointDrawer.drawPoint(); // drawPoint() provides "point" to "this.pointB"
         this.setAggregatorB(aggregator); // will associate "this.pointB" with "aggregator.genericObject"
 var aux = ", A=" + this.pp(this.pointA) + ", B=" + this.pp(this.pointB) + ": ";
-console.log("middle-point-drawer.js!drawByStates(konvaObject): aggregator.id=" + aggregator.id + ", this.pointB.id=" + this.pointB.id + aux); //D//leo
+console.log("middle-point-drawer.js!drawByStates(konvaObject): aggregatorB.id=" + aggregator.id + ", this.pointB.id=" + this.pointB.id + aux); //D//leo
         this.draggable = false; //novo
         const coord = MiddlePointModel.getMiddlePointPos(this.pointA, this.pointB); // get coord. of defining points
         this.posX = coord.posX; this.posY = coord.posY;
@@ -142,21 +156,23 @@ console.log("middle-point-drawer.js!drawByStates(konvaObject): aggregator.id=" +
       } // drawByStates(konvaObject)
 
     drawByPoints (points, aggregators) { // create 2 midpoint with the points A and B already created
-console.log("middle-point-drawer.js!drawByPoints(.): #points=" + points.length);
+      console.log("middle-point-drawer.js!drawByPoints(.): #points=" + points.length); //D var aux = "";
       if (points == undefined || points.length < 1) return;
       try {
         this.setPointA(points[0]);
         this.setPointB(points[1]);
         aggregators = this.resolveAggregators(points, aggregators, true);
         this.label = Label.draw(false); // app/component-registry/label.js : draw(lower = false) => this.pushUpper();
-        this.middlePoint = new MiddlePointModel(this.pointA, this.pointB, this.label, -1); // now create Segment - 'drawByStates(konvaObject)' already created the MidPoint pointC
+        // this.middlePoint = new MiddlePointModel(this.pointA, this.pointB, this.label, -1); // now create Segment - 'drawByStates(konvaObject)' already created the MidPoint pointC
+        this.middlePoint = new MiddlePointModel(this.pointA, this.pointB, this.label); // now create Segment - 'drawByStates(konvaObject)' already created the MidPoint pointC
         this.drawByMiddlePoint(this.middlePoint);
         this.reset();
       } catch (error) { console.log("middle-point-drawer.js!drawByPoints(.): " + error); }
-console.log("middle-point-drawer.js!drawByPoints(.): 2 x");
+      console.log("middle-point-drawer.js!drawByPoints(.): final");
       } // drawByPoints(points, aggregators)
 
     drawByMiddlePoint (middlePoint, draggable, selectable) {
+    try {
       this.middlePoint = middlePoint;
       this.middlePoint.backgroundColor = "#f54260";
       const group = SelectableDrawer.getKonvaGroup(false);
@@ -164,7 +180,7 @@ console.log("middle-point-drawer.js!drawByPoints(.): 2 x");
       // const midpoint = MiddlePointDrawer.getKonvaCircle(middlePoint);
       const midpoint = MiddlePointDrawer.getKonvaCircle(middlePoint, draggable, selectable); // apos introd. param. ", draggable, selectable"
       midpoint.selectable = true;
-      //    const circle = PointDrawer.getKonvaCircle(point, draggable, selectable);
+      // const circle = PointDrawer.getKonvaCircle(point, draggable, selectable);
       group.add(text);
       group.add(midpoint);
       super.setKonvaObject(group);
@@ -172,7 +188,9 @@ console.log("middle-point-drawer.js!drawByPoints(.): 2 x");
         this, this.middlePoint,
         group, ELEMENTS_CLASS.MIDDLE_POINT
         );
-      super.addAggregator(aggregator);
+      try { // "C:=MidPoint(A,B); D:=MidPoint(C,B);" could launch error "TypeError: cyclic object value", try/catch allow running with no error
+        super.addAggregator(aggregator); // PointDrawer (app/components/point-component/drawers/point-drawer.js) extends SelectableDrawer
+      } catch (error) { console.log("middle-point-drawer.js!drawByMiddlePoint(.): error in 'super.addAggregator(aggregator): " + error); }
       const aggregators = this.resolveAggregators([this.middlePoint.pointA, this.middlePoint.pointB], undefined);
       aggregators[1].addAggregator(aggregator);
       aggregators[0].addAggregator(aggregator);
@@ -183,8 +201,10 @@ console.log("middle-point-drawer.js!drawByPoints(.): 2 x");
       this.konvaObject.zIndex(1);
 
       super.batchDraw(); // ../../../core/drawers/drawer-aggregator.js
+
       SelectableDrawer.setMaxIndex(aggregators[0].konvaObject);
       SelectableDrawer.setMaxIndex(aggregators[1].konvaObject);
+      } catch (error) { console.log("middle-point-drawer.js!drawByMiddlePoint(middlePoint): " + error); }
       } // drawByMiddlePoint(middlePoint)
 
     resolveAggregators (points, aggregators, selected) {