Browse Source

Merge branch 'develop' of http://200.144.254.107/git/victordomingues/poc-igeom

Victor Luiz Domingues 3 years ago
parent
commit
7c505924f1
36 changed files with 767 additions and 461 deletions
  1. 4 1
      src/app/app.js
  2. 43 38
      src/app/component-registry/label.js
  3. 15 0
      src/app/component-registry/line-component.js
  4. 1 1
      src/app/component-registry/line-segment-component.js
  5. 19 0
      src/app/component-registry/trash-component.js
  6. 4 1
      src/app/components/circumference-component/drawers/circumference-drawer.js
  7. 35 35
      src/app/components/circumference-component/models/circumference-model.js
  8. 39 39
      src/app/components/intersection-component/drawers/intersection-drawer.js
  9. 78 73
      src/app/components/intersection-component/models/intersection-model.js
  10. 34 34
      src/app/components/line-component/drawers/line-drawer.js
  11. 60 58
      src/app/components/line-component/models/line-model.js
  12. 44 44
      src/app/components/line-segment-component/drawers/line-segment-drawer.js
  13. 40 36
      src/app/components/line-segment-component/models/line-segment-model.js
  14. 3 2
      src/app/components/point-component/drawers/point-drawer.js
  15. 36 0
      src/app/components/trash-component/drawers/trash-drawer.js
  16. 6 4
      src/app/core/application/header-menu.js
  17. 6 2
      src/app/core/application/objects.js
  18. 11 4
      src/app/core/application/stage-manager.js
  19. 3 0
      src/app/core/drawers/drawer-manager.js
  20. 1 1
      src/app/core/drawers/drawer.js
  21. 13 2
      src/app/core/drawers/layer.js
  22. 29 4
      src/app/core/drawers/selectable-drawer.js
  23. 1 1
      src/app/core/drawers/stage.js
  24. 4 0
      src/app/core/enums/elements-class-enum.js
  25. 11 1
      src/app/core/models/application/actions/action-manager.js
  26. 1 1
      src/app/core/models/objects/generic-object.js
  27. 19 1
      src/app/core/parser/parser-orchestrator.js
  28. BIN
      src/assets/images/icons/Intersection.png
  29. BIN
      src/assets/images/icons/Line.png
  30. 50 0
      src/assets/images/icons/Line.svg
  31. BIN
      src/assets/images/icons/Point.png
  32. BIN
      src/assets/images/icons/Trash.png
  33. 49 0
      src/assets/images/icons/Trash.svg
  34. 31 8
      src/css/app.css
  35. 8 0
      src/css/icons.css
  36. 69 70
      src/index.html

+ 4 - 1
src/app/app.js

@@ -7,7 +7,7 @@ import { menu as Menu } from "./core/application/menu";
 import Konva from "konva";
 import Konva from "konva";
 import { COMPONENT_TYPE } from "./core/enums/component-type-enum";
 import { COMPONENT_TYPE } from "./core/enums/component-type-enum";
 import { headerMenu } from "./core/application/header-menu";
 import { headerMenu } from "./core/application/header-menu";
-export const app = (function() {
+export const app = (function () {
   let _selectedTool = [];
   let _selectedTool = [];
   function _bootstrap() {
   function _bootstrap() {
     Konva.showWarnings = false;
     Konva.showWarnings = false;
@@ -15,6 +15,9 @@ export const app = (function() {
     Selector.bootstrap();
     Selector.bootstrap();
     requireAll(require.context("./component-registry/", true, /\.js$/));
     requireAll(require.context("./component-registry/", true, /\.js$/));
     _refreshMenu();
     _refreshMenu();
+    $("body").on("mouseenter", ".li-content", e => $(e.currentTarget).parent().find('.level-1').css("background-color", "#d4d4d4"));
+    $("body").on("mouseleave", ".li-content", e => $(e.currentTarget).parent().find('.level-1').css("background-color", "transparent"));
+    ;
   }
   }
 
 
   function _currentLayer() {
   function _currentLayer() {

+ 43 - 38
src/app/component-registry/label.js

@@ -1,40 +1,45 @@
-export const label = (function() {
-  const _labels = [
-    "a",
-    "b",
-    "c",
-    "d",
-    "e",
-    "f",
-    "g",
-    "h",
-    "i",
-    "j",
-    "k",
-    "l",
-    "m",
-    "n",
-    "o",
-    "p",
-    "q",
-    "r",
-    "s",
-    "t",
-    "u",
-    "v",
-    "w",
-    "x",
-    "y",
-    "z"
-  ];
-  let _usedLabels = [];
-
-  function _draw() {
-    var label = _labels[_usedLabels.length];
-    _usedLabels.push(label);
+export class Label {
+  constructor() {
+    this._usedUpperLabels = [];
+    this._usedLowerLabels = [];
+  }
+  draw(lower = false) {
+    if (lower) {
+      return this.pushLower();
+    } else {
+      return this.pushUpper();
+    }
+  }
+  pushLower(label) {
+    if (label == undefined) {
+      label = this._generateLabel(this._usedLowerLabels.length + 1);
+      while (this._usedLowerLabels.includes(this.label)) {
+        label = this._generateLabel(this._usedLowerLabels.length + 1);
+      }
+    }
+    this._usedLowerLabels.push(label);
+    return label.toLowerCase();
+  }
+  pushUpper(label) {
+    if (label == undefined) {
+      label = this._generateLabel(this._usedUpperLabels.length + 1);
+      while (this._usedUpperLabels.includes(this.label)) {
+        label = this._generateLabel(this._usedUpperLabels.length + 1);
+      }
+    }
+    this._usedUpperLabels.push(label);
     return label.toUpperCase();
     return label.toUpperCase();
   }
   }
-  return {
-    draw: _draw
-  };
-})();
+  _generateLabel(n) {
+    let label = "";
+    let labelNumber = n;
+    while (labelNumber > 0) {
+      const letterNumber = (labelNumber - 1) % 26;
+      const currentLetter = String.fromCharCode(letterNumber + 65);
+      label = currentLetter + label;
+      labelNumber = (labelNumber - (letterNumber + 1)) / 26;
+    }
+    return label;
+  }
+}
+export const label = new Label();

+ 15 - 0
src/app/component-registry/line-component.js

@@ -0,0 +1,15 @@
+import { Component } from "../core/models/components/component";
+import { ComponentOptions } from "../core/models/components/component-options";
+import { LineDrawer } from "../components/line-component/drawers/line-drawer";
+class LineComponent extends Component {
+  constructor() {
+    const options = new ComponentOptions(
+      "aa5962d0-8f90-45b3-91db-61e0de6809ae",
+      "Line",
+      "line"
+    );
+    super(new LineDrawer(), options);
+  }
+}
+
+export const lineComponent = new LineComponent();

+ 1 - 1
src/app/component-registry/line-segment-component.js

@@ -5,7 +5,7 @@ class LineSegmentComponent extends Component {
   constructor() {
   constructor() {
     const options = new ComponentOptions(
     const options = new ComponentOptions(
       "0566268b76d744f28c79e482e26fab3a",
       "0566268b76d744f28c79e482e26fab3a",
-      "Line",
+      "Line Segment",
       "line-segment"
       "line-segment"
     );
     );
     super(new LineSegmentDrawer(), options);
     super(new LineSegmentDrawer(), options);

+ 19 - 0
src/app/component-registry/trash-component.js

@@ -0,0 +1,19 @@
+import { TrashDrawer } from "../components/trash-component/drawers/trash-drawer";
+import { Component } from "../core/models/components/component";
+import { ComponentOptions } from "../core/models/components/component-options";
+class TrashComponent extends Component {
+  constructor() {
+    const options = new ComponentOptions(
+      "2e0a8b90-2ef0-4c71-893f-cf2b55303589",
+      "trash",
+      "trash"
+    );
+    super(new TrashDrawer(), options);
+    document.addEventListener('keyup', (event) => {
+      if (event.key === "Delete")
+        this.draw(event);
+    });
+  }
+}
+
+export const trashComponent = new TrashComponent();

+ 4 - 1
src/app/components/circumference-component/drawers/circumference-drawer.js

@@ -5,6 +5,7 @@ import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
 import { selector as Selector } from "../../../core/application/selector";
 import { selector as Selector } from "../../../core/application/selector";
 import { SelectableDrawer } from "../../../core/drawers/selectable-drawer";
 import { SelectableDrawer } from "../../../core/drawers/selectable-drawer";
 import { objects as Objects } from "../../../core/application/objects";
 import { objects as Objects } from "../../../core/application/objects";
+import { label as Label } from "../../../component-registry/label";
 
 
 export class CircumferenceDrawer extends SelectableDrawer {
 export class CircumferenceDrawer extends SelectableDrawer {
   constructor() {
   constructor() {
@@ -80,6 +81,8 @@ export class CircumferenceDrawer extends SelectableDrawer {
     this.center = center;
     this.center = center;
     this.radius = radius;
     this.radius = radius;
     this.circumference = new CircumferenceModel(this.center, this.radius);
     this.circumference = new CircumferenceModel(this.center, this.radius);
+    const label = Label.draw(true);
+    this.circumference.setLabel(label);
     this.createByCircumference(this.circumference);
     this.createByCircumference(this.circumference);
   }
   }
   createByCircumference(circumference) {
   createByCircumference(circumference) {
@@ -117,7 +120,7 @@ export class CircumferenceDrawer extends SelectableDrawer {
       class: ELEMENTS_CLASS.CIRCUMFERENCE,
       class: ELEMENTS_CLASS.CIRCUMFERENCE,
       style: { stroke: "grey", fill: "grey" }
       style: { stroke: "grey", fill: "grey" }
     });
     });
-    SelectableDrawer.setSelectableIfToolChanged(circle);
+    SelectableDrawer.setSelectableIfIntersectionChanged(circle);
     return circle;
     return circle;
   }
   }
   resolveAggregators(points, aggregators, selected) {
   resolveAggregators(points, aggregators, selected) {

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

@@ -13,7 +13,7 @@ import { IntersectionModel } from "../../intersection-component/models/intersect
 
 
 export class CircumferenceModel extends GeometricObject {
 export class CircumferenceModel extends GeometricObject {
 
 
-  constructor (center, radius, id) {
+  constructor(center, radius, id) {
     super(id);
     super(id);
     this.center = center;
     this.center = center;
     this.radius = radius;
     this.radius = radius;
@@ -26,17 +26,17 @@ export class CircumferenceModel extends GeometricObject {
     super.setClass(ELEMENTS_CLASS.CIRCUMFERENCE);
     super.setClass(ELEMENTS_CLASS.CIRCUMFERENCE);
     this.definitions.push(this.center);
     this.definitions.push(this.center);
     this.definitions.push(this.radius);
     this.definitions.push(this.radius);
-    }
+  }
 
 
-  getCenter () {
+  getCenter() {
     return this.center;
     return this.center;
-    }
+  }
 
 
-  getPoint () {
+  getPoint() {
     return this.radius;
     return this.radius;
-    }
+  }
 
 
-  getRadius () {
+  getRadius() {
     /* Deixar mais intuitiva...
     /* Deixar mais intuitiva...
     this._coordinates[0] = this.center.posX;
     this._coordinates[0] = this.center.posX;
     this._coordinates[1] = this.center.posY;
     this._coordinates[1] = this.center.posY;
@@ -53,20 +53,20 @@ export class CircumferenceModel extends GeometricObject {
     Ax = this._coordinates[2] = this.radius.posX;
     Ax = this._coordinates[2] = this.radius.posX;
     Ay = this._coordinates[3] = this.radius.posY;
     Ay = this._coordinates[3] = this.radius.posY;
     //D console.log("circumference-model.js: circ((" + Cx +","+ Cy +"), ("+Ax+","+Ay+")");
     //D console.log("circumference-model.js: circ((" + Cx +","+ Cy +"), ("+Ax+","+Ay+")");
-    const dx = Ax-Cx;
-    const dy = Ay-Cy;
-    const radius = Math.sqrt(dx*dx + dy*dy);
+    const dx = Ax - Cx;
+    const dy = Ay - Cy;
+    const radius = Math.sqrt(dx * dx + dy * dy);
     return radius;
     return radius;
-    }
+  }
 
 
-  getStraight () {
+  getStraight() {
     const dx = this.radius.posX - this.center.posX;
     const dx = this.radius.posX - this.center.posX;
     const dy = this.radius.posY - this.center.posY;
     const dy = this.radius.posY - this.center.posY;
     const c = Math.sqrt(dy * dy + dx * dx);
     const c = Math.sqrt(dy * dy + dx * dx);
     return [dx, dy, c];
     return [dx, dy, c];
-    }
+  }
 
 
-  getDirection () {
+  getDirection() {
     const aX = this.center.posX;
     const aX = this.center.posX;
     const aY = this.center.posY;
     const aY = this.center.posY;
     const bX = this.radius.posX;
     const bX = this.radius.posX;
@@ -74,9 +74,9 @@ export class CircumferenceModel extends GeometricObject {
     const a = bX - aX;
     const a = bX - aX;
     const b = bY - aY;
     const b = bY - aY;
     return [a, b];
     return [a, b];
-    }
+  }
 
 
-  getIntersection (geometricObject) {
+  getIntersection(geometricObject) {
     switch (geometricObject.elementClass) {
     switch (geometricObject.elementClass) {
       case ELEMENTS_CLASS.LINE: // StraightLine
       case ELEMENTS_CLASS.LINE: // StraightLine
         return geometricObject.getIntersectionWithCircumference(this); // Delegate to StraightLine    
         return geometricObject.getIntersectionWithCircumference(this); // Delegate to StraightLine    
@@ -86,17 +86,17 @@ export class CircumferenceModel extends GeometricObject {
         return this.getIntersectionsByCircumference(geometricObject); //TODO melhor 'with' que 'by'
         return this.getIntersectionsByCircumference(geometricObject); //TODO melhor 'with' que 'by'
       default:
       default:
         break;
         break;
-      }
     }
     }
+  }
 
 
-  distance (center) {
+  distance(center) {
     const dx = center.posX - this.center.posX;
     const dx = center.posX - this.center.posX;
     const dy = center.posY - this.center.posY;
     const dy = center.posY - this.center.posY;
     const dist = Math.sqrt(dy * dy + dx * dx);
     const dist = Math.sqrt(dy * dy + dx * dx);
     return dist;
     return dist;
-    }
+  }
 
 
-  getIntersectionsByCircumference (circumference) {
+  getIntersectionsByCircumference(circumference) {
     //TODO if (this.cente().igual(cd.C())) return null; // duas circ. com mesmo raio => devolva "null" (ambiguidade!)
     //TODO if (this.cente().igual(cd.C())) return null; // duas circ. com mesmo raio => devolva "null" (ambiguidade!)
     const r1 = this.getRadius(); // raio circ. atual
     const r1 = this.getRadius(); // raio circ. atual
     const r2 = circumference.getRadius(); // raio circ. "cd"
     const r2 = circumference.getRadius(); // raio circ. "cd"
@@ -131,12 +131,12 @@ export class CircumferenceModel extends GeometricObject {
       new IntersectionModel(x1, y1, undefined, this, circumference, true, 0),
       new IntersectionModel(x1, y1, undefined, this, circumference, true, 0),
       new IntersectionModel(x2, y2, undefined, this, circumference, true, 1)
       new IntersectionModel(x2, y2, undefined, this, circumference, true, 1)
     ];
     ];
-    }
+  }
 
 
 
 
   /// Get Intersection Poin By Circumference and Line Segment
   /// Get Intersection Poin By Circumference and Line Segment
   /// @param {LineSegmentModel  } lineSegment 
   /// @param {LineSegmentModel  } lineSegment 
-  getIntersectionByLine (lineSegment) {
+  getIntersectionByLine(lineSegment) {
     const pointA = lineSegment.pointA, pointB = lineSegment.pointB; // sl = segment(A,B)
     const pointA = lineSegment.pointA, pointB = lineSegment.pointB; // sl = segment(A,B)
     const center = this.center, radius = this.getRadius();          // c0 = circunference(C,A) = circ("center,radius")
     const center = this.center, radius = this.getRadius();          // c0 = circunference(C,A) = circ("center,radius")
 
 
@@ -159,7 +159,7 @@ export class CircumferenceModel extends GeometricObject {
 
 
     if (delta < 0) {
     if (delta < 0) {
       return [PA, PB];
       return [PA, PB];
-      }
+    }
 
 
     const deltaSqrt = Math.sqrt(delta);
     const deltaSqrt = Math.sqrt(delta);
     const root1 = -D + deltaSqrt;
     const root1 = -D + deltaSqrt;
@@ -169,8 +169,8 @@ export class CircumferenceModel extends GeometricObject {
 
 
     if (delta == 0) {
     if (delta == 0) {
       PA.bind(x1, y1, undefined, lineSegment, this, true, 0);
       PA.bind(x1, y1, undefined, lineSegment, this, true, 0);
-      return [PA,PB];
-      }
+      return [PA, PB];
+    }
 
 
     const x2 = pointA.posX - dx * root2;
     const x2 = pointA.posX - dx * root2;
     const y2 = pointA.posY - dy * root2;
     const y2 = pointA.posY - dy * root2;
@@ -184,13 +184,13 @@ export class CircumferenceModel extends GeometricObject {
 
 
       if (!this.insideSegment(PB.posX, PB.posY))
       if (!this.insideSegment(PB.posX, PB.posY))
         PB.bind(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, undefined, lineSegment, this, false, 1)
         PB.bind(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, undefined, lineSegment, this, false, 1)
-      }
-
-    return [PA,PB];
     }
     }
 
 
+    return [PA, PB];
+  }
+
   // Verify intersection using "level set"
   // Verify intersection using "level set"
-  insideSegment (intersecX, intersecY) {
+  insideSegment(intersecX, intersecY) {
     const valuesR = this.getDirection();
     const valuesR = this.getDirection();
     const dirX = valuesR[0];
     const dirX = valuesR[0];
     const dirY = valuesR[1];
     const dirY = valuesR[1];
@@ -201,7 +201,7 @@ export class CircumferenceModel extends GeometricObject {
 
 
     if (cInterA < cRA) {
     if (cInterA < cRA) {
       return false;
       return false;
-      }
+    }
 
 
     // comparaca cv do ponto B < cv da intersec =>  vazio
     // comparaca cv do ponto B < cv da intersec =>  vazio
     const cRB = dirX * this.radius.posX + dirY * this.radius.posY;
     const cRB = dirX * this.radius.posX + dirY * this.radius.posY;
@@ -210,12 +210,12 @@ export class CircumferenceModel extends GeometricObject {
       this.posX = Number.MAX_SAFE_INTEGER;
       this.posX = Number.MAX_SAFE_INTEGER;
       this.posY = Number.MAX_SAFE_INTEGER;
       this.posY = Number.MAX_SAFE_INTEGER;
       return false;
       return false;
-      }
+    }
 
 
     return true;
     return true;
-    }
+  }
 
 
-  static do (map, list) {
+  static do(map, list) {
     const id = map.get("id");
     const id = map.get("id");
     const centerId = map.get("param")[0];
     const centerId = map.get("param")[0];
     const radiusId = map.get("param")[1];
     const radiusId = map.get("param")[1];
@@ -225,6 +225,6 @@ export class CircumferenceModel extends GeometricObject {
     const circumference = new CircumferenceModel(center, radius, id);
     const circumference = new CircumferenceModel(center, radius, id);
     circumference.setLabel(label);
     circumference.setLabel(label);
     return circumference;
     return circumference;
-    }
+  }
 
 
-  }
+}

+ 39 - 39
src/app/components/intersection-component/drawers/intersection-drawer.js

@@ -17,77 +17,77 @@ import { intersectionService } from "../services/intersection-service";
 
 
 export class IntersectionDrawer extends Drawer {
 export class IntersectionDrawer extends Drawer {
 
 
-  static FIRST_OBJECT_STATE () {
+  static FIRST_OBJECT_STATE() {
     return "FIRST_OBJECT";
     return "FIRST_OBJECT";
-    }
+  }
 
 
-  static SECOND_OBJECT_STATE () {
+  static SECOND_OBJECT_STATE() {
     return "SECOND_OBJECTf";
     return "SECOND_OBJECTf";
-    }
+  }
 
 
-  constructor () {
+  constructor() {
     super();
     super();
     this.aggregatorA;
     this.aggregatorA;
     this.aggregatorB;
     this.aggregatorB;
     this.label;
     this.label;
-    this.states = [ IntersectionDrawer.FIRST_OBJECT_STATE, IntersectionDrawer.SECOND_OBJECT_STATE ];
+    this.states = [IntersectionDrawer.FIRST_OBJECT_STATE, IntersectionDrawer.SECOND_OBJECT_STATE];
     this.intersections = [];
     this.intersections = [];
     this.pointDrawer = new PointDrawer();
     this.pointDrawer = new PointDrawer();
     super.setElementClass(ELEMENTS_CLASS.INTERSECTION_POINT);
     super.setElementClass(ELEMENTS_CLASS.INTERSECTION_POINT);
-    }
+  }
 
 
-  draw (e) {
+  draw(e) {
     if (e != undefined && e.attrs != undefined) {
     if (e != undefined && e.attrs != undefined) {
       this.aggregatorA = this.getObjectAggregatorByGenericObject(e.attrs.genericObject.r);
       this.aggregatorA = this.getObjectAggregatorByGenericObject(e.attrs.genericObject.r);
       this.aggregatorB = this.getObjectAggregatorByGenericObject(e.attrs.genericObject.s);
       this.aggregatorB = this.getObjectAggregatorByGenericObject(e.attrs.genericObject.s);
       this.drawByIntersectionPoints([e.attrs.genericObject]);
       this.drawByIntersectionPoints([e.attrs.genericObject]);
       return;
       return;
-      }
+    }
     if (e == undefined || !this.isValidObject(e.target)) return;
     if (e == undefined || !this.isValidObject(e.target)) return;
 
 
     const selectedTool = App.getSelectedTool();
     const selectedTool = App.getSelectedTool();
     if (selectedTool != undefined &&
     if (selectedTool != undefined &&
-        selectedTool.drawer != undefined &&
-        selectedTool.drawer.elementClass == ELEMENTS_CLASS.INTERSECTION_POINT
-       ) {
+      selectedTool.drawer != undefined &&
+      selectedTool.drawer.elementClass == ELEMENTS_CLASS.INTERSECTION_POINT
+    ) {
       if (this.state == undefined || this.state == IntersectionDrawer.FIRST_OBJECT_STATE) {
       if (this.state == undefined || this.state == IntersectionDrawer.FIRST_OBJECT_STATE) {
         this.setFirstObject(e.target);
         this.setFirstObject(e.target);
         this.setState(IntersectionDrawer.SECOND_OBJECT_STATE);
         this.setState(IntersectionDrawer.SECOND_OBJECT_STATE);
-        }
+      }
       else if (this.state == IntersectionDrawer.SECOND_OBJECT_STATE) {
       else if (this.state == IntersectionDrawer.SECOND_OBJECT_STATE) {
         this.setSecondObject(e.target);
         this.setSecondObject(e.target);
         this.drawPoint();
         this.drawPoint();
         this.reset();
         this.reset();
         // this.clear();
         // this.clear();
-        }
       }
       }
     }
     }
+  }
 
 
-  setFirstObject (konvaObject) {
+  setFirstObject(konvaObject) {
     const aggregator = this.getObjectAggregator(konvaObject);
     const aggregator = this.getObjectAggregator(konvaObject);
     this.aggregatorA = aggregator;
     this.aggregatorA = aggregator;
-    }
+  }
 
 
-  setSecondObject (konvaObject) {
+  setSecondObject(konvaObject) {
     const aggregator = this.getObjectAggregator(konvaObject);
     const aggregator = this.getObjectAggregator(konvaObject);
     this.aggregatorB = aggregator;
     this.aggregatorB = aggregator;
-    }
+  }
 
 
-  getObjectAggregator (konvaObject) {
+  getObjectAggregator(konvaObject) {
     return objects.getByKonvaObject(konvaObject)[0];
     return objects.getByKonvaObject(konvaObject)[0];
-    }
+  }
 
 
-  getObjectAggregatorByGenericObject (genericObject) {
+  getObjectAggregatorByGenericObject(genericObject) {
     return objects.getByGenericObject(genericObject)[0];
     return objects.getByGenericObject(genericObject)[0];
-    }
+  }
 
 
-  drawPoint () {
+  drawPoint() {
     const intersectionPoints = intersectionService.addIntersections(
     const intersectionPoints = intersectionService.addIntersections(
-          this.aggregatorA.genericObject.getIntersection(this.aggregatorB.genericObject));
+      this.aggregatorA.genericObject.getIntersection(this.aggregatorB.genericObject));
     this.drawByIntersectionPoints(intersectionPoints);
     this.drawByIntersectionPoints(intersectionPoints);
-    }
+  }
 
 
-  drawByIntersectionPoints (intersectionPoints) {
+  drawByIntersectionPoints(intersectionPoints) {
     for (let index = 0; index < intersectionPoints.length; index++) {
     for (let index = 0; index < intersectionPoints.length; index++) {
       const intersectionPoint = intersectionPoints[index];
       const intersectionPoint = intersectionPoints[index];
       intersectionPoint.update();
       intersectionPoint.update();
@@ -97,10 +97,10 @@ export class IntersectionDrawer extends Drawer {
       super.addAggregator(aggregator);
       super.addAggregator(aggregator);
       this.aggregatorB.addAggregator(aggregator);
       this.aggregatorB.addAggregator(aggregator);
       this.aggregatorA.addAggregator(aggregator);
       this.aggregatorA.addAggregator(aggregator);
-      }
     }
     }
+  }
 
 
-  isValidObject (konvaObject) {
+  isValidObject(konvaObject) {
     switch (konvaObject.attrs.class) {
     switch (konvaObject.attrs.class) {
       case ELEMENTS_CLASS.LINE:
       case ELEMENTS_CLASS.LINE:
         return true;
         return true;
@@ -110,10 +110,10 @@ export class IntersectionDrawer extends Drawer {
         return true;
         return true;
       default:
       default:
         return false;
         return false;
-      }
     }
     }
+  }
 
 
-  update (aggregator, e) {
+  update(aggregator, e) {
     aggregator.genericObject.update(aggregator, e);
     aggregator.genericObject.update(aggregator, e);
 
 
     if (!aggregator.genericObject.visible || aggregator.genericObject.posX == Number.MAX_SAFE_INTEGER) {
     if (!aggregator.genericObject.visible || aggregator.genericObject.posX == Number.MAX_SAFE_INTEGER) {
@@ -123,12 +123,12 @@ export class IntersectionDrawer extends Drawer {
         aggregator.aggregators.forEach(a => {
         aggregator.aggregators.forEach(a => {
           a.visible = false;
           a.visible = false;
           a.konvaObject.hide();
           a.konvaObject.hide();
-          });
+        });
         this.batchDraw();
         this.batchDraw();
-        }
+      }
       aggregator.visible = false;
       aggregator.visible = false;
       return;
       return;
-      }
+    }
     //todo: konva objects
     //todo: konva objects
     aggregator.konvaObject.children[0].x(aggregator.genericObject.posX + 10);
     aggregator.konvaObject.children[0].x(aggregator.genericObject.posX + 10);
     aggregator.konvaObject.children[0].y(aggregator.genericObject.posY - 10);
     aggregator.konvaObject.children[0].y(aggregator.genericObject.posY - 10);
@@ -142,16 +142,16 @@ export class IntersectionDrawer extends Drawer {
       aggregator.aggregators.forEach(a => {
       aggregator.aggregators.forEach(a => {
         a.visible = true;
         a.visible = true;
         a.konvaObject.show();
         a.konvaObject.show();
-        });
+      });
       aggregator.visible = true;
       aggregator.visible = true;
-      }
-    this.batchDraw();
     }
     }
+    this.batchDraw();
+  }
 
 
-  reset () {
+  reset() {
     this.aggregatorA = undefined;
     this.aggregatorA = undefined;
     this.aggregatorB = undefined;
     this.aggregatorB = undefined;
     this.setState(undefined);
     this.setState(undefined);
-    }
+  }
 
 
-  }
+}

+ 78 - 73
src/app/components/intersection-component/models/intersection-model.js

@@ -20,101 +20,106 @@ export class IntersectionModel extends PointModel {
   // @param {boolean} visible Visiblity of Object 
   // @param {boolean} visible Visiblity of Object 
   // @param {number} index Index position of Object ex (1)
   // @param {number} index Index position of Object ex (1)
   // @param {id} id indentity of intersection ex: 0
   // @param {id} id indentity of intersection ex: 0
-  constructor (posX, posY, label, og1, og2, visible, index, id) { try{ //D //leo
-    super(posX, posY, label, id);
-    this.og1 = og1;
-    this.og2 = og2;
-    super.setClass(ELEMENTS_CLASS.INTERSECTION_POINT);
-    this.visible = visible;
-    this.index = index;
-    this.color = -65536;
-    this.definitions = this.getDefinitions();
+  constructor(posX, posY, label, og1, og2, visible, index, id) {
+    try { //D //leo
+      super(posX, posY, label, id);
+      this.og1 = og1;
+      this.og2 = og2;
+      super.setClass(ELEMENTS_CLASS.INTERSECTION_POINT);
+      this.visible = visible;
+      this.index = index;
+      this.color = -65536;
+      this.definitions = this.getDefinitions();
     } catch (e) { console.log("app/components/intersection-component/models/intersection-model.js: constructor(.): erro!\n" + e.stack); }
     } catch (e) { console.log("app/components/intersection-component/models/intersection-model.js: constructor(.): erro!\n" + e.stack); }
-    }
+  }
 
 
   // Update properties of this Intersection
   // Update properties of this Intersection
   // @param {DrawerAggregator} aggregator Drawer Aggregator 
   // @param {DrawerAggregator} aggregator Drawer Aggregator 
   // @param {event} event
   // @param {event} event
-  update (aggregator, event) { try { //D //leo
-    const intersections = this.og1.getIntersection(this.og2);
-    if (intersections.length == 1) {
-      this.visible = true;
-      const intersection = intersections[0];
-      this.posX = parseFloat(intersection.posX.toFixed(2));
-      this.posY = parseFloat(intersection.posY.toFixed(2));
-      // this.visible = intersection.visible;
-      if (!this.og1.insideSegment(this.posX, this.posY)) {
-        this.posX = Number.MAX_SAFE_INTEGER;
-        this.posY = Number.MAX_SAFE_INTEGER;
-        this.visible = false;
-        this.definitions = this.getDefinitions();
-        return;
+  update(aggregator, event) {
+    try { //D //leo
+      const intersections = this.og1.getIntersection(this.og2);
+      if (intersections.length == 1) {
+        this.visible = true;
+        const intersection = intersections[0];
+        this.posX = parseFloat(intersection.posX.toFixed(2));
+        this.posY = parseFloat(intersection.posY.toFixed(2));
+        // this.visible = intersection.visible;
+        if (!this.og1.insideSegment(this.posX, this.posY)) {
+          this.posX = Number.MAX_SAFE_INTEGER;
+          this.posY = Number.MAX_SAFE_INTEGER;
+          this.visible = false;
+          this.definitions = this.getDefinitions();
+          return;
         }
         }
-      if (!this.og2.insideSegment(this.posX, this.posY)) {
-        this.posX = Number.MAX_SAFE_INTEGER;
-        this.posY = Number.MAX_SAFE_INTEGER;
-        this.visible = false;
-        this.definitions = this.getDefinitions();
-        return;
+        if (!this.og2.insideSegment(this.posX, this.posY)) {
+          this.posX = Number.MAX_SAFE_INTEGER;
+          this.posY = Number.MAX_SAFE_INTEGER;
+          this.visible = false;
+          this.definitions = this.getDefinitions();
+          return;
         }
         }
-      return;
+        return;
       }
       }
-    if (intersections.length > 1) {
-      for (let index = 0; index < intersections.length; index++) {
-        const intersection = intersections[index];
-        if (this.index == index) {
-          this.posX = parseFloat(intersection.posX.toFixed(2));
-          this.posY = parseFloat(intersection.posY.toFixed(2));
-          this.visible = intersection.visible;
+      if (intersections.length > 1) {
+        for (let index = 0; index < intersections.length; index++) {
+          const intersection = intersections[index];
+          if (this.index == index) {
+            this.posX = parseFloat(intersection.posX.toFixed(2));
+            this.posY = parseFloat(intersection.posY.toFixed(2));
+            this.visible = intersection.visible;
           }
           }
         }
         }
       }
       }
-    this.definitions = this.getDefinitions();
+      this.definitions = this.getDefinitions();
     } catch (e) { console.log("app/components/intersection-component/models/intersection-model.js: update(aggregator, event): erro!"); }
     } catch (e) { console.log("app/components/intersection-component/models/intersection-model.js: update(aggregator, event): erro!"); }
-    }
+  }
 
 
-  getDefinitions () { try{ //D //leo
-    return [{ id: this.og1.id }, { id: this.og2.id }, { id: this.index + 1 }, { id: this.visible ? 1 : 0 }];
+  getDefinitions() {
+    try { //D //leo
+      return [{ id: this.og1.id }, { id: this.og2.id }, { id: this.index + 1 }, { id: this.visible ? 1 : 0 }];
     } catch (e) { console.log("app/components/intersection-component/models/intersection-model.js: getDefinitions(): erro!"); }
     } catch (e) { console.log("app/components/intersection-component/models/intersection-model.js: getDefinitions(): erro!"); }
-    }
+  }
 
 
-  bind (posX, posY, label, og1, og2, visible, index) { try{ //D //leo
-    super.bind(posX, posY, label);
-    this.og1 = og1;
-    this.og2 = og2;
-    this.visible = visible;
-    this.index = index;
-    this.color = -65536;
-    this.definitions = this.getDefinitions();
-    super.setClass(ELEMENTS_CLASS.INTERSECTION_POINT);
+  bind(posX, posY, label, og1, og2, visible, index) {
+    try { //D //leo
+      super.bind(posX, posY, label);
+      this.og1 = og1;
+      this.og2 = og2;
+      this.visible = visible;
+      this.index = index;
+      this.color = -65536;
+      this.definitions = this.getDefinitions();
+      super.setClass(ELEMENTS_CLASS.INTERSECTION_POINT);
     } catch (e) { console.log("app/components/intersection-component/models/intersection-model.js: bind(.): erro!\n" + e.stack); }
     } catch (e) { console.log("app/components/intersection-component/models/intersection-model.js: bind(.): erro!\n" + e.stack); }
-    }
+  }
 
 
   // Create new Intersection By Line of Script .geo
   // Create new Intersection By Line of Script .geo
   // @param {Map} map JavaScript Map
   // @param {Map} map JavaScript Map
   // @param {[]} list List of Generic Objects
   // @param {[]} list List of Generic Objects
-  static do (map, list) { try{ //D //leo
-    const id = map.get("id");
-    const og1_Id = map.get("param")[0];
-    const og2_Id = map.get("param")[1];
-    const index = map.get("param")[2] - 1;
-    const visible = map.get("param")[5] == 1;
-    const label = map.get("label")[0];
-    const og1 = list.find(x => x.id == og1_Id);
-    const og2 = list.find(x => x.id == og2_Id);
+  static do(map, list) {
+    try { //D //leo
+      const id = map.get("id");
+      const og1_Id = map.get("param")[0];
+      const og2_Id = map.get("param")[1];
+      const index = map.get("param")[2] - 1;
+      const visible = map.get("param")[5] == 1;
+      const label = map.get("label")[0];
+      const og1 = list.find(x => x.id == og1_Id);
+      const og2 = list.find(x => x.id == og2_Id);
 
 
-    const intersections = og1.getIntersection(og2); // intersection providade by the first geometric object
+      const intersections = og1.getIntersection(og2); // intersection providade by the first geometric object
 
 
-    if (intersections.length == 1) {
-      const i = intersections[0];
-      i.bind(i.posX, i.posY, label, og1, og2, true, index);
-      return i;
-    } else {
-      const i = intersections.find(x => x.index == index);
-      i.bind(i.posX, i.posY, label, og1, og2, true, index);
-      return i;
+      if (intersections.length == 1) {
+        const i = intersections[0];
+        i.bind(i.posX, i.posY, label, og1, og2, true, index);
+        return i;
+      } else {
+        const i = intersections.find(x => x.index == index);
+        i.bind(i.posX, i.posY, label, og1, og2, true, index);
+        return i;
       }
       }
     } catch (e) { console.log("app/components/intersection-component/models/intersection-model.js: do(.): erro!"); }
     } catch (e) { console.log("app/components/intersection-component/models/intersection-model.js: do(.): erro!"); }
-    }
+  }
 
 
-  }
+}

+ 34 - 34
src/app/components/line-component/drawers/line-drawer.js

@@ -19,16 +19,16 @@ import { LineSegmentModel } from "../../line-segment-component/models/line-segme
 
 
 export class LineDrawer extends LineSegmentDrawer {
 export class LineDrawer extends LineSegmentDrawer {
 
 
-  constructor () {
+  constructor() {
     super();
     super();
     this.setElementClass(ELEMENTS_CLASS.LINE);
     this.setElementClass(ELEMENTS_CLASS.LINE);
-    }
+  }
 
 
-  drawByStates (konvaObject) {
+  drawByStates(konvaObject) {
     let aggregator = undefined;
     let aggregator = undefined;
     if (konvaObject != undefined) {
     if (konvaObject != undefined) {
       aggregator = Objects.getByKonvaObject(konvaObject)[0];
       aggregator = Objects.getByKonvaObject(konvaObject)[0];
-      }
+    }
     if (this.state == undefined) {
     if (this.state == undefined) {
       super.setState(LineDrawer.FIRST_POINT_STATE);
       super.setState(LineDrawer.FIRST_POINT_STATE);
     } else if (this.state == LineDrawer.FIRST_POINT_STATE) {
     } else if (this.state == LineDrawer.FIRST_POINT_STATE) {
@@ -40,10 +40,10 @@ export class LineDrawer extends LineSegmentDrawer {
       this.setAggregatorB(aggregator);
       this.setAggregatorB(aggregator);
       this.drawByPoints([this.pointA, this.pointB], [this.aggregatorA, this.aggregatorB]);
       this.drawByPoints([this.pointA, this.pointB], [this.aggregatorA, this.aggregatorB]);
       super.setState(LineDrawer.FIRST_POINT_STATE);
       super.setState(LineDrawer.FIRST_POINT_STATE);
-      }
     }
     }
+  }
 
 
-  drawByLineSegment (lineSegment) { //TODO Nome adequado? Nao seria 'drawLine(lineSegment)'?
+  drawByLineSegment(lineSegment) { //TODO Nome adequado? Nao seria 'drawLine(lineSegment)'?
     this.lineSegment = lineSegment;
     this.lineSegment = lineSegment;
     const group = SelectableDrawer.getKonvaGroup(false);
     const group = SelectableDrawer.getKonvaGroup(false);
     const text = LineDrawer.getKonvaText(lineSegment, lineSegment.label);
     const text = LineDrawer.getKonvaText(lineSegment, lineSegment.label);
@@ -64,14 +64,14 @@ export class LineDrawer extends LineSegmentDrawer {
 
 
     this.konvaObject.zIndex(1);
     this.konvaObject.zIndex(1);
     //leo super.batchDraw(); //D usar novo metodo para desenhar, aproveitar o proprio 'update' - REMOVER
     //leo super.batchDraw(); //D usar novo metodo para desenhar, aproveitar o proprio 'update' - REMOVER
-    this.update(aggregator,null);
+    this.update(aggregator, null);
 
 
     SelectableDrawer.setMaxIndex(aggregators[0].konvaObject); // mark object 1: A
     SelectableDrawer.setMaxIndex(aggregators[0].konvaObject); // mark object 1: A
     SelectableDrawer.setMaxIndex(aggregators[1].konvaObject); // mark object 2: B
     SelectableDrawer.setMaxIndex(aggregators[1].konvaObject); // mark object 2: B
-    }
+  }
 
 
   // Draw Straight Line by its points
   // Draw Straight Line by its points
-  drawByPoints (points, aggregators) {
+  drawByPoints(points, aggregators) {
     if (points == undefined || points.length < 1) return;
     if (points == undefined || points.length < 1) return;
     this.setPointA(points[0]);
     this.setPointA(points[0]);
     this.setPointB(points[1]);
     this.setPointB(points[1]);
@@ -84,7 +84,7 @@ export class LineDrawer extends LineSegmentDrawer {
     // Use: ./app/components/core/drawers/selectable-drawer
     // Use: ./app/components/core/drawers/selectable-drawer
     this.drawByLineSegment(this.lineSegment); // here, makes: SelectableDrawer.drawObject(this.konvaObject);
     this.drawByLineSegment(this.lineSegment); // here, makes: SelectableDrawer.drawObject(this.konvaObject);
     this.reset();
     this.reset();
-    }
+  }
 
 
 
 
   // Update straight line (Line)
   // Update straight line (Line)
@@ -103,7 +103,7 @@ export class LineDrawer extends LineSegmentDrawer {
   //    +----------+----------+----------+----------+
   //    +----------+----------+----------+----------+
   // Straight line defined by points A,B (parametric equation by 'g'):
   // Straight line defined by points A,B (parametric equation by 'g'):
   //   P(g) = A + g * (B-A) = A + g * d
   //   P(g) = A + g * (B-A) = A + g * d
-  
+
   // Given W=canvas width and H=canvas height, find intersections with borders, i.e., find values of "g" such that:
   // Given W=canvas width and H=canvas height, find intersections with borders, i.e., find values of "g" such that:
   //   r(g).x=0 or r(g).x=W or r(g).y=0 or r(g).y=H  (call this "g" respectively as Lg, Rg, Ug, and Dg - these are dependent of A and B positions)
   //   r(g).x=0 or r(g).x=W or r(g).y=0 or r(g).y=H  (call this "g" respectively as Lg, Rg, Ug, and Dg - these are dependent of A and B positions)
   //             Ug                 
   //             Ug                 
@@ -120,13 +120,13 @@ export class LineDrawer extends LineSegmentDrawer {
   //    Lg |P    o A                       | Rg      Rg |     o B                       | Lg
   //    Lg |P    o A                       | Rg      Rg |     o B                       | Lg
   //       +-o-----------------------------+            +-o-----------------------------+   
   //       +-o-----------------------------+            +-o-----------------------------+   
   //      \|/            Dg                                           Ug  
   //      \|/            Dg                                           Ug  
-  update (aggregator, e) {
+  update(aggregator, e) {
     if (!aggregator.visible) return;
     if (!aggregator.visible) return;
     const pointA = aggregator.genericObject.pointA; // A
     const pointA = aggregator.genericObject.pointA; // A
     const pointB = aggregator.genericObject.pointB; // B
     const pointB = aggregator.genericObject.pointB; // B
     const Ax = pointA.posX, Ay = pointA.posY, Bx = pointB.posX, By = pointB.posY; // A=(Ax,Ay) and B=(Bx,By)
     const Ax = pointA.posX, Ay = pointA.posY, Bx = pointB.posX, By = pointB.posY; // A=(Ax,Ay) and B=(Bx,By)
-    const dx = Bx-Ax, dy = By-Ay; // direction d=B-A
-    const size  = stageManager.getSize(); // From: ../../../core/application/stage-manager
+    const dx = Bx - Ax, dy = By - Ay; // direction d=B-A
+    const size = stageManager.getSize(); // From: ../../../core/application/stage-manager
     const W = size.w; // canvas width
     const W = size.w; // canvas width
     const H = size.h; // canvas height
     const H = size.h; // canvas height
     var Ix, Iy, Ex, Ey; // Point I will be left-bottom one and E will be the top-right one
     var Ix, Iy, Ex, Ey; // Point I will be left-bottom one and E will be the top-right one
@@ -135,7 +135,7 @@ export class LineDrawer extends LineSegmentDrawer {
     if (dx === 0) {
     if (dx === 0) {
       // Calculates parameters Ug, Dg:
       // Calculates parameters Ug, Dg:
       Ug = -Ay / dy;    // -A.y / d.y
       Ug = -Ay / dy;    // -A.y / d.y
-      Dg = (H-Ay) / dy; // (H-A.y) / d.y
+      Dg = (H - Ay) / dy; // (H-A.y) / d.y
       // Find the situation (1), (2), (3) or (4) calculating "ming" the smallest "g" and "maxg" the greatest "g"
       // Find the situation (1), (2), (3) or (4) calculating "ming" the smallest "g" and "maxg" the greatest "g"
       const ming = Math.min(Ug, Dg); // minimum
       const ming = Math.min(Ug, Dg); // minimum
       const maxg = Math.max(Ug, Dg); // maximum
       const maxg = Math.max(Ug, Dg); // maximum
@@ -144,36 +144,36 @@ export class LineDrawer extends LineSegmentDrawer {
       Iy = Ay + ming * dy; // left initial point of this line (Ix, Iy)
       Iy = Ay + ming * dy; // left initial point of this line (Ix, Iy)
       Ex = Ax; Rg = 0;
       Ex = Ax; Rg = 0;
       Ey = Ay + maxg * dy; // right end    point of this line (Ex, Ey)
       Ey = Ay + maxg * dy; // right end    point of this line (Ex, Ey)
-      }
+    }
     else {
     else {
       // Calculates parameters Lg, Rg, Ug, Dg:
       // Calculates parameters Lg, Rg, Ug, Dg:
       Lg = -Ax / dx;    // -A.x / d.x
       Lg = -Ax / dx;    // -A.x / d.x
-      Rg = (W-Ax) / dx; // (W-A.x) / d.x
+      Rg = (W - Ax) / dx; // (W-A.x) / d.x
       Ug = -Ay / dy;    // -A.y / d.y
       Ug = -Ay / dy;    // -A.y / d.y
-      Dg = (H-Ay) / dy; // (H-A.y) / d.y
+      Dg = (H - Ay) / dy; // (H-A.y) / d.y
       // Find the situation (1), (2), (3) or (4) calculating "ming" the smallest "g" and "maxg" the greatest "g"
       // Find the situation (1), (2), (3) or (4) calculating "ming" the smallest "g" and "maxg" the greatest "g"
       var ming, maxg; // calculate extreme points (intercepted with the Canvas frame)
       var ming, maxg; // calculate extreme points (intercepted with the Canvas frame)
-      if (dx>0) { // (1)
-        if (Lg<Dg) ming = Dg;
+      if (dx > 0) { // (1)
+        if (Lg < Dg) ming = Dg;
         else ming = Lg;
         else ming = Lg;
-        if (Rg>Ug) maxg = Ug;
+        if (Rg > Ug) maxg = Ug;
         else maxg = Rg;
         else maxg = Rg;
-        }
+      }
       else { // (2)
       else { // (2)
-        if (Lg>Ug) ming = Ug;
+        if (Lg > Ug) ming = Ug;
         else ming = Lg;
         else ming = Lg;
-        if (Rg<Dg) maxg = Dg;
+        if (Rg < Dg) maxg = Dg;
         else maxg = Rg;
         else maxg = Rg;
-        }
+      }
       // Draw from minimum to maximum
       // Draw from minimum to maximum
       Ix = Ax + ming * dx;
       Ix = Ax + ming * dx;
       Iy = Ay + ming * dy; // left initial point of this line (Ix, Iy)
       Iy = Ay + ming * dy; // left initial point of this line (Ix, Iy)
       Ex = Ax + maxg * dx;
       Ex = Ax + maxg * dx;
       Ey = Ay + maxg * dy; // right end    point of this line (Ex, Ey)
       Ey = Ay + maxg * dy; // right end    point of this line (Ex, Ey)
-      }
+    }
 
 
     // Ix = Ax; Iy = H; Ex = Ax; Ey = 0;
     // Ix = Ax; Iy = H; Ex = Ax; Ey = 0;
-    const points = [Ix, Iy, Ex, Ey];      
+    const points = [Ix, Iy, Ex, Ey];
     //D console.log("./app/components/line-component/drawers/line-drawer.js: update(aggregator, e):\nA=("+Ax+","+Ay+"), B=("+Bx+","+By+")"); //leo
     //D console.log("./app/components/line-component/drawers/line-drawer.js: update(aggregator, e):\nA=("+Ax+","+Ay+"), B=("+Bx+","+By+")"); //leo
 
 
     // Update label line
     // Update label line
@@ -184,12 +184,12 @@ export class LineDrawer extends LineSegmentDrawer {
     aggregator.konvaObject.children[1].points(points);
     aggregator.konvaObject.children[1].points(points);
 
 
     super.batchDraw();
     super.batchDraw();
-    } // update(aggregator, e)
+  } // update(aggregator, e)
 
 
 
 
-  static getKonvaLine (pointA, pointB, useLabel) { //TODO: revisar, pois o codigo 'slope', 'linearCoefficient' so' funciona para quadrantes 1 e 3...
+  static getKonvaLine(pointA, pointB, useLabel) { //TODO: revisar, pois o codigo 'slope', 'linearCoefficient' so' funciona para quadrantes 1 e 3...
     const xA = pointA.posX, xB = pointB.posX,
     const xA = pointA.posX, xB = pointB.posX,
-          yA = pointA.posY, yB = pointB.posY;
+      yA = pointA.posY, yB = pointB.posY;
 
 
     const slope = (yB - yA) / (xB - xA);
     const slope = (yB - yA) / (xB - xA);
     const linearCoefficient = (yA * xB - yB * xA) / (xB - xA);
     const linearCoefficient = (yA * xB - yB * xA) / (xB - xA);
@@ -217,11 +217,11 @@ export class LineDrawer extends LineSegmentDrawer {
     SelectableDrawer.setSelectableIfIntersectionChanged(line);
     SelectableDrawer.setSelectableIfIntersectionChanged(line);
 
 
     return line;
     return line;
-    }
+  }
 
 
-  static drawKonvaLine (pointA, pointB) {
+  static drawKonvaLine(pointA, pointB) {
     const line = LineDrawer.getKonvaLine(pointA, pointB);
     const line = LineDrawer.getKonvaLine(pointA, pointB);
     return line;
     return line;
-    }
+  }
 
 
-  }
+}

+ 60 - 58
src/app/components/line-component/models/line-model.js

@@ -14,21 +14,21 @@ const Erro = 0.00001; //TODO a definir...
 
 
 export class LineModel extends LineSegmentModel {
 export class LineModel extends LineSegmentModel {
 
 
-  constructor (pointA, pointB, label, id) {
+  constructor(pointA, pointB, label, id) {
     super(pointA, pointB, label, id);
     super(pointA, pointB, label, id);
     this.setClass(ELEMENTS_CLASS.LINE);
     this.setClass(ELEMENTS_CLASS.LINE);
-    }
+  }
 
 
   // Overload the Segment 'insideSegment' method (otherwise point intersection could be hiden)
   // Overload the Segment 'insideSegment' method (otherwise point intersection could be hiden)
-  insideSegment (intersecX, intersecY) { //TODO Sempre verificar se esta dentro, nao parece bom...
+  insideSegment(intersecX, intersecY) { //TODO Sempre verificar se esta dentro, nao parece bom...
     return true;
     return true;
-    }
+  }
 
 
   // Intersection with circunference
   // Intersection with circunference
-  getIntersectionWithCircumference (circ) { // circ = circunference(C,radius)
+  getIntersectionWithCircumference(circ) { // circ = circunference(C,radius)
     // Delegate to super class Segment
     // Delegate to super class Segment
     return super.getIntersectionByCircumference(circ);
     return super.getIntersectionByCircumference(circ);
-    }
+  }
 
 
   // Intersection between Straigh Lines (SL): with sl
   // Intersection between Straigh Lines (SL): with sl
   // r := this=SL(A1,A2) e s := SL(B1,B2)
   // r := this=SL(A1,A2) e s := SL(B1,B2)
@@ -57,73 +57,75 @@ export class LineModel extends LineSegmentModel {
   // otherwise O2.y<>0 => y = (O2.x * B1.x + O2.y * B1.y - O2.x * x) / O2.y
   // otherwise O2.y<>0 => y = (O2.x * B1.x + O2.y * B1.y - O2.x * x) / O2.y
   //
   //
   // Return: .app/components/intersection-component/models/intersection-model.js
   // Return: .app/components/intersection-component/models/intersection-model.js
-  getIntersectionWithStraightLine (sl) { try {//D //leo
-    const A1 = this.pointA, A2  = this.pointB; // this = SL(A1,A2)
-    const A3 = sl.pointA,   A4 = sl.pointB;    // sl   = SL(A3, A4)
-    var A1x=A1.posX,        A1y=A1.posY,       // A1 -> this
-        A2x=A2.posX,        A2y=A2.posY;       // A2 -> this
-    var B1x=A3.posX,        B1y=A3.posY,       // B1 -> sl
-        B2x=A4.posX,        B2y=A4.posY;       // B2 -> sl
-    var d1x=A2x-A1x,        d1y=A2y-A1y,       // d1 = A2-A1
-        d2x=B2x-B1x,        d2y=B2y-B1y,       // d2 = B2-B1
-        O1x=-d1y,           O1y=d1x,           // O1 = (-d1.y,  d1.x) ortogonal a reta r=this
-        O2x=-d2y,           O2y=d2x,           // O2 = (-d2.y, d2.x) ortogonal a reta s
-        x,                  y;                 // P=(x,y) ponto procurado
+  getIntersectionWithStraightLine(sl) {
+    try {//D //leo
+      const A1 = this.pointA, A2 = this.pointB; // this = SL(A1,A2)
+      const A3 = sl.pointA, A4 = sl.pointB;    // sl   = SL(A3, A4)
+      var A1x = A1.posX, A1y = A1.posY,       // A1 -> this
+        A2x = A2.posX, A2y = A2.posY;       // A2 -> this
+      var B1x = A3.posX, B1y = A3.posY,       // B1 -> sl
+        B2x = A4.posX, B2y = A4.posY;       // B2 -> sl
+      var d1x = A2x - A1x, d1y = A2y - A1y,       // d1 = A2-A1
+        d2x = B2x - B1x, d2y = B2y - B1y,       // d2 = B2-B1
+        O1x = -d1y, O1y = d1x,           // O1 = (-d1.y,  d1.x) ortogonal a reta r=this
+        O2x = -d2y, O2y = d2x,           // O2 = (-d2.y, d2.x) ortogonal a reta s
+        x, y;                 // P=(x,y) ponto procurado
 
 
-    if (O2y * O1x - O1y * O2x == 0) { // "Reta: erro, divisao por zero"
-      console.log("/app/components/line-component/models/line-model.js: erro: divisao por zero!");
-      return null;
+      if (O2y * O1x - O1y * O2x == 0) { // "Reta: erro, divisao por zero"
+        console.log("/app/components/line-component/models/line-model.js: erro: divisao por zero!");
+        return null;
       }
       }
-    x = ( O2y * (O1x * A1x + O1y * A1y) - O1y * (O2x * B1x + O2y * B1y) ) / (O2y * O1x - O1y * O2x);
-    if (Math.abs(O1y)>Erro)
-      y = (O1x * A1x + O1y * A1y - O1x * x) / O1y;
-    else 
-    if (Math.abs(O2y)>Erro)
-      y = (O2x * B1x + O2y * B1y - O2x * x) / O2y;
-    else
-    if (O1y!=0.0)
-      y = (O1x * A1x + O1y * A1y - O1x * x) / O1y;
-    else
-    if (O2y!=0.0)
-      y = (O2x * B1x + O2y * B1y - O2x * x) / O2y;
-    else {
-      console.log("/app/components/line-component/models/line-model.js: erro: O2y=0!");
-      return null;
-      }
-    //D console.log("line-model.js: getIntersectionWithStraightLine(sl): (" + x + "," + y + ") = " +
-    //D             "inter(r(P("+A1x+","+A1y+"),P("+A2x+","+A2y+")), s(P("+B1x+","+B1y+"),P("+B2x+","+B2y+"))");
-    return [new IntersectionModel(x, y, undefined, this, sl, true, 0)];
+      x = (O2y * (O1x * A1x + O1y * A1y) - O1y * (O2x * B1x + O2y * B1y)) / (O2y * O1x - O1y * O2x);
+      if (Math.abs(O1y) > Erro)
+        y = (O1x * A1x + O1y * A1y - O1x * x) / O1y;
+      else
+        if (Math.abs(O2y) > Erro)
+          y = (O2x * B1x + O2y * B1y - O2x * x) / O2y;
+        else
+          if (O1y != 0.0)
+            y = (O1x * A1x + O1y * A1y - O1x * x) / O1y;
+          else
+            if (O2y != 0.0)
+              y = (O2x * B1x + O2y * B1y - O2x * x) / O2y;
+            else {
+              console.log("/app/components/line-component/models/line-model.js: erro: O2y=0!");
+              return null;
+            }
+      //D console.log("line-model.js: getIntersectionWithStraightLine(sl): (" + x + "," + y + ") = " +
+      //D             "inter(r(P("+A1x+","+A1y+"),P("+A2x+","+A2y+")), s(P("+B1x+","+B1y+"),P("+B2x+","+B2y+"))");
+      return [new IntersectionModel(x, y, undefined, this, sl, true, 0)];
     } catch (e) { console.log("app/components/line-component/models/line-model.js: getIntersectionWithStraightLine(.): erro!\n" + e.stack); }
     } catch (e) { console.log("app/components/line-component/models/line-model.js: getIntersectionWithStraightLine(.): erro!\n" + e.stack); }
-    } // getIntersectionWithStraightLine(sl)
+  } // getIntersectionWithStraightLine(sl)
 
 
 
 
   // Intersection between Straigh Line (SL) and Segment (S)
   // Intersection between Straigh Line (SL) and Segment (S)
   // P in S(C,D)  <=> P = a C+(1-a)D, a em [0,1] then | Px = Ax+b(Bx-Ax) = a*Cx + (1-a)Dx and Py = Ay+b(By-Ay) = a*Cy + (1-a)Dy and
   // P in S(C,D)  <=> P = a C+(1-a)D, a em [0,1] then | Px = Ax+b(Bx-Ax) = a*Cx + (1-a)Dx and Py = Ay+b(By-Ay) = a*Cy + (1-a)Dy and
   // P in SL(A,B) <=> P = A + b(B-A)             ---> | b = (a*Cx + (1-a)Dx - Ax)/(Bx-Ax)
   // P in SL(A,B) <=> P = A + b(B-A)             ---> | b = (a*Cx + (1-a)Dx - Ax)/(Bx-Ax)
-  getIntersectionWithSegment (segm) {
+  getIntersectionWithSegment(segm) {
     //const pointA = segm.pointA;
     //const pointA = segm.pointA;
     //const pointB = segm.pointB;
     //const pointB = segm.pointB;
     return segm.getIntersectionByLine(this); //TODO nome em './app/components/line-segment-component/models/line-segment-model.js ! getIntersectionByLine(.)' deveria ser 'getIntersectionWithSegment'
     return segm.getIntersectionByLine(this); //TODO nome em './app/components/line-segment-component/models/line-segment-model.js ! getIntersectionByLine(.)' deveria ser 'getIntersectionWithSegment'
-    }
+  }
 
 
 
 
   // Starting point to intersection started with StraightLine
   // Starting point to intersection started with StraightLine
-  getIntersection (geometricObject) { try { //D //leo
-    //D console.log("line-model.js.getIntersection: tipo=" + geometricObject.elementClass);
-    switch (geometricObject.elementClass) { // ./app/core/enums/elements-class-enum.js: POINT=0; INTERSECTION_POINT=1; CIRCUMFERENCE=3; LINE=4; LINE_SEGMENT=6,...
-      case ELEMENTS_CLASS.LINE:
-        return this.getIntersectionWithStraightLine(geometricObject); //TODO melhor 'with' que 'by'
-      case ELEMENTS_CLASS.LINE_SEGMENT:
-        return this.getIntersectionWithStraightLine(geometricObject); //TODO melhor 'with' que 'by'
-      case ELEMENTS_CLASS.CIRCUMFERENCE:
-        return this.getIntersectionWithCircumference(geometricObject); //TODO melhor 'with' que 'by'
-      default: break;
+  getIntersection(geometricObject) {
+    try { //D //leo
+      //D console.log("line-model.js.getIntersection: tipo=" + geometricObject.elementClass);
+      switch (geometricObject.elementClass) { // ./app/core/enums/elements-class-enum.js: POINT=0; INTERSECTION_POINT=1; CIRCUMFERENCE=3; LINE=4; LINE_SEGMENT=6,...
+        case ELEMENTS_CLASS.LINE:
+          return this.getIntersectionWithStraightLine(geometricObject); //TODO melhor 'with' que 'by'
+        case ELEMENTS_CLASS.LINE_SEGMENT:
+          return this.getIntersectionWithStraightLine(geometricObject); //TODO melhor 'with' que 'by'
+        case ELEMENTS_CLASS.CIRCUMFERENCE:
+          return this.getIntersectionWithCircumference(geometricObject); //TODO melhor 'with' que 'by'
+        default: break;
       }
       }
     } catch (e) { console.log("app/components/line-component/models/line-model.js: getIntersection(.): erro!\n" + e.stack); }
     } catch (e) { console.log("app/components/line-component/models/line-model.js: getIntersection(.): erro!\n" + e.stack); }
 
 
-    }
+  }
 
 
-  static do (map, list) {
+  static do(map, list) {
     const id = map.get("id");
     const id = map.get("id");
     const pointAId = map.get("param")[0];
     const pointAId = map.get("param")[0];
     const pointBId = map.get("param")[1];
     const pointBId = map.get("param")[1];
@@ -131,6 +133,6 @@ export class LineModel extends LineSegmentModel {
     const pointB = list.find(x => x.id === pointBId);
     const pointB = list.find(x => x.id === pointBId);
     const label = map.get("label")[0];
     const label = map.get("label")[0];
     return new LineModel(pointA, pointB, label, id);
     return new LineModel(pointA, pointB, label, id);
-    }
-  
-  }
+  }
+
+}

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

@@ -18,15 +18,15 @@ import { SelectableDrawer } from "../../../core/drawers/selectable-drawer";
 
 
 export class LineSegmentDrawer extends SelectableDrawer {
 export class LineSegmentDrawer extends SelectableDrawer {
 
 
-  static FIRST_POINT_STATE () {
+  static FIRST_POINT_STATE() {
     return "FIRST_POINT";
     return "FIRST_POINT";
-    }
+  }
 
 
-  static SECOND_POINT_STATE () {
+  static SECOND_POINT_STATE() {
     return "SECOND_POINT";
     return "SECOND_POINT";
-    }
+  }
 
 
-  constructor () {
+  constructor() {
     super();
     super();
     this.pointA;
     this.pointA;
     this.pointB;
     this.pointB;
@@ -37,66 +37,66 @@ export class LineSegmentDrawer extends SelectableDrawer {
     this.lineSegment;
     this.lineSegment;
     this.pointDrawer = new PointDrawer();
     this.pointDrawer = new PointDrawer();
     super.setElementClass(ELEMENTS_CLASS.LINE_SEGMENT);
     super.setElementClass(ELEMENTS_CLASS.LINE_SEGMENT);
-    }
+  }
 
 
-  setPointA (point) {
+  setPointA(point) {
     this.pointA = point;
     this.pointA = point;
-    }
-  setPointB (point) {
+  }
+  setPointB(point) {
     this.pointB = point;
     this.pointB = point;
-    }
-  setAggregatorA (aggregator) {
+  }
+  setAggregatorA(aggregator) {
     this.aggregatorA = aggregator;
     this.aggregatorA = aggregator;
     this.setPointA(aggregator.genericObject);
     this.setPointA(aggregator.genericObject);
-    }
-  setAggregatorB (aggregator) {
+  }
+  setAggregatorB(aggregator) {
     this.aggregatorB = aggregator;
     this.aggregatorB = aggregator;
     this.setPointB(aggregator.genericObject);
     this.setPointB(aggregator.genericObject);
-    }
+  }
 
 
-  draw (e) {
+  draw(e) {
     if (e != undefined) {
     if (e != undefined) {
       if (e.target != undefined && e.target.attrs.class != 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) ) {
+        (e.target.attrs.class == ELEMENTS_CLASS.POINT || e.target.attrs.class == ELEMENTS_CLASS.INTERSECTION_POINT)) {
         this.drawByStates(e.target);
         this.drawByStates(e.target);
         return;
         return;
-        }
+      }
       else if (e.attrs != undefined && e.attrs.genericObject != undefined) {
       else if (e.attrs != undefined && e.attrs.genericObject != undefined) {
         this.drawByLineSegment(e.attrs.genericObject)
         this.drawByLineSegment(e.attrs.genericObject)
         return;
         return;
-        }
       }
       }
+    }
     const points = Selector.getSelectedPoints();
     const points = Selector.getSelectedPoints();
     if (points == undefined || points.length == 0) {
     if (points == undefined || points.length == 0) {
       this.drawByStates();
       this.drawByStates();
       return;
       return;
-      }
-    this.drawByPoints(points);
     }
     }
+    this.drawByPoints(points);
+  }
 
 
 
 
-  drawByStates (konvaObject) {
+  drawByStates(konvaObject) {
     let aggregator = undefined;
     let aggregator = undefined;
     if (konvaObject != undefined) {
     if (konvaObject != undefined) {
       aggregator = Objects.getByKonvaObject(konvaObject)[0];
       aggregator = Objects.getByKonvaObject(konvaObject)[0];
-      }
+    }
     if (this.state == undefined) {
     if (this.state == undefined) {
       super.setState(LineSegmentDrawer.FIRST_POINT_STATE);
       super.setState(LineSegmentDrawer.FIRST_POINT_STATE);
-      }
+    }
     else if (this.state == LineSegmentDrawer.FIRST_POINT_STATE) {
     else if (this.state == LineSegmentDrawer.FIRST_POINT_STATE) {
       aggregator = aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
       aggregator = aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
       this.setAggregatorA(aggregator);
       this.setAggregatorA(aggregator);
       super.setState(LineSegmentDrawer.SECOND_POINT_STATE);
       super.setState(LineSegmentDrawer.SECOND_POINT_STATE);
-      }
+    }
     else if (this.state == LineSegmentDrawer.SECOND_POINT_STATE) {
     else if (this.state == LineSegmentDrawer.SECOND_POINT_STATE) {
       aggregator = aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
       aggregator = aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
       this.setAggregatorB(aggregator);
       this.setAggregatorB(aggregator);
       this.drawByPoints([this.pointA, this.pointB], [this.aggregatorA, this.aggregatorB]);
       this.drawByPoints([this.pointA, this.pointB], [this.aggregatorA, this.aggregatorB]);
       super.setState(LineSegmentDrawer.FIRST_POINT_STATE);
       super.setState(LineSegmentDrawer.FIRST_POINT_STATE);
-      }
     }
     }
+  }
 
 
-  drawByPoints (points, aggregators) {
+  drawByPoints(points, aggregators) {
     if (points == undefined || points.length < 1) return;
     if (points == undefined || points.length < 1) return;
     this.setPointA(points[0]);
     this.setPointA(points[0]);
     this.setPointB(points[1]);
     this.setPointB(points[1]);
@@ -105,9 +105,9 @@ export class LineSegmentDrawer extends SelectableDrawer {
     this.lineSegment = new LineSegmentModel(this.pointA, this.pointB, this.label);
     this.lineSegment = new LineSegmentModel(this.pointA, this.pointB, this.label);
     this.drawByLineSegment(this.lineSegment);
     this.drawByLineSegment(this.lineSegment);
     this.reset();
     this.reset();
-    }
+  }
 
 
-  drawByLineSegment (lineSegment) {
+  drawByLineSegment(lineSegment) {
     this.lineSegment = lineSegment;
     this.lineSegment = lineSegment;
     const group = SelectableDrawer.getKonvaGroup(false);
     const group = SelectableDrawer.getKonvaGroup(false);
     const text = LineSegmentDrawer.getKonvaText(lineSegment, lineSegment.label);
     const text = LineSegmentDrawer.getKonvaText(lineSegment, lineSegment.label);
@@ -116,7 +116,7 @@ export class LineSegmentDrawer extends SelectableDrawer {
     group.add(konvaObject);
     group.add(konvaObject);
     super.setKonvaObject(group);
     super.setKonvaObject(group);
     const aggregator = new DrawerAggregator(
     const aggregator = new DrawerAggregator(
-      this,  this.lineSegment,
+      this, this.lineSegment,
       group, ELEMENTS_CLASS.LINE_SEGMENT
       group, ELEMENTS_CLASS.LINE_SEGMENT
     );
     );
     super.addAggregator(aggregator);
     super.addAggregator(aggregator);
@@ -132,9 +132,9 @@ export class LineSegmentDrawer extends SelectableDrawer {
     super.batchDraw(); // ../../../core/drawers/drawer-aggregator.js
     super.batchDraw(); // ../../../core/drawers/drawer-aggregator.js
     SelectableDrawer.setMaxIndex(aggregators[0].konvaObject);
     SelectableDrawer.setMaxIndex(aggregators[0].konvaObject);
     SelectableDrawer.setMaxIndex(aggregators[1].konvaObject);
     SelectableDrawer.setMaxIndex(aggregators[1].konvaObject);
-    }
+  }
 
 
-  resolveAggregators (points, aggregators, selected) {
+  resolveAggregators(points, aggregators, selected) {
     this.pointA = points[0];
     this.pointA = points[0];
     this.pointB = points[1];
     this.pointB = points[1];
 
 
@@ -145,9 +145,9 @@ export class LineSegmentDrawer extends SelectableDrawer {
         Objects.getByGenericObject(this.pointA)[0],
         Objects.getByGenericObject(this.pointA)[0],
         Objects.getByGenericObject(this.pointB)[0]
         Objects.getByGenericObject(this.pointB)[0]
       ];
       ];
-      }
-    return aggregators;
     }
     }
+    return aggregators;
+  }
 
 
   update(aggregator, e) {
   update(aggregator, e) {
     if (!aggregator.visible) return;
     if (!aggregator.visible) return;
@@ -161,7 +161,7 @@ export class LineSegmentDrawer extends SelectableDrawer {
       pointB.posX, pointB.posY
       pointB.posX, pointB.posY
     ]);
     ]);
     super.batchDraw();
     super.batchDraw();
-    }
+  }
 
 
   insertPoint(aggregator) {
   insertPoint(aggregator) {
     const pointA = aggregator.genericObject.pointA;
     const pointA = aggregator.genericObject.pointA;
@@ -174,9 +174,9 @@ export class LineSegmentDrawer extends SelectableDrawer {
       pointC.posX, pointC.posY
       pointC.posX, pointC.posY
     ]);
     ]);
     super.batchDraw();
     super.batchDraw();
-    }
+  }
 
 
-  static getKonvaText (lineSegment, label) {
+  static getKonvaText(lineSegment, label) {
     const pos = lineSegment.getMiddlePoint();
     const pos = lineSegment.getMiddlePoint();
     return new Konva.Text({
     return new Konva.Text({
       x: pos.posX,
       x: pos.posX,
@@ -191,10 +191,10 @@ export class LineSegmentDrawer extends SelectableDrawer {
       resizeEnabled: false,
       resizeEnabled: false,
       transformEnabled: false,
       transformEnabled: false,
       selectable: false
       selectable: false
-      });
-    }
+    });
+  }
 
 
-  static getKonvaLine (pointA, pointB, useLabel) {
+  static getKonvaLine(pointA, pointB, useLabel) {
     const points = [pointA.posX, pointA.posY, pointB.posX, pointB.posY];
     const points = [pointA.posX, pointA.posY, pointB.posX, pointB.posY];
     const line = new Konva.Line({
     const line = new Konva.Line({
       points: points,
       points: points,
@@ -209,14 +209,14 @@ export class LineSegmentDrawer extends SelectableDrawer {
       selectable: false,
       selectable: false,
       draggable: false,
       draggable: false,
       style: { stroke: "grey", fill: "grey" }
       style: { stroke: "grey", fill: "grey" }
-      });
+    });
     SelectableDrawer.setSelectableIfIntersectionChanged(line);
     SelectableDrawer.setSelectableIfIntersectionChanged(line);
     return line;
     return line;
-    }
+  }
 
 
-  static drawKonvaLine (pointA, pointB) {
+  static drawKonvaLine(pointA, pointB) {
     const line = LineSegmentDrawer.getKonvaLine(pointA, pointB);
     const line = LineSegmentDrawer.getKonvaLine(pointA, pointB);
     return line;
     return line;
-    }
+  }
 
 
-  }
+}

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

@@ -13,7 +13,7 @@ import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
 
 
 export class LineSegmentModel extends GeometricObject {
 export class LineSegmentModel extends GeometricObject {
 
 
-  constructor (pointA, pointB, label, id) {
+  constructor(pointA, pointB, label, id) {
     super(id);
     super(id);
     this.pointA = pointA;
     this.pointA = pointA;
     this.pointB = pointB;
     this.pointB = pointB;
@@ -21,9 +21,9 @@ export class LineSegmentModel extends GeometricObject {
     super.setClass(ELEMENTS_CLASS.LINE_SEGMENT);
     super.setClass(ELEMENTS_CLASS.LINE_SEGMENT);
     this.definitions.push(this.pointA);
     this.definitions.push(this.pointA);
     this.definitions.push(this.pointB);
     this.definitions.push(this.pointB);
-    }
+  }
 
 
-  getStraight () {
+  getStraight() {
     const aX = this.pointA.posX;
     const aX = this.pointA.posX;
     const aY = this.pointA.posY;
     const aY = this.pointA.posY;
     const bX = this.pointB.posX;
     const bX = this.pointB.posX;
@@ -32,10 +32,10 @@ export class LineSegmentModel extends GeometricObject {
     const b = aX - bX;
     const b = aX - bX;
     const c = a * aX + b * aY;
     const c = a * aX + b * aY;
     return [a, b, c];
     return [a, b, c];
-    }
+  }
 
 
   // Return [(Bx-Ax, By-Ay)]
   // Return [(Bx-Ax, By-Ay)]
-  getDirection () {
+  getDirection() {
     const aX = this.pointA.posX;
     const aX = this.pointA.posX;
     const aY = this.pointA.posY;
     const aY = this.pointA.posY;
     const bX = this.pointB.posX;
     const bX = this.pointB.posX;
@@ -43,16 +43,16 @@ export class LineSegmentModel extends GeometricObject {
     const a = bX - aX;
     const a = bX - aX;
     const b = bY - aY;
     const b = bY - aY;
     return [a, b];
     return [a, b];
-    }
+  }
 
 
 
 
-  getMiddlePoint () {
+  getMiddlePoint() {
     const x = (this.pointA.posX + this.pointB.posX) / 2;
     const x = (this.pointA.posX + this.pointB.posX) / 2;
     const y = (this.pointA.posY + this.pointB.posY) / 2;
     const y = (this.pointA.posY + this.pointB.posY) / 2;
-    return { posX: x, posY: y   };
-    }
+    return { posX: x, posY: y };
+  }
 
 
-  getIntersection (geometricObject) {
+  getIntersection(geometricObject) {
     switch (geometricObject.elementClass) {
     switch (geometricObject.elementClass) {
       case ELEMENTS_CLASS.LINE: // StraightLine
       case ELEMENTS_CLASS.LINE: // StraightLine
         return geometricObject.getIntersectionWithStraightLine(this); // Delegate to StraightLine
         return geometricObject.getIntersectionWithStraightLine(this); // Delegate to StraightLine
@@ -62,10 +62,10 @@ export class LineSegmentModel extends GeometricObject {
         return this.getIntersectionByCircumference(geometricObject);
         return this.getIntersectionByCircumference(geometricObject);
       default:
       default:
         break;
         break;
-      }
     }
     }
+  }
 
 
-  getDeterminantByLine (lineSegment) {
+  getDeterminantByLine(lineSegment) {
     const og1 = this.getStraight();
     const og1 = this.getStraight();
     const og2 = lineSegment.getStraight();
     const og2 = lineSegment.getStraight();
     const a1 = og1[0];
     const a1 = og1[0];
@@ -74,9 +74,9 @@ export class LineSegmentModel extends GeometricObject {
     const b2 = og2[1];
     const b2 = og2[1];
     const determinant = a1 * b2 - a2 * b1;
     const determinant = a1 * b2 - a2 * b1;
     return determinant;
     return determinant;
-    }
+  }
 
 
-  getIntersectionByLine (lineSegment) { //TODO nome deveria especificar SEGMENTO: getIntersectionWithSegment
+  getIntersectionByLine(lineSegment) { //TODO nome deveria especificar SEGMENTO: getIntersectionWithSegment
     const og1 = this.getStraight(); //r
     const og1 = this.getStraight(); //r
     const og2 = lineSegment.getStraight(); //s
     const og2 = lineSegment.getStraight(); //s
     const a1 = og1[0];
     const a1 = og1[0];
@@ -87,17 +87,17 @@ export class LineSegmentModel extends GeometricObject {
     const c2 = og2[2];
     const c2 = og2[2];
     const determinant = a1 * b2 - a2 * b1;
     const determinant = a1 * b2 - a2 * b1;
     if (determinant == 0) {
     if (determinant == 0) {
-      return [new IntersectionModel(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, undefined, this, lineSegment, true,0)];
-      }
+      return [new IntersectionModel(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, undefined, this, lineSegment, true, 0)];
+    }
     else {
     else {
       const x = (b2 * c1 - b1 * c2) / determinant;
       const x = (b2 * c1 - b1 * c2) / determinant;
       const y = (a1 * c2 - a2 * c1) / determinant;
       const y = (a1 * c2 - a2 * c1) / determinant;
       return [new IntersectionModel(x, y, undefined, this, lineSegment, true, 0)];
       return [new IntersectionModel(x, y, undefined, this, lineSegment, true, 0)];
-      }
     }
     }
+  }
 
 
   // Intersection with circunference
   // Intersection with circunference
-  getIntersectionByCircumference (circumference) { //TODO Nome? Melhor 'getIntersectionWithCircumference'
+  getIntersectionByCircumference(circumference) { //TODO Nome? Melhor 'getIntersectionWithCircumference'
     const pointA = this.pointA;
     const pointA = this.pointA;
     const pointB = this.pointB;
     const pointB = this.pointB;
     const center = circumference.center;
     const center = circumference.center;
@@ -123,8 +123,8 @@ export class LineSegmentModel extends GeometricObject {
 
 
     if (delta < 0) { //TODO Verificar? No intersection points
     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: getIntersectionByCircumference(.): delta<0: " + Number.MAX_SAFE_INTEGER);
-      return [PA,PB];
-      }
+      return [PA, PB];
+    }
 
 
     const deltaSqrt = Math.sqrt(delta);
     const deltaSqrt = Math.sqrt(delta);
     const root1 = -D + deltaSqrt;
     const root1 = -D + deltaSqrt;
@@ -136,7 +136,15 @@ export class LineSegmentModel extends GeometricObject {
       //D console.log("line-segment-model.js: getIntersectionByCircumference(.): delta==0");
       //D console.log("line-segment-model.js: getIntersectionByCircumference(.): delta==0");
       PA.bind(x1, y1, undefined, this, circumference, true, 0);
       PA.bind(x1, y1, undefined, this, circumference, true, 0);
       return [PA, PB];
       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 x2 = pointA.posX - dx * root2;
     const y2 = pointA.posY - dy * root2;
     const y2 = pointA.posY - dy * root2;
@@ -144,20 +152,16 @@ export class LineSegmentModel extends GeometricObject {
     PA.bind(x1, y1, undefined, this, circumference, true, 0);
     PA.bind(x1, y1, undefined, this, circumference, true, 0);
     PB.bind(x2, y2, undefined, this, circumference, true, 1);
     PB.bind(x2, y2, undefined, this, circumference, true, 1);
 
 
-    if (this.visible) {
-      if (!this.insideSegment(PA.posX, PA.posY))
-        PA.bind(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, undefined, this, circumference, false, 0)
+    if (!this.insideSegment(PB.posX, PB.posY))
+      PB.bind(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, undefined, this, circumference, false, 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];
-    } // getIntersectionByCircumference(circumference)
+    return [PA, PB];
+  } // getIntersectionByCircumference(circumference)
 
 
 
 
   // Considering de "level set" defined by direction d=B-A and intersection P,
   // 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
   // if d'P<d'A or d'P>d'B, then intersection is empty
-  insideSegment (intersecX, intersecY) {
+  insideSegment(intersecX, intersecY) {
     //D console.log("line-segment-model.js: insideSegment(.)");
     //D console.log("line-segment-model.js: insideSegment(.)");
     const valuesR = this.getDirection(); // get d=B-A
     const valuesR = this.getDirection(); // get d=B-A
     const dirX = valuesR[0]; // Bx-Ax
     const dirX = valuesR[0]; // Bx-Ax
@@ -169,7 +173,7 @@ export class LineSegmentModel extends GeometricObject {
 
 
     if (cInterA < cRA) { // d'P < d'A
     if (cInterA < cRA) { // d'P < d'A
       return false;
       return false;
-      }
+    }
 
 
     // comparacao cv do ponto B < cv da intersec =>  vazio
     // comparacao cv do ponto B < cv da intersec =>  vazio
     const cRB = dirX * this.pointB.posX + dirY * this.pointB.posY;
     const cRB = dirX * this.pointB.posX + dirY * this.pointB.posY;
@@ -178,12 +182,12 @@ export class LineSegmentModel extends GeometricObject {
       this.posX = Number.MAX_SAFE_INTEGER;
       this.posX = Number.MAX_SAFE_INTEGER;
       this.posY = Number.MAX_SAFE_INTEGER;
       this.posY = Number.MAX_SAFE_INTEGER;
       return false;
       return false;
-      }
+    }
 
 
     return true;
     return true;
-    }
+  }
 
 
-  static do (map, list) {
+  static do(map, list) {
     const id = map.get("id");
     const id = map.get("id");
     const pointAId = map.get("param")[0];
     const pointAId = map.get("param")[0];
     const pointBId = map.get("param")[1];
     const pointBId = map.get("param")[1];
@@ -191,6 +195,6 @@ export class LineSegmentModel extends GeometricObject {
     const pointB = list.find(x => x.id === pointBId);
     const pointB = list.find(x => x.id === pointBId);
     const label = map.get("label")[0];
     const label = map.get("label")[0];
     return new LineSegmentModel(pointA, pointB, label, id);
     return new LineSegmentModel(pointA, pointB, label, id);
-    }
+  }
 
 
-  }
+}

+ 3 - 2
src/app/components/point-component/drawers/point-drawer.js

@@ -84,13 +84,14 @@ export class PointDrawer extends SelectableDrawer {
     const circle = PointDrawer.getKonvaCircle(point, draggable, selectable);
     const circle = PointDrawer.getKonvaCircle(point, draggable, selectable);
 
 
     if (useLabel != undefined && useLabel) {
     if (useLabel != undefined && useLabel) {
-      const label = Label.draw();
+      let label = (point != undefined && point.label != undefined && point.label != '') ? point.label : Label.draw();
       point.setLabel(label);
       point.setLabel(label);
       const text = PointDrawer.getKonvaText(point, label);
       const text = PointDrawer.getKonvaText(point, label);
       group.add(text);
       group.add(text);
     }
     }
+
     if (selectable == undefined || selectable)
     if (selectable == undefined || selectable)
-      SelectableDrawer.setSelectable(circle);
+      SelectableDrawer.setSelectableIfSelectorChanged(circle);
 
 
     if (useLabel) {
     if (useLabel) {
       group.add(circle);
       group.add(circle);

+ 36 - 0
src/app/components/trash-component/drawers/trash-drawer.js

@@ -0,0 +1,36 @@
+import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
+import { SelectableDrawer } from "../../../core/drawers/selectable-drawer";
+import { objects as Objects } from "../../../core/application/objects";
+
+export class TrashDrawer extends SelectableDrawer {
+  constructor() {
+    super();
+
+    this.setElementClass(ELEMENTS_CLASS.NONE);
+  }
+
+  draw(e) {
+    const objects = Objects.getSelectedObjects();
+    objects.forEach(aggregator => {
+      this.delete(aggregator);
+    });
+    super.batchDraw();
+    return;
+  }
+
+  delete(aggregator) {
+
+    Objects.removeAggregator(aggregator);
+    aggregator.aggregators.forEach(dependenceAggregator => {
+      this.delete(dependenceAggregator);
+
+    });
+    aggregator.visible = false;
+
+  }
+
+  update(aggregator, e) {
+
+    return;
+  }
+}

+ 6 - 4
src/app/core/application/header-menu.js

@@ -2,7 +2,7 @@ import { stageManager } from "./stage-manager";
 import { FileParser } from "../parser/file-parser";
 import { FileParser } from "../parser/file-parser";
 import { ParserOrchestrator } from "../parser/parser-orchestrator";
 import { ParserOrchestrator } from "../parser/parser-orchestrator";
 class HeaderMenu {
 class HeaderMenu {
-  constructor() {}
+  constructor() { }
   bootstrap() {
   bootstrap() {
     $("body").on("click", "#save", this.save.bind(this));
     $("body").on("click", "#save", this.save.bind(this));
     $("body").on("click", "#open", this.open.bind(this));
     $("body").on("click", "#open", this.open.bind(this));
@@ -11,13 +11,15 @@ class HeaderMenu {
   save() {
   save() {
     const layer = stageManager.getCurrentLayer();
     const layer = stageManager.getCurrentLayer();
     const file = layer.actionManager.save();
     const file = layer.actionManager.save();
+    const name = prompt("Sallet como", layer.name.replace(/ /g, "_").toLowerCase());
+    if (name == undefined) return;
     const a = document.createElement("a"),
     const a = document.createElement("a"),
       url = URL.createObjectURL(file);
       url = URL.createObjectURL(file);
     a.href = url;
     a.href = url;
-    a.download = `${layer.name}.geo`;
+    a.download = `${name}.geo`;
     document.body.appendChild(a);
     document.body.appendChild(a);
     a.click();
     a.click();
-    setTimeout(function() {
+    setTimeout(function () {
       document.body.removeChild(a);
       document.body.removeChild(a);
       window.URL.revokeObjectURL(url);
       window.URL.revokeObjectURL(url);
     }, 0);
     }, 0);
@@ -29,7 +31,7 @@ class HeaderMenu {
     const files = $("#input-file")[0].files;
     const files = $("#input-file")[0].files;
     if (files == undefined || files.length === 0) return;
     if (files == undefined || files.length === 0) return;
     const reader = new FileReader();
     const reader = new FileReader();
-    reader.onload = function() {
+    reader.onload = function () {
       const result = reader.result;
       const result = reader.result;
       const parser = new FileParser(result);
       const parser = new FileParser(result);
       const map = parser.parse();
       const map = parser.parse();

+ 6 - 2
src/app/core/application/objects.js

@@ -1,7 +1,7 @@
 import { stageManager as StageManager } from "./stage-manager";
 import { stageManager as StageManager } from "./stage-manager";
 
 
 class Objects {
 class Objects {
-  constructor() {}
+  constructor() { }
   add(aggregator) {
   add(aggregator) {
     StageManager.getCurrentLayer().addAggregator(aggregator);
     StageManager.getCurrentLayer().addAggregator(aggregator);
   }
   }
@@ -16,7 +16,7 @@ class Objects {
       e =>
       e =>
         e.konvaObject._id == konvaObject._id ||
         e.konvaObject._id == konvaObject._id ||
         e.konvaObject.children.filter(x => x._id == konvaObject._id)[0] !=
         e.konvaObject.children.filter(x => x._id == konvaObject._id)[0] !=
-          undefined
+        undefined
     );
     );
   }
   }
   getSelectedObjects() {
   getSelectedObjects() {
@@ -29,5 +29,9 @@ class Objects {
   removeSelectedOject(aggregator) {
   removeSelectedOject(aggregator) {
     return StageManager.getCurrentLayer().removeSelectedAggregator(aggregator);
     return StageManager.getCurrentLayer().removeSelectedAggregator(aggregator);
   }
   }
+  removeAggregator(aggregator) {
+
+    StageManager.getCurrentLayer().removeAggregator(aggregator);
+  }
 }
 }
 export const objects = new Objects();
 export const objects = new Objects();

+ 11 - 4
src/app/core/application/stage-manager.js

@@ -8,6 +8,13 @@ class StageManager {
     this._stage;
     this._stage;
     this._bootstrap();
     this._bootstrap();
   }
   }
+
+  getSize() {
+    return {
+      w: this._width,
+      h: this._height
+    }
+  }
   getCurrentStage() {
   getCurrentStage() {
     return this._stage;
     return this._stage;
   }
   }
@@ -21,7 +28,7 @@ class StageManager {
     return this._stage.getCurrentKonvaLayer();
     return this._stage.getCurrentKonvaLayer();
   }
   }
   create() {
   create() {
-    var id = this._files.length + 1;
+    let id = this._files.length + 1;
     this._createLayer();
     this._createLayer();
     this._makeTemplate(this._stage.layer);
     this._makeTemplate(this._stage.layer);
     this._files.push(this._stage.layer);
     this._files.push(this._stage.layer);
@@ -84,10 +91,10 @@ class StageManager {
   _selectFile(e) {
   _selectFile(e) {
     const file = $(e.currentTarget);
     const file = $(e.currentTarget);
     const id = parseInt(file.attr("file-id"));
     const id = parseInt(file.attr("file-id"));
-    const layer = this._files.find(function(element) {
+    const layer = this._files.find(function (element) {
       return element.id == id;
       return element.id == id;
     });
     });
-    $(".file").each(function() {
+    $(".file").each(function () {
       $(this).removeClass("active");
       $(this).removeClass("active");
     });
     });
     file.addClass("active");
     file.addClass("active");
@@ -111,7 +118,7 @@ class StageManager {
   }
   }
 
 
   _makeTemplate(layer) {
   _makeTemplate(layer) {
-    $(".file").each(function() {
+    $(".file").each(function () {
       $(this).removeClass("active");
       $(this).removeClass("active");
     });
     });
     $("#files").append(
     $("#files").append(

+ 3 - 0
src/app/core/drawers/drawer-manager.js

@@ -27,5 +27,8 @@ class DrawerManager {
   addAction(action) {
   addAction(action) {
     Stages.getCurrentLayer().actionManager.push(action);
     Stages.getCurrentLayer().actionManager.push(action);
   }
   }
+  removeAction(action) {
+    Stages.getCurrentLayer().actionManager.remove(action);
+  }
 }
 }
 export const drawerManager = new DrawerManager();
 export const drawerManager = new DrawerManager();

+ 1 - 1
src/app/core/drawers/drawer.js

@@ -13,7 +13,7 @@ export class Drawer {
     this.konvaObject;
     this.konvaObject;
     this.elementClass = undefined;
     this.elementClass = undefined;
   }
   }
-  onDragMove() {}
+  onDragMove() { }
   setElementClass(elementClass) {
   setElementClass(elementClass) {
     this.elementClass = elementClass;
     this.elementClass = elementClass;
   }
   }

+ 13 - 2
src/app/core/drawers/layer.js

@@ -4,7 +4,7 @@ import { ActionManager } from "../models/application/actions/action-manager";
 export class Layer {
 export class Layer {
   constructor(id, konvaLayer) {
   constructor(id, konvaLayer) {
     this.id = id;
     this.id = id;
-    this.name = "New document " + this.id;
+    this.name = "New Construction " + this.id;
     this.konvaLayer = konvaLayer;
     this.konvaLayer = konvaLayer;
     this.aggregators = [];
     this.aggregators = [];
     this.selectedAggregators = [];
     this.selectedAggregators = [];
@@ -37,8 +37,19 @@ export class Layer {
   }
   }
   removeSelectedAggregator(aggregator) {
   removeSelectedAggregator(aggregator) {
     if (this.selectedAggregators.includes(aggregator)) {
     if (this.selectedAggregators.includes(aggregator)) {
-      var index = this.selectedAggregators.indexOf(aggregator);
+      let index = this.selectedAggregators.indexOf(aggregator);
       this.selectedAggregators.splice(index, 1);
       this.selectedAggregators.splice(index, 1);
     }
     }
   }
   }
+  removeAggregator(aggregator) {
+    let index = this.aggregators.indexOf(aggregator);
+    this.aggregators.splice(index, 1);
+    if (this.selectedAggregators.includes(aggregator)) {
+      let index = this.selectedAggregators.indexOf(aggregator);
+      this.selectedAggregators.splice(index, 1);
+    }
+    this.actionManager.remove(aggregator.genericObject);
+    aggregator.konvaObject.destroy();
+
+  }
 }
 }

+ 29 - 4
src/app/core/drawers/selectable-drawer.js

@@ -1,8 +1,8 @@
 import { Drawer } from "./drawer";
 import { Drawer } from "./drawer";
-
 import { stageManager as StageManager } from "../application/stage-manager";
 import { stageManager as StageManager } from "../application/stage-manager";
 import { ELEMENTS_CLASS } from "../enums/elements-class-enum";
 import { ELEMENTS_CLASS } from "../enums/elements-class-enum";
 import { app as App } from "../../app";
 import { app as App } from "../../app";
+import { COMPONENT_TYPE } from "../enums/component-type-enum";
 const HOVER_STYLE = {
 const HOVER_STYLE = {
   fill: "#33BCFF",
   fill: "#33BCFF",
   strokeWidth: 6,
   strokeWidth: 6,
@@ -23,14 +23,39 @@ const STYLE_POINT = {
 export class SelectableDrawer extends Drawer {
 export class SelectableDrawer extends Drawer {
   constructor() {
   constructor() {
     super();
     super();
+    this.setElementClass(ELEMENTS_CLASS.SELECTOR);
+  }
+  static setSelectableIfIntersectionChanged(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 setSelectableIfToolChanged(konvaObject) {
+  static setSelectableIfSelectorChanged(konvaObject) {
     konvaObject.on("mouseover", function () {
     konvaObject.on("mouseover", function () {
       const selectedTool = App.getSelectedTool();
       const selectedTool = App.getSelectedTool();
       if (
       if (
         selectedTool != undefined &&
         selectedTool != undefined &&
         selectedTool.drawer != undefined &&
         selectedTool.drawer != undefined &&
-        selectedTool.drawer.elementClass == ELEMENTS_CLASS.INTERSECTION_POINT
+        selectedTool.options.type === COMPONENT_TYPE.SELECTOR
+        || selectedTool.drawer.elementClass == ELEMENTS_CLASS.CIRCUMFERENCE
+        || selectedTool.drawer.elementClass == ELEMENTS_CLASS.LINE_SEGMENT
       ) {
       ) {
         this.strokeWidth(HOVER_STYLE.strokeWidth);
         this.strokeWidth(HOVER_STYLE.strokeWidth);
         this.stroke(HOVER_STYLE.stroke);
         this.stroke(HOVER_STYLE.stroke);
@@ -58,4 +83,4 @@ export class SelectableDrawer extends Drawer {
     });
     });
     return konvaObject;
     return konvaObject;
   }
   }
-}
+}

+ 1 - 1
src/app/core/drawers/stage.js

@@ -45,7 +45,7 @@ export class Stage {
   draw(object) {
   draw(object) {
     if (object == undefined) this.konvaStage.draw();
     if (object == undefined) this.konvaStage.draw();
     else {
     else {
-      var layer = this.layer.getKonvaLayer();
+      let layer = this.layer.getKonvaLayer();
       this.layer.getKonvaGroup().add(object);
       this.layer.getKonvaGroup().add(object);
       layer.draw();
       layer.draw();
       this.konvaStage.draw(layer);
       this.konvaStage.draw(layer);

+ 4 - 0
src/app/core/enums/elements-class-enum.js

@@ -7,6 +7,7 @@
  */
  */
 
 
 export const ELEMENTS_CLASS = {
 export const ELEMENTS_CLASS = {
+  NONE: -1,
   POINT: 0,
   POINT: 0,
   INTERSECTION_POINT: 1,
   INTERSECTION_POINT: 1,
   CIRCUMFERENCE: 3,
   CIRCUMFERENCE: 3,
@@ -45,7 +46,10 @@ export function fromCodeToClass(code) {
       return ELEMENTS_CLASS.LINE_SEGMENT;
       return ELEMENTS_CLASS.LINE_SEGMENT;
     case 3:
     case 3:
       return ELEMENTS_CLASS.CIRCUMFERENCE;
       return ELEMENTS_CLASS.CIRCUMFERENCE;
+    case 4:
+      return ELEMENTS_CLASS.LINE;
     default:
     default:
+      console.error("Tipo não suportado" + "\"" + code + "\"", code)
       return ELEMENTS_CLASS.POINT;
       return ELEMENTS_CLASS.POINT;
     }
     }
 
 

+ 11 - 1
src/app/core/models/application/actions/action-manager.js

@@ -1,3 +1,4 @@
+import { xor } from "lodash";
 import { browser } from "../../../application/browser";
 import { browser } from "../../../application/browser";
 
 
 export class ActionManager {
 export class ActionManager {
@@ -7,6 +8,15 @@ export class ActionManager {
   push(action) {
   push(action) {
     this.actions.push(action);
     this.actions.push(action);
   }
   }
+  remove(genericObject) {
+
+    const action = this.actions.find(action => action.genericObject == genericObject);
+    const index = this.actions.indexOf(action);
+    this.actions.splice(index, 1);
+  }
+  pop() {
+    throw "Not implemented";
+  }
   clear() {
   clear() {
     this.actions = [];
     this.actions = [];
   }
   }
@@ -26,7 +36,7 @@ export class ActionManager {
       action.rehydrate();
       action.rehydrate();
       LINES.push(action.toString());
       LINES.push(action.toString());
     });
     });
-    var file = new Blob([...LINES], {
+    let file = new Blob([...LINES], {
       type: "text/plain;charset=utf-8"
       type: "text/plain;charset=utf-8"
     });
     });
     return file;
     return file;

+ 1 - 1
src/app/core/models/objects/generic-object.js

@@ -14,7 +14,7 @@ export class GenericObject {
     this.definitions = [];
     this.definitions = [];
     this.labelColor = "";
     this.labelColor = "";
     this.defined = 1;
     this.defined = 1;
-    this.color = "";
+    this.color = -16776961;
     this.visible = true;
     this.visible = true;
   }
   }
 }
 }

+ 19 - 1
src/app/core/parser/parser-orchestrator.js

@@ -4,7 +4,8 @@ import { CircumferenceModel } from "../../components/circumference-component/mod
 import { LineSegmentModel } from "../../components/line-segment-component/models/line-segment-model";
 import { LineSegmentModel } from "../../components/line-segment-component/models/line-segment-model";
 import { IntersectionModel } from "../../components/intersection-component/models/intersection-model";
 import { IntersectionModel } from "../../components/intersection-component/models/intersection-model";
 import { menu } from "../application/menu";
 import { menu } from "../application/menu";
-
+import { label as Label } from '../../component-registry/label';
+import { LineModel } from "../../components/line-component/models/line-model";
 export class ParserOrchestrator {
 export class ParserOrchestrator {
 
 
   constructor(mapArr) {
   constructor(mapArr) {
@@ -32,10 +33,24 @@ export class ParserOrchestrator {
       case ELEMENTS_CLASS.LINE_SEGMENT:
       case ELEMENTS_CLASS.LINE_SEGMENT:
         object = LineSegmentModel.do(map, this.list);
         object = LineSegmentModel.do(map, this.list);
         break;
         break;
+      case ELEMENTS_CLASS.LINE:
+        object = LineModel.do(map, this.list);
+        break;
       default:
       default:
         break;
         break;
+
+    }
+    if (object == undefined) return;
+    switch (object.elementClass) {
+      case ELEMENTS_CLASS.CIRCUMFERENCE:
+        Label.pushLower(object.label);
+      case ELEMENTS_CLASS.LINE_SEGMENT:
+        Label.pushLower(object.label);
+      default:
+        Label.pushUpper(object.label);
     }
     }
     this.list.push(object);
     this.list.push(object);
+
   }
   }
   draw(object) {
   draw(object) {
     if (object == undefined) return;
     if (object == undefined) return;
@@ -54,6 +69,9 @@ export class ParserOrchestrator {
       case ELEMENTS_CLASS.LINE_SEGMENT:
       case ELEMENTS_CLASS.LINE_SEGMENT:
         drawer = this.getDrawer(ELEMENTS_CLASS.LINE_SEGMENT)
         drawer = this.getDrawer(ELEMENTS_CLASS.LINE_SEGMENT)
         break;
         break;
+      case ELEMENTS_CLASS.LINE:
+        drawer = this.getDrawer(ELEMENTS_CLASS.LINE)
+        break;
       default:
       default:
         break;
         break;
     }
     }

BIN
src/assets/images/icons/Intersection.png


BIN
src/assets/images/icons/Line.png


+ 50 - 0
src/assets/images/icons/Line.svg

@@ -0,0 +1,50 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
+<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39        ">
+   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+      <rdf:Description rdf:about=""/>
+   </rdf:RDF>
+</x:xmpmeta>
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                           
+<?xpacket end="w"?></metadata>
+<defs>
+    <style>
+      .cls-1 {
+        fill: #464646;
+        fill-rule: evenodd;
+      }
+
+      .cls-2 {
+        fill: #84bb3a;
+      }
+    </style>
+  </defs>
+  <g id="Line">
+    <g id="Line-2" data-name="Line">
+      <path class="cls-1" d="M701,1.458l0.44-.439L738,37.542l-0.439.439Z" transform="translate(-700)"/>
+      <path class="cls-1" d="M701,1.458l0.44-.439L738,37.542l-0.439.439Z" transform="translate(-700)"/>
+      <circle class="cls-2" cx="11.61" cy="10.703" r="2.61"/>
+      <circle id="Ellipse_1_copy" data-name="Ellipse 1 copy" class="cls-2" cx="28.39" cy="28.297" r="2.61"/>
+    </g>
+  </g>
+</svg>

BIN
src/assets/images/icons/Point.png


BIN
src/assets/images/icons/Trash.png


+ 49 - 0
src/assets/images/icons/Trash.svg

@@ -0,0 +1,49 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
+<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39        ">
+   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+      <rdf:Description rdf:about=""/>
+   </rdf:RDF>
+</x:xmpmeta>
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                           
+<?xpacket end="w"?></metadata>
+<defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #b70e0e;
+        stroke-width: 1px;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <g id="Trash">
+    <g id="Trash-2" data-name="Trash">
+      <path id="Rounded_Rectangle_2" data-name="Rounded Rectangle 2" class="cls-1" d="M847.679,6.679h25.642a1.678,1.678,0,1,1,0,3.357H847.679A1.678,1.678,0,1,1,847.679,6.679Z" transform="translate(-840)"/>
+      <path class="cls-1" d="M849.412,9.2h22.176c0,8.952,0,17.9-.881,26.719-6.511.138-13.9,0.138-20.2-.053C849.412,27.1,849.412,18.148,849.412,9.2Z" transform="translate(-840)"/>
+      <path class="cls-1" d="M857.275,10.036h0.666V35.213h-0.666q0-12.592,0-25.178h0Zm0,0h0.666V35.213h-0.666q0-12.592,0-25.178h0Z" transform="translate(-840)"/>
+      <path id="Shape_1_copy" data-name="Shape 1 copy" class="cls-1" d="M863.059,10.036h0.814V35.213h-0.814A217.929,217.929,0,0,0,863.059,10.036Zm0,0h0.814V35.213h-0.814A217.929,217.929,0,0,0,863.059,10.036Z" transform="translate(-840)"/>
+      <path class="cls-1" d="M855.382,5h10.236V7.518H855.382V5Z" transform="translate(-840)"/>
+    </g>
+  </g>
+</svg>

+ 31 - 8
src/css/app.css

@@ -68,28 +68,33 @@
   padding: 0px;
   padding: 0px;
 }
 }
 #header #logo img {
 #header #logo img {
-  margin-top: 4px;
+  margin-top: -5px !important;
   margin-left: 10px;
   margin-left: 10px;
+  width: 65px;
 }
 }
 #header ul li {
 #header ul li {
   margin: 0px 8px 0px 0px;
   margin: 0px 8px 0px 0px;
   padding: 0px;
   padding: 0px;
   font-size: 12px;
   font-size: 12px;
-  display: inline-block;
+  display: inline;
   list-style: none;
   list-style: none;
-  height: 100%;
+  min-height: 26px;
   border-radius: 4px;
   border-radius: 4px;
   overflow: hidden;
   overflow: hidden;
+  position: relative;
 }
 }
+
 #header ul li button {
 #header ul li button {
   background: transparent;
   background: transparent;
   border: none;
   border: none;
   margin: 0px;
   margin: 0px;
-  height: 100%;
+  min-height: 26px;
+  border-radius: 4px 4px 0px 0px;
 }
 }
-#header ul li button:hover {
-  background: #efefef;
-  transition: background-color 0.5s linear;
+#header ul li button:hover,
+#header ul li .level-1:hover {
+  background-color: #d4d4d4 !important;
+  transition: background-color 0.5s linear !important;
 }
 }
 
 
 #header ul li .li-content {
 #header ul li .li-content {
@@ -100,7 +105,14 @@
   box-shadow: 0px 10px 16px 0px rgba(0, 0, 0, 0.2);
   box-shadow: 0px 10px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
   z-index: 1;
   height: auto;
   height: auto;
-  top: 28px;
+  top: 20px;
+  left: 0px;
+}
+#header ul li .li-content:hover,
+#header ul li:has(button:hover),
+#header ul li:has(.li-content) {
+  background-color: #d4d4d4;
+  transition: background-color 0.5s linear;
 }
 }
 .li-content li {
 .li-content li {
   width: 100%;
   width: 100%;
@@ -127,6 +139,9 @@
   padding: 0px;
   padding: 0px;
   margin: 0px;
   margin: 0px;
 }
 }
+#header ul {
+  min-height: 26px;
+}
 .files ul,
 .files ul,
 #header ul {
 #header ul {
   list-style: none;
   list-style: none;
@@ -222,3 +237,11 @@
   -webkit-animation-name: fadeInRight;
   -webkit-animation-name: fadeInRight;
   animation-name: fadeInRight;
   animation-name: fadeInRight;
 }
 }
+
+#content {
+  padding-right: 228px;
+}
+
+.center {
+  text-align: center;
+}

+ 8 - 0
src/css/icons.css

@@ -21,3 +21,11 @@
 .icon-selector {
 .icon-selector {
   background-image: url("../assets/images/icons/Selector.png");
   background-image: url("../assets/images/icons/Selector.png");
 }
 }
+
+.icon-line {
+  background-image: url("../assets/images/icons/Line.png");
+}
+
+.icon-trash {
+  background-image: url("../assets/images/icons/Trash.png");
+}

+ 69 - 70
src/index.html

@@ -1,76 +1,75 @@
 <!DOCTYPE html>
 <!DOCTYPE html>
 <html lang="en">
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Proof of Concept - iGeom - Web</title>
-    <link rel="stylesheet" href="css/bootstrap.min.css" />
-    <link rel="stylesheet" href="css/app.css" />
-    <link rel="stylesheet" href="css/icons.css" />
-  </head>
-  <body>
-    <div class="wrapper">
-      <nav id="sidebar">
-        <div id="tool-bar">
-          <h3>Tools</h3>
-          <span id="status"></span>
-          <div id="tools" class="tools">
-            <button id="btn-point" class="tool icon icon-point" onclick="">
-              <span> </span>
-            </button>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>Proof of Concept - iGeom - Web</title>
+  <link rel="stylesheet" href="css/bootstrap.min.css" />
+  <link rel="stylesheet" href="css/app.css" />
+  <link rel="stylesheet" href="css/icons.css" />
+</head>
+
+<body>
+  <div class="wrapper">
+    <nav id="sidebar">
+      <div id="tool-bar">
+        <h3>Tools</h3>
+        <span id="status"></span>
+        <div id="tools" class="tools">
+          <button id="btn-point" class="tool icon icon-point" onclick="">
+            <span> </span>
+          </button>
+        </div>
+      </div>
+    </nav>
+    <div id="content">
+      <nav id="header">
+        <div class="d-flex">
+          <div class="p-1 flex-fill">
+            <ul>
+              <li id="logo" style="overflow: inherit !important; ">
+                <img src="assets/images/Logo.png" style="margin-top:-16px;" alt="iGeom.logo" />
+              </li>
+              <li>
+                <button class="level-1">
+                  File
+                  <input type="file" id="input-file" />
+                </button>
+                <ul class="li-content">
+                  <li><button id="open">Open</button></li>
+                  <li><button id="save">Save</button></li>
+                </ul>
+              </li>
+              <li><button class="level-1">Edit</button></li>
+            </ul>
+          </div>
+          <div class="p-1 flex-fill center">
+            <div id="selected-document">New Document 1</div>
           </div>
           </div>
+          <div class="p-1 flex-fill"></div>
         </div>
         </div>
       </nav>
       </nav>
-      <div id="content">
-        <nav id="header">
-          <div class="d-flex">
-            <div class="p-1 flex-fill">
-              <ul>
-                <li id="logo" style="overflow: inherit !important; ">
-                  <img
-                    src="assets/images/Logo.png"
-                    style="margin-top:-16px;"
-                    alt="iGeom.logo"
-                  />
-                </li>
-                <li>
-                  <button>
-                    File
-                    <input type="file" id="input-file" />
-                  </button>
-                  <ul class="li-content">
-                    <li><button id="open">Open</button></li>
-                    <li><button id="save">Save</button></li>
-                  </ul>
-                </li>
-                <li><button>Edit</button></li>
-              </ul>
-            </div>
-            <div class="p-1 flex-fill">
-              <div id="selected-document">New Document 1</div>
-            </div>
-            <div class="p-1 flex-fill"></div>
-          </div>
-        </nav>
-        <nav class="files">
-          <ul>
-            <li>
-              <ul id="files">
-                <li class="file active"><button>New Document 1</button></li>
-              </ul>
-            </li>
-            <li id="new-document" class="new">
-              <button class="new-file">+</button>
-            </li>
-          </ul>
-        </nav>
-        <div id="stages"></div>
-      </div>
+      <nav class="files">
+        <ul>
+          <li>
+            <ul id="files">
+              <li class="file active"><button>New Document 1</button></li>
+            </ul>
+          </li>
+          <li id="new-document" class="new">
+            <button class="new-file">+</button>
+          </li>
+        </ul>
+      </nav>
+      <div id="stages"></div>
     </div>
     </div>
-    <script src="js/jquery.min.js"></script>
-    <script src="js/bootstrap.min.js"></script>
-    <script src="js/konva.min.js"></script>
-    <script src="js/main.js"></script>
-  </body>
-</html>
+  </div>
+  <script src="js/jquery.min.js"></script>
+  <script src="js/bootstrap.min.js"></script>
+  <script src="js/konva.min.js"></script>
+  <script src="js/main.js"></script>
+</body>
+
+</html>