poc-igeom/app/components/line.js

var line = (function() {
  // dashed line

  var tool = {};

  var states = ["primeiro_ponto", "segundo_ponto"];

  var state = undefined;

  var 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]) {
      var 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]) {
      var pos = app.pos();
      points[2] = pos.x;
      points[3] = pos.y;
      var p = points.slice();
      var ln = new Konva.Line({
        points: p,
        stroke: "grey",
        strokeWidth: 2,
        lineJoin: "round",
        draggable: true,
        strokeScaleEnabled: false
      });

      var 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
  };
})();