poc-igeom/app/components/point.js

var point = (function() {
  let style = {
    fill: "#9bc364",
    strokeWidth: 1,
    stroke: "#9bc364"
  };
  let tool = {};
  let states = ["center"];
  let state = undefined;
  let points = [0, 0];

  function _draw() {
    if (state == undefined) {
      state = states[0];
      app.setStatus("Selecione o centro do Ponto");
    } else if (state == states[0]) {
      let pos = app.pos();
      points[0] = pos.x;
      points[1] = pos.y;
      let p = points.slice();
      let po = _drawPoint(p[0], p[1], true);
    }
  }

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

  function _drawPoint(x, y, useLabel) {
    let layer = app.currentLayer();
    let group = new Konva.Group({
      draggable: true,
      resizeEnabled: false
    });

    let circle = new Konva.Circle({
      x: x,
      y: y,
      radius: 5,
      fill: "#9bc364",
      stroke: "#9bc364",
      strokeWidth: 1,
      strokeScaleEnabled: false,
      draggable: false,
      resizeEnabled: false,
      transformEnabled: false,
      style: style
    });
    let text = new Konva.Text({
      x: x + 10,
      y: y - 10,
      text: label.draw(),
      fontSize: 12,
      fontFamily: "Calibri",
      fill: "#434a45",
      draggable: false,
      resizeEnabled: false,
      transformEnabled: false,
      selectable: false
    });
    group.add(circle);
    if (useLabel != undefined && useLabel) {
      group.add(text);
    }
    layer.add(group);
    app.pushObject(group);
    app.stage.draw();
    _clearState();
    app.clearSelectedTool();
    app.setStatus("");
  }

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