joylink/graphic-pixi
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

车站初提交

Browse Source
This commit is contained in:
joylink_zhaoerwei 2023-05-31 17:53:34 +08:00
parent bc443be9a7
commit ae471acea3
9 changed files with 567 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/draw-app/DrawProperties.vue
View File

@ -13,6 +13,9 @@
<template v-if="drawStore.drawGraphicType === Platform.Type">
<platform-template></platform-template>
</template>
<template v-if="drawStore.drawGraphicType === Station.Type">
<station-template></station-template>
</template>
</q-card-section>
</q-card>
</div>
@ -36,6 +39,9 @@
<platform-property
v-if="drawStore.selectedGraphicType === Platform.Type"
></platform-property>
<station-property
v-if="drawStore.selectedGraphicType === Station.Type"
></station-property>
<iscs-fan-property
v-else-if="drawStore.selectedGraphicType === IscsFan.Type"
></iscs-fan-property>
@ -48,12 +54,15 @@
<script setup lang="ts">
import LinkTemplate from './templates/LinkTemplate.vue';
import PlatformTemplate from './templates/PlatformTemplate.vue';
import StationTemplate from './templates/StationTemplate.vue';
import CanvasProperty from './properties/CanvasProperty.vue';
import LinkProperty from './properties/LinkProperty.vue';
import PlatformProperty from './properties/PlatformProperty.vue';
import StationProperty from './properties/StationProperty.vue';
import IscsFanProperty from './properties/IscsFanProperty.vue';
import { Link } from 'src/graphics/link/Link';
import { Platform } from 'src/graphics/platform/Platform';
import { Station } from 'src/graphics/station/Station';
import { useDrawStore } from 'src/stores/draw-store';
import { IscsFan } from 'src/graphics/iscs-fan/IscsFan';

79
src/components/draw-app/properties/StationProperty.vue Normal file
View File

@ -0,0 +1,79 @@
<template>
<q-form>
<q-input outlined readonly v-model="stationModel.id" label="id" hint="" />
<q-input
outlined
label="车站名称"
@blur="onUpdate"
v-model="stationModel.code"
lazy-rules
/>
<q-input
outlined
v-model.number="stationModel.codeFontSize"
type="number"
@blur="onUpdate"
label="字体大小"
lazy-rules
:rules="[(val) => (val && val > 0) || '画布宽必须大于0']"
/>
<q-input
outlined
v-model="stationModel.codeColor"
@blur="onUpdate"
label="字体颜色"
lazy-rules
:rules="[(val) => (val && val.length > 0) || '线色不能为空']"
>
<template v-slot:append>
<q-icon name="colorize" class="cursor-pointer">
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
<q-color
v-model="stationModel.codeColor"
@change="
(val) => {
stationModel.codeColor = val;
onUpdate();
}
"
/>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</q-form>
</template>
<script setup lang="ts">
import { StationData } from 'src/examples/app/graphics/StationInteraction';
import { Station } from 'src/graphics/station/Station';
import { useDrawStore } from 'src/stores/draw-store';
import { onMounted, reactive, watch } from 'vue';
const drawStore = useDrawStore();
const stationModel = reactive(new StationData());
drawStore.$subscribe;
watch(
() => drawStore.selectedGraphic,
(val) => {
if (val && val.type == Station.Type) {
stationModel.copyFrom(val.saveData() as StationData);
}
}
);
onMounted(() => {
const station = drawStore.selectedGraphic as Station;
if (station) {
stationModel.copyFrom(station.saveData());
}
});
function onUpdate() {
const station = drawStore.selectedGraphic as Station;
if (station) {
drawStore.getDrawApp().updateGraphicAndRecord(station, stationModel);
}
}
</script>

70
src/components/draw-app/templates/StationTemplate.vue Normal file
View File

@ -0,0 +1,70 @@
<template>
<q-form>
<q-input
outlined
v-model.number="template.lineWidth"
type="number"
@blur="onUpdate"
label="字体大小 *"
lazy-rules
:rules="[(val) => (val && val > 0) || '线宽必须大于0']"
/>
<q-input
outlined
v-model="template.lineColor"
@blur="onUpdate"
label="字体颜色 *"
lazy-rules
:rules="[(val) => (val && val.length > 0) || '线色不能为空']"
>
<template v-slot:append>
<q-icon name="colorize" class="cursor-pointer">
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
<q-color
v-model="template.lineColor"
@change="
(val) => {
template.lineColor = val;
onUpdate();
}
"
/>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</q-form>
</template>
<script setup lang="ts">
import { LinkTemplate } from 'src/graphics/link/Link';
import { useDrawStore } from 'src/stores/draw-store';
import { onMounted, reactive } from 'vue';
const drawStore = useDrawStore();
const template = reactive({
lineWidth: 1,
lineColor: '#0000ff',
});
onMounted(() => {
const type = drawStore.drawGraphicType;
if (type) {
const gt = drawStore.drawGraphicTemplate;
if (gt) {
const lt = gt as LinkTemplate;
template.lineWidth = lt.lineWidth;
template.lineColor = lt.lineColor;
}
}
});
function onUpdate() {
const gt = drawStore.drawGraphicTemplate as LinkTemplate;
if (gt) {
gt.lineWidth = template.lineWidth;
gt.lineColor = template.lineColor;
}
}
</script>

10
src/examples/app/app_message/protos/draw_data_storage.proto
View File

@ -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;

56
src/examples/app/graphics/StationInteraction.ts Normal file
View File

@ -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<graphicData.Station>();
}
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);
}
}

20
src/examples/app/index.ts
View File

@ -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([]);

190
src/examples/app/protos/draw_data_storage.ts
View File

@ -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<typeof Canvas.prototype.toObject>;
links?: ReturnType<typeof Link.prototype.toObject>[];
iscsFans?: ReturnType<typeof IscsFan.prototype.toObject>[];
Platforms?: ReturnType<typeof Platform.prototype.toObject>[];
stations?: ReturnType<typeof Station.prototype.toObject>[];
}): 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<typeof Link.prototype.toObject>[];
iscsFans?: ReturnType<typeof IscsFan.prototype.toObject>[];
Platforms?: ReturnType<typeof Platform.prototype.toObject>[];
stations?: ReturnType<typeof Station.prototype.toObject>[];
} = {};
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<typeof CommonInfo.prototype.toObject>;
code?: string;
codeColor?: string;
codeFontSize?: number;
point?: ReturnType<typeof Point.prototype.toObject>;
}): 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<typeof CommonInfo.prototype.toObject>;
code?: string;
codeColor?: string;
codeFontSize?: number;
point?: ReturnType<typeof Point.prototype.toObject>;
} = {};
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[] | {

61
src/graphics/station/Station.ts Normal file
View File

@ -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<IStationData>();
}
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<Station> {
codeColor: string;
codeFontSize: number;
constructor() {
super(Station.Type);
this.codeColor = '0xF48815';
this.codeFontSize = 22;
}
new(): Station {
return new Station();
}
}

73
src/graphics/station/StationDrawAssistant.ts Normal file
View File

@ -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;
}
}