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

Added explaining comments (about list of dependents).
Added 2 essentials line in "update (aggregator, e)" that effectively update the (x,y) coord. of the MidPoint.

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

@@ -2,8 +2,11 @@
  * iGeom by LInE
  * Geometric Object: Segment
  * Drawer to Segment
+ * www.usp.br/line
  * www.matematica.br/igeom
  * ./app/components/middle-point/drawers/middle-point-drawer.js
+ *
+ * @version 2024/09/28: fixed import bug (now coord. of MidPoint is effectively updated in movements)
  * @version 2020/11/02: indentation
  */
 
@@ -17,7 +20,7 @@ import { SelectableDrawer } from "../../../core/drawers/selectable-drawer";
 import { PointModel } from "../../point-component/models/point-model";
 import { MiddlePointModel } from "../models/middle-point-model";
 
-//r export class MiddlePointDrawer extends SelectableDrawer 
+// MiddlePointDrawer extends PointDrawer (app/components/point-component/drawers/point-drawer.js)
 export class MiddlePointDrawer extends PointDrawer {
 
     static count2debug = 1; //DEBUG
@@ -78,13 +81,15 @@ console.log("middle-point-drawer.js: setAggregatorC(aggregator): aggregator.gene
       }
 
 //DEBUG print coordinates of point
-pp (point) { var px="",py=""; try { //D //leo
-px=""+point.id+":"+point.posX; py=""+point.posY; var aux1="", aux2="";
-var items = px.split("."); if (items && items.length>1) aux1 = "." + items[1].substr(0,3); px = items[0] + aux1;
-var items = py.split("."); if (items && items.length>1) aux2 = "." + items[1].substr(0,3); py = items[0] + aux2; } catch (e) {
-console.log("pp(.): erro! " + e); }
-return "(" + px + "," + py + ")";
-}
+pp (point) { var px="",py="";
+ try { //D //leo
+  px=""+point.id+":"+point.posX; py=""+point.posY; var aux1="", aux2="";
+  var items = px.split("."); if (items && items.length>1) aux1 = "." + items[1].substr(0,3); px = items[0] + aux1; // pegar apenas 3 digitos
+  var items = py.split("."); if (items && items.length>1) aux2 = "." + items[1].substr(0,3); py = items[0] + aux2; // pegar apenas 3 digitos
+ } catch (e) {
+ 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
@@ -158,12 +163,13 @@ console.log("middle-point-drawer.js!drawByStates(konvaObject): aggregatorB.id="
     drawByPoints (points, aggregators) { // create 2 midpoint with the points A and B already created
       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);
+      try { // Considering this as C=MidPoint(A,B)
+        this.setPointA(points[0]); // get source point A
+        this.setPointB(points[1]); // get source point B
+        aggregators = this.resolveAggregators(points, aggregators, true); // get the lists of dependents of point A and point B
         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
+	// Now create this MidPoint
         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();
@@ -188,12 +194,14 @@ console.log("middle-point-drawer.js!drawByStates(konvaObject): aggregatorB.id="
         this, this.middlePoint,
         group, ELEMENTS_CLASS.MIDDLE_POINT
         );
-      try { // "C:=MidPoint(A,B); D:=MidPoint(C,B);" could launch error "TypeError: cyclic object value", try/catch allow running with no error
+console.log("middle-point-drawer.js!drawByMiddlePoint(.): insert this C=MidPoint(A,B) in the list of dependents of A or of B"); //DEBUG
+      try { // Insert this MidPoint C=MidPoint(A,B) in the list of drawers dependents of A and of B (in app/core/drawers/drawer.js)
+        //D "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);
+      aggregators[1].addAggregator(aggregator); // Insert this MidPoint C in the list of dependents of point A
+      aggregators[0].addAggregator(aggregator); // Insert this MidPoint C in the list of dependents of point B
 
       //D console.log("app/components/middle-point/drawers/middle-point-drawer.js: drawByMiddlePoint"); //leo
       SelectableDrawer.drawObject(this.konvaObject); //
@@ -228,7 +236,9 @@ console.log("middle-point-drawer.js!drawByStates(konvaObject): aggregatorB.id="
       return ((distX*distX + distY*distY)); // this MidPoint only small distance! 
       }
 
-    update (aggregator, e) { // @calledby ./src/app/core/drawers/drawer-aggregator.js!updateAggregators(aggregators,e): aggregator.drawer.update(aggregator, e);
+    // Update MidPoint after any movement of one point that impact this MidPoint
+    // @calledby ./src/app/core/drawers/drawer-aggregator.js!updateAggregators(aggregators,e): aggregator.drawer.update(aggregator, e);
+    update (aggregator, e) {
       //D if (MiddlePointDrawer.count2debug==2) { //D
       //D   console.log(" * middle-point-drawer!update(.): aggregator.id="+(aggregator!=undefined ? aggregator.id : "<>")+", count2debug="+MiddlePointDrawer.count2debug);
       //D   console.trace();
@@ -237,24 +247,29 @@ console.log("middle-point-drawer.js!drawByStates(konvaObject): aggregatorB.id="
         console.log(" * middle-point-drawer!update(.): aggregator.id=" + (aggregator!=undefined ? aggregator.id : "<>") + " with !aggregator.visible"); //D
         return;
 	}
-      var aux = "\n1, ", aux2; //D
+      var aux = "\n[1], ", aux2; //D
       try {
         const pointA = aggregator.genericObject.pointA; // initial point that define MidPoint
         const pointB = aggregator.genericObject.pointB; // final point
-        aux += "2, "; //D
+        aux += "[2], "; //D
         const coord = aggregator.genericObject.getMiddlePoint(); // app/components/middle-point/models/middle-point-model.js
-        aux += "3, "; //D
+        aux += "[3], "; //D
         // console.log(" * middle-point-drawer!update(.): A.id=" + pointA.id + "=" + this.pointA.id + ", B.id=" + pointB.id + ", C.id="+pointC.id+",  : " + aux);
-        // console.log("app/components/middle-point/drawers/middle-point-drawer.js: update(.): A.id=" + pointA.id + ", B.id=" + pointB.id + ", C.id="+pointC.id+" : " + aux);
-        aggregator.konvaObject.children[0].x(coord.posX);      // Konva.Text
-        aggregator.konvaObject.children[0].y(coord.posY - 20); // 
-        var point = aggregator.konvaObject.children[1];        // this is Konva.Circle
-	aux2 = point.attrs; // atributes of KonvaObject
-        aux += "5, children[1]=(" + aux2.x + "," + aux2.y + "), " + point.className; // JSON.stringify(point); //D
+        aggregator.konvaObject.children[0].x(coord.posX);      // Konva.Text : used to the MidPoint label X coord.
+        aggregator.konvaObject.children[0].y(coord.posY - 20); //              used to the MidPoint label Y coord.
+        var point = aggregator.konvaObject.children[1];        // Konva.Circle : used to draw the point
+	//D aux2 = point.attrs; // atributes of KonvaObject
+        //D aux += "[4], children[1]=(" + aux2.x + "," + aux2.y + "), " + point.className; // JSON.stringify(point); //D
+
         // Now update the coordinates of this midpoint: need to use KonvaObject (type Point) functions "point.x(.)" and  "point.y(.)"
-        point.x(coord.posX); point.y(coord.posY);
-        //D
-console.log("middle-point-drawer.js!update(aggregator, e): A=" + this.pp(pointA) + ", B=" + this.pp(pointB) + ", C=" + this.pp(this) + aux);
+        //this.posX = coord.posX; // xxx no effect!
+        //this.posY = coord.posY; // xxx no effect!
+        point.x(coord.posX);  // update X coord. of the label of this MidPoint
+        point.y(coord.posY);  // update Y coord. of the label of this MidPoint
+        aggregator.genericObject.posX = coord.posX; // really update internal X coord. of this MidPoint
+        aggregator.genericObject.posY = coord.posY; // really update internal Y coord. of this MidPoint
+
+        //D console.log("middle-point-drawer.js!update(aggregator, e): this.id=" + this.id + ", aggregator.genericObject.id=" + aggregator.genericObject.id + " : MP=MidPoint[" + this.pp(aggregator.genericObject) + "], A=" + this.pp(pointA) + ", B=" + this.pp(pointB) + ""); // + aux
       } catch (error) {
         console.log("middle-point-drawer.js!update(.): error = " + error + "\n" + aux);
 	}