joylink/xian-ncc-da-client
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

车站和站台

Browse Source
This commit is contained in:
joylink_zhaoerwei 2023-06-08 11:12:40 +08:00
parent 1cc56d6aff
commit 3179a41e4f
9 changed files with 274 additions and 888 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/draw-app/properties/PlatformProperty.vue
View File

@ -1,39 +1,6 @@
<template>
<q-form>
<q-input outlined readonly v-model="platformModel.id" label="id" hint="" />
<q-input
outlined
v-model.number="platformModel.lineWidth"
type="number"
@blur="onUpdate"
label="线宽"
lazy-rules
:rules="[(val) => (val && val > 0) || '画布宽必须大于0']"
/>
<q-input
outlined
v-model="platformModel.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="platformModel.lineColor"
@change="
(val) => {
platformModel.lineColor = val;
onUpdate();
}
"
/>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
<q-select
outlined
@blur="onUpdate"
@ -44,9 +11,9 @@
<q-select
outlined
@blur="onUpdate"
v-model="trainDirection"
v-model="direction"
:options="optionsDirection"
label="行驶方向"
label="方向"
/>
</q-form>
</template>
@ -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);

107
src/components/draw-app/properties/StationProperty.vue
View File

@ -8,39 +8,6 @@
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-select
outlined
@blur="onUpdate"
@ -74,80 +41,6 @@
</div>
</q-item-section>
</q-item>
<q-input
outlined
v-model.number="stationModel.radius"
type="number"
@blur="onUpdate"
label="半径"
lazy-rules
:rules="[(val) => (val && val > 0) || '半径大小必须大于0']"
/>
<q-input
outlined
v-model="stationModel.fillColor"
@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.fillColor"
@change="
(val) => {
stationModel.fillColor = val;
onUpdate();
}
"
/>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
<q-input
outlined
v-model.number="stationModel.borderWidth"
type="number"
@blur="onUpdate"
label="边框宽度"
lazy-rules
:rules="[(val) => (val && val > 0) || '画布宽必须大于0']"
/>
<q-input
outlined
v-model="stationModel.borderColor"
@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.borderColor"
@change="
(val) => {
stationModel.borderColor = val;
onUpdate();
}
"
/>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
</q-form>
</template>

45
src/drawApp/graphics/PlatformInteraction.ts
View File

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

42
src/drawApp/graphics/StationInteraction.ts
View File

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

324
src/graphics/platform/Platform.ts
View File

@ -1,4 +1,4 @@
import { Color, Graphics, IPointData, Rectangle } from 'pixi.js';
import { Color, 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,238 @@ const platformConsts = {
besideSpacing: 10,
};
export class Platform extends JlGraphic {
static Type = 'Platform';
export interface childJlGraphic extends JlGraphic {
clear(): void;
}
platformGraphic: Graphics;
doorGraphic: Graphics;
doorCloseGraphic: Graphics;
besideGraphic: Graphics;
codeGraph: VectorText = new VectorText(''); //站台旁数字、字符
//子元素--矩形
export class rectGraphic extends JlGraphic {
static Type = 'RectPlatForm';
rectGraphic: Graphics;
constructor() {
super(Platform.Type);
this.platformGraphic = new Graphics();
this.rectGraphic = new Graphics();
this.addChild(this.rectGraphic);
}
doRepaint(): 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 JlGraphic {
static Type = 'Door';
doorGraphic: Graphics;
doorCloseGraphic: Graphics;
constructor() {
super(doorGraphic.Type);
this.doorGraphic = new Graphics();
this.doorCloseGraphic = new Graphics();
this.besideGraphic = new Graphics();
this.addChild(this.platformGraphic);
this.addChild(this.doorGraphic);
this.addChild(this.doorCloseGraphic);
}
doRepaint(): 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 JlGraphic {
static Type = 'Code';
character: VectorText = new VectorText(''); //站台旁字符H或P
characterN: VectorText = new VectorText(''); //站台旁数字
constructor() {
super(codeGraph.Type);
this.addChild(this.character);
this.addChild(this.characterN);
this.character.setVectorFontSize(platformConsts.besideFontSize);
this.characterN.setVectorFontSize(platformConsts.besideFontSize);
}
doRepaint(): 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;
}
}
//子元素--站台旁菱形图标
class besideGraphic extends JlGraphic {
static Type = 'BesideGraphic';
besideGraphic: Graphics;
constructor() {
super(Platform.Type);
this.besideGraphic = new Graphics();
this.addChild(this.besideGraphic);
}
doRepaint(): 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
);
}
}
export class Platform extends JlGraphic {
static Type = 'Platform';
platformGraphic: childJlGraphic;
doorGraphic: childJlGraphic;
besideGraphic: JlGraphic;
codeGraph: JlGraphic;
constructor() {
super(Platform.Type);
this.platformGraphic = new rectGraphic();
this.doorGraphic = new doorGraphic();
this.besideGraphic = new besideGraphic();
this.codeGraph = new codeGraph();
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<IPlatformData>();
}
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.doRepaint();
}
//站台
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.doRepaint();
this.besideGraphic.doRepaint();
this.codeGraph.doRepaint();
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<Platform> {
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();

63
src/graphics/platform/PlatformDrawAssistant.ts
View File

@ -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(
@ -60,44 +60,17 @@ 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.platformGraphic.repaint();
this.doorGraphic.repaint();
this.doorGraphic.position.set(p.x, p.y);
this.platformGraphic.position.set(p.x, p.y);
}
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;
}
}

53
src/graphics/station/Station.ts
View File

@ -11,20 +11,6 @@ export interface IStationData extends GraphicData {
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,9 +18,19 @@ 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(''); //站台旁数字、字符
codeGraph: VectorText = new VectorText(''); //车站名
circleGraphic: Graphics;
constructor() {
super(Station.Type);
@ -48,24 +44,23 @@ export class Station extends JlGraphic {
}
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);
codeGraph.style.fill = stationConsts.codeColor;
codeGraph.setVectorFontSize(stationConsts.codeFontSize);
codeGraph.anchor.set(0.5);
if (this.datas.hasCircle) {
const circleGraphic = this.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,
@ -78,22 +73,12 @@ export class Station extends JlGraphic {
export class StationTemplate extends JlGraphicTemplate<Station> {
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();

8
src/graphics/station/StationDrawAssistant.ts
View File

@ -59,14 +59,8 @@ export class StationDraw extends GraphicDrawAssistant<
}
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;
}

461
src/protos/stationLayoutGraphics.ts
View File

@ -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<typeof CommonInfo.prototype.toObject>;
code?: string;
hasdoor?: boolean;
trainDirection?: string;
lineWidth?: number;
lineColor?: string;
lineColorDoor?: string;
point?: ReturnType<typeof Point.prototype.toObject>;
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<typeof CommonInfo.prototype.toObject>;
code?: string;
hasdoor?: boolean;
trainDirection?: string;
lineWidth?: number;
lineColor?: string;
lineColorDoor?: string;
point?: ReturnType<typeof Point.prototype.toObject>;
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<typeof CommonInfo.prototype.toObject>;
code?: string;
hasCircle?: boolean;
radius?: number;
borderWidth?: number;
borderColor?: string;
fillColor?: string;
codeColor?: string;
codeFontSize?: number;
point?: ReturnType<typeof Point.prototype.toObject>;
circlePoint?: ReturnType<typeof Point.prototype.toObject>;
}): 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<typeof CommonInfo.prototype.toObject>;
code?: string;
hasCircle?: boolean;
radius?: number;
borderWidth?: number;
borderColor?: string;
fillColor?: string;
codeColor?: string;
codeFontSize?: number;
point?: ReturnType<typeof Point.prototype.toObject>;
circlePoint?: ReturnType<typeof Point.prototype.toObject>;
} = {};
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<typeof CommonInfo.prototype.toObject>;
code?: string;
codeColor?: string;
codeFontSize?: number;
point?: ReturnType<typeof Point.prototype.toObject>;
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<typeof CommonInfo.prototype.toObject>;
code?: string;
codeColor?: string;
codeFontSize?: number;
point?: ReturnType<typeof Point.prototype.toObject>;
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();
}
}