igeom/src/app/components/line-segment.js

import { app as App } from "../app";
import { menu as Menu } from "../core/components/menu";
import { point as Point } from "./point";
import { selector as Selector } from "../core/components/selector";
import { ELEMENTS_CLASS } from "../core/enums/elements-class-enum";
export class LineSegment {

  static get STATE_PRIMEIRO_PONTO () {
    return "primeiro_ponto";
  }
  static get STATE_SEGUNDO_PONTO () {
    return "segundo_ponto";
  }
  
  constructor() {
    this._state = undefined;
    this._points = new Set();
    this._tool = {
      id: "line-segment",
      title: "Reta",
      icon: "line-segment",
      click: this.click,
      draw: this.draw,
      points: this.points,
      object: this
    };
    this.bootstrap();
  }

  draw (event) {
    console.log("chamou o método draw()");
    console.log("evento: ", event);
    let _this = this;
    if(event != null) {
      _this = event;
    }
    if(_this._state == null) {
      _this._state = LineSegment.STATE_PRIMEIRO_PONTO;
      _this._points.clear();
      App.setStatus("Selecione o primeiro ponto no canvas");
    } else if (_this._state === LineSegment.STATE_PRIMEIRO_PONTO) {
      const pos = App.pos();
      _this._points.add({x: pos.x, y: pos.y});
      _this._state = LineSegment.STATE_SEGUNDO_PONTO;
    } else if (_this._state === LineSegment.STATE_SEGUNDO_PONTO) {
      const pos = App.pos();
      _this._points.add({x: pos.x, y: pos.y});
      _this.drawPoint(_this._points);
      _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) {
    console.log("chamou o método click()");
    let _this = e;
    if (e == undefined) {
      _this = this;
    }
    if (_this._state == LineSegment.STATE_PRIMEIRO_PONTO ||
      _this._state == LineSegment.STATE_SEGUNDO_PONTO) {
      App.clearSelectedTool();
      _this.clearState();
      return;
    }
    let objects = Selector.getPoints();
    if (
      _this._state == undefined &&
      objects != undefined &&
      objects.length > 0
    ) {
      let layer = App.currentLayer();
      let p = [];
      let ln = _this.createLine(p);
      objects.forEach(object => {
        object.attrs.connections.push(ln);
        p.push(object.x());
        p.push(object.y());
        object.parent.on("dragmove", () => {
          let p = [];
          p.push(object.x());
          p.push(object.y());
          //object.attrs.connections[0].points(p.slice());
          layer.batchDraw();
        });
        ln.points(p.slice());
        layer.batchDraw();
      });

      _this.drawPoint(p);
      App.clearSelectedTool();
      _this.clearState();
      return;
    }
    App.setSelectedTool(_this._tool);
    _this._state = LineSegment.STATE_PRIMEIRO_PONTO;
    App.setStatus("Selecione o primeiro ponto no canvas");
  }

  clearState() {
    this._state = undefined;
    this._points.clear();
  }

  drawPoint (p) {
    const points = Array.from(p).map(xy => {
      return Point.drawPoint(xy.x, xy.y, true);
    });
    const points_xy = points.map( group => this.getPoint(group))
      .reduce((prev, next) => prev.concat([next.x(), next.y()]), []);
    let ln = this.createLine(points_xy);
    let layer = App.currentLayer();
    this.attachPoints(ln, points);
    layer.add(ln);
    App.stage.draw();
    
    //this.clearState();
    //App.clearSelectedTool();
    //App.setStatus("");
    return ln;
  }

  createLine (points) {
    return new Konva.Line({
      points: points,
      stroke: "grey",
      strokeWidth: 2,
      lineJoin: "round",
      draggable: false,
      strokeScaleEnabled: false,
      class: ELEMENTS_CLASS.LINE_SEGMENT,
      connections: []
    });
  }

  getPoint (group) {
    const point_collection = group.find(node => {
      return node.getClassName() === 'Circle';
    });
    return point_collection.toArray()[0];
  }

  attachPoints (line, points) {
    line._parents = []
    points.forEach( (p, idx)=> {
      line._parents.push(p);
      const point = this.getPoint(p);
      point._name = idx;
      if(!p._parents) {
        p._children = [];
      }
      p._children.push(line);
      p.on('dragmove', () => {
        App.clearSelectedTool();
        this.clearState();
        const current_points = line.points();
        const new_point = this.getPoint(p);
        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 {
          current_points[2] = new_x;
          current_points[3] = new_y;
        }
        line.points(current_points);
        //App.stage.draw();
      });
    })
  }

  bootstrap() {
    Menu.add(this._tool);
  }
}
export const line_segment = new LineSegment();