From 10727abc6ad7d13182379ab2024bdd6fb9404c28 Mon Sep 17 00:00:00 2001 From: joylink_zhaoerwei Date: Wed, 14 Jun 2023 13:05:01 +0800 Subject: [PATCH 01/15] =?UTF-8?q?=E7=BA=BF=E7=BD=91=E8=BD=A6=E5=8F=98?= =?UTF-8?q?=E5=B0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/graphics/trainLine/TrainLine.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/graphics/trainLine/TrainLine.ts b/src/graphics/trainLine/TrainLine.ts index 6d207e2..5732d4a 100644 --- a/src/graphics/trainLine/TrainLine.ts +++ b/src/graphics/trainLine/TrainLine.ts @@ -19,7 +19,7 @@ export class TrainLine extends JlGraphic { this.train = new Sprite(); this.train.texture = this.trainTextures; this.train.anchor.set(0.5); - this.train.scale.set(0.1, 0.1); + this.train.scale.set(0.02, 0.02); this.addChild(this.train); } doRepaint(): void { From a5a530b66f020657007d46753af90637290a97af Mon Sep 17 00:00:00 2001 From: fan Date: Wed, 14 Jun 2023 13:11:04 +0800 Subject: [PATCH 02/15] =?UTF-8?q?=E7=94=9F=E6=88=90=E8=BD=A8=E8=BF=B9?= =?UTF-8?q?=E7=BA=BF=E5=90=8E=E7=A7=BB=E5=8A=A8=E9=BC=A0=E6=A0=87=E6=8A=A5?= =?UTF-8?q?=E9=94=99=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/graphics/runLine/RunLine.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/graphics/runLine/RunLine.ts b/src/graphics/runLine/RunLine.ts index ae6d8fa..f46d458 100644 --- a/src/graphics/runLine/RunLine.ts +++ b/src/graphics/runLine/RunLine.ts @@ -96,7 +96,8 @@ export class RunLine extends JlGraphic { } generatePathLine(pointsUp: Point[], pointsDown: Point[]) { - const app = this.getGraphicApp() as JlDrawApp; + const app = getDrawApp(); + if (!app) return; const pathLineDrawAssistant = app.getDrawAssistant( PathLine.Type ) as PathLineDraw; From e62b93d785c9acb347e430d8fa5ee93d19dc04b5 Mon Sep 17 00:00:00 2001 From: fan Date: Wed, 14 Jun 2023 13:50:50 +0800 Subject: [PATCH 03/15] =?UTF-8?q?=E8=BF=90=E8=A1=8C=E7=BA=BF=E6=8B=96?= =?UTF-8?q?=E5=8A=A8=E6=B7=BB=E5=8A=A0=E5=90=B8=E9=99=84=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/graphics/runLine/RunLineDrawAssistant.ts | 63 +++++++++++++++++++- 1 file changed, 62 insertions(+), 1 deletion(-) diff --git a/src/graphics/runLine/RunLineDrawAssistant.ts b/src/graphics/runLine/RunLineDrawAssistant.ts index 38a9f95..a682d78 100644 --- a/src/graphics/runLine/RunLineDrawAssistant.ts +++ b/src/graphics/runLine/RunLineDrawAssistant.ts @@ -5,6 +5,9 @@ import { GraphicInteractionPlugin, linePoint, GraphicApp, + AbsorbablePosition, + DraggablePoint, + GraphicTransformEvent, } from 'src/jl-graphic'; import { IRunLineData, @@ -19,6 +22,7 @@ import { clearWayPoint, clearWaypointsConfig, getWaypointRangeIndex, + ILineGraphic, } from 'src/jl-graphic/plugins/GraphicEditPlugin'; import { FederatedPointerEvent, @@ -30,6 +34,7 @@ import { FederatedMouseEvent, } from 'pixi.js'; import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu'; +import { AbsorbableLine } from 'src/jl-graphic/graphic/AbsorbablePosition'; export interface IRunLineDrawOptions { newData: () => IRunLineData; @@ -118,6 +123,62 @@ export class RunLineGraphicHitArea implements IHitArea { } } +function buildAbsorbablePositions( + runLine: RunLine, + dpIndex: number +): AbsorbablePosition[] { + const aps: AbsorbablePosition[] = []; + const canvas = runLine.getCanvas(); + if (runLine.linePoints[dpIndex - 1]) { + const preP = runLine.localToCanvasPoint(runLine.linePoints[dpIndex - 1]); + const ala = new AbsorbableLine( + new Point(preP.x, 0), + new Point(preP.x, canvas.height) + ); + const alb = new AbsorbableLine( + new Point(0, preP.y), + new Point(canvas.width, preP.y) + ); + aps.push(ala); + aps.push(alb); + } + if (runLine.linePoints[dpIndex + 1]) { + const nextP = runLine.localToCanvasPoint(runLine.linePoints[dpIndex + 1]); + const ala = new AbsorbableLine( + new Point(nextP.x, 0), + new Point(nextP.x, canvas.height) + ); + const alb = new AbsorbableLine( + new Point(0, nextP.y), + new Point(canvas.width, nextP.y) + ); + aps.push(ala); + aps.push(alb); + } + return aps; +} + +/** + * 端点拖拽添加吸附位置 + * @param g + * @param dp + * @param index + */ +function onEditPointCreate( + g: ILineGraphic, + dp: DraggablePoint, + index: number +): void { + const runLine = g as RunLine; + dp.on('transformstart', (e: GraphicTransformEvent) => { + if (e.isShift()) { + runLine.getGraphicApp().setOptions({ + absorbablePositions: buildAbsorbablePositions(runLine, index), + }); + } + }); +} + const RunLineEditMenu: ContextMenu = ContextMenu.init({ name: '运行线编辑菜单', groups: [ @@ -202,7 +263,7 @@ export class RunLinePointsEditPlugin extends GraphicInteractionPlugin { PolylineEditPlugin.Name ); if (!lep) { - lep = new PolylineEditPlugin(runLine); + lep = new PolylineEditPlugin(runLine, { onEditPointCreate }); runLine.addAssistantAppend(lep); } lep.showAll(); From 84fa32f3c8671b29636fe7929438aa19cf8464c5 Mon Sep 17 00:00:00 2001 From: joylink_zhaoerwei Date: Wed, 14 Jun 2023 15:30:11 +0800 Subject: [PATCH 04/15] =?UTF-8?q?=E7=BA=BF=E7=BD=91=E8=BD=A6=E7=AB=99?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=90=B8=E9=99=84=E8=BF=90=E8=A1=8C=E7=BA=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../stationLine/StationLineDrawAssistant.ts | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/graphics/stationLine/StationLineDrawAssistant.ts b/src/graphics/stationLine/StationLineDrawAssistant.ts index 30b62e5..101b9b6 100644 --- a/src/graphics/stationLine/StationLineDrawAssistant.ts +++ b/src/graphics/stationLine/StationLineDrawAssistant.ts @@ -1,5 +1,7 @@ import { FederatedPointerEvent, Point } from 'pixi.js'; import { + AbsorbableLine, + AbsorbablePosition, GraphicData, GraphicDrawAssistant, GraphicInteractionPlugin, @@ -12,6 +14,7 @@ import { StationLine, StationLineTemplate, } from './StationLine'; +import { RunLine } from '../runLine/RunLine'; export interface IStationLineDrawOptions { newData: () => IStationLineData; @@ -64,8 +67,26 @@ export class StationLineDraw extends GraphicDrawAssistant< } } +/** + * 构建吸附位置 + * @param polygon + * @returns + */ +function buildAbsorbablePositions(Station: StationLine): AbsorbablePosition[] { + const aps: AbsorbablePosition[] = []; + const runLines = Station.queryStore.queryByType(RunLine.Type); + runLines.forEach((runLine) => { + const points = runLine.datas.points; + for (let i = 0; i < points.length - 1; i++) { + aps.push(new AbsorbableLine(points[i], points[i + 1])); + } + }); + return aps; +} + export class stationLineInteraction extends GraphicInteractionPlugin { static Name = 'stationLine_transform'; + static stationLine: StationLine; constructor(app: JlDrawApp) { super(stationLineInteraction.Name, app); } @@ -78,6 +99,7 @@ export class stationLineInteraction extends GraphicInteractionPlugin g as StationLine); } bind(g: StationLine): void { + stationLineInteraction.stationLine = g; g.eventMode = 'static'; g.cursor = 'pointer'; g.scalable = true; @@ -87,6 +109,7 @@ export class stationLineInteraction extends GraphicInteractionPlugin Date: Wed, 14 Jun 2023 15:38:45 +0800 Subject: [PATCH 05/15] =?UTF-8?q?=E8=BD=A8=E8=BF=B9=E7=BA=BF=E7=94=9F?= =?UTF-8?q?=E6=88=90=E9=80=BB=E8=BE=91=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../draw-app/properties/RunLineProperty.vue | 10 +- src/graphics/runLine/RunLine.ts | 160 +++++++++++++++++- 2 files changed, 162 insertions(+), 8 deletions(-) diff --git a/src/components/draw-app/properties/RunLineProperty.vue b/src/components/draw-app/properties/RunLineProperty.vue index e33f4f9..a97d6ab 100644 --- a/src/components/draw-app/properties/RunLineProperty.vue +++ b/src/components/draw-app/properties/RunLineProperty.vue @@ -121,13 +121,9 @@ function generatePathLine() { const runLine = drawStore.selectedGraphic as RunLine; if (runLine) { const points = runLineModel.points; - const pointsUp: Point[] = []; - const pointsDown: Point[] = []; - points.forEach((item) => { - pointsUp.push(new Point(item.x, item.y - 10)); - pointsDown.push(new Point(item.x, item.y + 10)); - }); - runLine.generatePathLine(pointsUp, pointsDown); + const points1: Point[] = []; + points.forEach((p) => points1.push(new Point(p.x, p.y))); + runLine.generatePathLine(points1); } } diff --git a/src/graphics/runLine/RunLine.ts b/src/graphics/runLine/RunLine.ts index f46d458..05808c1 100644 --- a/src/graphics/runLine/RunLine.ts +++ b/src/graphics/runLine/RunLine.ts @@ -37,6 +37,7 @@ export const runLineConsts = { runLineWidth: 6, nameFontSize: 16, nameOffsetX: 40, + pathLineDistance: 10, }; export class RunLine extends JlGraphic { @@ -94,8 +95,164 @@ export class RunLine extends JlGraphic { old.points = points; this.updateData(old); } + /** + * 计算两点法向量 + * @param point1 + * @param point2 + * @returns + */ + getNormalVector(point1: Point, point2: Point): number[] { + const x1 = point1.x, + y1 = point1.y; + const x2 = point2.x, + y2 = point2.y; + const length = Math.sqrt((y2 - y1) ** 2 + (x2 - x1) ** 2); + return [(y2 - y1) / length, (x1 - x2) / length]; + } + /** + * 点延向量方向平移 + * @param point + * @param normal 单位向量 + * @param length 平移长度 + * @returns + */ + movePointAlongNormal(point: Point, normal: number[], length: number): Point { + const newPoint = new Point( + point.x + length * normal[0], + point.y + length * normal[1] + ); + return newPoint; + } + /** + * 计算两组点各自组成直线的相交点(若两线平行 返回第一组坐标第一个点) + * @param line1 两点坐标列表 + * @param line2 两点坐标列表 + * @returns + */ + getIntersectionPoint(line1: number[], line2: number[]) { + const a1 = line1[0], + b1 = line1[1]; + const a2 = line1[2], + b2 = line1[3]; + const a3 = line2[0], + b3 = line2[1]; + const a4 = line2[2], + b4 = line2[3]; + const denominator = (a3 - a4) * (b1 - b2) - (a1 - a2) * (b3 - b4); + if (denominator === 0) { + return new Point(a1, b1); + } + const x = + ((a3 - a4) * (a2 * b1 - a1 * b2) - (a1 - a2) * (a4 * b3 - a3 * b4)) / + denominator; + const y = + ((b3 - b4) * (b2 * a1 - b1 * a2) - (b1 - b2) * (b4 * a3 - b3 * a4)) / + -denominator; + return new Point(x, y); + } - generatePathLine(pointsUp: Point[], pointsDown: Point[]) { + generatePathLine(points: Point[]) { + const pointsUp: Point[] = []; + const pointsDown: Point[] = []; + points.forEach((p, index) => { + // 起始点终止点计算两点法向量 做平移计算，中间点做线段法向量平移就交点 + if (index === 0) { + const normalVector = this.getNormalVector(p, points[index + 1]); + const resverNormalVector = [-normalVector[0], -normalVector[1]]; + pointsUp.push( + this.movePointAlongNormal( + p, + normalVector, + runLineConsts.pathLineDistance + ) + ); + pointsDown.push( + this.movePointAlongNormal( + p, + resverNormalVector, + runLineConsts.pathLineDistance + ) + ); + } else if (index === points.length - 1) { + const normalVector = this.getNormalVector(points[index - 1], p); + const resverNormalVector = [-normalVector[0], -normalVector[1]]; + pointsUp.push( + this.movePointAlongNormal( + p, + normalVector, + runLineConsts.pathLineDistance + ) + ); + pointsDown.push( + this.movePointAlongNormal( + p, + resverNormalVector, + runLineConsts.pathLineDistance + ) + ); + } else { + const normalVector1 = this.getNormalVector(p, points[index + 1]); + const resverNormalVector1 = [-normalVector1[0], -normalVector1[1]]; + const curP1 = this.movePointAlongNormal( + p, + normalVector1, + runLineConsts.pathLineDistance + ); + const nextP1 = this.movePointAlongNormal( + points[index + 1], + normalVector1, + runLineConsts.pathLineDistance + ); + const resverCurP1 = this.movePointAlongNormal( + p, + resverNormalVector1, + runLineConsts.pathLineDistance + ); + const resverNextP1 = this.movePointAlongNormal( + points[index + 1], + resverNormalVector1, + runLineConsts.pathLineDistance + ); + + const normalVector2 = this.getNormalVector(points[index - 1], p); + const resverNormalVector2 = [-normalVector2[0], -normalVector2[1]]; + console.log(normalVector2); + + const curP2 = this.movePointAlongNormal( + p, + normalVector2, + runLineConsts.pathLineDistance + ); + const nextP2 = this.movePointAlongNormal( + points[index - 1], + normalVector2, + runLineConsts.pathLineDistance + ); + const resverCurP2 = this.movePointAlongNormal( + p, + resverNormalVector2, + runLineConsts.pathLineDistance + ); + const resverNextP2 = this.movePointAlongNormal( + points[index - 1], + resverNormalVector2, + runLineConsts.pathLineDistance + ); + console.log(curP1, nextP1, curP2, nextP2, 'line'); + pointsUp.push( + this.getIntersectionPoint( + [curP1.x, curP1.y, nextP1.x, nextP1.y], + [curP2.x, curP2.y, nextP2.x, nextP2.y] + ) + ); + pointsDown.push( + this.getIntersectionPoint( + [resverCurP1.x, resverCurP1.y, resverNextP1.x, resverNextP1.y], + [resverCurP2.x, resverCurP2.y, resverNextP2.x, resverNextP2.y] + ) + ); + } + }); const app = getDrawApp(); if (!app) return; const pathLineDrawAssistant = app.getDrawAssistant( @@ -117,6 +274,7 @@ export class RunLine extends JlGraphic { const pathLineDown = pathLineDrawAssistant.quickCreate(pointsDown); this.datas.upPathLineId = pathLineUp?.id || ''; this.datas.downPathLineId = pathLineDown?.id || ''; + console.log(pointsUp, pointsDown, 'points'); } getStartPoint(): IPointData { From 01ef575be3df2528a4392bfe79d4f7a5085e5750 Mon Sep 17 00:00:00 2001 From: fan Date: Wed, 14 Jun 2023 15:39:19 +0800 Subject: [PATCH 06/15] =?UTF-8?q?=E8=BD=A8=E8=BF=B9=E7=BA=BF=E9=A2=9C?= =?UTF-8?q?=E8=89=B2=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/graphics/pathLine/PathLine.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/graphics/pathLine/PathLine.ts b/src/graphics/pathLine/PathLine.ts index 2e52ce4..b281404 100644 --- a/src/graphics/pathLine/PathLine.ts +++ b/src/graphics/pathLine/PathLine.ts @@ -13,7 +13,7 @@ export interface IPathLineData extends GraphicData { export const pathLineConsts = { pathLineWidth: 1, - pathLineColor: '0X000000', + pathLineColor: '0Xff0000', }; export class PathLine extends JlGraphic { From fb854feb797760f7960c0e218fb2fa5ad08fe04a Mon Sep 17 00:00:00 2001 From: fan Date: Wed, 14 Jun 2023 15:45:29 +0800 Subject: [PATCH 07/15] =?UTF-8?q?=E8=BD=A6=E7=AB=99=E5=90=8D=E7=A7=B0?= =?UTF-8?q?=E5=A4=A7=E5=B0=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/graphics/stationLine/StationLine.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/graphics/stationLine/StationLine.ts b/src/graphics/stationLine/StationLine.ts index 6ae0d79..dc16742 100644 --- a/src/graphics/stationLine/StationLine.ts +++ b/src/graphics/stationLine/StationLine.ts @@ -25,7 +25,7 @@ const stationConsts = { transferWidth: 0.2, transferColor: '0x0fe81f', codeColor: '0xF48815', - codeFontSize: 22, + codeFontSize: 10, codeOffsetY: 20, }; //子元素--圆点 From e04b7d355b92b519e49b3b6d5365e8b25941e1aa Mon Sep 17 00:00:00 2001 From: fan Date: Wed, 14 Jun 2023 16:04:38 +0800 Subject: [PATCH 08/15] =?UTF-8?q?=E7=BA=BF=E7=BD=91=E8=BD=A6=E7=AB=99?= =?UTF-8?q?=E9=A2=9C=E8=89=B2=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/graphics/stationLine/StationLine.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/graphics/stationLine/StationLine.ts b/src/graphics/stationLine/StationLine.ts index dc16742..8a002ad 100644 --- a/src/graphics/stationLine/StationLine.ts +++ b/src/graphics/stationLine/StationLine.ts @@ -19,8 +19,8 @@ export interface IStationLineData extends GraphicData { const stationConsts = { radius: 5, borderWidth: 1, - borderColor: '0xff0000', - fillColor: '0xff0000', + borderColor: '0xffffff', + fillColor: '0xffffff', transferRadius: 3.5, transferWidth: 0.2, transferColor: '0x0fe81f', From 5a8d709bea786bd3fa98cf454fd4f4bc4e4b3d12 Mon Sep 17 00:00:00 2001 From: joylink_zhaoerwei Date: Thu, 15 Jun 2023 09:08:08 +0800 Subject: [PATCH 09/15] =?UTF-8?q?=E8=BD=A6=E7=AB=99=E5=90=8D=E8=87=AA?= =?UTF-8?q?=E5=8A=A8=E6=8D=A2=E8=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/draw-app/properties/StationLineProperty.vue | 2 ++ src/components/draw-app/properties/StationProperty.vue | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/components/draw-app/properties/StationLineProperty.vue b/src/components/draw-app/properties/StationLineProperty.vue index b23ed30..951e567 100644 --- a/src/components/draw-app/properties/StationLineProperty.vue +++ b/src/components/draw-app/properties/StationLineProperty.vue @@ -10,9 +10,11 @@ Date: Thu, 15 Jun 2023 10:39:34 +0800 Subject: [PATCH 10/15] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=8D=A2=E4=B9=98?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=E7=9A=84=E7=BA=BF=E5=AE=BD=E5=92=8C=E9=A2=9C?= =?UTF-8?q?=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/graphics/stationLine/StationLine.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/graphics/stationLine/StationLine.ts b/src/graphics/stationLine/StationLine.ts index 8a002ad..9ab12e4 100644 --- a/src/graphics/stationLine/StationLine.ts +++ b/src/graphics/stationLine/StationLine.ts @@ -22,8 +22,8 @@ const stationConsts = { borderColor: '0xffffff', fillColor: '0xffffff', transferRadius: 3.5, - transferWidth: 0.2, - transferColor: '0x0fe81f', + transferWidth: 0.4, + transferColor: '0xff0000', codeColor: '0xF48815', codeFontSize: 10, codeOffsetY: 20, From d0034e0acf31491a01ac5064cb12fb0fef7b92a6 Mon Sep 17 00:00:00 2001 From: fan Date: Thu, 15 Jun 2023 13:12:37 +0800 Subject: [PATCH 11/15] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/drawApp/lineApp.ts | 83 +++++++++++++++++++++++++++++++ src/graphics/pathLine/PathLine.ts | 18 +++++++ src/graphics/runLine/RunLine.ts | 3 -- src/layouts/LineLoayout.vue | 12 +++++ src/stores/line-store.ts | 53 ++++++++++++++++++++ 5 files changed, 166 insertions(+), 3 deletions(-) create mode 100644 src/drawApp/lineApp.ts create mode 100644 src/layouts/LineLoayout.vue create mode 100644 src/stores/line-store.ts diff --git a/src/drawApp/lineApp.ts b/src/drawApp/lineApp.ts new file mode 100644 index 0000000..e56bc87 --- /dev/null +++ b/src/drawApp/lineApp.ts @@ -0,0 +1,83 @@ +import { GraphicApp, GraphicData } from 'src/jl-graphic'; +import { TrainData } from './graphics/TrainInteraction'; +import { TrainTemplate } from 'src/graphics/train/Train'; +import { SignalData } from './graphics/SignalInteraction'; +import { SignalTemplate } from 'src/graphics/signal/Signal'; +import { PlatformData } from './graphics/PlatformInteraction'; +import { PlatformTemplate } from 'src/graphics/platform/Platform'; +import { StationData } from './graphics/StationInteraction'; +import { StationTemplate } from 'src/graphics/station/Station'; +import { TurnoutData } from './graphics/TurnoutInteraction'; +import { TurnoutTemplate } from 'src/graphics/turnout/Turnout'; +import { SectionData } from './graphics/SectionInteraction'; +import { SectionTemplate } from 'src/graphics/section/Section'; +import { getDraft } from 'src/api/DraftApi'; +import { graphicData } from 'src/protos/stationLayoutGraphics'; +import { useDrawStore } from 'src/stores/draw-store'; +import { toUint8Array } from 'js-base64'; + +let lineApp: GraphicApp | null = null; + +export function getLineApp(): GraphicApp | null { + return lineApp; +} + +export function destroyLineApp(): void { + if (lineApp) { + lineApp.destroy(); + lineApp = null; + } +} + +export function initLineApp(dom: HTMLElement): GraphicApp { + lineApp = new GraphicApp(dom); + const graphicTemplate = [ + new TrainTemplate(), + new SignalTemplate(), + new SignalTemplate(), + new PlatformTemplate(), + new StationTemplate(), + new TurnoutTemplate(), + new SectionTemplate(), + ]; + lineApp.registerGraphicTemplates(...graphicTemplate); + return lineApp; +} + +export async function loadDrawDatas(app: GraphicApp) { + const drawStore = useDrawStore(); + const id = drawStore.draftId; + if (!id) { + return; + } + const { proto: base64 } = await getDraft(id); + if (base64) { + const storage = graphicData.RtssGraphicStorage.deserialize( + toUint8Array(base64) + ); + console.log('加载数据', storage); + app.updateCanvas(storage.canvas); + const datas: GraphicData[] = []; + storage.Platforms.forEach((platform) => { + datas.push(new PlatformData(platform)); + }); + storage.stations.forEach((station) => { + datas.push(new StationData(station)); + }); + storage.train.forEach((train) => { + datas.push(new TrainData(train)); + }); + storage.turnouts.forEach((turnout) => { + datas.push(new TurnoutData(turnout)); + }); + storage.signals.forEach((signal) => { + datas.push(new SignalData(signal)); + }); + storage.section.forEach((section) => { + datas.push(new SectionData(section)); + }); + app.loadGraphic(datas); + } else { + app.loadGraphic([]); + } +} diff --git a/src/graphics/pathLine/PathLine.ts b/src/graphics/pathLine/PathLine.ts index b281404..55d7f6f 100644 --- a/src/graphics/pathLine/PathLine.ts +++ b/src/graphics/pathLine/PathLine.ts @@ -1,5 +1,7 @@ import { JlGraphic, GraphicData, JlGraphicTemplate } from 'src/jl-graphic'; import { Graphics, IPointData } from 'pixi.js'; +import { RunLine } from '../runLine/RunLine'; +import { getDrawApp } from 'src/drawApp'; export interface IPathLineData extends GraphicData { get code(): string; @@ -58,6 +60,22 @@ export class PathLine extends JlGraphic { getEndPoint(): IPointData { return this.datas.points[this.datas.points.length - 1]; } + onDelete(): void { + super.onDelete(); + const pathLineId = this.datas.id; + const app = getDrawApp(); + if (!app) return; + const runLineList = app.queryStore.queryByType(RunLine.Type) as RunLine[]; + runLineList.find((runLine) => { + if (runLine.datas.downPathLineId === pathLineId) { + runLine.datas.downPathLineId = ''; + return true; + } else if (runLine.datas.upPathLineId === pathLineId) { + runLine.datas.upPathLineId = ''; + return true; + } + }); + } } export class PathLineTemplate extends JlGraphicTemplate { diff --git a/src/graphics/runLine/RunLine.ts b/src/graphics/runLine/RunLine.ts index 05808c1..98ca1b9 100644 --- a/src/graphics/runLine/RunLine.ts +++ b/src/graphics/runLine/RunLine.ts @@ -216,7 +216,6 @@ export class RunLine extends JlGraphic { const normalVector2 = this.getNormalVector(points[index - 1], p); const resverNormalVector2 = [-normalVector2[0], -normalVector2[1]]; - console.log(normalVector2); const curP2 = this.movePointAlongNormal( p, @@ -238,7 +237,6 @@ export class RunLine extends JlGraphic { resverNormalVector2, runLineConsts.pathLineDistance ); - console.log(curP1, nextP1, curP2, nextP2, 'line'); pointsUp.push( this.getIntersectionPoint( [curP1.x, curP1.y, nextP1.x, nextP1.y], @@ -274,7 +272,6 @@ export class RunLine extends JlGraphic { const pathLineDown = pathLineDrawAssistant.quickCreate(pointsDown); this.datas.upPathLineId = pathLineUp?.id || ''; this.datas.downPathLineId = pathLineDown?.id || ''; - console.log(pointsUp, pointsDown, 'points'); } getStartPoint(): IPointData { diff --git a/src/layouts/LineLoayout.vue b/src/layouts/LineLoayout.vue new file mode 100644 index 0000000..1b27158 --- /dev/null +++ b/src/layouts/LineLoayout.vue @@ -0,0 +1,12 @@ + + + diff --git a/src/stores/line-store.ts b/src/stores/line-store.ts new file mode 100644 index 0000000..383611a --- /dev/null +++ b/src/stores/line-store.ts @@ -0,0 +1,53 @@ +import { defineStore } from 'pinia'; +import { + DrawAssistant, + JlCanvas, + JlDrawApp, + JlGraphic, + GraphicApp, +} from 'src/jl-graphic'; +import { initLineApp, getLineApp, destroyLineApp } from 'src/drawApp/lineApp'; + +export const useLineStore = defineStore('line', { + state: () => ({ + selectedGraphics: null as JlGraphic[] | null, + lineId: null as number | null, + }), + getters: { + selectedGraphicType: (state) => { + if (state.selectedGraphics) { + if (state.selectedGraphics.length === 1) { + return state.selectedGraphics[0].type; + } + } + }, + }, + actions: { + getLineApp(): GraphicApp { + const app = getLineApp(); + if (app == null) { + throw new Error('未初始化app'); + } + return app; + }, + getJlCanvas(): JlCanvas { + return this.getLineApp().canvas; + }, + initDrawApp(dom: HTMLElement) { + const app = initLineApp(dom); + app.on('graphicselectedchange', () => { + this.selectedGraphics = app.selectedGraphics; + }); + this.selectedGraphics = []; + return app; + }, + destroy() { + // console.log('绘制状态清空，绘制应用销毁'); + this.selectedGraphics = null; + destroyLineApp(); + }, + setDraftId(id: number | null) { + this.lineId = id; + }, + }, +}); From ce32589aac9d3ab592380e8394d47c9b11f90ce9 Mon Sep 17 00:00:00 2001 From: fan Date: Thu, 15 Jun 2023 13:18:29 +0800 Subject: [PATCH 12/15] =?UTF-8?q?=E7=BA=BF=E8=B7=AF=E4=BF=A1=E5=8F=B7?= =?UTF-8?q?=E6=9C=BA=E5=90=8D=E7=A7=B0=E6=94=BE=E5=BC=80=E7=BC=A9=E6=94=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/graphics/signal/SignalDrawAssistant.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/graphics/signal/SignalDrawAssistant.ts b/src/graphics/signal/SignalDrawAssistant.ts index 2e84440..4b01705 100644 --- a/src/graphics/signal/SignalDrawAssistant.ts +++ b/src/graphics/signal/SignalDrawAssistant.ts @@ -88,7 +88,7 @@ export class signalInteraction extends GraphicInteractionPlugin { g.codeGraph.draggable = true; g.codeGraph.selectable = true; g.codeGraph.rotatable = true; - // g.codeGraph.scalable = true; + g.codeGraph.scalable = true; g.codeGraph.transformSave = true; g.codeGraph.eventMode = 'static'; // g.codeGraph.on('transformend', this.onScaleDragEnd, this); @@ -103,7 +103,7 @@ export class signalInteraction extends GraphicInteractionPlugin { g.codeGraph.draggable = false; g.codeGraph.selectable = false; g.codeGraph.rotatable = false; - // g.codeGraph.scalable = false; + g.codeGraph.scalable = false; g.codeGraph.transformSave = false; g.codeGraph.eventMode = 'none'; } From 59fed6579cec4db80e7e6a27d863ae145fa09576 Mon Sep 17 00:00:00 2001 From: fan Date: Thu, 15 Jun 2023 14:20:33 +0800 Subject: [PATCH 13/15] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=9A=82=E6=8F=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/drawApp/lineApp.ts | 2 +- src/layouts/LineLayout.vue | 58 +++++++++++++++++++++++++++++++++++++ src/layouts/LineLoayout.vue | 12 -------- src/pages/PublishManage.vue | 7 +++++ src/router/routes.ts | 5 ++++ src/stores/line-store.ts | 13 ++------- 6 files changed, 74 insertions(+), 23 deletions(-) create mode 100644 src/layouts/LineLayout.vue delete mode 100644 src/layouts/LineLoayout.vue diff --git a/src/drawApp/lineApp.ts b/src/drawApp/lineApp.ts index e56bc87..6a84e2a 100644 --- a/src/drawApp/lineApp.ts +++ b/src/drawApp/lineApp.ts @@ -44,7 +44,7 @@ export function initLineApp(dom: HTMLElement): GraphicApp { return lineApp; } -export async function loadDrawDatas(app: GraphicApp) { +export async function loadLineDatas(app: GraphicApp) { const drawStore = useDrawStore(); const id = drawStore.draftId; if (!id) { diff --git a/src/layouts/LineLayout.vue b/src/layouts/LineLayout.vue new file mode 100644 index 0000000..8029311 --- /dev/null +++ b/src/layouts/LineLayout.vue @@ -0,0 +1,58 @@ + + + diff --git a/src/layouts/LineLoayout.vue b/src/layouts/LineLoayout.vue deleted file mode 100644 index 1b27158..0000000 --- a/src/layouts/LineLoayout.vue +++ /dev/null @@ -1,12 +0,0 @@ - - - diff --git a/src/pages/PublishManage.vue b/src/pages/PublishManage.vue index 5367708..1102de3 100644 --- a/src/pages/PublishManage.vue +++ b/src/pages/PublishManage.vue @@ -1,5 +1,6 @@