read line-segment, circunference and intersection

.gitignore

@@ -3,4 +3,5 @@ dist
 igeom.tar.gz
 package-lock.json
 main.js
-src/main.js
+src/main.js
+jsconfig.json

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

@@ -17,18 +17,26 @@ export class CircumferenceDrawer extends SelectableDrawer {
     this.radius;
     this.centerAggregator;
     this.konvaObject;
+    this.setElementClass(ELEMENTS_CLASS.CIRCUMFERENCE);
   }
 
   draw(e) {
-    if (
-      e != undefined &&
-      e.target != undefined &&
-      e.target.attrs.class != undefined &&
-      (e.target.attrs.class == ELEMENTS_CLASS.POINT ||
-        e.target.attrs.class == ELEMENTS_CLASS.INTERSECTION_POINT)
-    ) {
-      this.drawByStates(e.target);
-      return;
+    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)
+      ) {
+        this.drawByStates(e.target);
+        return;
+      } else if (e.attrs != undefined && e.attrs.genericObject != undefined) {
+
+        this.resolveAggregators([e.attrs.genericObject.center, e.attrs.genericObject.radius], undefined, false);
+        this.createByCircumference(e.attrs.genericObject);
+        return;
+      }
     }
     const points = Selector.getSelectedPoints();
     if (points == undefined || points.length == 0) {
@@ -36,14 +44,7 @@ export class CircumferenceDrawer extends SelectableDrawer {
     } else this.drawByPoints(points, undefined, e);
   }
   drawByPoints(points, aggregators, e) {
-    if (aggregators == undefined)
-      aggregators = Selector.getSelectedPointsAggregators();
-    else {
-      aggregators = [
-        Objects.getByGenericObject(this.pointA)[0],
-        Objects.getByGenericObject(this.pointB)[0]
-      ];
-    }
+    aggregators = this.resolveAggregators(points, aggregators, true);
     this.centerAggregator = aggregators[0];
     this.radiusAggregator = aggregators[1];
     this.center = points[0];
@@ -79,7 +80,11 @@ export class CircumferenceDrawer extends SelectableDrawer {
     this.center = center;
     this.radius = radius;
     this.circumference = new CircumferenceModel(this.center, this.radius);
-    this.konvaObject = this.drawcircumference(this.circumference);
+    this.createByCircumference(this.circumference);
+  }
+  createByCircumference(circumference) {
+    this.circumference = circumference;
+    this.konvaObject = this.drawCircumference(this.circumference);
     const aggregator = new DrawerAggregator(
       this,
       this.circumference,
@@ -94,7 +99,7 @@ export class CircumferenceDrawer extends SelectableDrawer {
     super.batchDraw();
     return aggregator;
   }
-  drawcircumference(circumference) {
+  drawCircumference(circumference) {
     const circle = new Konva.Arc({
       x: circumference.center.posX,
       y: circumference.center.posY,
@@ -115,6 +120,25 @@ export class CircumferenceDrawer extends SelectableDrawer {
     SelectableDrawer.setSelectableIfToolChanged(circle);
     return circle;
   }
+  resolveAggregators(points, aggregators, selected) {
+    if (this.center == undefined) {
+      this.center = points[0];
+    }
+    if (this.radius == undefined) {
+      this.radius = points[1];
+    }
+    if (aggregators == undefined && selected == true)
+      aggregators = Selector.getSelectedPointsAggregators();
+    else {
+      aggregators = [
+        Objects.getByGenericObject(points[0])[0],
+        Objects.getByGenericObject(points[1])[0]
+      ];
+    }
+    this.centerAggregator = aggregators[0];
+    this.radiusAggregator = aggregators[1];
+    return aggregators;
+  }
 
   update(aggregator, e) {
     if (!aggregator.visible) return;

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

@@ -148,4 +148,16 @@ export class CircumferenceModel extends GeometricObject {
 
     return true;
   }
+
+  static do(map, list) {
+    const id = map.get("id");
+    const centerId = map.get("param")[0];
+    const radiusId = map.get("param")[1];
+    const center = list.find(x => x.id === centerId);
+    const radius = list.find(x => x.id === radiusId);
+    const label = map.get("label")[0];
+    const circumference = new CircumferenceModel(center, radius, id);
+    circumference.setLabel(label);
+    return circumference;
+  }
 }

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

@@ -14,12 +14,9 @@ export class IntersectionDrawer extends Drawer {
   }
   constructor() {
     super();
-    this.objectA;
-    this.objectB;
     this.aggregatorA;
     this.aggregatorB;
     this.label;
-    this.point;
     this.states = [
       IntersectionDrawer.FIRST_OBJECT_STATE,
       IntersectionDrawer.SECOND_OBJECT_STATE
@@ -29,7 +26,14 @@ export class IntersectionDrawer extends Drawer {
     super.setElementClass(ELEMENTS_CLASS.INTERSECTION_POINT);
   }
   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 &&
@@ -60,10 +64,16 @@ export class IntersectionDrawer extends Drawer {
   getObjectAggregator(konvaObject) {
     return objects.getByKonvaObject(konvaObject)[0];
   }
+  getObjectAggregatorByGenericObject(genericObject) {
+    return objects.getByGenericObject(genericObject)[0];
+  }
   drawPoint() {
     const intersectionPoints = this.aggregatorA.genericObject.getIntersection(
       this.aggregatorB.genericObject
     );
+    this.drawByIntersectionPoints(intersectionPoints);
+  }
+  drawByIntersectionPoints(intersectionPoints) {
     for (let index = 0; index < intersectionPoints.length; index++) {
       const intersectionPoint = intersectionPoints[index];
       intersectionPoint.update();
@@ -73,14 +83,12 @@ export class IntersectionDrawer extends Drawer {
         false,
         true
       );
-
       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);
@@ -122,4 +130,9 @@ export class IntersectionDrawer extends Drawer {
     }
     this.batchDraw();
   }
+  reset() {
+    this.aggregatorA = undefined;
+    this.aggregatorB = undefined;
+    this.setState(undefined);
+  }
 }

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

@@ -1,7 +1,17 @@
 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";
 
 export class IntersectionModel extends PointModel {
+  /**
+   * 
+   * @param {GeometricObject} r Geometric Object 
+   * @param {GeometricObject} s Geometric Object
+   * @param {boolean} visible Visiblity of Object 
+   * @param {number} index Index position of Object ex (1)
+
+   */
   constructor(posX, posY, label, r, s, visible, index, id) {
     super(posX, posY, label, id);
     this.r = r;
@@ -10,9 +20,14 @@ export class IntersectionModel extends PointModel {
     this.visible = visible;
     this.index = index;
     this.color = -65536;
-    this.definitions = [{ id: this.r.id }, { id: this.s.id }, { id: this.index + 1 }];
+    this.definitions = this.getDefinitions();
   }
 
+  /**
+   * Update properties of this Intersection
+   * @param {DrawerAggregator} aggregator Drawer Aggregator 
+   * @param {event} event 
+   */
   update(aggregator, event) {
     this.visible = true;
     const intersections = this.r.getIntersection(this.s);
@@ -24,12 +39,14 @@ export class IntersectionModel extends PointModel {
         this.posX = Number.MAX_SAFE_INTEGER;
         this.posY = Number.MAX_SAFE_INTEGER;
         this.visible = false;
+        this.definitions = this.getDefinitions();
         return;
       }
       if (!this.s.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;
@@ -37,12 +54,37 @@ export class IntersectionModel extends PointModel {
     if (intersections.length > 1) {
       for (let index = 0; index < intersections.length; index++) {
         const intersection = intersections[index];
-        if (this.index == intersection.index) {
+
+        if (this.index == index) {
+          console.info(this.posX, intersection.posX);
           this.posX = parseFloat(intersection.posX.toFixed(2));
           this.posY = parseFloat(intersection.posY.toFixed(2));
         }
-        continue;
       }
     }
+    this.definitions = this.getDefinitions();
+  }
+
+  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 }];
+  }
+
+  /**
+   * Create new Intersection By Line of Script .geo
+   * @param {Map} map JavaScript Map
+   * @param {[]} list List of Generic Objects
+   */
+  static do(map, list) {
+    const id = map.get("id");
+    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]
+    const label = map.get("label");
+    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);
   }
 }

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

@@ -44,15 +44,19 @@ export class LineSegmentDrawer extends SelectableDrawer {
   }
 
   draw(e) {
-    if (
-      e != undefined &&
-      e.target != undefined &&
-      e.target.attrs.class != undefined &&
-      (e.target.attrs.class == ELEMENTS_CLASS.POINT ||
-        e.target.attrs.class == ELEMENTS_CLASS.INTERSECTION_POINT)
-    ) {
-      this.drawByStates(e.target);
-      return;
+    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)
+      ) {
+        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) {
@@ -61,6 +65,8 @@ export class LineSegmentDrawer extends SelectableDrawer {
     }
     this.drawByPoints(points);
   }
+
+
   drawByStates(konvaObject) {
     let aggregator = undefined;
     if (konvaObject != undefined) {
@@ -89,23 +95,22 @@ export class LineSegmentDrawer extends SelectableDrawer {
     if (points == undefined || points.length < 1) return;
     this.setPointA(points[0]);
     this.setPointB(points[1]);
-    if (aggregators == undefined)
-      aggregators = Selector.getSelectedPointsAggregators();
-    else {
-      aggregators = [
-        Objects.getByGenericObject(this.pointA)[0],
-        Objects.getByGenericObject(this.pointB)[0]
-      ];
-    }
+    aggregators = this.resolveAggregators(points, aggregators, true);
     this.label = Label.draw();
     this.lineSegment = new LineSegmentModel(
       this.pointA,
       this.pointB,
       this.label
     );
+    this.drawByLineSegment(this.lineSegment);
+    this.reset();
+  }
+
+  drawByLineSegment(lineSegment) {
+    this.lineSegment = lineSegment;
     const konvaObject = LineSegmentDrawer.getKonvaLine(
-      this.pointA,
-      this.pointB
+      lineSegment.pointA,
+      lineSegment.pointB
     );
     super.setKonvaObject(konvaObject);
     const aggregator = new DrawerAggregator(
@@ -115,6 +120,7 @@ export class LineSegmentDrawer extends SelectableDrawer {
       ELEMENTS_CLASS.LINE_SEGMENT
     );
     super.addAggregator(aggregator);
+    const aggregators = this.resolveAggregators([this.lineSegment.pointA, this.lineSegment.pointB], undefined);
     aggregators[1].addAggregator(aggregator);
     aggregators[0].addAggregator(aggregator);
     SelectableDrawer.drawObject(this.konvaObject);
@@ -122,7 +128,22 @@ export class LineSegmentDrawer extends SelectableDrawer {
     super.batchDraw();
     SelectableDrawer.setMaxIndex(aggregators[0].konvaObject);
     SelectableDrawer.setMaxIndex(aggregators[1].konvaObject);
-    this.reset();
+  }
+
+  resolveAggregators(points, aggregators, selected) {
+
+    this.pointA = points[0];
+    this.pointB = points[1];
+
+    if (aggregators == undefined && selected == true)
+      aggregators = Selector.getSelectedPointsAggregators();
+    else {
+      aggregators = [
+        Objects.getByGenericObject(this.pointA)[0],
+        Objects.getByGenericObject(this.pointB)[0]
+      ];
+    }
+    return aggregators;
   }
 
   update(aggregator, e) {

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

@@ -119,4 +119,14 @@ export class LineSegmentModel extends GeometricObject {
 
     return true;
   }
+  static do(map, list) {
+    const id = map.get("id");
+    const pointAId = map.get("param")[0];
+    const pointBId = map.get("param")[1];
+    const pointA = list.find(x => x.id === pointAId);
+    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

@@ -23,7 +23,7 @@ export class PointDrawer extends SelectableDrawer {
   }
 
   draw(e) {
-    if (e.attrs != undefined && e.attrs.genericObject != undefined) {
+    if (e != undefined && e.attrs != undefined && e.attrs.genericObject != undefined) {
       const aggregator = this.drawPoint(e.attrs.genericObject);
       return aggregator;
     }
@@ -61,7 +61,7 @@ export class PointDrawer extends SelectableDrawer {
   }
 
   update(aggregator, event) {
-    aggregator.konvaObject.children.forEach(function(element) {
+    aggregator.konvaObject.children.forEach(function (element) {
       if (element.attrs.class == ELEMENTS_CLASS.POINT) {
         aggregator.genericObject.update(element, event);
       }
@@ -96,7 +96,6 @@ export class PointDrawer extends SelectableDrawer {
       group.add(circle);
       SelectableDrawer.drawObject(group);
       SelectableDrawer.setMaxIndex(group);
-      console.info("point", point);
       return { geometricObject: point, konvaObject: group };
     } else {
       SelectableDrawer.drawObject(circle);

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

@@ -1,6 +1,12 @@
 import { GeometricObject } from "../../../core/models/objects/geometric-object";
 import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
 export class PointModel extends GeometricObject {
+  /**
+   * 
+   * @param {number} posX X Position ex: (38.5) float precision
+   * @param {number} posY Y Position  ex: (-38.5) float precision
+   * @param {string} label  Label ex: (P)
+   */
   constructor(posX, posY, label, id) {
     super(id);
     this.posX = posX;
@@ -10,11 +16,23 @@ export class PointModel extends GeometricObject {
     this.definitions = [{ id: this.posX + 5 }, { id: -this.posY - 5 }];
     this.color = -16711936;
   }
+
+  /**
+   * 
+   * @param {konvaObject} Object of Konva Library
+   * @param {*} event 
+   */
   update(konvaObject, event) {
     this.posX = konvaObject.attrs.startPosX + event.target._lastPos.x;
     this.posY = konvaObject.attrs.startPosY + event.target._lastPos.y;
     this.definitions = [{ id: this.posX + 5 }, { id: -this.posY - 5 }];
   }
+
+  /**
+ * Create new Intersection By Line of Script .geo
+ * @param {Map} map JavaScript Map
+ * @param {List} list List of Generic Objects
+ */
   static do(map, list) {
     const id = map.get("id");
     const x = map.get("param")[0] - 5;

src/app/core/drawers/stage.js

@@ -47,8 +47,6 @@ export class Stage {
     else {
       var layer = this.layer.getKonvaLayer();
       this.layer.getKonvaGroup().add(object);
-      console.info(" this.layer", layer);
-      console.info(" this.konvaStage", this.konvaStage);
       layer.draw();
       this.konvaStage.draw(layer);
       this.konvaStage.draw();
@@ -92,5 +90,5 @@ export class Stage {
     }
   }
 
-  _bootstrap() {}
+  _bootstrap() { }
 }

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

@@ -1,6 +1,9 @@
 import { DynamicObject } from "./dynamic-object";
 
 export class GeometricObject extends DynamicObject {
+  /**
+   * @param {number} id Id of object
+   */
   constructor(id) {
     super(id);
     this.borderColor;
@@ -17,6 +20,12 @@ export class GeometricObject extends DynamicObject {
   setEdgeThinckness(edgeThinckness) {
     this.edgeThinckness = edgeThinckness;
   }
+
+  /**
+ * Update properties of this Intersection
+ * @param {DrawerAggregator} aggregator Drawer Aggregator 
+ * @param {event} event 
+ */
   update(konvaObject, event) {
     throw "not implemented exception";
   }

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

@@ -1,11 +1,17 @@
 import { ELEMENTS_CLASS } from "../enums/elements-class-enum";
 import { PointModel } from "../../components/point-component/models/point-model";
-import { PointDrawer } from "../../components/point-component/drawers/point-drawer";
+import { CircumferenceModel } from "../../components/circumference-component/models/circumference-model";
+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";
 
 export class ParserOrchestrator {
+
   constructor(mapArr) {
     this.mapArr = mapArr;
     this.list = new Array();
+    this.drawersMap = new Map();
+    this.tools = menu.tools;
   }
   orchestrate() {
     for (const i in this.mapArr) this.do(this.mapArr[i]);
@@ -15,27 +21,38 @@ export class ParserOrchestrator {
     let object;
     switch (map.get("type")) {
       case ELEMENTS_CLASS.CIRCUMFERENCE:
+        object = CircumferenceModel.do(map, this.list);
         break;
       case ELEMENTS_CLASS.INTERSECTION_POINT:
+        object = IntersectionModel.do(map, this.list);
         break;
       case ELEMENTS_CLASS.POINT:
         object = PointModel.do(map, this.list);
         break;
+      case ELEMENTS_CLASS.LINE_SEGMENT:
+        object = LineSegmentModel.do(map, this.list);
+        break;
       default:
         break;
     }
     this.list.push(object);
   }
   draw(object) {
-    let drawer;
     if (object == undefined) return;
+    let drawer;
+
     switch (object.elementClass) {
       case ELEMENTS_CLASS.CIRCUMFERENCE:
+        drawer = this.getDrawer(ELEMENTS_CLASS.CIRCUMFERENCE)
         break;
       case ELEMENTS_CLASS.INTERSECTION_POINT:
+        drawer = this.getDrawer(ELEMENTS_CLASS.INTERSECTION_POINT)
         break;
       case ELEMENTS_CLASS.POINT:
-        drawer = new PointDrawer();
+        drawer = this.getDrawer(ELEMENTS_CLASS.POINT)
+        break;
+      case ELEMENTS_CLASS.LINE_SEGMENT:
+        drawer = this.getDrawer(ELEMENTS_CLASS.LINE_SEGMENT)
         break;
       default:
         break;
@@ -46,4 +63,8 @@ export class ParserOrchestrator {
       }
     });
   }
+
+  getDrawer(elementClass) {
+    return this.tools.find(x => x.drawer.elementClass === elementClass).drawer;
+  }
 }