From 0619184b9b8cd8cde9f185a993475663583362d6 Mon Sep 17 00:00:00 2001 From: joylink_zhaoerwei Date: Mon, 15 Jan 2024 18:11:29 +0800 Subject: [PATCH] =?UTF-8?q?=E6=89=93=E5=8C=85=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/common/CommonGraphics.js | 50 ++++++++ .../packages/Section/common/Section.d.ts | 4 +- components/packages/Section/common/Section.js | 12 +- .../Section/common/SectionDrawAssistant.js | 4 +- components/packages/Turnout/GPTurnout.d.ts | 5 + components/packages/Turnout/GPTurnout.js | 10 ++ .../packages/Turnout/common/JlTurnout.d.ts | 34 ++++++ .../packages/Turnout/common/JlTurnout.js | 113 ++++++++++++++++++ .../Turnout/common/TurnoutConfig.d.ts | 44 +++++++ .../packages/Turnout/common/TurnoutConfig.js | 17 +++ 10 files changed, 284 insertions(+), 9 deletions(-) create mode 100644 components/common/CommonGraphics.js create mode 100644 components/packages/Turnout/GPTurnout.d.ts create mode 100644 components/packages/Turnout/GPTurnout.js create mode 100644 components/packages/Turnout/common/JlTurnout.d.ts create mode 100644 components/packages/Turnout/common/JlTurnout.js create mode 100644 components/packages/Turnout/common/TurnoutConfig.d.ts create mode 100644 components/packages/Turnout/common/TurnoutConfig.js diff --git a/components/common/CommonGraphics.js b/components/common/CommonGraphics.js new file mode 100644 index 0000000..d9e2dc4 --- /dev/null +++ b/components/common/CommonGraphics.js @@ -0,0 +1,50 @@ +import { calculateMirrorPoint } from 'jl-graphic'; + +/** + * + * @param polygon + * @param x 箭头顶点x坐标 + * @param y 箭头顶点y坐标 + * @param length 箭头长度 + * @param radius 箭头三角半径 + * @param lineWidth 箭头线宽 + * @param mirror 是否镜像翻转 (基于箭头顶点) + */ +function drawArrow(polygon, x, y, length, radius, lineWidth, mirror) { + const trianglAcme = { x, y }; + let triangleP1 = { + x: x - radius - Math.sin(Math.PI / 6), + y: y + Math.cos(Math.PI / 6) * radius, + }; + let triangleP2 = { + x: x - radius - Math.sin(Math.PI / 6), + y: y - Math.cos(Math.PI / 6) * radius, + }; + let lineP1 = { + x: x - radius - Math.sin(Math.PI / 6), + y: y + lineWidth / 2, + }; + let lineP2 = { + x: x - length, + y: y + lineWidth / 2, + }; + let lineP3 = { + x: x - length, + y: y - lineWidth / 2, + }; + let lineP4 = { + x: x - radius - Math.sin(Math.PI / 6), + y: y - lineWidth / 2, + }; + if (mirror) { + triangleP1 = calculateMirrorPoint(trianglAcme, triangleP1); + triangleP2 = calculateMirrorPoint(trianglAcme, triangleP2); + lineP1 = calculateMirrorPoint(trianglAcme, lineP1); + lineP2 = calculateMirrorPoint(trianglAcme, lineP2); + lineP3 = calculateMirrorPoint(trianglAcme, lineP3); + lineP4 = calculateMirrorPoint(trianglAcme, lineP4); + } + polygon.drawPolygon(trianglAcme.x, trianglAcme.y, triangleP1.x, triangleP1.y, lineP1.x, lineP1.y, lineP2.x, lineP2.y, lineP3.x, lineP3.y, lineP4.x, lineP4.y, triangleP2.x, triangleP2.y); +} + +export { drawArrow }; diff --git a/components/packages/Section/common/Section.d.ts b/components/packages/Section/common/Section.d.ts index 2062dc4..7378a90 100644 --- a/components/packages/Section/common/Section.d.ts +++ b/components/packages/Section/common/Section.d.ts @@ -2,7 +2,7 @@ import { GraphicData, GraphicState, JlGraphic, JlGraphicTemplate, VectorText } f import { IPointData } from 'pixi.js'; import { SectionGraphic } from './SectionGraphic'; import { DevicePort, IRelatedRef } from 'common/common'; -import { Turnout } from 'src/packages/Turnout/Turnout'; +import { JlTurnout } from 'src/packages/Turnout/common/JlTurnout'; export interface ISectionData extends GraphicData { code: string; isCurve: boolean; @@ -51,7 +51,7 @@ export declare class JlSection extends JlGraphic { get linePoints(): IPointData[]; set linePoints(points: IPointData[]); getConnectElement(port: DevicePort): { - g: Turnout | JlSection; + g: JlTurnout | JlSection; port: DevicePort; } | undefined; /** 获取拆分逻辑区段数据 */ diff --git a/components/packages/Section/common/Section.js b/components/packages/Section/common/Section.js index a7493e3..3668d76 100644 --- a/components/packages/Section/common/Section.js +++ b/components/packages/Section/common/Section.js @@ -1,7 +1,7 @@ import { JlGraphic, VectorText, convertToBezierParams, Vector2, splitLineEvenly, distance2, GraphicRelationParam, JlGraphicTemplate } from 'jl-graphic'; import { SectionGraphic } from './SectionGraphic.js'; import { DevicePort, IRelatedRef } from '../../../common/common.js'; -import { Turnout } from '../../Turnout/Turnout.js'; +import { JlTurnout } from '../../Turnout/common/JlTurnout.js'; import { AxleCounting } from '../../AxleCounting/AxleCounting.js'; const tolerance = 0.01; @@ -97,7 +97,7 @@ class JlSection extends JlGraphic { .getRelationsOfGraphic(this) .find((relation) => relation.getRelationParam(this).getParam() === port && (relation.getOtherGraphic(this) instanceof JlSection || - relation.getOtherGraphic(this) instanceof Turnout)); + relation.getOtherGraphic(this) instanceof JlTurnout)); if (!relation) { return; } @@ -148,7 +148,9 @@ class JlSection extends JlGraphic { buildRelation() { this.relationManage.deleteRelationOfGraphicAndOtherType(this, JlSection.Type); if (this.datas.sectionType === SectionType.Physical) { - this.queryStore.queryByType(JlSection.Type).forEach((section) => { + this.queryStore + .queryByType(JlSection.Type) + .forEach((section) => { if (section.id === this.id) return; let param = []; @@ -175,7 +177,7 @@ class JlSection extends JlGraphic { .getRelationsOfGraphic(this) .find((relation) => relation.getRelationParam(this).param === DevicePort.A && (relation.getOtherGraphic(this) instanceof JlSection || - relation.getOtherGraphic(this) instanceof Turnout)); + relation.getOtherGraphic(this) instanceof JlTurnout)); const paDevice = paRelation?.getOtherGraphic(this); if (paDevice) { this.datas.paRef = IRelatedRef.create(paDevice.type, paDevice.id, paRelation.getOtherRelationParam(this).getParam()); @@ -187,7 +189,7 @@ class JlSection extends JlGraphic { .getRelationsOfGraphic(this) .find((relation) => relation.getRelationParam(this).param === DevicePort.B && (relation.getOtherGraphic(this) instanceof JlSection || - relation.getOtherGraphic(this) instanceof Turnout)); + relation.getOtherGraphic(this) instanceof JlTurnout)); const pbDevice = pbRelation?.getOtherGraphic(this); if (pbDevice) { this.datas.pbRef = IRelatedRef.create(pbDevice.type, pbDevice.id, pbRelation?.getOtherRelationParam(this).param); diff --git a/components/packages/Section/common/SectionDrawAssistant.js b/components/packages/Section/common/SectionDrawAssistant.js index df5515d..c561ab3 100644 --- a/components/packages/Section/common/SectionDrawAssistant.js +++ b/components/packages/Section/common/SectionDrawAssistant.js @@ -1,7 +1,7 @@ import { ContextMenu, GraphicDrawAssistant, KeyListener, calculateMirrorPoint, convertToBezierParams, pointPolygon, linePoint, GraphicInteractionPlugin, getWaypointRangeIndex, addWayPoint, clearWayPoint, PolylineEditPlugin, VectorText, AppConsts, BezierCurveEditPlugin, AbsorbableLine, AbsorbablePoint } from 'jl-graphic'; import { SectionType, defaultDisplayConfig } from './Section.js'; import { Graphics, Point } from 'pixi.js'; -import { Turnout } from '../../Turnout/Turnout.js'; +import { JlTurnout } from '../../Turnout/common/JlTurnout.js'; import { Section } from '../GPSection.js'; class SectionDraw extends GraphicDrawAssistant { @@ -184,7 +184,7 @@ function buildAbsorbablePositions(section) { const ye = new AbsorbableLine({ x: pe.x, y: 0 }, { x: pe.x, y: height }); aps.push(xs, ys, xe, ye); }); - const turnouts = section.queryStore.queryByType(Turnout.Type); + const turnouts = section.queryStore.queryByType(JlTurnout.Type); turnouts.forEach((turnout) => { turnout.getPortPoints().forEach((points) => { turnout.localToCanvasPoints(...points).forEach((p) => { diff --git a/components/packages/Turnout/GPTurnout.d.ts b/components/packages/Turnout/GPTurnout.d.ts new file mode 100644 index 0000000..859708b --- /dev/null +++ b/components/packages/Turnout/GPTurnout.d.ts @@ -0,0 +1,5 @@ +import { JlTurnout } from './common/JlTurnout'; +export declare class Turnout extends JlTurnout { + static Type: string; + doRepaint(): void; +} diff --git a/components/packages/Turnout/GPTurnout.js b/components/packages/Turnout/GPTurnout.js new file mode 100644 index 0000000..71801eb --- /dev/null +++ b/components/packages/Turnout/GPTurnout.js @@ -0,0 +1,10 @@ +import { JlTurnout } from './common/JlTurnout.js'; + +class Turnout extends JlTurnout { + static Type = 'Turnout'; + doRepaint() { + super.draw(); + } +} + +export { Turnout }; diff --git a/components/packages/Turnout/common/JlTurnout.d.ts b/components/packages/Turnout/common/JlTurnout.d.ts new file mode 100644 index 0000000..d02ea48 --- /dev/null +++ b/components/packages/Turnout/common/JlTurnout.d.ts @@ -0,0 +1,34 @@ +import { JlGraphic, VectorText } from 'jl-graphic'; +import { IPointData, Graphics } from 'pixi.js'; +import { DevicePort } from 'common/common'; +import { ITurnoutData, TurnoutConstsConfig } from './TurnoutConfig'; +export declare function getForkPoint(r: number, p: IPointData): IPointData; +export declare class TurnoutSection extends Graphics { + turnoutConsts: TurnoutConstsConfig; + turnout: JlTurnout; + port: DevicePort; + stateFillColor?: string; + constructor(turnout: JlTurnout, port: DevicePort, turnoutConsts: TurnoutConstsConfig); + paint(): void; +} +declare class ForkGraphic extends Graphics { + turnoutConsts: TurnoutConstsConfig; + turnout: JlTurnout; + stateFillColor?: string; + constructor(turnout: JlTurnout, turnoutConsts: TurnoutConstsConfig); + paint(p: IPointData): void; +} +export declare abstract class JlTurnout extends JlGraphic { + static Type: string; + graphics: { + fork: ForkGraphic; + sections: [TurnoutSection, TurnoutSection, TurnoutSection]; + label: VectorText; + }; + constructor(turnoutConsts: TurnoutConstsConfig); + draw(): void; + get datas(): ITurnoutData; + getPortPoints(): IPointData[][]; + getGraphicOfPort(port: DevicePort): JlGraphic[]; +} +export {}; diff --git a/components/packages/Turnout/common/JlTurnout.js b/components/packages/Turnout/common/JlTurnout.js new file mode 100644 index 0000000..4eb569a --- /dev/null +++ b/components/packages/Turnout/common/JlTurnout.js @@ -0,0 +1,113 @@ +import { JlGraphic, VectorText } from 'jl-graphic'; +import { Graphics } from 'pixi.js'; +import { DevicePort } from '../../../common/common.js'; + +function getForkPoint(r, p) { + if (r === 0) + return { x: 0, y: 0 }; + const len = Math.sqrt((-p.x) ** 2 + (-p.y) ** 2); + const scale = r / len; + return { x: scale * p.x, y: scale * p.y }; +} +class TurnoutSection extends Graphics { + turnoutConsts; + turnout; + port; + stateFillColor; + constructor(turnout, port, turnoutConsts) { + super(); + this.turnoutConsts = turnoutConsts; + this.turnout = turnout; + this.port = port; + } + paint() { + let pList = []; + switch (this.port) { + case DevicePort.A: + pList = this.turnout.datas.pointA; + break; + case DevicePort.B: + pList = this.turnout.datas.pointB; + break; + case DevicePort.C: + pList = this.turnout.datas.pointC; + break; + } + const gap = this.port === DevicePort.A ? 0 : this.turnoutConsts.forkLenth; + const fillColor = this.stateFillColor || this.turnoutConsts.lineColor; + const start = getForkPoint(gap, pList[0]); + this.clear() + .lineStyle(this.turnoutConsts.lineWidth, fillColor) + .moveTo(start.x, start.y); + pList.forEach((p) => { + const { x, y } = p; + this.lineTo(x, y); + }); + } +} +class ForkGraphic extends Graphics { + turnoutConsts; + turnout; + stateFillColor; + constructor(turnout, turnoutConsts) { + super(); + this.turnoutConsts = turnoutConsts; + this.turnout = turnout; + } + paint(p) { + const fillColor = this.stateFillColor || this.turnoutConsts.lineColor; + const target = getForkPoint(this.turnoutConsts.forkLenth, p); + this.clear() + .lineStyle(this.turnoutConsts.lineWidth, fillColor) + .moveTo(0, 0) + .lineTo(target.x, target.y); + } +} +class JlTurnout extends JlGraphic { + static Type = 'Turnout'; + graphics; + constructor(turnoutConsts) { + super(JlTurnout.Type); + this.name = 'turnout'; + this.graphics = { + fork: new ForkGraphic(this, turnoutConsts), + sections: [ + new TurnoutSection(this, DevicePort.A, turnoutConsts), + new TurnoutSection(this, DevicePort.B, turnoutConsts), + new TurnoutSection(this, DevicePort.C, turnoutConsts), + ], + label: new VectorText(), + }; + this.addChild(this.graphics.fork); + this.addChild(this.graphics.sections[0]); + this.addChild(this.graphics.sections[1]); + this.addChild(this.graphics.sections[2]); + this.graphics.label.anchor.set(0.5); + this.graphics.label.style.fill = '#0f0'; + this.graphics.label.setVectorFontSize(turnoutConsts.labelFontSize); + this.graphics.label.position.set(20, 20); + this.graphics.label.transformSave = true; + this.graphics.label.name = 'label'; + this.addChild(this.graphics.label); + } + draw() { + this.graphics.label.text = this.datas.code; + this.graphics.sections.forEach((sectionGraphic) => sectionGraphic.paint()); + } + get datas() { + return this.getDatas(); + } + getPortPoints() { + return [this.datas.pointA, this.datas.pointB, this.datas.pointC]; + } + getGraphicOfPort(port) { + return this.relationManage + .getRelationsOfGraphic(this) + .filter((relation) => relation.getRelationParam(this).getParam() === port) + .map((relation) => { + return relation.getOtherGraphic(this); + }); + } +} + +export { JlTurnout, TurnoutSection, getForkPoint }; diff --git a/components/packages/Turnout/common/TurnoutConfig.d.ts b/components/packages/Turnout/common/TurnoutConfig.d.ts new file mode 100644 index 0000000..2f18a18 --- /dev/null +++ b/components/packages/Turnout/common/TurnoutConfig.d.ts @@ -0,0 +1,44 @@ +import { IRelatedRef, KilometerSystem } from 'common/common'; +import { GraphicData } from 'jl-graphic'; +import { IPointData } from 'pixi.js'; +export interface TurnoutConstsConfig { + lineColor: string; + occupiedColor: string; + lineWidth: number; + forkLenth: number; + labelFontSize: number; + normalLabelColor: string; + reverseLabelColor: string; +} +export declare const GPConsts: { + lineColor: string; + occupiedColor: string; + lineWidth: number; + forkLenth: number; + labelFontSize: number; + normalLabelColor: string; + reverseLabelColor: string; +}; +export declare enum SwitchMachineType { + Unknown = 0, + ZDJ9_Single = 1, + ZDJ9_Double = 2 +} +export interface ITurnoutData extends GraphicData { + code: string; + pointA: IPointData[]; + pointB: IPointData[]; + pointC: IPointData[]; + paRef?: IRelatedRef; + pbRef?: IRelatedRef; + pcRef?: IRelatedRef; + kilometerSystem: KilometerSystem; + paTrackSectionId?: number; + pbTrackSectionId?: number; + pcTrackSectionId?: number; + switchMachineType?: SwitchMachineType; + centralizedStations?: number[]; + clone(): ITurnoutData; + copyFrom(data: ITurnoutData): void; + eq(other: ITurnoutData): boolean; +} diff --git a/components/packages/Turnout/common/TurnoutConfig.js b/components/packages/Turnout/common/TurnoutConfig.js new file mode 100644 index 0000000..f494a2e --- /dev/null +++ b/components/packages/Turnout/common/TurnoutConfig.js @@ -0,0 +1,17 @@ +const GPConsts = { + lineColor: '#5578b6', + occupiedColor: '#f00', + lineWidth: 5, + forkLenth: 20, + labelFontSize: 12, + normalLabelColor: '#0f0', + reverseLabelColor: '#ff0', +}; +var SwitchMachineType; +(function (SwitchMachineType) { + SwitchMachineType[SwitchMachineType["Unknown"] = 0] = "Unknown"; + SwitchMachineType[SwitchMachineType["ZDJ9_Single"] = 1] = "ZDJ9_Single"; + SwitchMachineType[SwitchMachineType["ZDJ9_Double"] = 2] = "ZDJ9_Double"; +})(SwitchMachineType || (SwitchMachineType = {})); + +export { GPConsts, SwitchMachineType };