Merge branch 'master' of https://git.code.tencent.com/jl-framework/graphic-pixi
This commit is contained in:
fan
commit
f3abe56ecb
@ -10,12 +10,18 @@
|
||||
<template v-if="drawStore.drawGraphicType === Link.Type">
|
||||
<link-template></link-template>
|
||||
</template>
|
||||
<template v-if="drawStore.drawGraphicType === Rect.Type">
|
||||
<rect-template></rect-template>
|
||||
</template>
|
||||
<template v-if="drawStore.drawGraphicType === Platform.Type">
|
||||
<platform-template></platform-template>
|
||||
</template>
|
||||
<template v-if="drawStore.drawGraphicType === Station.Type">
|
||||
<station-template></station-template>
|
||||
</template>
|
||||
<template v-if="drawStore.drawGraphicType === Train.Type">
|
||||
<TrainProperty></TrainProperty>
|
||||
</template>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
@ -36,12 +42,18 @@
|
||||
<link-property
|
||||
v-if="drawStore.selectedGraphicType === Link.Type"
|
||||
></link-property>
|
||||
<rect-property
|
||||
v-if="drawStore.selectedGraphicType === Rect.Type"
|
||||
></rect-property>
|
||||
<platform-property
|
||||
v-if="drawStore.selectedGraphicType === Platform.Type"
|
||||
></platform-property>
|
||||
<station-property
|
||||
v-if="drawStore.selectedGraphicType === Station.Type"
|
||||
></station-property>
|
||||
<train-property
|
||||
v-if="drawStore.selectedGraphicType === Train.Type"
|
||||
></train-property>
|
||||
<iscs-fan-property
|
||||
v-else-if="drawStore.selectedGraphicType === IscsFan.Type"
|
||||
></iscs-fan-property>
|
||||
@ -56,17 +68,22 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import LinkTemplate from './templates/LinkTemplate.vue';
|
||||
import RectTemplate from './templates/RectTemplate.vue';
|
||||
import PlatformTemplate from './templates/PlatformTemplate.vue';
|
||||
import StationTemplate from './templates/StationTemplate.vue';
|
||||
import CanvasProperty from './properties/CanvasProperty.vue';
|
||||
import LinkProperty from './properties/LinkProperty.vue';
|
||||
import RectProperty from './properties/RectProperty.vue';
|
||||
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';
|
||||
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';
|
||||
|
||||
74
src/components/draw-app/properties/RectProperty.vue
Normal file
74
src/components/draw-app/properties/RectProperty.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<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-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { RectData } from 'src/examples/app/graphics/RectInteraction';
|
||||
import { Rect } from 'src/graphics/rect/Rect';
|
||||
import { useDrawStore } from 'src/stores/draw-store';
|
||||
import { onMounted, reactive, watch } from 'vue';
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
const stationModel = reactive(new RectData());
|
||||
|
||||
drawStore.$subscribe;
|
||||
watch(
|
||||
() => drawStore.selectedGraphic,
|
||||
(val) => {
|
||||
if (val && val.type == Rect.Type) {
|
||||
stationModel.copyFrom(val.saveData() as RectData);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
const station = drawStore.selectedGraphic as Rect;
|
||||
|
||||
if (station) {
|
||||
stationModel.copyFrom(station.saveData());
|
||||
}
|
||||
});
|
||||
|
||||
function onUpdate() {
|
||||
const station = drawStore.selectedGraphic as Rect;
|
||||
if (station) {
|
||||
drawStore.getDrawApp().updateGraphicAndRecord(station, stationModel);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -41,6 +41,114 @@
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
outlined
|
||||
@blur="onUpdate"
|
||||
v-model="hasCircle"
|
||||
:options="optionsCircle"
|
||||
label="是否有圆圈"
|
||||
/>
|
||||
<div v-if="stationModel.hasCircle">
|
||||
<q-item-label header>位置</q-item-label>
|
||||
<q-item>
|
||||
<q-item-section no-wrap class="q-gutter-sm column">
|
||||
<div class="row">
|
||||
<q-input
|
||||
outlined
|
||||
@blur="onUpdate"
|
||||
label="x"
|
||||
v-model.number="stationModel.circlePoint.x"
|
||||
type="number"
|
||||
step="any"
|
||||
class="col"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
@blur="onUpdate"
|
||||
label="y"
|
||||
v-model.number="stationModel.circlePoint.y"
|
||||
type="number"
|
||||
step="any"
|
||||
class="col"
|
||||
/>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-input
|
||||
outlined
|
||||
v-model.number="stationModel.radius"
|
||||
type="number"
|
||||
@blur="onUpdate"
|
||||
label="半径"
|
||||
lazy-rules
|
||||
:rules="[(val) => (val && val > 0) || '半径大小必须大于0']"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
v-model="stationModel.fillColor"
|
||||
@blur="onUpdate"
|
||||
label="填充颜色"
|
||||
lazy-rules
|
||||
:rules="[(val) => (val && val.length > 0) || '线色不能为空']"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="colorize" class="cursor-pointer">
|
||||
<q-popup-proxy
|
||||
cover
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<q-color
|
||||
v-model="stationModel.fillColor"
|
||||
@change="
|
||||
(val) => {
|
||||
stationModel.fillColor = val;
|
||||
onUpdate();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
outlined
|
||||
v-model.number="stationModel.borderWidth"
|
||||
type="number"
|
||||
@blur="onUpdate"
|
||||
label="边框宽度"
|
||||
lazy-rules
|
||||
:rules="[(val) => (val && val > 0) || '画布宽必须大于0']"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
v-model="stationModel.borderColor"
|
||||
@blur="onUpdate"
|
||||
label="边框颜色"
|
||||
lazy-rules
|
||||
:rules="[(val) => (val && val.length > 0) || '线色不能为空']"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="colorize" class="cursor-pointer">
|
||||
<q-popup-proxy
|
||||
cover
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<q-color
|
||||
v-model="stationModel.borderColor"
|
||||
@change="
|
||||
(val) => {
|
||||
stationModel.borderColor = val;
|
||||
onUpdate();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</q-form>
|
||||
</template>
|
||||
|
||||
@ -48,10 +156,20 @@
|
||||
import { StationData } from 'src/examples/app/graphics/StationInteraction';
|
||||
import { Station } from 'src/graphics/station/Station';
|
||||
import { useDrawStore } from 'src/stores/draw-store';
|
||||
import { onMounted, reactive, watch } from 'vue';
|
||||
import { onMounted, reactive, ref, watch } from 'vue';
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
const stationModel = reactive(new StationData());
|
||||
const hasCircle = ref('是');
|
||||
const optionsCircle = ['是', '否'];
|
||||
enum showSelect {
|
||||
是 = 'true',
|
||||
否 = 'false',
|
||||
}
|
||||
enum showSelectData {
|
||||
true = '是',
|
||||
false = '否',
|
||||
}
|
||||
|
||||
drawStore.$subscribe;
|
||||
watch(
|
||||
@ -59,6 +177,7 @@ watch(
|
||||
(val) => {
|
||||
if (val && val.type == Station.Type) {
|
||||
stationModel.copyFrom(val.saveData() as StationData);
|
||||
hasCircle.value = (showSelectData as never)[stationModel.hasCircle + ''];
|
||||
}
|
||||
}
|
||||
);
|
||||
@ -67,10 +186,12 @@ onMounted(() => {
|
||||
const station = drawStore.selectedGraphic as Station;
|
||||
if (station) {
|
||||
stationModel.copyFrom(station.saveData());
|
||||
hasCircle.value = (showSelectData as never)[stationModel.hasCircle + ''];
|
||||
}
|
||||
});
|
||||
|
||||
function onUpdate() {
|
||||
stationModel.hasCircle = JSON.parse((showSelect as never)[hasCircle.value]);
|
||||
const station = drawStore.selectedGraphic as Station;
|
||||
if (station) {
|
||||
drawStore.getDrawApp().updateGraphicAndRecord(station, stationModel);
|
||||
|
||||
198
src/components/draw-app/properties/TrainProperty.vue
Normal file
198
src/components/draw-app/properties/TrainProperty.vue
Normal file
@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<q-form>
|
||||
<q-input outlined readonly v-model="trainModel.id" label="id" hint="" />
|
||||
<q-input
|
||||
outlined
|
||||
v-model="trainModel.code"
|
||||
label="车号"
|
||||
hint=""
|
||||
@blur="onUpdate"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
v-model="trainModel.codeColor"
|
||||
@blur="onUpdate"
|
||||
label="车号颜色"
|
||||
lazy-rules
|
||||
:rules="[(val) => (val && val.length > 0) || '车号颜色不能为空']"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="colorize" class="cursor-pointer">
|
||||
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
||||
<q-color
|
||||
v-model="trainModel.codeColor"
|
||||
@change="
|
||||
(val) => {
|
||||
trainModel.codeColor = val;
|
||||
onUpdate();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
outlined
|
||||
v-model="trainModel.headColor"
|
||||
@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="trainModel.headColor"
|
||||
@change="
|
||||
(val) => {
|
||||
trainModel.headColor = val;
|
||||
onUpdate();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
outlined
|
||||
v-model.number="trainModel.codeFontSize"
|
||||
type="number"
|
||||
@blur="onUpdate"
|
||||
label="字体大小"
|
||||
lazy-rules
|
||||
:rules="[(val) => (val && val > 0) || '字体大小必须大于0']"
|
||||
/>
|
||||
<q-select
|
||||
outlined
|
||||
@blur="onUpdate"
|
||||
v-model="hasBorder"
|
||||
:options="optionsDoor"
|
||||
label="是否有边框"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
v-model.number="trainModel.borderWidth"
|
||||
type="number"
|
||||
@blur="onUpdate"
|
||||
label="边框线宽"
|
||||
lazy-rules
|
||||
:rules="[(val) => (val && val > 0) || '边框线宽必须大于0']"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
v-model="trainModel.borderColor"
|
||||
@blur="onUpdate"
|
||||
label="边框颜色"
|
||||
lazy-rules
|
||||
:rules="[(val) => (val && val.length > 0) || '边框颜色不能为空']"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="colorize" class="cursor-pointer">
|
||||
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
||||
<q-color
|
||||
v-model="trainModel.borderColor"
|
||||
@change="
|
||||
(val) => {
|
||||
trainModel.borderColor = val;
|
||||
onUpdate();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
outlined
|
||||
v-model="trainModel.bodyColor"
|
||||
@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="trainModel.bodyColor"
|
||||
@change="
|
||||
(val) => {
|
||||
trainModel.bodyColor = val;
|
||||
onUpdate();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
outlined
|
||||
@blur="onUpdate"
|
||||
v-model="trainDirection"
|
||||
:options="optionsDirection"
|
||||
label="行驶方向"
|
||||
/>
|
||||
</q-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { TrainData } from 'src/examples/app/graphics/TrainInteraction';
|
||||
import { Train } from 'src/graphics/train/Train';
|
||||
import { useDrawStore } from 'src/stores/draw-store';
|
||||
import { onMounted, reactive, ref, watch } from 'vue';
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
const trainModel = reactive(new TrainData());
|
||||
const hasBorder = ref('是');
|
||||
const optionsDoor = ['是', '否'];
|
||||
const trainDirection = ref('向左');
|
||||
const optionsDirection = ['向左', '向右'];
|
||||
enum showSelect {
|
||||
是 = 'true',
|
||||
否 = 'false',
|
||||
向左 = 'left',
|
||||
向右 = 'right',
|
||||
}
|
||||
enum showSelectData {
|
||||
true = '是',
|
||||
false = '否',
|
||||
left = '向左',
|
||||
right = '向右',
|
||||
}
|
||||
|
||||
drawStore.$subscribe;
|
||||
watch(
|
||||
() => drawStore.selectedGraphic,
|
||||
(val) => {
|
||||
if (val && val.type == Train.Type) {
|
||||
trainModel.copyFrom(val.saveData() as TrainData);
|
||||
hasBorder.value = (showSelectData as never)[trainModel.hasBorder + ''];
|
||||
trainDirection.value = (showSelectData as never)[
|
||||
trainModel.trainDirection
|
||||
];
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
const train = drawStore.selectedGraphic as Train;
|
||||
if (train) {
|
||||
trainModel.copyFrom(train.saveData());
|
||||
hasBorder.value = (showSelectData as never)[trainModel.hasBorder + ''];
|
||||
trainDirection.value = (showSelectData as never)[trainModel.trainDirection];
|
||||
}
|
||||
});
|
||||
|
||||
function onUpdate() {
|
||||
trainModel.hasBorder = JSON.parse((showSelect as never)[hasBorder.value]);
|
||||
trainModel.trainDirection = (showSelect as never)[trainDirection.value];
|
||||
const train = drawStore.selectedGraphic as Train;
|
||||
if (train) {
|
||||
drawStore.getDrawApp().updateGraphicAndRecord(train, trainModel);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
76
src/components/draw-app/templates/RectTemplate.vue
Normal file
76
src/components/draw-app/templates/RectTemplate.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>
|
||||
69
src/components/draw-app/templates/TrainTemplate.vue
Normal file
69
src/components/draw-app/templates/TrainTemplate.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<q-form>
|
||||
<q-input
|
||||
outlined
|
||||
v-model.number="template.codeFontSize"
|
||||
type="number"
|
||||
@blur="onUpdate"
|
||||
label="字体大小 *"
|
||||
lazy-rules
|
||||
:rules="[(val) => (val && val > 0) || '字体大小必须大于0']"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
v-model="template.headColor"
|
||||
@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.headColor"
|
||||
@change="
|
||||
(val) => {
|
||||
template.headColor = val;
|
||||
onUpdate();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { TrainTemplate } from 'src/graphics/train/Train';
|
||||
import { useDrawStore } from 'src/stores/draw-store';
|
||||
import { onMounted, reactive } from 'vue';
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
const template = reactive({
|
||||
codeFontSize: 22,
|
||||
headColor: '#00FF00',
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
const type = drawStore.drawGraphicType;
|
||||
if (type) {
|
||||
const gt = drawStore.drawGraphicTemplate;
|
||||
if (gt) {
|
||||
const lt = gt as TrainTemplate;
|
||||
template.codeFontSize = lt.codeFontSize;
|
||||
template.headColor = lt.headColor;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function onUpdate() {
|
||||
const gt = drawStore.drawGraphicTemplate as TrainTemplate;
|
||||
if (gt) {
|
||||
gt.codeFontSize = template.codeFontSize;
|
||||
gt.headColor = template.headColor;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -8,7 +8,9 @@ message RtssGraphicStorage {
|
||||
repeated IscsFan iscsFans = 3;
|
||||
repeated Platform Platforms = 4;
|
||||
repeated Station stations = 5;
|
||||
repeated Signal signals = 6;
|
||||
repeated Rect Rects = 6;
|
||||
repeated Train train = 7;
|
||||
repeated Signal signals = 8;
|
||||
}
|
||||
|
||||
message Canvas {
|
||||
@ -66,6 +68,17 @@ message Link {
|
||||
repeated Point points = 7; // 点坐标列表
|
||||
}
|
||||
|
||||
message Rect {
|
||||
CommonInfo common = 1;
|
||||
string code = 2;
|
||||
int32 lineWidth = 3; // 线宽
|
||||
string lineColor = 4; // 线色
|
||||
Point point = 5; // 位置坐标
|
||||
float width = 6;//宽度
|
||||
float height = 7; //高度
|
||||
repeated Point points = 8; // 点坐标列表
|
||||
}
|
||||
|
||||
message Platform {
|
||||
CommonInfo common = 1;
|
||||
string code = 2;
|
||||
@ -83,10 +96,29 @@ message Platform {
|
||||
message Station {
|
||||
CommonInfo common = 1;
|
||||
string code = 2;
|
||||
string codeColor = 3; // 车站字体颜色
|
||||
int32 codeFontSize = 4; // 车站字体大小
|
||||
Point point = 5; // 位置坐标
|
||||
bool hasCircle = 3; // 是否有圆圈--线网图
|
||||
int32 radius = 4; // 半径
|
||||
int32 borderWidth = 5; // 边框线宽
|
||||
string borderColor = 6; // 边框颜色
|
||||
string fillColor = 7; // 圆填充颜色
|
||||
string codeColor = 8; // 车站字体颜色
|
||||
int32 codeFontSize = 9; // 车站字体大小
|
||||
Point point = 10; // 位置坐标
|
||||
Point circlePoint = 11; // 位置坐标
|
||||
}
|
||||
|
||||
message Train {
|
||||
CommonInfo common = 1;
|
||||
string code = 2;
|
||||
string codeColor = 3; // 车号颜色
|
||||
int32 codeFontSize = 4; // 车号字体大小
|
||||
Point point = 5; // 位置坐标
|
||||
string trainDirection = 6; // 行驶方向
|
||||
bool hasBorder = 7; // 是否有边框
|
||||
int32 borderWidth = 8; // 边框线宽
|
||||
string borderColor = 9; // 边框颜色
|
||||
string headColor = 10; // 箭头颜色
|
||||
string bodyColor = 11; // 背景色
|
||||
}
|
||||
|
||||
message IscsFan {
|
||||
|
||||
77
src/examples/app/graphics/RectInteraction.ts
Normal file
77
src/examples/app/graphics/RectInteraction.ts
Normal file
@ -0,0 +1,77 @@
|
||||
import * as pb_1 from 'google-protobuf';
|
||||
import { IPointData } from 'pixi.js';
|
||||
import { IRectData } from 'src/graphics/rect/Rect';
|
||||
import { graphicData } from '../protos/draw_data_storage';
|
||||
import { GraphicDataBase } from './GraphicDataBase';
|
||||
|
||||
export class RectData extends GraphicDataBase implements IRectData {
|
||||
constructor(data?: graphicData.Rect) {
|
||||
let rect;
|
||||
if (!data) {
|
||||
rect = new graphicData.Rect({
|
||||
common: GraphicDataBase.defaultCommonInfo(),
|
||||
});
|
||||
} else {
|
||||
rect = data;
|
||||
}
|
||||
super(rect);
|
||||
}
|
||||
|
||||
public get data(): graphicData.Rect {
|
||||
return this.getData<graphicData.Rect>();
|
||||
}
|
||||
|
||||
get code(): string {
|
||||
return this.data.code;
|
||||
}
|
||||
set code(v: string) {
|
||||
this.data.code = 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 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;
|
||||
}
|
||||
get points(): IPointData[] {
|
||||
return this.data.points;
|
||||
}
|
||||
set points(points: IPointData[]) {
|
||||
this.data.points = points.map(
|
||||
(p) => new graphicData.Point({ x: p.x, y: p.y })
|
||||
);
|
||||
}
|
||||
clone(): RectData {
|
||||
return new RectData(this.data.cloneMessage());
|
||||
}
|
||||
copyFrom(data: RectData): void {
|
||||
pb_1.Message.copyInto(data.data, this.data);
|
||||
}
|
||||
eq(other: RectData): boolean {
|
||||
return pb_1.Message.equals(this.data, other.data);
|
||||
}
|
||||
}
|
||||
@ -26,6 +26,36 @@ export class StationData extends GraphicDataBase implements IStationData {
|
||||
set code(v: string) {
|
||||
this.data.code = v;
|
||||
}
|
||||
get hasCircle(): boolean {
|
||||
return this.data.hasCircle;
|
||||
}
|
||||
set hasCircle(v: boolean) {
|
||||
this.data.hasCircle = v;
|
||||
}
|
||||
get radius(): number {
|
||||
return this.data.radius;
|
||||
}
|
||||
set radius(v: number) {
|
||||
this.data.radius = v;
|
||||
}
|
||||
get borderWidth(): number {
|
||||
return this.data.borderWidth;
|
||||
}
|
||||
set borderWidth(v: number) {
|
||||
this.data.borderWidth = v;
|
||||
}
|
||||
get borderColor(): string {
|
||||
return this.data.borderColor;
|
||||
}
|
||||
set borderColor(v: string) {
|
||||
this.data.borderColor = v;
|
||||
}
|
||||
get fillColor(): string {
|
||||
return this.data.fillColor;
|
||||
}
|
||||
set fillColor(v: string) {
|
||||
this.data.fillColor = v;
|
||||
}
|
||||
get codeColor(): string {
|
||||
return this.data.codeColor;
|
||||
}
|
||||
@ -44,6 +74,12 @@ export class StationData extends GraphicDataBase implements IStationData {
|
||||
set point(point: IPointData) {
|
||||
this.data.point = new graphicData.Point({ x: point.x, y: point.y });
|
||||
}
|
||||
get circlePoint(): IPointData {
|
||||
return this.data.circlePoint;
|
||||
}
|
||||
set circlePoint(point: IPointData) {
|
||||
this.data.circlePoint = new graphicData.Point({ x: point.x, y: point.y });
|
||||
}
|
||||
clone(): StationData {
|
||||
return new StationData(this.data.cloneMessage());
|
||||
}
|
||||
|
||||
92
src/examples/app/graphics/TrainInteraction.ts
Normal file
92
src/examples/app/graphics/TrainInteraction.ts
Normal file
@ -0,0 +1,92 @@
|
||||
import * as pb_1 from 'google-protobuf';
|
||||
import { IPointData } from 'pixi.js';
|
||||
import { ITrainData } from 'src/graphics/train/Train';
|
||||
import { graphicData } from '../protos/draw_data_storage';
|
||||
import { GraphicDataBase } from './GraphicDataBase';
|
||||
|
||||
export class TrainData extends GraphicDataBase implements ITrainData {
|
||||
constructor(data?: graphicData.Train) {
|
||||
let train;
|
||||
if (!data) {
|
||||
train = new graphicData.Train({
|
||||
common: GraphicDataBase.defaultCommonInfo(),
|
||||
});
|
||||
} else {
|
||||
train = data;
|
||||
}
|
||||
super(train);
|
||||
}
|
||||
|
||||
public get data(): graphicData.Train {
|
||||
return this.getData<graphicData.Train>();
|
||||
}
|
||||
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 trainDirection(): string {
|
||||
return this.data.trainDirection;
|
||||
}
|
||||
set trainDirection(v: string) {
|
||||
this.data.trainDirection = v;
|
||||
}
|
||||
get hasBorder(): boolean {
|
||||
return this.data.hasBorder;
|
||||
}
|
||||
set hasBorder(v: boolean) {
|
||||
this.data.hasBorder = v;
|
||||
}
|
||||
get borderWidth(): number {
|
||||
return this.data.borderWidth;
|
||||
}
|
||||
set borderWidth(v: number) {
|
||||
this.data.borderWidth = v;
|
||||
}
|
||||
get borderColor(): string {
|
||||
return this.data.borderColor;
|
||||
}
|
||||
set borderColor(v: string) {
|
||||
this.data.borderColor = v;
|
||||
}
|
||||
get headColor(): string {
|
||||
return this.data.headColor;
|
||||
}
|
||||
set headColor(v: string) {
|
||||
this.data.headColor = v;
|
||||
}
|
||||
get bodyColor(): string {
|
||||
return this.data.bodyColor;
|
||||
}
|
||||
set bodyColor(v: string) {
|
||||
this.data.bodyColor = v;
|
||||
}
|
||||
get point(): IPointData {
|
||||
return this.data.point;
|
||||
}
|
||||
set point(point: IPointData) {
|
||||
this.data.point = new graphicData.Point({ x: point.x, y: point.y });
|
||||
}
|
||||
clone(): TrainData {
|
||||
return new TrainData(this.data.cloneMessage());
|
||||
}
|
||||
copyFrom(data: TrainData): void {
|
||||
pb_1.Message.copyInto(data.data, this.data);
|
||||
}
|
||||
eq(other: TrainData): boolean {
|
||||
return pb_1.Message.equals(this.data, other.data);
|
||||
}
|
||||
}
|
||||
@ -4,12 +4,16 @@ 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 { Rect } from 'src/graphics/rect/Rect';
|
||||
import { RectDraw } from 'src/graphics/rect/RectDrawAssistant';
|
||||
import { Platform } from 'src/graphics/platform/Platform';
|
||||
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,
|
||||
GraphicApp,
|
||||
@ -22,9 +26,11 @@ 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 { 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';
|
||||
|
||||
export function fromStoragePoint(p: graphicData.Point): Point {
|
||||
@ -100,6 +106,9 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
|
||||
new LinkDraw(app, () => {
|
||||
return new LinkData();
|
||||
}),
|
||||
new RectDraw(app, () => {
|
||||
return new RectData();
|
||||
}),
|
||||
new IscsFanDraw(app, () => {
|
||||
return new IscsFanData();
|
||||
}),
|
||||
@ -112,6 +121,9 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
|
||||
new SignalDraw(app, () => {
|
||||
return new SignalData();
|
||||
}),
|
||||
new TrainDraw(app, () => {
|
||||
return new TrainData();
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
@ -141,6 +153,14 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
|
||||
},
|
||||
})
|
||||
);
|
||||
app.addKeyboardListener(
|
||||
new KeyListener({
|
||||
value: 'KeyR',
|
||||
onPress: () => {
|
||||
app.interactionPlugin(Rect.Type).resume();
|
||||
},
|
||||
})
|
||||
);
|
||||
app.addKeyboardListener(
|
||||
new KeyListener({
|
||||
value: 'KeyF',
|
||||
@ -173,6 +193,14 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
|
||||
},
|
||||
})
|
||||
);
|
||||
app.addKeyboardListener(
|
||||
new KeyListener({
|
||||
value: 'KeyT',
|
||||
onPress: () => {
|
||||
app.interactionPlugin(Train.Type).resume();
|
||||
},
|
||||
})
|
||||
);
|
||||
app.addKeyboardListener(
|
||||
new KeyListener({
|
||||
value: '1',
|
||||
@ -211,6 +239,9 @@ export function saveDrawDatas(app: JlDrawApp) {
|
||||
if (Link.Type === g.type) {
|
||||
const linkData = (g as Link).saveData();
|
||||
storage.links.push((linkData as LinkData).data);
|
||||
} else if (Rect.Type === g.type) {
|
||||
const rectData = (g as Rect).saveData();
|
||||
storage.Rects.push((rectData as RectData).data);
|
||||
} else if (IscsFan.Type === g.type) {
|
||||
const IscsFanData = (g as IscsFan).saveData();
|
||||
storage.iscsFans.push((IscsFanData as IscsFanData).data);
|
||||
@ -223,6 +254,9 @@ export function saveDrawDatas(app: JlDrawApp) {
|
||||
} 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);
|
||||
}
|
||||
});
|
||||
const base64 = fromUint8Array(storage.serialize());
|
||||
@ -244,6 +278,9 @@ export function loadDrawDatas(app: GraphicApp) {
|
||||
storage.links.forEach((link) => {
|
||||
datas.push(new LinkData(link));
|
||||
});
|
||||
storage.Rects.forEach((rect) => {
|
||||
datas.push(new RectData(rect));
|
||||
});
|
||||
storage.iscsFans.forEach((fan) => {
|
||||
datas.push(new IscsFanData(fan));
|
||||
});
|
||||
@ -253,8 +290,11 @@ export function loadDrawDatas(app: GraphicApp) {
|
||||
storage.stations.forEach((station) => {
|
||||
datas.push(new StationData(station));
|
||||
});
|
||||
storage.signals.forEach((signal) => {
|
||||
datas.push(new SignalData(signal));
|
||||
storage.stations.forEach((signal) => {
|
||||
datas.push(new StationData(signal));
|
||||
});
|
||||
storage.stations.forEach((train) => {
|
||||
datas.push(new StationData(train));
|
||||
});
|
||||
app.loadGraphic(datas);
|
||||
} else {
|
||||
|
||||
@ -13,10 +13,12 @@ export namespace graphicData {
|
||||
iscsFans?: IscsFan[];
|
||||
Platforms?: Platform[];
|
||||
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], 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;
|
||||
@ -33,6 +35,12 @@ export namespace graphicData {
|
||||
if ("stations" in data && data.stations != undefined) {
|
||||
this.stations = data.stations;
|
||||
}
|
||||
if ("Rects" in data && data.Rects != undefined) {
|
||||
this.Rects = data.Rects;
|
||||
}
|
||||
if ("train" in data && data.train != undefined) {
|
||||
this.train = data.train;
|
||||
}
|
||||
if ("signals" in data && data.signals != undefined) {
|
||||
this.signals = data.signals;
|
||||
}
|
||||
@ -71,11 +79,23 @@ export namespace graphicData {
|
||||
set stations(value: Station[]) {
|
||||
pb_1.Message.setRepeatedWrapperField(this, 5, value);
|
||||
}
|
||||
get Rects() {
|
||||
return pb_1.Message.getRepeatedWrapperField(this, Rect, 6) as Rect[];
|
||||
}
|
||||
set Rects(value: Rect[]) {
|
||||
pb_1.Message.setRepeatedWrapperField(this, 6, value);
|
||||
}
|
||||
get train() {
|
||||
return pb_1.Message.getRepeatedWrapperField(this, Train, 7) as Train[];
|
||||
}
|
||||
set train(value: Train[]) {
|
||||
pb_1.Message.setRepeatedWrapperField(this, 7, value);
|
||||
}
|
||||
get signals() {
|
||||
return pb_1.Message.getRepeatedWrapperField(this, Signal, 6) as Signal[];
|
||||
return pb_1.Message.getRepeatedWrapperField(this, Signal, 8) as Signal[];
|
||||
}
|
||||
set signals(value: Signal[]) {
|
||||
pb_1.Message.setRepeatedWrapperField(this, 6, value);
|
||||
pb_1.Message.setRepeatedWrapperField(this, 8, value);
|
||||
}
|
||||
static fromObject(data: {
|
||||
canvas?: ReturnType<typeof Canvas.prototype.toObject>;
|
||||
@ -83,6 +103,8 @@ export namespace graphicData {
|
||||
iscsFans?: ReturnType<typeof IscsFan.prototype.toObject>[];
|
||||
Platforms?: ReturnType<typeof Platform.prototype.toObject>[];
|
||||
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({});
|
||||
@ -101,6 +123,12 @@ export namespace graphicData {
|
||||
if (data.stations != null) {
|
||||
message.stations = data.stations.map(item => Station.fromObject(item));
|
||||
}
|
||||
if (data.Rects != null) {
|
||||
message.Rects = data.Rects.map(item => Rect.fromObject(item));
|
||||
}
|
||||
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));
|
||||
}
|
||||
@ -113,6 +141,8 @@ export namespace graphicData {
|
||||
iscsFans?: ReturnType<typeof IscsFan.prototype.toObject>[];
|
||||
Platforms?: ReturnType<typeof Platform.prototype.toObject>[];
|
||||
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) {
|
||||
@ -130,6 +160,12 @@ export namespace graphicData {
|
||||
if (this.stations != null) {
|
||||
data.stations = this.stations.map((item: Station) => item.toObject());
|
||||
}
|
||||
if (this.Rects != null) {
|
||||
data.Rects = this.Rects.map((item: Rect) => item.toObject());
|
||||
}
|
||||
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());
|
||||
}
|
||||
@ -149,8 +185,12 @@ export namespace graphicData {
|
||||
writer.writeRepeatedMessage(4, this.Platforms, (item: Platform) => item.serialize(writer));
|
||||
if (this.stations.length)
|
||||
writer.writeRepeatedMessage(5, this.stations, (item: Station) => item.serialize(writer));
|
||||
if (this.Rects.length)
|
||||
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(6, this.signals, (item: Signal) => item.serialize(writer));
|
||||
writer.writeRepeatedMessage(8, this.signals, (item: Signal) => item.serialize(writer));
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
@ -176,7 +216,13 @@ export namespace graphicData {
|
||||
reader.readMessage(message.stations, () => pb_1.Message.addToRepeatedWrapperField(message, 5, Station.deserialize(reader), Station));
|
||||
break;
|
||||
case 6:
|
||||
reader.readMessage(message.signals, () => pb_1.Message.addToRepeatedWrapperField(message, 6, Signal.deserialize(reader), Signal));
|
||||
reader.readMessage(message.Rects, () => pb_1.Message.addToRepeatedWrapperField(message, 6, Rect.deserialize(reader), Rect));
|
||||
break;
|
||||
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();
|
||||
}
|
||||
@ -1004,6 +1050,240 @@ export namespace graphicData {
|
||||
return Link.deserialize(bytes);
|
||||
}
|
||||
}
|
||||
export class Rect extends pb_1.Message {
|
||||
#one_of_decls: number[][] = [];
|
||||
constructor(data?: any[] | {
|
||||
common?: CommonInfo;
|
||||
code?: string;
|
||||
lineWidth?: number;
|
||||
lineColor?: string;
|
||||
point?: Point;
|
||||
width?: number;
|
||||
height?: number;
|
||||
points?: Point[];
|
||||
}) {
|
||||
super();
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [8], 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 ("lineWidth" in data && data.lineWidth != undefined) {
|
||||
this.lineWidth = data.lineWidth;
|
||||
}
|
||||
if ("lineColor" in data && data.lineColor != undefined) {
|
||||
this.lineColor = data.lineColor;
|
||||
}
|
||||
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 ("points" in data && data.points != undefined) {
|
||||
this.points = data.points;
|
||||
}
|
||||
}
|
||||
}
|
||||
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 lineWidth() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 3, 0) as number;
|
||||
}
|
||||
set lineWidth(value: number) {
|
||||
pb_1.Message.setField(this, 3, value);
|
||||
}
|
||||
get lineColor() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 4, "") as string;
|
||||
}
|
||||
set lineColor(value: string) {
|
||||
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 width() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 6, 0) as number;
|
||||
}
|
||||
set width(value: number) {
|
||||
pb_1.Message.setField(this, 6, value);
|
||||
}
|
||||
get height() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 7, 0) as number;
|
||||
}
|
||||
set height(value: number) {
|
||||
pb_1.Message.setField(this, 7, value);
|
||||
}
|
||||
get points() {
|
||||
return pb_1.Message.getRepeatedWrapperField(this, Point, 8) as Point[];
|
||||
}
|
||||
set points(value: Point[]) {
|
||||
pb_1.Message.setRepeatedWrapperField(this, 8, value);
|
||||
}
|
||||
static fromObject(data: {
|
||||
common?: ReturnType<typeof CommonInfo.prototype.toObject>;
|
||||
code?: string;
|
||||
lineWidth?: number;
|
||||
lineColor?: string;
|
||||
point?: ReturnType<typeof Point.prototype.toObject>;
|
||||
width?: number;
|
||||
height?: number;
|
||||
points?: ReturnType<typeof Point.prototype.toObject>[];
|
||||
}): Rect {
|
||||
const message = new Rect({});
|
||||
if (data.common != null) {
|
||||
message.common = CommonInfo.fromObject(data.common);
|
||||
}
|
||||
if (data.code != null) {
|
||||
message.code = data.code;
|
||||
}
|
||||
if (data.lineWidth != null) {
|
||||
message.lineWidth = data.lineWidth;
|
||||
}
|
||||
if (data.lineColor != null) {
|
||||
message.lineColor = data.lineColor;
|
||||
}
|
||||
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.points != null) {
|
||||
message.points = data.points.map(item => Point.fromObject(item));
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
const data: {
|
||||
common?: ReturnType<typeof CommonInfo.prototype.toObject>;
|
||||
code?: string;
|
||||
lineWidth?: number;
|
||||
lineColor?: string;
|
||||
point?: ReturnType<typeof Point.prototype.toObject>;
|
||||
width?: number;
|
||||
height?: number;
|
||||
points?: ReturnType<typeof Point.prototype.toObject>[];
|
||||
} = {};
|
||||
if (this.common != null) {
|
||||
data.common = this.common.toObject();
|
||||
}
|
||||
if (this.code != null) {
|
||||
data.code = this.code;
|
||||
}
|
||||
if (this.lineWidth != null) {
|
||||
data.lineWidth = this.lineWidth;
|
||||
}
|
||||
if (this.lineColor != null) {
|
||||
data.lineColor = this.lineColor;
|
||||
}
|
||||
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.points != null) {
|
||||
data.points = this.points.map((item: Point) => item.toObject());
|
||||
}
|
||||
return data;
|
||||
}
|
||||
serialize(): Uint8Array;
|
||||
serialize(w: pb_1.BinaryWriter): void;
|
||||
serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
|
||||
const writer = w || new pb_1.BinaryWriter();
|
||||
if (this.has_common)
|
||||
writer.writeMessage(1, this.common, () => this.common.serialize(writer));
|
||||
if (this.code.length)
|
||||
writer.writeString(2, this.code);
|
||||
if (this.lineWidth != 0)
|
||||
writer.writeInt32(3, this.lineWidth);
|
||||
if (this.lineColor.length)
|
||||
writer.writeString(4, this.lineColor);
|
||||
if (this.has_point)
|
||||
writer.writeMessage(5, this.point, () => this.point.serialize(writer));
|
||||
if (this.width != 0)
|
||||
writer.writeFloat(6, this.width);
|
||||
if (this.height != 0)
|
||||
writer.writeFloat(7, this.height);
|
||||
if (this.points.length)
|
||||
writer.writeRepeatedMessage(8, this.points, (item: Point) => item.serialize(writer));
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Rect {
|
||||
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Rect();
|
||||
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.lineWidth = reader.readInt32();
|
||||
break;
|
||||
case 4:
|
||||
message.lineColor = reader.readString();
|
||||
break;
|
||||
case 5:
|
||||
reader.readMessage(message.point, () => message.point = Point.deserialize(reader));
|
||||
break;
|
||||
case 6:
|
||||
message.width = reader.readFloat();
|
||||
break;
|
||||
case 7:
|
||||
message.height = reader.readFloat();
|
||||
break;
|
||||
case 8:
|
||||
reader.readMessage(message.points, () => pb_1.Message.addToRepeatedWrapperField(message, 8, Point.deserialize(reader), Point));
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
return message;
|
||||
}
|
||||
serializeBinary(): Uint8Array {
|
||||
return this.serialize();
|
||||
}
|
||||
static deserializeBinary(bytes: Uint8Array): Rect {
|
||||
return Rect.deserialize(bytes);
|
||||
}
|
||||
}
|
||||
export class Platform extends pb_1.Message {
|
||||
#one_of_decls: number[][] = [];
|
||||
constructor(data?: any[] | {
|
||||
@ -1312,9 +1592,321 @@ export namespace graphicData {
|
||||
constructor(data?: any[] | {
|
||||
common?: CommonInfo;
|
||||
code?: string;
|
||||
hasCircle?: boolean;
|
||||
radius?: number;
|
||||
borderWidth?: number;
|
||||
borderColor?: string;
|
||||
fillColor?: string;
|
||||
codeColor?: string;
|
||||
codeFontSize?: number;
|
||||
point?: Point;
|
||||
circlePoint?: Point;
|
||||
}) {
|
||||
super();
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
|
||||
if (!Array.isArray(data) && typeof data == "object") {
|
||||
if ("common" in data && data.common != undefined) {
|
||||
this.common = data.common;
|
||||
}
|
||||
if ("code" in data && data.code != undefined) {
|
||||
this.code = data.code;
|
||||
}
|
||||
if ("hasCircle" in data && data.hasCircle != undefined) {
|
||||
this.hasCircle = data.hasCircle;
|
||||
}
|
||||
if ("radius" in data && data.radius != undefined) {
|
||||
this.radius = data.radius;
|
||||
}
|
||||
if ("borderWidth" in data && data.borderWidth != undefined) {
|
||||
this.borderWidth = data.borderWidth;
|
||||
}
|
||||
if ("borderColor" in data && data.borderColor != undefined) {
|
||||
this.borderColor = data.borderColor;
|
||||
}
|
||||
if ("fillColor" in data && data.fillColor != undefined) {
|
||||
this.fillColor = data.fillColor;
|
||||
}
|
||||
if ("codeColor" in data && data.codeColor != undefined) {
|
||||
this.codeColor = data.codeColor;
|
||||
}
|
||||
if ("codeFontSize" in data && data.codeFontSize != undefined) {
|
||||
this.codeFontSize = data.codeFontSize;
|
||||
}
|
||||
if ("point" in data && data.point != undefined) {
|
||||
this.point = data.point;
|
||||
}
|
||||
if ("circlePoint" in data && data.circlePoint != undefined) {
|
||||
this.circlePoint = data.circlePoint;
|
||||
}
|
||||
}
|
||||
}
|
||||
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 hasCircle() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 3, false) as boolean;
|
||||
}
|
||||
set hasCircle(value: boolean) {
|
||||
pb_1.Message.setField(this, 3, value);
|
||||
}
|
||||
get radius() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 4, 0) as number;
|
||||
}
|
||||
set radius(value: number) {
|
||||
pb_1.Message.setField(this, 4, value);
|
||||
}
|
||||
get borderWidth() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 5, 0) as number;
|
||||
}
|
||||
set borderWidth(value: number) {
|
||||
pb_1.Message.setField(this, 5, value);
|
||||
}
|
||||
get borderColor() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 6, "") as string;
|
||||
}
|
||||
set borderColor(value: string) {
|
||||
pb_1.Message.setField(this, 6, value);
|
||||
}
|
||||
get fillColor() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 7, "") as string;
|
||||
}
|
||||
set fillColor(value: string) {
|
||||
pb_1.Message.setField(this, 7, value);
|
||||
}
|
||||
get codeColor() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 8, "") as string;
|
||||
}
|
||||
set codeColor(value: string) {
|
||||
pb_1.Message.setField(this, 8, value);
|
||||
}
|
||||
get codeFontSize() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 9, 0) as number;
|
||||
}
|
||||
set codeFontSize(value: number) {
|
||||
pb_1.Message.setField(this, 9, value);
|
||||
}
|
||||
get point() {
|
||||
return pb_1.Message.getWrapperField(this, Point, 10) as Point;
|
||||
}
|
||||
set point(value: Point) {
|
||||
pb_1.Message.setWrapperField(this, 10, value);
|
||||
}
|
||||
get has_point() {
|
||||
return pb_1.Message.getField(this, 10) != null;
|
||||
}
|
||||
get circlePoint() {
|
||||
return pb_1.Message.getWrapperField(this, Point, 11) as Point;
|
||||
}
|
||||
set circlePoint(value: Point) {
|
||||
pb_1.Message.setWrapperField(this, 11, value);
|
||||
}
|
||||
get has_circlePoint() {
|
||||
return pb_1.Message.getField(this, 11) != null;
|
||||
}
|
||||
static fromObject(data: {
|
||||
common?: ReturnType<typeof CommonInfo.prototype.toObject>;
|
||||
code?: string;
|
||||
hasCircle?: boolean;
|
||||
radius?: number;
|
||||
borderWidth?: number;
|
||||
borderColor?: string;
|
||||
fillColor?: string;
|
||||
codeColor?: string;
|
||||
codeFontSize?: number;
|
||||
point?: ReturnType<typeof Point.prototype.toObject>;
|
||||
circlePoint?: ReturnType<typeof Point.prototype.toObject>;
|
||||
}): Station {
|
||||
const message = new Station({});
|
||||
if (data.common != null) {
|
||||
message.common = CommonInfo.fromObject(data.common);
|
||||
}
|
||||
if (data.code != null) {
|
||||
message.code = data.code;
|
||||
}
|
||||
if (data.hasCircle != null) {
|
||||
message.hasCircle = data.hasCircle;
|
||||
}
|
||||
if (data.radius != null) {
|
||||
message.radius = data.radius;
|
||||
}
|
||||
if (data.borderWidth != null) {
|
||||
message.borderWidth = data.borderWidth;
|
||||
}
|
||||
if (data.borderColor != null) {
|
||||
message.borderColor = data.borderColor;
|
||||
}
|
||||
if (data.fillColor != null) {
|
||||
message.fillColor = data.fillColor;
|
||||
}
|
||||
if (data.codeColor != null) {
|
||||
message.codeColor = data.codeColor;
|
||||
}
|
||||
if (data.codeFontSize != null) {
|
||||
message.codeFontSize = data.codeFontSize;
|
||||
}
|
||||
if (data.point != null) {
|
||||
message.point = Point.fromObject(data.point);
|
||||
}
|
||||
if (data.circlePoint != null) {
|
||||
message.circlePoint = Point.fromObject(data.circlePoint);
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
const data: {
|
||||
common?: ReturnType<typeof CommonInfo.prototype.toObject>;
|
||||
code?: string;
|
||||
hasCircle?: boolean;
|
||||
radius?: number;
|
||||
borderWidth?: number;
|
||||
borderColor?: string;
|
||||
fillColor?: string;
|
||||
codeColor?: string;
|
||||
codeFontSize?: number;
|
||||
point?: ReturnType<typeof Point.prototype.toObject>;
|
||||
circlePoint?: ReturnType<typeof Point.prototype.toObject>;
|
||||
} = {};
|
||||
if (this.common != null) {
|
||||
data.common = this.common.toObject();
|
||||
}
|
||||
if (this.code != null) {
|
||||
data.code = this.code;
|
||||
}
|
||||
if (this.hasCircle != null) {
|
||||
data.hasCircle = this.hasCircle;
|
||||
}
|
||||
if (this.radius != null) {
|
||||
data.radius = this.radius;
|
||||
}
|
||||
if (this.borderWidth != null) {
|
||||
data.borderWidth = this.borderWidth;
|
||||
}
|
||||
if (this.borderColor != null) {
|
||||
data.borderColor = this.borderColor;
|
||||
}
|
||||
if (this.fillColor != null) {
|
||||
data.fillColor = this.fillColor;
|
||||
}
|
||||
if (this.codeColor != null) {
|
||||
data.codeColor = this.codeColor;
|
||||
}
|
||||
if (this.codeFontSize != null) {
|
||||
data.codeFontSize = this.codeFontSize;
|
||||
}
|
||||
if (this.point != null) {
|
||||
data.point = this.point.toObject();
|
||||
}
|
||||
if (this.circlePoint != null) {
|
||||
data.circlePoint = this.circlePoint.toObject();
|
||||
}
|
||||
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.hasCircle != false)
|
||||
writer.writeBool(3, this.hasCircle);
|
||||
if (this.radius != 0)
|
||||
writer.writeInt32(4, this.radius);
|
||||
if (this.borderWidth != 0)
|
||||
writer.writeInt32(5, this.borderWidth);
|
||||
if (this.borderColor.length)
|
||||
writer.writeString(6, this.borderColor);
|
||||
if (this.fillColor.length)
|
||||
writer.writeString(7, this.fillColor);
|
||||
if (this.codeColor.length)
|
||||
writer.writeString(8, this.codeColor);
|
||||
if (this.codeFontSize != 0)
|
||||
writer.writeInt32(9, this.codeFontSize);
|
||||
if (this.has_point)
|
||||
writer.writeMessage(10, this.point, () => this.point.serialize(writer));
|
||||
if (this.has_circlePoint)
|
||||
writer.writeMessage(11, this.circlePoint, () => this.circlePoint.serialize(writer));
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Station {
|
||||
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Station();
|
||||
while (reader.nextField()) {
|
||||
if (reader.isEndGroup())
|
||||
break;
|
||||
switch (reader.getFieldNumber()) {
|
||||
case 1:
|
||||
reader.readMessage(message.common, () => message.common = CommonInfo.deserialize(reader));
|
||||
break;
|
||||
case 2:
|
||||
message.code = reader.readString();
|
||||
break;
|
||||
case 3:
|
||||
message.hasCircle = reader.readBool();
|
||||
break;
|
||||
case 4:
|
||||
message.radius = reader.readInt32();
|
||||
break;
|
||||
case 5:
|
||||
message.borderWidth = reader.readInt32();
|
||||
break;
|
||||
case 6:
|
||||
message.borderColor = reader.readString();
|
||||
break;
|
||||
case 7:
|
||||
message.fillColor = reader.readString();
|
||||
break;
|
||||
case 8:
|
||||
message.codeColor = reader.readString();
|
||||
break;
|
||||
case 9:
|
||||
message.codeFontSize = reader.readInt32();
|
||||
break;
|
||||
case 10:
|
||||
reader.readMessage(message.point, () => message.point = Point.deserialize(reader));
|
||||
break;
|
||||
case 11:
|
||||
reader.readMessage(message.circlePoint, () => message.circlePoint = Point.deserialize(reader));
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
return message;
|
||||
}
|
||||
serializeBinary(): Uint8Array {
|
||||
return this.serialize();
|
||||
}
|
||||
static deserializeBinary(bytes: Uint8Array): Station {
|
||||
return Station.deserialize(bytes);
|
||||
}
|
||||
}
|
||||
export class Train extends pb_1.Message {
|
||||
#one_of_decls: number[][] = [];
|
||||
constructor(data?: any[] | {
|
||||
common?: CommonInfo;
|
||||
code?: string;
|
||||
codeColor?: string;
|
||||
codeFontSize?: number;
|
||||
point?: Point;
|
||||
trainDirection?: string;
|
||||
hasBorder?: boolean;
|
||||
borderWidth?: number;
|
||||
borderColor?: string;
|
||||
headColor?: string;
|
||||
bodyColor?: string;
|
||||
}) {
|
||||
super();
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
|
||||
@ -1334,6 +1926,24 @@ export namespace graphicData {
|
||||
if ("point" in data && data.point != undefined) {
|
||||
this.point = data.point;
|
||||
}
|
||||
if ("trainDirection" in data && data.trainDirection != undefined) {
|
||||
this.trainDirection = data.trainDirection;
|
||||
}
|
||||
if ("hasBorder" in data && data.hasBorder != undefined) {
|
||||
this.hasBorder = data.hasBorder;
|
||||
}
|
||||
if ("borderWidth" in data && data.borderWidth != undefined) {
|
||||
this.borderWidth = data.borderWidth;
|
||||
}
|
||||
if ("borderColor" in data && data.borderColor != undefined) {
|
||||
this.borderColor = data.borderColor;
|
||||
}
|
||||
if ("headColor" in data && data.headColor != undefined) {
|
||||
this.headColor = data.headColor;
|
||||
}
|
||||
if ("bodyColor" in data && data.bodyColor != undefined) {
|
||||
this.bodyColor = data.bodyColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
get common() {
|
||||
@ -1372,14 +1982,56 @@ export namespace graphicData {
|
||||
get has_point() {
|
||||
return pb_1.Message.getField(this, 5) != null;
|
||||
}
|
||||
get trainDirection() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 6, "") as string;
|
||||
}
|
||||
set trainDirection(value: string) {
|
||||
pb_1.Message.setField(this, 6, value);
|
||||
}
|
||||
get hasBorder() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 7, false) as boolean;
|
||||
}
|
||||
set hasBorder(value: boolean) {
|
||||
pb_1.Message.setField(this, 7, value);
|
||||
}
|
||||
get borderWidth() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 8, 0) as number;
|
||||
}
|
||||
set borderWidth(value: number) {
|
||||
pb_1.Message.setField(this, 8, value);
|
||||
}
|
||||
get borderColor() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 9, "") as string;
|
||||
}
|
||||
set borderColor(value: string) {
|
||||
pb_1.Message.setField(this, 9, value);
|
||||
}
|
||||
get headColor() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 10, "") as string;
|
||||
}
|
||||
set headColor(value: string) {
|
||||
pb_1.Message.setField(this, 10, value);
|
||||
}
|
||||
get bodyColor() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 11, "") as string;
|
||||
}
|
||||
set bodyColor(value: string) {
|
||||
pb_1.Message.setField(this, 11, value);
|
||||
}
|
||||
static fromObject(data: {
|
||||
common?: ReturnType<typeof CommonInfo.prototype.toObject>;
|
||||
code?: string;
|
||||
codeColor?: string;
|
||||
codeFontSize?: number;
|
||||
point?: ReturnType<typeof Point.prototype.toObject>;
|
||||
}): Station {
|
||||
const message = new Station({});
|
||||
trainDirection?: string;
|
||||
hasBorder?: boolean;
|
||||
borderWidth?: number;
|
||||
borderColor?: string;
|
||||
headColor?: string;
|
||||
bodyColor?: string;
|
||||
}): Train {
|
||||
const message = new Train({});
|
||||
if (data.common != null) {
|
||||
message.common = CommonInfo.fromObject(data.common);
|
||||
}
|
||||
@ -1395,6 +2047,24 @@ export namespace graphicData {
|
||||
if (data.point != null) {
|
||||
message.point = Point.fromObject(data.point);
|
||||
}
|
||||
if (data.trainDirection != null) {
|
||||
message.trainDirection = data.trainDirection;
|
||||
}
|
||||
if (data.hasBorder != null) {
|
||||
message.hasBorder = data.hasBorder;
|
||||
}
|
||||
if (data.borderWidth != null) {
|
||||
message.borderWidth = data.borderWidth;
|
||||
}
|
||||
if (data.borderColor != null) {
|
||||
message.borderColor = data.borderColor;
|
||||
}
|
||||
if (data.headColor != null) {
|
||||
message.headColor = data.headColor;
|
||||
}
|
||||
if (data.bodyColor != null) {
|
||||
message.bodyColor = data.bodyColor;
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
@ -1404,6 +2074,12 @@ export namespace graphicData {
|
||||
codeColor?: string;
|
||||
codeFontSize?: number;
|
||||
point?: ReturnType<typeof Point.prototype.toObject>;
|
||||
trainDirection?: string;
|
||||
hasBorder?: boolean;
|
||||
borderWidth?: number;
|
||||
borderColor?: string;
|
||||
headColor?: string;
|
||||
bodyColor?: string;
|
||||
} = {};
|
||||
if (this.common != null) {
|
||||
data.common = this.common.toObject();
|
||||
@ -1420,6 +2096,24 @@ export namespace graphicData {
|
||||
if (this.point != null) {
|
||||
data.point = this.point.toObject();
|
||||
}
|
||||
if (this.trainDirection != null) {
|
||||
data.trainDirection = this.trainDirection;
|
||||
}
|
||||
if (this.hasBorder != null) {
|
||||
data.hasBorder = this.hasBorder;
|
||||
}
|
||||
if (this.borderWidth != null) {
|
||||
data.borderWidth = this.borderWidth;
|
||||
}
|
||||
if (this.borderColor != null) {
|
||||
data.borderColor = this.borderColor;
|
||||
}
|
||||
if (this.headColor != null) {
|
||||
data.headColor = this.headColor;
|
||||
}
|
||||
if (this.bodyColor != null) {
|
||||
data.bodyColor = this.bodyColor;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
serialize(): Uint8Array;
|
||||
@ -1436,11 +2130,23 @@ export namespace graphicData {
|
||||
writer.writeInt32(4, this.codeFontSize);
|
||||
if (this.has_point)
|
||||
writer.writeMessage(5, this.point, () => this.point.serialize(writer));
|
||||
if (this.trainDirection.length)
|
||||
writer.writeString(6, this.trainDirection);
|
||||
if (this.hasBorder != false)
|
||||
writer.writeBool(7, this.hasBorder);
|
||||
if (this.borderWidth != 0)
|
||||
writer.writeInt32(8, this.borderWidth);
|
||||
if (this.borderColor.length)
|
||||
writer.writeString(9, this.borderColor);
|
||||
if (this.headColor.length)
|
||||
writer.writeString(10, this.headColor);
|
||||
if (this.bodyColor.length)
|
||||
writer.writeString(11, this.bodyColor);
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Station {
|
||||
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Station();
|
||||
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Train {
|
||||
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Train();
|
||||
while (reader.nextField()) {
|
||||
if (reader.isEndGroup())
|
||||
break;
|
||||
@ -1460,6 +2166,24 @@ export namespace graphicData {
|
||||
case 5:
|
||||
reader.readMessage(message.point, () => message.point = Point.deserialize(reader));
|
||||
break;
|
||||
case 6:
|
||||
message.trainDirection = reader.readString();
|
||||
break;
|
||||
case 7:
|
||||
message.hasBorder = reader.readBool();
|
||||
break;
|
||||
case 8:
|
||||
message.borderWidth = reader.readInt32();
|
||||
break;
|
||||
case 9:
|
||||
message.borderColor = reader.readString();
|
||||
break;
|
||||
case 10:
|
||||
message.headColor = reader.readString();
|
||||
break;
|
||||
case 11:
|
||||
message.bodyColor = reader.readString();
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
@ -1468,8 +2192,8 @@ export namespace graphicData {
|
||||
serializeBinary(): Uint8Array {
|
||||
return this.serialize();
|
||||
}
|
||||
static deserializeBinary(bytes: Uint8Array): Station {
|
||||
return Station.deserialize(bytes);
|
||||
static deserializeBinary(bytes: Uint8Array): Train {
|
||||
return Train.deserialize(bytes);
|
||||
}
|
||||
}
|
||||
export class IscsFan extends pb_1.Message {
|
||||
|
||||
@ -10,7 +10,6 @@ import {
|
||||
GraphicInteractionPlugin,
|
||||
JlDrawApp,
|
||||
JlGraphic,
|
||||
KeyListener,
|
||||
getRectangleCenter,
|
||||
} from 'src/jlgraphic';
|
||||
|
||||
@ -28,15 +27,6 @@ export class PlatformDraw extends GraphicDrawAssistant<
|
||||
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,
|
||||
@ -53,11 +43,9 @@ export class PlatformDraw extends GraphicDrawAssistant<
|
||||
|
||||
bind(): void {
|
||||
super.bind();
|
||||
this.app.addKeyboardListener(this.keypListener);
|
||||
}
|
||||
unbind(): void {
|
||||
super.unbind();
|
||||
this.app.removeKeyboardListener(this.keypListener);
|
||||
}
|
||||
|
||||
clearCache(): void {
|
||||
|
||||
86
src/graphics/rect/Rect.ts
Normal file
86
src/graphics/rect/Rect.ts
Normal file
@ -0,0 +1,86 @@
|
||||
import { Color, Graphics, IPointData, Point } from 'pixi.js';
|
||||
import { GraphicData, JlGraphic, JlGraphicTemplate } from 'src/jlgraphic';
|
||||
|
||||
export interface IRectData extends GraphicData {
|
||||
get code(): string; // 编号
|
||||
set code(v: string);
|
||||
get lineWidth(): number; // 线宽
|
||||
set lineWidth(v: number);
|
||||
get lineColor(): string; // 线色
|
||||
set lineColor(v: string);
|
||||
get point(): IPointData; // 位置坐标
|
||||
set point(point: IPointData);
|
||||
get width(): number; // 宽度
|
||||
set width(v: number);
|
||||
get height(): number; // 高度
|
||||
set height(v: number);
|
||||
get points(): IPointData[]; // 线坐标点
|
||||
set points(points: IPointData[]);
|
||||
clone(): IRectData;
|
||||
copyFrom(data: IRectData): void;
|
||||
eq(other: IRectData): boolean;
|
||||
}
|
||||
|
||||
const rectConsts = {
|
||||
lineWidth: 2,
|
||||
lineColor: '0xff0000',
|
||||
width: 60,
|
||||
height: 20,
|
||||
};
|
||||
|
||||
export class Rect extends JlGraphic {
|
||||
static Type = 'Rect';
|
||||
rectGraphic: Graphics;
|
||||
constructor() {
|
||||
super(Rect.Type);
|
||||
this.rectGraphic = new Graphics();
|
||||
this.addChild(this.rectGraphic);
|
||||
}
|
||||
|
||||
get datas(): IRectData {
|
||||
return this.getDatas<IRectData>();
|
||||
}
|
||||
doRepaint(): void {
|
||||
const width = this.datas.width;
|
||||
const height = this.datas.height;
|
||||
if (this.linePoints.length == 0) {
|
||||
const r1 = new Point(this.datas.point.x, this.datas.point.y);
|
||||
const r2 = new Point(r1.x + width, r1.y);
|
||||
const r3 = new Point(r1.x + width, r1.y + height);
|
||||
const r4 = new Point(r1.x, r1.y + height);
|
||||
this.datas.points = [r1, r2, r3, r4, r1];
|
||||
}
|
||||
const rectGraphic = this.rectGraphic;
|
||||
rectGraphic.clear();
|
||||
rectGraphic.lineStyle(
|
||||
this.datas.lineWidth,
|
||||
new Color(this.datas.lineColor)
|
||||
);
|
||||
rectGraphic.drawPolygon(this.datas.points);
|
||||
}
|
||||
get linePoints(): IPointData[] {
|
||||
return this.datas.points;
|
||||
}
|
||||
set linePoints(points: IPointData[]) {
|
||||
const old = this.datas.clone();
|
||||
old.points = points;
|
||||
this.updateData(old);
|
||||
}
|
||||
}
|
||||
|
||||
export class RectTemplate extends JlGraphicTemplate<Rect> {
|
||||
lineWidth: number;
|
||||
lineColor: string;
|
||||
width: number;
|
||||
height: number;
|
||||
constructor() {
|
||||
super(Rect.Type);
|
||||
this.lineWidth = rectConsts.lineWidth;
|
||||
this.lineColor = rectConsts.lineColor;
|
||||
this.width = rectConsts.width;
|
||||
this.height = rectConsts.height;
|
||||
}
|
||||
new(): Rect {
|
||||
return new Rect();
|
||||
}
|
||||
}
|
||||
262
src/graphics/rect/RectDrawAssistant.ts
Normal file
262
src/graphics/rect/RectDrawAssistant.ts
Normal file
@ -0,0 +1,262 @@
|
||||
import {
|
||||
FederatedPointerEvent,
|
||||
Graphics,
|
||||
Point,
|
||||
IHitArea,
|
||||
DisplayObject,
|
||||
FederatedMouseEvent,
|
||||
} from 'pixi.js';
|
||||
import {
|
||||
DraggablePoint,
|
||||
GraphicApp,
|
||||
GraphicDrawAssistant,
|
||||
GraphicInteractionPlugin,
|
||||
GraphicTransformEvent,
|
||||
JlDrawApp,
|
||||
JlGraphic,
|
||||
linePoint,
|
||||
} from 'src/jlgraphic';
|
||||
|
||||
import AbsorbablePoint, {
|
||||
AbsorbablePosition,
|
||||
} from 'src/jlgraphic/graphic/AbsorbablePosition';
|
||||
import {
|
||||
ILineGraphic,
|
||||
PolylineEditPlugin,
|
||||
addWaySegmentingConfig,
|
||||
addPolygonSegmentingPoint,
|
||||
clearWayPoint,
|
||||
clearWaypointsConfig,
|
||||
getWayLineIndex,
|
||||
} from 'src/jlgraphic/plugins/GraphicEditPlugin';
|
||||
import { ContextMenu } from 'src/jlgraphic/ui/ContextMenu';
|
||||
|
||||
import { IRectData, Rect, RectTemplate } from './Rect';
|
||||
import { Link } from '../link/Link';
|
||||
|
||||
export interface IRectDrawOptions {
|
||||
newData: () => IRectData;
|
||||
}
|
||||
|
||||
export class RectDraw extends GraphicDrawAssistant<RectTemplate, IRectData> {
|
||||
point1: Point | null = null;
|
||||
point2: Point | null = null;
|
||||
rectGraphic: Graphics = new Graphics();
|
||||
|
||||
constructor(app: JlDrawApp, createData: () => IRectData) {
|
||||
super(app, new RectTemplate(), createData, Rect.Type, '站台Rect');
|
||||
this.container.addChild(this.rectGraphic);
|
||||
RectPointsEditPlugin.init(app);
|
||||
}
|
||||
|
||||
bind(): void {
|
||||
super.bind();
|
||||
}
|
||||
unbind(): void {
|
||||
super.unbind();
|
||||
}
|
||||
|
||||
clearCache(): void {
|
||||
this.rectGraphic.clear();
|
||||
}
|
||||
onRightClick(): void {
|
||||
this.createAndStore(true);
|
||||
}
|
||||
onLeftDown(e: FederatedPointerEvent): void {
|
||||
const { x, y } = this.toCanvasCoordinates(e.global);
|
||||
const p = new Point(x, y);
|
||||
if (this.point1 === null) {
|
||||
this.point1 = p;
|
||||
} else {
|
||||
this.point2 = p;
|
||||
this.createAndStore(true);
|
||||
this.point1 = null;
|
||||
this.point2 = null;
|
||||
}
|
||||
}
|
||||
|
||||
redraw(p: Point): void {
|
||||
const template = this.graphicTemplate;
|
||||
if (this.point1 === null) return;
|
||||
const rectGraphic = this.rectGraphic;
|
||||
rectGraphic.clear();
|
||||
rectGraphic.lineStyle(template.lineWidth, template.lineColor);
|
||||
rectGraphic.drawRect(...this.normalize(this.point1, p));
|
||||
}
|
||||
//根据画的两个点确定左上角的点的坐标和矩形宽高
|
||||
private normalize(p1: Point, p2: Point): [number, number, number, number] {
|
||||
const { abs } = Math;
|
||||
const x = p1.x < p2.x ? p1.x : p2.x;
|
||||
const y = p1.y < p2.y ? p1.y : p2.y;
|
||||
const w = abs(p1.x - p2.x);
|
||||
const h = abs(p1.y - p2.y);
|
||||
return [x, y, w, h];
|
||||
}
|
||||
prepareData(data: IRectData): boolean {
|
||||
if (this.point1 == null) {
|
||||
console.log('Rect绘制因点不够取消绘制');
|
||||
return false;
|
||||
}
|
||||
const p1 = this.point1 as Point;
|
||||
const p2 = this.point2 as Point;
|
||||
const [x, y, width, height] = this.normalize(p1, p2);
|
||||
const template = this.graphicTemplate;
|
||||
data.point = new Point(x, y);
|
||||
data.lineWidth = template.lineWidth;
|
||||
data.lineColor = template.lineColor;
|
||||
data.width = width;
|
||||
data.height = height;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
//碰撞检测
|
||||
export class RectGraphicHitArea implements IHitArea {
|
||||
rect: Rect;
|
||||
constructor(rect: Rect) {
|
||||
this.rect = rect;
|
||||
}
|
||||
contains(x: number, y: number): boolean {
|
||||
let contains = false;
|
||||
const p = new Point(x, y);
|
||||
const rectData = this.rect.datas;
|
||||
//contains = pointPolygon(p, rectData.points, rectData.lineWidth);是否包含多边形内部
|
||||
const tolerance = rectData.lineWidth;
|
||||
for (let i = 0; i < rectData.points.length - 1; i++) {
|
||||
const p1 = rectData.points[i];
|
||||
const p2 = rectData.points[i + 1];
|
||||
contains = contains || linePoint(p1, p2, p, tolerance);
|
||||
if (contains) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return contains;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建吸附位置
|
||||
* @param rect
|
||||
* @returns
|
||||
*/
|
||||
function buildAbsorbablePositions(rect: Rect): AbsorbablePosition[] {
|
||||
const aps: AbsorbablePosition[] = [];
|
||||
const rects = rect.queryStore.queryByType<Rect>(Rect.Type);
|
||||
const links = rect.queryStore.queryByType<Link>(Link.Type);
|
||||
|
||||
links.forEach((other) => {
|
||||
const apa = new AbsorbablePoint(
|
||||
other.localToCanvasPoint(other.getStartPoint())
|
||||
);
|
||||
const apb = new AbsorbablePoint(
|
||||
other.localToCanvasPoint(other.getEndPoint())
|
||||
);
|
||||
aps.push(apa, apb);
|
||||
});
|
||||
|
||||
rects.forEach((other) => {
|
||||
if (other.id == rect.id) {
|
||||
return;
|
||||
}
|
||||
other.linePoints.forEach((point) => {
|
||||
const absorbablePoint = new AbsorbablePoint(point);
|
||||
aps.push(absorbablePoint);
|
||||
});
|
||||
});
|
||||
|
||||
return aps;
|
||||
}
|
||||
|
||||
/**
|
||||
* 端点拖拽添加吸附位置
|
||||
* @param g
|
||||
* @param dp
|
||||
* @param index
|
||||
*/
|
||||
function onEditPointCreate(g: ILineGraphic, dp: DraggablePoint): void {
|
||||
const rect = g as Rect;
|
||||
// 端点
|
||||
dp.on('transformstart', (e: GraphicTransformEvent) => {
|
||||
if (e.isShift()) {
|
||||
rect.getGraphicApp().setOptions({
|
||||
absorbablePositions: buildAbsorbablePositions(rect),
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const RectEditMenu: ContextMenu = ContextMenu.init({
|
||||
name: '矩形编辑菜单',
|
||||
groups: [
|
||||
{
|
||||
items: [addWaySegmentingConfig, clearWaypointsConfig],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
/**
|
||||
* rect路径编辑
|
||||
*/
|
||||
export class RectPointsEditPlugin extends GraphicInteractionPlugin<Rect> {
|
||||
static Name = 'RectPointsDrag';
|
||||
constructor(app: GraphicApp) {
|
||||
super(RectPointsEditPlugin.Name, app);
|
||||
app.registerMenu(RectEditMenu);
|
||||
}
|
||||
static init(app: GraphicApp): RectPointsEditPlugin {
|
||||
return new RectPointsEditPlugin(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): Rect[] | undefined {
|
||||
return grahpics.filter((g) => g.type == Rect.Type) as Rect[];
|
||||
}
|
||||
bind(g: Rect): void {
|
||||
g.rectGraphic.eventMode = 'static';
|
||||
g.rectGraphic.cursor = 'pointer';
|
||||
g.rectGraphic.hitArea = new RectGraphicHitArea(g);
|
||||
g.on('_rightclick', this.onContextMenu, this);
|
||||
g.on('selected', this.onSelected, this);
|
||||
g.on('unselected', this.onUnselected, this);
|
||||
}
|
||||
unbind(g: Rect): void {
|
||||
g.off('_rightclick', this.onContextMenu, this);
|
||||
g.off('selected', this.onSelected, this);
|
||||
g.off('unselected', this.onUnselected, this);
|
||||
}
|
||||
|
||||
onContextMenu(e: FederatedMouseEvent) {
|
||||
const target = e.target as DisplayObject;
|
||||
const rect = target.getGraphic() as Rect;
|
||||
this.app.updateSelected(rect);
|
||||
addWaySegmentingConfig.handler = () => {
|
||||
const linePoints = rect.linePoints;
|
||||
const p = rect.screenToLocalPoint(e.global);
|
||||
const { start, end } = getWayLineIndex(linePoints, p);
|
||||
addPolygonSegmentingPoint(rect, start, end);
|
||||
};
|
||||
clearWaypointsConfig.handler = () => {
|
||||
clearWayPoint(rect, false);
|
||||
};
|
||||
RectEditMenu.open(e.global);
|
||||
}
|
||||
|
||||
onSelected(g: DisplayObject): void {
|
||||
const rect = g as Rect;
|
||||
let lep = rect.getAssistantAppend<PolylineEditPlugin>(
|
||||
PolylineEditPlugin.Name
|
||||
);
|
||||
if (!lep) {
|
||||
lep = new PolylineEditPlugin(rect, { onEditPointCreate });
|
||||
rect.addAssistantAppend(lep);
|
||||
}
|
||||
lep.showAll();
|
||||
}
|
||||
onUnselected(g: DisplayObject): void {
|
||||
const rect = g as Rect;
|
||||
const lep = rect.getAssistantAppend<PolylineEditPlugin>(
|
||||
PolylineEditPlugin.Name
|
||||
);
|
||||
if (lep) {
|
||||
lep.hideAll();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import { IPointData } from 'pixi.js';
|
||||
import { Color, Graphics, IPointData, Point } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
JlGraphic,
|
||||
@ -9,12 +9,24 @@ import {
|
||||
export interface IStationData extends GraphicData {
|
||||
get code(): string; // 编号
|
||||
set code(v: string);
|
||||
get hasCircle(): boolean; // 是否有圆圈--线网图
|
||||
set hasCircle(v: boolean);
|
||||
get radius(): number; // 半径
|
||||
set radius(v: number);
|
||||
get borderWidth(): number; // 线宽
|
||||
set borderWidth(v: number);
|
||||
get borderColor(): string; // 圆边框线色
|
||||
set borderColor(v: string);
|
||||
get fillColor(): string; // 圆填充颜色
|
||||
set fillColor(v: string);
|
||||
get codeColor(): string; // 车站字体颜色
|
||||
set codeColor(v: string);
|
||||
get codeFontSize(): number; // 车站字体大小
|
||||
set codeFontSize(v: number);
|
||||
get point(): IPointData; // 位置坐标
|
||||
set point(point: IPointData);
|
||||
get circlePoint(): IPointData; // 位置坐标
|
||||
set circlePoint(point: IPointData);
|
||||
clone(): IStationData;
|
||||
copyFrom(data: IStationData): void;
|
||||
eq(other: IStationData): boolean;
|
||||
@ -23,15 +35,19 @@ export interface IStationData extends GraphicData {
|
||||
export class Station extends JlGraphic {
|
||||
static Type = 'station';
|
||||
codeGraph: VectorText = new VectorText(''); //站台旁数字、字符
|
||||
circleGraphic: Graphics;
|
||||
constructor() {
|
||||
super(Station.Type);
|
||||
this.circleGraphic = new Graphics();
|
||||
this.addChild(this.codeGraph);
|
||||
this.addChild(this.circleGraphic);
|
||||
}
|
||||
|
||||
get datas(): IStationData {
|
||||
return this.getDatas<IStationData>();
|
||||
}
|
||||
doRepaint(): void {
|
||||
this.circleGraphic.clear();
|
||||
this.position.set(this.datas.point.x, this.datas.point.y);
|
||||
const codeGraph = this.codeGraph;
|
||||
if (this.datas.code == '') {
|
||||
@ -42,17 +58,42 @@ export class Station extends JlGraphic {
|
||||
codeGraph.style.fill = this.datas.codeColor;
|
||||
codeGraph.setVectorFontSize(this.datas.codeFontSize);
|
||||
codeGraph.anchor.set(0.5);
|
||||
codeGraph.style.fill = this.datas.codeColor;
|
||||
if (this.datas.hasCircle) {
|
||||
const circleGraphic = this.circleGraphic;
|
||||
circleGraphic.lineStyle(
|
||||
this.datas.borderWidth,
|
||||
new Color(this.datas.borderColor)
|
||||
);
|
||||
circleGraphic.beginFill(this.datas.fillColor, 1);
|
||||
circleGraphic.drawCircle(0, 0, this.datas.radius);
|
||||
circleGraphic.endFill;
|
||||
circleGraphic.position.set(
|
||||
this.datas.circlePoint.x,
|
||||
this.datas.circlePoint.y
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class StationTemplate extends JlGraphicTemplate<Station> {
|
||||
hasCircle: boolean;
|
||||
radius: number;
|
||||
borderWidth: number;
|
||||
borderColor: string;
|
||||
fillColor: string;
|
||||
codeColor: string;
|
||||
codeFontSize: number;
|
||||
circlePoint: IPointData;
|
||||
constructor() {
|
||||
super(Station.Type);
|
||||
this.hasCircle = false;
|
||||
this.radius = 5;
|
||||
this.borderWidth = 1;
|
||||
this.borderColor = '0xff0000';
|
||||
this.fillColor = '0xff0000';
|
||||
this.codeColor = '0xF48815';
|
||||
this.codeFontSize = 22;
|
||||
this.circlePoint = new Point(0, -20);
|
||||
}
|
||||
new(): Station {
|
||||
return new Station();
|
||||
|
||||
@ -4,7 +4,6 @@ import {
|
||||
GraphicInteractionPlugin,
|
||||
JlDrawApp,
|
||||
JlGraphic,
|
||||
KeyListener,
|
||||
VectorText,
|
||||
} from 'src/jlgraphic';
|
||||
|
||||
@ -21,15 +20,6 @@ export class StationDraw extends GraphicDrawAssistant<
|
||||
point: Point = new Point(0, 0);
|
||||
codeGraph: VectorText = new VectorText('');
|
||||
|
||||
// 快捷绘制
|
||||
keypListener: KeyListener = new KeyListener({
|
||||
value: 'KeyO',
|
||||
global: true,
|
||||
onPress: () => {
|
||||
//this.graphicTemplate.hasdoor = true;
|
||||
},
|
||||
});
|
||||
|
||||
constructor(app: JlDrawApp, createData: () => IStationData) {
|
||||
super(app, new StationTemplate(), createData, Station.Type, '车站Station');
|
||||
this.container.addChild(this.codeGraph);
|
||||
@ -38,11 +28,9 @@ export class StationDraw extends GraphicDrawAssistant<
|
||||
|
||||
bind(): void {
|
||||
super.bind();
|
||||
this.app.addKeyboardListener(this.keypListener);
|
||||
}
|
||||
unbind(): void {
|
||||
super.unbind();
|
||||
this.app.removeKeyboardListener(this.keypListener);
|
||||
}
|
||||
|
||||
clearCache(): void {
|
||||
@ -69,8 +57,14 @@ export class StationDraw extends GraphicDrawAssistant<
|
||||
prepareData(data: IStationData): boolean {
|
||||
const template = this.graphicTemplate;
|
||||
data.point = this.point;
|
||||
data.hasCircle = template.hasCircle;
|
||||
data.radius = template.radius;
|
||||
data.borderWidth = template.borderWidth;
|
||||
data.borderColor = template.borderColor;
|
||||
data.fillColor = template.fillColor;
|
||||
data.codeColor = template.codeColor;
|
||||
data.codeFontSize = template.codeFontSize;
|
||||
data.circlePoint = template.circlePoint;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
185
src/graphics/train/Train.ts
Normal file
185
src/graphics/train/Train.ts
Normal file
@ -0,0 +1,185 @@
|
||||
import { Color, Graphics, IPointData } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
JlGraphic,
|
||||
JlGraphicTemplate,
|
||||
VectorText,
|
||||
} from 'src/jlgraphic';
|
||||
|
||||
export interface ITrainData extends GraphicData {
|
||||
get code(): string; // 车号
|
||||
set code(v: string);
|
||||
get codeColor(): string; // 车号颜色
|
||||
set codeColor(v: string);
|
||||
get codeFontSize(): number; // 车号字体大小
|
||||
set codeFontSize(v: number);
|
||||
get trainDirection(): string; // 行驶方向
|
||||
set trainDirection(v: string);
|
||||
get hasBorder(): boolean; // 是否有边框
|
||||
set hasBorder(v: boolean);
|
||||
get borderWidth(): number; // 边框线宽
|
||||
set borderWidth(v: number);
|
||||
get borderColor(): string; // 边框颜色
|
||||
set borderColor(v: string);
|
||||
get headColor(): string; // 箭头颜色
|
||||
set headColor(v: string);
|
||||
get bodyColor(): string; // 背景色
|
||||
set bodyColor(v: string);
|
||||
get point(): IPointData; // 位置坐标
|
||||
set point(point: IPointData);
|
||||
clone(): ITrainData;
|
||||
copyFrom(data: ITrainData): void;
|
||||
eq(other: ITrainData): boolean;
|
||||
}
|
||||
|
||||
// 列车颜色
|
||||
export enum TrainColorEnum {
|
||||
headColor = '0x00FF00', // 箭头颜色
|
||||
bodyColor = '0xA388B1', // 背景色
|
||||
codeColor = '0xffffff', // 车号颜色
|
||||
borderColor = '0xA3E198', // 边框的颜色
|
||||
}
|
||||
|
||||
export const trainConsts = {
|
||||
borderWidth: 1,
|
||||
codeFontSize: 22,
|
||||
marginX: 2, // 图形x轴边距
|
||||
pauseW: 2, // 停止框宽度
|
||||
};
|
||||
|
||||
export class Train extends JlGraphic {
|
||||
static Type = 'Train';
|
||||
|
||||
arrowLeft: Graphics;
|
||||
pauseLeft: Graphics;
|
||||
arrowRight: Graphics;
|
||||
pauseRight: Graphics;
|
||||
codeRact: Graphics;
|
||||
codeGraph: VectorText = new VectorText(''); //车号
|
||||
constructor() {
|
||||
super(Train.Type);
|
||||
this.arrowLeft = new Graphics();
|
||||
this.pauseLeft = new Graphics();
|
||||
this.arrowRight = new Graphics();
|
||||
this.pauseRight = new Graphics();
|
||||
this.codeRact = new Graphics();
|
||||
this.addChild(this.arrowLeft);
|
||||
this.addChild(this.pauseLeft);
|
||||
this.addChild(this.arrowRight);
|
||||
this.addChild(this.pauseRight);
|
||||
this.addChild(this.codeRact);
|
||||
this.addChild(this.codeGraph);
|
||||
this.codeGraph.setVectorFontSize(trainConsts.codeFontSize);
|
||||
}
|
||||
|
||||
get datas(): ITrainData {
|
||||
return this.getDatas<ITrainData>();
|
||||
}
|
||||
doRepaint(): void {
|
||||
this.position.set(this.datas.point.x, this.datas.point.y);
|
||||
const codeGraph = this.codeGraph;
|
||||
const codeRact = this.codeRact;
|
||||
if (this.datas.code == '') {
|
||||
codeGraph.text = '01110111';
|
||||
} else {
|
||||
codeGraph.text = this.datas.code;
|
||||
}
|
||||
codeGraph.setVectorFontSize(this.datas.codeFontSize);
|
||||
codeGraph.anchor.set(0.5);
|
||||
const style = {
|
||||
fill: this.datas.codeColor,
|
||||
padding: 5,
|
||||
};
|
||||
codeGraph.style = style;
|
||||
const {
|
||||
x: codeX,
|
||||
y: codeY,
|
||||
width: codeWidth,
|
||||
height: codeHeight,
|
||||
} = codeGraph.getLocalBounds();
|
||||
const marginX = trainConsts.marginX;
|
||||
const pauseW = trainConsts.pauseW;
|
||||
const arrowLeft = this.arrowLeft;
|
||||
arrowLeft.beginFill(this.datas.headColor, 1);
|
||||
arrowLeft.drawPolygon([
|
||||
-codeHeight * 0.4 - marginX - pauseW - marginX - codeWidth / 2,
|
||||
0,
|
||||
-marginX - pauseW - marginX - codeWidth / 2,
|
||||
codeHeight / 2,
|
||||
-marginX - pauseW - marginX - codeWidth / 2,
|
||||
-codeHeight / 2,
|
||||
]);
|
||||
arrowLeft.endFill();
|
||||
this.pauseLeft.beginFill(this.datas.headColor, 1);
|
||||
this.pauseLeft.drawRect(0, 0, pauseW, codeHeight);
|
||||
this.pauseLeft.endFill();
|
||||
this.pauseLeft.position.set(
|
||||
-marginX - pauseW - codeWidth / 2,
|
||||
-codeHeight / 2
|
||||
);
|
||||
this.pauseRight.beginFill(this.datas.headColor, 1);
|
||||
this.pauseRight.drawRect(0, 0, pauseW, codeHeight);
|
||||
this.pauseRight.endFill();
|
||||
this.pauseRight.position.set(marginX + codeWidth / 2, -codeHeight / 2);
|
||||
const arrowRight = this.arrowRight;
|
||||
arrowRight.beginFill(this.datas.headColor, 1);
|
||||
arrowRight.drawPolygon([
|
||||
codeWidth / 2 + marginX + pauseW + marginX + codeHeight * 0.4,
|
||||
0,
|
||||
codeWidth / 2 + marginX + pauseW + marginX,
|
||||
codeHeight / 2,
|
||||
codeWidth / 2 + marginX + pauseW + marginX,
|
||||
-codeHeight / 2,
|
||||
]);
|
||||
arrowRight.endFill();
|
||||
if (this.datas.hasBorder) {
|
||||
codeRact.visible = true;
|
||||
codeRact.lineStyle(
|
||||
this.datas.borderWidth,
|
||||
new Color(this.datas.borderColor)
|
||||
);
|
||||
codeRact.beginFill(new Color(this.datas.bodyColor));
|
||||
codeRact.drawRect(codeX, codeY, codeWidth, codeHeight);
|
||||
codeRact.endFill();
|
||||
} else {
|
||||
codeRact.visible = false;
|
||||
}
|
||||
// 运行方向控制箭头停止显隐
|
||||
if (this.datas.trainDirection == 'right') {
|
||||
this.arrowLeft.visible = false;
|
||||
this.arrowRight.visible = true;
|
||||
this.pauseLeft.visible = false;
|
||||
this.pauseRight.visible = true;
|
||||
} else {
|
||||
this.arrowLeft.visible = true;
|
||||
this.arrowRight.visible = false;
|
||||
this.pauseLeft.visible = true;
|
||||
this.pauseRight.visible = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class TrainTemplate extends JlGraphicTemplate<Train> {
|
||||
trainDirection: string;
|
||||
codeFontSize: number;
|
||||
hasBorder: boolean;
|
||||
borderWidth: number;
|
||||
borderColor: string;
|
||||
headColor: string;
|
||||
codeColor: string;
|
||||
bodyColor: string;
|
||||
constructor() {
|
||||
super(Train.Type);
|
||||
this.trainDirection = 'left';
|
||||
this.codeFontSize = trainConsts.codeFontSize;
|
||||
this.hasBorder = true;
|
||||
this.borderWidth = trainConsts.borderWidth;
|
||||
this.borderColor = TrainColorEnum.borderColor;
|
||||
this.headColor = TrainColorEnum.headColor;
|
||||
this.codeColor = TrainColorEnum.codeColor;
|
||||
this.bodyColor = TrainColorEnum.bodyColor;
|
||||
}
|
||||
new(): Train {
|
||||
return new Train();
|
||||
}
|
||||
}
|
||||
141
src/graphics/train/TrainDrawAssistant.ts
Normal file
141
src/graphics/train/TrainDrawAssistant.ts
Normal file
@ -0,0 +1,141 @@
|
||||
import { Color, FederatedPointerEvent, Graphics, Point } from 'pixi.js';
|
||||
import {
|
||||
GraphicDrawAssistant,
|
||||
GraphicInteractionPlugin,
|
||||
JlDrawApp,
|
||||
JlGraphic,
|
||||
VectorText,
|
||||
} from 'src/jlgraphic';
|
||||
|
||||
import { ITrainData, Train, TrainTemplate, trainConsts } from './Train';
|
||||
|
||||
export interface ITrainDrawOptions {
|
||||
newData: () => ITrainData;
|
||||
}
|
||||
|
||||
export class TrainDraw extends GraphicDrawAssistant<TrainTemplate, ITrainData> {
|
||||
point: Point = new Point(0, 0);
|
||||
arrowLeft: Graphics = new Graphics();
|
||||
pauseLeft: Graphics = new Graphics();
|
||||
codeRact: Graphics = new Graphics();
|
||||
|
||||
constructor(app: JlDrawApp, createData: () => ITrainData) {
|
||||
super(app, new TrainTemplate(), createData, Train.Type, '列车Train');
|
||||
this.container.addChild(this.arrowLeft);
|
||||
this.container.addChild(this.pauseLeft);
|
||||
this.container.addChild(this.codeRact);
|
||||
this.graphicTemplate.hasBorder = true;
|
||||
trainInteraction.init(app);
|
||||
}
|
||||
|
||||
bind(): void {
|
||||
super.bind();
|
||||
}
|
||||
unbind(): void {
|
||||
super.unbind();
|
||||
}
|
||||
|
||||
clearCache(): void {
|
||||
this.arrowLeft.clear();
|
||||
this.pauseLeft.clear();
|
||||
this.codeRact.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;
|
||||
const codeGraph = new VectorText(''); // 车号
|
||||
codeGraph.setVectorFontSize(22);
|
||||
codeGraph.anchor.set(0.5);
|
||||
codeGraph.text = '01110111';
|
||||
const style = { padding: 5 };
|
||||
codeGraph.style = style;
|
||||
const { width, height } = codeGraph.getLocalBounds();
|
||||
codeGraph.destroy();
|
||||
const marginX = trainConsts.marginX;
|
||||
const pauseW = trainConsts.pauseW;
|
||||
// 边框
|
||||
if (template.hasBorder) {
|
||||
const codeRact = this.codeRact;
|
||||
codeRact.clear();
|
||||
codeRact.lineStyle(template.borderWidth, new Color(template.borderColor));
|
||||
codeRact.beginFill(new Color(template.bodyColor));
|
||||
codeRact.drawRect(-width / 2, -height / 2, width, height);
|
||||
codeRact.endFill();
|
||||
codeRact.position.set(p.x, p.y);
|
||||
}
|
||||
|
||||
// 箭头
|
||||
const arrowLeft = this.arrowLeft;
|
||||
arrowLeft.clear();
|
||||
this.point.set(p.x, p.y);
|
||||
arrowLeft.beginFill(template.headColor, 1);
|
||||
arrowLeft.drawPolygon([
|
||||
-height * 0.4 - marginX - pauseW - marginX - width / 2,
|
||||
0,
|
||||
-marginX - pauseW - marginX - width / 2,
|
||||
height / 2,
|
||||
-marginX - pauseW - marginX - width / 2,
|
||||
-height / 2,
|
||||
]);
|
||||
arrowLeft.endFill();
|
||||
arrowLeft.position.set(this.point.x, this.point.y);
|
||||
|
||||
// 停止框
|
||||
const pauseLeft = this.pauseLeft;
|
||||
pauseLeft.clear();
|
||||
pauseLeft.beginFill(template.headColor, 1);
|
||||
pauseLeft.drawRect(0, 0, pauseW, height);
|
||||
pauseLeft.endFill();
|
||||
pauseLeft.position.set(
|
||||
this.point.x - marginX - pauseW - width / 2,
|
||||
this.point.y - height / 2
|
||||
);
|
||||
}
|
||||
prepareData(data: ITrainData): boolean {
|
||||
const template = this.graphicTemplate;
|
||||
data.code = '01110111';
|
||||
data.codeColor = template.codeColor;
|
||||
data.codeFontSize = template.codeFontSize;
|
||||
data.hasBorder = template.hasBorder;
|
||||
data.trainDirection = template.trainDirection;
|
||||
data.point = this.point;
|
||||
data.borderWidth = template.borderWidth;
|
||||
data.borderColor = template.borderColor;
|
||||
data.headColor = template.headColor;
|
||||
data.bodyColor = template.bodyColor;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
export class trainInteraction extends GraphicInteractionPlugin<Train> {
|
||||
static Name = 'train_transform';
|
||||
constructor(app: JlDrawApp) {
|
||||
super(trainInteraction.Name, app);
|
||||
}
|
||||
static init(app: JlDrawApp) {
|
||||
return new trainInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): Train[] | undefined {
|
||||
return grahpics.filter((g) => g.type === Train.Type).map((g) => g as Train);
|
||||
}
|
||||
bind(g: Train): void {
|
||||
g.eventMode = 'static';
|
||||
g.cursor = 'pointer';
|
||||
g.scalable = true;
|
||||
g.rotatable = true;
|
||||
}
|
||||
unbind(g: Train): void {
|
||||
g.eventMode = 'none';
|
||||
g.scalable = false;
|
||||
g.rotatable = false;
|
||||
}
|
||||
}
|
||||
@ -19,6 +19,8 @@ import {
|
||||
distance2,
|
||||
linePoint,
|
||||
pointPolygon,
|
||||
calculateLineSegmentingPoint,
|
||||
calculateDistanceFromPointToLine,
|
||||
} from '../utils';
|
||||
import { GraphicTransformEvent, ShiftData } from './GraphicTransformPlugin';
|
||||
|
||||
@ -57,6 +59,9 @@ export abstract class GraphicEditPlugin<
|
||||
export const addWaypointConfig: MenuItemOptions = {
|
||||
name: '添加路径点',
|
||||
};
|
||||
export const addWaySegmentingConfig: MenuItemOptions = {
|
||||
name: '细分',
|
||||
};
|
||||
export const removeWaypointConfig: MenuItemOptions = {
|
||||
name: '移除路径点',
|
||||
};
|
||||
@ -103,6 +108,45 @@ export abstract class LineEditPlugin extends GraphicEditPlugin<ILineGraphic> {
|
||||
abstract initEditPoints(): void;
|
||||
}
|
||||
|
||||
export function getWayLineIndex(
|
||||
points: IPointData[],
|
||||
p: IPointData
|
||||
): { start: number; end: number } {
|
||||
let start = 0;
|
||||
let end = 0;
|
||||
let minDistance = 0;
|
||||
for (let i = 1; i < points.length; i++) {
|
||||
const sp = points[i - 1];
|
||||
const ep = points[i];
|
||||
let distance = calculateDistanceFromPointToLine(sp, ep, p);
|
||||
distance = Math.round(distance * 100) / 100;
|
||||
if (i == 1) {
|
||||
minDistance = distance;
|
||||
}
|
||||
if (distance == minDistance) {
|
||||
const minX = Math.min(sp.x, ep.x);
|
||||
const maxX = Math.max(sp.x, ep.x);
|
||||
const minY = Math.min(sp.y, ep.y);
|
||||
const maxY = Math.max(sp.y, ep.y);
|
||||
const point = calculateFootPointFromPointToLine(sp, ep, p);
|
||||
if (
|
||||
point.x >= minX &&
|
||||
point.x <= maxX &&
|
||||
point.y >= minY &&
|
||||
point.y <= maxY
|
||||
) {
|
||||
start = i - 1;
|
||||
}
|
||||
}
|
||||
if (distance < minDistance) {
|
||||
minDistance = distance;
|
||||
start = i - 1;
|
||||
}
|
||||
}
|
||||
end = start + 1;
|
||||
return { start, end };
|
||||
}
|
||||
|
||||
export function getWaypointRangeIndex(
|
||||
points: IPointData[],
|
||||
curve: boolean,
|
||||
@ -251,6 +295,21 @@ export function addLineWayPoint(
|
||||
graphic.linePoints = points;
|
||||
}
|
||||
|
||||
export function addPolygonSegmentingPoint(
|
||||
graphic: ILineGraphic,
|
||||
start: number,
|
||||
end: number,
|
||||
knife = 2
|
||||
) {
|
||||
const linePoints = graphic.linePoints;
|
||||
const points = linePoints.slice(0, start + 1);
|
||||
points.push(
|
||||
...calculateLineSegmentingPoint(linePoints[start], linePoints[end], knife)
|
||||
);
|
||||
points.push(...linePoints.slice(end));
|
||||
graphic.linePoints = points;
|
||||
}
|
||||
|
||||
function assertBezierWayPoint(i: number) {
|
||||
const c = i % 3;
|
||||
if (c !== 0) {
|
||||
|
||||
@ -287,6 +287,31 @@ export function calculateLineMidpoint(p1: IPointData, p2: IPointData): Point {
|
||||
return new Point(x, y);
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算线段细分坐标--线段分成几份
|
||||
* @param p1
|
||||
* @param p2
|
||||
* @param knife
|
||||
* @returns
|
||||
*/
|
||||
export function calculateLineSegmentingPoint(
|
||||
p1: IPointData,
|
||||
p2: IPointData,
|
||||
knife: number
|
||||
): IPointData[] {
|
||||
const segmentingPoints: IPointData[] = [];
|
||||
const x = p1.x < p2.x ? p1.x : p2.x;
|
||||
const y = p1.y < p2.y ? p1.y : p2.y;
|
||||
const w = Math.abs(p1.x - p2.x);
|
||||
const h = Math.abs(p1.y - p2.y);
|
||||
for (let i = 0; i < knife - 1; i++) {
|
||||
const pointX = x + (w * (i + 1)) / knife;
|
||||
const pointy = y + (h * (i + 1)) / knife;
|
||||
segmentingPoints.push(new Point(pointX, pointy));
|
||||
}
|
||||
return segmentingPoints;
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算点到直线距离
|
||||
* @param p1
|
||||
|
||||
Loading…
Reference in New Issue
Block a user