enable selectable circumference

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

@@ -1,107 +1,108 @@
-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";
 import { selector as Selector } from "../../../core/application/selector";
+import { SelectableDrawer } from "../../../core/drawers/selectable-drawer";
 
-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;
-    }
+export class CircumferenceDrawer extends SelectableDrawer {
+  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) {
-        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");
-        } 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.createAndDraw(this.center, this.radius);
-            this.clear();
-        }
+  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]
+      ];
     }
-    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;
+    this.centerAggregator = aggregators[0];
+    this.radiusAggregator = aggregators[1];
+    this.center = points[0];
+    this.radius = points[1];
+    this.createAndDraw(this.center, this.radius);
+    this.reset();
+    this.setStatus("");
+  }
+  drawByStates(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.createAndDraw(this.center, this.radius);
+      this.reset();
+      this.state = this.states[0];
     }
-    drawcircumference(circumference) {
-        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;
+  }
+  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);
+    SelectableDrawer.drawObject(this.konvaObject);
+    this.konvaObject.zIndex(0);
+    super.batchDraw();
+    return aggregator;
+  }
+  drawcircumference(circumference) {
+    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,
+      style: { stroke: "grey", fill: "grey" }
+    });
+    SelectableDrawer.setSelectableIfToolChanged(circle);
+    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) {
+    if (!aggregator.visible) return;
+    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/intersection-component/drawers/intersection-drawer.js

@@ -64,7 +64,8 @@ export class IntersectionDrawer extends Drawer {
     const intersectionPoint = this.aggregatorA.genericObject.getIntersection(
       this.aggregatorB.genericObject
     );
-    const point = PointDrawer.drawPoint(intersectionPoint, false, false);
+    intersectionPoint.update();
+    const point = PointDrawer.drawPoint(intersectionPoint, false, false, true);
     const aggregator = new DrawerAggregator(
       this,
       intersectionPoint,
@@ -81,8 +82,28 @@ export class IntersectionDrawer extends Drawer {
   }
   update(aggregator, e) {
     aggregator.genericObject.update(aggregator, e);
+    if (!aggregator.genericObject.visible) {
+      if (aggregator.visible) {
+        aggregator.konvaObject.hide();
+        aggregator.aggregators.forEach(a => {
+          a.visible = false;
+          a.konvaObject.hide();
+        });
+        this.batchDraw();
+      }
+      aggregator.visible = false;
+      return;
+    }
     aggregator.konvaObject.x(aggregator.genericObject.posX);
     aggregator.konvaObject.y(aggregator.genericObject.posY);
+    if (!aggregator.visible) {
+      aggregator.konvaObject.show();
+      aggregator.aggregators.forEach(a => {
+        a.visible = true;
+        a.konvaObject.show();
+      });
+      aggregator.visible = true;
+    }
     this.batchDraw();
   }
 }

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

@@ -6,6 +6,7 @@ export class IntersectionModel extends PointModel {
     this.r = r;
     this.s = s;
   }
+
   update(aggregator, event) {
     const intersection = this.r.getIntersection(this.s);
     this.posX = parseFloat(intersection.posX.toFixed(2));
@@ -13,13 +14,16 @@ export class IntersectionModel extends PointModel {
     if (!this.r.insideSegment(this.posX, this.posY)) {
       this.posX = Number.MAX_SAFE_INTEGER;
       this.posY = Number.MAX_SAFE_INTEGER;
+      this.visible = false;
       return;
     }
 
     if (!this.s.insideSegment(this.posX, this.posY)) {
       this.posX = Number.MAX_SAFE_INTEGER;
       this.posY = Number.MAX_SAFE_INTEGER;
+      this.visible = false;
       return;
     }
+    this.visible = true;
   }
 }

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

@@ -1,4 +1,3 @@
-import { Drawer } from "../../../core/drawers/drawer";
 import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
 import { label as Label } from "../../../component-registry/label";
 import { DrawerAggregator } from "../../../core/drawers/drawer-aggregator";
@@ -6,19 +5,8 @@ import { selector as Selector } from "../../../core/application/selector";
 import { LineSegmentModel } from "../models/line-segment-model";
 import { PointDrawer } from "../../point-component/drawers/point-drawer";
 import { objects as Objects } from "../../../core/application/objects";
-import { app as App } from "../../../app";
-import { stageManager as StageManager } from "../../../core/application/stage-manager";
-const HOVER_STYLE = {
-  fill: "#33BCFF",
-  strokeWidth: 4,
-  stroke: "#33BCFF"
-};
-const STYLE = {
-  fill: "grey",
-  strokeWidth: 2,
-  stroke: "grey"
-};
-export class LineSegmentDrawer extends Drawer {
+import { SelectableDrawer } from "../../../core/drawers/selectable-drawer";
+export class LineSegmentDrawer extends SelectableDrawer {
   static FIRST_POINT_STATE() {
     return "FIRST_POINT";
   }
@@ -81,7 +69,6 @@ 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]);
@@ -93,7 +80,6 @@ export class LineSegmentDrawer extends Drawer {
         Objects.getByGenericObject(this.pointB)[0]
       ];
     }
-
     this.label = Label.draw();
     this.lineSegment = new LineSegmentModel(
       this.pointA,
@@ -114,13 +100,16 @@ export class LineSegmentDrawer extends Drawer {
     super.addAggregator(aggregator);
     aggregators[1].addAggregator(aggregator);
     aggregators[0].addAggregator(aggregator);
-    Drawer.drawObject(this.konvaObject);
+    SelectableDrawer.drawObject(this.konvaObject);
     this.konvaObject.zIndex(1);
     super.batchDraw();
-    this.clear();
+    SelectableDrawer.setMaxIndex(aggregators[0].konvaObject);
+    SelectableDrawer.setMaxIndex(aggregators[1].konvaObject);
+    this.reset();
   }
 
   update(aggregator, e) {
+    if (!aggregator.visible) return;
     const pointA = aggregator.genericObject.pointA;
     const pointB = aggregator.genericObject.pointB;
     aggregator.konvaObject.points([
@@ -161,31 +150,12 @@ export class LineSegmentDrawer extends Drawer {
       connections: [],
       index: 1,
       selectable: false,
-      draggable: false
+      draggable: false,
+      style: { stroke: "grey", fill: "grey" }
     });
-    LineSegmentDrawer.configureLineEvents(line);
+    SelectableDrawer.setSelectableIfToolChanged(line);
     return line;
   }
-  static configureLineEvents(konvaObject) {
-    konvaObject.on("mouseover", function() {
-      const selectedTool = App.getSelectedTool();
-      if (
-        selectedTool != undefined &&
-        selectedTool.drawer != undefined &&
-        selectedTool.drawer.elementClass == ELEMENTS_CLASS.INTERSECTION_POINT
-      ) {
-        this.strokeWidth(HOVER_STYLE.strokeWidth);
-        this.stroke(HOVER_STYLE.stroke);
-        StageManager.getCurrentKonvaStage().draw();
-      }
-    });
-    konvaObject.on("mouseout", function() {
-      this.strokeWidth(STYLE.strokeWidth);
-      this.stroke(STYLE.stroke);
-      StageManager.getCurrentKonvaStage().draw();
-    });
-    return konvaObject;
-  }
 
   static drawKonvaLine(pointA, pointB) {
     const line = LineSegmentDrawer.getKonvaLine(pointA, pointB);

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

@@ -1,23 +1,18 @@
-import { Drawer } from "../../../core/drawers/drawer";
 import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
 import { label as Label } from "../../../component-registry/label";
 import { app as App } from "../../../app";
 import { PointModel } from "../models/point-model";
 import { DrawerAggregator } from "../../../core/drawers/drawer-aggregator";
-import { stageManager as Stages } from "../../../core/application/stage-manager";
 import { objects } from "../../../core/application/objects";
+import { SelectableDrawer } from "../../../core/drawers/selectable-drawer";
 
-const HOVER_STYLE = {
-  fill: "#9bc364",
-  strokeWidth: 2,
-  stroke: "#FF0000"
-};
 const STYLE = {
   fill: "#9bc364",
+  fill2: "#828783",
   strokeWidth: 1,
   stroke: "#9bc364"
 };
-export class PointDrawer extends Drawer {
+export class PointDrawer extends SelectableDrawer {
   constructor() {
     super();
     this.point;
@@ -58,7 +53,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);
       }
@@ -76,9 +71,9 @@ export class PointDrawer extends Drawer {
     return PointDrawer.drawPoint(new PointModel(x, y), useLabel);
   }
 
-  static drawPoint(point, useLabel, draggable) {
-    const group = Drawer.getKonvaGroup(draggable);
-    const circle = PointDrawer.getKonvaCircle(point, draggable);
+  static drawPoint(point, useLabel, draggable, selectable) {
+    const group = SelectableDrawer.getKonvaGroup(draggable);
+    const circle = PointDrawer.getKonvaCircle(point, draggable, selectable);
     if (useLabel != undefined && useLabel) {
       const label = Label.draw();
       point.setLabel(label);
@@ -90,25 +85,24 @@ export class PointDrawer extends Drawer {
         group.add(text);
       }
     }
+    if (selectable == undefined || selectable)
+      SelectableDrawer.setSelectable(circle);
     if (useLabel) {
       group.add(circle);
-      if (draggable == undefined || draggable)
-        PointDrawer.configureCircleEvents(circle);
-      Drawer.drawObject(group);
-      group.zIndex(Number.MAX_SAFE_INTEGER);
-      Drawer.stageBatchDraw();
-
+      SelectableDrawer.drawObject(group);
+      SelectableDrawer.setMaxIndex(group);
       return { geometricObject: point, konvaObject: group };
     } else {
-      Drawer.drawObject(circle);
-      group.zIndex(Number.MAX_SAFE_INTEGER);
-      Drawer.stageBatchDraw();
+      SelectableDrawer.drawObject(circle);
+      SelectableDrawer.setMaxIndex(circle);
       return { geometricObject: point, konvaObject: circle };
     }
   }
 
-  static getKonvaCircle(point, draggable) {
-    const fill = draggable == undefined || draggable ? STYLE.fill : "#828783";
+  static getKonvaCircle(point, draggable, selectable) {
+    const fill = draggable == undefined || draggable ? STYLE.fill : STYLE.fill2;
+    const stroke =
+      draggable == undefined || draggable ? STYLE.stroke : STYLE.fill2;
     return new Konva.Circle({
       x: point.posX,
       y: point.posY,
@@ -120,13 +114,13 @@ export class PointDrawer extends Drawer {
       draggable: false,
       resizeEnabled: false,
       transformEnabled: false,
-      style: STYLE,
+      style: { fill: fill, stroke: stroke },
       class: ELEMENTS_CLASS.POINT,
       connections: [],
       startPosX: point.posX,
       startPosY: point.posY,
       listening: true,
-      selectable: draggable
+      selectable: selectable
     });
   }
   static getKonvaText(point, label) {
@@ -146,17 +140,4 @@ export class PointDrawer extends Drawer {
       fontStyle: "bold"
     });
   }
-
-  static configureCircleEvents(circle) {
-    circle.on("mouseover", function () {
-      this.strokeWidth(HOVER_STYLE.strokeWidth);
-      this.stroke(HOVER_STYLE.stroke);
-      Stages.getCurrentKonvaStage().draw();
-    });
-    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];
       }
@@ -56,14 +56,18 @@ export class Selector {
 
   getSelectedPoints() {
     const objects = this.getSelectedAggregators().filter(
-      x => x.elementClass === ELEMENTS_CLASS.POINT
+      x =>
+        x.elementClass === ELEMENTS_CLASS.POINT ||
+        x.elementClass === ELEMENTS_CLASS.INTERSECTION_POINT
     );
     return objects.map(x => x.genericObject);
   }
 
   getSelectedPointsAggregators() {
     const objects = this.getSelectedAggregators().filter(
-      x => x.elementClass === ELEMENTS_CLASS.POINT
+      x =>
+        x.elementClass === ELEMENTS_CLASS.POINT ||
+        x.elementClass === ELEMENTS_CLASS.INTERSECTION_POINT
     );
     return objects;
   }
@@ -75,18 +79,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);
@@ -143,8 +147,6 @@ export class Selector {
     }
   }
 
-
-
   hitCheck(shape1, shape2) {
     let s1 = shape1.getClientRect();
     let s2 = shape2.getClientRect();

src/app/core/drawers/drawer-aggregator.js

@@ -4,6 +4,7 @@ export class DrawerAggregator {
     this.genericObject = geometricObject;
     this.konvaObject = konvaObject;
     this.aggregators = [];
+    this.visible = true;
     if (elementClass != undefined) this.elementClass = elementClass;
     else {
       if (

src/app/core/drawers/drawer.js

@@ -1,6 +1,5 @@
 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 {
@@ -13,7 +12,7 @@ export class Drawer {
     this.konvaObject;
     this.elementClass = undefined;
   }
-  onDragMove() { }
+  onDragMove() {}
   setElementClass(elementClass) {
     this.elementClass = elementClass;
   }
@@ -27,8 +26,11 @@ export class Drawer {
     App.setStatus(status);
   }
   clear() {
-    this.clearState();
+    this.reset();
     App.clearSelectedTool();
+  }
+  reset() {
+    this.clearState();
     this.setStatus("");
     Selector.clear();
   }
@@ -47,6 +49,10 @@ export class Drawer {
   setKonvaObject(konvaObject) {
     this.konvaObject = konvaObject;
   }
+  static setMaxIndex(object) {
+    object.zIndex(Number.MAX_SAFE_INTEGER);
+    Drawer.stageBatchDraw();
+  }
   static drawObject(object) {
     DrawerManager.draw(object);
   }
@@ -54,7 +60,7 @@ export class Drawer {
     if (draggable == undefined) draggable = true;
     const group = new Konva.Group({
       draggable: draggable,
-      resizeEnabled: false
+      resizeEnabled: draggable
     });
     return group;
   }

src/app/core/drawers/selectable-drawer.js

@@ -0,0 +1,61 @@
+import { Drawer } from "./drawer";
+
+import { stageManager as StageManager } from "../application/stage-manager";
+import { ELEMENTS_CLASS } from "../enums/elements-class-enum";
+import { app as App } from "../../app";
+const HOVER_STYLE = {
+  fill: "#33BCFF",
+  strokeWidth: 4,
+  stroke: "#33BCFF"
+};
+const STYLE_STROKE = {
+  fill: "grey",
+  strokeWidth: 2,
+  stroke: "grey"
+};
+const STYLE_POINT = {
+  fill: "#9bc364",
+  fill2: "#828783",
+  strokeWidth: 1,
+  stroke: "#9bc364"
+};
+
+export class SelectableDrawer extends Drawer {
+  constructor() {
+    super();
+  }
+  static setSelectableIfToolChanged(konvaObject) {
+    konvaObject.on("mouseover", function() {
+      const selectedTool = App.getSelectedTool();
+      if (
+        selectedTool != undefined &&
+        selectedTool.drawer != undefined &&
+        selectedTool.drawer.elementClass == ELEMENTS_CLASS.INTERSECTION_POINT
+      ) {
+        this.strokeWidth(HOVER_STYLE.strokeWidth);
+        this.stroke(HOVER_STYLE.stroke);
+        StageManager.getCurrentKonvaStage().draw();
+      }
+    });
+    konvaObject.on("mouseout", function() {
+      if (konvaObject == undefined) return;
+      this.strokeWidth(STYLE_STROKE.strokeWidth);
+      this.stroke(konvaObject.attrs.style.stroke);
+      StageManager.getCurrentKonvaStage().draw();
+    });
+    return konvaObject;
+  }
+  static setSelectable(konvaObject) {
+    konvaObject.on("mouseover", function() {
+      this.strokeWidth(HOVER_STYLE.strokeWidth);
+      this.stroke(HOVER_STYLE.stroke);
+      StageManager.getCurrentKonvaStage().draw();
+    });
+    konvaObject.on("mouseout", function() {
+      this.strokeWidth(STYLE_POINT.strokeWidth);
+      this.stroke(konvaObject.attrs.style.stroke);
+      StageManager.getCurrentKonvaStage().draw();
+    });
+    return konvaObject;
+  }
+}

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

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

src/app/old-components/circumference.js

@@ -1,112 +0,0 @@
-import { app as App } from "../app";
-import { menu as Menu } from "../core/application/menu";
-export const circumference = (function() {
-  let _tool = {};
-  let _states = ["center", "radius"];
-  let _state = undefined;
-  let _coordinates = [0, 0, 0, 0];
-  let _points = [0, 0, 0];
-
-  function _draw() {
-    if (_state == undefined) {
-      _state = _states[0];
-      App.setStatus("Selecione o centro da Circunferência");
-    } else if (_state == _states[0]) {
-      let pos = App.pos();
-      _coordinates[0] = pos.x;
-      _coordinates[1] = pos.y;
-      _state = _states[1];
-      App.setStatus("Selecione o raio da Circunferência");
-    } else if (_state == _states[1]) {
-      let pos = App.pos();
-      _coordinates[2] = pos.x;
-      _coordinates[3] = pos.y;
-      let legA = _coordinates[2] - _coordinates[0];
-      let legB = _coordinates[3] - _coordinates[1];
-      let radius = Math.sqrt(Math.pow(legA, 2) + Math.pow(legB, 2));
-      _points = [_coordinates[0], _coordinates[1], radius];
-      let p = _points.slice();
-      _drawcircumference(p[0], p[1], p[2]);
-    }
-  }
-
-  function _drawcircumference(x, y, radius) {
-    let layer = App.currentLayer();
-    let group = new Konva.Group({
-      draggable: true,
-      resizeEnabled: false
-    });
-
-    let circle = new Konva.Circle({
-      x: x,
-      y: y,
-      radius: radius,
-      fill: "transparent",
-      stroke: "black",
-      strokeWidth: 1,
-      strokeScaleEnabled: false,
-      transformEnabled: true,
-      draggable: false
-    });
-
-    let point = new Konva.Circle({
-      x: x,
-      y: y,
-      radius: 5,
-      fill: "#9bc364",
-      stroke: "#9bc364",
-      strokeWidth: 1,
-      strokeScaleEnabled: false,
-      draggable: false,
-      resizeEnabled: false,
-      transformEnabled: false
-    });
-
-    group.add(circle);
-    group.add(point);
-
-    layer.add(group);
-    App.stage.draw();
-
-    _clearState();
-    App.clearSelectedTool();
-    App.setStatus("");
-  }
-
-  function _bootstrap() {
-    Menu.add(_tool);
-  }
-
-  function _click(id) {
-    if (_state == _states[0]) {
-      App.clearSelectedTool();
-      _clearState();
-      return;
-    }
-    App.setSelectedTool(_tool);
-    _state = _states[0];
-    App.setStatus("Selecione o primeiro ponto no canvas");
-  }
-
-  function _clearState() {
-    _state = undefined;
-  }
-
-  _tool = {
-    id: "circumference",
-    title: "Circunferência",
-    icon: "line",
-    click: _click,
-    draw: _draw,
-    points: _points,
-    coordinates: _coordinates,
-    drawcircumference: _drawcircumference
-  };
-
-  _bootstrap();
-
-  return {
-    draw: _draw,
-    click: _click
-  };
-})();

src/app/old-components/line-segment.js

@@ -1,163 +0,0 @@
-import { app as App } from "../app";
-import { menu as Menu } from "../core/application/menu";
-import { point as Point } from "./point";
-import { selector as Selector } from "../core/application/selector";
-import { ELEMENTS_CLASS } from "../core/enums/elements-class-enum";
-export class LineSegment {
-  static get STATE_PRIMEIRO_PONTO() {
-    return "primeiro_ponto";
-  }
-  static get STATE_SEGUNDO_PONTO() {
-    return "segundo_ponto";
-  }
-
-  constructor() {
-    this._state = undefined;
-    this._points = new Set();
-    this._tool = {
-      id: "line-segment",
-      title: "Reta",
-      icon: "line-segment",
-      click: this.click,
-      draw: this.draw,
-      points: this.points,
-      object: this
-    };
-    this.bootstrap();
-  }
-
-  draw(event) {
-    let _this = this;
-    if (event != null) {
-      _this = event;
-    }
-    if (_this._state == null) {
-      _this._state = LineSegment.STATE_PRIMEIRO_PONTO;
-      _this._points.clear();
-      App.setStatus("Selecione o primeiro ponto no canvas");
-    } else if (_this._state === LineSegment.STATE_PRIMEIRO_PONTO) {
-      const pos = App.pos();
-      _this._points.add({ x: pos.x, y: pos.y });
-      _this._state = LineSegment.STATE_SEGUNDO_PONTO;
-    } else if (_this._state === LineSegment.STATE_SEGUNDO_PONTO) {
-      const pos = App.pos();
-      _this._points.add({ x: pos.x, y: pos.y });
-      _this.drawPoint(_this._points);
-      _this._points.clear();
-      _this._state = LineSegment.STATE_PRIMEIRO_PONTO;
-    }
-  }
-
-  click(e) {
-    let _this = e;
-    if (e == undefined) {
-      _this = this;
-    }
-    if (
-      _this._state == LineSegment.STATE_PRIMEIRO_PONTO ||
-      _this._state == LineSegment.STATE_SEGUNDO_PONTO
-    ) {
-      App.clearSelectedTool();
-      _this.clearState();
-      return;
-    }
-    const objects = Selector.getPoints();
-    if (
-      _this._state == undefined &&
-      objects != undefined &&
-      objects.length > 0
-    ) {
-      const layer = App.currentLayer();
-      const point_groups = new Set(objects.map(object => object.parent));
-      const points_xy = objects.reduce(
-        (prev, next) => prev.concat([next.x(), next.y()]),
-        []
-      );
-      let ln = _this.createLine(points_xy);
-      _this.attachPoints(ln, point_groups);
-      layer.add(ln);
-      App.stage.draw();
-      App.clearSelectedTool();
-      _this.clearState();
-      return;
-    }
-    App.setSelectedTool(_this._tool);
-    _this._state = LineSegment.STATE_PRIMEIRO_PONTO;
-    App.setStatus("Selecione o primeiro ponto no canvas");
-  }
-
-  clearState() {
-    this._state = undefined;
-    this._points.clear();
-  }
-
-  drawPoint(p) {
-    const points = Array.from(p).map(xy => {
-      return Point.drawPoint(xy.x, xy.y, true);
-    });
-    const points_xy = points
-      .map(group => this.getPoint(group))
-      .reduce((prev, next) => prev.concat([next.x(), next.y()]), []);
-    let ln = this.createLine(points_xy);
-    let layer = App.currentLayer();
-    this.attachPoints(ln, points);
-    layer.add(ln);
-    App.stage.draw();
-
-    return ln;
-  }
-
-  createLine(points) {
-    return new Konva.Line({
-      points: points,
-      stroke: "grey",
-      strokeWidth: 2,
-      lineJoin: "round",
-      draggable: false,
-      strokeScaleEnabled: false,
-      class: ELEMENTS_CLASS.LINE_SEGMENT,
-      connections: []
-    });
-  }
-
-  getPoint(group) {
-    const point_collection = group.find(node => {
-      return node.getClassName() === "Circle";
-    });
-    return point_collection.toArray()[0];
-  }
-
-  attachPoints(line, points) {
-    line._parents = [];
-    points.forEach((p, idx) => {
-      line._parents.push(p);
-      const point = this.getPoint(p);
-      point._name = idx;
-      if (!p._parents) {
-        p._children = [];
-      }
-      p._children.push(line);
-      p.on("dragmove", () => {
-        App.clearSelectedTool();
-        this.clearState();
-        const current_points = line.points();
-        const new_point = this.getPoint(p);
-        const new_x = new_point.x() + p.x();
-        const new_y = new_point.y() + p.y();
-        if (new_point._name == 0) {
-          current_points[0] = new_x;
-          current_points[1] = new_y;
-        } else {
-          current_points[2] = new_x;
-          current_points[3] = new_y;
-        }
-        line.points(current_points);
-      });
-    });
-  }
-
-  bootstrap() {
-    Menu.add(this._tool);
-  }
-}
-export const line_segment = new LineSegment();