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

/*
 * iGeom by LInE
 * Geometric Object: Circumference
 * Drawer to Segment
 * www.matematica.br/igeom
 *
 * ./app/components/circumference-component/drawers/circumference-drawer.js
 *
 * @version 2023/08/20: fixed debug message that was avoiding to create Circumference(B,A) whanever exists Circumference(A,B)
 * @version 2023/07/30: indentation and 'getRadius()' changed to better name 'getRadiusValue()'
 *
 */

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";
import { label as Label } from "../../../component-registry/label";

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);
    }

  // @calledby app/core/models/components/component.js: draw(e): this.drawer.draw(e);
  draw (e) {
    var auxE = "";
    console.log("circumference-drawer.js!draw(e): inicio"); //D
    try {
      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;
          }
        }
      auxE += "1, "; //D
      const points = Selector.getSelectedPoints();
      auxE += "2 (#points=" + (points!=undefined && points.length!=undefined ? points.length : "0") + "), "; //D
      if (points == undefined || points.length == 0) {
        auxE += "3, "; //D
        this.drawByStates();
        auxE += "4, "; //D
        }
      else {
        auxE += "5, "; //D
        this.drawByPoints(points, undefined, e);
        auxE += "6, "; //D
        }
    } catch (error) {
      console.log("circumference-drawer.js!draw(e): Error '" + error + "'; e=" + e + ": path: " + auxE);
      // var err = new Error(); console.log(err.stack);
      console.trace(); //D present the execution stack - whowever do not apper the lines/names from this Konvas source code...
      }
    }

  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) {
    var auxE = ""; //D
    let aggregator = undefined;
    try {
    if (konvaObject != undefined) {
      aggregator = Objects.getByKonvaObject(konvaObject)[0];
      }
    if (this.state == undefined) {
      this.state = this.states[0];
      this.setStatus("Select the first point A, to be the center of the circumference"); //TODO Internacionalizar: Selecione o centro da Circunferência"
      }
    else
    if (this.state == this.states[0]) { // first point A from Circunference(A,B)
      this.centerAggregator = aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
      this.center = this.centerAggregator.genericObject;
      this.state = this.states[1];
      this.setStatus("Select the second point B such that ||A-B|| define the circumference radius"); //TODO Internacionalizar: Selecione o centro da Circunferencia"
      }
    else
    if (this.state == this.states[1]) { // second point B from Circunference(A,B)
      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];
      }
    auxE += "13, "; //D
    } catch (error) {
      console.log("circumference-drawer.js!drawByStates(konvaObject): Error '" + error + "', with " + auxE);
      }
    }

  createAndDraw (center, radius) {
    var auxE = ""; // To debug...
    try {
    this.center = center;
    this.radius = radius;
    this.circumference = new CircumferenceModel(this.center, this.radius);
    const label = Label.draw(true);
    this.circumference.setLabel(label);
    auxE += "4 (this.circumference.id=" + (this.circumference!=undefined ? this.circumference.id : "<>") + "), "; //D
    this.createByCircumference(this.circumference);
    } catch (error) {
      console.log("circumference-drawer.js!createAndDraw(center, radius): Error '" + error + "', with " + auxE);
      }		
    }

  createByCircumference (circumference) {
    var auxE = ""; // To debug...
    var aggregator = "";
    try {
    this.circumference = circumference;
    this.konvaObject = this.drawCircumference(this.circumference);
    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();
    } catch (error) {
      console.log("circumference-drawer.js!createByCircumference(circumference): Error '" + error + "', with " + auxE);
      }
    return aggregator;
    }

  drawCircumference (circumference) {
    const circle = new Konva.Arc({
      x: circumference.center.posX,
      y: circumference.center.posY,
      innerRadius: circumference.getRadiusValue(),
      outerRadius: circumference.getRadiusValue(),
      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.setSelectableIfIntersectionChanged(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.getRadiusValue());
    aggregator.konvaObject.outerRadius(aggregator.genericObject.getRadiusValue());
    aggregator.konvaObject.x(center.posX);
    aggregator.konvaObject.y(center.posY);
    super.batchDraw();
    }

  } // export class CircumferenceDrawer extends SelectableDrawer