Merge branch 'master' of https://git.code.tencent.com/jl-framework/rt-graphic-component
This commit is contained in:
commit
f45fba3005
12
components/common/CommonGraphics.d.ts
vendored
Normal file
12
components/common/CommonGraphics.d.ts
vendored
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { Graphics } from 'pixi.js';
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param polygon
|
||||||
|
* @param x 箭头顶点x坐标
|
||||||
|
* @param y 箭头顶点y坐标
|
||||||
|
* @param length 箭头长度
|
||||||
|
* @param radius 箭头三角半径
|
||||||
|
* @param lineWidth 箭头线宽
|
||||||
|
* @param mirror 是否镜像翻转 (基于箭头顶点)
|
||||||
|
*/
|
||||||
|
export declare function drawArrow(polygon: Graphics, x: number, y: number, length: number, radius: number, lineWidth: number, mirror: boolean): void;
|
6
components/common/common.d.ts
vendored
6
components/common/common.d.ts
vendored
@ -36,6 +36,12 @@ export interface KilometerSystem {
|
|||||||
get direction(): Direction;
|
get direction(): Direction;
|
||||||
set direction(v: Direction);
|
set direction(v: Direction);
|
||||||
}
|
}
|
||||||
|
export interface KilometerSystemNoDir {
|
||||||
|
get coordinateSystem(): string;
|
||||||
|
set coordinateSystem(v: string);
|
||||||
|
get kilometer(): number;
|
||||||
|
set kilometer(v: number);
|
||||||
|
}
|
||||||
export interface IRelatedRef {
|
export interface IRelatedRef {
|
||||||
deviceType: DeviceType;
|
deviceType: DeviceType;
|
||||||
id: number;
|
id: number;
|
||||||
|
6
components/packages/Platform/THPlatform.d.ts
vendored
6
components/packages/Platform/THPlatform.d.ts
vendored
@ -1,5 +1,5 @@
|
|||||||
import { GraphicState } from 'jl-graphic';
|
import { GraphicState } from 'jl-graphic';
|
||||||
import { JlPlatform, DoorCodeLozenge } from './common/JlPlatform';
|
import { JlPlatform, DoorGraphic, LozengeGraphic, CodeGraphic } from './common/JlPlatform';
|
||||||
export interface ITHPlatformState extends GraphicState {
|
export interface ITHPlatformState extends GraphicState {
|
||||||
get emergstop(): boolean;
|
get emergstop(): boolean;
|
||||||
set emergstop(v: boolean);
|
set emergstop(v: boolean);
|
||||||
@ -37,7 +37,9 @@ export interface ITHPlatformState extends GraphicState {
|
|||||||
set rtuId(v: number);
|
set rtuId(v: number);
|
||||||
}
|
}
|
||||||
export declare class THPlatform extends JlPlatform {
|
export declare class THPlatform extends JlPlatform {
|
||||||
doorCodeLozenge: DoorCodeLozenge;
|
doorGraphic: DoorGraphic;
|
||||||
|
codeGraphic: CodeGraphic;
|
||||||
|
lozengeGraphic: LozengeGraphic;
|
||||||
constructor();
|
constructor();
|
||||||
get states(): ITHPlatformState;
|
get states(): ITHPlatformState;
|
||||||
doRepaint(): void;
|
doRepaint(): void;
|
||||||
|
@ -1,13 +1,19 @@
|
|||||||
import { THConsts } from './common/PlatformConfig.js';
|
import { THConsts } from './common/PlatformConfig.js';
|
||||||
import { JlPlatform, DoorCodeLozenge } from './common/JlPlatform.js';
|
import { JlPlatform, DoorGraphic, CodeGraphic, LozengeGraphic } from './common/JlPlatform.js';
|
||||||
import { THStation } from '../Station/THStation.js';
|
import { THStation } from '../Station/THStation.js';
|
||||||
|
|
||||||
class THPlatform extends JlPlatform {
|
class THPlatform extends JlPlatform {
|
||||||
doorCodeLozenge;
|
doorGraphic;
|
||||||
|
codeGraphic;
|
||||||
|
lozengeGraphic;
|
||||||
constructor() {
|
constructor() {
|
||||||
super(THConsts);
|
super(THConsts);
|
||||||
this.doorCodeLozenge = new DoorCodeLozenge(THConsts);
|
this.doorGraphic = new DoorGraphic(THConsts);
|
||||||
this.addChild(this.doorCodeLozenge);
|
this.addChild(this.doorGraphic);
|
||||||
|
this.codeGraphic = new CodeGraphic(THConsts);
|
||||||
|
this.addChild(this.codeGraphic);
|
||||||
|
this.lozengeGraphic = new LozengeGraphic(THConsts);
|
||||||
|
this.addChild(this.lozengeGraphic);
|
||||||
}
|
}
|
||||||
get states() {
|
get states() {
|
||||||
return this.getStates();
|
return this.getStates();
|
||||||
@ -23,7 +29,7 @@ class THPlatform extends JlPlatform {
|
|||||||
const station = this.getGraphicApp().queryStore.queryByCodeAndType(this.states.rtuId > 9
|
const station = this.getGraphicApp().queryStore.queryByCodeAndType(this.states.rtuId > 9
|
||||||
? '' + this.states.rtuId
|
? '' + this.states.rtuId
|
||||||
: '0' + this.states.rtuId, THStation.Type);
|
: '0' + this.states.rtuId, THStation.Type);
|
||||||
const doorGraphic = this.doorCodeLozenge.doorGraphic;
|
const doorGraphic = this.doorGraphic;
|
||||||
doorGraphic.stateFillColor = THConsts.doorGraphic.doorGreen;
|
doorGraphic.stateFillColor = THConsts.doorGraphic.doorGreen;
|
||||||
if (!!station?.states.ipRtuStusDown) {
|
if (!!station?.states.ipRtuStusDown) {
|
||||||
doorGraphic.stateFillColor = THConsts.doorGraphic.doorBlue;
|
doorGraphic.stateFillColor = THConsts.doorGraphic.doorBlue;
|
||||||
@ -32,7 +38,14 @@ class THPlatform extends JlPlatform {
|
|||||||
doorGraphic.stateFillColor = THConsts.doorGraphic.doorRed;
|
doorGraphic.stateFillColor = THConsts.doorGraphic.doorRed;
|
||||||
}
|
}
|
||||||
super.draw();
|
super.draw();
|
||||||
this.doorCodeLozenge.draw(this.datas.hasdoor, this.datas.direction);
|
this.doorGraphic.draw();
|
||||||
|
this.codeGraphic.draw();
|
||||||
|
this.lozengeGraphic.draw();
|
||||||
|
if (this.datas.direction == 'down') {
|
||||||
|
this.doorGraphic.changePosition(this.position);
|
||||||
|
this.codeGraphic.changePosition(this.position);
|
||||||
|
this.lozengeGraphic.changePosition(this.position);
|
||||||
|
}
|
||||||
//门的状态
|
//门的状态
|
||||||
if (this.datas.hasdoor) {
|
if (this.datas.hasdoor) {
|
||||||
if (this.states.psdOpen) {
|
if (this.states.psdOpen) {
|
||||||
@ -43,13 +56,13 @@ class THPlatform extends JlPlatform {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (this.states.emergstop) {
|
if (this.states.emergstop) {
|
||||||
this.doorCodeLozenge.lozengeGraphic.lozenge.visible = true;
|
this.lozengeGraphic.lozenge.visible = true;
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
this.doorCodeLozenge.lozengeGraphic.lozenge.visible = false;
|
this.lozengeGraphic.lozenge.visible = false;
|
||||||
}
|
}
|
||||||
//扣车
|
//扣车
|
||||||
const codeGraphic = this.doorCodeLozenge.codeGraphic;
|
const codeGraphic = this.codeGraphic;
|
||||||
if (this.states.upHold ||
|
if (this.states.upHold ||
|
||||||
this.states.upOccHold ||
|
this.states.upOccHold ||
|
||||||
this.states.downHold ||
|
this.states.downHold ||
|
||||||
|
@ -1,35 +1,42 @@
|
|||||||
import { JlGraphic, VectorText } from 'jl-graphic';
|
import { JlGraphic, VectorText } from 'jl-graphic';
|
||||||
import { Container, Graphics } from 'pixi.js';
|
import { Container, Graphics, IPointData } from 'pixi.js';
|
||||||
import { IPlatformData, PlatformConstsConfig } from './PlatformConfig';
|
import { IPlatformData, PlatformConstsConfig } from './PlatformConfig';
|
||||||
declare class RectGraphic extends Container {
|
declare class RectGraphic extends Container {
|
||||||
|
platformConsts: PlatformConstsConfig;
|
||||||
rect: Graphics;
|
rect: Graphics;
|
||||||
stateFillColor?: string;
|
stateFillColor?: string;
|
||||||
constructor();
|
constructor(platformConsts: PlatformConstsConfig);
|
||||||
draw(platformConsts: PlatformConstsConfig): void;
|
draw(): void;
|
||||||
clear(): void;
|
clear(): void;
|
||||||
}
|
}
|
||||||
declare class DoorGraphic extends Container {
|
export declare class DoorGraphic extends Container {
|
||||||
|
platformConsts: PlatformConstsConfig;
|
||||||
doorGraphic: Graphics;
|
doorGraphic: Graphics;
|
||||||
doorCloseGraphic: Graphics;
|
doorCloseGraphic: Graphics;
|
||||||
stateFillColor?: string;
|
stateFillColor?: string;
|
||||||
constructor();
|
constructor(platformConsts: PlatformConstsConfig);
|
||||||
draw(platformConsts: PlatformConstsConfig): void;
|
draw(): void;
|
||||||
|
changePosition(platformPos: IPointData): void;
|
||||||
clear(): void;
|
clear(): void;
|
||||||
}
|
}
|
||||||
declare class CodeGraphic extends Container {
|
export declare class CodeGraphic extends Container {
|
||||||
|
platformConsts: PlatformConstsConfig;
|
||||||
character: VectorText;
|
character: VectorText;
|
||||||
runLevel: VectorText;
|
runLevel: VectorText;
|
||||||
runTime: VectorText;
|
runTime: VectorText;
|
||||||
stopTime: VectorText;
|
stopTime: VectorText;
|
||||||
circle: Graphics;
|
circle: Graphics;
|
||||||
constructor(platformConsts: PlatformConstsConfig);
|
constructor(platformConsts: PlatformConstsConfig);
|
||||||
draw(platformConsts: PlatformConstsConfig): void;
|
draw(): void;
|
||||||
|
changePosition(platformPos: IPointData): void;
|
||||||
clear(): void;
|
clear(): void;
|
||||||
}
|
}
|
||||||
declare class LozengeGraphic extends Container {
|
export declare class LozengeGraphic extends Container {
|
||||||
|
platformConsts: PlatformConstsConfig;
|
||||||
lozenge: Graphics;
|
lozenge: Graphics;
|
||||||
constructor();
|
constructor(platformConsts: PlatformConstsConfig);
|
||||||
draw(platformConsts: PlatformConstsConfig): void;
|
draw(): void;
|
||||||
|
changePosition(platformPos: IPointData): void;
|
||||||
clear(): void;
|
clear(): void;
|
||||||
}
|
}
|
||||||
export declare class DoorCodeLozenge extends Container {
|
export declare class DoorCodeLozenge extends Container {
|
||||||
@ -38,7 +45,7 @@ export declare class DoorCodeLozenge extends Container {
|
|||||||
lozengeGraphic: LozengeGraphic;
|
lozengeGraphic: LozengeGraphic;
|
||||||
codeGraphic: CodeGraphic;
|
codeGraphic: CodeGraphic;
|
||||||
constructor(platformConsts: PlatformConstsConfig);
|
constructor(platformConsts: PlatformConstsConfig);
|
||||||
draw(hasDoor: boolean, direction: string): void;
|
draw(hasDoor: boolean, direction: string, platformPos: IPointData): void;
|
||||||
}
|
}
|
||||||
export declare abstract class JlPlatform extends JlGraphic {
|
export declare abstract class JlPlatform extends JlGraphic {
|
||||||
static Type: string;
|
static Type: string;
|
||||||
|
@ -1,18 +1,21 @@
|
|||||||
import { calculateMirrorPoint, JlGraphic, distance2, getRectangleCenter, VectorText } from 'jl-graphic';
|
import { calculateMirrorPoint, VectorText, getRectangleCenter, JlGraphic, distance2 } from 'jl-graphic';
|
||||||
import { Container, Point, Graphics, Color, Rectangle } from 'pixi.js';
|
import { Container, Graphics, Color, Point, Rectangle } from 'pixi.js';
|
||||||
import { JlSection } from '../../Section/common/Section.js';
|
import { JlSection } from '../../Section/common/Section.js';
|
||||||
import { JlStation } from '../../Station/common/JlStation.js';
|
import { JlStation } from '../../Station/common/JlStation.js';
|
||||||
|
|
||||||
//子元素--矩形
|
//子元素--矩形
|
||||||
class RectGraphic extends Container {
|
class RectGraphic extends Container {
|
||||||
|
platformConsts;
|
||||||
rect;
|
rect;
|
||||||
stateFillColor;
|
stateFillColor;
|
||||||
constructor() {
|
constructor(platformConsts) {
|
||||||
super();
|
super();
|
||||||
|
this.platformConsts = platformConsts;
|
||||||
this.rect = new Graphics();
|
this.rect = new Graphics();
|
||||||
this.addChild(this.rect);
|
this.addChild(this.rect);
|
||||||
}
|
}
|
||||||
draw(platformConsts) {
|
draw() {
|
||||||
|
const platformConsts = this.platformConsts;
|
||||||
const rect = this.rect;
|
const rect = this.rect;
|
||||||
const fillColor = this.stateFillColor || platformConsts.noTrainStop;
|
const fillColor = this.stateFillColor || platformConsts.noTrainStop;
|
||||||
rect
|
rect
|
||||||
@ -28,17 +31,20 @@ class RectGraphic extends Container {
|
|||||||
}
|
}
|
||||||
//子元素--门
|
//子元素--门
|
||||||
class DoorGraphic extends Container {
|
class DoorGraphic extends Container {
|
||||||
|
platformConsts;
|
||||||
doorGraphic;
|
doorGraphic;
|
||||||
doorCloseGraphic;
|
doorCloseGraphic;
|
||||||
stateFillColor;
|
stateFillColor;
|
||||||
constructor() {
|
constructor(platformConsts) {
|
||||||
super();
|
super();
|
||||||
|
this.platformConsts = platformConsts;
|
||||||
this.doorGraphic = new Graphics();
|
this.doorGraphic = new Graphics();
|
||||||
this.doorCloseGraphic = new Graphics();
|
this.doorCloseGraphic = new Graphics();
|
||||||
this.addChild(this.doorGraphic);
|
this.addChild(this.doorGraphic);
|
||||||
this.addChild(this.doorCloseGraphic);
|
this.addChild(this.doorCloseGraphic);
|
||||||
}
|
}
|
||||||
draw(platformConsts) {
|
draw() {
|
||||||
|
const platformConsts = this.platformConsts;
|
||||||
const doorConsts = platformConsts.doorGraphic;
|
const doorConsts = platformConsts.doorGraphic;
|
||||||
const doorGraphic = this.doorGraphic;
|
const doorGraphic = this.doorGraphic;
|
||||||
const doorCloseGraphic = this.doorCloseGraphic;
|
const doorCloseGraphic = this.doorCloseGraphic;
|
||||||
@ -56,6 +62,10 @@ class DoorGraphic extends Container {
|
|||||||
.lineStyle(platformConsts.lineWidth, new Color(lineColor))
|
.lineStyle(platformConsts.lineWidth, new Color(lineColor))
|
||||||
.moveTo(-doorConsts.doorOpenSpacing, 0)
|
.moveTo(-doorConsts.doorOpenSpacing, 0)
|
||||||
.lineTo(doorConsts.doorOpenSpacing, 0);
|
.lineTo(doorConsts.doorOpenSpacing, 0);
|
||||||
|
this.position.set(0, -platformConsts.height / 2 - doorConsts.doorPlatformSpacing);
|
||||||
|
}
|
||||||
|
changePosition(platformPos) {
|
||||||
|
this.position.copyFrom(calculateMirrorPoint(new Point(0, 0), platformPos));
|
||||||
}
|
}
|
||||||
clear() {
|
clear() {
|
||||||
this.doorGraphic.clear();
|
this.doorGraphic.clear();
|
||||||
@ -64,6 +74,7 @@ class DoorGraphic extends Container {
|
|||||||
}
|
}
|
||||||
//子元素--字符
|
//子元素--字符
|
||||||
class CodeGraphic extends Container {
|
class CodeGraphic extends Container {
|
||||||
|
platformConsts;
|
||||||
character = new VectorText(''); //扣车H
|
character = new VectorText(''); //扣车H
|
||||||
runLevel = new VectorText(''); //运行等级
|
runLevel = new VectorText(''); //运行等级
|
||||||
runTime = new VectorText(''); //运行时间
|
runTime = new VectorText(''); //运行时间
|
||||||
@ -71,6 +82,7 @@ class CodeGraphic extends Container {
|
|||||||
circle = new Graphics();
|
circle = new Graphics();
|
||||||
constructor(platformConsts) {
|
constructor(platformConsts) {
|
||||||
super();
|
super();
|
||||||
|
this.platformConsts = platformConsts;
|
||||||
this.addChild(this.character);
|
this.addChild(this.character);
|
||||||
this.addChild(this.runLevel);
|
this.addChild(this.runLevel);
|
||||||
this.addChild(this.circle);
|
this.addChild(this.circle);
|
||||||
@ -82,8 +94,9 @@ class CodeGraphic extends Container {
|
|||||||
this.stopTime.setVectorFontSize(codeConsts.besideFontSize);
|
this.stopTime.setVectorFontSize(codeConsts.besideFontSize);
|
||||||
this.runTime.setVectorFontSize(codeConsts.besideFontSize);
|
this.runTime.setVectorFontSize(codeConsts.besideFontSize);
|
||||||
}
|
}
|
||||||
draw(platformConsts) {
|
draw() {
|
||||||
const codeConsts = platformConsts.codeGraphic;
|
const platformConsts = this.platformConsts;
|
||||||
|
const codeConsts = this.platformConsts.codeGraphic;
|
||||||
//扣车
|
//扣车
|
||||||
const character = this.character;
|
const character = this.character;
|
||||||
character.text = 'H';
|
character.text = 'H';
|
||||||
@ -126,6 +139,25 @@ class CodeGraphic extends Container {
|
|||||||
runLevel.visible = false;
|
runLevel.visible = false;
|
||||||
stopTime.visible = false;
|
stopTime.visible = false;
|
||||||
runTime.visible = false;
|
runTime.visible = false;
|
||||||
|
this.position.set(0, 0);
|
||||||
|
}
|
||||||
|
changePosition(platformPos) {
|
||||||
|
const platformConsts = this.platformConsts;
|
||||||
|
const codeConsts = platformConsts.codeGraphic;
|
||||||
|
const psChange = [
|
||||||
|
this.character,
|
||||||
|
this.runLevel,
|
||||||
|
this.stopTime,
|
||||||
|
this.runTime,
|
||||||
|
];
|
||||||
|
psChange.forEach((g) => {
|
||||||
|
if (g) {
|
||||||
|
g.position.copyFrom(calculateMirrorPoint(new Point(0, 0), platformPos));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.circle.position.set(platformConsts.width / 2 +
|
||||||
|
platformConsts.lineWidth / 2 +
|
||||||
|
(codeConsts.besideSpacing * 4) / 3, (-platformConsts.height * 10) / 11);
|
||||||
}
|
}
|
||||||
clear() {
|
clear() {
|
||||||
this.character.destroy();
|
this.character.destroy();
|
||||||
@ -133,13 +165,16 @@ class CodeGraphic extends Container {
|
|||||||
}
|
}
|
||||||
//子元素--站台旁菱形图标
|
//子元素--站台旁菱形图标
|
||||||
class LozengeGraphic extends Container {
|
class LozengeGraphic extends Container {
|
||||||
|
platformConsts;
|
||||||
lozenge;
|
lozenge;
|
||||||
constructor() {
|
constructor(platformConsts) {
|
||||||
super();
|
super();
|
||||||
|
this.platformConsts = platformConsts;
|
||||||
this.lozenge = new Graphics();
|
this.lozenge = new Graphics();
|
||||||
this.addChild(this.lozenge);
|
this.addChild(this.lozenge);
|
||||||
}
|
}
|
||||||
draw(platformConsts) {
|
draw() {
|
||||||
|
const platformConsts = this.platformConsts;
|
||||||
const LozengeConsts = platformConsts.lozengeGraphic;
|
const LozengeConsts = platformConsts.lozengeGraphic;
|
||||||
const lozenge = this.lozenge;
|
const lozenge = this.lozenge;
|
||||||
lozenge
|
lozenge
|
||||||
@ -152,6 +187,12 @@ class LozengeGraphic extends Container {
|
|||||||
lozenge.pivot = getRectangleCenter(rect);
|
lozenge.pivot = getRectangleCenter(rect);
|
||||||
lozenge.rotation = Math.PI / 4;
|
lozenge.rotation = Math.PI / 4;
|
||||||
lozenge.visible = false;
|
lozenge.visible = false;
|
||||||
|
this.position.set(0, -platformConsts.height / 2 -
|
||||||
|
LozengeConsts.doorPlatformSpacing -
|
||||||
|
platformConsts.height / 3);
|
||||||
|
}
|
||||||
|
changePosition(platformPos) {
|
||||||
|
this.position.copyFrom(calculateMirrorPoint(new Point(0, 0), platformPos));
|
||||||
}
|
}
|
||||||
clear() {
|
clear() {
|
||||||
this.lozenge.clear();
|
this.lozenge.clear();
|
||||||
@ -165,46 +206,24 @@ class DoorCodeLozenge extends Container {
|
|||||||
constructor(platformConsts) {
|
constructor(platformConsts) {
|
||||||
super();
|
super();
|
||||||
this.platformConsts = platformConsts;
|
this.platformConsts = platformConsts;
|
||||||
this.doorGraphic = new DoorGraphic();
|
this.doorGraphic = new DoorGraphic(this.platformConsts);
|
||||||
this.addChild(this.doorGraphic);
|
this.addChild(this.doorGraphic);
|
||||||
this.lozengeGraphic = new LozengeGraphic();
|
this.lozengeGraphic = new LozengeGraphic(this.platformConsts);
|
||||||
this.addChild(this.lozengeGraphic);
|
this.addChild(this.lozengeGraphic);
|
||||||
this.codeGraphic = new CodeGraphic(this.platformConsts);
|
this.codeGraphic = new CodeGraphic(this.platformConsts);
|
||||||
this.addChild(this.codeGraphic);
|
this.addChild(this.codeGraphic);
|
||||||
}
|
}
|
||||||
draw(hasDoor, direction) {
|
draw(hasDoor, direction, platformPos) {
|
||||||
const platformConsts = this.platformConsts;
|
|
||||||
this.doorGraphic.clear();
|
this.doorGraphic.clear();
|
||||||
if (hasDoor) {
|
if (hasDoor) {
|
||||||
const doorConsts = platformConsts.doorGraphic;
|
this.doorGraphic.draw();
|
||||||
this.doorGraphic.draw(platformConsts);
|
|
||||||
this.doorGraphic.position.set(0, -platformConsts.height / 2 - doorConsts.doorPlatformSpacing);
|
|
||||||
}
|
}
|
||||||
const codeConsts = platformConsts.codeGraphic;
|
this.codeGraphic.draw();
|
||||||
this.codeGraphic.draw(platformConsts);
|
this.lozengeGraphic.draw();
|
||||||
this.codeGraphic.position.set(0, 0);
|
|
||||||
const LozengeConsts = platformConsts.lozengeGraphic;
|
|
||||||
this.lozengeGraphic.draw(platformConsts);
|
|
||||||
this.lozengeGraphic.position.set(0, -platformConsts.height / 2 -
|
|
||||||
LozengeConsts.doorPlatformSpacing -
|
|
||||||
platformConsts.height / 3);
|
|
||||||
if (direction == 'down') {
|
if (direction == 'down') {
|
||||||
this.doorGraphic.position.copyFrom(calculateMirrorPoint(new Point(0, 0), this.doorGraphic.position));
|
this.doorGraphic.changePosition(platformPos);
|
||||||
this.lozengeGraphic.position.copyFrom(calculateMirrorPoint(new Point(0, 0), this.lozengeGraphic.position));
|
this.codeGraphic.changePosition(platformPos);
|
||||||
const psChange = [
|
this.lozengeGraphic.changePosition(platformPos);
|
||||||
this.codeGraphic.character,
|
|
||||||
this.codeGraphic.runLevel,
|
|
||||||
this.codeGraphic.stopTime,
|
|
||||||
this.codeGraphic.runTime,
|
|
||||||
];
|
|
||||||
psChange.forEach((g) => {
|
|
||||||
if (g) {
|
|
||||||
g.position.copyFrom(calculateMirrorPoint(new Point(0, 0), g.position));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.codeGraphic.circle.position.set(platformConsts.width / 2 +
|
|
||||||
platformConsts.lineWidth / 2 +
|
|
||||||
(codeConsts.besideSpacing * 4) / 3, (-platformConsts.height * 10) / 11);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -215,7 +234,7 @@ class JlPlatform extends JlGraphic {
|
|||||||
constructor(platformConsts) {
|
constructor(platformConsts) {
|
||||||
super(JlPlatform.Type);
|
super(JlPlatform.Type);
|
||||||
this.platformConsts = platformConsts;
|
this.platformConsts = platformConsts;
|
||||||
this.rectGraphic = new RectGraphic();
|
this.rectGraphic = new RectGraphic(this.platformConsts);
|
||||||
this.addChild(this.rectGraphic);
|
this.addChild(this.rectGraphic);
|
||||||
}
|
}
|
||||||
get datas() {
|
get datas() {
|
||||||
@ -225,7 +244,7 @@ class JlPlatform extends JlGraphic {
|
|||||||
return this.datas.code;
|
return this.datas.code;
|
||||||
}
|
}
|
||||||
draw() {
|
draw() {
|
||||||
this.rectGraphic.draw(this.platformConsts);
|
this.rectGraphic.draw();
|
||||||
}
|
}
|
||||||
buildCommonRelation() {
|
buildCommonRelation() {
|
||||||
const stationas = this.queryStore.queryByType(JlStation.Type);
|
const stationas = this.queryStore.queryByType(JlStation.Type);
|
||||||
@ -279,4 +298,4 @@ class JlPlatform extends JlGraphic {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export { DoorCodeLozenge, JlPlatform };
|
export { CodeGraphic, DoorCodeLozenge, DoorGraphic, JlPlatform, LozengeGraphic };
|
||||||
|
@ -1,6 +1,11 @@
|
|||||||
import { GraphicState } from 'jl-graphic';
|
import { GraphicState } from 'jl-graphic';
|
||||||
import { THConsts } from './common/PlatformConfig';
|
import { THConsts } from './common/PlatformConfig';
|
||||||
import { JlPlatform, DoorCodeLozenge } from './common/JlPlatform';
|
import {
|
||||||
|
JlPlatform,
|
||||||
|
DoorGraphic,
|
||||||
|
LozengeGraphic,
|
||||||
|
CodeGraphic,
|
||||||
|
} from './common/JlPlatform';
|
||||||
import { THStation } from '../Station/THStation';
|
import { THStation } from '../Station/THStation';
|
||||||
|
|
||||||
export interface ITHPlatformState extends GraphicState {
|
export interface ITHPlatformState extends GraphicState {
|
||||||
@ -41,11 +46,17 @@ export interface ITHPlatformState extends GraphicState {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export class THPlatform extends JlPlatform {
|
export class THPlatform extends JlPlatform {
|
||||||
doorCodeLozenge: DoorCodeLozenge;
|
doorGraphic: DoorGraphic;
|
||||||
|
codeGraphic: CodeGraphic;
|
||||||
|
lozengeGraphic: LozengeGraphic;
|
||||||
constructor() {
|
constructor() {
|
||||||
super(THConsts);
|
super(THConsts);
|
||||||
this.doorCodeLozenge = new DoorCodeLozenge(THConsts);
|
this.doorGraphic = new DoorGraphic(THConsts);
|
||||||
this.addChild(this.doorCodeLozenge);
|
this.addChild(this.doorGraphic);
|
||||||
|
this.codeGraphic = new CodeGraphic(THConsts);
|
||||||
|
this.addChild(this.codeGraphic);
|
||||||
|
this.lozengeGraphic = new LozengeGraphic(THConsts);
|
||||||
|
this.addChild(this.lozengeGraphic);
|
||||||
}
|
}
|
||||||
get states(): ITHPlatformState {
|
get states(): ITHPlatformState {
|
||||||
return this.getStates<ITHPlatformState>();
|
return this.getStates<ITHPlatformState>();
|
||||||
@ -65,7 +76,7 @@ export class THPlatform extends JlPlatform {
|
|||||||
: '0' + this.states.rtuId,
|
: '0' + this.states.rtuId,
|
||||||
THStation.Type,
|
THStation.Type,
|
||||||
);
|
);
|
||||||
const doorGraphic = this.doorCodeLozenge.doorGraphic;
|
const doorGraphic = this.doorGraphic;
|
||||||
doorGraphic.stateFillColor = THConsts.doorGraphic.doorGreen;
|
doorGraphic.stateFillColor = THConsts.doorGraphic.doorGreen;
|
||||||
if (!!station?.states.ipRtuStusDown) {
|
if (!!station?.states.ipRtuStusDown) {
|
||||||
doorGraphic.stateFillColor = THConsts.doorGraphic.doorBlue;
|
doorGraphic.stateFillColor = THConsts.doorGraphic.doorBlue;
|
||||||
@ -73,10 +84,14 @@ export class THPlatform extends JlPlatform {
|
|||||||
doorGraphic.stateFillColor = THConsts.doorGraphic.doorRed;
|
doorGraphic.stateFillColor = THConsts.doorGraphic.doorRed;
|
||||||
}
|
}
|
||||||
super.draw();
|
super.draw();
|
||||||
this.doorCodeLozenge.draw(
|
this.doorGraphic.draw();
|
||||||
this.datas.hasdoor as boolean,
|
this.codeGraphic.draw();
|
||||||
this.datas.direction as string,
|
this.lozengeGraphic.draw();
|
||||||
);
|
if (this.datas.direction == 'down') {
|
||||||
|
this.doorGraphic.changePosition(this.position);
|
||||||
|
this.codeGraphic.changePosition(this.position);
|
||||||
|
this.lozengeGraphic.changePosition(this.position);
|
||||||
|
}
|
||||||
//门的状态
|
//门的状态
|
||||||
if (this.datas.hasdoor) {
|
if (this.datas.hasdoor) {
|
||||||
if (this.states.psdOpen) {
|
if (this.states.psdOpen) {
|
||||||
@ -86,12 +101,12 @@ export class THPlatform extends JlPlatform {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (this.states.emergstop) {
|
if (this.states.emergstop) {
|
||||||
this.doorCodeLozenge.lozengeGraphic.lozenge.visible = true;
|
this.lozengeGraphic.lozenge.visible = true;
|
||||||
} else {
|
} else {
|
||||||
this.doorCodeLozenge.lozengeGraphic.lozenge.visible = false;
|
this.lozengeGraphic.lozenge.visible = false;
|
||||||
}
|
}
|
||||||
//扣车
|
//扣车
|
||||||
const codeGraphic = this.doorCodeLozenge.codeGraphic;
|
const codeGraphic = this.codeGraphic;
|
||||||
if (
|
if (
|
||||||
this.states.upHold ||
|
this.states.upHold ||
|
||||||
this.states.upOccHold ||
|
this.states.upOccHold ||
|
||||||
|
@ -5,7 +5,14 @@ import {
|
|||||||
distance2,
|
distance2,
|
||||||
getRectangleCenter,
|
getRectangleCenter,
|
||||||
} from 'jl-graphic';
|
} from 'jl-graphic';
|
||||||
import { Container, Graphics, Rectangle, Color, Point } from 'pixi.js';
|
import {
|
||||||
|
Container,
|
||||||
|
Graphics,
|
||||||
|
Rectangle,
|
||||||
|
Color,
|
||||||
|
Point,
|
||||||
|
IPointData,
|
||||||
|
} from 'pixi.js';
|
||||||
import {
|
import {
|
||||||
CodeConstsConfig,
|
CodeConstsConfig,
|
||||||
DoorConstsConfig,
|
DoorConstsConfig,
|
||||||
@ -18,14 +25,17 @@ import { JlStation } from '../../Station/common/JlStation';
|
|||||||
|
|
||||||
//子元素--矩形
|
//子元素--矩形
|
||||||
class RectGraphic extends Container {
|
class RectGraphic extends Container {
|
||||||
|
platformConsts: PlatformConstsConfig;
|
||||||
rect: Graphics;
|
rect: Graphics;
|
||||||
stateFillColor?: string;
|
stateFillColor?: string;
|
||||||
constructor() {
|
constructor(platformConsts: PlatformConstsConfig) {
|
||||||
super();
|
super();
|
||||||
|
this.platformConsts = platformConsts;
|
||||||
this.rect = new Graphics();
|
this.rect = new Graphics();
|
||||||
this.addChild(this.rect);
|
this.addChild(this.rect);
|
||||||
}
|
}
|
||||||
draw(platformConsts: PlatformConstsConfig): void {
|
draw(): void {
|
||||||
|
const platformConsts = this.platformConsts;
|
||||||
const rect = this.rect;
|
const rect = this.rect;
|
||||||
const fillColor = this.stateFillColor || platformConsts.noTrainStop;
|
const fillColor = this.stateFillColor || platformConsts.noTrainStop;
|
||||||
rect
|
rect
|
||||||
@ -42,18 +52,21 @@ class RectGraphic extends Container {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
//子元素--门
|
//子元素--门
|
||||||
class DoorGraphic extends Container {
|
export class DoorGraphic extends Container {
|
||||||
|
platformConsts: PlatformConstsConfig;
|
||||||
doorGraphic: Graphics;
|
doorGraphic: Graphics;
|
||||||
doorCloseGraphic: Graphics;
|
doorCloseGraphic: Graphics;
|
||||||
stateFillColor?: string;
|
stateFillColor?: string;
|
||||||
constructor() {
|
constructor(platformConsts: PlatformConstsConfig) {
|
||||||
super();
|
super();
|
||||||
|
this.platformConsts = platformConsts;
|
||||||
this.doorGraphic = new Graphics();
|
this.doorGraphic = new Graphics();
|
||||||
this.doorCloseGraphic = new Graphics();
|
this.doorCloseGraphic = new Graphics();
|
||||||
this.addChild(this.doorGraphic);
|
this.addChild(this.doorGraphic);
|
||||||
this.addChild(this.doorCloseGraphic);
|
this.addChild(this.doorCloseGraphic);
|
||||||
}
|
}
|
||||||
draw(platformConsts: PlatformConstsConfig): void {
|
draw(): void {
|
||||||
|
const platformConsts = this.platformConsts;
|
||||||
const doorConsts = platformConsts.doorGraphic as DoorConstsConfig;
|
const doorConsts = platformConsts.doorGraphic as DoorConstsConfig;
|
||||||
const doorGraphic = this.doorGraphic;
|
const doorGraphic = this.doorGraphic;
|
||||||
const doorCloseGraphic = this.doorCloseGraphic;
|
const doorCloseGraphic = this.doorCloseGraphic;
|
||||||
@ -71,6 +84,13 @@ class DoorGraphic extends Container {
|
|||||||
.lineStyle(platformConsts.lineWidth, new Color(lineColor))
|
.lineStyle(platformConsts.lineWidth, new Color(lineColor))
|
||||||
.moveTo(-doorConsts.doorOpenSpacing, 0)
|
.moveTo(-doorConsts.doorOpenSpacing, 0)
|
||||||
.lineTo(doorConsts.doorOpenSpacing, 0);
|
.lineTo(doorConsts.doorOpenSpacing, 0);
|
||||||
|
this.position.set(
|
||||||
|
0,
|
||||||
|
-platformConsts.height / 2 - doorConsts.doorPlatformSpacing,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
changePosition(platformPos: IPointData) {
|
||||||
|
this.position.copyFrom(calculateMirrorPoint(new Point(0, 0), platformPos));
|
||||||
}
|
}
|
||||||
clear(): void {
|
clear(): void {
|
||||||
this.doorGraphic.clear();
|
this.doorGraphic.clear();
|
||||||
@ -78,7 +98,8 @@ class DoorGraphic extends Container {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
//子元素--字符
|
//子元素--字符
|
||||||
class CodeGraphic extends Container {
|
export class CodeGraphic extends Container {
|
||||||
|
platformConsts: PlatformConstsConfig;
|
||||||
character: VectorText = new VectorText(''); //扣车H
|
character: VectorText = new VectorText(''); //扣车H
|
||||||
runLevel: VectorText = new VectorText(''); //运行等级
|
runLevel: VectorText = new VectorText(''); //运行等级
|
||||||
runTime: VectorText = new VectorText(''); //运行时间
|
runTime: VectorText = new VectorText(''); //运行时间
|
||||||
@ -86,6 +107,7 @@ class CodeGraphic extends Container {
|
|||||||
circle: Graphics = new Graphics();
|
circle: Graphics = new Graphics();
|
||||||
constructor(platformConsts: PlatformConstsConfig) {
|
constructor(platformConsts: PlatformConstsConfig) {
|
||||||
super();
|
super();
|
||||||
|
this.platformConsts = platformConsts;
|
||||||
this.addChild(this.character);
|
this.addChild(this.character);
|
||||||
this.addChild(this.runLevel);
|
this.addChild(this.runLevel);
|
||||||
this.addChild(this.circle);
|
this.addChild(this.circle);
|
||||||
@ -97,8 +119,9 @@ class CodeGraphic extends Container {
|
|||||||
this.stopTime.setVectorFontSize(codeConsts.besideFontSize);
|
this.stopTime.setVectorFontSize(codeConsts.besideFontSize);
|
||||||
this.runTime.setVectorFontSize(codeConsts.besideFontSize);
|
this.runTime.setVectorFontSize(codeConsts.besideFontSize);
|
||||||
}
|
}
|
||||||
draw(platformConsts: PlatformConstsConfig): void {
|
draw(): void {
|
||||||
const codeConsts = platformConsts.codeGraphic as CodeConstsConfig;
|
const platformConsts = this.platformConsts;
|
||||||
|
const codeConsts = this.platformConsts.codeGraphic as CodeConstsConfig;
|
||||||
//扣车
|
//扣车
|
||||||
const character = this.character;
|
const character = this.character;
|
||||||
character.text = 'H';
|
character.text = 'H';
|
||||||
@ -156,20 +179,45 @@ class CodeGraphic extends Container {
|
|||||||
runLevel.visible = false;
|
runLevel.visible = false;
|
||||||
stopTime.visible = false;
|
stopTime.visible = false;
|
||||||
runTime.visible = false;
|
runTime.visible = false;
|
||||||
|
this.position.set(0, 0);
|
||||||
|
}
|
||||||
|
changePosition(platformPos: IPointData) {
|
||||||
|
const platformConsts = this.platformConsts;
|
||||||
|
const codeConsts = platformConsts.codeGraphic as CodeConstsConfig;
|
||||||
|
const psChange = [
|
||||||
|
this.character,
|
||||||
|
this.runLevel,
|
||||||
|
this.stopTime,
|
||||||
|
this.runTime,
|
||||||
|
];
|
||||||
|
psChange.forEach((g) => {
|
||||||
|
if (g) {
|
||||||
|
g.position.copyFrom(calculateMirrorPoint(new Point(0, 0), platformPos));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.circle.position.set(
|
||||||
|
platformConsts.width / 2 +
|
||||||
|
platformConsts.lineWidth / 2 +
|
||||||
|
(codeConsts.besideSpacing * 4) / 3,
|
||||||
|
(-platformConsts.height * 10) / 11,
|
||||||
|
);
|
||||||
}
|
}
|
||||||
clear(): void {
|
clear(): void {
|
||||||
this.character.destroy();
|
this.character.destroy();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//子元素--站台旁菱形图标
|
//子元素--站台旁菱形图标
|
||||||
class LozengeGraphic extends Container {
|
export class LozengeGraphic extends Container {
|
||||||
|
platformConsts: PlatformConstsConfig;
|
||||||
lozenge: Graphics;
|
lozenge: Graphics;
|
||||||
constructor() {
|
constructor(platformConsts: PlatformConstsConfig) {
|
||||||
super();
|
super();
|
||||||
|
this.platformConsts = platformConsts;
|
||||||
this.lozenge = new Graphics();
|
this.lozenge = new Graphics();
|
||||||
this.addChild(this.lozenge);
|
this.addChild(this.lozenge);
|
||||||
}
|
}
|
||||||
draw(platformConsts: PlatformConstsConfig): void {
|
draw(): void {
|
||||||
|
const platformConsts = this.platformConsts;
|
||||||
const LozengeConsts = platformConsts.lozengeGraphic as LozengeConstsConfig;
|
const LozengeConsts = platformConsts.lozengeGraphic as LozengeConstsConfig;
|
||||||
const lozenge = this.lozenge;
|
const lozenge = this.lozenge;
|
||||||
lozenge
|
lozenge
|
||||||
@ -187,6 +235,15 @@ class LozengeGraphic extends Container {
|
|||||||
lozenge.pivot = getRectangleCenter(rect);
|
lozenge.pivot = getRectangleCenter(rect);
|
||||||
lozenge.rotation = Math.PI / 4;
|
lozenge.rotation = Math.PI / 4;
|
||||||
lozenge.visible = false;
|
lozenge.visible = false;
|
||||||
|
this.position.set(
|
||||||
|
0,
|
||||||
|
-platformConsts.height / 2 -
|
||||||
|
LozengeConsts.doorPlatformSpacing -
|
||||||
|
platformConsts.height / 3,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
changePosition(platformPos: IPointData) {
|
||||||
|
this.position.copyFrom(calculateMirrorPoint(new Point(0, 0), platformPos));
|
||||||
}
|
}
|
||||||
clear(): void {
|
clear(): void {
|
||||||
this.lozenge.clear();
|
this.lozenge.clear();
|
||||||
@ -201,61 +258,24 @@ export class DoorCodeLozenge extends Container {
|
|||||||
constructor(platformConsts: PlatformConstsConfig) {
|
constructor(platformConsts: PlatformConstsConfig) {
|
||||||
super();
|
super();
|
||||||
this.platformConsts = platformConsts;
|
this.platformConsts = platformConsts;
|
||||||
this.doorGraphic = new DoorGraphic();
|
this.doorGraphic = new DoorGraphic(this.platformConsts);
|
||||||
this.addChild(this.doorGraphic);
|
this.addChild(this.doorGraphic);
|
||||||
this.lozengeGraphic = new LozengeGraphic();
|
this.lozengeGraphic = new LozengeGraphic(this.platformConsts);
|
||||||
this.addChild(this.lozengeGraphic);
|
this.addChild(this.lozengeGraphic);
|
||||||
this.codeGraphic = new CodeGraphic(this.platformConsts);
|
this.codeGraphic = new CodeGraphic(this.platformConsts);
|
||||||
this.addChild(this.codeGraphic);
|
this.addChild(this.codeGraphic);
|
||||||
}
|
}
|
||||||
draw(hasDoor: boolean, direction: string) {
|
draw(hasDoor: boolean, direction: string, platformPos: IPointData) {
|
||||||
const platformConsts = this.platformConsts;
|
|
||||||
this.doorGraphic.clear();
|
this.doorGraphic.clear();
|
||||||
if (hasDoor) {
|
if (hasDoor) {
|
||||||
const doorConsts = platformConsts.doorGraphic as DoorConstsConfig;
|
this.doorGraphic.draw();
|
||||||
this.doorGraphic.draw(platformConsts);
|
|
||||||
this.doorGraphic.position.set(
|
|
||||||
0,
|
|
||||||
-platformConsts.height / 2 - doorConsts.doorPlatformSpacing,
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
const codeConsts = platformConsts.codeGraphic as CodeConstsConfig;
|
this.codeGraphic.draw();
|
||||||
this.codeGraphic.draw(platformConsts);
|
this.lozengeGraphic.draw();
|
||||||
this.codeGraphic.position.set(0, 0);
|
|
||||||
const LozengeConsts = platformConsts.lozengeGraphic as LozengeConstsConfig;
|
|
||||||
this.lozengeGraphic.draw(platformConsts);
|
|
||||||
this.lozengeGraphic.position.set(
|
|
||||||
0,
|
|
||||||
-platformConsts.height / 2 -
|
|
||||||
LozengeConsts.doorPlatformSpacing -
|
|
||||||
platformConsts.height / 3,
|
|
||||||
);
|
|
||||||
if (direction == 'down') {
|
if (direction == 'down') {
|
||||||
this.doorGraphic.position.copyFrom(
|
this.doorGraphic.changePosition(platformPos);
|
||||||
calculateMirrorPoint(new Point(0, 0), this.doorGraphic.position),
|
this.codeGraphic.changePosition(platformPos);
|
||||||
);
|
this.lozengeGraphic.changePosition(platformPos);
|
||||||
this.lozengeGraphic.position.copyFrom(
|
|
||||||
calculateMirrorPoint(new Point(0, 0), this.lozengeGraphic.position),
|
|
||||||
);
|
|
||||||
const psChange = [
|
|
||||||
this.codeGraphic.character,
|
|
||||||
this.codeGraphic.runLevel,
|
|
||||||
this.codeGraphic.stopTime,
|
|
||||||
this.codeGraphic.runTime,
|
|
||||||
];
|
|
||||||
psChange.forEach((g) => {
|
|
||||||
if (g) {
|
|
||||||
g.position.copyFrom(
|
|
||||||
calculateMirrorPoint(new Point(0, 0), g.position),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.codeGraphic.circle.position.set(
|
|
||||||
platformConsts.width / 2 +
|
|
||||||
platformConsts.lineWidth / 2 +
|
|
||||||
(codeConsts.besideSpacing * 4) / 3,
|
|
||||||
(-platformConsts.height * 10) / 11,
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -267,7 +287,7 @@ export abstract class JlPlatform extends JlGraphic {
|
|||||||
constructor(platformConsts: PlatformConstsConfig) {
|
constructor(platformConsts: PlatformConstsConfig) {
|
||||||
super(JlPlatform.Type);
|
super(JlPlatform.Type);
|
||||||
this.platformConsts = platformConsts;
|
this.platformConsts = platformConsts;
|
||||||
this.rectGraphic = new RectGraphic();
|
this.rectGraphic = new RectGraphic(this.platformConsts);
|
||||||
this.addChild(this.rectGraphic);
|
this.addChild(this.rectGraphic);
|
||||||
}
|
}
|
||||||
get datas() {
|
get datas() {
|
||||||
@ -277,7 +297,7 @@ export abstract class JlPlatform extends JlGraphic {
|
|||||||
return this.datas.code;
|
return this.datas.code;
|
||||||
}
|
}
|
||||||
draw(): void {
|
draw(): void {
|
||||||
this.rectGraphic.draw(this.platformConsts);
|
this.rectGraphic.draw();
|
||||||
}
|
}
|
||||||
buildCommonRelation() {
|
buildCommonRelation() {
|
||||||
const stationas = this.queryStore.queryByType<JlStation>(JlStation.Type);
|
const stationas = this.queryStore.queryByType<JlStation>(JlStation.Type);
|
||||||
|
Loading…
Reference in New Issue
Block a user