implementation of label of line segment,

improvements in intersection point and intersaction point label,
improvements in the .geo file,
imporovements in select tool and selectable objects,
improvements in label component,
change new default file names

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/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

@@ -53,12 +53,14 @@ export class CircumferenceModel extends GeometricObject {
         break;
     }
   }
+
   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) {
     // if (this.cente().igual(cd.C()))
     // return null; // duas circ. com mesmo raio => devolva "null" (ambiguidade!)

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

@@ -50,7 +50,8 @@ export class IntersectionDrawer extends Drawer {
       } else if (this.state == IntersectionDrawer.SECOND_OBJECT_STATE) {
         this.setSecondObject(e.target);
         this.drawPoint();
-        this.clear();
+        this.reset();
+        // this.clear();
       }
     }
   }
@@ -81,7 +82,7 @@ export class IntersectionDrawer extends Drawer {
       // if (!intersectionPoint.visible) return;
       const point = PointDrawer.drawPoint(
         intersectionPoint,
-        false,
+        true,
         false,
         true
       );
@@ -123,8 +124,13 @@ export class IntersectionDrawer extends Drawer {
       aggregator.visible = false;
       return;
     }
-    aggregator.konvaObject.x(aggregator.genericObject.posX);
-    aggregator.konvaObject.y(aggregator.genericObject.posY);
+    //todo: konva objects
+    aggregator.konvaObject.children[0].x(aggregator.genericObject.posX + 10);
+    aggregator.konvaObject.children[0].y(aggregator.genericObject.posY - 10);
+
+    aggregator.konvaObject.children[1].x(aggregator.genericObject.posX);
+    aggregator.konvaObject.children[1].y(aggregator.genericObject.posY);
+
     if (!aggregator.visible || aggregator.genericObject.posX == Number.MAX_SAFE_INTEGER) {
       aggregator.genericObject.visible = true;
       aggregator.konvaObject.show();

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

@@ -2,6 +2,7 @@ import { PointModel } from "../../point-component/models/point-model";
 import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
 import { DrawerAggregator } from "../../../core/drawers/drawer-aggregator";
 import { GeometricObject } from "../../../core/models/objects/geometric-object";
+import { setWith } from "lodash";
 
 export class IntersectionModel extends PointModel {
   /**
@@ -10,7 +11,7 @@ export class IntersectionModel extends PointModel {
    * @param {GeometricObject} s Geometric Object
    * @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, r, s, visible, index, id) {
     super(posX, posY, label, id);
@@ -66,7 +67,7 @@ export class IntersectionModel extends PointModel {
   }
 
   getDefinitions() {
-    return [{ id: this.r.id }, { id: this.s.id }, { id: this.index + 1 }, { id: this.posX + 5 }, { id: this.posY - 5 }, { id: this.visible ? 1 : 0 }];
+    return [{ id: this.r.id }, { id: this.s.id }, { id: this.index + 1 }, { id: this.visible ? 1 : 0 }];
   }
 
   bind(posX, posY, label, r, s, visible, index) {
@@ -90,12 +91,21 @@ export class IntersectionModel extends PointModel {
     const rId = map.get("param")[0];
     const sId = map.get("param")[1];
     const index = map.get("param")[2] - 1;
-    const x = (map.get("param")[3]) - 5;
-    const y = (map.get("param")[4]) + 5;
     const visible = map.get("param")[5] == 1;
-    const label = map.get("label");
+    const label = map.get("label")[0];
     const r = list.find(x => x.id == rId);
     const s = list.find(x => x.id == sId);
-    return new IntersectionModel(x, y, label, r, s, visible, index, id);
+
+    const intersections = r.getIntersection(s);
+    if (intersections.length == 1) {
+      const i = intersections[0];
+      i.bind(i.posX, i.posY, label, r, s, true, index);
+      return i;
+    } else {
+      const i = intersections.find(x => x.index == index);
+      i.bind(i.posX, i.posY, label, r, s, true, index);
+      return i;
+    }
   }
+
 }

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

@@ -96,7 +96,7 @@ export class LineSegmentDrawer extends SelectableDrawer {
     this.setPointA(points[0]);
     this.setPointB(points[1]);
     aggregators = this.resolveAggregators(points, aggregators, true);
-    this.label = Label.draw();
+    this.label = Label.draw(true);
     this.lineSegment = new LineSegmentModel(
       this.pointA,
       this.pointB,
@@ -108,15 +108,19 @@ export class LineSegmentDrawer extends SelectableDrawer {
 
   drawByLineSegment(lineSegment) {
     this.lineSegment = lineSegment;
+    const group = SelectableDrawer.getKonvaGroup(false);
+    const text = LineSegmentDrawer.getKonvaText(lineSegment, lineSegment.label);
+    group.add(text);
     const konvaObject = LineSegmentDrawer.getKonvaLine(
       lineSegment.pointA,
       lineSegment.pointB
     );
-    super.setKonvaObject(konvaObject);
+    group.add(konvaObject);
+    super.setKonvaObject(group);
     const aggregator = new DrawerAggregator(
       this,
       this.lineSegment,
-      this.konvaObject,
+      group,
       ELEMENTS_CLASS.LINE_SEGMENT
     );
     super.addAggregator(aggregator);
@@ -150,7 +154,11 @@ export class LineSegmentDrawer extends SelectableDrawer {
     if (!aggregator.visible) return;
     const pointA = aggregator.genericObject.pointA;
     const pointB = aggregator.genericObject.pointB;
-    aggregator.konvaObject.points([
+    const pos = aggregator.genericObject.getMiddlePoint();
+    aggregator.konvaObject.children[0].x(pos.posX);
+    aggregator.konvaObject.children[0].y(pos.posY - 20);
+    super.batchDra
+    aggregator.konvaObject.children[1].points([
       pointA.posX,
       pointA.posY,
       pointB.posX,
@@ -175,6 +183,24 @@ export class LineSegmentDrawer extends SelectableDrawer {
     super.batchDraw();
   }
 
+  static getKonvaText(lineSegment, label) {
+    const pos = lineSegment.getMiddlePoint();
+    return new Konva.Text({
+      x: pos.posX,
+      y: pos.posY - 20,
+      text: label,
+      fontSize: 14,
+      fontFamily: "Calibri",
+      fill: "#434a45",
+      stroke: "#ffffff",
+      strokeWidth: 0.2,
+      draggable: false,
+      resizeEnabled: false,
+      transformEnabled: false,
+      selectable: false
+    });
+  }
+
   static getKonvaLine(pointA, pointB, useLabel) {
     const points = [pointA.posX, pointA.posY, pointB.posX, pointB.posY];
     const line = new Konva.Line({
@@ -191,7 +217,7 @@ export class LineSegmentDrawer extends SelectableDrawer {
       draggable: false,
       style: { stroke: "grey", fill: "grey" }
     });
-    SelectableDrawer.setSelectableIfToolChanged(line);
+    SelectableDrawer.setSelectableIfIntersectionChanged(line);
     return line;
   }
 

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

@@ -30,6 +30,13 @@ export class LineSegmentModel extends GeometricObject {
     const b = bY - aY;
     return [a, b];
   }
+
+
+  getMiddlePoint() {
+    const x = (this.pointA.posX + this.pointB.posX) / 2;
+    const y = (this.pointA.posY + this.pointB.posY) / 2;
+    return { posX: x, posY: y };
+  }
   getIntersection(geometricObject) {
     switch (geometricObject.elementClass) {
       case ELEMENTS_CLASS.LINE_SEGMENT:
@@ -67,13 +74,15 @@ export class LineSegmentModel extends GeometricObject {
           Number.MAX_SAFE_INTEGER,
           undefined,
           this,
-          lineSegment
+          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)];
+      return [new IntersectionModel(x, y, undefined, this, lineSegment, true, 0)];
     }
   }
 
@@ -134,9 +143,8 @@ export class LineSegmentModel extends GeometricObject {
         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)
+        PB.bind(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, undefined, this, circumference, false, 1);
     }
-
     return [
       PA,
       PB

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/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("Salvar 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/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 = [];

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/enums/elements-class-enum.js

@@ -2,7 +2,8 @@ export const ELEMENTS_CLASS = {
   POINT: 0,
   INTERSECTION_POINT: 1,
   CIRCUMFERENCE: 3,
-  LINE_SEGMENT: 6
+  LINE_SEGMENT: 6,
+  SELECTOR: 6
   // TO: PONTO                      =   0;
   // TO: PONTO_INTERSECAO           =   1;
   // TO: PONTO_SOBRE                =   2;

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

@@ -4,7 +4,7 @@ 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';
 export class ParserOrchestrator {
 
   constructor(mapArr) {
@@ -34,8 +34,19 @@ export class ParserOrchestrator {
         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;