轨迹线生成
This commit is contained in:
parent
3f965fde13
commit
f621cbefd2
@ -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>
|
||||
|
47
src/drawApp/graphics/PathLineInteraction.ts
Normal file
47
src/drawApp/graphics/PathLineInteraction.ts
Normal 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);
|
||||
}
|
||||
}
|
@ -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());
|
||||
}
|
||||
|
@ -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([]);
|
||||
|
@ -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();
|
||||
|
@ -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];
|
||||
}
|
||||
|
@ -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,
|
||||
|
@ -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
|
Loading…
Reference in New Issue
Block a user