implementation of circumference module

src/app/component-registry/circumference-component.js

@@ -0,0 +1,14 @@
+import { Component } from "../core/models/components/component";
+import { ComponentOptions } from "../core/models/components/component-options";
+import { CircumferenceDrawer } from "../components/circumference-component/drawers/circumference-drawer";
+class CircumferenceComponent extends Component {
+    constructor() {
+        const options = new ComponentOptions(
+            "c83f6d14758c48f7b8fdb5ca69e46272",
+            "Circumference",
+            "circumference"
+        );
+        super(new CircumferenceDrawer(), options);
+    }
+}
+export const circumferenceComponent = new CircumferenceComponent();

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

@@ -0,0 +1,70 @@
+import { Drawer } from "../../../core/drawers/drawer";
+import { CircumferenceModel } from "../models/circumference-model";
+import { PointDrawer } from "../../point-component/drawers/point-drawer";
+import { DrawerAggregator } from "../../../core/drawers/drawer-aggregator";
+import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
+
+export class CircumferenceDrawer extends Drawer {
+    constructor() {
+        super();
+        this.states = ["center", "radius"];
+        this.state = undefined;
+        this.circumference = undefined;
+        this.pointDrawer = new PointDrawer();
+        this.center;
+        this.radius;
+        this.centerAggregator;
+        this.konvaObject;
+    }
+
+    draw(e) {
+        if (this.state == undefined) {
+            this.state = this.states[0];
+            this.setStatus("Selecione o centro da Circunferência");
+        } else if (this.state == this.states[0]) {
+            this.centerAggregator = this.pointDrawer.drawPoint();
+            this.center = this.centerAggregator.genericObject;
+            this.state = this.states[1];
+            this.setStatus("Selecione o raio da Circunferência");
+        } else if (this.state == this.states[1]) {
+            this.radiusAggregator = this.pointDrawer.drawPoint();
+            this.radius = this.radiusAggregator.genericObject;
+            this.circumference = new CircumferenceModel(this.center, this.radius)
+            this.konvaObject = this.drawcircumference(this.circumference);
+            const aggregator = new DrawerAggregator(
+                this,
+                this.circumference,
+                this.konvaObject,
+                ELEMENTS_CLASS.CIRCUMFERENCE
+            );
+            super.addAggregator(aggregator);
+            this.centerAggregator.addAggregator(aggregator);
+            this.radiusAggregator.addAggregator(aggregator);
+            Drawer.drawObject(this.konvaObject);
+            this.konvaObject.zIndex(0);
+            super.batchDraw();
+            this.clear();
+            this.setStatus("");
+        }
+    }
+    drawcircumference(circumference) {
+        console.info(circumference.getRadius());
+        const circle = new Konva.Circle({
+            x: circumference.center.posX,
+            y: circumference.center.posY,
+            radius: circumference.getRadius(),
+            fill: "transparent",
+            stroke: "grey",
+            strokeWidth: 2,
+            strokeScaleEnabled: false,
+            transformEnabled: false,
+            draggable: false,
+            selectable: false,
+            index: 0,
+            class: ELEMENTS_CLASS.CIRCUMFERENCE,
+            connections: [],
+        });
+        return circle;
+
+    }
+}

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

@@ -0,0 +1,20 @@
+export class CircumferenceModel {
+    constructor(center, radius) {
+        this.center = center;
+        this.radius = radius;
+        this._coordinates = [];
+        this._coordinates[0] = this.center.posX;
+        this._coordinates[1] = this.center.posY;
+        this._coordinates[2] = this.radius.posX;
+        this._coordinates[3] = this.radius.posY;
+    }
+    update(aggregator, event) {
+
+    }
+    getRadius() {
+        const legA = this._coordinates[2] - this._coordinates[0];
+        const legB = this._coordinates[3] - this._coordinates[1];
+        const radius = Math.sqrt(Math.pow(legA, 2) + Math.pow(legB, 2));
+        return radius;
+    }
+}

src/app/components/line-segment-component/drawers/line-segment-drawer.js

@@ -165,7 +165,7 @@ export class LineSegmentDrawer extends Drawer {
     return line;
   }
   static configureLineEvents(line) {
-    line.on("mouseover", function() {
+    line.on("mouseover", function () {
       const selectedTool = App.getSelectedTool();
       if (
         selectedTool != undefined &&
@@ -177,7 +177,7 @@ export class LineSegmentDrawer extends Drawer {
         StageManager.getCurrentKonvaStage().draw();
       }
     });
-    line.on("mouseout", function() {
+    line.on("mouseout", function () {
       this.strokeWidth(STYLE.strokeWidth);
       this.stroke(STYLE.stroke);
       StageManager.getCurrentKonvaStage().draw();

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

@@ -1,6 +1,7 @@
 export const ELEMENTS_CLASS = {
   POINT: 0,
   INTERSECTION_POINT: 1,
+  CIRCUMFERENCE: 3,
   LINE_SEGMENT: 6
   // TO: PONTO                      =   0;
   // TO: PONTO_INTERSECAO           =   1;