diff --git a/src/graphics/sectionLink/SectionLinkDrawAssistant.ts b/src/graphics/sectionLink/SectionLinkDrawAssistant.ts index 60e6ebe..0671e80 100644 --- a/src/graphics/sectionLink/SectionLinkDrawAssistant.ts +++ b/src/graphics/sectionLink/SectionLinkDrawAssistant.ts @@ -6,6 +6,7 @@ import { JlGraphic, linePoint, GraphicIdGenerator, + VectorText, } from 'src/jl-graphic'; import { ISectionLinkData, @@ -13,19 +14,17 @@ import { SectionLinkConsts, SectionLinkTemplate, } from './SectionLink'; -import { - DisplayObject, - FederatedMouseEvent, - Graphics, - IHitArea, - IPointData, - Point, -} from 'pixi.js'; +import { DisplayObject, Graphics, IHitArea, IPointData, Point } from 'pixi.js'; import { Section } from '../section/Section'; import { Turnout } from '../turnout/Turnout'; import { AxleCounting } from '../axleCounting/AxleCounting'; import { IRelatedRefData } from '../CommonGraphics'; import { graphicData } from 'src/protos/stationLayoutGraphics'; +import { + PolylineEditPlugin, + ILineGraphic, + IEditPointOptions, +} from 'src/jl-graphic/plugins/GraphicEditPlugin'; const rrDevicePort = graphicData.RelatedRef.DevicePort; const rrDeviceType = graphicData.RelatedRef.DeviceType; @@ -465,6 +464,38 @@ export class SectionLinkDraw extends GraphicDrawAssistant< this.graphic.clear(); } } +class LinkPolylineEditPlugin extends PolylineEditPlugin { + static Name = 'LinkPolylineEditPlugin'; + labels: VectorText[] = []; + constructor(g: ILineGraphic, options?: IEditPointOptions) { + super(g, options); + this.name = LinkPolylineEditPlugin.Name; + this.initLabels(); + } + + initLabels() { + this.labels = [new VectorText('A'), new VectorText('B')]; + this.labels.forEach((label) => { + label.setVectorFontSize(14); + this.addChild(label); + label.style.fill = '#ff0'; + }); + this.updateEditedPointsPosition(); + } + + updateEditedPointsPosition() { + super.updateEditedPointsPosition(); + console.log(this.editedPoints, '--', this.labels[0], this.labels[1]); + this.labels[0]?.position.set( + this.editedPoints[0].x, + this.editedPoints[0].y + 10 + ); + this.labels[1]?.position.set( + this.editedPoints[this.editedPoints.length - 1].x, + this.editedPoints[this.editedPoints.length - 1].y + 10 + ); + } +} export class SectionLinkGraphicHitArea implements IHitArea { section: SectionLink; @@ -506,11 +537,36 @@ export class SectionLinkEditPlugin extends GraphicInteractionPlugin g.labelGraphic.cursor = 'pointer'; g.labelGraphic.selectable = true; g.labelGraphic.draggable = true; + g.on('selected', this.onSelected, this); + g.on('unselected', this.onUnselected, this); } unbind(g: SectionLink): void { g.transformSave = false; g.labelGraphic.eventMode = 'none'; g.labelGraphic.selectable = false; g.labelGraphic.draggable = false; + g.off('selected', this.onSelected, this); + g.off('unselected', this.onUnselected, this); + } + onSelected(g: DisplayObject): void { + const link = g as SectionLink; + + let lep = link.getAssistantAppend( + LinkPolylineEditPlugin.Name + ); + if (!lep) { + lep = new LinkPolylineEditPlugin(link); + link.addAssistantAppend(lep); + } + lep.showAll(); + } + onUnselected(g: DisplayObject): void { + const link = g as SectionLink; + const lep = link.getAssistantAppend( + LinkPolylineEditPlugin.Name + ); + if (lep) { + lep.hideAll(); + } } }