igeom/app/components/circumference.js

var circunference = (function() {
  let _tool = {};
  let _states = ["center", "radius"];
  let _state = undefined;
  let _coordinates = [0, 0, 0, 0];
  let _points = [0, 0, 0];

  function _draw() {
    if (_state == undefined) {
      _state = _states[0];
      app.setStatus("Selecione o centro da Circunferência");
    } else if (_state == _states[0]) {
      let pos = app.pos();
      _coordinates[0] = pos.x;
      _coordinates[1] = pos.y;
      _state = _states[1];
      app.setStatus("Selecione o raio da Circunferência");
    } else if (_state == _states[1]) {
      let pos = app.pos();
      _coordinates[2] = pos.x;
      _coordinates[3] = pos.y;
      let legA = _coordinates[2] - _coordinates[0];
      legB = _coordinates[3] - _coordinates[1];
      let radius = Math.sqrt(Math.pow(legA, 2) + Math.pow(legB, 2));
      _points = [_coordinates[0], _coordinates[1], radius];
      let p = _points.slice();
      _drawCircunference(p[0], p[1], p[2]);
    }
  }

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

    let circle = new Konva.Circle({
      x: x,
      y: y,
      radius: radius,
      fill: "transparent",
      stroke: "black",
      strokeWidth: 1,
      strokeScaleEnabled: false,
      transformEnabled: true,
      draggable: false
    });

    let point = new Konva.Circle({
      x: x,
      y: y,
      radius: 5,
      fill: "#9bc364",
      stroke: "#9bc364",
      strokeWidth: 1,
      strokeScaleEnabled: false,
      draggable: false,
      resizeEnabled: false,
      transformEnabled: false
    });

    group.add(circle);
    group.add(point);

    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 primeiro ponto no canvas");
  }

  function _clearState() {
    _state = undefined;
  }

  _tool = {
    id: "circunference",
    title: "Circunferência",
    icon: "line",
    click: _click,
    draw: _draw,
    points: _points,
    coordinates: _coordinates,
    drawCircunference: _drawCircunference
  };

  _bootstrap();

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