get target by click

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

@@ -67,6 +67,7 @@ export class LineSegmentDrawer extends Drawer {
       super.setState(undefined);
     }
   }
+
   drawByPoints(points, aggregators) {
     if (points == undefined || points.length < 1) return;
     this.setPointA(points[0]);
@@ -117,6 +118,23 @@ export class LineSegmentDrawer extends Drawer {
     super.batchDraw();
   }
 
+  insertPoint(aggregator) {
+    console.info("aggregator", aggregator);
+    const pointA = aggregator.genericObject.pointA;
+    const pointB = aggregator.genericObject.pointB;
+    const pointCAggregator = this.pointDrawer.drawPoint();
+    const pointC = pointCAggregator.genericObject;
+    aggregator.konvaObject.points([
+      pointA.posX,
+      pointA.posY,
+      pointB.posX,
+      pointB.posY,
+      pointC.posX,
+      pointC.posY
+    ]);
+    super.batchDraw();
+  }
+
   static getKonvaLine(pointA, pointB, useLabel) {
     const points = [pointA.posX, pointA.posY, pointB.posX, pointB.posY];
     return new Konva.Line({

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

@@ -5,6 +5,8 @@ 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 = {
   fill: "#9bc364",
@@ -25,7 +27,16 @@ export class PointDrawer extends Drawer {
     this.states = ["center"];
   }
 
-  draw() {
+  draw(e) {
+    if (
+      e != undefined &&
+      e.target != undefined &&
+      e.target.attrs != undefined &&
+      e.target.attrs.container == undefined
+    ) {
+      this.resolveTarget(e.target);
+      return;
+    }
     if (this.state == undefined) {
       super.setState(this.states[0]);
       App.setStatus("Selecione o centro do Ponto");
@@ -63,6 +74,26 @@ export class PointDrawer extends Drawer {
     });
   }
 
+  resolveTarget(target) {
+    if (target.attrs != undefined && target.attrs.container != undefined) {
+      return;
+    }
+    if (target.attrs != undefined) {
+      switch (target.attrs.class) {
+        case ELEMENTS_CLASS.LINE_SEGMENT:
+          this.inserPointInLineSegment(target);
+          break;
+      }
+    }
+  }
+
+  inserPointInLineSegment(konvaObject) {
+    const drawerAggregators = objects.getByKonvaObject(konvaObject);
+    if (drawerAggregators == undefined || drawerAggregators.length == 0) return;
+    const drawerAggregator = drawerAggregators[0];
+    drawerAggregator.drawer.insertPoint(drawerAggregator);
+  }
+
   static drawAndGetPoint(x, y, useLabel) {
     return PointDrawer.drawPoint(new PointModel(x, y), useLabel);
   }

src/app/core/application/objects.js

@@ -11,6 +11,9 @@ class Objects {
   getByGenericObject(genericObject) {
     return this.get().filter(e => e.genericObject == genericObject);
   }
+  getByKonvaObject(konvaObject) {
+    return this.get().filter(e => e.konvaObject == konvaObject);
+  }
   getSelectedObjects() {
     return StageManager.getCurrentLayer().getSelectedAggregators();
   }

src/app/core/drawers/drawer.js

@@ -10,7 +10,7 @@ export class Drawer {
     this.state = undefined;
     this.konvaObject;
   }
-  onDragMove() { }
+  onDragMove() {}
   setState(state) {
     this.state = state;
   }

src/app/core/drawers/stage.js

@@ -71,7 +71,7 @@ export class Stage {
   _clickTap(e) {
     const tool = App.getSelectedTool();
     if (tool != undefined) {
-      tool.draw.bind(tool)();
+      tool.draw.bind(tool)(e);
       return;
     }
     if (e.target === this.konvaStage) {

src/app/core/models/components/component.js

@@ -17,8 +17,8 @@ export class Component {
   setDrawer(drawer) {
     this.drawer = drawer;
   }
-  draw() {
-    this.drawer.draw();
+  draw(e) {
+    this.drawer.draw(e);
   }
   click() {
     this.state = undefined;