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 (e != undefined && e.attrs != undefined && e.attrs.genericObject != undefined) {
const aggregator = this.drawPoint(e.attrs.genericObject);
return aggregator;
}
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(point) {
const pos = App.pos();
let drawResult;
if (point == undefined) {
if (pos == undefined) return;
drawResult = PointDrawer.drawAndGetPoint(pos.x, pos.y, true);
} else
drawResult = PointDrawer.drawPoint(point, true, point.draggable);
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) {
let label = (point != undefined && point.label != undefined && point.label != '') ? point.label : Label.draw();
point.setLabel(label);
const text = PointDrawer.getKonvaText(point, label);
group.add(text);
}
if (selectable == undefined || selectable)
SelectableDrawer.setSelectableIfSelectorChanged(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) {
console.log("point", point)
let fill = draggable == undefined || draggable ? STYLE.fill : STYLE.fill2;
let stroke = draggable == undefined || draggable ? STYLE.stroke : STYLE.fill2;
if (point.backgroundColor != undefined) {
fill = point.backgroundColor;
stroke = point.backgroundColor;
}
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
});
}
}