igeom/app/components/point.js

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

  var tool = {};

  var states = ["center"];

  var state = undefined;

  var points = [0, 0];

  var labels = [
    "a",
    "b",
    "c",
    "d",
    "e",
    "f",
    "g",
    "h",
    "i",
    "j",
    "k",
    "l",
    "m",
    "n",
    "o",
    "p",
    "q",
    "r",
    "s",
    "t",
    "u",
    "v",
    "w",
    "x",
    "y",
    "z"
  ];

  var usedLabels = [];

  function draw() {
    if (state == undefined) {
      state = states[0];
      app.setStatus("Selecione o centro do Ponto");
    } else if (state == states[0]) {
      var layer = app.currentLayer();
      var pos = app.pos();
      points[0] = pos.x;
      points[1] = pos.y;
      var p = points.slice();
      var label = labels[usedLabels.length];
      usedLabels.push(label);
      var group = new Konva.Group({
        draggable: true,
        resizeEnabled: false
      });
      var circle = new Konva.Circle({
        x: p[0],
        y: p[1],
        radius: 5,
        fill: "#42f572",
        stroke: "#33a351",
        strokeWidth: 1,
        strokeScaleEnabled: false,
        draggable: false,
        resizeEnabled: false,
        transformEnabled: false
      });
      var text = new Konva.Text({
        x: p[0] + 10,
        y: p[1] - 10,
        text: label.toUpperCase(),
        fontSize: 12,
        fontFamily: "Calibri",
        fill: "#434a45",
        draggable: false,
        resizeEnabled: false,
        transformEnabled: false
      });
      group.add(circle);
      group.add(text);
      layer.add(group);
      app.stage.draw();

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

  function bootstrap() {
    app.tools.push(tool);
  }

  function click(id) {
    if (state == states[0]) {
      app.clearSelectedTool();
      clearState();
      return;
    }
    app.setSelectedTool(tool);
    state = states[0];
    app.setStatus("Selecione o centro da Ponto");
  }

  function clearState() {
    state = undefined;
  }

  tool = {
    id: "point",
    title: "Ponto",
    icon: "point",
    click: click,
    draw: draw,
    points: points
  };

  bootstrap();

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