igeom/src/app/components/point-component/drawers/point-drawer.js

import { Drawer } from "../../../core/drawers/drawer";
import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
import { label as Label } from "../../../component-registry/label";
import { app as App } from "../../../app";
import { PointModel } from "../models/point-model";
import { DrawerAggregator } from "../../../core/drawers/drawer-aggregator";
import { stageManager as Stages } from "../../../core/application/stage-manager";

const HOVER_STYLE = {
  fill: "#9bc364",
  strokeWidth: 2,
  stroke: "#FF0000"
};
const STYLE = {
  fill: "#9bc364",
  strokeWidth: 1,
  stroke: "#9bc364"
};
export class PointDrawer extends Drawer {
  constructor() {
    super();
    this.point;
    this.label;
    this.text;
    this.states = ["center"];
  }

  draw() {
    if (this.state == undefined) {
      super.setState(this.states[0]);
      App.setStatus("Selecione o centro do Ponto");
    }
    if (this.state == this.states[0]) {
      App.setStatus("Selecione o centro do Ponto");
      const pos = App.pos();
      if (pos == undefined) return;
      const drawResult = PointDrawer.drawAndGetPoint(pos.x, pos.y, true);
      this.point = drawResult.geometricObject;
      super.setKonvaObject(drawResult.konvaObject);
      super.addAggregator(
        new DrawerAggregator(this, this.point, this.konvaObject)
      );
      super.setState(this.states[0]);
    }
  }

  update() {}

  static drawAndGetPoint(x, y, useLabel) {
    return PointDrawer.drawPoint(new PointModel(x, y), useLabel);
  }
  static drawPoint(point, useLabel) {
    const group = Drawer.getKonvaGroup();
    const circle = PointDrawer.getKonvaCircle(point);
    group.add(circle);
    if (useLabel != undefined && useLabel) {
      const label = Label.draw();
      point.setLabel(label);
      const text = PointDrawer.getKonvaText(point, label);
      group.add(text);
    } else {
      if (point.label != undefined) {
        const text = PointDrawer.getKonvaText(point, point.label);
        group.add(text);
      }
    }
    PointDrawer.configureCircleEvents(circle);
    Drawer.drawObject(group);
    return { geometricObject: point, konvaObject: group };
  }
  static getKonvaCircle(point) {
    return new Konva.Circle({
      x: point.posX,
      y: point.posY,
      radius: 5,
      fill: STYLE.fill,
      stroke: STYLE.fill,
      strokeWidth: 1,
      strokeScaleEnabled: false,
      draggable: false,
      resizeEnabled: false,
      transformEnabled: false,
      style: STYLE,
      class: ELEMENTS_CLASS.POINT,
      connections: [],
      listening: true
    });
  }
  static getKonvaText(point, label) {
    return new Konva.Text({
      x: point.posX + 10,
      y: point.posY - 10,
      text: label,
      fontSize: 12,
      fontFamily: "Calibri",
      fill: "#434a45",
      draggable: false,
      resizeEnabled: false,
      transformEnabled: false,
      selectable: false
    });
  }
  static configureCircleEvents(circle) {
    circle.on("mouseover", function() {
      this.strokeWidth(HOVER_STYLE.strokeWidth);
      this.stroke(HOVER_STYLE.stroke);
      Stages.getCurrentKonvaStage().draw();
    });
    circle.on("mouseout", function() {
      this.strokeWidth(STYLE.strokeWidth);
      this.stroke(STYLE.stroke);
      Stages.getCurrentKonvaStage().draw();
    });
  }
}