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";
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);
}
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);
const label = Label.draw(true);
this.circumference.setLabel(label);
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.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.getRadius());
aggregator.konvaObject.outerRadius(aggregator.genericObject.getRadius());
aggregator.konvaObject.x(center.posX);
aggregator.konvaObject.y(center.posY);
super.batchDraw();
}
}