igeom/src/app/components/point.js

import { app as App } from "../app";
import { label as Label } from "./label";
import { menu as Menu } from "../core/application/menu";
import { ELEMENTS_CLASS } from "../core/enums/elements-class-enum";

const HOVER_STYLE = {
  fill: "#9bc364",
  strokeWidth: 2,
  stroke: "#FF0000"
};

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

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

  function _bootstrap() {
    Menu.add(_tool);
  }

  function _drawPoint(x, y, useLabel) {
    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,
      class: ELEMENTS_CLASS.POINT,
      connections: [],
      listening: true
    });
    // mouse over event
    circle.on("mouseover", function() {
      this.strokeWidth(HOVER_STYLE.strokeWidth);
      this.stroke(HOVER_STYLE.stroke);
      App.stage.draw();
    });
    circle.on("mouseout", function() {
      this.strokeWidth(style.strokeWidth);
      this.stroke(style.stroke);
      App.stage.draw();
    });
    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);
    }

    let layer = App.currentLayer();
    layer.add(group);
    App.stage.draw();

    App.pushObject(group);

    return group;
  }

  function _click(e) {
    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,
    drawPoint: _drawPoint,
    points: points
  };

  _bootstrap();

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