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

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 { objects } from "../../../core/application/objects";
import { SelectableDrawer } from "../../../core/drawers/selectable-drawer";

const STYLE = {
  fill: "#9bc364",
  fill2: "#828783",
  strokeWidth: 1,
  stroke: "#9bc364"
};
export class PointDrawer extends SelectableDrawer {
  constructor() {
    super();
    this.point;
    this.label;
    this.text;
    this.states = ["center"];
    super.setElementClass(ELEMENTS_CLASS.POINT);
  }

  draw(e) {
    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 aggregator = this.drawPoint();
      super.setState(this.states[0]);
      return aggregator;
    }
  }

  drawPoint() {
    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);
    const aggregator = new DrawerAggregator(
      this,
      this.point,
      this.konvaObject,
      ELEMENTS_CLASS.POINT
    );
    super.addAggregator(aggregator);
    this.konvaObject.on("dragmove", aggregator.update.bind(aggregator));
    return aggregator;
  }

  update(aggregator, event) {
    aggregator.konvaObject.children.forEach(function (element) {
      if (element.attrs.class == ELEMENTS_CLASS.POINT) {
        aggregator.genericObject.update(element, event);
      }
    });
  }

  inserPointInLineSegment(konvaObject) {
    const drawerAggregators = objects.getByKonvaObject(konvaObject);
    if (drawerAggregators == undefined || drawerAggregators.length == 0) return;
    const drawerAggregator = drawerAggregators[0];
    drawerAggregator.drawer.insertPoint(drawerAggregator);
  }

  static drawAndGetPoint(x, y, useLabel) {
    return PointDrawer.drawPoint(new PointModel(x, y), useLabel);
  }

  static drawPoint(point, useLabel, draggable, selectable) {
    const group = SelectableDrawer.getKonvaGroup(draggable);
    const circle = PointDrawer.getKonvaCircle(point, draggable, selectable);
    if (useLabel != undefined && useLabel) {
      const label = Label.draw();
      point.setLabel(label);
      const text = PointDrawer.getKonvaText(point, label);
      group.add(text);
    }
    if (selectable == undefined || selectable)
      SelectableDrawer.setSelectable(circle);
    if (useLabel) {
      group.add(circle);
      SelectableDrawer.drawObject(group);
      SelectableDrawer.setMaxIndex(group);
      return { geometricObject: point, konvaObject: group };
    } else {
      SelectableDrawer.drawObject(circle);
      SelectableDrawer.setMaxIndex(circle);
      return { geometricObject: point, konvaObject: circle };
    }
  }

  static getKonvaCircle(point, draggable, selectable) {
    const fill = draggable == undefined || draggable ? STYLE.fill : STYLE.fill2;
    const stroke =
      draggable == undefined || draggable ? STYLE.stroke : STYLE.fill2;
    return new Konva.Circle({
      x: point.posX,
      y: point.posY,
      radius: 5,
      fill: fill,
      stroke: fill,
      strokeWidth: 1,
      strokeScaleEnabled: false,
      draggable: false,
      resizeEnabled: false,
      transformEnabled: false,
      style: { fill: fill, stroke: stroke },
      class: ELEMENTS_CLASS.POINT,
      connections: [],
      startPosX: point.posX,
      startPosY: point.posY,
      listening: true,
      selectable: selectable
    });
  }
  static getKonvaText(point, label) {
    return new Konva.Text({
      x: point.posX + 10,
      y: point.posY - 10,
      text: label,
      fontSize: 14,
      fontFamily: "Calibri",
      fill: "#434a45",
      stroke: "#ffffff",
      strokeWidth: 0.2,
      draggable: false,
      resizeEnabled: false,
      transformEnabled: false,
      selectable: false
    });
  }
}