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

import { CircumferenceModel } from "../models/circumference-model";
import { PointDrawer } from "../../point-component/drawers/point-drawer";
import { DrawerAggregator } from "../../../core/drawers/drawer-aggregator";
import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
import { selector as Selector } from "../../../core/application/selector";
import { SelectableDrawer } from "../../../core/drawers/selectable-drawer";
import { objects as Objects } from "../../../core/application/objects";

export class CircumferenceDrawer extends SelectableDrawer {
  constructor() {
    super();
    this.states = ["center", "radius"];
    this.state = undefined;
    this.circumference = undefined;
    this.pointDrawer = new PointDrawer();
    this.center;
    this.radius;
    this.centerAggregator;
    this.konvaObject;
    this.setElementClass(ELEMENTS_CLASS.CIRCUMFERENCE);
  }

  draw(e) {
    if (e != undefined) {

      if (
        e.target != undefined &&
        e.target.attrs.class != undefined &&
        (e.target.attrs.class == ELEMENTS_CLASS.POINT ||
          e.target.attrs.class == ELEMENTS_CLASS.INTERSECTION_POINT)
      ) {
        this.drawByStates(e.target);
        return;
      } else if (e.attrs != undefined && e.attrs.genericObject != undefined) {

        this.resolveAggregators([e.attrs.genericObject.center, e.attrs.genericObject.radius], undefined, false);
        this.createByCircumference(e.attrs.genericObject);
        return;
      }
    }
    const points = Selector.getSelectedPoints();
    if (points == undefined || points.length == 0) {
      this.drawByStates();
    } else this.drawByPoints(points, undefined, e);
  }
  drawByPoints(points, aggregators, e) {
    aggregators = this.resolveAggregators(points, aggregators, true);
    this.centerAggregator = aggregators[0];
    this.radiusAggregator = aggregators[1];
    this.center = points[0];
    this.radius = points[1];
    this.createAndDraw(this.center, this.radius);
    this.reset();
    this.setStatus("");
  }
  drawByStates(konvaObject) {
    let aggregator = undefined;
    if (konvaObject != undefined) {
      aggregator = Objects.getByKonvaObject(konvaObject)[0];
    }
    if (this.state == undefined) {
      this.state = this.states[0];
      this.setStatus("Selecione o centro da Circunferência");
    } else if (this.state == this.states[0]) {
      this.centerAggregator =
        aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
      this.center = this.centerAggregator.genericObject;
      this.state = this.states[1];
      this.setStatus("Selecione o raio da Circunferência");
    } else if (this.state == this.states[1]) {
      this.radiusAggregator =
        aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
      this.radius = this.radiusAggregator.genericObject;
      this.createAndDraw(this.center, this.radius);
      this.reset();
      this.state = this.states[0];
    }
  }
  createAndDraw(center, radius) {
    this.center = center;
    this.radius = radius;
    this.circumference = new CircumferenceModel(this.center, this.radius);
    this.createByCircumference(this.circumference);
  }
  createByCircumference(circumference) {
    this.circumference = circumference;
    this.konvaObject = this.drawCircumference(this.circumference);
    const aggregator = new DrawerAggregator(
      this,
      this.circumference,
      this.konvaObject,
      ELEMENTS_CLASS.CIRCUMFERENCE
    );
    super.addAggregator(aggregator);
    this.centerAggregator.addAggregator(aggregator);
    this.radiusAggregator.addAggregator(aggregator);
    SelectableDrawer.drawObject(this.konvaObject);
    this.konvaObject.zIndex(0);
    super.batchDraw();
    return aggregator;
  }
  drawCircumference(circumference) {
    const circle = new Konva.Arc({
      x: circumference.center.posX,
      y: circumference.center.posY,
      innerRadius: circumference.getRadius(),
      outerRadius: circumference.getRadius(),
      angle: 360,
      fill: "grey",
      stroke: "grey",
      strokeWidth: 2,
      strokeScaleEnabled: false,
      transformEnabled: false,
      draggable: false,
      selectable: false,
      index: 0,
      class: ELEMENTS_CLASS.CIRCUMFERENCE,
      style: { stroke: "grey", fill: "grey" }
    });
    SelectableDrawer.setSelectableIfToolChanged(circle);
    return circle;
  }
  resolveAggregators(points, aggregators, selected) {
    if (this.center == undefined) {
      this.center = points[0];
    }
    if (this.radius == undefined) {
      this.radius = points[1];
    }
    if (aggregators == undefined && selected == true)
      aggregators = Selector.getSelectedPointsAggregators();
    else {
      aggregators = [
        Objects.getByGenericObject(points[0])[0],
        Objects.getByGenericObject(points[1])[0]
      ];
    }
    this.centerAggregator = aggregators[0];
    this.radiusAggregator = aggregators[1];
    return aggregators;
  }

  update(aggregator, e) {
    if (!aggregator.visible) return;
    const center = aggregator.genericObject.center;
    aggregator.konvaObject.innerRadius(aggregator.genericObject.getRadius());
    aggregator.konvaObject.outerRadius(aggregator.genericObject.getRadius());
    aggregator.konvaObject.x(center.posX);
    aggregator.konvaObject.y(center.posY);
    super.batchDraw();
  }
}