import { Drawer } from "../../../core/drawers/drawer"; 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 { LineSegmentModel } from "../models/line-segment-model"; import { PointDrawer } from "../../point-component/drawers/point-drawer"; import { objects as Objects } from "../../../core/application/objects"; import { app as App } from "../../../app"; import { stageManager as StageManager } from "../../../core/application/stage-manager"; const HOVER_STYLE = { fill: "#33BCFF", strokeWidth: 4, stroke: "#33BCFF" }; const STYLE = { fill: "grey", strokeWidth: 2, stroke: "grey" }; export class LineSegmentDrawer extends Drawer { static FIRST_POINT_STATE() { return "FIRST_POINT"; } static SECOND_POINT_STATE() { return "SECOND_POINT"; } constructor() { super(); this.pointA; this.pointB; this.aggregatorA; this.aggregatorB; this.label; this.states = [ LineSegmentDrawer.FIRST_POINT_STATE, LineSegmentDrawer.SECOND_POINT_STATE ]; this.lineSegment; this.pointDrawer = new PointDrawer(); super.setElementClass(ELEMENTS_CLASS.LINE_SEGMENT); } setPointA(point) { this.pointA = point; } setPointB(point) { this.pointB = point; } setAggregatorA(aggregator) { this.aggregatorA = aggregator; this.setPointA(aggregator.genericObject); } setAggregatorB(aggregator) { this.aggregatorB = aggregator; this.setPointB(aggregator.genericObject); } draw() { const points = Selector.getSelectedPoints(); if (points == undefined || points.length == 0) { this.drawByState(); } this.drawByPoints(points); } drawByState() { if (this.state == undefined) { super.setState(LineSegmentDrawer.FIRST_POINT_STATE); } else if (this.state == LineSegmentDrawer.FIRST_POINT_STATE) { const aggregator = this.pointDrawer.drawPoint(); this.setAggregatorA(aggregator); super.setState(LineSegmentDrawer.SECOND_POINT_STATE); } else if (this.state == LineSegmentDrawer.SECOND_POINT_STATE) { const aggregator = this.pointDrawer.drawPoint(); this.setAggregatorB(aggregator); this.drawByPoints( [this.pointA, this.pointB], [this.aggregatorA, this.aggregatorB] ); super.setState(undefined); } } drawByPoints(points, aggregators) { if (points == undefined || points.length < 1) return; this.setPointA(points[0]); this.setPointB(points[1]); if (aggregators == undefined) aggregators = Selector.getSelectedPointsAggregators(); else { aggregators = [ Objects.getByGenericObject(this.pointA)[0], Objects.getByGenericObject(this.pointB)[0] ]; } this.label = Label.draw(); this.lineSegment = new LineSegmentModel( this.pointA, this.pointB, this.label ); const konvaObject = LineSegmentDrawer.getKonvaLine( this.pointA, this.pointB ); super.setKonvaObject(konvaObject); const aggregator = new DrawerAggregator( this, this.lineSegment, this.konvaObject, ELEMENTS_CLASS.LINE_SEGMENT ); super.addAggregator(aggregator); aggregators[1].addAggregator(aggregator); aggregators[0].addAggregator(aggregator); Drawer.drawObject(this.konvaObject); this.konvaObject.zIndex(0); super.batchDraw(); } update(aggregator) { const pointA = aggregator.genericObject.pointA; const pointB = aggregator.genericObject.pointB; aggregator.konvaObject.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 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: 0, selectable: false, draggable: false }); LineSegmentDrawer.configureLineEvents(line); return line; } static configureLineEvents(line) { line.on("mouseover", function() { const selectedTool = App.getSelectedTool(); if ( selectedTool != undefined && selectedTool.drawer != undefined && selectedTool.drawer.elementClass == ELEMENTS_CLASS.INTERSECTION_POINT ) { this.strokeWidth(HOVER_STYLE.strokeWidth); this.stroke(HOVER_STYLE.stroke); StageManager.getCurrentKonvaStage().draw(); } }); line.on("mouseout", function() { this.strokeWidth(STYLE.strokeWidth); this.stroke(STYLE.stroke); StageManager.getCurrentKonvaStage().draw(); }); return line; } static drawKonvaLine(pointA, pointB) { const line = LineSegmentDrawer.getKonvaLine(pointA, pointB); return line; } }