draw circumference by selected objects

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

@@ -3,6 +3,7 @@ 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";
+import { selector as Selector } from "../../../core/application/selector";
 
 export class CircumferenceDrawer extends Drawer {
     constructor() {
@@ -18,6 +19,30 @@ export class CircumferenceDrawer extends Drawer {
     }
 
     draw(e) {
+        const points = Selector.getSelectedPoints();
+        if (points == undefined || points.length == 0) {
+            this.drawByStates(e);
+        } else
+            this.drawByPoints(points, undefined, e);
+    }
+    drawByPoints(points, aggregators, e) {
+        if (aggregators == undefined)
+            aggregators = Selector.getSelectedPointsAggregators();
+        else {
+            aggregators = [
+                Objects.getByGenericObject(this.pointA)[0],
+                Objects.getByGenericObject(this.pointB)[0]
+            ];
+        }
+        this.centerAggregator = aggregators[0];
+        this.radiusAggregator = aggregators[1];
+        this.center = points[0];
+        this.radius = points[1];
+        this.createAndDraw(this.center, this.radius);
+        this.clear();
+        this.setStatus("");
+    }
+    drawByStates(e) {
         if (this.state == undefined) {
             this.state = this.states[0];
             this.setStatus("Selecione o centro da Circunferência");
@@ -29,24 +54,28 @@ export class CircumferenceDrawer extends Drawer {
         } 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("");
+            this.createAndDraw(this.center, this.radius);
         }
     }
+    createAndDraw(center, radius) {
+        this.center = center;
+        this.radius = radius;
+        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();
+        return aggregator;
+    }
     drawcircumference(circumference) {
         const circle = new Konva.Circle({
             x: circumference.center.posX,
@@ -66,12 +95,12 @@ export class CircumferenceDrawer extends Drawer {
         return circle;
 
     }
-    
-  update(aggregator, e) {
-    const center = aggregator.genericObject.center;
-    aggregator.konvaObject.radius(aggregator.genericObject.getRadius());
-    aggregator.konvaObject.x(center.posX);
-    aggregator.konvaObject.y(center.posY);
-    super.batchDraw();
-  }
+
+    update(aggregator, e) {
+        const center = aggregator.genericObject.center;
+        aggregator.konvaObject.radius(aggregator.genericObject.getRadius());
+        aggregator.konvaObject.x(center.posX);
+        aggregator.konvaObject.y(center.posY);
+        super.batchDraw();
+    }
 }

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

@@ -81,6 +81,7 @@ export class LineSegmentDrawer extends Drawer {
   }
 
   drawByPoints(points, aggregators) {
+    console.info("points", points);
     if (points == undefined || points.length < 1) return;
     this.setPointA(points[0]);
     this.setPointB(points[1]);
@@ -116,6 +117,7 @@ export class LineSegmentDrawer extends Drawer {
     Drawer.drawObject(this.konvaObject);
     this.konvaObject.zIndex(1);
     super.batchDraw();
+    this.clear();
   }
 
   update(aggregator, e) {

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

@@ -58,7 +58,7 @@ export class PointDrawer extends Drawer {
   }
 
   update(aggregator, event) {
-    aggregator.konvaObject.children.forEach(function(element) {
+    aggregator.konvaObject.children.forEach(function (element) {
       if (element.attrs.class == ELEMENTS_CLASS.POINT) {
         aggregator.genericObject.update(element, event);
       }
@@ -148,12 +148,12 @@ export class PointDrawer extends Drawer {
   }
 
   static configureCircleEvents(circle) {
-    circle.on("mouseover", function() {
+    circle.on("mouseover", function () {
       this.strokeWidth(HOVER_STYLE.strokeWidth);
       this.stroke(HOVER_STYLE.stroke);
       Stages.getCurrentKonvaStage().draw();
     });
-    circle.on("mouseout", function() {
+    circle.on("mouseout", function () {
       this.strokeWidth(STYLE.strokeWidth);
       this.stroke(STYLE.stroke);
       Stages.getCurrentKonvaStage().draw();

src/app/core/application/selector.js

@@ -36,11 +36,11 @@ export class Selector {
   }
 
   getSelectedKonvaObjects() {
-    return this.getSelectedAggregators().map(function(aggregator) {
+    return this.getSelectedAggregators().map(function (aggregator) {
       if (aggregator.konvaObject.children == undefined) {
         return aggregator.konvaObject;
       } else {
-        return aggregator.konvaObject.children.map(function(object) {
+        return aggregator.konvaObject.children.map(function (object) {
           return object;
         })[0];
       }
@@ -75,18 +75,18 @@ export class Selector {
 
   configureSelectorEvents() {
     var _this = this;
-    this._stage.on("mousedown", function(e) {
+    this._stage.on("mousedown", function (e) {
       Stages.getCurrentKonvaLayer().add(_this._selectorRect);
       _this._mode = "drawing";
       _this.startDragSelector({ x: e.evt.layerX, y: e.evt.layerY });
     });
 
-    this._stage.on("mousemove", function(e) {
+    this._stage.on("mousemove", function (e) {
       if (_this._mode === "drawing") {
         _this.updateDragSelector({ x: e.evt.layerX, y: e.evt.layerY });
       }
     });
-    this._stage.on("mouseup", function(e) {
+    this._stage.on("mouseup", function (e) {
       _this._selectorRect.remove();
       _this._mode = "";
       _this._selectorRect.visible(false);
@@ -138,11 +138,13 @@ export class Selector {
         object.fill(object.attrs.style.fill);
       } else {
         this.removeObject(aggregator);
-        object.stroke("black");
+        object.stroke("grey");
       }
     }
   }
 
+
+
   hitCheck(shape1, shape2) {
     let s1 = shape1.getClientRect();
     let s2 = shape2.getClientRect();
@@ -188,6 +190,36 @@ export class Selector {
     }
     return { x1: r1x, y1: r1y, x2: r2x, y2: r2y };
   }
+
+  clear() {
+    Objects.get().forEach(aggregator => {
+      const object = aggregator.konvaObject;
+      if (object == undefined) return;
+      if (object.attrs.selectable != undefined) {
+        if (object.attrs.selectable == false) {
+          return;
+        }
+      }
+      if (object.children != undefined && object.children.length > 0) {
+        for (let j = 0; j < object.children.length; j++) {
+          this.clearAggregator(object.children[j], aggregator);
+        }
+      } else {
+        this.clearAggregator(object, aggregator);
+      }
+    });
+  }
+  clearAggregator(object, aggregator) {
+    if (object == undefined) return;
+    if (object.attrs.style != undefined) {
+      this.removeObject(aggregator);
+      object.stroke(object.attrs.style.stroke);
+      object.fill(object.attrs.style.fill);
+    } else {
+      this.removeObject(aggregator);
+      object.stroke("grey");
+    }
+  }
 }
 
 export const selector = new Selector();

src/app/core/drawers/drawer.js

@@ -1,6 +1,7 @@
 import { drawerManager as DrawerManager } from "./drawer-manager";
 import { app as App } from "../../app";
 import { stageManager as StageManger } from "../application/stage-manager";
+import { selector as Selector } from "../application/selector";
 
 export class Drawer {
   constructor() {
@@ -29,6 +30,7 @@ export class Drawer {
     this.clearState();
     App.clearSelectedTool();
     this.setStatus("");
+    Selector.clear();
   }
   addAggregator(aggregator) {
     DrawerManager.addAggregator(aggregator);