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

import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
import { label as Label } from "../../../component-registry/label";
import { LineModel } from "../models/line-model";
import { objects as Objects } from "../../../core/application/objects";
import { SelectableDrawer } from "../../../core/drawers/selectable-drawer";
import { LineSegmentDrawer } from "../../line-segment-component/drawers/line-segment-drawer";
import { DrawerAggregator } from "../../../core/drawers/drawer-aggregator";
import { LineSegmentModel } from "../../line-segment-component/models/line-segment-model";

export class LineDrawer extends LineSegmentDrawer {
  constructor() {
    super();
    this.setElementClass(ELEMENTS_CLASS.LINE);
  }
  drawByStates(konvaObject) {
    let aggregator = undefined;
    if (konvaObject != undefined) {
      aggregator = Objects.getByKonvaObject(konvaObject)[0];
    }
    if (this.state == undefined) {
      super.setState(LineDrawer.FIRST_POINT_STATE);
    } else if (this.state == LineDrawer.FIRST_POINT_STATE) {
      aggregator =
        aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
      this.setAggregatorA(aggregator);
      super.setState(LineDrawer.SECOND_POINT_STATE);
    } else if (this.state == LineDrawer.SECOND_POINT_STATE) {
      aggregator =
        aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
      this.setAggregatorB(aggregator);
      this.drawByPoints(
        [this.pointA, this.pointB],
        [this.aggregatorA, this.aggregatorB]
      );
      super.setState(LineDrawer.FIRST_POINT_STATE);
    }
  }

  drawByLineSegment(lineSegment) {
    this.lineSegment = lineSegment;
    const group = SelectableDrawer.getKonvaGroup(false);
    const text = LineDrawer.getKonvaText(lineSegment, lineSegment.label);
    group.add(text);
    const konvaObject = LineDrawer.getKonvaLine(
      lineSegment.pointA,
      lineSegment.pointB
    );
    group.add(konvaObject);
    super.setKonvaObject(group);
    const aggregator = new DrawerAggregator(
      this,
      this.lineSegment,
      group,
      ELEMENTS_CLASS.LINE
    );
    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);
    this.konvaObject.zIndex(1);
    super.batchDraw();
    SelectableDrawer.setMaxIndex(aggregators[0].konvaObject);
    SelectableDrawer.setMaxIndex(aggregators[1].konvaObject);
  }

  drawByPoints(points, aggregators) {
    if (points == undefined || points.length < 1) return;
    this.setPointA(points[0]);
    this.setPointB(points[1]);
    aggregators = this.resolveAggregators(points, aggregators, true);
    this.label = Label.draw(true);
    this.lineSegment = new LineModel(
      this.pointA,
      this.pointB,
      this.label
    );
    this.drawByLineSegment(this.lineSegment);
    this.reset();
  }


  update(aggregator, e) {
    if (!aggregator.visible) return;
    const pointA = aggregator.genericObject.pointA;
    const pointB = aggregator.genericObject.pointB;
    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,
      pointB.posY
    ]);
    super.batchDraw();
  }

  // insertPoint(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 lineSegment = new LineSegmentModel(pointA, pointB);


    const xA = pointA.posX,
      xB = pointB.posX,
      yA = pointA.posY,
      yB = pointB.posY;



    // x0 - x
    const d1 = xB - xA,
      // y0 - y
      d2 = yB - yA;

    // const dA = d1 * xA + d2 * yA;
    // const dB = d1 * xB + d2 * yB;


    const a = -d1 / d2;
    const b = (a * xA) * -1;

    // y =  ax + b;

    const Qy = -d1 / d2 * 0 + b;
    const Px = (0 - b) / a;


    const points = [Px, 0, 0, Qy];


    const line = new Konva.Line({
      points: points,
      stroke: "grey",
      strokeWidth: 2,
      lineJoin: "round",
      draggable: false,
      strokeScaleEnabled: false,
      class: ELEMENTS_CLASS.LINE,
      connections: [],
      index: 1,
      selectable: false,
      draggable: false,
      style: { stroke: "grey", fill: "grey" }
    });

    SelectableDrawer.setSelectableIfIntersectionChanged(line);

    return line;
  }

  static drawKonvaLine(pointA, pointB) {
    const line = LineDrawer.getKonvaLine(pointA, pointB);
    return line;
  }

}