Merge branch 'master' of https://git.code.tencent.com/jl-framework/graphic-pixi
This commit is contained in:
joylink_zhaoerwei
commit
729a3c25b4
@ -57,6 +57,9 @@
|
||||
<iscs-fan-property
|
||||
v-else-if="drawStore.selectedGraphicType === IscsFan.Type"
|
||||
></iscs-fan-property>
|
||||
<signal-property
|
||||
v-else-if="drawStore.selectedGraphicType === Signal.Type"
|
||||
></signal-property>
|
||||
</q-card-section>
|
||||
</template>
|
||||
</q-card>
|
||||
@ -75,6 +78,7 @@ import PlatformProperty from './properties/PlatformProperty.vue';
|
||||
import StationProperty from './properties/StationProperty.vue';
|
||||
import TrainProperty from './properties/TrainProperty.vue';
|
||||
import IscsFanProperty from './properties/IscsFanProperty.vue';
|
||||
import SignalProperty from './properties/SignalProperty.vue';
|
||||
import { Link } from 'src/graphics/link/Link';
|
||||
import { Rect } from 'src/graphics/rect/Rect';
|
||||
import { Platform } from 'src/graphics/platform/Platform';
|
||||
@ -82,6 +86,7 @@ import { Station } from 'src/graphics/station/Station';
|
||||
import { Train } from 'src/graphics/train/Train';
|
||||
import { useDrawStore } from 'src/stores/draw-store';
|
||||
import { IscsFan } from 'src/graphics/iscs-fan/IscsFan';
|
||||
import { Signal } from 'src/graphics/signal/Signal';
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
</script>
|
||||
|
||||
57
src/components/draw-app/properties/SignalProperty.vue
Normal file
57
src/components/draw-app/properties/SignalProperty.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<q-form>
|
||||
<q-input outlined readonly v-model="signalModel.id" label="id" hint="" />
|
||||
<q-select
|
||||
outlined
|
||||
@blur="onUpdate"
|
||||
v-model="signalDirection"
|
||||
:options="optionsDirection"
|
||||
label="方向"
|
||||
/>
|
||||
</q-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { SignalData } from 'src/examples/app/graphics/SignalInteraction';
|
||||
import { Signal } from 'src/graphics/signal/Signal';
|
||||
import { useDrawStore } from 'src/stores/draw-store';
|
||||
import { onMounted, reactive, ref, watch } from 'vue';
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
const signalModel = reactive(new SignalData());
|
||||
const signalDirection = ref('向右');
|
||||
const optionsDirection = ['向左', '向右', '向上', '向下'];
|
||||
enum directionSelect {
|
||||
向左 = 'left',
|
||||
向右 = 'right',
|
||||
向上 = 'up',
|
||||
向下 = 'down',
|
||||
}
|
||||
|
||||
drawStore.$subscribe;
|
||||
watch(
|
||||
() => drawStore.selectedGraphic,
|
||||
(val) => {
|
||||
if (val && val.type == Signal.Type) {
|
||||
signalModel.copyFrom(val.saveData() as SignalData);
|
||||
signalDirection.value = (directionSelect as never)[signalModel.direction];
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
const signal = drawStore.selectedGraphic as Signal;
|
||||
if (signal) {
|
||||
signalModel.copyFrom(signal.saveData());
|
||||
signalDirection.value = (directionSelect as never)[signalModel.direction];
|
||||
}
|
||||
});
|
||||
|
||||
function onUpdate() {
|
||||
signalModel.direction = (directionSelect as never)[signalDirection.value];
|
||||
const signal = drawStore.selectedGraphic as Signal;
|
||||
if (signal) {
|
||||
drawStore.getDrawApp().updateGraphicAndRecord(signal, signalModel);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -10,6 +10,7 @@ message RtssGraphicStorage {
|
||||
repeated Station stations = 5;
|
||||
repeated Rect Rects = 6;
|
||||
repeated Train train = 7;
|
||||
repeated Signal signals = 8;
|
||||
}
|
||||
|
||||
message Canvas {
|
||||
@ -126,3 +127,12 @@ message IscsFan {
|
||||
}
|
||||
|
||||
message Turnout {}
|
||||
|
||||
message Signal {
|
||||
CommonInfo common = 1;
|
||||
string code = 2;
|
||||
string codeColor = 3; // 信号机字体颜色
|
||||
int32 codeFontSize = 4; // 信号机字体大小
|
||||
Point point = 5; // 位置坐标
|
||||
string direction = 6; //信号机朝向
|
||||
}
|
||||
|
||||
62
src/examples/app/graphics/SignalInteraction.ts
Normal file
62
src/examples/app/graphics/SignalInteraction.ts
Normal file
@ -0,0 +1,62 @@
|
||||
import * as pb_1 from 'google-protobuf';
|
||||
import { IPointData } from 'pixi.js';
|
||||
import { ISignalData } from 'src/graphics/signal/Signal';
|
||||
import { graphicData } from '../protos/draw_data_storage';
|
||||
import { GraphicDataBase } from './GraphicDataBase';
|
||||
|
||||
export class SignalData extends GraphicDataBase implements ISignalData {
|
||||
constructor(data?: graphicData.Signal) {
|
||||
let signal;
|
||||
if (!data) {
|
||||
signal = new graphicData.Signal({
|
||||
common: GraphicDataBase.defaultCommonInfo(),
|
||||
});
|
||||
} else {
|
||||
signal = data;
|
||||
}
|
||||
super(signal);
|
||||
}
|
||||
|
||||
public get data(): graphicData.Signal {
|
||||
return this.getData<graphicData.Signal>();
|
||||
}
|
||||
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 });
|
||||
}
|
||||
get direction(): string {
|
||||
return this.data.direction;
|
||||
}
|
||||
set direction(v: string) {
|
||||
this.data.direction = v;
|
||||
}
|
||||
clone(): SignalData {
|
||||
return new SignalData(this.data.cloneMessage());
|
||||
}
|
||||
copyFrom(data: SignalData): void {
|
||||
pb_1.Message.copyInto(data.data, this.data);
|
||||
}
|
||||
eq(other: SignalData): boolean {
|
||||
return pb_1.Message.equals(this.data, other.data);
|
||||
}
|
||||
}
|
||||
@ -11,6 +11,8 @@ import { PlatformDraw } from 'src/graphics/platform/PlatformDrawAssistant';
|
||||
import { Station } from 'src/graphics/station/Station';
|
||||
import { Train } from 'src/graphics/train/Train';
|
||||
import { StationDraw } from 'src/graphics/station/StationDrawAssistant';
|
||||
import { Signal } from 'src/graphics/signal/Signal';
|
||||
import { SignalDraw } from 'src/graphics/signal/SignalDrawAssistant';
|
||||
import { TrainDraw } from 'src/graphics/train/TrainDrawAssistant';
|
||||
import {
|
||||
CombinationKey,
|
||||
@ -27,6 +29,7 @@ import { LinkData } from './graphics/LinkInteraction';
|
||||
import { RectData } from './graphics/RectInteraction';
|
||||
import { PlatformData } from './graphics/PlatformInteraction';
|
||||
import { StationData } from './graphics/StationInteraction';
|
||||
import { SignalData } from './graphics/SignalInteraction';
|
||||
import { TrainData } from './graphics/TrainInteraction';
|
||||
import { graphicData } from './protos/draw_data_storage';
|
||||
|
||||
@ -115,6 +118,9 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
|
||||
new StationDraw(app, () => {
|
||||
return new StationData();
|
||||
}),
|
||||
new SignalDraw(app, () => {
|
||||
return new SignalData();
|
||||
}),
|
||||
new TrainDraw(app, () => {
|
||||
return new TrainData();
|
||||
}),
|
||||
@ -179,6 +185,14 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
|
||||
},
|
||||
})
|
||||
);
|
||||
app.addKeyboardListener(
|
||||
new KeyListener({
|
||||
value: 'KeyH',
|
||||
onPress: () => {
|
||||
app.interactionPlugin(Signal.Type).resume();
|
||||
},
|
||||
})
|
||||
);
|
||||
app.addKeyboardListener(
|
||||
new KeyListener({
|
||||
value: 'KeyT',
|
||||
@ -237,6 +251,9 @@ export function saveDrawDatas(app: JlDrawApp) {
|
||||
} else if (Station.Type === g.type) {
|
||||
const stationData = (g as Station).saveData();
|
||||
storage.stations.push((stationData as StationData).data);
|
||||
} else if (Signal.Type === g.type) {
|
||||
const signalData = (g as Signal).saveData();
|
||||
storage.signals.push((signalData as SignalData).data);
|
||||
} else if (Train.Type === g.type) {
|
||||
const trainData = (g as Train).saveData();
|
||||
storage.train.push((trainData as TrainData).data);
|
||||
@ -273,8 +290,11 @@ export function loadDrawDatas(app: GraphicApp) {
|
||||
storage.stations.forEach((station) => {
|
||||
datas.push(new StationData(station));
|
||||
});
|
||||
storage.train.forEach((train) => {
|
||||
datas.push(new TrainData(train));
|
||||
storage.stations.forEach((signal) => {
|
||||
datas.push(new StationData(signal));
|
||||
});
|
||||
storage.stations.forEach((train) => {
|
||||
datas.push(new StationData(train));
|
||||
});
|
||||
app.loadGraphic(datas);
|
||||
} else {
|
||||
|
||||
@ -15,9 +15,10 @@ export namespace graphicData {
|
||||
stations?: Station[];
|
||||
Rects?: Rect[];
|
||||
train?: Train[];
|
||||
signals?: Signal[];
|
||||
}) {
|
||||
super();
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3, 4, 5, 6, 7], this.#one_of_decls);
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3, 4, 5, 6, 7, 8], this.#one_of_decls);
|
||||
if (!Array.isArray(data) && typeof data == "object") {
|
||||
if ("canvas" in data && data.canvas != undefined) {
|
||||
this.canvas = data.canvas;
|
||||
@ -40,6 +41,9 @@ export namespace graphicData {
|
||||
if ("train" in data && data.train != undefined) {
|
||||
this.train = data.train;
|
||||
}
|
||||
if ("signals" in data && data.signals != undefined) {
|
||||
this.signals = data.signals;
|
||||
}
|
||||
}
|
||||
}
|
||||
get canvas() {
|
||||
@ -87,6 +91,12 @@ export namespace graphicData {
|
||||
set train(value: Train[]) {
|
||||
pb_1.Message.setRepeatedWrapperField(this, 7, value);
|
||||
}
|
||||
get signals() {
|
||||
return pb_1.Message.getRepeatedWrapperField(this, Signal, 8) as Signal[];
|
||||
}
|
||||
set signals(value: Signal[]) {
|
||||
pb_1.Message.setRepeatedWrapperField(this, 8, value);
|
||||
}
|
||||
static fromObject(data: {
|
||||
canvas?: ReturnType<typeof Canvas.prototype.toObject>;
|
||||
links?: ReturnType<typeof Link.prototype.toObject>[];
|
||||
@ -95,6 +105,7 @@ export namespace graphicData {
|
||||
stations?: ReturnType<typeof Station.prototype.toObject>[];
|
||||
Rects?: ReturnType<typeof Rect.prototype.toObject>[];
|
||||
train?: ReturnType<typeof Train.prototype.toObject>[];
|
||||
signals?: ReturnType<typeof Signal.prototype.toObject>[];
|
||||
}): RtssGraphicStorage {
|
||||
const message = new RtssGraphicStorage({});
|
||||
if (data.canvas != null) {
|
||||
@ -118,6 +129,9 @@ export namespace graphicData {
|
||||
if (data.train != null) {
|
||||
message.train = data.train.map(item => Train.fromObject(item));
|
||||
}
|
||||
if (data.signals != null) {
|
||||
message.signals = data.signals.map(item => Signal.fromObject(item));
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
@ -129,6 +143,7 @@ export namespace graphicData {
|
||||
stations?: ReturnType<typeof Station.prototype.toObject>[];
|
||||
Rects?: ReturnType<typeof Rect.prototype.toObject>[];
|
||||
train?: ReturnType<typeof Train.prototype.toObject>[];
|
||||
signals?: ReturnType<typeof Signal.prototype.toObject>[];
|
||||
} = {};
|
||||
if (this.canvas != null) {
|
||||
data.canvas = this.canvas.toObject();
|
||||
@ -151,6 +166,9 @@ export namespace graphicData {
|
||||
if (this.train != null) {
|
||||
data.train = this.train.map((item: Train) => item.toObject());
|
||||
}
|
||||
if (this.signals != null) {
|
||||
data.signals = this.signals.map((item: Signal) => item.toObject());
|
||||
}
|
||||
return data;
|
||||
}
|
||||
serialize(): Uint8Array;
|
||||
@ -171,6 +189,8 @@ export namespace graphicData {
|
||||
writer.writeRepeatedMessage(6, this.Rects, (item: Rect) => item.serialize(writer));
|
||||
if (this.train.length)
|
||||
writer.writeRepeatedMessage(7, this.train, (item: Train) => item.serialize(writer));
|
||||
if (this.signals.length)
|
||||
writer.writeRepeatedMessage(8, this.signals, (item: Signal) => item.serialize(writer));
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
@ -201,6 +221,9 @@ export namespace graphicData {
|
||||
case 7:
|
||||
reader.readMessage(message.train, () => pb_1.Message.addToRepeatedWrapperField(message, 7, Train.deserialize(reader), Train));
|
||||
break;
|
||||
case 8:
|
||||
reader.readMessage(message.signals, () => pb_1.Message.addToRepeatedWrapperField(message, 8, Signal.deserialize(reader), Signal));
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
@ -2306,4 +2329,192 @@ export namespace graphicData {
|
||||
return Turnout.deserialize(bytes);
|
||||
}
|
||||
}
|
||||
export class Signal extends pb_1.Message {
|
||||
#one_of_decls: number[][] = [];
|
||||
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);
|
||||
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;
|
||||
}
|
||||
if ("direction" in data && data.direction != undefined) {
|
||||
this.direction = data.direction;
|
||||
}
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
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) {
|
||||
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);
|
||||
}
|
||||
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();
|
||||
}
|
||||
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;
|
||||
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 (this.direction.length)
|
||||
writer.writeString(6, this.direction);
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Signal {
|
||||
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Signal();
|
||||
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;
|
||||
case 6:
|
||||
message.direction = reader.readString();
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
return message;
|
||||
}
|
||||
serializeBinary(): Uint8Array {
|
||||
return this.serialize();
|
||||
}
|
||||
static deserializeBinary(bytes: Uint8Array): Signal {
|
||||
return Signal.deserialize(bytes);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,192 @@
|
||||
import { IPointData, Graphics, Color } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
JlGraphic,
|
||||
JlGraphicTemplate,
|
||||
VectorText,
|
||||
} from 'src/jlgraphic';
|
||||
|
||||
export interface ISignalData 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);
|
||||
get direction(): string;
|
||||
set direction(v: string);
|
||||
clone(): ISignalData;
|
||||
copyFrom(data: ISignalData): void;
|
||||
eq(other: ISignalData): boolean;
|
||||
}
|
||||
|
||||
//站台颜色
|
||||
export enum SignalColorEnum {
|
||||
lampPostColor = '0xc0c0c0',
|
||||
lampColor = '0xff0000',
|
||||
humanControlColor = '0xffff00',
|
||||
fleetModeColor = '0x00ff00',
|
||||
logicModeColor = '0x000000',
|
||||
}
|
||||
|
||||
const signalConsts = {
|
||||
verticalLampPostLength: 20,
|
||||
levelLampPostLength: 5,
|
||||
lineWidth: 3,
|
||||
lampRadius: 10,
|
||||
nameOffsetY: 20,
|
||||
humanControlPath: [-2, 0, -17, 10, -17, -10],
|
||||
logicModeLineWidth: 2,
|
||||
logicModeDistance: 7,
|
||||
fleetModePath: [2, -4, 22, -4, 22, -10, 35, 0, 22, 10, 22, 4, 2, 4],
|
||||
};
|
||||
export class Signal extends JlGraphic {
|
||||
static Type = 'signal';
|
||||
codeGraph: VectorText = new VectorText('');
|
||||
lampPost: Graphics = new Graphics();
|
||||
circularLamp: Graphics = new Graphics();
|
||||
humanControl: Graphics = new Graphics();
|
||||
fleetMode: Graphics = new Graphics();
|
||||
logicMode: Graphics = new Graphics();
|
||||
|
||||
constructor() {
|
||||
super(Signal.Type);
|
||||
this.addChild(this.codeGraph);
|
||||
this.addChild(this.lampPost);
|
||||
this.addChild(this.circularLamp);
|
||||
this.addChild(this.humanControl);
|
||||
this.addChild(this.fleetMode);
|
||||
this.addChild(this.logicMode);
|
||||
}
|
||||
|
||||
get datas(): ISignalData {
|
||||
return this.getDatas<ISignalData>();
|
||||
}
|
||||
doRepaint(): void {
|
||||
console.log(this.datas, 'this.datas');
|
||||
const codeGraph = this.codeGraph;
|
||||
this.lampPost.clear();
|
||||
this.lampPost.lineStyle(
|
||||
signalConsts.lineWidth,
|
||||
new Color(SignalColorEnum.lampPostColor)
|
||||
);
|
||||
this.lampPost.moveTo(0, -signalConsts.verticalLampPostLength / 2);
|
||||
this.lampPost.lineTo(0, signalConsts.verticalLampPostLength / 2);
|
||||
this.lampPost.moveTo(0, 0);
|
||||
this.lampPost.lineTo(signalConsts.levelLampPostLength, 0);
|
||||
this.circularLamp.beginFill(SignalColorEnum.lampColor, 1);
|
||||
this.circularLamp.drawCircle(
|
||||
signalConsts.levelLampPostLength + signalConsts.lampRadius,
|
||||
0,
|
||||
signalConsts.lampRadius
|
||||
);
|
||||
this.circularLamp.endFill();
|
||||
this.humanControl.beginFill(SignalColorEnum.humanControlColor, 1);
|
||||
this.humanControl.drawPolygon(signalConsts.humanControlPath);
|
||||
this.humanControl.endFill();
|
||||
this.fleetMode.beginFill(SignalColorEnum.fleetModeColor, 1);
|
||||
const fleetModePath: number[] = [];
|
||||
signalConsts.fleetModePath.forEach((item: number, index: number) => {
|
||||
if (!(index % 2)) {
|
||||
fleetModePath.push(
|
||||
item + signalConsts.levelLampPostLength + signalConsts.lampRadius * 2
|
||||
);
|
||||
} else {
|
||||
fleetModePath.push(item);
|
||||
}
|
||||
});
|
||||
this.fleetMode.drawPolygon(fleetModePath);
|
||||
this.fleetMode.endFill();
|
||||
this.logicMode.lineStyle(2, new Color(SignalColorEnum.logicModeColor));
|
||||
this.logicMode.moveTo(
|
||||
signalConsts.levelLampPostLength +
|
||||
signalConsts.lampRadius -
|
||||
signalConsts.logicModeDistance,
|
||||
signalConsts.logicModeDistance
|
||||
);
|
||||
this.logicMode.lineTo(
|
||||
signalConsts.levelLampPostLength +
|
||||
signalConsts.lampRadius +
|
||||
signalConsts.logicModeDistance,
|
||||
-signalConsts.logicModeDistance
|
||||
);
|
||||
this.logicMode.moveTo(
|
||||
signalConsts.levelLampPostLength +
|
||||
signalConsts.lampRadius -
|
||||
signalConsts.logicModeDistance,
|
||||
-signalConsts.logicModeDistance
|
||||
);
|
||||
this.logicMode.lineTo(
|
||||
signalConsts.levelLampPostLength +
|
||||
signalConsts.lampRadius +
|
||||
signalConsts.logicModeDistance,
|
||||
signalConsts.logicModeDistance
|
||||
);
|
||||
if (this.datas.code == '') {
|
||||
codeGraph.text = '信号机Signal';
|
||||
} else {
|
||||
codeGraph.text = this.datas.code;
|
||||
}
|
||||
codeGraph.style.fill = this.datas.codeColor;
|
||||
codeGraph.setVectorFontSize(this.datas.codeFontSize);
|
||||
codeGraph.anchor.set(0.5);
|
||||
codeGraph.style.fill = this.datas.codeColor;
|
||||
codeGraph.position.set(0, signalConsts.nameOffsetY);
|
||||
this.position.set(this.datas.point.x, this.datas.point.y);
|
||||
}
|
||||
}
|
||||
|
||||
export class SignalTemplate extends JlGraphicTemplate<Signal> {
|
||||
codeColor: string;
|
||||
codeFontSize: number;
|
||||
direction: string;
|
||||
verticalLampPostLength: number;
|
||||
levelLampPostLength: number;
|
||||
lineWidth: number;
|
||||
lampRadius: number;
|
||||
lampPostColor: string;
|
||||
lampColor: string;
|
||||
humanControlColor: string;
|
||||
fleetModeColor: string;
|
||||
logicModeColor: string;
|
||||
humanControlPath: number[];
|
||||
logicModeLineWidth: number;
|
||||
logicModeDistance: number;
|
||||
fleetModePath: number[];
|
||||
nameOffsetY: number;
|
||||
constructor() {
|
||||
super(Signal.Type);
|
||||
this.codeColor = '0xff0000';
|
||||
this.codeFontSize = 11;
|
||||
this.direction = 'right';
|
||||
this.verticalLampPostLength = signalConsts.verticalLampPostLength;
|
||||
this.levelLampPostLength = signalConsts.levelLampPostLength;
|
||||
this.lineWidth = signalConsts.lineWidth;
|
||||
this.lampRadius = signalConsts.lampRadius;
|
||||
this.lampPostColor = SignalColorEnum.lampPostColor;
|
||||
this.lampColor = SignalColorEnum.lampColor;
|
||||
this.humanControlColor = SignalColorEnum.humanControlColor;
|
||||
this.fleetModeColor = SignalColorEnum.fleetModeColor;
|
||||
this.logicModeColor = SignalColorEnum.logicModeColor;
|
||||
this.humanControlPath = signalConsts.humanControlPath;
|
||||
this.logicModeLineWidth = signalConsts.logicModeLineWidth;
|
||||
this.logicModeDistance = signalConsts.logicModeDistance;
|
||||
this.nameOffsetY = signalConsts.nameOffsetY;
|
||||
const fleetModePath: number[] = [];
|
||||
signalConsts.fleetModePath.forEach((item: number, index: number) => {
|
||||
if (!(index % 2)) {
|
||||
fleetModePath.push(
|
||||
item + signalConsts.levelLampPostLength + signalConsts.lampRadius * 2
|
||||
);
|
||||
} else {
|
||||
fleetModePath.push(item);
|
||||
}
|
||||
});
|
||||
this.fleetModePath = fleetModePath;
|
||||
}
|
||||
new(): Signal {
|
||||
return new Signal();
|
||||
}
|
||||
}
|
||||
173
src/graphics/signal/SignalDrawAssistant.ts
Normal file
173
src/graphics/signal/SignalDrawAssistant.ts
Normal file
@ -0,0 +1,173 @@
|
||||
import { FederatedPointerEvent, Point, Graphics, Color } from 'pixi.js';
|
||||
import {
|
||||
GraphicDrawAssistant,
|
||||
GraphicInteractionPlugin,
|
||||
JlDrawApp,
|
||||
JlGraphic,
|
||||
KeyListener,
|
||||
VectorText,
|
||||
} from 'src/jlgraphic';
|
||||
|
||||
import { ISignalData, Signal, SignalTemplate } from './Signal';
|
||||
|
||||
export interface ISignalDrawOptions {
|
||||
newData: () => ISignalData;
|
||||
}
|
||||
|
||||
export class SignalDraw extends GraphicDrawAssistant<
|
||||
SignalTemplate,
|
||||
ISignalData
|
||||
> {
|
||||
point: Point = new Point(0, 0);
|
||||
codeGraph: VectorText = new VectorText('');
|
||||
lampPost: Graphics = new Graphics();
|
||||
circularLamp: Graphics = new Graphics();
|
||||
humanControl: Graphics = new Graphics();
|
||||
fleetMode: Graphics = new Graphics();
|
||||
logicMode: Graphics = new Graphics();
|
||||
|
||||
// 快捷绘制
|
||||
keypListener: KeyListener = new KeyListener({
|
||||
value: 'KeyH',
|
||||
global: true,
|
||||
onPress: () => {
|
||||
//this.graphicTemplate.hasdoor = true;
|
||||
},
|
||||
});
|
||||
|
||||
constructor(app: JlDrawApp, createData: () => ISignalData) {
|
||||
super(app, new SignalTemplate(), createData, Signal.Type, '信号机Signal');
|
||||
this.container.addChild(this.codeGraph);
|
||||
this.container.addChild(this.lampPost);
|
||||
this.container.addChild(this.circularLamp);
|
||||
this.container.addChild(this.humanControl);
|
||||
this.container.addChild(this.fleetMode);
|
||||
this.container.addChild(this.logicMode);
|
||||
signalInteraction.init(app);
|
||||
}
|
||||
|
||||
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;
|
||||
const template = this.graphicTemplate;
|
||||
this.point.set(p.x, p.y);
|
||||
this.lampPost.lineStyle(
|
||||
template.lineWidth,
|
||||
new Color(template.lampPostColor)
|
||||
);
|
||||
this.lampPost.moveTo(0, -template.verticalLampPostLength / 2);
|
||||
this.lampPost.lineTo(0, template.verticalLampPostLength / 2);
|
||||
|
||||
this.lampPost.moveTo(0, 0);
|
||||
this.lampPost.lineTo(template.levelLampPostLength, 0);
|
||||
|
||||
this.lampPost.position.set(p.x, p.y);
|
||||
this.circularLamp.beginFill(template.lampColor, 1);
|
||||
this.circularLamp.drawCircle(
|
||||
template.levelLampPostLength + template.lampRadius,
|
||||
0,
|
||||
template.lampRadius
|
||||
);
|
||||
this.circularLamp.endFill();
|
||||
this.circularLamp.position.set(p.x, p.y);
|
||||
this.humanControl.beginFill(template.humanControlColor, 1);
|
||||
this.humanControl.drawPolygon(template.humanControlPath);
|
||||
this.humanControl.endFill();
|
||||
this.humanControl.position.set(p.x, p.y);
|
||||
this.fleetMode.beginFill(template.fleetModeColor, 1);
|
||||
this.fleetMode.drawPolygon(template.fleetModePath);
|
||||
this.fleetMode.endFill();
|
||||
this.fleetMode.position.set(p.x, p.y);
|
||||
this.logicMode.lineStyle(
|
||||
template.logicModeLineWidth,
|
||||
new Color(template.logicModeColor)
|
||||
);
|
||||
this.logicMode.moveTo(
|
||||
template.levelLampPostLength +
|
||||
template.lampRadius -
|
||||
template.logicModeDistance,
|
||||
template.logicModeDistance
|
||||
);
|
||||
this.logicMode.lineTo(
|
||||
template.levelLampPostLength +
|
||||
template.lampRadius +
|
||||
template.logicModeDistance,
|
||||
-template.logicModeDistance
|
||||
);
|
||||
this.logicMode.moveTo(
|
||||
template.levelLampPostLength +
|
||||
template.lampRadius -
|
||||
template.logicModeDistance,
|
||||
-template.logicModeDistance
|
||||
);
|
||||
this.logicMode.lineTo(
|
||||
template.levelLampPostLength +
|
||||
template.lampRadius +
|
||||
template.logicModeDistance,
|
||||
template.logicModeDistance
|
||||
);
|
||||
this.logicMode.position.set(p.x, p.y);
|
||||
codeGraph.text = '信号机Signal';
|
||||
|
||||
codeGraph.style.fill = template.codeColor;
|
||||
codeGraph.setVectorFontSize(template.codeFontSize);
|
||||
codeGraph.anchor.set(0.5);
|
||||
codeGraph.style.fill = template.codeColor;
|
||||
codeGraph.position.set(p.x, p.y + template.nameOffsetY);
|
||||
}
|
||||
prepareData(data: ISignalData): boolean {
|
||||
const template = this.graphicTemplate;
|
||||
data.point = this.point;
|
||||
data.codeColor = template.codeColor;
|
||||
data.codeFontSize = template.codeFontSize;
|
||||
data.direction = template.direction;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
export class signalInteraction extends GraphicInteractionPlugin<Signal> {
|
||||
static Name = 'signal_transform';
|
||||
constructor(app: JlDrawApp) {
|
||||
super(signalInteraction.Name, app);
|
||||
}
|
||||
static init(app: JlDrawApp) {
|
||||
return new signalInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): Signal[] | undefined {
|
||||
return grahpics
|
||||
.filter((g) => g.type === Signal.Type)
|
||||
.map((g) => g as Signal);
|
||||
}
|
||||
bind(g: Signal): void {
|
||||
g.eventMode = 'static';
|
||||
g.cursor = 'pointer';
|
||||
g.scalable = true;
|
||||
g.rotatable = true;
|
||||
}
|
||||
unbind(g: Signal): void {
|
||||
g.eventMode = 'none';
|
||||
g.scalable = false;
|
||||
g.rotatable = false;
|
||||
}
|
||||
}
|
||||
@ -183,6 +183,11 @@
|
||||
resolved "https://registry.npmmirror.com/@pixi/filter-noise/-/filter-noise-7.2.4.tgz#0586a00381ec0e63f6c00d49cd58b781eaf07f37"
|
||||
integrity sha512-QAU9Ybj2ZQrWM9ZEjTTC0iLnQcuyNoZNRinxSbg1G0yacpmsSb9wvV5ltIZ66+hfY+90+u2Nudt/v9g6pvOdGg==
|
||||
|
||||
"@pixi/graphics-extras@^7.2.4":
|
||||
version "7.2.4"
|
||||
resolved "https://registry.yarnpkg.com/@pixi/graphics-extras/-/graphics-extras-7.2.4.tgz#72ac967992f239d3671d6e680ac891471619fe07"
|
||||
integrity sha512-0yT91yqF3KLiZI/iLRcfcYlTVpkVyWsfGtWEIorZs0eX+/zYx7um7EJ2h7tFORI/1FxA2maR4td5vpgCwOLJAQ==
|
||||
|
||||
"@pixi/graphics@7.2.4":
|
||||
version "7.2.4"
|
||||
resolved "https://registry.npmmirror.com/@pixi/graphics/-/graphics-7.2.4.tgz#8500b604c36184736926393cb0ca9b9de9afef86"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user