diff --git a/src/api/DraftApi.ts b/src/api/DraftApi.ts index 12eea51..2fffbab 100644 --- a/src/api/DraftApi.ts +++ b/src/api/DraftApi.ts @@ -35,7 +35,7 @@ export async function pageQuery( * @param params * @returns */ -export function createDraft(draftData: { name: string }) { +export function createDraft(draftData: { name: string; type: string }) { return api.post(`${DraftUriBase}`, draftData); } @@ -82,3 +82,12 @@ export function saveDraft( ) { return api.put(`${DraftUriBase}/${id}`, data); } + +/** + * 另存草稿数据 + * @param data + * @returns + */ +export function saveAsDraft(id: number, data: { name: string }) { + return api.post(`${DraftUriBase}/${id}/saveAs`, data); +} diff --git a/src/components/draw-app/properties/PlatformProperty.vue b/src/components/draw-app/properties/PlatformProperty.vue index c23bbb2..dd085c6 100644 --- a/src/components/draw-app/properties/PlatformProperty.vue +++ b/src/components/draw-app/properties/PlatformProperty.vue @@ -1,39 +1,6 @@ @@ -61,19 +28,19 @@ const drawStore = useDrawStore(); const platformModel = reactive(new PlatformData()); const hasDoor = ref('是'); const optionsDoor = ['是', '否']; -const trainDirection = ref('向左'); -const optionsDirection = ['向左', '向右']; +const direction = ref('向上'); +const optionsDirection = ['向上', '向下']; enum showSelect { 是 = 'true', 否 = 'false', - 向左 = 'left', - 向右 = 'right', + 向上 = 'up', + 向下 = 'down', } enum showSelectData { true = '是', false = '否', - left = '向左', - right = '向右', + up = '向上', + down = '向下', } drawStore.$subscribe; @@ -83,9 +50,7 @@ watch( if (val && val.type == Platform.Type) { platformModel.copyFrom(val.saveData() as PlatformData); hasDoor.value = (showSelectData as never)[platformModel.hasdoor + '']; - trainDirection.value = (showSelectData as never)[ - platformModel.trainDirection - ]; + direction.value = (showSelectData as never)[platformModel.direction]; } } ); @@ -95,15 +60,13 @@ onMounted(() => { if (platform) { platformModel.copyFrom(platform.saveData()); hasDoor.value = (showSelectData as never)[platformModel.hasdoor + '']; - trainDirection.value = (showSelectData as never)[ - platformModel.trainDirection - ]; + direction.value = (showSelectData as never)[platformModel.direction]; } }); function onUpdate() { platformModel.hasdoor = JSON.parse((showSelect as never)[hasDoor.value]); - platformModel.trainDirection = (showSelect as never)[trainDirection.value]; + platformModel.direction = (showSelect as never)[direction.value]; const platform = drawStore.selectedGraphic as Platform; if (platform) { drawStore.getDrawApp().updateGraphicAndRecord(platform, platformModel); diff --git a/src/components/draw-app/properties/StationProperty.vue b/src/components/draw-app/properties/StationProperty.vue index e484cc9..3163c9d 100644 --- a/src/components/draw-app/properties/StationProperty.vue +++ b/src/components/draw-app/properties/StationProperty.vue @@ -8,39 +8,6 @@ v-model="stationModel.code" lazy-rules /> - - - - - - - - - - - - diff --git a/src/drawApp/graphics/PlatformInteraction.ts b/src/drawApp/graphics/PlatformInteraction.ts index 111f4d3..bdeb4e1 100644 --- a/src/drawApp/graphics/PlatformInteraction.ts +++ b/src/drawApp/graphics/PlatformInteraction.ts @@ -1,5 +1,4 @@ import * as pb_1 from 'google-protobuf'; -import { IPointData } from 'pixi.js'; import { IPlatformData } from 'src/graphics/platform/Platform'; import { graphicData } from 'src/protos/stationLayoutGraphics'; import { GraphicDataBase } from './GraphicDataBase'; @@ -33,47 +32,11 @@ export class PlatformData extends GraphicDataBase implements IPlatformData { set hasdoor(v: boolean) { this.data.hasdoor = v; } - get trainDirection(): string { - return this.data.trainDirection; + get direction(): string { + return this.data.direction; } - set trainDirection(v: string) { - this.data.trainDirection = v; - } - get lineWidth(): number { - return this.data.lineWidth; - } - set lineWidth(v: number) { - this.data.lineWidth = v; - } - get lineColor(): string { - return this.data.lineColor; - } - set lineColor(v: string) { - this.data.lineColor = v; - } - get lineColorDoor(): string { - return this.data.lineColorDoor; - } - set lineColorDoor(v: string) { - this.data.lineColorDoor = v; - } - get point(): IPointData { - return this.data.point; - } - set point(point: IPointData) { - this.data.point = new graphicData.Point({ x: point.x, y: point.y }); - } - get width(): number { - return this.data.width; - } - set width(v: number) { - this.data.width = v; - } - get height(): number { - return this.data.height; - } - set height(v: number) { - this.data.height = v; + set direction(v: string) { + this.data.direction = v; } clone(): PlatformData { diff --git a/src/drawApp/graphics/StationInteraction.ts b/src/drawApp/graphics/StationInteraction.ts index 0231d5c..686d99d 100644 --- a/src/drawApp/graphics/StationInteraction.ts +++ b/src/drawApp/graphics/StationInteraction.ts @@ -32,48 +32,6 @@ export class StationData extends GraphicDataBase implements IStationData { set hasCircle(v: boolean) { this.data.hasCircle = v; } - get radius(): number { - return this.data.radius; - } - set radius(v: number) { - this.data.radius = v; - } - get borderWidth(): number { - return this.data.borderWidth; - } - set borderWidth(v: number) { - this.data.borderWidth = v; - } - get borderColor(): string { - return this.data.borderColor; - } - set borderColor(v: string) { - this.data.borderColor = v; - } - get fillColor(): string { - return this.data.fillColor; - } - set fillColor(v: string) { - this.data.fillColor = v; - } - get codeColor(): string { - return this.data.codeColor; - } - set codeColor(v: string) { - this.data.codeColor = v; - } - get codeFontSize(): number { - return this.data.codeFontSize; - } - set codeFontSize(v: number) { - this.data.codeFontSize = v; - } - get point(): IPointData { - return this.data.point; - } - set point(point: IPointData) { - this.data.point = new graphicData.Point({ x: point.x, y: point.y }); - } get circlePoint(): IPointData { return this.data.circlePoint; } diff --git a/src/graphics/platform/Platform.ts b/src/graphics/platform/Platform.ts index d0ff91e..efb7aa5 100644 --- a/src/graphics/platform/Platform.ts +++ b/src/graphics/platform/Platform.ts @@ -1,4 +1,4 @@ -import { Color, Graphics, IPointData, Rectangle } from 'pixi.js'; +import { Color, Container, Graphics, Rectangle } from 'pixi.js'; import { GraphicData, JlGraphic, @@ -12,20 +12,8 @@ export interface IPlatformData extends GraphicData { set code(v: string); get hasdoor(): boolean; // 是否有屏蔽门 set hasdoor(v: boolean); - get trainDirection(): string; // 行驶方向--屏蔽门上下 - set trainDirection(v: string); - get lineWidth(): number; // 线宽 - set lineWidth(v: number); - get lineColor(): string; // 站台线色 - set lineColor(v: string); - get lineColorDoor(): string; // 屏蔽门线色 - set lineColorDoor(v: string); - get point(): IPointData; // 位置坐标 - set point(point: IPointData); - get width(): number; // 宽度 - set width(v: number); - get height(): number; // 高度 - set height(v: number); + get direction(): string; // 屏蔽门上下 + set direction(v: string); clone(): IPlatformData; copyFrom(data: IPlatformData): void; eq(other: IPlatformData): boolean; @@ -56,146 +44,241 @@ const platformConsts = { besideSpacing: 10, }; -export class Platform extends JlGraphic { - static Type = 'Platform'; +export interface childJlGraphic extends Container { + clear(): void; + draw(): void; +} - platformGraphic: Graphics; +//子元素--矩形 +export class rectGraphic extends Container { + static Type = 'RectPlatForm'; + rectGraphic: Graphics; + constructor() { + super(); + this.rectGraphic = new Graphics(); + this.addChild(this.rectGraphic); + } + draw(): void { + const rectGraphic = this.rectGraphic; + rectGraphic.clear(); + rectGraphic.lineStyle( + platformConsts.lineWidth, + new Color(PlatformColorEnum.yellow) + ); + rectGraphic.beginFill(PlatformColorEnum.yellow, 1); + rectGraphic.drawRect(0, 0, platformConsts.width, platformConsts.height); + rectGraphic.endFill; + const rectP = new Rectangle( + 0, + 0, + platformConsts.width, + platformConsts.width + ); + rectGraphic.pivot = getRectangleCenter(rectP); + rectGraphic.position.set( + 0, + platformConsts.height / 2 + platformConsts.doorPlatformSpacing + ); + } + clear(): void { + this.rectGraphic.clear(); + } +} +//子元素--门 +export class doorGraphic extends Container { + static Type = 'Door'; doorGraphic: Graphics; doorCloseGraphic: Graphics; - besideGraphic: Graphics; - codeGraph: VectorText = new VectorText(''); //站台旁数字、字符 constructor() { - super(Platform.Type); - this.platformGraphic = new Graphics(); + super(); this.doorGraphic = new Graphics(); this.doorCloseGraphic = new Graphics(); - this.besideGraphic = new Graphics(); - this.addChild(this.platformGraphic); this.addChild(this.doorGraphic); this.addChild(this.doorCloseGraphic); + } + draw(): void { + const doorGraphic = this.doorGraphic; + const doorCloseGraphic = this.doorCloseGraphic; + doorGraphic.clear(); + doorCloseGraphic.clear(); + doorGraphic.lineStyle( + platformConsts.lineWidth, + new Color(PlatformColorEnum.doorBlue) + ); + doorGraphic.moveTo( + -platformConsts.width / 2 - platformConsts.lineWidth / 2, + 0 + ); + doorGraphic.lineTo(-platformConsts.doorOpenSpacing, 0); + doorGraphic.moveTo(platformConsts.doorOpenSpacing, 0); + doorGraphic.lineTo( + platformConsts.width / 2 + platformConsts.lineWidth / 2, + 0 + ); + //屏蔽门闭合 + doorCloseGraphic.lineStyle( + platformConsts.lineWidth, + new Color(PlatformColorEnum.doorBlue) + ); + doorCloseGraphic.moveTo(-platformConsts.doorOpenSpacing, 0); + doorCloseGraphic.lineTo(platformConsts.doorOpenSpacing, 0); + doorGraphic.position.set( + 0, + -platformConsts.height / 2 - platformConsts.doorPlatformSpacing + ); + doorCloseGraphic.position.set( + 0, + -platformConsts.height / 2 - platformConsts.doorPlatformSpacing + ); + } + openDoor(): void { + this.doorCloseGraphic.visible = false; + } + clear(): void { + this.doorGraphic.clear(); + this.doorCloseGraphic.clear(); + } +} +//子元素--字符 +class codeGraph extends Container { + static Type = 'Code'; + character: VectorText = new VectorText(''); //站台旁字符H或P + characterN: VectorText = new VectorText(''); //站台旁数字 + constructor() { + super(); + this.addChild(this.character); + this.addChild(this.characterN); + this.character.setVectorFontSize(platformConsts.besideFontSize); + this.characterN.setVectorFontSize(platformConsts.besideFontSize); + } + draw(): void { + const character = this.character; + character.text = 'H'; + character.anchor.set(0.5); + character.position.set( + -platformConsts.width / 2 - + platformConsts.lineWidth / 2 - + platformConsts.besideSpacing, + 0 + ); + character.style.fill = PlatformColorEnum.HCharYellow; + const characterN = this.characterN; + characterN.text = '9'; + characterN.anchor.set(0.5); + characterN.position.set( + -platformConsts.width / 2 - + platformConsts.lineWidth / 2 - + platformConsts.besideSpacing, + (-platformConsts.besideSpacing * 3) / 2 + ); + characterN.style.fill = PlatformColorEnum.HCharYellow; + } + clear(): void { + this.character.destroy(); + } +} +//子元素--站台旁菱形图标 +class besideGraphic extends Container { + static Type = 'BesideGraphic'; + besideGraphic: Graphics; + constructor() { + super(); + this.besideGraphic = new Graphics(); + this.addChild(this.besideGraphic); + } + draw(): void { + const besideGraphic = this.besideGraphic; + besideGraphic.clear(); + besideGraphic.lineStyle(1, new Color(PlatformColorEnum.lozengeRed)); + besideGraphic.drawRect( + 0, + 0, + platformConsts.height / 4, + platformConsts.height / 4 + ); + const rect = new Rectangle( + 0, + 0, + platformConsts.height / 4, + platformConsts.height / 4 + ); + besideGraphic.pivot = getRectangleCenter(rect); + besideGraphic.rotation = Math.PI / 4; + besideGraphic.position.set( + -platformConsts.width / 2 - + platformConsts.lineWidth / 2 - + platformConsts.besideSpacing, + 0 + ); + } + clear(): void { + this.besideGraphic.clear(); + } +} + +export class Platform extends JlGraphic { + static Type = 'Platform'; + platformGraphic: childJlGraphic = new rectGraphic(); + doorGraphic: childJlGraphic = new doorGraphic(); + besideGraphic: childJlGraphic = new besideGraphic(); + codeGraph: childJlGraphic = new codeGraph(); + constructor() { + super(Platform.Type); + this.addChild(this.platformGraphic); + this.addChild(this.doorGraphic); this.addChild(this.besideGraphic); this.addChild(this.codeGraph); - this.codeGraph.setVectorFontSize(platformConsts.besideFontSize); } get datas(): IPlatformData { return this.getDatas(); } doRepaint(): void { - const width = this.datas.width; - const height = this.datas.height; - //屏蔽门 - const doorGraphic = this.doorGraphic; - const doorCloseGraphic = this.doorCloseGraphic; - doorGraphic.clear(); - doorCloseGraphic.clear(); + this.doorGraphic.clear(); if (this.datas.hasdoor) { - doorGraphic.lineStyle( - this.datas.lineWidth, - new Color(this.datas.lineColorDoor) - ); - doorGraphic.moveTo(-width / 2 - this.datas.lineWidth / 2, 0); - doorGraphic.lineTo(-platformConsts.doorOpenSpacing, 0); - doorGraphic.moveTo(platformConsts.doorOpenSpacing, 0); - doorGraphic.lineTo(width / 2 + this.datas.lineWidth / 2, 0); - //屏蔽门闭合 - doorCloseGraphic.lineStyle( - this.datas.lineWidth, - new Color(this.datas.lineColorDoor) - ); - doorCloseGraphic.moveTo(-platformConsts.doorOpenSpacing, 0); - doorCloseGraphic.lineTo(platformConsts.doorOpenSpacing, 0); - doorGraphic.position.set( - 0, - -height / 2 - platformConsts.doorPlatformSpacing - ); - doorCloseGraphic.position.set( - 0, - -height / 2 - platformConsts.doorPlatformSpacing - ); + this.doorGraphic.draw(); } - //站台 - const platformGraphic = this.platformGraphic; - platformGraphic.clear(); - platformGraphic.lineStyle( - this.datas.lineWidth, - new Color(this.datas.lineColor) - ); - platformGraphic.beginFill(this.datas.lineColor, 1); - platformGraphic.drawRect(0, 0, this.datas.width, this.datas.height); - platformGraphic.endFill; - const rectP = new Rectangle(0, 0, this.datas.width, this.datas.height); - platformGraphic.pivot = getRectangleCenter(rectP); - this.position.set(this.datas.point.x, this.datas.point.y); - //站台旁菱形图标 - const besideGraphic = this.besideGraphic; - besideGraphic.clear(); - besideGraphic.lineStyle(1, new Color(PlatformColorEnum.lozengeRed)); - besideGraphic.drawRect(0, 0, this.datas.height / 4, this.datas.height / 4); - const rect = new Rectangle( - 0, - 0, - this.datas.height / 4, - this.datas.height / 4 - ); - besideGraphic.pivot = getRectangleCenter(rect); - besideGraphic.rotation = Math.PI / 4; - besideGraphic.position.set( - -width / 2 - this.datas.lineWidth / 2 - platformConsts.besideSpacing, - 0 - ); - //站台旁的数字、字符 - const codeGraph = this.codeGraph; - codeGraph.text = 'H'; - codeGraph.anchor.set(0.5); - codeGraph.position.set( - -width / 2 - this.datas.lineWidth / 2 - platformConsts.besideSpacing, - 0 - ); - codeGraph.style.fill = PlatformColorEnum.HCharYellow; + this.platformGraphic.draw(); + this.besideGraphic.draw(); + this.codeGraph.draw(); + this.doorGraphic.position.set(0, 0); + this.besideGraphic.position.set(0, 0); + this.codeGraph.position.set(0, 0); //站台方向 - if (this.datas.trainDirection == 'right') { - doorGraphic.position.set( + if (this.datas.direction == 'down') { + this.doorGraphic.position.set( 0, - height / 2 + platformConsts.doorPlatformSpacing + platformConsts.height + platformConsts.doorPlatformSpacing * 2 ); - doorCloseGraphic.position.set( - 0, - height / 2 + platformConsts.doorPlatformSpacing - ); - besideGraphic.position.set( - width / 2 + this.datas.lineWidth / 2 + platformConsts.besideSpacing, + this.besideGraphic.position.set( + platformConsts.width + + platformConsts.lineWidth + + platformConsts.besideSpacing * 2, 0 ); - codeGraph.position.set( - width / 2 + this.datas.lineWidth / 2 + platformConsts.besideSpacing, + this.codeGraph.position.set( + platformConsts.width + + platformConsts.lineWidth + + platformConsts.besideSpacing * 2, 0 ); + this.codeGraph.children[1].position.set( + -platformConsts.width / 2 - + platformConsts.lineWidth / 2 - + platformConsts.besideSpacing, + (platformConsts.besideSpacing * 3) / 2 + ); } - //子元素显隐 - doorCloseGraphic.visible = false; - /* besideGraphic.visible = false; - codeGraph.visible = false; */ } } export class PlatformTemplate extends JlGraphicTemplate { hasdoor: boolean; - trainDirection: string; - lineWidth: number; - lineColor: string; - lineColorDoor: string; - width: number; - height: number; + direction: string; constructor() { super(Platform.Type); this.hasdoor = true; - this.trainDirection = 'left'; - this.lineWidth = platformConsts.lineWidth; - this.lineColor = PlatformColorEnum.yellow; - this.lineColorDoor = PlatformColorEnum.doorBlue; - this.width = platformConsts.width; - this.height = platformConsts.height; + this.direction = 'up'; } new(): Platform { return new Platform(); diff --git a/src/graphics/platform/PlatformDrawAssistant.ts b/src/graphics/platform/PlatformDrawAssistant.ts index d9b7f72..4906fd0 100644 --- a/src/graphics/platform/PlatformDrawAssistant.ts +++ b/src/graphics/platform/PlatformDrawAssistant.ts @@ -1,19 +1,19 @@ -import { - Color, - FederatedPointerEvent, - Graphics, - Point, - Rectangle, -} from 'pixi.js'; +import { FederatedPointerEvent, Point } from 'pixi.js'; import { GraphicDrawAssistant, GraphicInteractionPlugin, JlDrawApp, JlGraphic, - getRectangleCenter, } from 'src/jl-graphic'; -import { IPlatformData, Platform, PlatformTemplate } from './Platform'; +import { + IPlatformData, + Platform, + PlatformTemplate, + rectGraphic, + doorGraphic, + childJlGraphic, +} from './Platform'; export interface IPlatformDrawOptions { newData: () => IPlatformData; @@ -24,8 +24,8 @@ export class PlatformDraw extends GraphicDrawAssistant< IPlatformData > { point: Point = new Point(0, 0); - platformGraphic: Graphics = new Graphics(); - doorGraphic: Graphics = new Graphics(); + platformGraphic: childJlGraphic = new rectGraphic(); + doorGraphic: childJlGraphic = new doorGraphic(); constructor(app: JlDrawApp, createData: () => IPlatformData) { super( @@ -37,12 +37,13 @@ export class PlatformDraw extends GraphicDrawAssistant< ); this.container.addChild(this.platformGraphic); this.container.addChild(this.doorGraphic); - this.graphicTemplate.hasdoor = true; platformInteraction.init(app); } bind(): void { super.bind(); + this.platformGraphic.draw(); + this.doorGraphic.draw(); } unbind(): void { super.unbind(); @@ -60,44 +61,15 @@ export class PlatformDraw extends GraphicDrawAssistant< } redraw(p: Point): void { - const template = this.graphicTemplate; - //屏蔽门 - if (template.hasdoor) { - const doorGraphic = this.doorGraphic; - doorGraphic.clear(); - doorGraphic.lineStyle( - template.lineWidth, - new Color(template.lineColorDoor) - ); - const width = template.width; - const height = template.height; - doorGraphic.moveTo(-width / 2 - template.lineWidth / 2, -height / 2 - 10); - doorGraphic.lineTo(width / 2 + template.lineWidth / 2, -height / 2 - 10); - doorGraphic.position.set(p.x, p.y); - } - - //站台 - const platformGraphic = this.platformGraphic; - platformGraphic.clear(); - this.point.set(p.x, p.y); - const rect = new Rectangle(0, 0, template.width, template.height); - platformGraphic.pivot = getRectangleCenter(rect); - platformGraphic.lineStyle(template.lineWidth, template.lineColor); - platformGraphic.beginFill(template.lineColor, 1); - platformGraphic.drawRect(0, 0, template.width, template.height); - platformGraphic.endFill; - platformGraphic.position.set(this.point.x, this.point.y); + this.doorGraphic.position.copyFrom(p); + this.platformGraphic.position.copyFrom(p); } + prepareData(data: IPlatformData): boolean { const template = this.graphicTemplate; data.hasdoor = template.hasdoor; - data.trainDirection = template.trainDirection; - data.point = this.point; - data.lineWidth = template.lineWidth; - data.lineColor = template.lineColor; - data.lineColorDoor = template.lineColorDoor; - data.width = template.width; - data.height = template.height; + data.direction = template.direction; + data.transform = this.platformGraphic.saveTransform(); return true; } } diff --git a/src/graphics/station/Station.ts b/src/graphics/station/Station.ts index 4b2381b..00f4903 100644 --- a/src/graphics/station/Station.ts +++ b/src/graphics/station/Station.ts @@ -5,26 +5,13 @@ import { JlGraphicTemplate, VectorText, } from 'src/jl-graphic'; +import { StationDraw } from './StationDrawAssistant'; export interface IStationData extends GraphicData { get code(): string; // 编号 set code(v: string); get hasCircle(): boolean; // 是否有圆圈--线网图 set hasCircle(v: boolean); - get radius(): number; // 半径 - set radius(v: number); - get borderWidth(): number; // 线宽 - set borderWidth(v: number); - get borderColor(): string; // 圆边框线色 - set borderColor(v: string); - get fillColor(): string; // 圆填充颜色 - set fillColor(v: string); - get codeColor(): string; // 车站字体颜色 - set codeColor(v: string); - get codeFontSize(): number; // 车站字体大小 - set codeFontSize(v: number); - get point(): IPointData; // 位置坐标 - set point(point: IPointData); get circlePoint(): IPointData; // 位置坐标 set circlePoint(point: IPointData); clone(): IStationData; @@ -32,13 +19,22 @@ export interface IStationData extends GraphicData { eq(other: IStationData): boolean; } +const stationConsts = { + radius: 5, + borderWidth: 1, + borderColor: '0xff0000', + fillColor: '0xff0000', + codeColor: '0xF48815', + codeFontSize: 22, + lineWidth: 3, +}; + export class Station extends JlGraphic { static Type = 'station'; - codeGraph: VectorText = new VectorText(''); //站台旁数字、字符 - circleGraphic: Graphics; + codeGraph: VectorText = new VectorText(''); //车站名 + circleGraphic: Graphics = new Graphics(); constructor() { super(Station.Type); - this.circleGraphic = new Graphics(); this.addChild(this.codeGraph); this.addChild(this.circleGraphic); } @@ -46,54 +42,39 @@ export class Station extends JlGraphic { get datas(): IStationData { return this.getDatas(); } - doRepaint(): void { - this.circleGraphic.clear(); - this.position.set(this.datas.point.x, this.datas.point.y); - const codeGraph = this.codeGraph; - if (this.datas.code == '') { - codeGraph.text = '车站Station'; - } else { - codeGraph.text = this.datas.code; - } - codeGraph.style.fill = this.datas.codeColor; - codeGraph.setVectorFontSize(this.datas.codeFontSize); + static draw(station: Station | StationDraw, datas?: IStationData): void { + station.circleGraphic.clear(); + const codeGraph = station.codeGraph; + codeGraph.text = datas?.code || '车站Station'; + codeGraph.style.fill = stationConsts.codeColor; + codeGraph.setVectorFontSize(stationConsts.codeFontSize); codeGraph.anchor.set(0.5); - if (this.datas.hasCircle) { - const circleGraphic = this.circleGraphic; + if (datas?.hasCircle) { + const circleGraphic = station.circleGraphic; circleGraphic.lineStyle( - this.datas.borderWidth, - new Color(this.datas.borderColor) + stationConsts.borderWidth, + new Color(stationConsts.borderColor) ); - circleGraphic.beginFill(this.datas.fillColor, 1); - circleGraphic.drawCircle(0, 0, this.datas.radius); + circleGraphic.beginFill(stationConsts.fillColor, 1); + circleGraphic.drawCircle(0, 0, stationConsts.radius); circleGraphic.endFill; - circleGraphic.position.set( - this.datas.circlePoint.x, - this.datas.circlePoint.y - ); + circleGraphic.position.set(datas.circlePoint.x, datas.circlePoint.y); } } + doRepaint(): void { + Station.draw(this, this.datas); + } } export class StationTemplate extends JlGraphicTemplate { hasCircle: boolean; radius: number; - borderWidth: number; - borderColor: string; - fillColor: string; - codeColor: string; - codeFontSize: number; circlePoint: IPointData; constructor() { super(Station.Type); this.hasCircle = false; - this.radius = 5; - this.borderWidth = 1; - this.borderColor = '0xff0000'; - this.fillColor = '0xff0000'; - this.codeColor = '0xF48815'; - this.codeFontSize = 22; - this.circlePoint = new Point(0, -20); + this.radius = stationConsts.radius; + this.circlePoint = new Point(0, -15); } new(): Station { return new Station(); diff --git a/src/graphics/station/StationDrawAssistant.ts b/src/graphics/station/StationDrawAssistant.ts index 2a0bf91..a797939 100644 --- a/src/graphics/station/StationDrawAssistant.ts +++ b/src/graphics/station/StationDrawAssistant.ts @@ -1,4 +1,4 @@ -import { FederatedPointerEvent, Point } from 'pixi.js'; +import { FederatedPointerEvent, Point, Graphics } from 'pixi.js'; import { GraphicDrawAssistant, GraphicInteractionPlugin, @@ -19,6 +19,7 @@ export class StationDraw extends GraphicDrawAssistant< > { point: Point = new Point(0, 0); codeGraph: VectorText = new VectorText(''); + circleGraphic: Graphics = new Graphics(); constructor(app: JlDrawApp, createData: () => IStationData) { super( @@ -34,13 +35,14 @@ export class StationDraw extends GraphicDrawAssistant< bind(): void { super.bind(); + Station.draw(this); } unbind(): void { super.unbind(); } clearCache(): void { - //this.codeGraph.clear(); + //this.codeGraph.destroy(); } onLeftDown(e: FederatedPointerEvent): void { const { x, y } = this.toCanvasCoordinates(e.global); @@ -50,23 +52,12 @@ export class StationDraw extends GraphicDrawAssistant< } redraw(p: Point): void { - const codeGraph = this.codeGraph; - codeGraph.text = '车站Station'; - codeGraph.anchor.set(0.5); - codeGraph.style.fill = '0xf48815'; - codeGraph.position.set(p.x, p.y); - codeGraph.setVectorFontSize(22); + this.codeGraph.position.copyFrom(p); } prepareData(data: IStationData): boolean { const template = this.graphicTemplate; - data.point = this.point; + data.transform = this.codeGraph.saveTransform(); data.hasCircle = template.hasCircle; - data.radius = template.radius; - data.borderWidth = template.borderWidth; - data.borderColor = template.borderColor; - data.fillColor = template.fillColor; - data.codeColor = template.codeColor; - data.codeFontSize = template.codeFontSize; data.circlePoint = template.circlePoint; return true; } diff --git a/src/pages/DraftManage.vue b/src/pages/DraftManage.vue index 9849e66..a7fdff7 100644 --- a/src/pages/DraftManage.vue +++ b/src/pages/DraftManage.vue @@ -60,14 +60,25 @@
新建草稿图
- - - - + + + + - + @@ -204,6 +215,7 @@ async function onCreate() { try { await createDraft({ name: draftName.value, + type: createType.value, }); createFormShow.value = false; tableRef.value.requestServerInteraction(); // 刷新列表 @@ -273,4 +285,9 @@ async function deleteData(row: any) { operateDisabled.value = false; }); } +const typeOptions = [ + { label: '线路', value: 'Line' }, + { label: '线网', value: 'LineNetwork' }, +]; +const createType = ref('Line'); diff --git a/src/protos/stationLayoutGraphics.ts b/src/protos/stationLayoutGraphics.ts index 517a47a..0f64b81 100644 --- a/src/protos/stationLayoutGraphics.ts +++ b/src/protos/stationLayoutGraphics.ts @@ -1313,17 +1313,10 @@ export namespace graphicData { common?: CommonInfo; code?: string; hasdoor?: boolean; - trainDirection?: string; - lineWidth?: number; - lineColor?: string; - lineColorDoor?: string; - point?: Point; - width?: number; - height?: number; - orbitCode?: string[]; + direction?: string; }) { super(); - pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [11], this.#one_of_decls); + pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls); if (!Array.isArray(data) && typeof data == "object") { if ("common" in data && data.common != undefined) { this.common = data.common; @@ -1334,29 +1327,8 @@ export namespace graphicData { if ("hasdoor" in data && data.hasdoor != undefined) { this.hasdoor = data.hasdoor; } - if ("trainDirection" in data && data.trainDirection != undefined) { - this.trainDirection = data.trainDirection; - } - if ("lineWidth" in data && data.lineWidth != undefined) { - this.lineWidth = data.lineWidth; - } - if ("lineColor" in data && data.lineColor != undefined) { - this.lineColor = data.lineColor; - } - if ("lineColorDoor" in data && data.lineColorDoor != undefined) { - this.lineColorDoor = data.lineColorDoor; - } - if ("point" in data && data.point != undefined) { - this.point = data.point; - } - if ("width" in data && data.width != undefined) { - this.width = data.width; - } - if ("height" in data && data.height != undefined) { - this.height = data.height; - } - if ("orbitCode" in data && data.orbitCode != undefined) { - this.orbitCode = data.orbitCode; + if ("direction" in data && data.direction != undefined) { + this.direction = data.direction; } } } @@ -1381,69 +1353,17 @@ export namespace graphicData { set hasdoor(value: boolean) { pb_1.Message.setField(this, 3, value); } - get trainDirection() { + get direction() { return pb_1.Message.getFieldWithDefault(this, 4, "") as string; } - set trainDirection(value: string) { + set direction(value: string) { pb_1.Message.setField(this, 4, value); } - get lineWidth() { - return pb_1.Message.getFieldWithDefault(this, 5, 0) as number; - } - set lineWidth(value: number) { - pb_1.Message.setField(this, 5, value); - } - get lineColor() { - return pb_1.Message.getFieldWithDefault(this, 6, "") as string; - } - set lineColor(value: string) { - pb_1.Message.setField(this, 6, value); - } - get lineColorDoor() { - return pb_1.Message.getFieldWithDefault(this, 7, "") as string; - } - set lineColorDoor(value: string) { - pb_1.Message.setField(this, 7, value); - } - get point() { - return pb_1.Message.getWrapperField(this, Point, 8) as Point; - } - set point(value: Point) { - pb_1.Message.setWrapperField(this, 8, value); - } - get has_point() { - return pb_1.Message.getField(this, 8) != null; - } - get width() { - return pb_1.Message.getFieldWithDefault(this, 9, 0) as number; - } - set width(value: number) { - pb_1.Message.setField(this, 9, value); - } - get height() { - return pb_1.Message.getFieldWithDefault(this, 10, 0) as number; - } - set height(value: number) { - pb_1.Message.setField(this, 10, value); - } - get orbitCode() { - return pb_1.Message.getFieldWithDefault(this, 11, []) as string[]; - } - set orbitCode(value: string[]) { - pb_1.Message.setField(this, 11, value); - } static fromObject(data: { common?: ReturnType; code?: string; hasdoor?: boolean; - trainDirection?: string; - lineWidth?: number; - lineColor?: string; - lineColorDoor?: string; - point?: ReturnType; - width?: number; - height?: number; - orbitCode?: string[]; + direction?: string; }): Platform { const message = new Platform({}); if (data.common != null) { @@ -1455,29 +1375,8 @@ export namespace graphicData { if (data.hasdoor != null) { message.hasdoor = data.hasdoor; } - if (data.trainDirection != null) { - message.trainDirection = data.trainDirection; - } - if (data.lineWidth != null) { - message.lineWidth = data.lineWidth; - } - if (data.lineColor != null) { - message.lineColor = data.lineColor; - } - if (data.lineColorDoor != null) { - message.lineColorDoor = data.lineColorDoor; - } - if (data.point != null) { - message.point = Point.fromObject(data.point); - } - if (data.width != null) { - message.width = data.width; - } - if (data.height != null) { - message.height = data.height; - } - if (data.orbitCode != null) { - message.orbitCode = data.orbitCode; + if (data.direction != null) { + message.direction = data.direction; } return message; } @@ -1486,14 +1385,7 @@ export namespace graphicData { common?: ReturnType; code?: string; hasdoor?: boolean; - trainDirection?: string; - lineWidth?: number; - lineColor?: string; - lineColorDoor?: string; - point?: ReturnType; - width?: number; - height?: number; - orbitCode?: string[]; + direction?: string; } = {}; if (this.common != null) { data.common = this.common.toObject(); @@ -1504,29 +1396,8 @@ export namespace graphicData { if (this.hasdoor != null) { data.hasdoor = this.hasdoor; } - if (this.trainDirection != null) { - data.trainDirection = this.trainDirection; - } - if (this.lineWidth != null) { - data.lineWidth = this.lineWidth; - } - if (this.lineColor != null) { - data.lineColor = this.lineColor; - } - if (this.lineColorDoor != null) { - data.lineColorDoor = this.lineColorDoor; - } - if (this.point != null) { - data.point = this.point.toObject(); - } - if (this.width != null) { - data.width = this.width; - } - if (this.height != null) { - data.height = this.height; - } - if (this.orbitCode != null) { - data.orbitCode = this.orbitCode; + if (this.direction != null) { + data.direction = this.direction; } return data; } @@ -1540,22 +1411,8 @@ export namespace graphicData { writer.writeString(2, this.code); if (this.hasdoor != false) writer.writeBool(3, this.hasdoor); - if (this.trainDirection.length) - writer.writeString(4, this.trainDirection); - if (this.lineWidth != 0) - writer.writeInt32(5, this.lineWidth); - if (this.lineColor.length) - writer.writeString(6, this.lineColor); - if (this.lineColorDoor.length) - writer.writeString(7, this.lineColorDoor); - if (this.has_point) - writer.writeMessage(8, this.point, () => this.point.serialize(writer)); - if (this.width != 0) - writer.writeFloat(9, this.width); - if (this.height != 0) - writer.writeFloat(10, this.height); - if (this.orbitCode.length) - writer.writeRepeatedString(11, this.orbitCode); + if (this.direction.length) + writer.writeString(4, this.direction); if (!w) return writer.getResultBuffer(); } @@ -1575,28 +1432,7 @@ export namespace graphicData { message.hasdoor = reader.readBool(); break; case 4: - message.trainDirection = reader.readString(); - break; - case 5: - message.lineWidth = reader.readInt32(); - break; - case 6: - message.lineColor = reader.readString(); - break; - case 7: - message.lineColorDoor = reader.readString(); - break; - case 8: - reader.readMessage(message.point, () => message.point = Point.deserialize(reader)); - break; - case 9: - message.width = reader.readFloat(); - break; - case 10: - message.height = reader.readFloat(); - break; - case 11: - pb_1.Message.addToRepeatedField(message, 11, reader.readString()); + message.direction = reader.readString(); break; default: reader.skipField(); } @@ -1616,13 +1452,6 @@ export namespace graphicData { common?: CommonInfo; code?: string; hasCircle?: boolean; - radius?: number; - borderWidth?: number; - borderColor?: string; - fillColor?: string; - codeColor?: string; - codeFontSize?: number; - point?: Point; circlePoint?: Point; }) { super(); @@ -1637,27 +1466,6 @@ export namespace graphicData { if ("hasCircle" in data && data.hasCircle != undefined) { this.hasCircle = data.hasCircle; } - if ("radius" in data && data.radius != undefined) { - this.radius = data.radius; - } - if ("borderWidth" in data && data.borderWidth != undefined) { - this.borderWidth = data.borderWidth; - } - if ("borderColor" in data && data.borderColor != undefined) { - this.borderColor = data.borderColor; - } - if ("fillColor" in data && data.fillColor != undefined) { - this.fillColor = data.fillColor; - } - if ("codeColor" in data && data.codeColor != undefined) { - this.codeColor = data.codeColor; - } - if ("codeFontSize" in data && data.codeFontSize != undefined) { - this.codeFontSize = data.codeFontSize; - } - if ("point" in data && data.point != undefined) { - this.point = data.point; - } if ("circlePoint" in data && data.circlePoint != undefined) { this.circlePoint = data.circlePoint; } @@ -1684,71 +1492,19 @@ export namespace graphicData { set hasCircle(value: boolean) { pb_1.Message.setField(this, 3, value); } - get radius() { - return pb_1.Message.getFieldWithDefault(this, 4, 0) as number; - } - set radius(value: number) { - pb_1.Message.setField(this, 4, value); - } - get borderWidth() { - return pb_1.Message.getFieldWithDefault(this, 5, 0) as number; - } - set borderWidth(value: number) { - pb_1.Message.setField(this, 5, value); - } - get borderColor() { - return pb_1.Message.getFieldWithDefault(this, 6, "") as string; - } - set borderColor(value: string) { - pb_1.Message.setField(this, 6, value); - } - get fillColor() { - return pb_1.Message.getFieldWithDefault(this, 7, "") as string; - } - set fillColor(value: string) { - pb_1.Message.setField(this, 7, value); - } - get codeColor() { - return pb_1.Message.getFieldWithDefault(this, 8, "") as string; - } - set codeColor(value: string) { - pb_1.Message.setField(this, 8, value); - } - get codeFontSize() { - return pb_1.Message.getFieldWithDefault(this, 9, 0) as number; - } - set codeFontSize(value: number) { - pb_1.Message.setField(this, 9, value); - } - get point() { - return pb_1.Message.getWrapperField(this, Point, 10) as Point; - } - set point(value: Point) { - pb_1.Message.setWrapperField(this, 10, value); - } - get has_point() { - return pb_1.Message.getField(this, 10) != null; - } get circlePoint() { - return pb_1.Message.getWrapperField(this, Point, 11) as Point; + return pb_1.Message.getWrapperField(this, Point, 4) as Point; } set circlePoint(value: Point) { - pb_1.Message.setWrapperField(this, 11, value); + pb_1.Message.setWrapperField(this, 4, value); } get has_circlePoint() { - return pb_1.Message.getField(this, 11) != null; + return pb_1.Message.getField(this, 4) != null; } static fromObject(data: { common?: ReturnType; code?: string; hasCircle?: boolean; - radius?: number; - borderWidth?: number; - borderColor?: string; - fillColor?: string; - codeColor?: string; - codeFontSize?: number; - point?: ReturnType; circlePoint?: ReturnType; }): Station { const message = new Station({}); @@ -1761,27 +1517,6 @@ export namespace graphicData { if (data.hasCircle != null) { message.hasCircle = data.hasCircle; } - if (data.radius != null) { - message.radius = data.radius; - } - if (data.borderWidth != null) { - message.borderWidth = data.borderWidth; - } - if (data.borderColor != null) { - message.borderColor = data.borderColor; - } - if (data.fillColor != null) { - message.fillColor = data.fillColor; - } - if (data.codeColor != null) { - message.codeColor = data.codeColor; - } - if (data.codeFontSize != null) { - message.codeFontSize = data.codeFontSize; - } - if (data.point != null) { - message.point = Point.fromObject(data.point); - } if (data.circlePoint != null) { message.circlePoint = Point.fromObject(data.circlePoint); } @@ -1792,13 +1527,6 @@ export namespace graphicData { common?: ReturnType; code?: string; hasCircle?: boolean; - radius?: number; - borderWidth?: number; - borderColor?: string; - fillColor?: string; - codeColor?: string; - codeFontSize?: number; - point?: ReturnType; circlePoint?: ReturnType; } = {}; if (this.common != null) { @@ -1810,27 +1538,6 @@ export namespace graphicData { if (this.hasCircle != null) { data.hasCircle = this.hasCircle; } - if (this.radius != null) { - data.radius = this.radius; - } - if (this.borderWidth != null) { - data.borderWidth = this.borderWidth; - } - if (this.borderColor != null) { - data.borderColor = this.borderColor; - } - if (this.fillColor != null) { - data.fillColor = this.fillColor; - } - if (this.codeColor != null) { - data.codeColor = this.codeColor; - } - if (this.codeFontSize != null) { - data.codeFontSize = this.codeFontSize; - } - if (this.point != null) { - data.point = this.point.toObject(); - } if (this.circlePoint != null) { data.circlePoint = this.circlePoint.toObject(); } @@ -1846,22 +1553,8 @@ export namespace graphicData { writer.writeString(2, this.code); if (this.hasCircle != false) writer.writeBool(3, this.hasCircle); - if (this.radius != 0) - writer.writeInt32(4, this.radius); - if (this.borderWidth != 0) - writer.writeInt32(5, this.borderWidth); - if (this.borderColor.length) - writer.writeString(6, this.borderColor); - if (this.fillColor.length) - writer.writeString(7, this.fillColor); - if (this.codeColor.length) - writer.writeString(8, this.codeColor); - if (this.codeFontSize != 0) - writer.writeInt32(9, this.codeFontSize); - if (this.has_point) - writer.writeMessage(10, this.point, () => this.point.serialize(writer)); if (this.has_circlePoint) - writer.writeMessage(11, this.circlePoint, () => this.circlePoint.serialize(writer)); + writer.writeMessage(4, this.circlePoint, () => this.circlePoint.serialize(writer)); if (!w) return writer.getResultBuffer(); } @@ -1881,27 +1574,6 @@ export namespace graphicData { message.hasCircle = reader.readBool(); break; case 4: - message.radius = reader.readInt32(); - break; - case 5: - message.borderWidth = reader.readInt32(); - break; - case 6: - message.borderColor = reader.readString(); - break; - case 7: - message.fillColor = reader.readString(); - break; - case 8: - message.codeColor = reader.readString(); - break; - case 9: - message.codeFontSize = reader.readInt32(); - break; - case 10: - reader.readMessage(message.point, () => message.point = Point.deserialize(reader)); - break; - case 11: reader.readMessage(message.circlePoint, () => message.circlePoint = Point.deserialize(reader)); break; default: reader.skipField(); @@ -2514,10 +2186,6 @@ export namespace graphicData { constructor(data?: any[] | { common?: CommonInfo; code?: string; - codeColor?: string; - codeFontSize?: number; - point?: Point; - direction?: string; }) { super(); pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls); @@ -2528,18 +2196,6 @@ export namespace graphicData { if ("code" in data && data.code != undefined) { this.code = data.code; } - if ("codeColor" in data && data.codeColor != undefined) { - this.codeColor = data.codeColor; - } - if ("codeFontSize" in data && data.codeFontSize != undefined) { - this.codeFontSize = data.codeFontSize; - } - if ("point" in data && data.point != undefined) { - this.point = data.point; - } - if ("direction" in data && data.direction != undefined) { - this.direction = data.direction; - } } } get common() { @@ -2557,40 +2213,9 @@ export namespace graphicData { set code(value: string) { pb_1.Message.setField(this, 2, value); } - get codeColor() { - return pb_1.Message.getFieldWithDefault(this, 3, "") as string; - } - set codeColor(value: string) { - pb_1.Message.setField(this, 3, value); - } - get codeFontSize() { - return pb_1.Message.getFieldWithDefault(this, 4, 0) as number; - } - set codeFontSize(value: number) { - pb_1.Message.setField(this, 4, value); - } - get point() { - return pb_1.Message.getWrapperField(this, Point, 5) as Point; - } - set point(value: Point) { - pb_1.Message.setWrapperField(this, 5, value); - } - get has_point() { - return pb_1.Message.getField(this, 5) != null; - } - get direction() { - return pb_1.Message.getFieldWithDefault(this, 6, "") as string; - } - set direction(value: string) { - pb_1.Message.setField(this, 6, value); - } static fromObject(data: { common?: ReturnType; code?: string; - codeColor?: string; - codeFontSize?: number; - point?: ReturnType; - direction?: string; }): Signal { const message = new Signal({}); if (data.common != null) { @@ -2599,28 +2224,12 @@ export namespace graphicData { if (data.code != null) { message.code = data.code; } - if (data.codeColor != null) { - message.codeColor = data.codeColor; - } - if (data.codeFontSize != null) { - message.codeFontSize = data.codeFontSize; - } - if (data.point != null) { - message.point = Point.fromObject(data.point); - } - if (data.direction != null) { - message.direction = data.direction; - } return message; } toObject() { const data: { common?: ReturnType; code?: string; - codeColor?: string; - codeFontSize?: number; - point?: ReturnType; - direction?: string; } = {}; if (this.common != null) { data.common = this.common.toObject(); @@ -2628,18 +2237,6 @@ export namespace graphicData { if (this.code != null) { data.code = this.code; } - if (this.codeColor != null) { - data.codeColor = this.codeColor; - } - if (this.codeFontSize != null) { - data.codeFontSize = this.codeFontSize; - } - if (this.point != null) { - data.point = this.point.toObject(); - } - if (this.direction != null) { - data.direction = this.direction; - } return data; } serialize(): Uint8Array; @@ -2650,14 +2247,6 @@ export namespace graphicData { writer.writeMessage(1, this.common, () => this.common.serialize(writer)); if (this.code.length) writer.writeString(2, this.code); - if (this.codeColor.length) - writer.writeString(3, this.codeColor); - if (this.codeFontSize != 0) - writer.writeInt32(4, this.codeFontSize); - if (this.has_point) - writer.writeMessage(5, this.point, () => this.point.serialize(writer)); - if (this.direction.length) - writer.writeString(6, this.direction); if (!w) return writer.getResultBuffer(); } @@ -2673,18 +2262,6 @@ export namespace graphicData { case 2: message.code = reader.readString(); break; - case 3: - message.codeColor = reader.readString(); - break; - case 4: - message.codeFontSize = reader.readInt32(); - break; - case 5: - reader.readMessage(message.point, () => message.point = Point.deserialize(reader)); - break; - case 6: - message.direction = reader.readString(); - break; default: reader.skipField(); } }