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

Fixing midpoint object MiddlePoint: now constructing only one geometric object.
Indentation adjusts: inserted space in all function/method declaration (before open parenthesis) to distinguish it from its use.
Several changes to remove the 2 objects construction (a Point and a SegmentLine), mainly removing everything related to "this.aggregatorC" and this.pointC". Mostly changed functions/methods were "drawByMiddlePoint(middlePoint)" and "update(aggregator, e)".

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

@@ -3,7 +3,7 @@
  * Geometric Object: Segment
  * Drawer to Segment
  * www.matematica.br/igeom
- * ./app/components/middle-point-component/drawers/middle-point-drawer.js
+ * ./app/components/middle-point/drawers/middle-point-drawer.js
  * @version 2020/11/02: indentation
  */
 
@@ -17,7 +17,8 @@ import { SelectableDrawer } from "../../../core/drawers/selectable-drawer";
 import { PointModel } from "../../point-component/models/point-model";
 import { MiddlePointModel } from "../models/middle-point-model";
 
-export class MiddlePointDrawer extends SelectableDrawer {
+//r export class MiddlePointDrawer extends SelectableDrawer 
+export class MiddlePointDrawer extends PointDrawer {
 
     static count2debug = 1; //DEBUG
 
@@ -29,15 +30,15 @@ export class MiddlePointDrawer extends SelectableDrawer {
       return "SECOND_POINT";
       }
 
+    // A single instace of "MiddlePointDrawer" is created
     constructor () { // constructor of any MidPoint (called once at the begining
       super();
       this.id = MiddlePointDrawer.count2debug++; //DEBUG
+      //D console.log("middle-point-drawer.js: constructor(): this.id=" + this.id);
       this.pointA; // origin
       this.pointB; // end point
-      this.pointC; // must be THIS MidPoint
       this.aggregatorA;
       this.aggregatorB;
-      this.aggregatorC;
       this.label;
       this.states = [MiddlePointDrawer.FIRST_POINT_STATE, MiddlePointDrawer.SECOND_POINT_STATE];
       this.middlePoint; // also MidPoint? (missing the segment!)
@@ -45,39 +46,45 @@ export class MiddlePointDrawer extends SelectableDrawer {
       super.setElementClass(ELEMENTS_CLASS.MIDDLE_POINT);
       }
 
-    setPointA(point) {
+    setPointA (point) {
       this.pointA = point;
+console.log("middle-point-drawer.js: setPointA(point): point.id=" + point.id);
       }
     setPointB(point) {
       this.pointB = point;
+console.log("middle-point-drawer.js: setPointB(point): point.id=" + point.id);
       }
-    setPointC(point) {
+    setPointC(point) { //REMOVER
       this.pointC = point;
+console.log("middle-point-drawer.js: setPointC(point): point.id=" + point.id);
       }
-    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);
       }
-    setAggregatorB(aggregator) {
+    setAggregatorB (aggregator) {
       this.aggregatorB = aggregator;
       this.setPointB(aggregator.genericObject);
+console.log("middle-point-drawer.js: setAggregatorB(aggregator): aggregator.genericObject.id=" + aggregator.genericObject.id);
       }
-    setAggregatorC (aggregator) {
+    setAggregatorC (aggregator) { //REMOVER
       this.aggregatorC = aggregator;
       this.setPointC(aggregator.genericObject);
+console.log("middle-point-drawer.js: setAggregatorC(aggregator): aggregator.genericObject.id=" + aggregator.genericObject.id);
       }
 
+//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 + ")";
+}
+
     draw (e) { // First "click" on MidlePoint icon reache this point
-      //D if (e == undefined) // first click in the button to create MidPoint
-      //D   1; //console.log("app/components/middle-point-component/drawers/middle-point-drawer.js: 1. e == undefined => selected MidPoint constructor");
-      //D else {
-      //D   if (e.target.attrs.class==undefined && e.attrs==undefined) { // first and second click after selected button MidPoint
-      //D     console.log("app/components/middle-point-component/drawers/middle-point-drawer.js: 2. this=" + JSON.stringify(this));
-      //D     console.log("app/components/middle-point-component/drawers/middle-point-drawer.js: 2. create or get the first point");
-      //D     // e.target.attrs.class and e.attrs undefined
-      //D    }
-      //D   else console.log("app/components/middle-point-component/drawers/middle-point-drawer.js: 3. e != undefined : " + e.target.attrs.class + ", " + e.attrs);
-      //D   }
+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)) {
@@ -96,25 +103,14 @@ export class MiddlePointDrawer extends SelectableDrawer {
       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:"<>")); //D //leo
+console.log(" * 6. this.middlePoint.id="+(this.middlePoint&&this.middlePoint.id?this.middlePoint.id:"<>") + " apos 'this.drawByStates()'"); //D //leo
         return;
         }
-      const pointA = points[0];
-      const pointB = points[1];
-      const coord = MiddlePointModel.getMiddlePointPos(pointA, pointB);
-      const pointC = new PointModel(coord.posX, coord.posY, Label.draw());
-var aux1 = "this.pointA.id="+(this.pointA&&this.pointA.id?this.pointA.id:"<>")+", pointA.id="+(pointA&&pointA.id?pointA.id:"<>"); //D //leo
-var aux2 = ", pointB.id="+(pointB&&pointB.id?pointB.id:"<>")+", pointC.id="+(pointC&&pointC.id?pointC.id:"<>")+""; //D //leo
-console.log(" * 7. " + aux1 + aux2); //D //leo
-      pointC.draggable = false;
-      pointC.backgroundColor = "#f54260";
-      const aggregatorC = this.pointDrawer.drawPoint(pointC);
-      this.setAggregatorC(aggregatorC);
-      points.push(pointC); // this
-      this.drawByPoints(points);
+console.log(" * 7. this.middlePoint.id="+(this.middlePoint&&this.middlePoint.id?this.middlePoint.id:"<>") + " #points=" + points.length + " xxxxxxxxxxxxxxxxxxxxxxxxxxxx "); //D //leo
+      if (points.length >= 2)
+        this.drawByPoints(points); // necessary to crate new MidPoint from 2 already existing point (mode "selection + action")
       } // draw(e)
 
-
     drawByStates (konvaObject) {
       let aggregator = undefined;
       if (konvaObject != undefined) {
@@ -124,58 +120,64 @@ console.log(" * 7. " + aux1 + aux2); //D //leo
         super.setState(MiddlePointDrawer.FIRST_POINT_STATE);
         }
       else if (this.state == MiddlePointDrawer.FIRST_POINT_STATE) { // second "click" after initial Point => creates final Point
-        aggregator = aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
-        this.setAggregatorA(aggregator);
+        try {
+          aggregator = aggregator != undefined ? aggregator : this.pointDrawer.drawPoint(); // drawPoint() provides "point" to "this.pointA"
+          this.setAggregatorA(aggregator); // will associate "this.pointA" with "aggregator.genericObject"
+        } 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);
         super.setState(MiddlePointDrawer.SECOND_POINT_STATE);
         }
       else if (this.state == MiddlePointDrawer.SECOND_POINT_STATE) { // second "click" after final Point => creates MidPoint
-        aggregator = aggregator != undefined ? aggregator : this.pointDrawer.drawPoint(); // call Point/MidPoint creation
-        this.setAggregatorB(aggregator);
-//console.log("app/components/middle-point-component/drawers/middle-point-drawer.js: drawByStates(.): antes"); //D //leo
+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
+        this.draggable = false; //novo
         const coord = MiddlePointModel.getMiddlePointPos(this.pointA, this.pointB); // get coord. of defining points
-        const pointC = new PointModel(coord.posX, coord.posY, Label.draw()); // effectivety creates the MidPoint (as pointC)
-console.log("app/components/middle-point-component/drawers/middle-point-drawer.js: drawByStates(.): depois, pointC.id=" + pointC.id); //D //leo
-        pointC.draggable = false;
-        pointC.backgroundColor = "#f54260";
-        const aggregatorC = this.pointDrawer.drawPoint(pointC);
-        this.setAggregatorC(aggregatorC);
-        this.drawByPoints([this.pointA, this.pointB, this.pointC], [this.aggregatorA, this.aggregatorB, this.aggregatorC]); //x origem do 2o MidPoint!
+        this.posX = coord.posX; this.posY = coord.posY;
+        this.drawByPoints([this.pointA, this.pointB], [this.aggregatorA, this.aggregatorB]); //x origem do 2o MidPoint!
         super.setState(MiddlePointDrawer.FIRST_POINT_STATE); // return to the state initial
         }
-      }
+      } // drawByStates(konvaObject)
 
-    drawByPoints (points, aggregators) {
+    drawByPoints (points, aggregators) { // create 2 midpoint with the points A and B already created
+console.log("middle-point-drawer.js!drawByPoints(.): #points=" + points.length);
       if (points == undefined || points.length < 1) return;
-      this.setPointA(points[0]);
-      this.setPointB(points[1]);
-      this.setPointC(points[2]);
-      aggregators = this.resolveAggregators(points, aggregators, true);
-      this.label = Label.draw(true);
-      this.middlePoint = new MiddlePointModel(this.pointA, this.pointB, this.pointC, this.label); // now create Segment - 'drawByStates(konvaObject)' already created the MidPoint pointC
-console.log("app/components/middle-point-component/drawers/middle-point-drawer.js: drawByPoints(.): id="+this.id+", middlePoint.id="+this.middlePoint.id+", pointC.id="+this.pointC.id ); //D //leo
-      this.drawByMiddlePoint(this.middlePoint);
-      this.reset();
+      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.drawByMiddlePoint(this.middlePoint);
+        this.reset();
+      } catch (error) { console.log("middle-point-drawer.js!drawByPoints(.): " + error); }
+console.log("middle-point-drawer.js!drawByPoints(.): 2 x");
       } // drawByPoints(points, aggregators)
 
-    drawByMiddlePoint (middlePoint) {
+    drawByMiddlePoint (middlePoint, draggable, selectable) {
       this.middlePoint = middlePoint;
+      this.middlePoint.backgroundColor = "#f54260";
       const group = SelectableDrawer.getKonvaGroup(false);
-      const text = MiddlePointDrawer.getKonvaText(middlePoint, middlePoint.label);
-      const line = MiddlePointDrawer.getKonvaLine(middlePoint.pointA, middlePoint.pointB);
+      const text = MiddlePointDrawer.getKonvaText(middlePoint, middlePoint.label); // app/component-registry/label.js : 
+      // 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);
       group.add(text);
-      group.add(line);
+      group.add(midpoint);
       super.setKonvaObject(group);
       const aggregator = new DrawerAggregator(
         this, this.middlePoint,
         group, ELEMENTS_CLASS.MIDDLE_POINT
         );
       super.addAggregator(aggregator);
-      const aggregators = this.resolveAggregators([this.middlePoint.pointA, this.middlePoint.pointB, this.middlePoint.pointC], undefined);
-      aggregators[2].addAggregator(aggregator);
+      const aggregators = this.resolveAggregators([this.middlePoint.pointA, this.middlePoint.pointB], undefined);
       aggregators[1].addAggregator(aggregator);
       aggregators[0].addAggregator(aggregator);
 
-      //D console.log("app/components/middle-point-component/drawers/middle-point-drawer.js: drawByMiddlePoint"); //leo
+      //D console.log("app/components/middle-point/drawers/middle-point-drawer.js: drawByMiddlePoint"); //leo
       SelectableDrawer.drawObject(this.konvaObject); //
 
       this.konvaObject.zIndex(1);
@@ -183,13 +185,11 @@ console.log("app/components/middle-point-component/drawers/middle-point-drawer.j
       super.batchDraw(); // ../../../core/drawers/drawer-aggregator.js
       SelectableDrawer.setMaxIndex(aggregators[0].konvaObject);
       SelectableDrawer.setMaxIndex(aggregators[1].konvaObject);
-      SelectableDrawer.setMaxIndex(aggregators[2].konvaObject);
       } // drawByMiddlePoint(middlePoint)
 
     resolveAggregators (points, aggregators, selected) {
       this.pointA = points[0];
       this.pointB = points[1];
-      this.pointC = points[2];
 
       if (aggregators == undefined && selected == true)
         aggregators = Selector.getSelectedPointsAggregators();
@@ -197,7 +197,6 @@ console.log("app/components/middle-point-component/drawers/middle-point-drawer.j
         aggregators = [
           Objects.getByGenericObject(this.pointA)[0],
           Objects.getByGenericObject(this.pointB)[0],
-          Objects.getByGenericObject(this.pointC)[0]
           ];
         }
       return aggregators;
@@ -209,59 +208,44 @@ console.log("app/components/middle-point-component/drawers/middle-point-drawer.j
       return ((distX*distX + distY*distY)); // this MidPoint only small distance! 
       }
 
-    update (aggregator, e) { // @calledby ./src/app/core/drawers/drawer-aggregator.js
-      if (!aggregator.visible) return;
-      const pointA = aggregator.genericObject.pointA; // initial point that define MidPoint
-      const pointB = aggregator.genericObject.pointB; // final point 
-      const pointC = aggregator.genericObject.pointC; // is the MidPoint
-      const coord = aggregator.genericObject.getMiddlePoint(); // app/components/middle-point/models/middle-point-model.js
-
-      //_ var aux = "pointC=("+pointC.posX+","+pointC.posY+"), coord=("+coord.posX+","+coord.posY+"), e=("+e.evt.offsetX+","+e.evt.offsetY+")";//posx="x",posy="y",aux="erro"; //this = pointC;
-      //_ var dist1 = this.distancePointMouseclick(pointC,e); //
-      //_ //if (dist1 >= 0.1) {console.log(" * middle-point-drawer!update(.): not this point! dist(pointC,e)="+dist1+", A.id="+pointA.id+"="+this.pointA.id+", B.id="+pointB.id+", C.id="+pointC.id+", middlePoint.id="+aux1+"="+this.middlePoint.id);return; }
-      //_       //D try { posx = e.evt.offsetX; posy = e.evt.offsetY; // get mouse position using KonvaObject type "dragmove"
-      //_       //D aux = "A=("+pointA.posX+","+pointA.posY+") = mouse("+posx+","+posy+") ?"; } catch (Error) { aux="Erro! e = " + JSON.stringify(e); }  // debug
-      //_       //D if (MiddlePointDrawer.count2debug == 0) { console.trace(); }
-      //_       //D console.log(" * middle-point-drawer!update(.): " + MiddlePointDrawer.count2debug + " : " + aux);
-      //_ //TODO Problema: pointA.id != this.pointA.id - o this.pointA.id esta' vindo com ID do ultimo PontoMedio criado
-      //_ var aux1 = (middlePoint && middlePoint.id?middlePoint.id:"<>") + aux;
-      //_ console.log(" * middle-point-drawer!update(.): id="+this.id+",A.id="+pointA.id+"="+this.pointA.id+", B.id="+pointB.id+", C.id="+pointC.id+", middlePoint.id="+aux1+"="+this.middlePoint.id);
-      //_ //if (MiddlePointDrawer.count2debug==1) console.trace();
-
-      // 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-component/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);
-      aggregator.konvaObject.children[0].y(coord.posY - 20);
-      aggregator.konvaObject.children[1].points([pointA.posX, pointA.posY, pointB.posX, pointB.posY]);
-      const aggregatorC = aggregator.drawer.aggregatorC;
-      const middlePointKonvaObject = aggregatorC.konvaObject
-      pointC.bind(coord.posX, coord.posY, pointA.label);
-      const text = middlePointKonvaObject.children[0];
-      const middlePoint = middlePointKonvaObject.children[1];
-//this.middlePoint = null;
-      text.x(pointC.posX + 10);
-      text.y(pointC.posY - 10);
-      middlePoint.x(pointC.posX);
-      middlePoint.y(pointC.posY);
-      //TODO qual necessidade comandos abaixo?
-      const aggregators = aggregatorC.aggregators.filter(x => !(x.drawer instanceof MiddlePointDrawer))
-      // console.log(" * middle-point-drawer!update(.): A.id=" + pointA.id + ", B.id=" + pointB.id + ", C.id="+pointC.id+" : " + aux + "\n#aggregators = " + aggregators.length);
-      for (let i = 0; i < aggregators.length; i++) {
-        console.log(" * i=", aggregators[i])
-        aggregators[i].drawer.update(aggregators[i], e)
-        }
-      super.batchDraw();
+    update (aggregator, e) { // @calledby ./src/app/core/drawers/drawer-aggregator.js!updateAggregators(aggregators,e): aggregator.drawer.update(aggregator, e);
+      if (!aggregator.visible) {
+        //D 
+console.log(" * middle-point-drawer!update(.): !aggregator.visible");
+        return;
+	}
+      var aux = "\n1, ", aux2; //D
+      try {
+        const pointA = aggregator.genericObject.pointA; // initial point that define MidPoint
+        const pointB = aggregator.genericObject.pointB; // final point
+        aux += "2, "; //D
+        const coord = aggregator.genericObject.getMiddlePoint(); // app/components/middle-point/models/middle-point-model.js
+        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
+        // 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);
+      } catch (error) {
+        console.log("middle-point-drawer.js!update(.): error = " + error + "\n" + aux);
+	}
+      super.batchDraw(); // app/core/drawers/drawer.js: batchDraw(): Drawer.stageBatchDraw(); | static stageBatchDraw(): DrawerManager.batchDraw();
+      // app/core/drawers/drawer-manager.js: batchDraw()
       }
 
-    insertPoint (aggregator) {
+    insertPoint (aggregator) { //REMOVER
       const pointA = aggregator.genericObject.pointA;
       const pointB = aggregator.genericObject.pointB;
       const pointCAggregator = this.pointDrawer.drawPoint();
-      const pointC = pointCAggregator.genericObject;
       aggregator.konvaObject.points([
         pointA.posX, pointA.posY,
-        pointB.posX, pointB.posY,
-        pointC.posX, pointC.posY
+        pointB.posX, pointB.posY
         ]);
       super.batchDraw();
       }