src/app/component-registry/middle-point-component.js

@@ -0,0 +1,15 @@
+import { MiddlePointDrawer } from "../components/middle-point/drawers/middle-point-drawer";
+import { Component } from "../core/models/components/component";
+import { ComponentOptions } from "../core/models/components/component-options";
+class MiddlePointComponent extends Component {
+    constructor() {
+        const options = new ComponentOptions(
+            "ccaa4bb8-f7ba-432e-94d2-07d9c5812ac3",
+            "Middle Point",
+            "middle-point"
+        );
+        super(new MiddlePointDrawer(), options);
+    }
+}
+
+export const middlePointComponent = new MiddlePointComponent();

src/app/components/line-component/models/line-model.js

@@ -15,7 +15,7 @@ const Erro = 0.00001; //TODO a definir...
 export class LineModel extends LineSegmentModel {
 
   constructor(pointA, pointB, label, id) {
-    super(pointA, pointB, label, id);
+    super(pointA, pointB, undefined, label, id);
     this.setClass(ELEMENTS_CLASS.LINE);
   }
 
@@ -27,7 +27,7 @@ export class LineModel extends LineSegmentModel {
   // Intersection with circunference
   getIntersectionWithCircumference(circ) { // circ = circunference(C,radius)
     // Delegate to super class Segment
-    return super.getIntersectionByCircumference(circ);
+    return super.getIntersectionWithCircumference(circ);
   }
 
   // Intersection between Straigh Lines (SL): with sl

src/app/components/line-segment-component/models/line-segment-model.js

@@ -59,7 +59,7 @@ export class LineSegmentModel extends GeometricObject {
       case ELEMENTS_CLASS.LINE_SEGMENT:
         return this.getIntersectionByLine(geometricObject); //TODO nome deveria especificar SEGMENTO: this.getIntersectionWithSegment
       case ELEMENTS_CLASS.CIRCUMFERENCE:
-        return this.getIntersectionByCircumference(geometricObject);
+        return this.getIntersectionWithCircumference(geometricObject);
       default:
         break;
     }
@@ -97,7 +97,7 @@ export class LineSegmentModel extends GeometricObject {
   }
 
   // Intersection with circunference
-  getIntersectionByCircumference(circumference) { //TODO Nome? Melhor 'getIntersectionWithCircumference'
+  getIntersectionWithCircumference(circumference) { //TODO Nome? Melhor 'getIntersectionWithCircumference'
     const pointA = this.pointA;
     const pointB = this.pointB;
     const center = circumference.center;
@@ -122,7 +122,7 @@ export class LineSegmentModel extends GeometricObject {
     const PB = new IntersectionModel(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, undefined, this, circumference, false, 1);
 
     if (delta < 0) { //TODO Verificar? No intersection points
-      //D console.log("line-segment-model.js: getIntersectionByCircumference(.): delta<0: " + Number.MAX_SAFE_INTEGER);
+      //D console.log("line-segment-model.js: getIntersectionWithCircumference(.): delta<0: " + Number.MAX_SAFE_INTEGER);
       return [PA, PB];
     }
 
@@ -133,7 +133,7 @@ export class LineSegmentModel extends GeometricObject {
     const y1 = pointA.posY - dy * root1;
 
     if (delta == 0) { //TODO Verificar? Only one point (actually, both with the same coordinates)
-      //D console.log("line-segment-model.js: getIntersectionByCircumference(.): delta==0");
+      //D console.log("line-segment-model.js: getIntersectionWithCircumference(.): delta==0");
       PA.bind(x1, y1, undefined, this, circumference, true, 0);
       return [PA, PB];
     }
@@ -156,7 +156,7 @@ export class LineSegmentModel extends GeometricObject {
       PB.bind(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, undefined, this, circumference, false, 1);
 
     return [PA, PB];
-  } // getIntersectionByCircumference(circumference)
+  } // getIntersectionWithCircumference(circumference)
 
 
   // Considering de "level set" defined by direction d=B-A and intersection P,
@@ -191,6 +191,7 @@ export class LineSegmentModel extends GeometricObject {
     const id = map.get("id");
     const pointAId = map.get("param")[0];
     const pointBId = map.get("param")[1];
+
     const pointA = list.find(x => x.id === pointAId);
     const pointB = list.find(x => x.id === pointBId);
     const label = map.get("label")[0];

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

@@ -0,0 +1,249 @@
+/*
+ * iGeom by LInE
+ * Geometric Object: Segment
+ * Drawer to Segment
+ * www.matematica.br/igeom
+ * ./app/components/middle-point-component/drawers/middle-point-drawer.js
+ * @version 2020/11/02: indentation
+ */
+
+import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
+import { label as Label } from "../../../component-registry/label";
+import { DrawerAggregator } from "../../../core/drawers/drawer-aggregator";
+import { selector as Selector } from "../../../core/application/selector";
+import { PointDrawer } from "../../point-component/drawers/point-drawer";
+import { objects as Objects } from "../../../core/application/objects";
+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 {
+
+    static FIRST_POINT_STATE() {
+        return "FIRST_POINT";
+    }
+
+    static SECOND_POINT_STATE() {
+        return "SECOND_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.LINE_SEGMENT);
+    }
+
+    setPointA(point) {
+        this.pointA = point;
+    }
+    setPointB(point) {
+        this.pointB = point;
+    }
+    setPointC(point) {
+        this.pointC = point;
+    }
+    setAggregatorA(aggregator) {
+        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);
+    }
+
+    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.drawByMiddlePoint(e.attrs.genericObject)
+                return;
+            }
+        }
+        const points = Selector.getSelectedPoints();
+        if (points == undefined || points.length == 0) {
+            this.drawByStates();
+            return;
+        }
+        this.drawByPoints(points);
+    }
+
+
+    drawByStates(konvaObject) {
+        let aggregator = undefined;
+        if (konvaObject != undefined) {
+            aggregator = Objects.getByKonvaObject(konvaObject)[0];
+        }
+        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.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);
+        }
+    }
+
+    drawByPoints(points, aggregators) {
+        if (points == undefined || points.length < 1) return;
+        console.log("points", points);
+        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();
+    }
+
+    drawByMiddlePoint(middlePoint) {
+        this.middlePoint = middlePoint;
+        const group = SelectableDrawer.getKonvaGroup(false);
+        const text = MiddlePointDrawer.getKonvaText(middlePoint, middlePoint.label);
+        group.add(text);
+        const konvaObject = MiddlePointDrawer.getKonvaLine(middlePoint.pointA, middlePoint.pointB);
+        group.add(konvaObject);
+        super.setKonvaObject(group);
+        const aggregator = new DrawerAggregator(
+            this, this.middlePoint,
+            group, ELEMENTS_CLASS.LINE_SEGMENT
+        );
+        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); //
+
+        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);
+    }
+
+    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]
+            ];
+        }
+        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();
+        console.log(aggregator.konvaObject)
+        pointC.bind(coord.posX, coord.posY);
+        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
+        ]);
+        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
+        ]);
+        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 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;
+    }
+
+    static drawKonvaLine(pointA, pointB) {
+        const line = MiddlePointDrawer.getKonvaLine(pointA, pointB);
+        return line;
+    }
+
+}

src/app/components/middle-point/models/middle-point-model.js

@@ -0,0 +1,211 @@
+/*
+ * iGeom by LInE
+ * Geometric Object: Segment
+ * Manage intersection of Segment with: Sements, Circumference
+ * www.matematica.br/igeom
+ * .app/components/line-segment-component/models/line-segment-model.js
+ * @version 2020/11/02: Implemented Line instersection
+ */
+
+import { GeometricObject } from "../../../core/models/objects/geometric-object";
+import { IntersectionModel } from "../../intersection-component/models/intersection-model";
+import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
+
+export class MiddlePointModel extends GeometricObject {
+
+    constructor(pointA, pointB, pointC, label, id) {
+        super(id);
+        this.pointA = pointA;
+        this.pointB = pointB;
+        this.pointC = pointC;
+        const middlePoint = this.getMiddlePoint();
+        pointC.bind(middlePoint.posX, middlePoint.posY);
+        this.setLabel(label);
+        super.setClass(ELEMENTS_CLASS.MIDDLE_POINT);
+        this.definitions.push(this.pointA);
+        this.definitions.push(this.pointB);
+        this.definitions.push(this.pointC);
+
+    }
+
+    getStraight() {
+        const aX = this.pointA.posX;
+        const aY = this.pointA.posY;
+        const bX = this.pointB.posX;
+        const bY = this.pointB.posY;
+        const a = bY - aY;
+        const b = aX - bX;
+        const c = a * aX + b * aY;
+        return [a, b, c];
+    }
+
+    // Return [(Bx-Ax, By-Ay)]
+    getDirection() {
+        const aX = this.pointA.posX;
+        const aY = this.pointA.posY;
+        const bX = this.pointB.posX;
+        const bY = this.pointB.posY;
+        const a = bX - aX;
+        const b = bY - aY;
+        return [a, b];
+    }
+
+
+    getMiddlePoint() {
+        return MiddlePointModel.getMiddlePointPos(this.pointA, this.pointB);
+    }
+
+    static getMiddlePointPos(pointA, pointB) {
+        const x = (pointA.posX + pointB.posX) / 2;
+        const y = (pointA.posY + pointB.posY) / 2;
+        return { posX: x, posY: y };
+    }
+
+    getIntersection(geometricObject) {
+        switch (geometricObject.elementClass) {
+            case ELEMENTS_CLASS.LINE: // StraightLine
+                return geometricObject.getIntersectionWithStraightLine(this); // Delegate to StraightLine
+            case ELEMENTS_CLASS.LINE_SEGMENT:
+                return this.getIntersectionByLine(geometricObject); //TODO nome deveria especificar SEGMENTO: this.getIntersectionWithSegment
+            case ELEMENTS_CLASS.CIRCUMFERENCE:
+                return this.getIntersectionWithCircumference(geometricObject);
+            default:
+                break;
+        }
+    }
+
+    getDeterminantByLine(lineSegment) {
+        const og1 = this.getStraight();
+        const og2 = lineSegment.getStraight();
+        const a1 = og1[0];
+        const b1 = og1[1];
+        const a2 = og2[0];
+        const b2 = og2[1];
+        const determinant = a1 * b2 - a2 * b1;
+        return determinant;
+    }
+
+    getIntersectionByLine(lineSegment) { //TODO nome deveria especificar SEGMENTO: getIntersectionWithSegment
+        const og1 = this.getStraight(); //r
+        const og2 = lineSegment.getStraight(); //s
+        const a1 = og1[0];
+        const b1 = og1[1];
+        const c1 = og1[2];
+        const a2 = og2[0];
+        const b2 = og2[1];
+        const c2 = og2[2];
+        const determinant = a1 * b2 - a2 * b1;
+        if (determinant == 0) {
+            return [new IntersectionModel(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, undefined, this, lineSegment, true, 0)];
+        }
+        else {
+            const x = (b2 * c1 - b1 * c2) / determinant;
+            const y = (a1 * c2 - a2 * c1) / determinant;
+            return [new IntersectionModel(x, y, undefined, this, lineSegment, true, 0)];
+        }
+    }
+
+    // Intersection with circunference
+    getIntersectionWithCircumference(circumference) {
+        const pointA = this.pointA;
+        const pointB = this.pointB;
+        const center = circumference.center;
+        const radius = circumference.getRadius();
+
+        const dx = pointB.posX - pointA.posX;
+        const dy = pointB.posY - pointA.posY;
+
+        const cx = center.posX - pointA.posX;
+        const cy = center.posY - pointA.posY;
+
+        const a = dx * dx + dy * dy; // ||B-A||^2 = (B-A)'(B-A)
+        const b = dx * cx + dy * cy; // (B-A)'(C-A)
+        const c = cx * cx + cy * cy - radius * radius; // ||C-A||^2 - r^2
+
+        const D = b / a; // (B-A)'(C-A) / (B-A)'(B-A)
+        const q = c / a; // (||C-A||^2 - r^2) / (B-A)'(B-A)
+
+        const delta = D * D - q;
+
+        const PA = new IntersectionModel(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, undefined, this, circumference, false, 0);
+        const PB = new IntersectionModel(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, undefined, this, circumference, false, 1);
+
+        if (delta < 0) { //TODO Verificar? No intersection points
+            //D console.log("line-segment-model.js: getIntersectionWithCircumference(.): delta<0: " + Number.MAX_SAFE_INTEGER);
+            return [PA, PB];
+        }
+
+        const deltaSqrt = Math.sqrt(delta);
+        const root1 = -D + deltaSqrt;
+        const root2 = -D - deltaSqrt;
+        const x1 = pointA.posX - dx * root1
+        const y1 = pointA.posY - dy * root1;
+
+        if (delta == 0) { //TODO Verificar? Only one point (actually, both with the same coordinates)
+            //D console.log("line-segment-model.js: getIntersectionWithCircumference(.): delta==0");
+            PA.bind(x1, y1, undefined, this, circumference, true, 0);
+            return [PA, PB];
+        }
+
+        if (delta == 0) {
+            PA.bind(x1, y1, undefined, this, circumference, true, 0);
+            return [
+                PA,
+                PB
+            ];
+        }
+
+        const x2 = pointA.posX - dx * root2;
+        const y2 = pointA.posY - dy * root2;
+
+        PA.bind(x1, y1, undefined, this, circumference, true, 0);
+        PB.bind(x2, y2, undefined, this, circumference, true, 1);
+
+        if (!this.insideSegment(PB.posX, PB.posY))
+            PB.bind(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, undefined, this, circumference, false, 1);
+
+        return [PA, PB];
+    } // getIntersectionWithCircumference(circumference)
+
+
+    // Considering de "level set" defined by direction d=B-A and intersection P,
+    // if d'P<d'A or d'P>d'B, then intersection is empty
+    insideSegment(intersecX, intersecY) {
+        //D console.log("line-segment-model.js: insideSegment(.)");
+        const valuesR = this.getDirection(); // get d=B-A
+        const dirX = valuesR[0]; // Bx-Ax
+        const dirY = valuesR[1]; // By-Ay
+        const cInterA = dirX * intersecX + dirY * intersecY;
+
+        // comparacao cv do ponto A > cv da intersec =>  vazio
+        const cRA = dirX * this.pointA.posX + dirY * this.pointA.posY;
+
+        if (cInterA < cRA) { // d'P < d'A
+            return false;
+        }
+
+        // comparacao cv do ponto B < cv da intersec =>  vazio
+        const cRB = dirX * this.pointB.posX + dirY * this.pointB.posY;
+
+        if (cInterA > cRB) { // d'P > d'B
+            this.posX = Number.MAX_SAFE_INTEGER;
+            this.posY = Number.MAX_SAFE_INTEGER;
+            return false;
+        }
+
+        return true;
+    }
+
+    static do(map, list) {
+        const id = map.get("id");
+        const pointAId = map.get("param")[0];
+        const pointBId = map.get("param")[1];
+        const pointCId = map.get("param")[3];
+        const pointA = list.find(x => x.id === pointAId);
+        const pointB = list.find(x => x.id === pointBId);
+        const pointC = list.find(x => x.id === pointCId);
+        const label = map.get("label")[0];
+        return new MiddlePointModel(pointA, pointB, pointC, label, id);
+    }
+
+}

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

@@ -45,7 +45,8 @@ export class PointDrawer extends SelectableDrawer {
     if (point == undefined) {
       if (pos == undefined) return;
       drawResult = PointDrawer.drawAndGetPoint(pos.x, pos.y, true);
-    } else drawResult = PointDrawer.drawPoint(point, true);
+    } else
+      drawResult = PointDrawer.drawPoint(point, true, point.draggable);
 
     this.point = drawResult.geometricObject;
     super.setKonvaObject(drawResult.konvaObject);
@@ -106,9 +107,15 @@ export class PointDrawer extends SelectableDrawer {
   }
 
   static getKonvaCircle(point, draggable, selectable) {
-    const fill = draggable == undefined || draggable ? STYLE.fill : STYLE.fill2;
-    const stroke =
-      draggable == undefined || draggable ? STYLE.stroke : STYLE.fill2;
+    console.log("point", point)
+    let fill = draggable == undefined || draggable ? STYLE.fill : STYLE.fill2;
+    let stroke = draggable == undefined || draggable ? STYLE.stroke : STYLE.fill2;
+
+    if (point.backgroundColor != undefined) {
+      fill = point.backgroundColor;
+      stroke = point.backgroundColor;
+    }
+
     return new Konva.Circle({
       x: point.posX,
       y: point.posY,

src/app/components/point-component/models/point-model.js

@@ -7,48 +7,49 @@
  * @version 2020/11/02: Implemented Line instersection
  */
 
-import { GeometricObject   } from "../../../core/models/objects/geometric-object";
-import { ELEMENTS_CLASS   } from "../../../core/enums/elements-class-enum";
+import { GeometricObject } from "../../../core/models/objects/geometric-object";
+import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
 
 export class PointModel extends GeometricObject {
 
   // @param {number  } posX X Position ex: (38.5) float precision
   // @param {number  } posY Y Position  ex: (-38.5) float precision
   // @param {string  } label  Label ex: (P)
-  constructor (posX, posY, label, id) {
+  constructor(posX, posY, label, id) {
     super(id);
     this.posX = posX;
     this.posY = posY;
     this.setLabel(label);
     super.setClass(ELEMENTS_CLASS.POINT);
-    this.definitions = [{ id: this.posX + 5   }, { id: -this.posY - 5   }];
+    this.definitions = [{ id: this.posX + 5 }, { id: -this.posY - 5 }];
     this.color = -16711936;
-    }
+  }
 
   // @param {konvaObject  } Object of Konva Library
   // @param {*  } event 
-  update (konvaObject, event) {
+  update(konvaObject, event) {
     this.posX = konvaObject.attrs.startPosX + event.target._lastPos.x;
     this.posY = konvaObject.attrs.startPosY + event.target._lastPos.y;
-    this.definitions = [{ id: this.posX + 5   }, { id: -this.posY - 5   }];
-    }
+    this.definitions = [{ id: this.posX + 5 }, { id: -this.posY - 5 }];
+  }
 
-  bind (posX, posY, label) {
+  bind(posX, posY, label) {
     this.posX = posX;
     this.posY = posY;
-    this.setLabel(label);
-    this.definitions = [{ id: this.posX + 5   }, { id: -this.posY - 5   }];
-    }
+    this.definitions = [{ id: this.posX + 5 }, { id: -this.posY - 5 }];
+    if (label != undefined)
+      this.setLabel(label);
+  }
 
   // Create new Intersection By Line of Script .geo
   // @param {Map  } map JavaScript Map
   // @param {List  } list List of Generic Objects
-  static do (map, list) {
+  static do(map, list) {
     const id = map.get("id");
     const x = map.get("param")[0] - 5;
     const y = -map.get("param")[1] + 5;
     const label = map.get("label")[0];
     return new PointModel(x, y, label, id);
-    }
+  }
 
-  }
+}

src/app/core/enums/elements-class-enum.js

@@ -13,6 +13,7 @@ export const ELEMENTS_CLASS = {
   CIRCUMFERENCE: 3,
   LINE: 4,
   LINE_SEGMENT: 6,
+  MIDDLE_POINT: 13
   // TO: PONTO                      =   0;
   // TO: PONTO_INTERSECAO           =   1;
   // TO: PONTO_SOBRE                =   2;
@@ -33,7 +34,7 @@ export const ELEMENTS_CLASS = {
   // TO: LOCUS                      =  17;
   // TO: MED_TEXTO                  =  20;  // para textos
   // TO: CIRCUNFERENCIA_INT         =  21; // [11/01/2006] estava 56, mas este num. e de rotacao
-  };
+};
 
 // @param {number} code
 export function fromCodeToClass(code) {
@@ -51,6 +52,6 @@ export function fromCodeToClass(code) {
     default:
       console.error("Tipo não suportado" + "\"" + code + "\"", code)
       return ELEMENTS_CLASS.POINT;
-    }
+  }
 
-  }
+}

src/app/core/models/objects/geometric-object.js

@@ -9,7 +9,7 @@ export class GeometricObject extends DynamicObject {
     this.borderColor;
     this.backgroundColor;
     this.edgeThinckness;
-    this.draggable = false;
+    this.draggable = true;
   }
   setBorderColor(color) {
     this.borderColor = color;