poc-igeom/app/components/line.js

var line = (function() {
  let _tool = {};
  let _states = ["primeiro_ponto", "segundo_ponto"];
  let _state = undefined;
  let _points = [0, 0, 0, 0];

  function _draw() {
    if (_state == undefined) {
      _state = _states[0];
      app.setStatus("Selecione o primeiro ponto no canvas");
    } else if (_state == _states[0]) {
      let pos = app.pos();
      _points[0] = pos.x;
      _points[1] = pos.y;
      _state = _states[1];
      app.setStatus("Selecione o segundo ponto no canvas");
    } else if (_state == _states[1]) {
      let pos = app.pos();
      _points[2] = pos.x;
      _points[3] = pos.y;
      let p = _points.slice();
      let ln = new Konva.Line({
        points: p,
        stroke: "grey",
        strokeWidth: 2,
        lineJoin: "round",
        draggable: true,
        strokeScaleEnabled: false
      });

      let layer = app.currentLayer();
      layer.add(ln);

      app.stage.draw();

      _clearState();
      app.clearSelectedTool();
      app.setStatus("");
    }
  }

  function _bootstrap() {
    app.tools.push(_tool);
  }

  function _click() {
    if (_state == _states[0] || _state == _states[1]) {
      app.clearSelectedTool();
      _clearState();
      return;
    }
    app.setSelectedTool(_tool);
    _state = _states[0];
    app.setStatus("Selecione o primeiro ponto no canvas");
  }

  function _clearState() {
    _state = undefined;
  }

  _tool = {
    id: "line",
    title: "Reta",
    icon: "line",
    click: _click,
    draw: _draw,
    points: _points
  };

  _bootstrap();

  return {
    draw: _draw,
    click: _click
  };
})();