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

src/app/app.js

@@ -7,7 +7,7 @@ import { menu as Menu } from "./core/application/menu";
 import Konva from "konva";
 import { COMPONENT_TYPE } from "./core/enums/component-type-enum";
 import { headerMenu } from "./core/application/header-menu";
-export const app = (function() {
+export const app = (function () {
   let _selectedTool = [];
   function _bootstrap() {
     Konva.showWarnings = false;
@@ -15,6 +15,9 @@ export const app = (function() {
     Selector.bootstrap();
     requireAll(require.context("./component-registry/", true, /\.js$/));
     _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() {

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 {
-    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();

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();

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

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

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();

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

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 {
 
-  constructor (center, radius, id) {
+  constructor(center, radius, id) {
     super(id);
     this.center = center;
     this.radius = radius;
@@ -26,17 +26,17 @@ export class CircumferenceModel extends GeometricObject {
     super.setClass(ELEMENTS_CLASS.CIRCUMFERENCE);
     this.definitions.push(this.center);
     this.definitions.push(this.radius);
-    }
+  }
 
-  getCenter () {
+  getCenter() {
     return this.center;
-    }
+  }
 
-  getPoint () {
+  getPoint() {
     return this.radius;
-    }
+  }
 
-  getRadius () {
+  getRadius() {
     /* Deixar mais intuitiva...
     this._coordinates[0] = this.center.posX;
     this._coordinates[1] = this.center.posY;
@@ -53,20 +53,20 @@ export class CircumferenceModel extends GeometricObject {
     Ax = this._coordinates[2] = this.radius.posX;
     Ay = this._coordinates[3] = this.radius.posY;
     //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;
-    }
+  }
 
-  getStraight () {
+  getStraight() {
     const dx = this.radius.posX - this.center.posX;
     const dy = this.radius.posY - this.center.posY;
     const c = Math.sqrt(dy * dy + dx * dx);
     return [dx, dy, c];
-    }
+  }
 
-  getDirection () {
+  getDirection() {
     const aX = this.center.posX;
     const aY = this.center.posY;
     const bX = this.radius.posX;
@@ -74,9 +74,9 @@ export class CircumferenceModel extends GeometricObject {
     const a = bX - aX;
     const b = bY - aY;
     return [a, b];
-    }
+  }
 
-  getIntersection (geometricObject) {
+  getIntersection(geometricObject) {
     switch (geometricObject.elementClass) {
       case ELEMENTS_CLASS.LINE: // 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'
       default:
         break;
-      }
     }
+  }
 
-  distance (center) {
+  distance(center) {
     const dx = center.posX - this.center.posX;
     const dy = center.posY - this.center.posY;
     const dist = Math.sqrt(dy * dy + dx * dx);
     return dist;
-    }
+  }
 
-  getIntersectionsByCircumference (circumference) {
+  getIntersectionsByCircumference(circumference) {
     //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 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(x2, y2, undefined, this, circumference, true, 1)
     ];
-    }
+  }
 
 
   /// Get Intersection Poin By Circumference and Line Segment
   /// @param {LineSegmentModel  } lineSegment 
-  getIntersectionByLine (lineSegment) {
+  getIntersectionByLine(lineSegment) {
     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")
 
@@ -159,7 +159,7 @@ export class CircumferenceModel extends GeometricObject {
 
     if (delta < 0) {
       return [PA, PB];
-      }
+    }
 
     const deltaSqrt = Math.sqrt(delta);
     const root1 = -D + deltaSqrt;
@@ -169,8 +169,8 @@ export class CircumferenceModel extends GeometricObject {
 
     if (delta == 0) {
       PA.bind(x1, y1, undefined, lineSegment, this, true, 0);
-      return [PA,PB];
-      }
+      return [PA, PB];
+    }
 
     const x2 = pointA.posX - dx * root2;
     const y2 = pointA.posY - dy * root2;
@@ -184,13 +184,13 @@ export class CircumferenceModel extends GeometricObject {
 
       if (!this.insideSegment(PB.posX, PB.posY))
         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"
-  insideSegment (intersecX, intersecY) {
+  insideSegment(intersecX, intersecY) {
     const valuesR = this.getDirection();
     const dirX = valuesR[0];
     const dirY = valuesR[1];
@@ -201,7 +201,7 @@ export class CircumferenceModel extends GeometricObject {
 
     if (cInterA < cRA) {
       return false;
-      }
+    }
 
     // comparaca cv do ponto B < cv da intersec =>  vazio
     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.posY = Number.MAX_SAFE_INTEGER;
       return false;
-      }
+    }
 
     return true;
-    }
+  }
 
-  static do (map, list) {
+  static do(map, list) {
     const id = map.get("id");
     const centerId = map.get("param")[0];
     const radiusId = map.get("param")[1];
@@ -225,6 +225,6 @@ export class CircumferenceModel extends GeometricObject {
     const circumference = new CircumferenceModel(center, radius, id);
     circumference.setLabel(label);
     return circumference;
-    }
+  }
 
-  }
+}

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

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

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 {number} index Index position of Object ex (1)
   // @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); }
-    }
+  }
 
   // Update properties of this Intersection
   // @param {DrawerAggregator} aggregator Drawer Aggregator 
   // @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!"); }
-    }
+  }
 
-  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!"); }
-    }
+  }
 
-  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); }
-    }
+  }
 
   // Create new Intersection By Line of Script .geo
   // @param {Map} map JavaScript Map
   // @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!"); }
-    }
+  }
 
-  }
+}

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 {
 
-  constructor () {
+  constructor() {
     super();
     this.setElementClass(ELEMENTS_CLASS.LINE);
-    }
+  }
 
-  drawByStates (konvaObject) {
+  drawByStates(konvaObject) {
     let aggregator = undefined;
     if (konvaObject != undefined) {
       aggregator = Objects.getByKonvaObject(konvaObject)[0];
-      }
+    }
     if (this.state == undefined) {
       super.setState(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.drawByPoints([this.pointA, this.pointB], [this.aggregatorA, this.aggregatorB]);
       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;
     const group = SelectableDrawer.getKonvaGroup(false);
     const text = LineDrawer.getKonvaText(lineSegment, lineSegment.label);
@@ -64,14 +64,14 @@ export class LineDrawer extends LineSegmentDrawer {
 
     this.konvaObject.zIndex(1);
     //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[1].konvaObject); // mark object 2: B
-    }
+  }
 
   // Draw Straight Line by its points
-  drawByPoints (points, aggregators) {
+  drawByPoints(points, aggregators) {
     if (points == undefined || points.length < 1) return;
     this.setPointA(points[0]);
     this.setPointB(points[1]);
@@ -84,7 +84,7 @@ export class LineDrawer extends LineSegmentDrawer {
     // Use: ./app/components/core/drawers/selectable-drawer
     this.drawByLineSegment(this.lineSegment); // here, makes: SelectableDrawer.drawObject(this.konvaObject);
     this.reset();
-    }
+  }
 
 
   // Update straight line (Line)
@@ -103,7 +103,7 @@ export class LineDrawer extends LineSegmentDrawer {
   //    +----------+----------+----------+----------+
   // Straight line defined by points A,B (parametric equation by 'g'):
   //   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:
   //   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                 
@@ -120,13 +120,13 @@ export class LineDrawer extends LineSegmentDrawer {
   //    Lg |P    o A                       | Rg      Rg |     o B                       | Lg
   //       +-o-----------------------------+            +-o-----------------------------+   
   //      \|/            Dg                                           Ug  
-  update (aggregator, e) {
+  update(aggregator, e) {
     if (!aggregator.visible) return;
     const pointA = aggregator.genericObject.pointA; // A
     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 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 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
@@ -135,7 +135,7 @@ export class LineDrawer extends LineSegmentDrawer {
     if (dx === 0) {
       // Calculates parameters Ug, Dg:
       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"
       const ming = Math.min(Ug, Dg); // minimum
       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)
       Ex = Ax; Rg = 0;
       Ey = Ay + maxg * dy; // right end    point of this line (Ex, Ey)
-      }
+    }
     else {
       // Calculates parameters Lg, Rg, Ug, Dg:
       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
-      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"
       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;
-        if (Rg>Ug) maxg = Ug;
+        if (Rg > Ug) maxg = Ug;
         else maxg = Rg;
-        }
+      }
       else { // (2)
-        if (Lg>Ug) ming = Ug;
+        if (Lg > Ug) ming = Ug;
         else ming = Lg;
-        if (Rg<Dg) maxg = Dg;
+        if (Rg < Dg) maxg = Dg;
         else maxg = Rg;
-        }
+      }
       // Draw from minimum to maximum
       Ix = Ax + ming * dx;
       Iy = Ay + ming * dy; // left initial point of this line (Ix, Iy)
       Ex = Ax + maxg * dx;
       Ey = Ay + maxg * dy; // right end    point of this line (Ex, Ey)
-      }
+    }
 
     // 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
 
     // Update label line
@@ -184,12 +184,12 @@ export class LineDrawer extends LineSegmentDrawer {
     aggregator.konvaObject.children[1].points(points);
 
     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,
-          yA = pointA.posY, yB = pointB.posY;
+      yA = pointA.posY, yB = pointB.posY;
 
     const slope = (yB - yA) / (xB - xA);
     const linearCoefficient = (yA * xB - yB * xA) / (xB - xA);
@@ -217,11 +217,11 @@ export class LineDrawer extends LineSegmentDrawer {
     SelectableDrawer.setSelectableIfIntersectionChanged(line);
 
     return line;
-    }
+  }
 
-  static drawKonvaLine (pointA, pointB) {
+  static drawKonvaLine(pointA, pointB) {
     const line = LineDrawer.getKonvaLine(pointA, pointB);
     return line;
-    }
+  }
 
-  }
+}

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 {
 
-  constructor (pointA, pointB, label, id) {
+  constructor(pointA, pointB, label, id) {
     super(pointA, pointB, label, id);
     this.setClass(ELEMENTS_CLASS.LINE);
-    }
+  }
 
   // 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;
-    }
+  }
 
   // Intersection with circunference
-  getIntersectionWithCircumference (circ) { // circ = circunference(C,radius)
+  getIntersectionWithCircumference(circ) { // circ = circunference(C,radius)
     // Delegate to super class Segment
     return super.getIntersectionByCircumference(circ);
-    }
+  }
 
   // Intersection between Straigh Lines (SL): with sl
   // 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
   //
   // 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); }
-    } // getIntersectionWithStraightLine(sl)
+  } // getIntersectionWithStraightLine(sl)
 
 
   // 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 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 pointB = segm.pointB;
     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
-  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); }
 
-    }
+  }
 
-  static do (map, list) {
+  static do(map, list) {
     const id = map.get("id");
     const pointAId = map.get("param")[0];
     const pointBId = map.get("param")[1];
@@ -131,6 +133,6 @@ export class LineModel extends LineSegmentModel {
     const pointB = list.find(x => x.id === pointBId);
     const label = map.get("label")[0];
     return new LineModel(pointA, pointB, label, id);
-    }
-  
-  }
+  }
+
+}

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

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

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);
 
     if (useLabel != undefined && useLabel) {
-      const label = Label.draw();
+      let label = (point != undefined && point.label != undefined && point.label != '') ? point.label : Label.draw();
       point.setLabel(label);
       const text = PointDrawer.getKonvaText(point, label);
       group.add(text);
     }
+
     if (selectable == undefined || selectable)
-      SelectableDrawer.setSelectable(circle);
+      SelectableDrawer.setSelectableIfSelectorChanged(circle);
 
     if (useLabel) {
       group.add(circle);

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;
+  }
+}

src/app/core/application/header-menu.js

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

src/app/core/application/objects.js

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

src/app/core/application/stage-manager.js

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

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

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

src/app/core/drawers/drawer.js

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

src/app/core/drawers/layer.js

@@ -4,7 +4,7 @@ import { ActionManager } from "../models/application/actions/action-manager";
 export class Layer {
   constructor(id, konvaLayer) {
     this.id = id;
-    this.name = "New document " + this.id;
+    this.name = "New Construction " + this.id;
     this.konvaLayer = konvaLayer;
     this.aggregators = [];
     this.selectedAggregators = [];
@@ -37,8 +37,19 @@ export class Layer {
   }
   removeSelectedAggregator(aggregator) {
     if (this.selectedAggregators.includes(aggregator)) {
-      var index = this.selectedAggregators.indexOf(aggregator);
+      let index = this.selectedAggregators.indexOf(aggregator);
       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();
+
+  }
 }

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

@@ -1,8 +1,8 @@
 import { Drawer } from "./drawer";
-
 import { stageManager as StageManager } from "../application/stage-manager";
 import { ELEMENTS_CLASS } from "../enums/elements-class-enum";
 import { app as App } from "../../app";
+import { COMPONENT_TYPE } from "../enums/component-type-enum";
 const HOVER_STYLE = {
   fill: "#33BCFF",
   strokeWidth: 6,
@@ -23,14 +23,39 @@ const STYLE_POINT = {
 export class SelectableDrawer extends Drawer {
   constructor() {
     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 () {
       const selectedTool = App.getSelectedTool();
       if (
         selectedTool != 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.stroke(HOVER_STYLE.stroke);
@@ -58,4 +83,4 @@ export class SelectableDrawer extends Drawer {
     });
     return konvaObject;
   }
-}
+}

src/app/core/drawers/stage.js

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

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

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

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

@@ -1,3 +1,4 @@
+import { xor } from "lodash";
 import { browser } from "../../../application/browser";
 
 export class ActionManager {
@@ -7,6 +8,15 @@ export class ActionManager {
   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() {
     this.actions = [];
   }
@@ -26,7 +36,7 @@ export class ActionManager {
       action.rehydrate();
       LINES.push(action.toString());
     });
-    var file = new Blob([...LINES], {
+    let file = new Blob([...LINES], {
       type: "text/plain;charset=utf-8"
     });
     return file;

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

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

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 { IntersectionModel } from "../../components/intersection-component/models/intersection-model";
 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 {
 
   constructor(mapArr) {
@@ -32,10 +33,24 @@ export class ParserOrchestrator {
       case ELEMENTS_CLASS.LINE_SEGMENT:
         object = LineSegmentModel.do(map, this.list);
         break;
+      case ELEMENTS_CLASS.LINE:
+        object = LineModel.do(map, this.list);
+        break;
       default:
         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);
+
   }
   draw(object) {
     if (object == undefined) return;
@@ -54,6 +69,9 @@ export class ParserOrchestrator {
       case ELEMENTS_CLASS.LINE_SEGMENT:
         drawer = this.getDrawer(ELEMENTS_CLASS.LINE_SEGMENT)
         break;
+      case ELEMENTS_CLASS.LINE:
+        drawer = this.getDrawer(ELEMENTS_CLASS.LINE)
+        break;
       default:
         break;
     }

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>

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>

src/css/app.css

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

src/css/icons.css

@@ -21,3 +21,11 @@
 .icon-selector {
   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");
+}

src/index.html

@@ -1,76 +1,75 @@
 <!DOCTYPE html>
 <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 class="p-1 flex-fill"></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>
-                    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>
-    <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>