src/app/components/middle-point/drawers/middle-point-drawer.js
/*
* iGeom by LInE
* Geometric Object: Segment
* Drawer to Segment
* www.matematica.br/igeom
* ./app/components/middle-point-component/drawers/middle-point-drawer.js
* @version 2020/11/02: indentation
*/
import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
import { label as Label } from "../../../component-registry/label";
import { DrawerAggregator } from "../../../core/drawers/drawer-aggregator";
import { selector as Selector } from "../../../core/application/selector";
import { PointDrawer } from "../../point-component/drawers/point-drawer";
import { objects as Objects } from "../../../core/application/objects";
import { SelectableDrawer } from "../../../core/drawers/selectable-drawer";
import { PointModel } from "../../point-component/models/point-model";
import { MiddlePointModel } from "../models/middle-point-model";
export class MiddlePointDrawer extends SelectableDrawer {
static FIRST_POINT_STATE() {
return "FIRST_POINT";
}
static SECOND_POINT_STATE() {
return "SECOND_POINT";
}
constructor() {
super();
this.pointA;
this.pointB;
this.pointC;
this.aggregatorA;
this.aggregatorB;
this.aggregatorC;
this.label;
this.states = [MiddlePointDrawer.FIRST_POINT_STATE, MiddlePointDrawer.SECOND_POINT_STATE];
this.middlePoint;
this.pointDrawer = new PointDrawer();
super.setElementClass(ELEMENTS_CLASS.LINE_SEGMENT);
}
setPointA(point) {
this.pointA = point;
}
setPointB(point) {
this.pointB = point;
}
setPointC(point) {
this.pointC = point;
}
setAggregatorA(aggregator) {
this.aggregatorA = aggregator;
this.setPointA(aggregator.genericObject);
}
setAggregatorB(aggregator) {
this.aggregatorB = aggregator;
this.setPointB(aggregator.genericObject);
}
setAggregatorC(aggregator) {
this.aggregatorC = aggregator;
this.setPointC(aggregator.genericObject);
}
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.drawByMiddlePoint(e.attrs.genericObject)
return;
}
}
const points = Selector.getSelectedPoints();
if (points == undefined || points.length == 0) {
this.drawByStates();
return;
}
this.drawByPoints(points);
}
drawByStates(konvaObject) {
let aggregator = undefined;
if (konvaObject != undefined) {
aggregator = Objects.getByKonvaObject(konvaObject)[0];
}
if (this.state == undefined) {
super.setState(MiddlePointDrawer.FIRST_POINT_STATE);
}
else if (this.state == MiddlePointDrawer.FIRST_POINT_STATE) {
aggregator = aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
this.setAggregatorA(aggregator);
super.setState(MiddlePointDrawer.SECOND_POINT_STATE);
}
else if (this.state == MiddlePointDrawer.SECOND_POINT_STATE) {
aggregator = aggregator != undefined ? aggregator : this.pointDrawer.drawPoint();
this.setAggregatorB(aggregator);
const coord = MiddlePointModel.getMiddlePointPos(this.pointA, this.pointB);
const pointC = new PointModel(coord.posX, coord.posY, Label.draw());
pointC.draggable = false;
pointC.backgroundColor = "#f54260";
const aggregatorC = this.pointDrawer.drawPoint(pointC);
this.setAggregatorC(aggregatorC);
this.drawByPoints([this.pointA, this.pointB, this.pointC], [this.aggregatorA, this.aggregatorB, this.aggregatorC]);
super.setState(MiddlePointDrawer.FIRST_POINT_STATE);
}
}
drawByPoints(points, aggregators) {
if (points == undefined || points.length < 1) return;
console.log("points", points);
this.setPointA(points[0]);
this.setPointB(points[1]);
this.setPointC(points[2]);
aggregators = this.resolveAggregators(points, aggregators, true);
this.label = Label.draw(true);
this.middlePoint = new MiddlePointModel(this.pointA, this.pointB, this.pointC, this.label);
this.drawByMiddlePoint(this.middlePoint);
this.reset();
}
drawByMiddlePoint(middlePoint) {
this.middlePoint = middlePoint;
const group = SelectableDrawer.getKonvaGroup(false);
const text = MiddlePointDrawer.getKonvaText(middlePoint, middlePoint.label);
group.add(text);
const konvaObject = MiddlePointDrawer.getKonvaLine(middlePoint.pointA, middlePoint.pointB);
group.add(konvaObject);
super.setKonvaObject(group);
const aggregator = new DrawerAggregator(
this, this.middlePoint,
group, ELEMENTS_CLASS.LINE_SEGMENT
);
super.addAggregator(aggregator);
const aggregators = this.resolveAggregators([this.middlePoint.pointA, this.middlePoint.pointB, this.middlePoint.pointC], undefined);
aggregators[2].addAggregator(aggregator);
aggregators[1].addAggregator(aggregator);
aggregators[0].addAggregator(aggregator);
//D console.log("./app/components/middle-point-component/drawers/middle-point-drawer.js: drawByMiddlePoint"); //leo
SelectableDrawer.drawObject(this.konvaObject); //
this.konvaObject.zIndex(1);
super.batchDraw(); // ../../../core/drawers/drawer-aggregator.js
SelectableDrawer.setMaxIndex(aggregators[0].konvaObject);
SelectableDrawer.setMaxIndex(aggregators[1].konvaObject);
SelectableDrawer.setMaxIndex(aggregators[2].konvaObject);
}
resolveAggregators(points, aggregators, selected) {
this.pointA = points[0];
this.pointB = points[1];
this.pointC = points[2];
if (aggregators == undefined && selected == true)
aggregators = Selector.getSelectedPointsAggregators();
else {
aggregators = [
Objects.getByGenericObject(this.pointA)[0],
Objects.getByGenericObject(this.pointB)[0],
Objects.getByGenericObject(this.pointC)[0]
];
}
return aggregators;
}
update(aggregator, e) {
if (!aggregator.visible) return;
const pointA = aggregator.genericObject.pointA;
const pointB = aggregator.genericObject.pointB;
const pointC = aggregator.genericObject.pointC;
const coord = aggregator.genericObject.getMiddlePoint();
console.log(aggregator.konvaObject)
pointC.bind(coord.posX, coord.posY);
aggregator.konvaObject.children[0].x(coord.posX);
aggregator.konvaObject.children[0].y(coord.posY - 20);
aggregator.konvaObject.children[1].points([
pointA.posX, pointA.posY,
pointB.posX, pointB.posY
]);
super.batchDraw();
}
insertPoint(aggregator) {
const pointA = aggregator.genericObject.pointA;
const pointB = aggregator.genericObject.pointB;
const pointCAggregator = this.pointDrawer.drawPoint();
const pointC = pointCAggregator.genericObject;
aggregator.konvaObject.points([
pointA.posX, pointA.posY,
pointB.posX, pointB.posY,
pointC.posX, pointC.posY
]);
super.batchDraw();
}
static getKonvaText(MiddlePoint, label) {
const pos = MiddlePoint.getMiddlePoint();
return new Konva.Text({
x: pos.posX,
y: pos.posY - 20,
text: label,
fontSize: 14,
fontFamily: "Calibri",
fill: "#434a45",
stroke: "#ffffff",
strokeWidth: 0.2,
draggable: false,
resizeEnabled: false,
transformEnabled: false,
selectable: false
});
}
static getKonvaLine(pointA, pointB, useLabel) {
const points = [pointA.posX, pointA.posY, pointB.posX, pointB.posY];
const line = new Konva.Line({
points: points,
stroke: "grey",
strokeWidth: 2,
lineJoin: "round",
draggable: false,
strokeScaleEnabled: false,
class: ELEMENTS_CLASS.LINE_SEGMENT,
connections: [],
index: 1,
selectable: false,
draggable: false,
style: { stroke: "grey", fill: "grey" }
});
SelectableDrawer.setSelectableIfIntersectionChanged(line);
return line;
}
static drawKonvaLine(pointA, pointB) {
const line = MiddlePointDrawer.getKonvaLine(pointA, pointB);
return line;
}
}