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

/*
 * iGeom by LInE
 * Geometric Object: Straight Line
 * www.matematica.br/igeom
 * ./app/components/line-component/drawers/line-drawer.js
 * Draw the Straight Line
 */

import { stageManager } from "../../../core/application/stage-manager"; // to get Canvas size 'stageManager.getSize();'

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) { //TODO Nome adequado? Nao seria 'drawLine(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);

    // Sequence of calls:
    // ./app/core/drawers/drawer.js: static drawObject(object): DrawerManager.draw(object);
    // ./app/core/drawers/drawer-manager.js: draw(object): this.currentStage.draw(object);
    SelectableDrawer.drawObject(this.konvaObject); // in ./app/core/drawers/drawer.js: static drawObject(object): DrawerManager.draw(object);

    this.konvaObject.zIndex(1);
    //leo super.batchDraw(); //D usar novo metodo para desenhar, aproveitar o proprio 'update' - REMOVER
    this.update(aggregator,null);

    SelectableDrawer.setMaxIndex(aggregators[0].konvaObject); // mark object 1: A
    SelectableDrawer.setMaxIndex(aggregators[1].konvaObject); // mark object 2: B
    }

  // Draw Straight Line by its points
  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);

    // ./app/components/line-segment-component/drawers/line-segment-drawer.js
    // Use: ./app/components/line-segment-component/drawers/line-segment-drawer.js: drawByLineSegment(lineSegment)
    // Use: ./app/components/core/drawers/selectable-drawer
    this.drawByLineSegment(this.lineSegment); // here, makes: SelectableDrawer.drawObject(this.konvaObject);
    this.reset();
    }


  // Update straight line (Line)
  // Whenever points A=(ax,ay) or B=(bx,by), was moved
  // Let d=B-A, i.e., d=(dx,dy) where: dx=bx-ax, dy=by-ay
  // If necessary semi-space: build the vector "o" (ortogonal to the segment AB), with
  //    "o"=(ox,oy) with ox = -dy,  oy = dx    (then the scalar product "o" by d is: o'd = ox*dx+oy*dy = -dy*dx+dx*dy = -dy*dx+dy*dx = 0 CQD)
  //
  // Model under Canvas: r(.) parametric equation of the straight line
  //
  // Possible configurations to be considered:
  //    +----------+----------+----------+----------+
  //    | A x      |      x B | B x      |     x A  |
  //    |     x B  |  A x     |     x A  | B x      |
  //    |   (1)    |    (2)   |   (3)    |   (4)    |
  //    +----------+----------+----------+----------+
  // Straight line defined by points A,B (parametric equation by 'g'):
  //   P(g) = A + g * (B-A) = A + g * d
  
  // Given W=canvas width and H=canvas height, find intersections with borders, i.e., find values of "g" such that:
  //   r(g).x=0 or r(g).x=W or r(g).y=0 or r(g).y=H  (call this "g" respectively as Lg, Rg, Ug, and Dg - these are dependent of A and B positions)
  //             Ug                 
  // (0,0) +-------------+ (W,0)    Lg: 0 = r(g).x = A.x + g.x * d.x => g.x = -A.x / d.x
  //       |             |          Rg: W = r(g).x = A.x + g.x * d.x => g.x = (W-A.x) / d.x
  //   Lg  |             |  Rg
  //       |             |          Ug: 0 = r(g).y = A.y + g.y * d.y => g.y = -A.y / d.y
  // (0,H) +-------------+ (W,a)    Dg: H = r(g).y = A.y + g.y * d.y => g.y = (H-A.y) / d.y
  //             Dg
  //
  // (1)                 Ug                             (2)           Dg
  // (0,0) +------------o------------------+-->   (0,0) +------------o------------------+-->
  //       |        o B  Q                 |            |        o A  Q                 |   
  //    Lg |P    o A                       | Rg      Rg |     o B                       | Lg
  //       +-o-----------------------------+            +-o-----------------------------+   
  //      \|/            Dg                                           Ug  
  update (aggregator, e) {
    if (!aggregator.visible) return;
    const pointA = aggregator.genericObject.pointA; // A
    const pointB = aggregator.genericObject.pointB; // B
    const Ax = pointA.posX, Ay = pointA.posY, Bx = pointB.posX, By = pointB.posY; // A=(Ax,Ay) and B=(Bx,By)
    const dx = Bx-Ax, dy = By-Ay; // direction d=B-A
    const size  = stageManager.getSize(); // From: ../../../core/application/stage-manager
    const W = size.w; // canvas width
    const H = size.h; // canvas height
    var Ix, Iy, Ex, Ey; // Point I will be left-bottom one and E will be the top-right one
    var Lg, Rg, Ug, Dg;
    // Line perpendicular to axis "x" (dx = 0)
    if (dx === 0) {
      // Calculates parameters Ug, Dg:
      Ug = -Ay / dy;    // -A.y / d.y
      Dg = (H-Ay) / dy; // (H-A.y) / d.y
      // Find the situation (1), (2), (3) or (4) calculating "ming" the smallest "g" and "maxg" the greatest "g"
      const ming = Math.min(Ug, Dg); // minimum
      const maxg = Math.max(Ug, Dg); // maximum
      // Draw from minimum to maximum
      Ix = Ax; Lg = 0;
      Iy = Ay + ming * dy; // left initial point of this line (Ix, Iy)
      Ex = Ax; Rg = 0;
      Ey = Ay + maxg * dy; // right end    point of this line (Ex, Ey)
      }
    else {
      // Calculates parameters Lg, Rg, Ug, Dg:
      Lg = -Ax / dx;    // -A.x / d.x
      Rg = (W-Ax) / dx; // (W-A.x) / d.x
      Ug = -Ay / dy;    // -A.y / d.y
      Dg = (H-Ay) / dy; // (H-A.y) / d.y
      // Find the situation (1), (2), (3) or (4) calculating "ming" the smallest "g" and "maxg" the greatest "g"
      var ming, maxg; // calculate extreme points (intercepted with the Canvas frame)
      if (dx>0) { // (1)
        if (Lg<Dg) ming = Dg;
        else ming = Lg;
        if (Rg>Ug) maxg = Ug;
        else maxg = Rg;
        }
      else { // (2)
        if (Lg>Ug) ming = Ug;
        else ming = Lg;
        if (Rg<Dg) maxg = Dg;
        else maxg = Rg;
        }
      // Draw from minimum to maximum
      Ix = Ax + ming * dx;
      Iy = Ay + ming * dy; // left initial point of this line (Ix, Iy)
      Ex = Ax + maxg * dx;
      Ey = Ay + maxg * dy; // right end    point of this line (Ex, Ey)
      }

    // Ix = Ax; Iy = H; Ex = Ax; Ey = 0;
    const points = [Ix, Iy, Ex, Ey];      
    //D console.log("./app/components/line-component/drawers/line-drawer.js: update(aggregator, e):\nA=("+Ax+","+Ay+"), B=("+Bx+","+By+")"); //leo

    // Update label line
    const pos = aggregator.genericObject.getMiddlePoint();
    aggregator.konvaObject.children[0].x(pos.posX);
    aggregator.konvaObject.children[0].y(pos.posY - 20);

    aggregator.konvaObject.children[1].points(points);

    super.batchDraw();
    } // update(aggregator, e)


  static getKonvaLine (pointA, pointB, useLabel) { //TODO: revisar, pois o codigo 'slope', 'linearCoefficient' so' funciona para quadrantes 1 e 3...
    const xA = pointA.posX, xB = pointB.posX,
          yA = pointA.posY, yB = pointB.posY;

    const slope = (yB - yA) / (xB - xA);
    const linearCoefficient = (yA * xB - yB * xA) / (xB - xA);

    const y = linearCoefficient;
    const x = -linearCoefficient / slope;

    const points = [x, 0, 0, y];

    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;
    }

  }