From ae471acea363f26b74e45ec243f71cfd050f01b2 Mon Sep 17 00:00:00 2001 From: joylink_zhaoerwei Date: Wed, 31 May 2023 17:53:34 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BD=A6=E7=AB=99=E5=88=9D=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/draw-app/DrawProperties.vue | 9 + .../draw-app/properties/StationProperty.vue | 79 ++++++++ .../draw-app/templates/StationTemplate.vue | 70 +++++++ .../protos/draw_data_storage.proto | 10 + .../app/graphics/StationInteraction.ts | 56 ++++++ src/examples/app/index.ts | 20 ++ src/examples/app/protos/draw_data_storage.ts | 190 +++++++++++++++++- src/graphics/station/Station.ts | 61 ++++++ src/graphics/station/StationDrawAssistant.ts | 73 +++++++ 9 files changed, 567 insertions(+), 1 deletion(-) create mode 100644 src/components/draw-app/properties/StationProperty.vue create mode 100644 src/components/draw-app/templates/StationTemplate.vue create mode 100644 src/examples/app/graphics/StationInteraction.ts create mode 100644 src/graphics/station/Station.ts create mode 100644 src/graphics/station/StationDrawAssistant.ts diff --git a/src/components/draw-app/DrawProperties.vue b/src/components/draw-app/DrawProperties.vue index 578796d..7fe95d0 100644 --- a/src/components/draw-app/DrawProperties.vue +++ b/src/components/draw-app/DrawProperties.vue @@ -13,6 +13,9 @@ + @@ -36,6 +39,9 @@ + @@ -48,12 +54,15 @@ diff --git a/src/components/draw-app/templates/StationTemplate.vue b/src/components/draw-app/templates/StationTemplate.vue new file mode 100644 index 0000000..fe433bf --- /dev/null +++ b/src/components/draw-app/templates/StationTemplate.vue @@ -0,0 +1,70 @@ + + + diff --git a/src/examples/app/app_message/protos/draw_data_storage.proto b/src/examples/app/app_message/protos/draw_data_storage.proto index 9b3f960..b13dca4 100644 --- a/src/examples/app/app_message/protos/draw_data_storage.proto +++ b/src/examples/app/app_message/protos/draw_data_storage.proto @@ -7,6 +7,7 @@ message RtssGraphicStorage { repeated Link links = 2; repeated IscsFan iscsFans = 3; repeated Platform Platforms = 4; + repeated Station stations = 5; } message Canvas { @@ -78,6 +79,15 @@ message Platform { repeated string orbitCode = 11;//站台轨 } +message Station { + CommonInfo common = 1; + string code = 2; + string codeColor = 3; // 车站字体颜色 + int32 codeFontSize = 4; // 车站字体大小 + Point point = 5; // 位置坐标 + +} + message IscsFan { CommonInfo common = 1; string code = 2; diff --git a/src/examples/app/graphics/StationInteraction.ts b/src/examples/app/graphics/StationInteraction.ts new file mode 100644 index 0000000..0b4c467 --- /dev/null +++ b/src/examples/app/graphics/StationInteraction.ts @@ -0,0 +1,56 @@ +import * as pb_1 from 'google-protobuf'; +import { IPointData } from 'pixi.js'; +import { IStationData } from 'src/graphics/station/Station'; +import { graphicData } from '../protos/draw_data_storage'; +import { GraphicDataBase } from './GraphicDataBase'; + +export class StationData extends GraphicDataBase implements IStationData { + constructor(data?: graphicData.Station) { + let station; + if (!data) { + station = new graphicData.Station({ + common: GraphicDataBase.defaultCommonInfo(), + }); + } else { + station = data; + } + super(station); + } + + public get data(): graphicData.Station { + return this.getData(); + } + get code(): string { + return this.data.code; + } + set code(v: string) { + this.data.code = 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 }); + } + clone(): StationData { + return new StationData(this.data.cloneMessage()); + } + copyFrom(data: StationData): void { + pb_1.Message.copyInto(data.data, this.data); + } + eq(other: StationData): boolean { + return pb_1.Message.equals(this.data, other.data); + } +} diff --git a/src/examples/app/index.ts b/src/examples/app/index.ts index 80fef97..3dcc8f2 100644 --- a/src/examples/app/index.ts +++ b/src/examples/app/index.ts @@ -6,6 +6,8 @@ import { Link } from 'src/graphics/link/Link'; import { LinkDraw } from 'src/graphics/link/LinkDrawAssistant'; import { Platform } from 'src/graphics/platform/Platform'; import { PlatformDraw } from 'src/graphics/platform/PlatformDrawAssistant'; +import { Station } from 'src/graphics/station/Station'; +import { StationDraw } from 'src/graphics/station/StationDrawAssistant'; import { CombinationKey, GraphicApp, @@ -19,6 +21,7 @@ import { MenuItemOptions } from 'src/jlgraphic/ui/Menu'; import { IscsFanData } from './graphics/IscsFanInteraction'; import { LinkData } from './graphics/LinkInteraction'; import { PlatformData } from './graphics/PlatformInteraction'; +import { StationData } from './graphics/StationInteraction'; import { graphicData } from './protos/draw_data_storage'; export function fromStoragePoint(p: graphicData.Point): Point { @@ -100,6 +103,9 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp { new PlatformDraw(app, () => { return new PlatformData(); }), + new StationDraw(app, () => { + return new StationData(); + }), ], }); @@ -145,6 +151,14 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp { }, }) ); + app.addKeyboardListener( + new KeyListener({ + value: 'KeyO', + onPress: () => { + app.interactionPlugin(Station.Type).resume(); + }, + }) + ); app.addKeyboardListener( new KeyListener({ value: '1', @@ -189,6 +203,9 @@ export function saveDrawDatas(app: JlDrawApp) { } else if (Platform.Type === g.type) { const platformData = (g as Platform).saveData(); storage.Platforms.push((platformData as PlatformData).data); + } else if (Station.Type === g.type) { + const stationData = (g as Station).saveData(); + storage.stations.push((stationData as StationData).data); } }); const base64 = fromUint8Array(storage.serialize()); @@ -216,6 +233,9 @@ export function loadDrawDatas(app: GraphicApp) { storage.Platforms.forEach((platform) => { datas.push(new PlatformData(platform)); }); + storage.stations.forEach((station) => { + datas.push(new StationData(station)); + }); app.loadGraphic(datas); } else { app.loadGraphic([]); diff --git a/src/examples/app/protos/draw_data_storage.ts b/src/examples/app/protos/draw_data_storage.ts index f41d891..7690882 100644 --- a/src/examples/app/protos/draw_data_storage.ts +++ b/src/examples/app/protos/draw_data_storage.ts @@ -12,9 +12,10 @@ export namespace graphicData { links?: Link[]; iscsFans?: IscsFan[]; Platforms?: Platform[]; + stations?: Station[]; }) { super(); - pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3, 4], this.#one_of_decls); + pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3, 4, 5], this.#one_of_decls); if (!Array.isArray(data) && typeof data == "object") { if ("canvas" in data && data.canvas != undefined) { this.canvas = data.canvas; @@ -28,6 +29,9 @@ export namespace graphicData { if ("Platforms" in data && data.Platforms != undefined) { this.Platforms = data.Platforms; } + if ("stations" in data && data.stations != undefined) { + this.stations = data.stations; + } } } get canvas() { @@ -57,11 +61,18 @@ export namespace graphicData { set Platforms(value: Platform[]) { pb_1.Message.setRepeatedWrapperField(this, 4, value); } + get stations() { + return pb_1.Message.getRepeatedWrapperField(this, Station, 5) as Station[]; + } + set stations(value: Station[]) { + pb_1.Message.setRepeatedWrapperField(this, 5, value); + } static fromObject(data: { canvas?: ReturnType; links?: ReturnType[]; iscsFans?: ReturnType[]; Platforms?: ReturnType[]; + stations?: ReturnType[]; }): RtssGraphicStorage { const message = new RtssGraphicStorage({}); if (data.canvas != null) { @@ -76,6 +87,9 @@ export namespace graphicData { if (data.Platforms != null) { message.Platforms = data.Platforms.map(item => Platform.fromObject(item)); } + if (data.stations != null) { + message.stations = data.stations.map(item => Station.fromObject(item)); + } return message; } toObject() { @@ -84,6 +98,7 @@ export namespace graphicData { links?: ReturnType[]; iscsFans?: ReturnType[]; Platforms?: ReturnType[]; + stations?: ReturnType[]; } = {}; if (this.canvas != null) { data.canvas = this.canvas.toObject(); @@ -97,6 +112,9 @@ export namespace graphicData { if (this.Platforms != null) { data.Platforms = this.Platforms.map((item: Platform) => item.toObject()); } + if (this.stations != null) { + data.stations = this.stations.map((item: Station) => item.toObject()); + } return data; } serialize(): Uint8Array; @@ -111,6 +129,8 @@ export namespace graphicData { writer.writeRepeatedMessage(3, this.iscsFans, (item: IscsFan) => item.serialize(writer)); if (this.Platforms.length) writer.writeRepeatedMessage(4, this.Platforms, (item: Platform) => item.serialize(writer)); + if (this.stations.length) + writer.writeRepeatedMessage(5, this.stations, (item: Station) => item.serialize(writer)); if (!w) return writer.getResultBuffer(); } @@ -132,6 +152,9 @@ export namespace graphicData { case 4: reader.readMessage(message.Platforms, () => pb_1.Message.addToRepeatedWrapperField(message, 4, Platform.deserialize(reader), Platform)); break; + case 5: + reader.readMessage(message.stations, () => pb_1.Message.addToRepeatedWrapperField(message, 5, Station.deserialize(reader), Station)); + break; default: reader.skipField(); } } @@ -1261,6 +1284,171 @@ export namespace graphicData { return Platform.deserialize(bytes); } } + export class Station extends pb_1.Message { + #one_of_decls: number[][] = []; + constructor(data?: any[] | { + common?: CommonInfo; + code?: string; + codeColor?: string; + codeFontSize?: number; + point?: Point; + }) { + super(); + 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; + } + 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; + } + } + } + get common() { + return pb_1.Message.getWrapperField(this, CommonInfo, 1) as CommonInfo; + } + set common(value: CommonInfo) { + pb_1.Message.setWrapperField(this, 1, value); + } + get has_common() { + return pb_1.Message.getField(this, 1) != null; + } + get code() { + return pb_1.Message.getFieldWithDefault(this, 2, "") as string; + } + 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; + } + static fromObject(data: { + common?: ReturnType; + code?: string; + codeColor?: string; + codeFontSize?: number; + point?: ReturnType; + }): Station { + const message = new Station({}); + if (data.common != null) { + message.common = CommonInfo.fromObject(data.common); + } + 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); + } + return message; + } + toObject() { + const data: { + common?: ReturnType; + code?: string; + codeColor?: string; + codeFontSize?: number; + point?: ReturnType; + } = {}; + if (this.common != null) { + data.common = this.common.toObject(); + } + 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(); + } + return data; + } + serialize(): Uint8Array; + serialize(w: pb_1.BinaryWriter): void; + serialize(w?: pb_1.BinaryWriter): Uint8Array | void { + const writer = w || new pb_1.BinaryWriter(); + if (this.has_common) + 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 (!w) + return writer.getResultBuffer(); + } + static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Station { + const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Station(); + while (reader.nextField()) { + if (reader.isEndGroup()) + break; + switch (reader.getFieldNumber()) { + case 1: + reader.readMessage(message.common, () => message.common = CommonInfo.deserialize(reader)); + break; + 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; + default: reader.skipField(); + } + } + return message; + } + serializeBinary(): Uint8Array { + return this.serialize(); + } + static deserializeBinary(bytes: Uint8Array): Station { + return Station.deserialize(bytes); + } + } export class IscsFan extends pb_1.Message { #one_of_decls: number[][] = []; constructor(data?: any[] | { diff --git a/src/graphics/station/Station.ts b/src/graphics/station/Station.ts new file mode 100644 index 0000000..1b41740 --- /dev/null +++ b/src/graphics/station/Station.ts @@ -0,0 +1,61 @@ +import { IPointData } from 'pixi.js'; +import { + GraphicData, + JlGraphic, + JlGraphicTemplate, + VectorText, +} from 'src/jlgraphic'; + +export interface IStationData extends GraphicData { + get code(): string; // 编号 + set code(v: string); + get codeColor(): string; // 车站字体颜色 + set codeColor(v: string); + get codeFontSize(): number; // 车站字体大小 + set codeFontSize(v: number); + get point(): IPointData; // 位置坐标 + set point(point: IPointData); + clone(): IStationData; + copyFrom(data: IStationData): void; + eq(other: IStationData): boolean; +} + +export class Station extends JlGraphic { + static Type = 'station'; + codeGraph: VectorText = new VectorText(''); //站台旁数字、字符 + constructor() { + super(Station.Type); + this.addChild(this.codeGraph); + this.codeGraph.setVectorFontSize(22); + } + + get datas(): IStationData { + return this.getDatas(); + } + doRepaint(): void { + 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); + codeGraph.anchor.set(0.5); + codeGraph.position.set(this.datas.point.x, this.datas.point.y); + codeGraph.style.fill = this.datas.codeColor; + } +} + +export class StationTemplate extends JlGraphicTemplate { + codeColor: string; + codeFontSize: number; + constructor() { + super(Station.Type); + this.codeColor = '0xF48815'; + this.codeFontSize = 22; + } + new(): Station { + return new Station(); + } +} diff --git a/src/graphics/station/StationDrawAssistant.ts b/src/graphics/station/StationDrawAssistant.ts new file mode 100644 index 0000000..3b991b9 --- /dev/null +++ b/src/graphics/station/StationDrawAssistant.ts @@ -0,0 +1,73 @@ +import { FederatedPointerEvent, Point } from 'pixi.js'; +import { + GraphicDrawAssistant, + JlDrawApp, + KeyListener, + VectorText, +} from 'src/jlgraphic'; + +import { IStationData, Station, StationTemplate } from './Station'; + +export interface IStationDrawOptions { + newData: () => IStationData; +} + +export class StationDraw extends GraphicDrawAssistant< + StationTemplate, + IStationData +> { + point: Point = new Point(0, 0); + codeGraph: VectorText = new VectorText(''); + + // 快捷绘制 + keypListener: KeyListener = new KeyListener({ + value: 'KeyO', + global: true, + onPress: () => { + //this.graphicTemplate.hasdoor = true; + }, + }); + + constructor(app: JlDrawApp, createData: () => IStationData) { + super(app, new StationTemplate(), createData, Station.Type, '车站Station'); + this.container.addChild(this.codeGraph); + this.codeGraph.setVectorFontSize(22); + } + + bind(): void { + super.bind(); + this.app.addKeyboardListener(this.keypListener); + } + unbind(): void { + super.unbind(); + this.app.removeKeyboardListener(this.keypListener); + } + + clearCache(): void { + //this.codeGraph.clear(); + } + onRightClick(): void { + this.createAndStore(true); + } + onLeftDown(e: FederatedPointerEvent): void { + const { x, y } = this.toCanvasCoordinates(e.global); + const p = new Point(x, y); + this.point = p; + this.createAndStore(true); + } + + 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); + } + prepareData(data: IStationData): boolean { + const template = this.graphicTemplate; + data.point = this.point; + data.codeColor = template.codeColor; + data.codeFontSize = template.codeFontSize; + return true; + } +}