Merge branch 'master' of git.code.tencent.com:beijing-rtss-test/bj-rtss-client
This commit is contained in:
Yuan
commit
61b439341a
@ -1 +1 @@
|
||||
Subproject commit 6800d67a23481d784e1385930446e8f0bec36117
|
||||
Subproject commit 189d4b0ec909efb7bd6ba1fc5cd69e392c994bda
|
||||
@ -1,76 +0,0 @@
|
||||
<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>
|
||||
@ -1,197 +0,0 @@
|
||||
import * as pb_1 from 'google-protobuf';
|
||||
import { IPolygonData, Polygon } from 'src/graphics/polygon/Polygon';
|
||||
import { graphicData } from 'src/protos/stationLayoutGraphics';
|
||||
import { GraphicDataBase } from './GraphicDataBase';
|
||||
import { DisplayObject, FederatedMouseEvent, IPointData } from 'pixi.js';
|
||||
import {
|
||||
GraphicApp,
|
||||
GraphicInteractionPlugin,
|
||||
JlGraphic,
|
||||
} from 'src/jl-graphic';
|
||||
import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
|
||||
import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
|
||||
import {
|
||||
PolylineEditPlugin,
|
||||
clearWayPoint,
|
||||
removeLineWayPoint,
|
||||
} from 'src/jl-graphic/plugins/GraphicEditPlugin';
|
||||
import {
|
||||
addPolygonSegmentingPoint,
|
||||
getWayLineIndex,
|
||||
} from 'src/graphics/polygon/PolygonUtils';
|
||||
|
||||
export class PolygonData extends GraphicDataBase implements IPolygonData {
|
||||
constructor(data?: graphicData.Polygon) {
|
||||
let polygon;
|
||||
if (!data) {
|
||||
polygon = new graphicData.Polygon({
|
||||
common: GraphicDataBase.defaultCommonInfo(Polygon.Type),
|
||||
});
|
||||
} else {
|
||||
polygon = data;
|
||||
}
|
||||
super(polygon);
|
||||
}
|
||||
|
||||
public get data(): graphicData.Polygon {
|
||||
return this.getData<graphicData.Polygon>();
|
||||
}
|
||||
|
||||
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 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(): PolygonData {
|
||||
return new PolygonData(this.data.cloneMessage());
|
||||
}
|
||||
copyFrom(data: PolygonData): void {
|
||||
pb_1.Message.copyInto(data.data, this.data);
|
||||
}
|
||||
eq(other: PolygonData): boolean {
|
||||
return pb_1.Message.equals(this.data, other.data);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* polygon编辑菜单配置
|
||||
*/
|
||||
|
||||
const threeSegmentingConfig: MenuItemOptions = {
|
||||
name: '3等分',
|
||||
};
|
||||
const foreSegmentingConfig: MenuItemOptions = {
|
||||
name: '4等分',
|
||||
};
|
||||
const fiveSegmentingConfig: MenuItemOptions = {
|
||||
name: '5等分',
|
||||
};
|
||||
|
||||
const chooseSegmentingConfig: MenuItemOptions = {
|
||||
name: '细分',
|
||||
subMenu: [
|
||||
{
|
||||
name: '内置图形',
|
||||
items: [
|
||||
threeSegmentingConfig,
|
||||
foreSegmentingConfig,
|
||||
fiveSegmentingConfig,
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
const removeWaypointConfig: MenuItemOptions = {
|
||||
name: '移除路径点',
|
||||
};
|
||||
const clearWaypointsConfig: MenuItemOptions = {
|
||||
name: '清除所有路径点',
|
||||
};
|
||||
const PolygonEditMenu: ContextMenu = ContextMenu.init({
|
||||
name: '多边形边的编辑菜单',
|
||||
groups: [
|
||||
{
|
||||
items: [chooseSegmentingConfig, clearWaypointsConfig],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const EpEditMenu: ContextMenu = ContextMenu.init({
|
||||
name: '多边形点的编辑菜单',
|
||||
groups: [
|
||||
{
|
||||
items: [removeWaypointConfig, clearWaypointsConfig],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export class DrawPolygonPlugin extends GraphicInteractionPlugin<Polygon> {
|
||||
static Name = 'polygon_draw_right_menu';
|
||||
constructor(app: GraphicApp) {
|
||||
super(DrawPolygonPlugin.Name, app);
|
||||
app.registerMenu(PolygonEditMenu);
|
||||
app.registerMenu(EpEditMenu);
|
||||
}
|
||||
static init(app: GraphicApp) {
|
||||
return new DrawPolygonPlugin(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): Polygon[] | undefined {
|
||||
return grahpics
|
||||
.filter((g) => g.type === Polygon.Type)
|
||||
.map((g) => g as Polygon);
|
||||
}
|
||||
bind(g: Polygon): void {
|
||||
g.on('_rightclick', this.onContextMenu, this);
|
||||
g.on('selected', this.onSelected, this);
|
||||
}
|
||||
|
||||
unbind(g: Polygon): void {
|
||||
g.off('_rightclick', this.onContextMenu, this);
|
||||
g.off('selected', this.onSelected, this);
|
||||
}
|
||||
|
||||
onSelected(g: DisplayObject) {
|
||||
const polylineEditPlugin = g.assistantAppendMap.get(
|
||||
PolylineEditPlugin.Name
|
||||
) as PolylineEditPlugin;
|
||||
const link = g.getGraphic() as Polygon;
|
||||
polylineEditPlugin.editedPoints.forEach((ep, index) => {
|
||||
ep.on('rightclick', (e: FederatedMouseEvent) => {
|
||||
this.app.registerMenu(EpEditMenu);
|
||||
removeWaypointConfig.handler = () => {
|
||||
removeLineWayPoint(link, index);
|
||||
};
|
||||
clearWaypointsConfig.handler = () => {
|
||||
clearWayPoint(link, false);
|
||||
};
|
||||
EpEditMenu.open(e.global);
|
||||
});
|
||||
});
|
||||
}
|
||||
onContextMenu(e: FederatedMouseEvent) {
|
||||
const target = e.target as DisplayObject;
|
||||
const polygon = target.getGraphic() as Polygon;
|
||||
this.app.updateSelected(polygon);
|
||||
const linePoints = polygon.addOnePoints();
|
||||
const p = polygon.screenToLocalPoint(e.global);
|
||||
const { start, end } = getWayLineIndex(linePoints, p);
|
||||
|
||||
chooseSegmentingConfig.handler = () => {
|
||||
addPolygonSegmentingPoint(polygon, start, end);
|
||||
};
|
||||
threeSegmentingConfig.handler = () => {
|
||||
addPolygonSegmentingPoint(polygon, start, end, 3);
|
||||
};
|
||||
foreSegmentingConfig.handler = () => {
|
||||
addPolygonSegmentingPoint(polygon, start, end, 4);
|
||||
};
|
||||
fiveSegmentingConfig.handler = () => {
|
||||
addPolygonSegmentingPoint(polygon, start, end, 5);
|
||||
};
|
||||
clearWaypointsConfig.handler = () => {
|
||||
clearWayPoint(polygon, false);
|
||||
};
|
||||
PolygonEditMenu.open(e.global);
|
||||
}
|
||||
}
|
||||
@ -74,7 +74,96 @@ export class TrainState extends GraphicStateBase implements ITrainState {
|
||||
set occupiedLinkIndex(v: string[]) {
|
||||
this.states.occupiedLinkIndex = v;
|
||||
}
|
||||
|
||||
get heartbeat(): number {
|
||||
return this.states.heartbeat;
|
||||
}
|
||||
set heartbeat(v: number) {
|
||||
this.states.heartbeat = v;
|
||||
}
|
||||
get slope(): number {
|
||||
return this.states.slope;
|
||||
}
|
||||
set slope(v: number) {
|
||||
this.states.slope = v;
|
||||
}
|
||||
get upslope(): boolean {
|
||||
return this.states.upslope;
|
||||
}
|
||||
set upslope(v: boolean) {
|
||||
this.states.upslope = v;
|
||||
}
|
||||
get runningUp(): boolean {
|
||||
return this.states.runningUp;
|
||||
}
|
||||
set runningUp(v: boolean) {
|
||||
this.states.runningUp = v;
|
||||
}
|
||||
get runningResistanceSum(): number {
|
||||
return this.states.runningResistanceSum;
|
||||
}
|
||||
set runningResistanceSum(v: number) {
|
||||
this.states.runningResistanceSum = v;
|
||||
}
|
||||
get airResistance(): number {
|
||||
return this.states.airResistance;
|
||||
}
|
||||
set airResistance(v: number) {
|
||||
this.states.airResistance = v;
|
||||
}
|
||||
get rampResistance(): number {
|
||||
return this.states.rampResistance;
|
||||
}
|
||||
set rampResistance(v: number) {
|
||||
this.states.rampResistance = v;
|
||||
}
|
||||
get curveResistance(): number {
|
||||
return this.states.curveResistance;
|
||||
}
|
||||
set curveResistance(v: number) {
|
||||
this.states.curveResistance = v;
|
||||
}
|
||||
get speed(): number {
|
||||
return this.states.speed;
|
||||
}
|
||||
set speed(v: number) {
|
||||
this.states.speed = v;
|
||||
}
|
||||
get headSensorSpeed1(): number {
|
||||
return this.states.headSensorSpeed1;
|
||||
}
|
||||
set headSensorSpeed1(v: number) {
|
||||
this.states.headSensorSpeed1 = v;
|
||||
}
|
||||
get headSensorSpeed2(): number {
|
||||
return this.states.headSensorSpeed2;
|
||||
}
|
||||
set headSensorSpeed2(v: number) {
|
||||
this.states.headSensorSpeed2 = v;
|
||||
}
|
||||
get tailSensorSpeed1(): number {
|
||||
return this.states.tailSensorSpeed1;
|
||||
}
|
||||
set tailSensorSpeed1(v: number) {
|
||||
this.states.tailSensorSpeed1 = v;
|
||||
}
|
||||
get tailSensorSpeed2(): number {
|
||||
return this.states.tailSensorSpeed2;
|
||||
}
|
||||
set tailSensorSpeed2(v: number) {
|
||||
this.states.tailSensorSpeed2 = v;
|
||||
}
|
||||
get headRadarSpeed(): number {
|
||||
return this.states.headRadarSpeed;
|
||||
}
|
||||
set headRadarSpeed(v: number) {
|
||||
this.states.headRadarSpeed = v;
|
||||
}
|
||||
get tailRadarSpeed(): number {
|
||||
return this.states.tailRadarSpeed;
|
||||
}
|
||||
set tailRadarSpeed(v: number) {
|
||||
this.states.tailRadarSpeed = v;
|
||||
}
|
||||
clone(): TrainState {
|
||||
return new TrainState(this.states.cloneMessage());
|
||||
}
|
||||
|
||||
@ -280,7 +280,7 @@ export async function loadLineDatas(app: GraphicApp) {
|
||||
});
|
||||
storage.allStatus.trainState.forEach((item) => {
|
||||
// 列车
|
||||
// states.push(new TrainState(item));
|
||||
states.push(new TrainState(item));
|
||||
});
|
||||
} else {
|
||||
storage.varStatus.updatedSection.forEach((item) => {
|
||||
@ -311,6 +311,9 @@ export async function loadLineDatas(app: GraphicApp) {
|
||||
}
|
||||
});
|
||||
}
|
||||
if (states && states.length > 0) {
|
||||
lineStore.setSocketStates(states);
|
||||
}
|
||||
return states;
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,102 +0,0 @@
|
||||
import { Color, Graphics, IPointData } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
JlGraphic,
|
||||
JlGraphicTemplate,
|
||||
convertToBezierParams,
|
||||
} from 'src/jl-graphic';
|
||||
import { ILineGraphic } from 'src/jl-graphic/plugins/GraphicEditPlugin';
|
||||
|
||||
export interface ILinkData extends GraphicData {
|
||||
get code(): string; // 编号
|
||||
set code(v: string);
|
||||
get curve(): boolean; // 是否曲线
|
||||
set curve(v: boolean);
|
||||
get segmentsCount(): number; // 曲线分段数
|
||||
set segmentsCount(v: number);
|
||||
get points(): IPointData[]; // 线坐标点
|
||||
set points(points: IPointData[]);
|
||||
get lineWidth(): number; // 线宽
|
||||
set lineWidth(v: number);
|
||||
get lineColor(): string; // 线色
|
||||
set lineColor(v: string);
|
||||
clone(): ILinkData;
|
||||
copyFrom(data: ILinkData): void;
|
||||
eq(other: ILinkData): boolean;
|
||||
}
|
||||
|
||||
export class Link extends JlGraphic implements ILineGraphic {
|
||||
static Type = 'Link';
|
||||
lineGraphic: Graphics;
|
||||
constructor() {
|
||||
super(Link.Type);
|
||||
this.lineGraphic = new Graphics();
|
||||
this.addChild(this.lineGraphic);
|
||||
}
|
||||
|
||||
get datas(): ILinkData {
|
||||
return this.getDatas<ILinkData>();
|
||||
}
|
||||
doRepaint(): void {
|
||||
if (this.datas.points.length < 2) {
|
||||
throw new Error('Link坐标数据异常');
|
||||
}
|
||||
this.lineGraphic.clear();
|
||||
this.lineGraphic.lineStyle(
|
||||
this.datas.lineWidth,
|
||||
new Color(this.datas.lineColor)
|
||||
);
|
||||
if (this.datas.curve) {
|
||||
// 曲线
|
||||
const bps = convertToBezierParams(this.datas.points);
|
||||
bps.forEach((bp) => {
|
||||
this.lineGraphic.drawBezierCurve(
|
||||
bp.p1,
|
||||
bp.p2,
|
||||
bp.cp1,
|
||||
bp.cp2,
|
||||
this.datas.segmentsCount
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// 直线
|
||||
const start = this.getStartPoint();
|
||||
this.lineGraphic.moveTo(start.x, start.y);
|
||||
for (let i = 0; i < this.datas.points.length; i++) {
|
||||
const p = this.datas.points[i];
|
||||
this.lineGraphic.lineTo(p.x, p.y);
|
||||
}
|
||||
}
|
||||
}
|
||||
get linePoints(): IPointData[] {
|
||||
return this.datas.points;
|
||||
}
|
||||
set linePoints(points: IPointData[]) {
|
||||
const old = this.datas.clone();
|
||||
old.points = points;
|
||||
this.updateData(old);
|
||||
}
|
||||
getStartPoint(): IPointData {
|
||||
return this.datas.points[0];
|
||||
}
|
||||
getEndPoint(): IPointData {
|
||||
return this.datas.points[this.datas.points.length - 1];
|
||||
}
|
||||
}
|
||||
|
||||
export class LinkTemplate extends JlGraphicTemplate<Link> {
|
||||
curve: boolean;
|
||||
lineWidth: number;
|
||||
lineColor: string;
|
||||
segmentsCount: number;
|
||||
constructor() {
|
||||
super(Link.Type, {});
|
||||
this.lineWidth = 2;
|
||||
this.lineColor = '#000000';
|
||||
this.curve = false;
|
||||
this.segmentsCount = 10;
|
||||
}
|
||||
new(): Link {
|
||||
return new Link();
|
||||
}
|
||||
}
|
||||
@ -1,336 +0,0 @@
|
||||
import {
|
||||
Color,
|
||||
DisplayObject,
|
||||
FederatedMouseEvent,
|
||||
FederatedPointerEvent,
|
||||
Graphics,
|
||||
IHitArea,
|
||||
Point,
|
||||
} from 'pixi.js';
|
||||
import {
|
||||
AbsorbablePosition,
|
||||
DraggablePoint,
|
||||
GraphicApp,
|
||||
GraphicDrawAssistant,
|
||||
GraphicInteractionPlugin,
|
||||
GraphicTransformEvent,
|
||||
JlDrawApp,
|
||||
JlGraphic,
|
||||
KeyListener,
|
||||
calculateMirrorPoint,
|
||||
convertToBezierParams,
|
||||
linePoint,
|
||||
pointPolygon,
|
||||
} from 'src/jl-graphic';
|
||||
import AbsorbablePoint, {
|
||||
AbsorbableCircle,
|
||||
} from 'src/jl-graphic/graphic/AbsorbablePosition';
|
||||
import {
|
||||
BezierCurveEditPlugin,
|
||||
ILineGraphic,
|
||||
PolylineEditPlugin,
|
||||
} from 'src/jl-graphic/plugins/GraphicEditPlugin';
|
||||
import { ILinkData, Link, LinkTemplate } from './Link';
|
||||
|
||||
export interface ILinkDrawOptions {
|
||||
newData: () => ILinkData;
|
||||
}
|
||||
|
||||
export class LinkDraw extends GraphicDrawAssistant<LinkTemplate, ILinkData> {
|
||||
points: Point[] = [];
|
||||
graphic: Graphics = new Graphics();
|
||||
|
||||
// 快捷切曲线绘制
|
||||
keyqListener: KeyListener = new KeyListener({
|
||||
value: 'KeyQ',
|
||||
global: true,
|
||||
onPress: () => {
|
||||
if (this.points.length == 0) {
|
||||
this.graphicTemplate.curve = true;
|
||||
}
|
||||
},
|
||||
});
|
||||
// 快捷切直线绘制
|
||||
keyzListener: KeyListener = new KeyListener({
|
||||
value: 'KeyZ',
|
||||
global: true,
|
||||
onPress: () => {
|
||||
if (this.points.length == 0) {
|
||||
this.graphicTemplate.curve = false;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
constructor(app: JlDrawApp) {
|
||||
super(app, new LinkTemplate(), 'sym_o_horizontal_rule', '轨道Link');
|
||||
this.container.addChild(this.graphic);
|
||||
this.graphicTemplate.curve = true;
|
||||
|
||||
LinkPointsEditPlugin.init(app);
|
||||
}
|
||||
|
||||
bind(): void {
|
||||
super.bind();
|
||||
this.app.addKeyboardListener(this.keyqListener, this.keyzListener);
|
||||
}
|
||||
unbind(): void {
|
||||
super.unbind();
|
||||
this.app.removeKeyboardListener(this.keyqListener, this.keyzListener);
|
||||
}
|
||||
|
||||
clearCache(): void {
|
||||
this.points = [];
|
||||
this.graphic.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.graphicTemplate.curve) {
|
||||
if (this.points.length == 0) {
|
||||
this.points.push(p);
|
||||
} else {
|
||||
this.points.push(p, p.clone());
|
||||
}
|
||||
} else {
|
||||
this.points.push(p);
|
||||
}
|
||||
}
|
||||
onLeftUp(e: FederatedMouseEvent): void {
|
||||
const template = this.graphicTemplate;
|
||||
if (template.curve) {
|
||||
const mp = this.toCanvasCoordinates(e.global);
|
||||
if (this.points.length == 1) {
|
||||
this.points.push(new Point(mp.x, mp.y));
|
||||
} else if (this.points.length > 1) {
|
||||
const cp2 = this.points[this.points.length - 2];
|
||||
const p = this.points[this.points.length - 1];
|
||||
cp2.copyFrom(calculateMirrorPoint(p, mp));
|
||||
this.points.push(mp);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
redraw(p: Point): void {
|
||||
if (this.points.length < 1) return;
|
||||
this.graphic.clear();
|
||||
const template = this.graphicTemplate;
|
||||
this.graphic.lineStyle(template.lineWidth, new Color(template.lineColor));
|
||||
const ps = [...this.points];
|
||||
if (template.curve) {
|
||||
// 曲线
|
||||
if (ps.length == 1) {
|
||||
this.graphic.moveTo(ps[0].x, ps[0].y);
|
||||
this.graphic.lineTo(p.x, p.y);
|
||||
} else {
|
||||
if ((ps.length + 1) % 3 == 0) {
|
||||
ps.push(p.clone(), p.clone());
|
||||
} else {
|
||||
const cp = ps[ps.length - 2];
|
||||
const p1 = ps[ps.length - 1];
|
||||
const mp = calculateMirrorPoint(p1, p);
|
||||
cp.copyFrom(mp);
|
||||
}
|
||||
|
||||
const bps = convertToBezierParams(ps);
|
||||
bps.forEach((bp) =>
|
||||
this.graphic.drawBezierCurve(
|
||||
bp.p1,
|
||||
bp.p2,
|
||||
bp.cp1,
|
||||
bp.cp2,
|
||||
template.segmentsCount
|
||||
)
|
||||
);
|
||||
}
|
||||
} else {
|
||||
ps.push(p);
|
||||
// 直线
|
||||
this.graphic.moveTo(ps[0].x, ps[0].y);
|
||||
for (let i = 1; i < ps.length; i++) {
|
||||
const p = ps[i];
|
||||
this.graphic.lineTo(p.x, p.y);
|
||||
}
|
||||
}
|
||||
}
|
||||
prepareData(data: ILinkData): boolean {
|
||||
const template = this.graphicTemplate;
|
||||
if (
|
||||
(!template.curve && this.points.length < 2) ||
|
||||
(template.curve && this.points.length < 4)
|
||||
) {
|
||||
console.log('Link绘制因点不够取消绘制');
|
||||
return false;
|
||||
}
|
||||
if (template.curve) {
|
||||
this.points.pop();
|
||||
}
|
||||
data.curve = template.curve;
|
||||
data.segmentsCount = template.segmentsCount;
|
||||
data.points = this.points;
|
||||
data.lineWidth = template.lineWidth;
|
||||
data.lineColor = template.lineColor;
|
||||
data.segmentsCount = template.segmentsCount;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
export class LinkGraphicHitArea implements IHitArea {
|
||||
link: Link;
|
||||
constructor(link: Link) {
|
||||
this.link = link;
|
||||
}
|
||||
contains(x: number, y: number): boolean {
|
||||
const p = new Point(x, y);
|
||||
if (this.link.datas.curve) {
|
||||
// 曲线
|
||||
const bps = convertToBezierParams(this.link.datas.points);
|
||||
for (let i = 0; i < bps.length; i++) {
|
||||
const bp = bps[i];
|
||||
if (
|
||||
pointPolygon(
|
||||
p,
|
||||
[bp.p1, bp.cp1, bp.cp2, bp.p2],
|
||||
this.link.datas.lineWidth
|
||||
)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 直线
|
||||
for (let i = 1; i < this.link.datas.points.length; i++) {
|
||||
const p1 = this.link.datas.points[i - 1];
|
||||
const p2 = this.link.datas.points[i];
|
||||
if (linePoint(p1, p2, p, this.link.datas.lineWidth)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建吸附位置
|
||||
* @param link
|
||||
* @returns
|
||||
*/
|
||||
function buildAbsorbablePositions(link: Link): AbsorbablePosition[] {
|
||||
const aps: AbsorbablePosition[] = [];
|
||||
const links = link.queryStore.queryByType<Link>(Link.Type);
|
||||
links.forEach((other) => {
|
||||
if (other.id == link.id) {
|
||||
return;
|
||||
}
|
||||
const apa = new AbsorbablePoint(
|
||||
other.localToCanvasPoint(other.getStartPoint())
|
||||
);
|
||||
const apb = new AbsorbablePoint(
|
||||
other.localToCanvasPoint(other.getEndPoint())
|
||||
);
|
||||
aps.push(apa, apb);
|
||||
});
|
||||
|
||||
aps.push(new AbsorbableCircle(new Point(450, 410), 30));
|
||||
|
||||
return aps;
|
||||
}
|
||||
|
||||
/**
|
||||
* 端点拖拽添加吸附位置
|
||||
* @param g
|
||||
* @param dp
|
||||
* @param index
|
||||
*/
|
||||
function onEditPointCreate(
|
||||
g: ILineGraphic,
|
||||
dp: DraggablePoint,
|
||||
index: number
|
||||
): void {
|
||||
const link = g as Link;
|
||||
if (index === 0 || index == link.datas.points.length - 1) {
|
||||
// 端点
|
||||
dp.on('transformstart', (e: GraphicTransformEvent) => {
|
||||
if (e.isShift()) {
|
||||
link.getGraphicApp().setOptions({
|
||||
absorbablePositions: buildAbsorbablePositions(link),
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* link路径编辑
|
||||
*/
|
||||
export class LinkPointsEditPlugin extends GraphicInteractionPlugin<Link> {
|
||||
static Name = 'LinkPointsDrag';
|
||||
constructor(app: GraphicApp) {
|
||||
super(LinkPointsEditPlugin.Name, app);
|
||||
}
|
||||
static init(app: GraphicApp): LinkPointsEditPlugin {
|
||||
return new LinkPointsEditPlugin(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): Link[] | undefined {
|
||||
return grahpics.filter((g) => g.type == Link.Type) as Link[];
|
||||
}
|
||||
bind(g: Link): void {
|
||||
g.lineGraphic.eventMode = 'static';
|
||||
g.lineGraphic.cursor = 'pointer';
|
||||
g.lineGraphic.hitArea = new LinkGraphicHitArea(g);
|
||||
g.on('selected', this.onSelected, this);
|
||||
g.on('unselected', this.onUnselected, this);
|
||||
}
|
||||
unbind(g: Link): void {
|
||||
g.off('selected', this.onSelected, this);
|
||||
g.off('unselected', this.onUnselected, this);
|
||||
}
|
||||
|
||||
onSelected(g: DisplayObject): void {
|
||||
const link = g as Link;
|
||||
let lep;
|
||||
if (link.datas.curve) {
|
||||
// 曲线
|
||||
lep = link.getAssistantAppend<BezierCurveEditPlugin>(
|
||||
BezierCurveEditPlugin.Name
|
||||
);
|
||||
if (!lep) {
|
||||
lep = new BezierCurveEditPlugin(link, {
|
||||
onEditPointCreate,
|
||||
});
|
||||
link.addAssistantAppend(lep);
|
||||
}
|
||||
} else {
|
||||
// 直线
|
||||
lep = link.getAssistantAppend<PolylineEditPlugin>(
|
||||
PolylineEditPlugin.Name
|
||||
);
|
||||
if (!lep) {
|
||||
lep = new PolylineEditPlugin(link, { onEditPointCreate });
|
||||
link.addAssistantAppend(lep);
|
||||
}
|
||||
}
|
||||
lep.showAll();
|
||||
}
|
||||
onUnselected(g: DisplayObject): void {
|
||||
const link = g as Link;
|
||||
let lep;
|
||||
if (link.datas.curve) {
|
||||
// 曲线
|
||||
lep = link.getAssistantAppend<BezierCurveEditPlugin>(
|
||||
BezierCurveEditPlugin.Name
|
||||
);
|
||||
} else {
|
||||
// 直线
|
||||
lep = link.getAssistantAppend<PolylineEditPlugin>(
|
||||
PolylineEditPlugin.Name
|
||||
);
|
||||
}
|
||||
if (lep) {
|
||||
lep.hideAll();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,72 +0,0 @@
|
||||
import { Color, Graphics, IPointData } from 'pixi.js';
|
||||
import { GraphicData, JlGraphic, JlGraphicTemplate } from 'src/jl-graphic';
|
||||
|
||||
export interface IPolygonData extends GraphicData {
|
||||
get code(): string; // 编号
|
||||
set code(v: string);
|
||||
get lineWidth(): number; // 线宽
|
||||
set lineWidth(v: number);
|
||||
get lineColor(): string; // 线色
|
||||
set lineColor(v: string);
|
||||
get points(): IPointData[]; // 多边形坐标点
|
||||
set points(points: IPointData[]);
|
||||
clone(): IPolygonData;
|
||||
copyFrom(data: IPolygonData): void;
|
||||
eq(other: IPolygonData): boolean;
|
||||
}
|
||||
|
||||
const polygonConsts = {
|
||||
lineWidth: 2,
|
||||
lineColor: '0xff0000',
|
||||
};
|
||||
|
||||
export class Polygon extends JlGraphic {
|
||||
static Type = 'Polygon';
|
||||
polygonGraphic: Graphics;
|
||||
constructor() {
|
||||
super(Polygon.Type);
|
||||
this.polygonGraphic = new Graphics();
|
||||
this.addChild(this.polygonGraphic);
|
||||
}
|
||||
|
||||
get datas(): IPolygonData {
|
||||
return this.getDatas<IPolygonData>();
|
||||
}
|
||||
doRepaint(): void {
|
||||
const polygonGraphic = this.polygonGraphic;
|
||||
polygonGraphic.clear();
|
||||
polygonGraphic.lineStyle(
|
||||
this.datas.lineWidth,
|
||||
new Color(this.datas.lineColor)
|
||||
);
|
||||
polygonGraphic.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);
|
||||
}
|
||||
addOnePoints(): IPointData[] {
|
||||
const ps = [...this.datas.points];
|
||||
ps.push(this.datas.points[0]);
|
||||
return ps;
|
||||
}
|
||||
}
|
||||
|
||||
export class PolygonTemplate extends JlGraphicTemplate<Polygon> {
|
||||
lineWidth: number;
|
||||
lineColor: string;
|
||||
constructor(dataTemplate: IPolygonData) {
|
||||
super(Polygon.Type, {
|
||||
dataTemplate,
|
||||
});
|
||||
this.lineWidth = polygonConsts.lineWidth;
|
||||
this.lineColor = polygonConsts.lineColor;
|
||||
}
|
||||
new(): Polygon {
|
||||
return new Polygon();
|
||||
}
|
||||
}
|
||||
@ -1,195 +0,0 @@
|
||||
import {
|
||||
FederatedPointerEvent,
|
||||
Graphics,
|
||||
Point,
|
||||
IHitArea,
|
||||
DisplayObject,
|
||||
} from 'pixi.js';
|
||||
import {
|
||||
DraggablePoint,
|
||||
GraphicApp,
|
||||
GraphicDrawAssistant,
|
||||
GraphicInteractionPlugin,
|
||||
GraphicTransformEvent,
|
||||
JlDrawApp,
|
||||
JlGraphic,
|
||||
linePoint,
|
||||
} from 'src/jl-graphic';
|
||||
|
||||
import AbsorbablePoint, {
|
||||
AbsorbablePosition,
|
||||
} from 'src/jl-graphic/graphic/AbsorbablePosition';
|
||||
import {
|
||||
ILineGraphic,
|
||||
PolylineEditPlugin,
|
||||
} from 'src/jl-graphic/plugins/GraphicEditPlugin';
|
||||
|
||||
import { IPolygonData, Polygon, PolygonTemplate } from './Polygon';
|
||||
|
||||
export interface IPolygonDrawOptions {
|
||||
newData: () => IPolygonData;
|
||||
}
|
||||
|
||||
export class PolygonDraw extends GraphicDrawAssistant<
|
||||
PolygonTemplate,
|
||||
IPolygonData
|
||||
> {
|
||||
points: Point[] = [];
|
||||
polygonGraphic: Graphics = new Graphics();
|
||||
|
||||
constructor(app: JlDrawApp, template: PolygonTemplate) {
|
||||
super(app, template, 'sym_o_square', '多边形Polygon');
|
||||
this.container.addChild(this.polygonGraphic);
|
||||
PolygonPointsEditPlugin.init(app);
|
||||
}
|
||||
|
||||
clearCache(): void {
|
||||
this.points = [];
|
||||
this.polygonGraphic.clear();
|
||||
}
|
||||
onLeftDown(e: FederatedPointerEvent): void {
|
||||
const { x, y } = this.toCanvasCoordinates(e.global);
|
||||
const p = new Point(x, y);
|
||||
this.points.push(p);
|
||||
}
|
||||
onRightClick(): void {
|
||||
this.createAndStore(true);
|
||||
}
|
||||
redraw(p: Point): void {
|
||||
if (this.points.length < 1) return;
|
||||
const polygonGraphic = this.polygonGraphic;
|
||||
const template = this.graphicTemplate;
|
||||
const ps = [...this.points];
|
||||
ps.push(p);
|
||||
polygonGraphic.clear();
|
||||
polygonGraphic.lineStyle(template.lineWidth, template.lineColor);
|
||||
polygonGraphic.drawPolygon(ps);
|
||||
}
|
||||
|
||||
prepareData(data: IPolygonData): boolean {
|
||||
if (this.points.length < 2) {
|
||||
console.log('Polygon绘制因点不够取消绘制');
|
||||
return false;
|
||||
}
|
||||
const template = this.graphicTemplate;
|
||||
data.lineWidth = template.lineWidth;
|
||||
data.lineColor = template.lineColor;
|
||||
data.points = this.points;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
//碰撞检测
|
||||
export class PolygonGraphicHitArea implements IHitArea {
|
||||
polygon: Polygon;
|
||||
constructor(polygon: Polygon) {
|
||||
this.polygon = polygon;
|
||||
}
|
||||
contains(x: number, y: number): boolean {
|
||||
let contains = false;
|
||||
const p = new Point(x, y);
|
||||
const polygonData = this.polygon.datas;
|
||||
//contains = pointPolygon(p, polygonData.points, polygonData.lineWidth);是否包含多边形内部
|
||||
const ps = this.polygon.addOnePoints();
|
||||
const tolerance = polygonData.lineWidth;
|
||||
for (let i = 0; i < ps.length - 1; i++) {
|
||||
const p1 = ps[i];
|
||||
const p2 = ps[i + 1];
|
||||
contains = contains || linePoint(p1, p2, p, tolerance);
|
||||
if (contains) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return contains;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建吸附位置
|
||||
* @param polygon
|
||||
* @returns
|
||||
*/
|
||||
function buildAbsorbablePositions(polygon: Polygon): AbsorbablePosition[] {
|
||||
const aps: AbsorbablePosition[] = [];
|
||||
const polygons = polygon.queryStore.queryByType<Polygon>(Polygon.Type);
|
||||
|
||||
polygons.forEach((other) => {
|
||||
if (other.id == polygon.id) {
|
||||
return;
|
||||
}
|
||||
other.linePoints.forEach((point) => {
|
||||
const absorbablePoint = new AbsorbablePoint(
|
||||
other.localToCanvasPoint(point)
|
||||
);
|
||||
aps.push(absorbablePoint);
|
||||
});
|
||||
});
|
||||
|
||||
return aps;
|
||||
}
|
||||
|
||||
/**
|
||||
* 端点拖拽添加吸附位置
|
||||
* @param g
|
||||
* @param dp
|
||||
* @param index
|
||||
*/
|
||||
function onEditPointCreate(g: ILineGraphic, dp: DraggablePoint): void {
|
||||
const polygon = g as Polygon;
|
||||
// 端点
|
||||
dp.on('transformstart', (e: GraphicTransformEvent) => {
|
||||
if (e.isShift()) {
|
||||
polygon.getGraphicApp().setOptions({
|
||||
absorbablePositions: buildAbsorbablePositions(polygon),
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* polygon路径编辑
|
||||
*/
|
||||
export class PolygonPointsEditPlugin extends GraphicInteractionPlugin<Polygon> {
|
||||
static Name = 'PolygonPointsDrag';
|
||||
constructor(app: GraphicApp) {
|
||||
super(PolygonPointsEditPlugin.Name, app);
|
||||
}
|
||||
static init(app: GraphicApp): PolygonPointsEditPlugin {
|
||||
return new PolygonPointsEditPlugin(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): Polygon[] | undefined {
|
||||
return grahpics.filter((g) => g.type == Polygon.Type) as Polygon[];
|
||||
}
|
||||
bind(g: Polygon): void {
|
||||
g.polygonGraphic.eventMode = 'static';
|
||||
g.polygonGraphic.cursor = 'pointer';
|
||||
g.polygonGraphic.hitArea = new PolygonGraphicHitArea(g);
|
||||
g.on('selected', this.onSelected, this);
|
||||
g.on('unselected', this.onUnselected, this);
|
||||
}
|
||||
unbind(g: Polygon): void {
|
||||
g.off('selected', this.onSelected, this);
|
||||
g.off('unselected', this.onUnselected, this);
|
||||
}
|
||||
|
||||
onSelected(g: DisplayObject): void {
|
||||
const polygon = g as Polygon;
|
||||
let lep = polygon.getAssistantAppend<PolylineEditPlugin>(
|
||||
PolylineEditPlugin.Name
|
||||
);
|
||||
if (!lep) {
|
||||
lep = new PolylineEditPlugin(polygon, { onEditPointCreate });
|
||||
polygon.addAssistantAppend(lep);
|
||||
}
|
||||
lep.showAll();
|
||||
}
|
||||
onUnselected(g: DisplayObject): void {
|
||||
const polygon = g as Polygon;
|
||||
const lep = polygon.getAssistantAppend<PolylineEditPlugin>(
|
||||
PolylineEditPlugin.Name
|
||||
);
|
||||
if (lep) {
|
||||
lep.hideAll();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,90 +0,0 @@
|
||||
import { IPointData, Point } from 'pixi.js';
|
||||
import {
|
||||
calculateDistanceFromPointToLine,
|
||||
calculateFootPointFromPointToLine,
|
||||
} from 'src/jl-graphic';
|
||||
import { Polygon } from './Polygon';
|
||||
|
||||
//计算线段细分坐标--线段分成几份
|
||||
export function getLineSegmentPoints(
|
||||
startPoint: IPointData,
|
||||
endPoint: IPointData,
|
||||
knife: number
|
||||
) {
|
||||
const segmentLength = Math.sqrt(
|
||||
Math.pow(endPoint.x - startPoint.x, 2) +
|
||||
Math.pow(endPoint.y - startPoint.y, 2)
|
||||
);
|
||||
const segmentIncrement = segmentLength / knife;
|
||||
const segmentAngle = Math.atan2(
|
||||
endPoint.y - startPoint.y,
|
||||
endPoint.x - startPoint.x
|
||||
);
|
||||
|
||||
const points: IPointData[] = [];
|
||||
for (let i = 1; i < knife; i++) {
|
||||
const segmentPosition = i * segmentIncrement;
|
||||
const x = startPoint.x + segmentPosition * Math.cos(segmentAngle);
|
||||
const y = startPoint.y + segmentPosition * Math.sin(segmentAngle);
|
||||
points.push(new Point(x, y));
|
||||
}
|
||||
|
||||
return points;
|
||||
}
|
||||
|
||||
//获取所选线段的索引
|
||||
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 addPolygonSegmentingPoint(
|
||||
graphic: Polygon,
|
||||
start: number,
|
||||
end: number,
|
||||
knife = 2
|
||||
) {
|
||||
const linePoints = graphic.addOnePoints();
|
||||
const points = linePoints.slice(0, start + 1);
|
||||
points.push(
|
||||
...getLineSegmentPoints(linePoints[start], linePoints[end], knife)
|
||||
);
|
||||
points.push(...linePoints.slice(end));
|
||||
points.pop();
|
||||
graphic.linePoints = points;
|
||||
}
|
||||
@ -1,99 +0,0 @@
|
||||
import { Color, Graphics, IPointData, Point, Rectangle } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
JlGraphic,
|
||||
JlGraphicTemplate,
|
||||
getRectangleCenter,
|
||||
} from 'src/jl-graphic';
|
||||
|
||||
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 radius(): number; // 圆角半径
|
||||
set radius(v: number);
|
||||
clone(): IRectData;
|
||||
copyFrom(data: IRectData): void;
|
||||
eq(other: IRectData): boolean;
|
||||
}
|
||||
|
||||
const rectConsts = {
|
||||
lineWidth: 2,
|
||||
lineColor: '0xff0000',
|
||||
};
|
||||
|
||||
export class Rect extends JlGraphic {
|
||||
static Type = 'Rect';
|
||||
rectGraphic: Graphics = new Graphics();
|
||||
constructor() {
|
||||
super(Rect.Type);
|
||||
this.addChild(this.rectGraphic);
|
||||
}
|
||||
|
||||
get datas(): IRectData {
|
||||
return this.getDatas<IRectData>();
|
||||
}
|
||||
doRepaint(): void {
|
||||
const rectGraphic = this.rectGraphic;
|
||||
rectGraphic.clear();
|
||||
rectGraphic.lineStyle(
|
||||
this.datas.lineWidth,
|
||||
new Color(this.datas.lineColor)
|
||||
);
|
||||
const radius = this.datas?.radius || 0;
|
||||
rectGraphic.drawRoundedRect(
|
||||
0,
|
||||
0,
|
||||
this.datas.width,
|
||||
this.datas.height,
|
||||
radius
|
||||
);
|
||||
rectGraphic.pivot = getRectangleCenter(
|
||||
new Rectangle(0, 0, this.datas.width, this.datas.height)
|
||||
);
|
||||
const transformPos = this.datas.transform.position;
|
||||
if (transformPos.x == 0 && transformPos.y == 0) {
|
||||
this.position.set(
|
||||
this.datas.point.x + this.datas.width / 2,
|
||||
this.datas.point.y + this.datas.height / 2
|
||||
);
|
||||
} else {
|
||||
this.position.set(
|
||||
this.datas.transform.position.x,
|
||||
this.datas.transform.position.y
|
||||
);
|
||||
}
|
||||
}
|
||||
rectPoints(): IPointData[] {
|
||||
const r1 = new Point(this.datas.point.x, this.datas.point.y);
|
||||
const r2 = new Point(r1.x + this.datas.width, r1.y);
|
||||
const r3 = new Point(r1.x + this.datas.width, r1.y + this.datas.height);
|
||||
const r4 = new Point(r1.x, r1.y + this.datas.height);
|
||||
const rectPoints = [r1, r2, r3, r4, r1];
|
||||
return rectPoints;
|
||||
}
|
||||
}
|
||||
|
||||
export class RectTemplate extends JlGraphicTemplate<Rect> {
|
||||
lineWidth: number;
|
||||
lineColor: string;
|
||||
constructor(dataTemplate: IRectData) {
|
||||
super(Rect.Type, {
|
||||
dataTemplate,
|
||||
});
|
||||
this.lineWidth = rectConsts.lineWidth;
|
||||
this.lineColor = rectConsts.lineColor;
|
||||
}
|
||||
new(): Rect {
|
||||
return new Rect();
|
||||
}
|
||||
}
|
||||
@ -1,120 +0,0 @@
|
||||
import { FederatedPointerEvent, Graphics, Point, IHitArea } from 'pixi.js';
|
||||
import {
|
||||
GraphicDrawAssistant,
|
||||
GraphicInteractionPlugin,
|
||||
JlDrawApp,
|
||||
JlGraphic,
|
||||
linePoint,
|
||||
} from 'src/jl-graphic';
|
||||
|
||||
import { IRectData, Rect, RectTemplate } from './Rect';
|
||||
|
||||
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, template: RectTemplate) {
|
||||
super(app, template, 'sym_o_square', '矩形Rect');
|
||||
this.container.addChild(this.rectGraphic);
|
||||
rectInteraction.init(app);
|
||||
}
|
||||
|
||||
clearCache(): void {
|
||||
this.rectGraphic.clear();
|
||||
}
|
||||
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 {
|
||||
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 datas = this.rect.datas;
|
||||
const tolerance = datas.lineWidth;
|
||||
const p1 = new Point(0, 0);
|
||||
const p2 = new Point(p1.x + datas.width, p1.y);
|
||||
const p3 = new Point(p1.x + datas.width, p1.y + datas.height);
|
||||
const p4 = new Point(p1.x, p1.y + datas.height);
|
||||
const p = new Point(x, y);
|
||||
contains = contains || linePoint(p1, p2, p, tolerance);
|
||||
contains = contains || linePoint(p2, p3, p, tolerance);
|
||||
contains = contains || linePoint(p3, p4, p, tolerance);
|
||||
contains = contains || linePoint(p4, p1, p, tolerance);
|
||||
return contains;
|
||||
}
|
||||
}
|
||||
|
||||
export class rectInteraction extends GraphicInteractionPlugin<Rect> {
|
||||
static Name = 'platform_transform';
|
||||
constructor(app: JlDrawApp) {
|
||||
super(rectInteraction.Name, app);
|
||||
}
|
||||
static init(app: JlDrawApp) {
|
||||
return new rectInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): Rect[] | undefined {
|
||||
return grahpics.filter((g) => g.type === Rect.Type).map((g) => g as Rect);
|
||||
}
|
||||
bind(g: Rect): void {
|
||||
g.eventMode = 'static';
|
||||
g.cursor = 'pointer';
|
||||
g.scalable = true;
|
||||
g.rotatable = true;
|
||||
g.rectGraphic.hitArea = new RectGraphicHitArea(g);
|
||||
}
|
||||
unbind(g: Rect): void {
|
||||
g.eventMode = 'none';
|
||||
g.scalable = false;
|
||||
g.rotatable = false;
|
||||
}
|
||||
}
|
||||
@ -52,7 +52,7 @@ export class SectionLink extends JlGraphic implements ILineGraphic {
|
||||
lineGraphic: Graphics;
|
||||
labelGraphic: VectorText;
|
||||
divisionGraphic: Graphics = new Graphics();
|
||||
_linkLength = 0;
|
||||
_linkLength = 0; // link长度
|
||||
|
||||
constructor() {
|
||||
super(SectionLink.Type);
|
||||
@ -152,6 +152,7 @@ export class SectionLink extends JlGraphic implements ILineGraphic {
|
||||
this.updateData(old);
|
||||
}
|
||||
get linkLength(): number {
|
||||
// 根据aSimRef和bSimRef获取link两侧公里标，计算link长度
|
||||
if (!this._linkLength) {
|
||||
const queryStore = this.getGraphicApp().queryStore;
|
||||
const aSimDevice = queryStore.queryById(this.datas.aSimRef.id);
|
||||
|
||||
@ -34,6 +34,36 @@ export interface ITrainState extends GraphicState {
|
||||
set tailLinkOffset(v: number);
|
||||
get occupiedLinkIndex(): string[];
|
||||
set occupiedLinkIndex(v: string[]);
|
||||
get heartbeat(): number;
|
||||
set heartbeat(v: number);
|
||||
get slope(): number;
|
||||
set slope(v: number);
|
||||
get upslope(): boolean;
|
||||
set upslope(v: boolean);
|
||||
get runningUp(): boolean;
|
||||
set runningUp(v: boolean);
|
||||
get runningResistanceSum(): number;
|
||||
set runningResistanceSum(v: number);
|
||||
get airResistance(): number;
|
||||
set airResistance(v: number);
|
||||
get rampResistance(): number;
|
||||
set rampResistance(v: number);
|
||||
get curveResistance(): number;
|
||||
set curveResistance(v: number);
|
||||
get speed(): number;
|
||||
set speed(v: number);
|
||||
get headSensorSpeed1(): number;
|
||||
set headSensorSpeed1(v: number);
|
||||
get headSensorSpeed2(): number;
|
||||
set headSensorSpeed2(v: number);
|
||||
get tailSensorSpeed1(): number;
|
||||
set tailSensorSpeed1(v: number);
|
||||
get tailSensorSpeed2(): number;
|
||||
set tailSensorSpeed2(v: number);
|
||||
get headRadarSpeed(): number;
|
||||
set headRadarSpeed(v: number);
|
||||
get tailRadarSpeed(): number;
|
||||
set tailRadarSpeed(v: number);
|
||||
}
|
||||
|
||||
interface bodyWH {
|
||||
@ -104,9 +134,9 @@ export class TrainHead extends Container {
|
||||
this.pause.clear();
|
||||
}
|
||||
doRepaint(states: ITrainState, bodyWH?: bodyWH) {
|
||||
let direction = 'right';
|
||||
let direction = 'left';
|
||||
if (states.up) {
|
||||
direction = 'left';
|
||||
direction = 'right';
|
||||
}
|
||||
this.clear();
|
||||
if (!direction) {
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
>
|
||||
<TrainPage></TrainPage>
|
||||
</q-drawer>
|
||||
<q-resize-observer @resize="onResize" />
|
||||
<q-page-container>
|
||||
<div id="line-app-container"></div>
|
||||
</q-page-container>
|
||||
|
||||
@ -6,68 +6,16 @@
|
||||
<div class="text-h6">列车信息</div>
|
||||
</q-card-section>
|
||||
<q-separator inset />
|
||||
<q-list v-if="trainInfo">
|
||||
<q-item>
|
||||
<q-list v-if="trainInfo" dense>
|
||||
<q-item v-for="(item, index) in list" :key="index">
|
||||
<q-item-section>
|
||||
<q-item-label>列车索引</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-item-label caption>{{ trainInfo.id }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label>是否上行</q-item-label>
|
||||
<q-item-label>{{ item.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-item-label caption>{{
|
||||
trainInfo.up ? '是' : '否'
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label>车头所在link的索引</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-item-label caption>{{ trainInfo.headLinkId }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label>车头所在link内的偏移量</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-item-label caption>{{
|
||||
trainInfo.headLinkOffset
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label>车尾所在link的索引</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-item-label caption>{{ trainInfo.tailLinkId }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label>车尾所在link内的偏移量</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-item-label caption>{{
|
||||
trainInfo.tailLinkOffset
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label>列车所占用的link的索引的列表</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-item-label caption>{{
|
||||
trainInfo.occupiedLinkIndex
|
||||
item.formatFn
|
||||
? item.formatFn(trainInfo[item.key])
|
||||
: trainInfo[item.key]
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
@ -81,9 +29,55 @@
|
||||
import { ITrainState, Train } from 'src/graphics/train/Train';
|
||||
import { useLineStore } from 'src/stores/line-store';
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
interface keyType {
|
||||
label: string;
|
||||
key: keyof ITrainState;
|
||||
formatFn?(v: ITrainState[keyof ITrainState]): string;
|
||||
}
|
||||
const lineStore = useLineStore();
|
||||
const trainInfo = ref<ITrainState | null>();
|
||||
const list: keyType[] = [
|
||||
{ label: '列车索引', key: 'id' },
|
||||
{ label: '是否上行', key: 'up', formatFn: upFormat },
|
||||
{ label: '车头所在link的索引', key: 'headLinkId' },
|
||||
{ label: '车头所在link内的偏移量', key: 'headLinkOffset' },
|
||||
{ label: '车尾所在link的索引', key: 'tailLinkId' },
|
||||
{ label: '车尾所在link内的偏移量', key: 'tailLinkOffset' },
|
||||
{ label: '生命信号', key: 'heartbeat' },
|
||||
{ label: '列车所在位置坡度值', key: 'slope' },
|
||||
{ label: '列车所在位置坡度走势', key: 'upslope', formatFn: upslopeFormat },
|
||||
{ label: '列车当前运行方向', key: 'runningUp', formatFn: runningUpFormat },
|
||||
{
|
||||
label: '实际运行阻力',
|
||||
key: 'runningResistanceSum',
|
||||
formatFn: resistanceFormat,
|
||||
},
|
||||
{ label: '空气阻力', key: 'airResistance', formatFn: resistanceFormat },
|
||||
{ label: '坡道阻力', key: 'rampResistance', formatFn: resistanceFormat },
|
||||
{ label: '曲线阻力', key: 'curveResistance', formatFn: resistanceFormat },
|
||||
{ label: '列车运行速度', key: 'speed', formatFn: speedFormat },
|
||||
{ label: '头车速传1速度值', key: 'headSensorSpeed1', formatFn: speedFormat },
|
||||
{ label: '头车速传2速度值', key: 'headSensorSpeed2', formatFn: speedFormat },
|
||||
{ label: '尾车速传1速度值', key: 'tailSensorSpeed1', formatFn: speedFormat },
|
||||
{ label: '尾车速传2速度值', key: 'tailSensorSpeed2', formatFn: speedFormat },
|
||||
{ label: '头车雷达速度值', key: 'headRadarSpeed', formatFn: speedFormat },
|
||||
{ label: '尾车雷达速度值', key: 'tailRadarSpeed', formatFn: speedFormat },
|
||||
];
|
||||
function upFormat(v: boolean) {
|
||||
return v ? '是' : '否';
|
||||
}
|
||||
function upslopeFormat(v: boolean) {
|
||||
return v ? '上坡' : '下坡';
|
||||
}
|
||||
function runningUpFormat(v: boolean) {
|
||||
return v ? '上行' : '下行';
|
||||
}
|
||||
function resistanceFormat(v: number) {
|
||||
return `${v}KN`;
|
||||
}
|
||||
function speedFormat(v: number) {
|
||||
return `${v}km/h`;
|
||||
}
|
||||
watch(
|
||||
() => lineStore.selectedGraphics,
|
||||
(val) => {
|
||||
@ -94,6 +88,22 @@ watch(
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => lineStore.socketStates,
|
||||
(val) => {
|
||||
if (val && trainInfo.value) {
|
||||
const find = val.find((item) => {
|
||||
return (
|
||||
item.graphicType == Train.Type &&
|
||||
(item as ITrainState).id == trainInfo.value?.id
|
||||
);
|
||||
});
|
||||
if (find) {
|
||||
trainInfo.value.copyFrom(find);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
function getTrainStates(train: Train) {
|
||||
trainInfo.value = null;
|
||||
const s = train.states as ITrainState;
|
||||
|
||||
@ -538,6 +538,21 @@ export namespace state {
|
||||
tailLinkId?: string;
|
||||
tailLinkOffset?: number;
|
||||
occupiedLinkIndex?: string[];
|
||||
heartbeat?: number;
|
||||
slope?: number;
|
||||
upslope?: boolean;
|
||||
runningUp?: boolean;
|
||||
runningResistanceSum?: number;
|
||||
airResistance?: number;
|
||||
rampResistance?: number;
|
||||
curveResistance?: number;
|
||||
speed?: number;
|
||||
headSensorSpeed1?: number;
|
||||
headSensorSpeed2?: number;
|
||||
tailSensorSpeed1?: number;
|
||||
tailSensorSpeed2?: number;
|
||||
headRadarSpeed?: number;
|
||||
tailRadarSpeed?: number;
|
||||
}) {
|
||||
super();
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [7], this.#one_of_decls);
|
||||
@ -563,6 +578,51 @@ export namespace state {
|
||||
if ("occupiedLinkIndex" in data && data.occupiedLinkIndex != undefined) {
|
||||
this.occupiedLinkIndex = data.occupiedLinkIndex;
|
||||
}
|
||||
if ("heartbeat" in data && data.heartbeat != undefined) {
|
||||
this.heartbeat = data.heartbeat;
|
||||
}
|
||||
if ("slope" in data && data.slope != undefined) {
|
||||
this.slope = data.slope;
|
||||
}
|
||||
if ("upslope" in data && data.upslope != undefined) {
|
||||
this.upslope = data.upslope;
|
||||
}
|
||||
if ("runningUp" in data && data.runningUp != undefined) {
|
||||
this.runningUp = data.runningUp;
|
||||
}
|
||||
if ("runningResistanceSum" in data && data.runningResistanceSum != undefined) {
|
||||
this.runningResistanceSum = data.runningResistanceSum;
|
||||
}
|
||||
if ("airResistance" in data && data.airResistance != undefined) {
|
||||
this.airResistance = data.airResistance;
|
||||
}
|
||||
if ("rampResistance" in data && data.rampResistance != undefined) {
|
||||
this.rampResistance = data.rampResistance;
|
||||
}
|
||||
if ("curveResistance" in data && data.curveResistance != undefined) {
|
||||
this.curveResistance = data.curveResistance;
|
||||
}
|
||||
if ("speed" in data && data.speed != undefined) {
|
||||
this.speed = data.speed;
|
||||
}
|
||||
if ("headSensorSpeed1" in data && data.headSensorSpeed1 != undefined) {
|
||||
this.headSensorSpeed1 = data.headSensorSpeed1;
|
||||
}
|
||||
if ("headSensorSpeed2" in data && data.headSensorSpeed2 != undefined) {
|
||||
this.headSensorSpeed2 = data.headSensorSpeed2;
|
||||
}
|
||||
if ("tailSensorSpeed1" in data && data.tailSensorSpeed1 != undefined) {
|
||||
this.tailSensorSpeed1 = data.tailSensorSpeed1;
|
||||
}
|
||||
if ("tailSensorSpeed2" in data && data.tailSensorSpeed2 != undefined) {
|
||||
this.tailSensorSpeed2 = data.tailSensorSpeed2;
|
||||
}
|
||||
if ("headRadarSpeed" in data && data.headRadarSpeed != undefined) {
|
||||
this.headRadarSpeed = data.headRadarSpeed;
|
||||
}
|
||||
if ("tailRadarSpeed" in data && data.tailRadarSpeed != undefined) {
|
||||
this.tailRadarSpeed = data.tailRadarSpeed;
|
||||
}
|
||||
}
|
||||
}
|
||||
get id() {
|
||||
@ -607,6 +667,96 @@ export namespace state {
|
||||
set occupiedLinkIndex(value: string[]) {
|
||||
pb_1.Message.setField(this, 7, value);
|
||||
}
|
||||
get heartbeat() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 8, 0) as number;
|
||||
}
|
||||
set heartbeat(value: number) {
|
||||
pb_1.Message.setField(this, 8, value);
|
||||
}
|
||||
get slope() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 9, 0) as number;
|
||||
}
|
||||
set slope(value: number) {
|
||||
pb_1.Message.setField(this, 9, value);
|
||||
}
|
||||
get upslope() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 10, false) as boolean;
|
||||
}
|
||||
set upslope(value: boolean) {
|
||||
pb_1.Message.setField(this, 10, value);
|
||||
}
|
||||
get runningUp() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 11, false) as boolean;
|
||||
}
|
||||
set runningUp(value: boolean) {
|
||||
pb_1.Message.setField(this, 11, value);
|
||||
}
|
||||
get runningResistanceSum() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 12, 0) as number;
|
||||
}
|
||||
set runningResistanceSum(value: number) {
|
||||
pb_1.Message.setField(this, 12, value);
|
||||
}
|
||||
get airResistance() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 13, 0) as number;
|
||||
}
|
||||
set airResistance(value: number) {
|
||||
pb_1.Message.setField(this, 13, value);
|
||||
}
|
||||
get rampResistance() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 14, 0) as number;
|
||||
}
|
||||
set rampResistance(value: number) {
|
||||
pb_1.Message.setField(this, 14, value);
|
||||
}
|
||||
get curveResistance() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 15, 0) as number;
|
||||
}
|
||||
set curveResistance(value: number) {
|
||||
pb_1.Message.setField(this, 15, value);
|
||||
}
|
||||
get speed() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 16, 0) as number;
|
||||
}
|
||||
set speed(value: number) {
|
||||
pb_1.Message.setField(this, 16, value);
|
||||
}
|
||||
get headSensorSpeed1() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 17, 0) as number;
|
||||
}
|
||||
set headSensorSpeed1(value: number) {
|
||||
pb_1.Message.setField(this, 17, value);
|
||||
}
|
||||
get headSensorSpeed2() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 18, 0) as number;
|
||||
}
|
||||
set headSensorSpeed2(value: number) {
|
||||
pb_1.Message.setField(this, 18, value);
|
||||
}
|
||||
get tailSensorSpeed1() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 19, 0) as number;
|
||||
}
|
||||
set tailSensorSpeed1(value: number) {
|
||||
pb_1.Message.setField(this, 19, value);
|
||||
}
|
||||
get tailSensorSpeed2() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 20, 0) as number;
|
||||
}
|
||||
set tailSensorSpeed2(value: number) {
|
||||
pb_1.Message.setField(this, 20, value);
|
||||
}
|
||||
get headRadarSpeed() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 21, 0) as number;
|
||||
}
|
||||
set headRadarSpeed(value: number) {
|
||||
pb_1.Message.setField(this, 21, value);
|
||||
}
|
||||
get tailRadarSpeed() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 22, 0) as number;
|
||||
}
|
||||
set tailRadarSpeed(value: number) {
|
||||
pb_1.Message.setField(this, 22, value);
|
||||
}
|
||||
static fromObject(data: {
|
||||
id?: string;
|
||||
up?: boolean;
|
||||
@ -615,6 +765,21 @@ export namespace state {
|
||||
tailLinkId?: string;
|
||||
tailLinkOffset?: number;
|
||||
occupiedLinkIndex?: string[];
|
||||
heartbeat?: number;
|
||||
slope?: number;
|
||||
upslope?: boolean;
|
||||
runningUp?: boolean;
|
||||
runningResistanceSum?: number;
|
||||
airResistance?: number;
|
||||
rampResistance?: number;
|
||||
curveResistance?: number;
|
||||
speed?: number;
|
||||
headSensorSpeed1?: number;
|
||||
headSensorSpeed2?: number;
|
||||
tailSensorSpeed1?: number;
|
||||
tailSensorSpeed2?: number;
|
||||
headRadarSpeed?: number;
|
||||
tailRadarSpeed?: number;
|
||||
}): TrainState {
|
||||
const message = new TrainState({});
|
||||
if (data.id != null) {
|
||||
@ -638,6 +803,51 @@ export namespace state {
|
||||
if (data.occupiedLinkIndex != null) {
|
||||
message.occupiedLinkIndex = data.occupiedLinkIndex;
|
||||
}
|
||||
if (data.heartbeat != null) {
|
||||
message.heartbeat = data.heartbeat;
|
||||
}
|
||||
if (data.slope != null) {
|
||||
message.slope = data.slope;
|
||||
}
|
||||
if (data.upslope != null) {
|
||||
message.upslope = data.upslope;
|
||||
}
|
||||
if (data.runningUp != null) {
|
||||
message.runningUp = data.runningUp;
|
||||
}
|
||||
if (data.runningResistanceSum != null) {
|
||||
message.runningResistanceSum = data.runningResistanceSum;
|
||||
}
|
||||
if (data.airResistance != null) {
|
||||
message.airResistance = data.airResistance;
|
||||
}
|
||||
if (data.rampResistance != null) {
|
||||
message.rampResistance = data.rampResistance;
|
||||
}
|
||||
if (data.curveResistance != null) {
|
||||
message.curveResistance = data.curveResistance;
|
||||
}
|
||||
if (data.speed != null) {
|
||||
message.speed = data.speed;
|
||||
}
|
||||
if (data.headSensorSpeed1 != null) {
|
||||
message.headSensorSpeed1 = data.headSensorSpeed1;
|
||||
}
|
||||
if (data.headSensorSpeed2 != null) {
|
||||
message.headSensorSpeed2 = data.headSensorSpeed2;
|
||||
}
|
||||
if (data.tailSensorSpeed1 != null) {
|
||||
message.tailSensorSpeed1 = data.tailSensorSpeed1;
|
||||
}
|
||||
if (data.tailSensorSpeed2 != null) {
|
||||
message.tailSensorSpeed2 = data.tailSensorSpeed2;
|
||||
}
|
||||
if (data.headRadarSpeed != null) {
|
||||
message.headRadarSpeed = data.headRadarSpeed;
|
||||
}
|
||||
if (data.tailRadarSpeed != null) {
|
||||
message.tailRadarSpeed = data.tailRadarSpeed;
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
@ -649,6 +859,21 @@ export namespace state {
|
||||
tailLinkId?: string;
|
||||
tailLinkOffset?: number;
|
||||
occupiedLinkIndex?: string[];
|
||||
heartbeat?: number;
|
||||
slope?: number;
|
||||
upslope?: boolean;
|
||||
runningUp?: boolean;
|
||||
runningResistanceSum?: number;
|
||||
airResistance?: number;
|
||||
rampResistance?: number;
|
||||
curveResistance?: number;
|
||||
speed?: number;
|
||||
headSensorSpeed1?: number;
|
||||
headSensorSpeed2?: number;
|
||||
tailSensorSpeed1?: number;
|
||||
tailSensorSpeed2?: number;
|
||||
headRadarSpeed?: number;
|
||||
tailRadarSpeed?: number;
|
||||
} = {};
|
||||
if (this.id != null) {
|
||||
data.id = this.id;
|
||||
@ -671,6 +896,51 @@ export namespace state {
|
||||
if (this.occupiedLinkIndex != null) {
|
||||
data.occupiedLinkIndex = this.occupiedLinkIndex;
|
||||
}
|
||||
if (this.heartbeat != null) {
|
||||
data.heartbeat = this.heartbeat;
|
||||
}
|
||||
if (this.slope != null) {
|
||||
data.slope = this.slope;
|
||||
}
|
||||
if (this.upslope != null) {
|
||||
data.upslope = this.upslope;
|
||||
}
|
||||
if (this.runningUp != null) {
|
||||
data.runningUp = this.runningUp;
|
||||
}
|
||||
if (this.runningResistanceSum != null) {
|
||||
data.runningResistanceSum = this.runningResistanceSum;
|
||||
}
|
||||
if (this.airResistance != null) {
|
||||
data.airResistance = this.airResistance;
|
||||
}
|
||||
if (this.rampResistance != null) {
|
||||
data.rampResistance = this.rampResistance;
|
||||
}
|
||||
if (this.curveResistance != null) {
|
||||
data.curveResistance = this.curveResistance;
|
||||
}
|
||||
if (this.speed != null) {
|
||||
data.speed = this.speed;
|
||||
}
|
||||
if (this.headSensorSpeed1 != null) {
|
||||
data.headSensorSpeed1 = this.headSensorSpeed1;
|
||||
}
|
||||
if (this.headSensorSpeed2 != null) {
|
||||
data.headSensorSpeed2 = this.headSensorSpeed2;
|
||||
}
|
||||
if (this.tailSensorSpeed1 != null) {
|
||||
data.tailSensorSpeed1 = this.tailSensorSpeed1;
|
||||
}
|
||||
if (this.tailSensorSpeed2 != null) {
|
||||
data.tailSensorSpeed2 = this.tailSensorSpeed2;
|
||||
}
|
||||
if (this.headRadarSpeed != null) {
|
||||
data.headRadarSpeed = this.headRadarSpeed;
|
||||
}
|
||||
if (this.tailRadarSpeed != null) {
|
||||
data.tailRadarSpeed = this.tailRadarSpeed;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
serialize(): Uint8Array;
|
||||
@ -691,6 +961,36 @@ export namespace state {
|
||||
writer.writeInt64(6, this.tailLinkOffset);
|
||||
if (this.occupiedLinkIndex.length)
|
||||
writer.writeRepeatedString(7, this.occupiedLinkIndex);
|
||||
if (this.heartbeat != 0)
|
||||
writer.writeInt32(8, this.heartbeat);
|
||||
if (this.slope != 0)
|
||||
writer.writeInt32(9, this.slope);
|
||||
if (this.upslope != false)
|
||||
writer.writeBool(10, this.upslope);
|
||||
if (this.runningUp != false)
|
||||
writer.writeBool(11, this.runningUp);
|
||||
if (this.runningResistanceSum != 0)
|
||||
writer.writeInt32(12, this.runningResistanceSum);
|
||||
if (this.airResistance != 0)
|
||||
writer.writeInt32(13, this.airResistance);
|
||||
if (this.rampResistance != 0)
|
||||
writer.writeInt32(14, this.rampResistance);
|
||||
if (this.curveResistance != 0)
|
||||
writer.writeInt32(15, this.curveResistance);
|
||||
if (this.speed != 0)
|
||||
writer.writeInt32(16, this.speed);
|
||||
if (this.headSensorSpeed1 != 0)
|
||||
writer.writeInt32(17, this.headSensorSpeed1);
|
||||
if (this.headSensorSpeed2 != 0)
|
||||
writer.writeInt32(18, this.headSensorSpeed2);
|
||||
if (this.tailSensorSpeed1 != 0)
|
||||
writer.writeInt32(19, this.tailSensorSpeed1);
|
||||
if (this.tailSensorSpeed2 != 0)
|
||||
writer.writeInt32(20, this.tailSensorSpeed2);
|
||||
if (this.headRadarSpeed != 0)
|
||||
writer.writeInt32(21, this.headRadarSpeed);
|
||||
if (this.tailRadarSpeed != 0)
|
||||
writer.writeInt32(22, this.tailRadarSpeed);
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
@ -721,6 +1021,51 @@ export namespace state {
|
||||
case 7:
|
||||
pb_1.Message.addToRepeatedField(message, 7, reader.readString());
|
||||
break;
|
||||
case 8:
|
||||
message.heartbeat = reader.readInt32();
|
||||
break;
|
||||
case 9:
|
||||
message.slope = reader.readInt32();
|
||||
break;
|
||||
case 10:
|
||||
message.upslope = reader.readBool();
|
||||
break;
|
||||
case 11:
|
||||
message.runningUp = reader.readBool();
|
||||
break;
|
||||
case 12:
|
||||
message.runningResistanceSum = reader.readInt32();
|
||||
break;
|
||||
case 13:
|
||||
message.airResistance = reader.readInt32();
|
||||
break;
|
||||
case 14:
|
||||
message.rampResistance = reader.readInt32();
|
||||
break;
|
||||
case 15:
|
||||
message.curveResistance = reader.readInt32();
|
||||
break;
|
||||
case 16:
|
||||
message.speed = reader.readInt32();
|
||||
break;
|
||||
case 17:
|
||||
message.headSensorSpeed1 = reader.readInt32();
|
||||
break;
|
||||
case 18:
|
||||
message.headSensorSpeed2 = reader.readInt32();
|
||||
break;
|
||||
case 19:
|
||||
message.tailSensorSpeed1 = reader.readInt32();
|
||||
break;
|
||||
case 20:
|
||||
message.tailSensorSpeed2 = reader.readInt32();
|
||||
break;
|
||||
case 21:
|
||||
message.headRadarSpeed = reader.readInt32();
|
||||
break;
|
||||
case 22:
|
||||
message.tailRadarSpeed = reader.readInt32();
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { JlCanvas, JlGraphic, GraphicApp } from 'src/jl-graphic';
|
||||
import { JlCanvas, JlGraphic, GraphicApp, GraphicState } from 'src/jl-graphic';
|
||||
import { initLineApp, getLineApp, destroyLineApp } from 'src/drawApp/lineApp';
|
||||
|
||||
export const useLineStore = defineStore('line', {
|
||||
@ -8,6 +8,7 @@ export const useLineStore = defineStore('line', {
|
||||
lineId: null as number | null,
|
||||
lineName: null as string | null,
|
||||
simulationId: null as string | null,
|
||||
socketStates: null as GraphicState[] | null,
|
||||
}),
|
||||
getters: {
|
||||
selectedGraphicType: (state) => {
|
||||
@ -50,5 +51,8 @@ export const useLineStore = defineStore('line', {
|
||||
setSimulationId(id: string | null) {
|
||||
this.simulationId = id;
|
||||
},
|
||||
setSocketStates(v: GraphicState[] | null) {
|
||||
this.socketStates = v;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user