轨迹线生成

This commit is contained in:
fan 2023-06-13 15:30:49 +08:00
parent 3f965fde13
commit f621cbefd2
9 changed files with 220 additions and 16 deletions

View File

@ -55,6 +55,12 @@
</q-icon>
</template>
</q-input>
<q-btn
color="primary"
style="margin: auto"
@click="generatePathLine"
label="生成轨迹线"
/>
</q-form>
</template>
@ -63,6 +69,7 @@ import { RunLineData } from 'src/drawApp/graphics/RunLineInteraction';
import { RunLine } from 'src/graphics/runLine/RunLine';
import { useDrawStore } from 'src/stores/draw-store';
import { onMounted, reactive, watch } from 'vue';
import { Point } from 'pixi.js';
const drawStore = useDrawStore();
const runLineModel = reactive(new RunLineData());
@ -90,4 +97,17 @@ function onUpdate() {
drawStore.getDrawApp().updateGraphicAndRecord(runLine, runLineModel);
}
}
function generatePathLine() {
const runLine = drawStore.selectedGraphic as RunLine;
if (runLine) {
const points = runLineModel.points;
const pointsUp: Point[] = [];
const pointsDown: Point[] = [];
points.forEach((item) => {
pointsUp.push(new Point(item.x, item.y - 10));
pointsDown.push(new Point(item.x, item.y + 10));
});
runLine.generatePathLine(pointsUp, pointsDown);
}
}
</script>

View File

@ -0,0 +1,47 @@
import * as pb_1 from 'google-protobuf';
import { IPointData } from 'pixi.js';
import { IPathLineData } from 'src/graphics/pathLine/PathLine';
import { graphicData } from 'src/protos/stationLayoutGraphics';
import { GraphicDataBase } from './GraphicDataBase';
export class PathLineData extends GraphicDataBase implements IPathLineData {
constructor(data?: graphicData.PathLine) {
let pathLine;
if (!data) {
pathLine = new graphicData.PathLine({
common: GraphicDataBase.defaultCommonInfo(),
});
} else {
pathLine = data;
}
super(pathLine);
}
public get data(): graphicData.PathLine {
return this.getData<graphicData.PathLine>();
}
get code(): string {
return this.data.code;
}
set code(v: string) {
this.data.code = 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(): PathLineData {
return new PathLineData(this.data.cloneMessage());
}
copyFrom(data: PathLineData): void {
pb_1.Message.copyInto(data.data, this.data);
}
eq(other: PathLineData): boolean {
return pb_1.Message.equals(this.data, other.data);
}
}

View File

@ -46,6 +46,18 @@ export class RunLineData extends GraphicDataBase implements IRunLineData {
set nameBgColor(v: string) {
this.data.nameBgColor = v;
}
get upPathLineId(): string {
return this.data.upPathLineId;
}
set upPathLineId(v: string) {
this.data.upPathLineId = v;
}
get downPathLineId(): string {
return this.data.downPathLineId;
}
set downPathLineId(v: string) {
this.data.downPathLineId = v;
}
clone(): RunLineData {
return new RunLineData(this.data.cloneMessage());
}

View File

@ -52,6 +52,9 @@ import { successNotify, errorNotify } from '../utils/CommonNotify';
import { Section } from 'src/graphics/section/Section';
import { SectionDraw } from 'src/graphics/section/SectionDrawAssistant';
import { SectionData } from './graphics/SectionInteraction';
import { PathLine } from 'src/graphics/pathLine/PathLine';
import { PathLineDraw } from 'src/graphics/pathLine/PathLineDrawAssistant';
import { PathLineData } from './graphics/PathLineInteraction';
export function fromStoragePoint(p: graphicData.Point): Point {
return new Point(p.x, p.y);
@ -134,6 +137,7 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
| RectDraw
| TrainLineDraw
| PolygonDraw
| PathLineDraw
)[] = [];
if (draftType === 'Line') {
drawAssistants = [
@ -171,6 +175,9 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
new TrainLineDraw(app, () => {
return new TrainLineData();
}),
new PathLineDraw(app, () => {
return new PathLineData();
}),
];
app.addKeyboardListener(
new KeyListener({
@ -282,6 +289,9 @@ export function saveDrawDatas(app: JlDrawApp) {
} else if (TrainLine.Type === g.type) {
const trainLineData = (g as TrainLine).saveData();
storage.trainLines.push((trainLineData as TrainLineData).data);
} else if (PathLine.Type === g.type) {
const pathLineData = (g as PathLine).saveData();
storage.pathLines.push((pathLineData as PathLineData).data);
}
});
const base64 = fromUint8Array(storage.serialize());
@ -343,6 +353,9 @@ export async function loadDrawDatas(app: GraphicApp) {
storage.trainLines.forEach((trainLine) => {
datas.push(new TrainLineData(trainLine));
});
storage.pathLines.forEach((pathLine) => {
datas.push(new PathLineData(pathLine));
});
app.loadGraphic(datas);
} else {
app.loadGraphic([]);

View File

@ -47,7 +47,7 @@ export class PathLineDraw extends GraphicDrawAssistant<
new PathLineTemplate(),
createData,
'sym_o_horizontal_rule',
'轨迹线PathLine'
'不展示'
);
this.container.addChild(this.graphic);
PathLinePointsEditPlugin.init(app);
@ -63,14 +63,20 @@ export class PathLineDraw extends GraphicDrawAssistant<
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);
this.points.push(p);
// onRightClick(): void {
// this.createAndStore(true);
// }
// onLeftDown(e: FederatedPointerEvent): void {
// const { x, y } = this.toCanvasCoordinates(e.global);
// const p = new Point(x, y);
// this.points.push(p);
// }
quickCreate(points: Point[]) {
this.points = [...points];
return this.createAndStore(true);
}
redraw(p: Point): void {
if (this.points.length < 1) return;
this.graphic.clear();

View File

@ -1,6 +1,13 @@
import { Graphics, IPointData, LINE_JOIN } from 'pixi.js';
import { GraphicData, JlGraphic, JlGraphicTemplate } from 'src/jl-graphic';
import { Graphics, IPointData, LINE_JOIN, Point } from 'pixi.js';
import {
GraphicData,
JlDrawApp,
JlGraphic,
JlGraphicTemplate,
} from 'src/jl-graphic';
import { RunLineName } from './RunLineName';
import { PathLine } from '../pathLine/PathLine';
import { PathLineDraw } from '../pathLine/PathLineDrawAssistant';
export interface IRunLineData extends GraphicData {
get code(): string;
@ -11,6 +18,11 @@ export interface IRunLineData extends GraphicData {
set nameColor(v: string);
get nameBgColor(): string;
set nameBgColor(v: string);
get upPathLineId(): string;
set upPathLineId(v: string);
get downPathLineId(): string;
set downPathLineId(v: string);
clone(): IRunLineData;
copyFrom(data: IRunLineData): void;
eq(other: IRunLineData): boolean;
@ -81,6 +93,30 @@ export class RunLine extends JlGraphic {
old.points = points;
this.updateData(old);
}
generatePathLine(pointsUp: Point[], pointsDown: Point[]) {
const app = this.getGraphicApp() as JlDrawApp;
const pathLineDrawAssistant = app.getDrawAssistant(
PathLine.Type
) as PathLineDraw;
if (this.datas.upPathLineId) {
const oldUp = app.queryStore.queryById(this.datas.upPathLineId);
if (oldUp) {
app.deleteGraphics(oldUp);
}
}
if (this.datas.downPathLineId) {
const oldDown = app.queryStore.queryById(this.datas.downPathLineId);
if (oldDown) {
app.deleteGraphics(oldDown);
}
}
const pathLineUp = pathLineDrawAssistant.quickCreate(pointsUp);
const pathLineDown = pathLineDrawAssistant.quickCreate(pointsDown);
this.datas.upPathLineId = pathLineUp?.id || '';
this.datas.downPathLineId = pathLineDown?.id || '';
}
getStartPoint(): IPointData {
return this.datas.points[0];
}

View File

@ -238,6 +238,7 @@ onMounted(() => {
.drawAssistants;
drawAssistants.forEach(
(da: { name: string; icon: string; description: string }) => {
if (da.description === '不展示') return;
utilsOption.push(
new ControlItem(
da.name,

View File

@ -21,10 +21,11 @@ export namespace graphicData {
stationLines?: StationLine[];
runLines?: RunLine[];
trainLines?: TrainLine[];
pathLines?: PathLine[];
polygons?: Polygon[];
}) {
super();
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14], this.#one_of_decls);
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], this.#one_of_decls);
if (!Array.isArray(data) && typeof data == "object") {
if ("canvas" in data && data.canvas != undefined) {
this.canvas = data.canvas;
@ -65,6 +66,9 @@ export namespace graphicData {
if ("trainLines" in data && data.trainLines != undefined) {
this.trainLines = data.trainLines;
}
if ("pathLines" in data && data.pathLines != undefined) {
this.pathLines = data.pathLines;
}
if ("polygons" in data && data.polygons != undefined) {
this.polygons = data.polygons;
}
@ -151,11 +155,17 @@ export namespace graphicData {
set trainLines(value: TrainLine[]) {
pb_1.Message.setRepeatedWrapperField(this, 13, value);
}
get pathLines() {
return pb_1.Message.getRepeatedWrapperField(this, PathLine, 14) as PathLine[];
}
set pathLines(value: PathLine[]) {
pb_1.Message.setRepeatedWrapperField(this, 14, value);
}
get polygons() {
return pb_1.Message.getRepeatedWrapperField(this, Polygon, 14) as Polygon[];
return pb_1.Message.getRepeatedWrapperField(this, Polygon, 15) as Polygon[];
}
set polygons(value: Polygon[]) {
pb_1.Message.setRepeatedWrapperField(this, 14, value);
pb_1.Message.setRepeatedWrapperField(this, 15, value);
}
static fromObject(data: {
canvas?: ReturnType<typeof Canvas.prototype.toObject>;
@ -171,6 +181,7 @@ export namespace graphicData {
stationLines?: ReturnType<typeof StationLine.prototype.toObject>[];
runLines?: ReturnType<typeof RunLine.prototype.toObject>[];
trainLines?: ReturnType<typeof TrainLine.prototype.toObject>[];
pathLines?: ReturnType<typeof PathLine.prototype.toObject>[];
polygons?: ReturnType<typeof Polygon.prototype.toObject>[];
}): RtssGraphicStorage {
const message = new RtssGraphicStorage({});
@ -213,6 +224,9 @@ export namespace graphicData {
if (data.trainLines != null) {
message.trainLines = data.trainLines.map(item => TrainLine.fromObject(item));
}
if (data.pathLines != null) {
message.pathLines = data.pathLines.map(item => PathLine.fromObject(item));
}
if (data.polygons != null) {
message.polygons = data.polygons.map(item => Polygon.fromObject(item));
}
@ -233,6 +247,7 @@ export namespace graphicData {
stationLines?: ReturnType<typeof StationLine.prototype.toObject>[];
runLines?: ReturnType<typeof RunLine.prototype.toObject>[];
trainLines?: ReturnType<typeof TrainLine.prototype.toObject>[];
pathLines?: ReturnType<typeof PathLine.prototype.toObject>[];
polygons?: ReturnType<typeof Polygon.prototype.toObject>[];
} = {};
if (this.canvas != null) {
@ -274,6 +289,9 @@ export namespace graphicData {
if (this.trainLines != null) {
data.trainLines = this.trainLines.map((item: TrainLine) => item.toObject());
}
if (this.pathLines != null) {
data.pathLines = this.pathLines.map((item: PathLine) => item.toObject());
}
if (this.polygons != null) {
data.polygons = this.polygons.map((item: Polygon) => item.toObject());
}
@ -309,8 +327,10 @@ export namespace graphicData {
writer.writeRepeatedMessage(12, this.runLines, (item: RunLine) => item.serialize(writer));
if (this.trainLines.length)
writer.writeRepeatedMessage(13, this.trainLines, (item: TrainLine) => item.serialize(writer));
if (this.pathLines.length)
writer.writeRepeatedMessage(14, this.pathLines, (item: PathLine) => item.serialize(writer));
if (this.polygons.length)
writer.writeRepeatedMessage(14, this.polygons, (item: Polygon) => item.serialize(writer));
writer.writeRepeatedMessage(15, this.polygons, (item: Polygon) => item.serialize(writer));
if (!w)
return writer.getResultBuffer();
}
@ -360,7 +380,10 @@ export namespace graphicData {
reader.readMessage(message.trainLines, () => pb_1.Message.addToRepeatedWrapperField(message, 13, TrainLine.deserialize(reader), TrainLine));
break;
case 14:
reader.readMessage(message.polygons, () => pb_1.Message.addToRepeatedWrapperField(message, 14, Polygon.deserialize(reader), Polygon));
reader.readMessage(message.pathLines, () => pb_1.Message.addToRepeatedWrapperField(message, 14, PathLine.deserialize(reader), PathLine));
break;
case 15:
reader.readMessage(message.polygons, () => pb_1.Message.addToRepeatedWrapperField(message, 15, Polygon.deserialize(reader), Polygon));
break;
default: reader.skipField();
}
@ -2555,6 +2578,8 @@ export namespace graphicData {
points?: Point[];
nameColor?: string;
nameBgColor?: string;
upPathLineId?: string;
downPathLineId?: string;
}) {
super();
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [3], this.#one_of_decls);
@ -2574,6 +2599,12 @@ export namespace graphicData {
if ("nameBgColor" in data && data.nameBgColor != undefined) {
this.nameBgColor = data.nameBgColor;
}
if ("upPathLineId" in data && data.upPathLineId != undefined) {
this.upPathLineId = data.upPathLineId;
}
if ("downPathLineId" in data && data.downPathLineId != undefined) {
this.downPathLineId = data.downPathLineId;
}
}
}
get common() {
@ -2609,12 +2640,26 @@ export namespace graphicData {
set nameBgColor(value: string) {
pb_1.Message.setField(this, 5, value);
}
get upPathLineId() {
return pb_1.Message.getFieldWithDefault(this, 6, "") as string;
}
set upPathLineId(value: string) {
pb_1.Message.setField(this, 6, value);
}
get downPathLineId() {
return pb_1.Message.getFieldWithDefault(this, 7, "") as string;
}
set downPathLineId(value: string) {
pb_1.Message.setField(this, 7, value);
}
static fromObject(data: {
common?: ReturnType<typeof CommonInfo.prototype.toObject>;
code?: string;
points?: ReturnType<typeof Point.prototype.toObject>[];
nameColor?: string;
nameBgColor?: string;
upPathLineId?: string;
downPathLineId?: string;
}): RunLine {
const message = new RunLine({});
if (data.common != null) {
@ -2632,6 +2677,12 @@ export namespace graphicData {
if (data.nameBgColor != null) {
message.nameBgColor = data.nameBgColor;
}
if (data.upPathLineId != null) {
message.upPathLineId = data.upPathLineId;
}
if (data.downPathLineId != null) {
message.downPathLineId = data.downPathLineId;
}
return message;
}
toObject() {
@ -2641,6 +2692,8 @@ export namespace graphicData {
points?: ReturnType<typeof Point.prototype.toObject>[];
nameColor?: string;
nameBgColor?: string;
upPathLineId?: string;
downPathLineId?: string;
} = {};
if (this.common != null) {
data.common = this.common.toObject();
@ -2657,6 +2710,12 @@ export namespace graphicData {
if (this.nameBgColor != null) {
data.nameBgColor = this.nameBgColor;
}
if (this.upPathLineId != null) {
data.upPathLineId = this.upPathLineId;
}
if (this.downPathLineId != null) {
data.downPathLineId = this.downPathLineId;
}
return data;
}
serialize(): Uint8Array;
@ -2673,6 +2732,10 @@ export namespace graphicData {
writer.writeString(4, this.nameColor);
if (this.nameBgColor.length)
writer.writeString(5, this.nameBgColor);
if (this.upPathLineId.length)
writer.writeString(6, this.upPathLineId);
if (this.downPathLineId.length)
writer.writeString(7, this.downPathLineId);
if (!w)
return writer.getResultBuffer();
}
@ -2697,6 +2760,12 @@ export namespace graphicData {
case 5:
message.nameBgColor = reader.readString();
break;
case 6:
message.upPathLineId = reader.readString();
break;
case 7:
message.downPathLineId = reader.readString();
break;
default: reader.skipField();
}
}

@ -1 +1 @@
Subproject commit e55bc50a0c82afb9a8b4556550e7618a170ec5e7
Subproject commit 7ee338d95b87bf92ea59fccf983cb4d4abcf9683