Merge branch 'master' of git.code.tencent.com:jl-framework/graphic-pixi
This commit is contained in:
Yuan
commit
0a0cb0a77a
@ -10,6 +10,9 @@
|
||||
<template v-if="drawStore.drawGraphicType === Link.Type">
|
||||
<link-template></link-template>
|
||||
</template>
|
||||
<template v-if="drawStore.drawGraphicType === Platform.Type">
|
||||
<platform-template></platform-template>
|
||||
</template>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
@ -30,6 +33,9 @@
|
||||
<link-property
|
||||
v-if="drawStore.selectedGraphicType === Link.Type"
|
||||
></link-property>
|
||||
<platform-property
|
||||
v-if="drawStore.selectedGraphicType === Platform.Type"
|
||||
></platform-property>
|
||||
<iscs-fan-property
|
||||
v-else-if="drawStore.selectedGraphicType === IscsFan.Type"
|
||||
></iscs-fan-property>
|
||||
@ -41,10 +47,13 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import LinkTemplate from './templates/LinkTemplate.vue';
|
||||
import PlatformTemplate from './templates/PlatformTemplate.vue';
|
||||
import CanvasProperty from './properties/CanvasProperty.vue';
|
||||
import LinkProperty from './properties/LinkProperty.vue';
|
||||
import PlatformProperty from './properties/PlatformProperty.vue';
|
||||
import IscsFanProperty from './properties/IscsFanProperty.vue';
|
||||
import { Link } from 'src/graphics/link/Link';
|
||||
import { Platform } from 'src/graphics/platform/Platform';
|
||||
import { useDrawStore } from 'src/stores/draw-store';
|
||||
import { IscsFan } from 'src/graphics/iscs-fan/IscsFan';
|
||||
|
||||
|
||||
85
src/components/draw-app/properties/PlatformProperty.vue
Normal file
85
src/components/draw-app/properties/PlatformProperty.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<q-form>
|
||||
<q-input outlined readonly v-model="stationModel.id" label="id" hint="" />
|
||||
<q-input
|
||||
outlined
|
||||
v-model.number="stationModel.lineWidth"
|
||||
type="number"
|
||||
@blur="onUpdate"
|
||||
label="线宽"
|
||||
lazy-rules
|
||||
:rules="[(val) => (val && val > 0) || '画布宽必须大于0']"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
outlined
|
||||
v-model="stationModel.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="stationModel.lineColor"
|
||||
@change="
|
||||
(val) => {
|
||||
stationModel.lineColor = val;
|
||||
onUpdate();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-select
|
||||
outlined
|
||||
v-model="stationModel.hasdoor"
|
||||
:options="options"
|
||||
label="是否有屏蔽门"
|
||||
/>
|
||||
</q-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PlatformData } from 'src/examples/app/graphics/PlatformInteraction';
|
||||
import { Platform } from 'src/graphics/platform/Platform';
|
||||
import { useDrawStore } from 'src/stores/draw-store';
|
||||
import { onMounted, reactive, watch } from 'vue';
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
const stationModel = reactive(new PlatformData());
|
||||
const options = [true, false];
|
||||
|
||||
drawStore.$subscribe;
|
||||
watch(
|
||||
() => drawStore.selectedGraphic,
|
||||
(val) => {
|
||||
if (val && val.type == Platform.Type) {
|
||||
// console.log('station变更');
|
||||
stationModel.copyFrom(val.saveData() as PlatformData);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
//console.log('station 属性表单 mounted');
|
||||
const station = drawStore.selectedGraphic as Platform;
|
||||
|
||||
if (station) {
|
||||
stationModel.copyFrom(station.saveData());
|
||||
}
|
||||
});
|
||||
|
||||
function onUpdate() {
|
||||
//console.log(stationModel, 'station 属性更新');
|
||||
const station = drawStore.selectedGraphic as Platform;
|
||||
if (station) {
|
||||
drawStore.getDrawApp().updateGraphicAndRecord(station, stationModel);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
76
src/components/draw-app/templates/PlatformTemplate.vue
Normal file
76
src/components/draw-app/templates/PlatformTemplate.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<q-form>
|
||||
<q-input
|
||||
outlined
|
||||
v-model.number="template.lineWidth"
|
||||
type="number"
|
||||
@blur="onUpdate"
|
||||
label="线宽 *"
|
||||
lazy-rules
|
||||
:rules="[(val) => (val && val > 0) || '线宽必须大于0']"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
outlined
|
||||
v-model="template.lineColor"
|
||||
@blur="onUpdate"
|
||||
label="线色 *"
|
||||
lazy-rules
|
||||
:rules="[(val) => (val && val.length > 0) || '线色不能为空']"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="colorize" class="cursor-pointer">
|
||||
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
||||
<q-color
|
||||
v-model="template.lineColor"
|
||||
@change="
|
||||
(val) => {
|
||||
template.lineColor = val;
|
||||
onUpdate();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { LinkTemplate } from 'src/graphics/link/Link';
|
||||
import { useDrawStore } from 'src/stores/draw-store';
|
||||
import { onMounted, reactive } from 'vue';
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
const template = reactive({
|
||||
lineWidth: 1,
|
||||
lineColor: '#0000ff',
|
||||
curve: false,
|
||||
segmentsCount: 10,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
const type = drawStore.drawGraphicType;
|
||||
if (type) {
|
||||
const gt = drawStore.drawGraphicTemplate;
|
||||
if (gt) {
|
||||
const lt = gt as LinkTemplate;
|
||||
template.lineWidth = lt.lineWidth;
|
||||
template.lineColor = lt.lineColor;
|
||||
template.curve = lt.curve;
|
||||
template.segmentsCount = lt.segmentsCount;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function onUpdate() {
|
||||
const gt = drawStore.drawGraphicTemplate as LinkTemplate;
|
||||
if (gt) {
|
||||
gt.lineWidth = template.lineWidth;
|
||||
gt.lineColor = template.lineColor;
|
||||
gt.curve = template.curve;
|
||||
gt.segmentsCount = template.segmentsCount;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -6,6 +6,7 @@ message RtssGraphicStorage {
|
||||
Canvas canvas = 1;
|
||||
repeated Link links = 2;
|
||||
repeated IscsFan iscsFans = 3;
|
||||
repeated Platform Platforms = 4;
|
||||
}
|
||||
|
||||
message Canvas {
|
||||
@ -63,6 +64,19 @@ message Link {
|
||||
repeated Point points = 7; // 点坐标列表
|
||||
}
|
||||
|
||||
message Platform {
|
||||
CommonInfo common = 1;
|
||||
string code = 2;
|
||||
bool hasdoor = 3; // 是否有屏蔽门
|
||||
int32 lineWidth = 4; // 线宽
|
||||
string lineColor = 5; // 站台线色
|
||||
string lineColorDoor = 6; // 屏蔽门线色
|
||||
Point point = 7; // 位置坐标
|
||||
float width = 8;//宽度
|
||||
float height = 9; //高度
|
||||
repeated string orbitCode = 10;//站台轨
|
||||
}
|
||||
|
||||
message IscsFan {
|
||||
CommonInfo common = 1;
|
||||
string code = 2;
|
||||
|
||||
82
src/examples/app/graphics/PlatformInteraction.ts
Normal file
82
src/examples/app/graphics/PlatformInteraction.ts
Normal file
@ -0,0 +1,82 @@
|
||||
import * as pb_1 from 'google-protobuf';
|
||||
import { IPointData } from 'pixi.js';
|
||||
import { IPlatformData } from 'src/graphics/platform/Platform';
|
||||
import { graphicData } from '../protos/draw_data_storage';
|
||||
import { GraphicDataBase } from './GraphicDataBase';
|
||||
|
||||
export class PlatformData extends GraphicDataBase implements IPlatformData {
|
||||
constructor(data?: graphicData.Platform) {
|
||||
let platform;
|
||||
if (!data) {
|
||||
platform = new graphicData.Platform({
|
||||
common: GraphicDataBase.defaultCommonInfo(),
|
||||
});
|
||||
} else {
|
||||
platform = data;
|
||||
}
|
||||
super(platform);
|
||||
}
|
||||
|
||||
public get data(): graphicData.Platform {
|
||||
return this.getData<graphicData.Platform>();
|
||||
}
|
||||
|
||||
get code(): string {
|
||||
return this.data.code;
|
||||
}
|
||||
set code(v: string) {
|
||||
this.data.code = v;
|
||||
}
|
||||
get hasdoor(): boolean {
|
||||
return this.data.hasdoor;
|
||||
}
|
||||
set hasdoor(v: boolean) {
|
||||
this.data.hasdoor = 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;
|
||||
}
|
||||
|
||||
clone(): PlatformData {
|
||||
return new PlatformData(this.data.cloneMessage());
|
||||
}
|
||||
copyFrom(data: PlatformData): void {
|
||||
pb_1.Message.copyInto(data.data, this.data);
|
||||
}
|
||||
eq(other: PlatformData): boolean {
|
||||
return pb_1.Message.equals(this.data, other.data);
|
||||
}
|
||||
}
|
||||
@ -4,6 +4,8 @@ import { IscsFan } from 'src/graphics/iscs-fan/IscsFan';
|
||||
import { IscsFanDraw } from 'src/graphics/iscs-fan/IscsFanDrawAssistant';
|
||||
import { Link } from 'src/graphics/link/Link';
|
||||
import { LinkDraw } from 'src/graphics/link/LinkDrawAssistant';
|
||||
import { Platform } from 'src/graphics/platform/Platform';
|
||||
import { PlatformDraw } from 'src/graphics/platform/PlatformDrawAssistant';
|
||||
import {
|
||||
CombinationKey,
|
||||
GraphicApp,
|
||||
@ -16,6 +18,7 @@ import { ContextMenu } from 'src/jlgraphic/ui/ContextMenu';
|
||||
import { MenuItemOptions } from 'src/jlgraphic/ui/Menu';
|
||||
import { IscsFanData } from './graphics/IscsFanInteraction';
|
||||
import { LinkData } from './graphics/LinkInteraction';
|
||||
import { PlatformData } from './graphics/PlatformInteraction';
|
||||
import { graphicData } from './protos/draw_data_storage';
|
||||
|
||||
export function fromStoragePoint(p: graphicData.Point): Point {
|
||||
@ -94,6 +97,9 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
|
||||
new IscsFanDraw(app, () => {
|
||||
return new IscsFanData();
|
||||
}),
|
||||
new PlatformDraw(app, () => {
|
||||
return new PlatformData();
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
@ -131,6 +137,14 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
|
||||
},
|
||||
})
|
||||
);
|
||||
app.addKeyboardListener(
|
||||
new KeyListener({
|
||||
value: 'KeyP',
|
||||
onPress: () => {
|
||||
app.interactionPlugin(Platform.Type).resume();
|
||||
},
|
||||
})
|
||||
);
|
||||
app.addKeyboardListener(
|
||||
new KeyListener({
|
||||
value: '1',
|
||||
@ -172,6 +186,9 @@ export function saveDrawDatas(app: JlDrawApp) {
|
||||
} else if (IscsFan.Type === g.type) {
|
||||
const IscsFanData = (g as IscsFan).saveData();
|
||||
storage.iscsFans.push((IscsFanData as IscsFanData).data);
|
||||
} else if (Platform.Type === g.type) {
|
||||
const platformData = (g as Platform).saveData();
|
||||
storage.Platforms.push((platformData as PlatformData).data);
|
||||
}
|
||||
});
|
||||
const base64 = fromUint8Array(storage.serialize());
|
||||
@ -196,6 +213,9 @@ export function loadDrawDatas(app: GraphicApp) {
|
||||
storage.iscsFans.forEach((fan) => {
|
||||
datas.push(new IscsFanData(fan));
|
||||
});
|
||||
storage.Platforms.forEach((platform) => {
|
||||
datas.push(new PlatformData(platform));
|
||||
});
|
||||
app.loadGraphic(datas);
|
||||
} else {
|
||||
app.loadGraphic([]);
|
||||
|
||||
@ -11,9 +11,10 @@ export namespace graphicData {
|
||||
canvas?: Canvas;
|
||||
links?: Link[];
|
||||
iscsFans?: IscsFan[];
|
||||
Platforms?: Platform[];
|
||||
}) {
|
||||
super();
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3], this.#one_of_decls);
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3, 4], this.#one_of_decls);
|
||||
if (!Array.isArray(data) && typeof data == "object") {
|
||||
if ("canvas" in data && data.canvas != undefined) {
|
||||
this.canvas = data.canvas;
|
||||
@ -24,6 +25,9 @@ export namespace graphicData {
|
||||
if ("iscsFans" in data && data.iscsFans != undefined) {
|
||||
this.iscsFans = data.iscsFans;
|
||||
}
|
||||
if ("Platforms" in data && data.Platforms != undefined) {
|
||||
this.Platforms = data.Platforms;
|
||||
}
|
||||
}
|
||||
}
|
||||
get canvas() {
|
||||
@ -47,10 +51,17 @@ export namespace graphicData {
|
||||
set iscsFans(value: IscsFan[]) {
|
||||
pb_1.Message.setRepeatedWrapperField(this, 3, value);
|
||||
}
|
||||
get Platforms() {
|
||||
return pb_1.Message.getRepeatedWrapperField(this, Platform, 4) as Platform[];
|
||||
}
|
||||
set Platforms(value: Platform[]) {
|
||||
pb_1.Message.setRepeatedWrapperField(this, 4, value);
|
||||
}
|
||||
static fromObject(data: {
|
||||
canvas?: ReturnType<typeof Canvas.prototype.toObject>;
|
||||
links?: ReturnType<typeof Link.prototype.toObject>[];
|
||||
iscsFans?: ReturnType<typeof IscsFan.prototype.toObject>[];
|
||||
Platforms?: ReturnType<typeof Platform.prototype.toObject>[];
|
||||
}): RtssGraphicStorage {
|
||||
const message = new RtssGraphicStorage({});
|
||||
if (data.canvas != null) {
|
||||
@ -62,6 +73,9 @@ export namespace graphicData {
|
||||
if (data.iscsFans != null) {
|
||||
message.iscsFans = data.iscsFans.map(item => IscsFan.fromObject(item));
|
||||
}
|
||||
if (data.Platforms != null) {
|
||||
message.Platforms = data.Platforms.map(item => Platform.fromObject(item));
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
@ -69,6 +83,7 @@ export namespace graphicData {
|
||||
canvas?: ReturnType<typeof Canvas.prototype.toObject>;
|
||||
links?: ReturnType<typeof Link.prototype.toObject>[];
|
||||
iscsFans?: ReturnType<typeof IscsFan.prototype.toObject>[];
|
||||
Platforms?: ReturnType<typeof Platform.prototype.toObject>[];
|
||||
} = {};
|
||||
if (this.canvas != null) {
|
||||
data.canvas = this.canvas.toObject();
|
||||
@ -79,6 +94,9 @@ export namespace graphicData {
|
||||
if (this.iscsFans != null) {
|
||||
data.iscsFans = this.iscsFans.map((item: IscsFan) => item.toObject());
|
||||
}
|
||||
if (this.Platforms != null) {
|
||||
data.Platforms = this.Platforms.map((item: Platform) => item.toObject());
|
||||
}
|
||||
return data;
|
||||
}
|
||||
serialize(): Uint8Array;
|
||||
@ -91,6 +109,8 @@ export namespace graphicData {
|
||||
writer.writeRepeatedMessage(2, this.links, (item: Link) => item.serialize(writer));
|
||||
if (this.iscsFans.length)
|
||||
writer.writeRepeatedMessage(3, this.iscsFans, (item: IscsFan) => item.serialize(writer));
|
||||
if (this.Platforms.length)
|
||||
writer.writeRepeatedMessage(4, this.Platforms, (item: Platform) => item.serialize(writer));
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
@ -109,6 +129,9 @@ export namespace graphicData {
|
||||
case 3:
|
||||
reader.readMessage(message.iscsFans, () => pb_1.Message.addToRepeatedWrapperField(message, 3, IscsFan.deserialize(reader), IscsFan));
|
||||
break;
|
||||
case 4:
|
||||
reader.readMessage(message.Platforms, () => pb_1.Message.addToRepeatedWrapperField(message, 4, Platform.deserialize(reader), Platform));
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
@ -935,6 +958,286 @@ export namespace graphicData {
|
||||
return Link.deserialize(bytes);
|
||||
}
|
||||
}
|
||||
export class Platform extends pb_1.Message {
|
||||
#one_of_decls: number[][] = [];
|
||||
constructor(data?: any[] | {
|
||||
common?: CommonInfo;
|
||||
code?: string;
|
||||
hasdoor?: boolean;
|
||||
lineWidth?: number;
|
||||
lineColor?: string;
|
||||
lineColorDoor?: string;
|
||||
point?: Point;
|
||||
width?: number;
|
||||
height?: number;
|
||||
orbitCode?: string[];
|
||||
}) {
|
||||
super();
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [10], 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 ("hasdoor" in data && data.hasdoor != undefined) {
|
||||
this.hasdoor = data.hasdoor;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
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 hasdoor() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 3, false) as boolean;
|
||||
}
|
||||
set hasdoor(value: boolean) {
|
||||
pb_1.Message.setField(this, 3, value);
|
||||
}
|
||||
get lineWidth() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 4, 0) as number;
|
||||
}
|
||||
set lineWidth(value: number) {
|
||||
pb_1.Message.setField(this, 4, value);
|
||||
}
|
||||
get lineColor() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 5, "") as string;
|
||||
}
|
||||
set lineColor(value: string) {
|
||||
pb_1.Message.setField(this, 5, value);
|
||||
}
|
||||
get lineColorDoor() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 6, "") as string;
|
||||
}
|
||||
set lineColorDoor(value: string) {
|
||||
pb_1.Message.setField(this, 6, value);
|
||||
}
|
||||
get point() {
|
||||
return pb_1.Message.getWrapperField(this, Point, 7) as Point;
|
||||
}
|
||||
set point(value: Point) {
|
||||
pb_1.Message.setWrapperField(this, 7, value);
|
||||
}
|
||||
get has_point() {
|
||||
return pb_1.Message.getField(this, 7) != null;
|
||||
}
|
||||
get width() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 8, 0) as number;
|
||||
}
|
||||
set width(value: number) {
|
||||
pb_1.Message.setField(this, 8, value);
|
||||
}
|
||||
get height() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 9, 0) as number;
|
||||
}
|
||||
set height(value: number) {
|
||||
pb_1.Message.setField(this, 9, value);
|
||||
}
|
||||
get orbitCode() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 10, []) as string[];
|
||||
}
|
||||
set orbitCode(value: string[]) {
|
||||
pb_1.Message.setField(this, 10, value);
|
||||
}
|
||||
static fromObject(data: {
|
||||
common?: ReturnType<typeof CommonInfo.prototype.toObject>;
|
||||
code?: string;
|
||||
hasdoor?: boolean;
|
||||
lineWidth?: number;
|
||||
lineColor?: string;
|
||||
lineColorDoor?: string;
|
||||
point?: ReturnType<typeof Point.prototype.toObject>;
|
||||
width?: number;
|
||||
height?: number;
|
||||
orbitCode?: string[];
|
||||
}): Platform {
|
||||
const message = new Platform({});
|
||||
if (data.common != null) {
|
||||
message.common = CommonInfo.fromObject(data.common);
|
||||
}
|
||||
if (data.code != null) {
|
||||
message.code = data.code;
|
||||
}
|
||||
if (data.hasdoor != null) {
|
||||
message.hasdoor = data.hasdoor;
|
||||
}
|
||||
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;
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
const data: {
|
||||
common?: ReturnType<typeof CommonInfo.prototype.toObject>;
|
||||
code?: string;
|
||||
hasdoor?: boolean;
|
||||
lineWidth?: number;
|
||||
lineColor?: string;
|
||||
lineColorDoor?: string;
|
||||
point?: ReturnType<typeof Point.prototype.toObject>;
|
||||
width?: number;
|
||||
height?: number;
|
||||
orbitCode?: string[];
|
||||
} = {};
|
||||
if (this.common != null) {
|
||||
data.common = this.common.toObject();
|
||||
}
|
||||
if (this.code != null) {
|
||||
data.code = this.code;
|
||||
}
|
||||
if (this.hasdoor != null) {
|
||||
data.hasdoor = this.hasdoor;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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.hasdoor != false)
|
||||
writer.writeBool(3, this.hasdoor);
|
||||
if (this.lineWidth != 0)
|
||||
writer.writeInt32(4, this.lineWidth);
|
||||
if (this.lineColor.length)
|
||||
writer.writeString(5, this.lineColor);
|
||||
if (this.lineColorDoor.length)
|
||||
writer.writeString(6, this.lineColorDoor);
|
||||
if (this.has_point)
|
||||
writer.writeMessage(7, this.point, () => this.point.serialize(writer));
|
||||
if (this.width != 0)
|
||||
writer.writeFloat(8, this.width);
|
||||
if (this.height != 0)
|
||||
writer.writeFloat(9, this.height);
|
||||
if (this.orbitCode.length)
|
||||
writer.writeRepeatedString(10, this.orbitCode);
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Platform {
|
||||
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Platform();
|
||||
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.hasdoor = reader.readBool();
|
||||
break;
|
||||
case 4:
|
||||
message.lineWidth = reader.readInt32();
|
||||
break;
|
||||
case 5:
|
||||
message.lineColor = reader.readString();
|
||||
break;
|
||||
case 6:
|
||||
message.lineColorDoor = reader.readString();
|
||||
break;
|
||||
case 7:
|
||||
reader.readMessage(message.point, () => message.point = Point.deserialize(reader));
|
||||
break;
|
||||
case 8:
|
||||
message.width = reader.readFloat();
|
||||
break;
|
||||
case 9:
|
||||
message.height = reader.readFloat();
|
||||
break;
|
||||
case 10:
|
||||
pb_1.Message.addToRepeatedField(message, 10, reader.readString());
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
return message;
|
||||
}
|
||||
serializeBinary(): Uint8Array {
|
||||
return this.serialize();
|
||||
}
|
||||
static deserializeBinary(bytes: Uint8Array): Platform {
|
||||
return Platform.deserialize(bytes);
|
||||
}
|
||||
}
|
||||
export class IscsFan extends pb_1.Message {
|
||||
#one_of_decls: number[][] = [];
|
||||
constructor(data?: any[] | {
|
||||
|
||||
102
src/graphics/platform/Platform.ts
Normal file
102
src/graphics/platform/Platform.ts
Normal file
@ -0,0 +1,102 @@
|
||||
import { Color, Graphics, IPointData, Rectangle } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
JlGraphic,
|
||||
JlGraphicTemplate,
|
||||
getRectangleCenter,
|
||||
} from 'src/jlgraphic';
|
||||
|
||||
export interface IPlatformData extends GraphicData {
|
||||
get code(): string; // 编号
|
||||
set code(v: string);
|
||||
get hasdoor(): boolean; // 是否有屏蔽门
|
||||
set hasdoor(v: boolean);
|
||||
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);
|
||||
clone(): IPlatformData;
|
||||
copyFrom(data: IPlatformData): void;
|
||||
eq(other: IPlatformData): boolean;
|
||||
}
|
||||
|
||||
export class Platform extends JlGraphic {
|
||||
static Type = 'Platform';
|
||||
|
||||
platformGraphic: Graphics;
|
||||
doorGraphic: Graphics;
|
||||
constructor() {
|
||||
super(Platform.Type);
|
||||
this.platformGraphic = new Graphics();
|
||||
this.doorGraphic = new Graphics();
|
||||
this.addChild(this.platformGraphic);
|
||||
this.addChild(this.doorGraphic);
|
||||
}
|
||||
|
||||
get datas(): IPlatformData {
|
||||
return this.getDatas<IPlatformData>();
|
||||
}
|
||||
doRepaint(): void {
|
||||
//屏蔽门
|
||||
const doorGraphic = this.doorGraphic;
|
||||
doorGraphic.clear();
|
||||
if (this.datas.hasdoor) {
|
||||
doorGraphic.clear();
|
||||
doorGraphic.lineStyle(
|
||||
this.datas.lineWidth,
|
||||
new Color(this.datas.lineColorDoor)
|
||||
);
|
||||
const width = this.datas.width;
|
||||
const height = this.datas.height;
|
||||
doorGraphic.moveTo(
|
||||
-width / 2 - this.datas.lineWidth / 2,
|
||||
-height / 2 - 10
|
||||
);
|
||||
doorGraphic.lineTo(
|
||||
width / 2 + this.datas.lineWidth / 2,
|
||||
-height / 2 - 10
|
||||
);
|
||||
}
|
||||
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 rect = new Rectangle(0, 0, this.datas.width, this.datas.height);
|
||||
platformGraphic.pivot = getRectangleCenter(rect);
|
||||
this.position.set(this.datas.point.x, this.datas.point.y);
|
||||
}
|
||||
}
|
||||
|
||||
export class PlatformTemplate extends JlGraphicTemplate<Platform> {
|
||||
hasdoor: boolean;
|
||||
lineWidth: number;
|
||||
lineColor: string;
|
||||
lineColorDoor: string;
|
||||
width: number;
|
||||
height: number;
|
||||
constructor() {
|
||||
super(Platform.Type);
|
||||
this.lineWidth = 2;
|
||||
this.lineColor = '#000000';
|
||||
this.lineColorDoor = '0x008000';
|
||||
this.hasdoor = true;
|
||||
this.width = 100;
|
||||
this.height = 30;
|
||||
}
|
||||
new(): Platform {
|
||||
return new Platform();
|
||||
}
|
||||
}
|
||||
113
src/graphics/platform/PlatformDrawAssistant.ts
Normal file
113
src/graphics/platform/PlatformDrawAssistant.ts
Normal file
@ -0,0 +1,113 @@
|
||||
import {
|
||||
Color,
|
||||
FederatedPointerEvent,
|
||||
Graphics,
|
||||
Point,
|
||||
Rectangle,
|
||||
} from 'pixi.js';
|
||||
import {
|
||||
GraphicDrawAssistant,
|
||||
JlDrawApp,
|
||||
KeyListener,
|
||||
getRectangleCenter,
|
||||
} from 'src/jlgraphic';
|
||||
|
||||
import { IPlatformData, Platform, PlatformTemplate } from './Platform';
|
||||
|
||||
export interface ILinkDrawOptions {
|
||||
newData: () => IPlatformData;
|
||||
}
|
||||
|
||||
export class PlatformDraw extends GraphicDrawAssistant<
|
||||
PlatformTemplate,
|
||||
IPlatformData
|
||||
> {
|
||||
point: Point = new Point(0, 0);
|
||||
platformGraphic: Graphics = new Graphics();
|
||||
doorGraphic: Graphics = new Graphics();
|
||||
|
||||
// 快捷绘制
|
||||
keypListener: KeyListener = new KeyListener({
|
||||
value: 'KeyP',
|
||||
global: true,
|
||||
onPress: () => {
|
||||
this.graphicTemplate.hasdoor = true;
|
||||
},
|
||||
});
|
||||
|
||||
constructor(app: JlDrawApp, createData: () => IPlatformData) {
|
||||
super(
|
||||
app,
|
||||
new PlatformTemplate(),
|
||||
createData,
|
||||
Platform.Type,
|
||||
'站台Platform'
|
||||
);
|
||||
this.container.addChild(this.platformGraphic);
|
||||
this.container.addChild(this.doorGraphic);
|
||||
this.graphicTemplate.hasdoor = true;
|
||||
}
|
||||
|
||||
bind(): void {
|
||||
super.bind();
|
||||
this.app.addKeyboardListener(this.keypListener);
|
||||
}
|
||||
unbind(): void {
|
||||
super.unbind();
|
||||
this.app.removeKeyboardListener(this.keypListener);
|
||||
}
|
||||
|
||||
clearCache(): void {
|
||||
this.platformGraphic.clear();
|
||||
this.doorGraphic.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 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);
|
||||
}
|
||||
|
||||
//站台
|
||||
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);
|
||||
}
|
||||
prepareData(data: IPlatformData): boolean {
|
||||
const template = this.graphicTemplate;
|
||||
data.hasdoor = template.hasdoor;
|
||||
data.point = this.point;
|
||||
data.lineWidth = template.lineWidth;
|
||||
data.lineColor = template.lineColor;
|
||||
data.lineColorDoor = template.lineColorDoor;
|
||||
data.width = template.width;
|
||||
data.height = template.height;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user