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

import { app as App } from "../app";
import { menu as Menu } from "../core/components/menu";
import { selector as Selector } from "../core/components/selector";
import { ELEMENTS_CLASS } from "../core/enums/elements-class-enum";
export class Line {
  constructor() {
    this._states = ["primeiro_ponto", "segundo_ponto"];
    this._state = undefined;
    this._points = [0, 0, 0, 0];
    this._tool = {
      id: "line",
      title: "Reta",
      icon: "line",
      click: this.click,
      draw: this.draw,
      points: this.points,
      object: this
    };
    this.bootstrap();
  }

  draw(e) {
    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) {
    let _this = e;
    if (e == undefined) {
      _this = this;
    }
    if (_this._state == _this._states[0] || _this._state == _this._states[1]) {
      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 = [];
          let objects = Selector.getPoints();
          objects.forEach(object => {
            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 = _this._states[0];
    App.setStatus("Selecione o primeiro ponto no canvas");
  }

  clearState() {
    this._state = undefined;
  }

  drawPoint(p) {
    let ln = this.createLine(p);

    let layer = App.currentLayer();
    layer.add(ln);
    App.stage.draw();

    this.clearState();
    App.clearSelectedTool();
    App.setStatus("");
  }

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

  bootstrap() {
    Menu.add(this._tool);
  }
}
export const line = new Line();