Home Reference Source Repository

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

}