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

Improved indentation: inserted space to differentiate function declaration from its use.
Several "flags" trying to identify the update bug when moving (green) point with MidPoint (the moved one is the last one constructed)
TODO: not solved yet!

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

@@ -19,255 +19,294 @@ import { MiddlePointModel } from "../models/middle-point-model";
 
 export class MiddlePointDrawer extends SelectableDrawer {
 
-    static FIRST_POINT_STATE() {
-        return "FIRST_POINT";
-    }
+    static count2debug = 1; //DEBUG
 
-    static SECOND_POINT_STATE() {
-        return "SECOND_POINT";
-    }
+    static FIRST_POINT_STATE () {
+      return "FIRST_POINT";
+      }
 
-    constructor() {
-        super();
-        this.pointA;
-        this.pointB;
-        this.pointC;
-        this.aggregatorA;
-        this.aggregatorB;
-        this.aggregatorC;
-        this.label;
-        this.states = [MiddlePointDrawer.FIRST_POINT_STATE, MiddlePointDrawer.SECOND_POINT_STATE];
-        this.middlePoint;
-        this.pointDrawer = new PointDrawer();
-        super.setElementClass(ELEMENTS_CLASS.MIDDLE_POINT);
-    }
+    static SECOND_POINT_STATE () {
+      return "SECOND_POINT";
+      }
+
+    constructor () { // constructor of any MidPoint (called once at the begining
+      super();
+      this.id = MiddlePointDrawer.count2debug++; //DEBUG
+      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!)
+      this.pointDrawer = new PointDrawer();
+      super.setElementClass(ELEMENTS_CLASS.MIDDLE_POINT);
+      }
 
     setPointA(point) {
-        this.pointA = point;
-    }
+      this.pointA = point;
+      }
     setPointB(point) {
-        this.pointB = point;
-    }
+      this.pointB = point;
+      }
     setPointC(point) {
-        this.pointC = point;
-    }
+      this.pointC = point;
+      }
     setAggregatorA(aggregator) {
-        this.aggregatorA = aggregator;
-        this.setPointA(aggregator.genericObject);
-    }
+      this.aggregatorA = aggregator;
+      this.setPointA(aggregator.genericObject);
+      }
     setAggregatorB(aggregator) {
-        this.aggregatorB = aggregator;
-        this.setPointB(aggregator.genericObject);
-    }
-    setAggregatorC(aggregator) {
-        this.aggregatorC = aggregator;
-        this.setPointC(aggregator.genericObject);
-    }
+      this.aggregatorB = aggregator;
+      this.setPointB(aggregator.genericObject);
+      }
+    setAggregatorC (aggregator) {
+      this.aggregatorC = aggregator;
+      this.setPointC(aggregator.genericObject);
+      }
 
-    draw(e) {
-        console.log("a")
-        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("b")
-                this.drawByStates(e.target);
-                return;
-            }
-            else if (e.attrs != undefined && e.attrs.genericObject != undefined) {
-                console.log("c")
-                this.drawByMiddlePoint(e.attrs.genericObject)
-                return;
-            }
+    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   }
+      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
+          this.drawByStates(e.target); // create the final point defining this MidPoint
+          return;
+          }
+        else if (e.attrs != undefined && e.attrs.genericObject != undefined) {
+          console.log(" * 5. c");
+          this.drawByMiddlePoint(e.attrs.genericObject)
+          return;
+          }
         }
 
-        const points = Selector.getSelectedPoints();
-        if (points == undefined || points.length == 0) {
-            this.drawByStates();
-            return;
+      // Selected MidPoint constructor
+      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
+        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());
-        pointC.draggable = false;
-        pointC.backgroundColor = "#f54260";
-        const aggregatorC = this.pointDrawer.drawPoint(pointC);
-        this.setAggregatorC(aggregatorC);
-        points.push(pointC);
-        this.drawByPoints(points);
-    }
+      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);
+      } // draw(e)
 
 
-    drawByStates(konvaObject) {
-        let aggregator = undefined;
-        if (konvaObject != undefined) {
-            aggregator = Objects.getByKonvaObject(konvaObject)[0];
+    drawByStates (konvaObject) {
+      let aggregator = undefined;
+      if (konvaObject != undefined) {
+        aggregator = Objects.getByKonvaObject(konvaObject)[0];
         }
-        if (this.state == undefined) {
-            super.setState(MiddlePointDrawer.FIRST_POINT_STATE);
+      if (this.state == undefined) {
+        super.setState(MiddlePointDrawer.FIRST_POINT_STATE);
         }
-        else if (this.state == MiddlePointDrawer.FIRST_POINT_STATE) {
-            aggregator = aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
-            this.setAggregatorA(aggregator);
-            super.setState(MiddlePointDrawer.SECOND_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);
+        super.setState(MiddlePointDrawer.SECOND_POINT_STATE);
         }
-        else if (this.state == MiddlePointDrawer.SECOND_POINT_STATE) {
-            aggregator = aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
-
-            this.setAggregatorB(aggregator);
-            const coord = MiddlePointModel.getMiddlePointPos(this.pointA, this.pointB);
-            const pointC = new PointModel(coord.posX, coord.posY, Label.draw());
-            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]);
-            super.setState(MiddlePointDrawer.FIRST_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
+        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!
+        super.setState(MiddlePointDrawer.FIRST_POINT_STATE); // return to the state initial
         }
-    }
+      }
 
-    drawByPoints(points, aggregators) {
-        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);
-        this.drawByMiddlePoint(this.middlePoint);
-        this.reset();
-    }
+    drawByPoints (points, aggregators) {
+      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();
+      } // drawByPoints(points, aggregators)
 
-    drawByMiddlePoint(middlePoint) {
-        this.middlePoint = middlePoint;
-        const group = SelectableDrawer.getKonvaGroup(false);
-        const text = MiddlePointDrawer.getKonvaText(middlePoint, middlePoint.label);
-        const line = MiddlePointDrawer.getKonvaLine(middlePoint.pointA, middlePoint.pointB);
-        group.add(text);
-        group.add(line);
-        super.setKonvaObject(group);
-        const aggregator = new DrawerAggregator(
-            this, this.middlePoint,
-            group, ELEMENTS_CLASS.MIDDLE_POINT
+    drawByMiddlePoint (middlePoint) {
+      this.middlePoint = middlePoint;
+      const group = SelectableDrawer.getKonvaGroup(false);
+      const text = MiddlePointDrawer.getKonvaText(middlePoint, middlePoint.label);
+      const line = MiddlePointDrawer.getKonvaLine(middlePoint.pointA, middlePoint.pointB);
+      group.add(text);
+      group.add(line);
+      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);
-        aggregators[1].addAggregator(aggregator);
-        aggregators[0].addAggregator(aggregator);
+      super.addAggregator(aggregator);
+      const aggregators = this.resolveAggregators([this.middlePoint.pointA, this.middlePoint.pointB, this.middlePoint.pointC], undefined);
+      aggregators[2].addAggregator(aggregator);
+      aggregators[1].addAggregator(aggregator);
+      aggregators[0].addAggregator(aggregator);
 
+      //D console.log("app/components/middle-point-component/drawers/middle-point-drawer.js: drawByMiddlePoint"); //leo
+      SelectableDrawer.drawObject(this.konvaObject); //
 
-        //D console.log("./app/components/middle-point-component/drawers/middle-point-drawer.js: drawByMiddlePoint"); //leo
-        SelectableDrawer.drawObject(this.konvaObject); //
+      this.konvaObject.zIndex(1);
 
-        this.konvaObject.zIndex(1);
+      super.batchDraw(); // ../../../core/drawers/drawer-aggregator.js
+      SelectableDrawer.setMaxIndex(aggregators[0].konvaObject);
+      SelectableDrawer.setMaxIndex(aggregators[1].konvaObject);
+      SelectableDrawer.setMaxIndex(aggregators[2].konvaObject);
+      } // drawByMiddlePoint(middlePoint)
 
-        super.batchDraw(); // ../../../core/drawers/drawer-aggregator.js
-        SelectableDrawer.setMaxIndex(aggregators[0].konvaObject);
-        SelectableDrawer.setMaxIndex(aggregators[1].konvaObject);
-        SelectableDrawer.setMaxIndex(aggregators[2].konvaObject);
-    }
+    resolveAggregators (points, aggregators, selected) {
+      this.pointA = points[0];
+      this.pointB = points[1];
+      this.pointC = points[2];
 
-    resolveAggregators(points, aggregators, selected) {
-        this.pointA = points[0];
-        this.pointB = points[1];
-        this.pointC = points[2];
-
-        if (aggregators == undefined && selected == true)
-            aggregators = Selector.getSelectedPointsAggregators();
-        else {
-            aggregators = [
-                Objects.getByGenericObject(this.pointA)[0],
-                Objects.getByGenericObject(this.pointB)[0],
-                Objects.getByGenericObject(this.pointC)[0]
-            ];
+      if (aggregators == undefined && selected == true)
+        aggregators = Selector.getSelectedPointsAggregators();
+      else {
+        aggregators = [
+          Objects.getByGenericObject(this.pointA)[0],
+          Objects.getByGenericObject(this.pointB)[0],
+          Objects.getByGenericObject(this.pointC)[0]
+          ];
         }
-        return aggregators;
-    }
+      return aggregators;
+      }
 
-    update(aggregator, e) {
-        if (!aggregator.visible) return;
-        const pointA = aggregator.genericObject.pointA;
-        const pointB = aggregator.genericObject.pointB;
-        const pointC = aggregator.genericObject.pointC;
-        const coord = aggregator.genericObject.getMiddlePoint();
-        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]
-        text.x(pointC.posX + 10);
-        text.y(pointC.posY - 10);
-        middlePoint.x(pointC.posX);
-        middlePoint.y(pointC.posY);
-        const aggregators = aggregatorC.aggregators.filter(x => !(x.drawer instanceof MiddlePointDrawer))
-        for (let i = 0; i < aggregators.length; i++) {
-            console.log("i", aggregators[i])
-            aggregators[i].drawer.update(aggregators[i], e)
+    //DEBUG
+    distancePointMouseclick (midPoint, e) {
+      var distX = midPoint.posX-e.evt.offsetX, distY = midPoint.posY-e.evt.offsetY;
+      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();
-    }
+      super.batchDraw();
+      }
 
-    insertPoint(aggregator) {
-        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
+    insertPoint (aggregator) {
+      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
         ]);
-        super.batchDraw();
-    }
+      super.batchDraw();
+      }
 
-    static getKonvaText(MiddlePoint, label) {
-        const pos = MiddlePoint.getMiddlePoint();
-        return new Konva.Text({
-            x: pos.posX,
-            y: pos.posY - 20,
-            text: label,
-            fontSize: 14,
-            fontFamily: "Calibri",
-            fill: "#434a45",
-            stroke: "#ffffff",
-            strokeWidth: 0.2,
-            draggable: false,
-            resizeEnabled: false,
-            transformEnabled: false,
-            selectable: false
+    static getKonvaText (MiddlePoint, label) {
+      const pos = MiddlePoint.getMiddlePoint();
+      return new Konva.Text({
+        x: pos.posX,
+        y: pos.posY - 20,
+        text: label,
+        fontSize: 14,
+        fontFamily: "Calibri",
+        fill: "#434a45",
+        stroke: "#ffffff",
+        strokeWidth: 0.2,
+        draggable: false,
+        resizeEnabled: false,
+        transformEnabled: false,
+        selectable: false
         });
-    }
+      }
 
-    static getKonvaLine(pointA, pointB, useLabel) {
-        const points = [pointA.posX, pointA.posY, pointB.posX, pointB.posY];
-        const line = new Konva.Line({
-            points: points,
-            stroke: "grey",
-            strokeWidth: 2,
-            lineJoin: "round",
-            draggable: false,
-            strokeScaleEnabled: false,
-            class: ELEMENTS_CLASS.LINE_SEGMENT,
-            connections: [],
-            index: 1,
-            selectable: false,
-            draggable: false,
-            style: { stroke: "grey", fill: "grey" }
+    static getKonvaLine (pointA, pointB, useLabel) {
+      const points = [pointA.posX, pointA.posY, pointB.posX, pointB.posY];
+      const line = new Konva.Line({
+        points: points,
+        stroke: "grey",
+        strokeWidth: 2,
+        lineJoin: "round",
+        draggable: false,
+        strokeScaleEnabled: false,
+        class: ELEMENTS_CLASS.LINE_SEGMENT,
+        connections: [],
+        index: 1,
+        selectable: false,
+        draggable: false,
+        style: { stroke: "grey", fill: "grey" }
         });
-        SelectableDrawer.setSelectableIfIntersectionChanged(line);
-        return line;
-    }
+      SelectableDrawer.setSelectableIfIntersectionChanged(line);
+      return line;
+      }
 
     static drawKonvaLine(pointA, pointB) {
-        const line = MiddlePointDrawer.getKonvaLine(pointA, pointB);
-        return line;
-    }
+      const line = MiddlePointDrawer.getKonvaLine(pointA, pointB);
+      return line;
+      }
 
-}
+  }