Merge branch 'feature/intersection' into develop

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

@@ -0,0 +1,15 @@
+import { Component } from "../core/models/components/component";
+import { ComponentOptions } from "../core/models/components/component-options";
+import { IntersectionDrawer } from "../components/intersection-component/drawers/intersection-drawer";
+export class IntersectionComponent extends Component {
+  constructor() {
+    const options = new ComponentOptions(
+      "e60c06bc485546fe89f3565e9f8758e7",
+      "Intersection",
+      "intersection"
+    );
+    super(new IntersectionDrawer(), options);
+  }
+}
+
+export const intersectionComponent = new IntersectionComponent();

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

@@ -0,0 +1,88 @@
+import { PointDrawer } from "../../point-component/drawers/point-drawer";
+import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
+import { Drawer } from "../../../core/drawers/drawer";
+import { app as App } from "../../../app";
+import { objects } from "../../../core/application/objects";
+import { DrawerAggregator } from "../../../core/drawers/drawer-aggregator";
+
+export class IntersectionDrawer extends Drawer {
+  static FIRST_OBJECT_STATE() {
+    return "FIRST_OBJECT";
+  }
+  static SECOND_OBJECT_STATE() {
+    return "SECOND_OBJECTf";
+  }
+  constructor() {
+    super();
+    this.objectA;
+    this.objectB;
+    this.aggregatorA;
+    this.aggregatorB;
+    this.label;
+    this.point;
+    this.states = [
+      IntersectionDrawer.FIRST_OBJECT_STATE,
+      IntersectionDrawer.SECOND_OBJECT_STATE
+    ];
+    this.intersections = [];
+    this.pointDrawer = new PointDrawer();
+    super.setElementClass(ELEMENTS_CLASS.INTERSECTION_POINT);
+  }
+  draw(e) {
+    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
+    ) {
+      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.clear();
+      }
+    }
+  }
+  setFirstObject(konvaObject) {
+    const aggregator = this.getObjectAggregator(konvaObject);
+    this.aggregatorA = aggregator;
+  }
+  setSecondObject(konvaObject) {
+    const aggregator = this.getObjectAggregator(konvaObject);
+    this.aggregatorB = aggregator;
+  }
+  getObjectAggregator(konvaObject) {
+    return objects.getByKonvaObject(konvaObject)[0];
+  }
+  drawPoint() {
+    const intersectionPoint = this.aggregatorA.genericObject.getIntersection(
+      this.aggregatorB.genericObject
+    );
+    const point = PointDrawer.drawPoint(intersectionPoint, false, false);
+    const aggregator = new DrawerAggregator(
+      this,
+      intersectionPoint,
+      point.konvaObject,
+      ELEMENTS_CLASS.INTERSECTION_POINT
+    );
+    this.point = point.geometricObject;
+    super.addAggregator(aggregator);
+    this.aggregatorB.addAggregator(aggregator);
+    this.aggregatorA.addAggregator(aggregator);
+  }
+  isValidObject(konvaObject) {
+    return konvaObject.attrs.class == ELEMENTS_CLASS.LINE_SEGMENT;
+  }
+  update(aggregator, e) {
+    aggregator.genericObject.update(aggregator, e);
+    aggregator.konvaObject.x(aggregator.genericObject.posX);
+    aggregator.konvaObject.y(aggregator.genericObject.posY);
+    this.batchDraw();
+  }
+}

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

@@ -0,0 +1,14 @@
+import { PointModel } from "../../point-component/models/point-model";
+
+export class IntersectionModel extends PointModel {
+  constructor(posX, posY, label, r, s) {
+    super(posX, posY, label);
+    this.r = r;
+    this.s = s;
+  }
+  update(aggregator, event) {
+    const intersection = this.r.getIntersection(this.s);
+    this.posX = parseFloat(intersection.posX.toFixed(2));
+    this.posY = parseFloat(intersection.posY.toFixed(2));
+  }
+}

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

@@ -6,6 +6,18 @@ import { selector as Selector } from "../../../core/application/selector";
 import { LineSegmentModel } from "../models/line-segment-model";
 import { PointDrawer } from "../../point-component/drawers/point-drawer";
 import { objects as Objects } from "../../../core/application/objects";
+import { app as App } from "../../../app";
+import { stageManager as StageManager } from "../../../core/application/stage-manager";
+const HOVER_STYLE = {
+  fill: "#33BCFF",
+  strokeWidth: 4,
+  stroke: "#33BCFF"
+};
+const STYLE = {
+  fill: "grey",
+  strokeWidth: 2,
+  stroke: "grey"
+};
 export class LineSegmentDrawer extends Drawer {
   static FIRST_POINT_STATE() {
     return "FIRST_POINT";
@@ -26,6 +38,7 @@ export class LineSegmentDrawer extends Drawer {
     ];
     this.lineSegment;
     this.pointDrawer = new PointDrawer();
+    super.setElementClass(ELEMENTS_CLASS.LINE_SEGMENT);
   }
   setPointA(point) {
     this.pointA = point;
@@ -44,7 +57,7 @@ export class LineSegmentDrawer extends Drawer {
 
   draw() {
     const points = Selector.getSelectedPoints();
-    if (points == undefined || points.length < 1) {
+    if (points == undefined || points.length == 0) {
       this.drawByState();
     }
     this.drawByPoints(points);
@@ -63,9 +76,7 @@ export class LineSegmentDrawer extends Drawer {
         [this.pointA, this.pointB],
         [this.aggregatorA, this.aggregatorB]
       );
-      super.setState(undefined);
-    } else {
-      super.setState(undefined);
+      super.setState(LineSegmentDrawer.FIRST_POINT_STATE);
     }
   }
 
@@ -107,7 +118,7 @@ export class LineSegmentDrawer extends Drawer {
     super.batchDraw();
   }
 
-  update(aggregator) {
+  update(aggregator, e) {
     const pointA = aggregator.genericObject.pointA;
     const pointB = aggregator.genericObject.pointB;
     aggregator.konvaObject.points([
@@ -120,7 +131,6 @@ export class LineSegmentDrawer extends Drawer {
   }
 
   insertPoint(aggregator) {
-    console.info("aggregator", aggregator);
     const pointA = aggregator.genericObject.pointA;
     const pointB = aggregator.genericObject.pointB;
     const pointCAggregator = this.pointDrawer.drawPoint();
@@ -155,12 +165,24 @@ export class LineSegmentDrawer extends Drawer {
     return line;
   }
   static configureLineEvents(line) {
-    console.info("configureLine");
-    line.on("click tap", function(e) {
-      console.info("linha clicada", e);
-      console.info("linha clicada", this);
-      this.pointDrawer.drawPoint();
+    line.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();
+      }
+    });
+    line.on("mouseout", function() {
+      this.strokeWidth(STYLE.strokeWidth);
+      this.stroke(STYLE.stroke);
+      StageManager.getCurrentKonvaStage().draw();
     });
+
     return line;
   }
 

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

@@ -1,4 +1,5 @@
 import { GeometricObject } from "../../../core/models/objects/geometric-object";
+import { IntersectionModel } from "../../intersection-component/models/intersection-model";
 export class LineSegmentModel extends GeometricObject {
   constructor(pointA, pointB, label) {
     super();
@@ -6,5 +7,38 @@ export class LineSegmentModel extends GeometricObject {
     this.pointB = pointB;
     this.setLabel(label);
   }
-  update() {}
+  getStraight() {
+    const aX = this.pointA.posX;
+    const aY = this.pointA.posY;
+    const bX = this.pointB.posX;
+    const bY = this.pointB.posY;
+    const a = bY - aY;
+    const b = aX - bX;
+    const c = a * aX + b * aY;
+    return [a, b, c];
+  }
+  getIntersection(lineSegment) {
+    const r = this.getStraight();
+    const s = lineSegment.getStraight();
+    const a1 = r[0];
+    const b1 = r[1];
+    const c1 = r[2];
+    const a2 = s[0];
+    const b2 = s[1];
+    const c2 = s[2];
+    const determinant = a1 * b2 - a2 * b1;
+    if (determinant == 0) {
+      return new IntersectionModel(
+        Number.MAX_SAFE_INTEGER,
+        Number.MAX_SAFE_INTEGER,
+        undefined,
+        this,
+        lineSegment
+      );
+    } else {
+      const x = (b2 * c1 - b1 * c2) / determinant;
+      const y = (a1 * c2 - a2 * c1) / determinant;
+      return new IntersectionModel(x, y, undefined, this, lineSegment);
+    }
+  }
 }

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

@@ -5,7 +5,6 @@ import { app as App } from "../../../app";
 import { PointModel } from "../models/point-model";
 import { DrawerAggregator } from "../../../core/drawers/drawer-aggregator";
 import { stageManager as Stages } from "../../../core/application/stage-manager";
-import { LineSegmentDrawer } from "../../line-segment-component/drawers/line-segment-drawer";
 import { objects } from "../../../core/application/objects";
 
 const HOVER_STYLE = {
@@ -25,6 +24,7 @@ export class PointDrawer extends Drawer {
     this.label;
     this.text;
     this.states = ["center"];
+    super.setElementClass(ELEMENTS_CLASS.POINT);
   }
 
   draw(e) {
@@ -57,7 +57,7 @@ export class PointDrawer extends Drawer {
     return aggregator;
   }
 
-  updatePositions(aggregator, event) {
+  update(aggregator, event) {
     aggregator.konvaObject.children.forEach(function(element) {
       if (element.attrs.class == ELEMENTS_CLASS.POINT) {
         aggregator.genericObject.update(element, event);
@@ -76,10 +76,9 @@ export class PointDrawer extends Drawer {
     return PointDrawer.drawPoint(new PointModel(x, y), useLabel);
   }
 
-  static drawPoint(point, useLabel) {
-    const group = Drawer.getKonvaGroup();
-    const circle = PointDrawer.getKonvaCircle(point);
-
+  static drawPoint(point, useLabel, draggable) {
+    const group = Drawer.getKonvaGroup(draggable);
+    const circle = PointDrawer.getKonvaCircle(point, draggable);
     if (useLabel != undefined && useLabel) {
       const label = Label.draw();
       point.setLabel(label);
@@ -91,21 +90,29 @@ export class PointDrawer extends Drawer {
         group.add(text);
       }
     }
-    group.add(circle);
-    PointDrawer.configureCircleEvents(circle);
-    Drawer.drawObject(group);
-    group.zIndex(1);
-    Drawer.stageBatchDraw();
-    return { geometricObject: point, konvaObject: group };
+    if (useLabel) {
+      group.add(circle);
+      if (draggable == undefined || draggable)
+        PointDrawer.configureCircleEvents(circle);
+      Drawer.drawObject(group);
+      group.zIndex(Number.MAX_SAFE_INTEGER);
+      Drawer.stageBatchDraw();
+
+      return { geometricObject: point, konvaObject: group };
+    } else {
+      Drawer.drawObject(circle);
+      return { geometricObject: point, konvaObject: circle };
+    }
   }
 
-  static getKonvaCircle(point) {
+  static getKonvaCircle(point, draggable) {
+    const fill = draggable == undefined || draggable ? STYLE.fill : "#828783";
     return new Konva.Circle({
       x: point.posX,
       y: point.posY,
       radius: 5,
-      fill: STYLE.fill,
-      stroke: STYLE.fill,
+      fill: fill,
+      stroke: fill,
       strokeWidth: 1,
       strokeScaleEnabled: false,
       draggable: false,
@@ -116,7 +123,8 @@ export class PointDrawer extends Drawer {
       connections: [],
       startPosX: point.posX,
       startPosY: point.posY,
-      listening: true
+      listening: true,
+      selectable: draggable
     });
   }
   static getKonvaText(point, label) {
@@ -124,13 +132,16 @@ export class PointDrawer extends Drawer {
       x: point.posX + 10,
       y: point.posY - 10,
       text: label,
-      fontSize: 12,
+      fontSize: 14,
       fontFamily: "Calibri",
       fill: "#434a45",
+      stroke: "#ffffff",
+      strokeWidth: 0.2,
       draggable: false,
       resizeEnabled: false,
       transformEnabled: false,
-      selectable: false
+      selectable: false,
+      fontStyle: "bold"
     });
   }
 

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

@@ -7,7 +7,7 @@ export class PointModel extends GeometricObject {
     this.setLabel(label);
   }
   update(konvaObject, event) {
-    this.posX =  konvaObject.attrs.startPosX + event.target._lastPos.x ;
-    this.posY =  konvaObject.attrs.startPosY + event.target._lastPos.y;
+    this.posX = konvaObject.attrs.startPosX + event.target._lastPos.x;
+    this.posY = konvaObject.attrs.startPosY + event.target._lastPos.y;
   }
 }

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

@@ -31,10 +31,19 @@ export class DrawerAggregator {
     }
   }
   update(e) {
-    this.drawer.updatePositions(this, e);
-    this.aggregators.forEach(aggregator => {
-      aggregator.drawer.update(aggregator);
+    this.drawer.update(this, e);
+    this.updateAggregators(this.aggregators, e);
+  }
+  updateAggregators(aggregators, e) {
+    aggregators.forEach(aggregator => {
+      aggregator.drawer.update(aggregator, e);
+      if (
+        aggregator.aggregators == undefined ||
+        aggregator.aggregators.length == 0
+      ) {
+        return;
+      }
+      this.updateAggregators(aggregator.aggregators, e);
     });
-    // this.drawer.update();
   }
 }

src/app/core/drawers/drawer.js

@@ -1,5 +1,6 @@
 import { drawerManager as DrawerManager } from "./drawer-manager";
 import { app as App } from "../../app";
+import { stageManager as StageManger } from "../application/stage-manager";
 
 export class Drawer {
   constructor() {
@@ -9,8 +10,12 @@ export class Drawer {
     this.states = [];
     this.state = undefined;
     this.konvaObject;
+    this.elementClass = undefined;
   }
   onDragMove() {}
+  setElementClass(elementClass) {
+    this.elementClass = elementClass;
+  }
   setState(state) {
     this.state = state;
   }
@@ -46,9 +51,10 @@ export class Drawer {
   static drawObject(object) {
     DrawerManager.draw(object);
   }
-  static getKonvaGroup() {
+  static getKonvaGroup(draggable) {
+    if (draggable == undefined) draggable = true;
     const group = new Konva.Group({
-      draggable: true,
+      draggable: draggable,
       resizeEnabled: false
     });
     return group;
@@ -56,4 +62,17 @@ export class Drawer {
   static stageBatchDraw() {
     DrawerManager.batchDraw();
   }
+
+  static configureObjectEvents(object) {
+    object.on("mouseover", function() {
+      this.strokeWidth(HOVER_STYLE.strokeWidth);
+      this.stroke(HOVER_STYLE.stroke);
+      StageManger.getCurrentKonvaStage().draw();
+    });
+    object.on("mouseout", function() {
+      this.strokeWidth(STYLE.strokeWidth);
+      this.stroke(STYLE.stroke);
+      StageManger.getCurrentKonvaStage().draw();
+    });
+  }
 }

src/app/core/drawers/layer.js

@@ -34,7 +34,7 @@ export class Layer {
     }
   }
   removeSelectedAggregator(aggregator) {
-    if (!this.selectedAggregators.includes(aggregator)) {
+    if (this.selectedAggregators.includes(aggregator)) {
       var index = this.selectedAggregators.indexOf(aggregator);
       this.selectedAggregators.splice(index, 1);
     }

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

@@ -1,5 +1,6 @@
 export const ELEMENTS_CLASS = {
   POINT: 0,
+  INTERSECTION_POINT: 1,
   LINE_SEGMENT: 6
   // TO: PONTO                      =   0;
   // TO: PONTO_INTERSECAO           =   1;
@@ -24,14 +25,16 @@ export const ELEMENTS_CLASS = {
 };
 
 /**
- * 
- * @param {number} code 
+ *
+ * @param {number} code
  */
-export function fromCodeToClass (code) {
-  switch(code) {
+export function fromCodeToClass(code) {
+  switch (code) {
     case 0:
       return ELEMENTS_CLASS.POINT;
     case 1:
+      return ELEMENTS_CLASS.INTERSECTION_POINT;
+    case 6:
       return ELEMENTS_CLASS.LINE_SEGMENT;
     default:
       return ELEMENTS_CLASS.POINT;

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

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

src/app/core/parser/file-parser.js

@@ -1,24 +1,23 @@
 import * as ObjectClass from "./../enums/elements-class-enum";
 
-const TYPE    =  0; // identifica se Ponto, Texto, Reta...
-const ID      =  1; // identificador unico do objeto
-const DEFINITION =  2; // parametros dos quais o objeto depende (exemplo Reta depende de Ponto e Ponto => "2:IDPONTO1 IDPONTO2")
-const LIST     =  3; // lista de identificadores de objetos dependentes do atual
-const LABEL    =  4; // definicao do rotulo (valor/nome e se escondido ou nao)
-const DEFINED  =  6; // 0 ou 1 (???)
-const COLOR       =  5; // cor usando valor inteiro
-const HIDDEN =  7; // 0 (visivel) ou 1 (escondido)
-const PIXEL     =  8; // LeScript usa (coordenada X e Y - inteiros)
-const FONT     =  9; // 'Arial' T Tam: T = FONT.PLAIN, FONT.BOLD, FONT.ITALIC; Tam = 8, 9,...
-                    // PROIBIDO: "Arial" T Tam, pois em caso contrario nao sera lido como parametro
-                    //           usa  MARCAFNT = "\'" nao pode ser "\"" <[28/09/2006] agora vazio "">
+const TYPE = 0; // identifica se Ponto, Texto, Reta...
+const ID = 1; // identificador unico do objeto
+const DEFINITION = 2; // parametros dos quais o objeto depende (exemplo Reta depende de Ponto e Ponto => "2:IDPONTO1 IDPONTO2")
+const LIST = 3; // lista de identificadores de objetos dependentes do atual
+const LABEL = 4; // definicao do rotulo (valor/nome e se escondido ou nao)
+const DEFINED = 6; // 0 ou 1 (???)
+const COLOR = 5; // cor usando valor inteiro
+const HIDDEN = 7; // 0 (visivel) ou 1 (escondido)
+const PIXEL = 8; // LeScript usa (coordenada X e Y - inteiros)
+const FONT = 9; // 'Arial' T Tam: T = FONT.PLAIN, FONT.BOLD, FONT.ITALIC; Tam = 8, 9,...
+// PROIBIDO: "Arial" T Tam, pois em caso contrario nao sera lido como parametro
+//           usa  MARCAFNT = "\'" nao pode ser "\"" <[28/09/2006] agora vazio "">
 const LABEL_COLOR = 10; // cor de rotulo (tambem um inteiro) - inserido apos iGeom versao >= 2.9.9.31
 
 const OBJECT_LINE_REGEX = /^\{\w*(?:(?:\d+:@\|[^@]+@\|)|(?:\d+:[^,@|]+))\w(?:,\w*(?:(?:\d+:@\|[^@]+@\|)|(?:\d+:[^,@\|]+)))+\w*\}!?$/.compile();
 const ALPHA_MASK = 255 << 24;
 
 export class FileParser {
-
   /**
    *
    * @param {string} content
@@ -27,12 +26,13 @@ export class FileParser {
     this.content = content;
   }
 
-  parse () {
-    return this.content.split('\n')
+  parse() {
+    return this.content
+      .split("\n")
       .filter(str => !str.match(/^[#\[]/))
       .map(str => {
-        if(!OBJECT_LINE_REGEX.test(str.trim())) {
-          console.error("Malformed object string in igeom file: ",str);
+        if (!OBJECT_LINE_REGEX.test(str.trim())) {
+          console.error("Malformed object string in igeom file: ", str);
           return undefined;
         }
         return this.parseObjectLine(str.trim());
@@ -43,31 +43,31 @@ export class FileParser {
    *
    * @param {string} object_line
    */
-  parseObjectLine (object_line) {
+  parseObjectLine(object_line) {
     const map = new Map();
     object_line = object_line.substring(1);
-    if(object_line.endsWith('}!')) {
+    if (object_line.endsWith("}!")) {
       object_line = object_line.substring(0, object_line.length - 2);
     } else {
       object_line = object_line.substring(0, object_line.length - 1);
     }
-    const properties = object_line.split(',');
-    for(const prop in properties) {
-      const prop_info = prop.trim().split(':');
+    const properties = object_line.split(",");
+    for (const prop in properties) {
+      const prop_info = prop.trim().split(":");
       const key = parseInt(prop_info[0]);
 
-      if(key == TYPE) {
+      if (key == TYPE) {
         const type = prop_info[1];
         map.set("type", ObjectClass.fromCodeToClass(parseInt(type)));
-      } else if(key == ID) {
+      } else if (key == ID) {
         const id = prop_info[1];
         map.set("id", parseInt(id));
-      } else if(key == DEFINITION) {
+      } else if (key == DEFINITION) {
         const param_list = [];
-        const list = prop_info[1].trim().split(' ');
-        for(const param in list) {
+        const list = prop_info[1].trim().split(" ");
+        for (const param in list) {
           const maybe_number = Number(param);
-          if(Number.isNaN((maybe_number))) {
+          if (Number.isNaN(maybe_number)) {
             param_list.push(param);
           } else {
             param_list.push(maybe_number);
@@ -76,17 +76,17 @@ export class FileParser {
         map.set("param", param_list);
       } else if (key == LIST) {
         const id_list = [];
-        const list = prop_info[1].trim().split(' ');
-        for(const id in list) {
-           id_list.push(id);
+        const list = prop_info[1].trim().split(" ");
+        for (const id in list) {
+          id_list.push(id);
         }
         map.set("deps", id_list);
       } else if (key == LABEL) {
         const param_list = [];
-        const list = prop_info[1].trim().split(' ');
-        for(const param in list) {
+        const list = prop_info[1].trim().split(" ");
+        for (const param in list) {
           const maybe_number = Number(param);
-          if(Number.isNaN((maybe_number))) {
+          if (Number.isNaN(maybe_number)) {
             param_list.push(param);
           } else {
             param_list.push(maybe_number);
@@ -101,36 +101,35 @@ export class FileParser {
         let number = Number(value);
         const alpha = ((number & ALPHA_MASK) >>> 24) / 255;
         number = number ^ ALPHA_MASK;
-        const r = (number >> 16) & 0xFF;
-        const g = (number >> 8) & 0xFF;
-        const b = number & 0xFF;
-        map.set("color", {alpha:alpha, r:r, g:g, b:b});
-      } else if(key == HIDDEN) {
+        const r = (number >> 16) & 0xff;
+        const g = (number >> 8) & 0xff;
+        const b = number & 0xff;
+        map.set("color", { alpha: alpha, r: r, g: g, b: b });
+      } else if (key == HIDDEN) {
         const value = prop_info[1];
         map.set("hidden", parseInt(value));
-      } else if(key == PIXEL) {
+      } else if (key == PIXEL) {
         const position = [];
-        const list = prop_info[1].trim().split(' ');
-        for(const i in list) {
+        const list = prop_info[1].trim().split(" ");
+        for (const i in list) {
           position.push(parseInt(i));
         }
         map.set("position", position);
       } else if (key == FONT) {
-        const param_list = prop_info[1].trim().split(' ');
+        const param_list = prop_info[1].trim().split(" ");
         map.set("font", param_list);
-      } else if(key == LABEL_COLOR) {
+      } else if (key == LABEL_COLOR) {
         const value = prop_info[1];
         let number = Number(value);
         const alpha = ((number & ALPHA_MASK) >>> 24) / 255;
         number = number ^ ALPHA_MASK;
-        const r = (number >> 16) & 0xFF;
-        const g = (number >> 8) & 0xFF;
-        const b = number & 0xFF;
-        map.set("label_color", {alpha: alpha, r: r, g: g, b: b});
+        const r = (number >> 16) & 0xff;
+        const g = (number >> 8) & 0xff;
+        const b = number & 0xff;
+        map.set("label_color", { alpha: alpha, r: r, g: g, b: b });
       }
     }
 
     return map;
   }
-
 }

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

@@ -46,26 +46,6 @@ export class LineSegment {
       _this._points.clear();
       _this._state = LineSegment.STATE_PRIMEIRO_PONTO;
     }
-    // let _this = e;
-    // if (e == undefined) {
-    //   _this = this;
-    // }
-    // if (_this._state == undefined) {
-    //   _this._state = _this._states[0];
-    //   App.setStatus("Selecione o primeiro ponto no canvas");
-    // } else if (_this._state == _this._states[0]) {
-    //   let pos = App.pos();
-    //   _this._points[0] = pos.x;
-    //   _this._points[1] = pos.y;
-    //   _this._state = _this._states[1];
-    //   App.setStatus("Selecione o segundo ponto no canvas");
-    // } else if (_this._state == _this._states[1]) {
-    //   let pos = App.pos();
-    //   _this._points[2] = pos.x;
-    //   _this._points[3] = pos.y;
-    //   let p = _this._points.slice();
-    //   _this.drawPoint(p);
-    // }
   }
 
   click(e) {
@@ -124,9 +104,6 @@ export class LineSegment {
     layer.add(ln);
     App.stage.draw();
 
-    //this.clearState();
-    //App.clearSelectedTool();
-    //App.setStatus("");
     return ln;
   }
 
@@ -168,7 +145,6 @@ export class LineSegment {
         const new_x = new_point.x() + p.x();
         const new_y = new_point.y() + p.y();
         if (new_point._name == 0) {
-          // pos 0 ,1
           current_points[0] = new_x;
           current_points[1] = new_y;
         } else {
@@ -176,7 +152,6 @@ export class LineSegment {
           current_points[3] = new_y;
         }
         line.points(current_points);
-        //App.stage.draw();
       });
     });
   }

src/assets/images/icons/Intersection.svg

@@ -0,0 +1,55 @@
+<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: #7b7b7b;
+        stroke-width: 1px;
+        stroke-dasharray: 4 2;
+      }
+
+      .cls-2, .cls-3 {
+        fill: #464646;
+      }
+
+      .cls-3 {
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <g id="Intersection">
+    <g id="Intersection-2" data-name="Intersection">
+      <circle class="cls-1" cx="17.5" cy="17.5" r="8.5"/>
+      <circle class="cls-2" cx="24" cy="22" r="4"/>
+      <path id="Rectangle_2_copy" data-name="Rectangle 2 copy" class="cls-3" d="M435,30.53l17.51-16.54,0.483,0.481-17.51,16.54Z" transform="translate(-420)"/>
+    </g>
+  </g>
+</svg>

src/css/icons.css

@@ -11,5 +11,9 @@
 }
 
 .icon-point {
-  background-image: url("..//assets/images/icons/Point.png");
+  background-image: url("../assets/images/icons/Point.png");
+}
+
+.icon-intersection {
+  background-image: url("../assets/images/icons/Intersection.png");
 }