draw intersection point

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

@@ -1,6 +1,10 @@
 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";
 
-export class IntersectionDrawer extends PointDrawer {
+export class IntersectionDrawer extends Drawer {
   static FIRST_OBJECT_STATE() {
     return "FIRST_OBJECT";
   }
@@ -14,11 +18,56 @@ export class IntersectionDrawer extends PointDrawer {
     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() {
+    console.info("generic object", this.aggregatorA);
+    const intersectionPoint = this.aggregatorA.genericObject.getIntersection(
+      this.aggregatorB.genericObject
+    );
+    console.info("intersection point", intersectionPoint);
+    PointDrawer.drawPoint(intersectionPoint, false);
+  }
+  isValidObject(konvaObject) {
+    return konvaObject.attrs.class == ELEMENTS_CLASS.LINE_SEGMENT;
   }
 }

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,8 +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);
@@ -65,8 +77,6 @@ export class LineSegmentDrawer extends Drawer {
         [this.aggregatorA, this.aggregatorB]
       );
       super.setState(undefined);
-    } else {
-      super.setState(undefined);
     }
   }
 
@@ -155,9 +165,24 @@ export class LineSegmentDrawer extends Drawer {
     return line;
   }
   static configureLineEvents(line) {
-    line.on("click tap", function(e) {
-      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,10 +1,44 @@
 import { GeometricObject } from "../../../core/models/objects/geometric-object";
+import { PointModel } from "../../point-component/models/point-model";
 export class LineSegmentModel extends GeometricObject {
   constructor(pointA, pointB, label) {
     super();
     this.pointA = pointA;
     this.pointB = pointB;
     this.setLabel(label);
+    console.info("aaaaaaaaaaaaaaaaaaa");
   }
   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 PointModel(
+        Number.MAX_SAFE_INTEGER,
+        Number.MAX_SAFE_INTEGER,
+        label
+      );
+    } else {
+      const x = (b2 * c1 - b1 * c2) / determinant;
+      const y = (a1 * c2 - a2 * c1) / determinant;
+      return new PointModel(x, y);
+    }
+  }
 }

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

@@ -24,6 +24,7 @@ export class PointDrawer extends Drawer {
     this.label;
     this.text;
     this.states = ["center"];
+    super.setElementClass(ELEMENTS_CLASS.POINT);
   }
 
   draw(e) {
@@ -123,13 +124,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/core/drawers/drawer-aggregator.js

@@ -35,6 +35,5 @@ export class DrawerAggregator {
     this.aggregators.forEach(aggregator => {
       aggregator.drawer.update(aggregator);
     });
-    // 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;
   }
@@ -56,4 +61,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/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/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/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");
 }