diff --git a/src/graphics/sectionLink/SectionLink.ts b/src/graphics/sectionLink/SectionLink.ts index 5be55ea..f085f74 100644 --- a/src/graphics/sectionLink/SectionLink.ts +++ b/src/graphics/sectionLink/SectionLink.ts @@ -5,6 +5,8 @@ import { JlGraphicTemplate, VectorText, IChildTransform, + getNormalVector, + movePointAlongNormal, } from 'src/jl-graphic'; import { ILineGraphic } from 'src/jl-graphic/plugins/GraphicEditPlugin'; @@ -23,12 +25,15 @@ export interface ISectionLinkData extends GraphicData { export const SectionLinkConsts = { lineColor: 0x5578b6, lineWidth: 5, + divisionColor: 0xff0000, + divisionWidth: 2, }; export class SectionLink extends JlGraphic implements ILineGraphic { static Type = 'SectionLink'; lineGraphic: Graphics; labelGraphic: VectorText; + divisionGraphic: Graphics = new Graphics(); constructor() { super(SectionLink.Type); @@ -42,6 +47,7 @@ export class SectionLink extends JlGraphic implements ILineGraphic { this.transformSave = true; this.addChild(this.lineGraphic); this.addChild(this.labelGraphic); + this.addChild(this.divisionGraphic); } doRepaint() { @@ -61,6 +67,36 @@ export class SectionLink extends JlGraphic implements ILineGraphic { this.lineGraphic.moveTo(p.x, p.y); } }); + const normalVector = getNormalVector( + this.datas.points[0], + this.datas.points[1] + ); + this.divisionGraphic.clear(); + this.divisionGraphic.lineStyle( + SectionLinkConsts.divisionWidth, + SectionLinkConsts.divisionColor + ); + const nextP = movePointAlongNormal(this.datas.points[0], normalVector, 5); + const nextP1 = movePointAlongNormal(this.datas.points[0], normalVector, -5); + this.divisionGraphic.moveTo(nextP1.x, nextP1.y); + this.divisionGraphic.lineTo(nextP.x, nextP.y); + const normalVector2 = getNormalVector( + this.datas.points[this.datas.points.length - 2], + this.datas.points[this.datas.points.length - 1] + ); + + const nextP2 = movePointAlongNormal( + this.datas.points[this.datas.points.length - 1], + normalVector2, + 5 + ); + const nextP3 = movePointAlongNormal( + this.datas.points[this.datas.points.length - 1], + normalVector2, + -5 + ); + this.divisionGraphic.moveTo(nextP3.x, nextP3.y); + this.divisionGraphic.lineTo(nextP2.x, nextP2.y); this.labelGraphic.text = this.datas.code; const labelPosition = this.datas?.childTransforms?.find( (item: IChildTransform) => item.name === this.labelGraphic.name diff --git a/src/graphics/sectionLink/SectionLinkDrawAssistant.ts b/src/graphics/sectionLink/SectionLinkDrawAssistant.ts index 8856825..ca2f013 100644 --- a/src/graphics/sectionLink/SectionLinkDrawAssistant.ts +++ b/src/graphics/sectionLink/SectionLinkDrawAssistant.ts @@ -23,6 +23,8 @@ import { } from 'pixi.js'; import { Section } from '../section/Section'; import { Turnout } from '../turnout/Turnout'; +import { AxleCounting } from '../axleCounting/AxleCounting'; +import { IRelatedRefData } from '../CommonGraphics'; export class SectionLinkDraw extends GraphicDrawAssistant< SectionLinkTemplate, @@ -65,51 +67,148 @@ export class SectionLinkDraw extends GraphicDrawAssistant< data.points = this.points; return true; } - oneGenerates() { - // localToCanvasPoints - const sectionList = this.app.queryStore.queryByType
(Section.Type); - const turnoutList = this.app.queryStore.queryByType(Turnout.Type); - console.log(sectionList.length, turnoutList.length); - sectionList.forEach((section: Section) => { - const sectionLink = new SectionLink(); - sectionLink.loadData(this.graphicTemplate.datas); - sectionLink.id = GraphicIdGenerator.next(); - const points: IPointData[] = []; - section.datas.points.forEach((p) => { - points.push(section.localToCanvasPoint(p)); - }); - sectionLink.datas.points = points; - this.storeGraphic(sectionLink); + generateBySection(section: Section) { + const sectionLink = new SectionLink(); + sectionLink.loadData(this.graphicTemplate.datas); + sectionLink.id = GraphicIdGenerator.next(); + const points: IPointData[] = []; + section.datas.points.forEach((p) => { + points.push(section.localToCanvasPoint(p)); }); - turnoutList.forEach((turnout: Turnout) => { - const sectionLinkA = new SectionLink(); - const sectionLinkB = new SectionLink(); - const sectionLinkC = new SectionLink(); - sectionLinkA.loadData(this.graphicTemplate.datas); - sectionLinkB.loadData(this.graphicTemplate.datas); - sectionLinkC.loadData(this.graphicTemplate.datas); - const forkP = new Point(turnout.position.x, turnout.position.y); - const pointA = [forkP]; - const pointB = [forkP]; - const pointC = [forkP]; + sectionLink.datas.points = points; + this.storeGraphic(sectionLink); + } + generateByTurnoutAxle(turnout: Turnout, port: number) { + const sectionLink = new SectionLink(); + sectionLink.loadData(this.graphicTemplate.datas); + sectionLink.id = GraphicIdGenerator.next(); + const forkP = new Point(turnout.position.x, turnout.position.y); + const points: IPointData[] = [forkP]; + if (port === 0) { turnout.datas.pointA.forEach((p) => { - pointA.push(turnout.localToCanvasPoint(p)); + points.push(turnout.localToCanvasPoint(p)); }); + } else if (port === 1) { turnout.datas.pointB.forEach((p) => { - pointB.push(turnout.localToCanvasPoint(p)); + points.push(turnout.localToCanvasPoint(p)); }); + } else if (port === 2) { turnout.datas.pointC.forEach((p) => { - pointC.push(turnout.localToCanvasPoint(p)); + points.push(turnout.localToCanvasPoint(p)); }); - sectionLinkA.id = GraphicIdGenerator.next(); - sectionLinkB.id = GraphicIdGenerator.next(); - sectionLinkC.id = GraphicIdGenerator.next(); - sectionLinkA.datas.points = pointA; - sectionLinkB.datas.points = pointB; - sectionLinkC.datas.points = pointC; - this.storeGraphic(sectionLinkA); - this.storeGraphic(sectionLinkB); - this.storeGraphic(sectionLinkC); + } + sectionLink.datas.points = points; + this.storeGraphic(sectionLink); + } + generateByTurnout(turnout: Turnout, port: number, pRef: IRelatedRefData) { + const refg = this.app.queryStore.queryById(pRef.id) as Turnout; + const sectionLink = new SectionLink(); + sectionLink.loadData(this.graphicTemplate.datas); + sectionLink.id = GraphicIdGenerator.next(); + const forkP1 = new Point(refg.position.x, refg.position.y); + const forkP2 = new Point(turnout.position.x, turnout.position.y); + const points: IPointData[] = [forkP1]; + if (pRef.devicePort === 0) { + refg.datas.pointA.forEach((p) => { + points.push(refg.localToCanvasPoint(p)); + }); + } else if (pRef.devicePort === 1) { + refg.datas.pointB.forEach((p) => { + points.push(refg.localToCanvasPoint(p)); + }); + } else if (pRef.devicePort === 2) { + refg.datas.pointC.forEach((p) => { + points.push(refg.localToCanvasPoint(p)); + }); + } + let dataPoint: IPointData[] = []; + if (port === 0) { + dataPoint = turnout.datas.pointA; + } else if (port === 1) { + dataPoint = turnout.datas.pointB; + } else if (port === 2) { + dataPoint = turnout.datas.pointC; + } + const pLength = dataPoint.length; + for (let i = 1; i < pLength + 1; i++) { + points.push(turnout.localToCanvasPoint(dataPoint[pLength - i])); + } + points.push(forkP2); + sectionLink.datas.points = points; + this.storeGraphic(sectionLink); + } + oneGenerates() { + const axleCountingList = this.app.queryStore.queryByType( + AxleCounting.Type + ); + const turnoutList = this.app.queryStore.queryByType(Turnout.Type); + const generated = new Map(); + axleCountingList.forEach((axleCounting) => { + axleCounting.datas.axleCountingRef.forEach((device) => { + const g = this.app.queryStore.queryById(device.id); + if (g.type === Section.Type) { + const g1 = axleCountingList.find((axleCounting) => { + const s = axleCounting.datas.axleCountingRef.find( + (ref) => ref.id === device.id + ); + return s; + }); + if (g1) { + this.generateBySection(g as Section); + generated.set(g.id, ['A', 'B']); + } + } else if (g.type === Turnout.Type) { + this.generateByTurnoutAxle(g as Turnout, device.devicePort); + if (generated.get(g.id)) { + const pList = generated.get(g.id); + pList.push(device.devicePort); + generated.set(g.id, pList); + } else { + generated.set(g.id, [device.devicePort]); + } + } + }); + }); + turnoutList.forEach((turnout) => { + const pList = generated.get(turnout.id); + if (!pList) { + return; + } + let pRef = null; + if ( + !pList.includes(0) && + turnout.datas.paRef && + turnout.datas.paRef.deviceType === 1 + ) { + pRef = turnout.datas.paRef; + this.generateByTurnout(turnout, 0, pRef); + } + if ( + !pList.includes(1) && + turnout.datas.pbRef && + turnout.datas.pbRef.deviceType === 1 + ) { + pRef = turnout.datas.pbRef; + this.generateByTurnout(turnout, 1, pRef); + } + if ( + !pList.includes(2) && + turnout.datas.pcRef && + turnout.datas.pcRef.deviceType === 1 + ) { + pRef = turnout.datas.pcRef; + this.generateByTurnout(turnout, 2, pRef); + } + generated.set(turnout.id, [0, 1, 2]); + if (pRef) { + if (generated.get(pRef.id)) { + const pListn = generated.get(pRef.id); + pListn.push(pRef.devicePort); + generated.set(pRef.id, pListn); + } else { + generated.set(pRef.id, [pRef.devicePort]); + } + } }); } clearCache(): void { @@ -153,31 +252,8 @@ export class SectionLinkEditPlugin extends GraphicInteractionPlugin g.lineGraphic.eventMode = 'static'; g.lineGraphic.cursor = 'pointer'; g.lineGraphic.hitArea = new SectionLinkGraphicHitArea(g); - // g.transformSave = true; - // g.labelGraphic.eventMode = 'static'; - // g.labelGraphic.cursor = 'pointer'; - // g.labelGraphic.selectable = true; - // g.labelGraphic.draggable = true; - // g.on('selected', this.onSelected, this); - // g.on('unselected', this.onUnselected, this); - // g.on('_rightclick', this.onContextMenu, this); } unbind(g: SectionLink): void { - // g.off('selected', this.onSelected, this); - // g.off('unselected', this.onUnselected, this); - // g.off('_rightclick', this.onContextMenu, this); + // console.log } - - // onContextMenu(e: FederatedMouseEvent) { - // const target = e.target as DisplayObject; - // const section = target.getGraphic() as SectionLink; - // this.app.updateSelected(section); - // } - - // onSelected(g: DisplayObject): void { - // const sectionLink = g as SectionLink; - // } - // onUnselected(g: DisplayObject): void { - // const sectionLink = g as SectionLink; - // } } diff --git a/src/layouts/DrawLayout.vue b/src/layouts/DrawLayout.vue index dcec201..0fb428b 100644 --- a/src/layouts/DrawLayout.vue +++ b/src/layouts/DrawLayout.vue @@ -191,6 +191,7 @@ import { Separator } from 'src/graphics/separator/Separator'; import { SeparatorDraw } from 'src/graphics/separator/SeparatorDrawAssistant'; import { SectionLink } from 'src/graphics/sectionLink/SectionLink'; import { SectionLinkDraw } from 'src/graphics/sectionLink/SectionLinkDrawAssistant'; +import { store } from 'quasar/wrappers'; const route = useRoute(); const router = useRouter(); @@ -335,6 +336,10 @@ function oneClickAxleCounting() { } function oneClickLink() { drawStore.oneClickType = 'SectionLink'; + const linkList = drawStore + .getDrawApp() + .queryStore.queryByType(SectionLink.Type); + drawStore.getDrawApp().deleteGraphics(...linkList); const draw = drawStore .getDrawApp() .getDrawAssistant(SectionLink.Type) as SectionLinkDraw;