路径编辑调整

This commit is contained in:
fan 2023-06-20 10:08:29 +08:00
parent 8f8ad4cd6a
commit bea612c8ba
3 changed files with 178 additions and 9 deletions

View File

@ -1,8 +1,22 @@
import * as pb_1 from 'google-protobuf'; import * as pb_1 from 'google-protobuf';
import { IPointData } from 'pixi.js'; import { IPointData, DisplayObject, FederatedMouseEvent } from 'pixi.js';
import { ILinkData, Link } from 'src/graphics/link/Link'; import { ILinkData, Link } from 'src/graphics/link/Link';
import { graphicData } from 'src/protos/stationLayoutGraphics'; import { graphicData } from 'src/protos/stationLayoutGraphics';
import { GraphicDataBase } from './GraphicDataBase'; import { GraphicDataBase } from './GraphicDataBase';
import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
import {
GraphicApp,
GraphicInteractionPlugin,
JlGraphic,
} from 'src/jl-graphic';
import {
addWayPoint,
clearWayPoint,
getWaypointRangeIndex,
PolylineEditPlugin,
removeLineWayPoint,
} from 'src/jl-graphic/plugins/GraphicEditPlugin';
export class LinkData extends GraphicDataBase implements ILinkData { export class LinkData extends GraphicDataBase implements ILinkData {
constructor(data?: graphicData.Link) { constructor(data?: graphicData.Link) {
@ -75,3 +89,94 @@ export class LinkData extends GraphicDataBase implements ILinkData {
return pb_1.Message.equals(this.data, other.data); return pb_1.Message.equals(this.data, other.data);
} }
} }
export const addWaypointConfig: MenuItemOptions = {
name: '添加路径点',
};
export const removeWaypointConfig: MenuItemOptions = {
name: '移除路径点',
};
export const clearWaypointsConfig: MenuItemOptions = {
name: '清除所有路径点',
};
const LinkEditMenu: ContextMenu = ContextMenu.init({
name: '轨道编辑菜单',
groups: [
{
items: [addWaypointConfig, clearWaypointsConfig],
},
],
});
const EpEditMenu: ContextMenu = ContextMenu.init({
name: '轨道编辑菜单2',
groups: [
{
items: [removeWaypointConfig, clearWaypointsConfig],
},
],
});
export class DrawLinkPlugin extends GraphicInteractionPlugin<Link> {
static Name = 'link_draw_right_menu';
constructor(app: GraphicApp) {
super(DrawLinkPlugin.Name, app);
app.registerMenu(LinkEditMenu);
app.registerMenu(EpEditMenu);
}
static init(app: GraphicApp) {
return new DrawLinkPlugin(app);
}
filter(...grahpics: JlGraphic[]): Link[] | undefined {
return grahpics.filter((g) => g.type === Link.Type).map((g) => g as Link);
}
bind(g: Link): void {
g.on('_rightclick', this.onContextMenu, this);
g.on('selected', this.onSelected, this);
}
unbind(g: Link): 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 Link;
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 link = target.getGraphic() as Link;
this.app.updateSelected(link);
addWaypointConfig.handler = () => {
const linePoints = link.linePoints;
const p = link.screenToLocalPoint(e.global);
const { start, end } = getWaypointRangeIndex(
linePoints,
false,
p,
link.datas.lineWidth
);
addWayPoint(link, false, start, end, p);
};
clearWaypointsConfig.handler = () => {
clearWayPoint(link, false);
};
LinkEditMenu.open(e.global);
}
}

View File

@ -1,5 +1,9 @@
import * as pb_1 from 'google-protobuf'; import * as pb_1 from 'google-protobuf';
import { IRunLineData, RunLine } from 'src/graphics/runLine/RunLine'; import {
IRunLineData,
RunLine,
runLineConsts,
} from 'src/graphics/runLine/RunLine';
import { graphicData } from 'src/protos/stationLayoutGraphics'; import { graphicData } from 'src/protos/stationLayoutGraphics';
import { GraphicDataBase } from './GraphicDataBase'; import { GraphicDataBase } from './GraphicDataBase';
import { import {
@ -8,13 +12,14 @@ import {
JlGraphic, JlGraphic,
} from 'src/jl-graphic'; } from 'src/jl-graphic';
import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu'; import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
import { FederatedMouseEvent, DisplayObject, IPointData } from 'pixi.js'; import { FederatedMouseEvent, DisplayObject, IPointData } from 'pixi.js';
import { import {
addWayPoint, addWayPoint,
addWaypointConfig,
clearWayPoint, clearWayPoint,
clearWaypointsConfig,
getWaypointRangeIndex, getWaypointRangeIndex,
PolylineEditPlugin,
removeLineWayPoint,
} from 'src/jl-graphic/plugins/GraphicEditPlugin'; } from 'src/jl-graphic/plugins/GraphicEditPlugin';
export class RunLineData extends GraphicDataBase implements IRunLineData { export class RunLineData extends GraphicDataBase implements IRunLineData {
@ -81,6 +86,16 @@ export class RunLineData extends GraphicDataBase implements IRunLineData {
} }
} }
export const addWaypointConfig: MenuItemOptions = {
name: '添加路径点',
};
export const removeWaypointConfig: MenuItemOptions = {
name: '移除路径点',
};
export const clearWaypointsConfig: MenuItemOptions = {
name: '清除所有路径点',
};
const RunLineEditMenu: ContextMenu = ContextMenu.init({ const RunLineEditMenu: ContextMenu = ContextMenu.init({
name: '运行线编辑菜单', name: '运行线编辑菜单',
groups: [ groups: [
@ -89,12 +104,21 @@ const RunLineEditMenu: ContextMenu = ContextMenu.init({
}, },
], ],
}); });
const EpEditMenu: ContextMenu = ContextMenu.init({
name: '运行线编辑菜单2',
groups: [
{
items: [removeWaypointConfig, clearWaypointsConfig],
},
],
});
export class DrawRunLinePlugin extends GraphicInteractionPlugin<RunLine> { export class DrawRunLinePlugin extends GraphicInteractionPlugin<RunLine> {
static Name = 'runline_draw_right_menu'; static Name = 'runline_draw_right_menu';
constructor(app: GraphicApp) { constructor(app: GraphicApp) {
super(DrawRunLinePlugin.Name, app); super(DrawRunLinePlugin.Name, app);
app.registerMenu(RunLineEditMenu); app.registerMenu(RunLineEditMenu);
app.registerMenu(EpEditMenu);
} }
static init(app: GraphicApp) { static init(app: GraphicApp) {
return new DrawRunLinePlugin(app); return new DrawRunLinePlugin(app);
@ -106,12 +130,32 @@ export class DrawRunLinePlugin extends GraphicInteractionPlugin<RunLine> {
} }
bind(g: RunLine): void { bind(g: RunLine): void {
g.on('_rightclick', this.onContextMenu, this); g.on('_rightclick', this.onContextMenu, this);
g.on('selected', this.onSelected, this);
} }
unbind(g: RunLine): void { unbind(g: RunLine): void {
g.off('_rightclick', this.onContextMenu, this); 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 runLine = g.getGraphic() as RunLine;
polylineEditPlugin.editedPoints.forEach((ep, index) => {
ep.on('rightclick', (e: FederatedMouseEvent) => {
this.app.registerMenu(EpEditMenu);
removeWaypointConfig.handler = () => {
removeLineWayPoint(runLine, index);
};
clearWaypointsConfig.handler = () => {
clearWayPoint(runLine, false);
};
EpEditMenu.open(e.global);
});
});
}
onContextMenu(e: FederatedMouseEvent) { onContextMenu(e: FederatedMouseEvent) {
const target = e.target as DisplayObject; const target = e.target as DisplayObject;
const runLine = target.getGraphic() as RunLine; const runLine = target.getGraphic() as RunLine;
@ -120,7 +164,12 @@ export class DrawRunLinePlugin extends GraphicInteractionPlugin<RunLine> {
addWaypointConfig.handler = () => { addWaypointConfig.handler = () => {
const linePoints = runLine.linePoints; const linePoints = runLine.linePoints;
const p = runLine.screenToLocalPoint(e.global); const p = runLine.screenToLocalPoint(e.global);
const { start, end } = getWaypointRangeIndex(linePoints, false, p); const { start, end } = getWaypointRangeIndex(
linePoints,
false,
p,
runLineConsts.runLineWidth
);
addWayPoint(runLine, false, start, end, p); addWayPoint(runLine, false, start, end, p);
}; };
clearWaypointsConfig.handler = () => { clearWaypointsConfig.handler = () => {

View File

@ -22,6 +22,7 @@ import {
linePoint, linePoint,
pointPolygon, pointPolygon,
} from 'src/jl-graphic'; } from 'src/jl-graphic';
import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
import AbsorbablePoint, { import AbsorbablePoint, {
AbsorbableCircle, AbsorbableCircle,
} from 'src/jl-graphic/graphic/AbsorbablePosition'; } from 'src/jl-graphic/graphic/AbsorbablePosition';
@ -30,9 +31,7 @@ import {
ILineGraphic, ILineGraphic,
PolylineEditPlugin, PolylineEditPlugin,
addWayPoint, addWayPoint,
addWaypointConfig,
clearWayPoint, clearWayPoint,
clearWaypointsConfig,
getWaypointRangeIndex, getWaypointRangeIndex,
} from 'src/jl-graphic/plugins/GraphicEditPlugin'; } from 'src/jl-graphic/plugins/GraphicEditPlugin';
import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu'; import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
@ -68,7 +67,13 @@ export class LinkDraw extends GraphicDrawAssistant<LinkTemplate, ILinkData> {
}); });
constructor(app: JlDrawApp, createData: () => ILinkData) { constructor(app: JlDrawApp, createData: () => ILinkData) {
super(app, new LinkTemplate(), createData, 'sym_o_horizontal_rule', '轨道Link'); super(
app,
new LinkTemplate(),
createData,
'sym_o_horizontal_rule',
'轨道Link'
);
this.container.addChild(this.graphic); this.container.addChild(this.graphic);
this.graphicTemplate.curve = true; this.graphicTemplate.curve = true;
@ -268,6 +273,15 @@ function onEditPointCreate(
}); });
} }
} }
export const addWaypointConfig: MenuItemOptions = {
name: '添加路径点',
};
export const removeWaypointConfig: MenuItemOptions = {
name: '移除路径点',
};
export const clearWaypointsConfig: MenuItemOptions = {
name: '清除所有路径点',
};
const LinkEditMenu: ContextMenu = ContextMenu.init({ const LinkEditMenu: ContextMenu = ContextMenu.init({
name: '轨道编辑菜单', name: '轨道编辑菜单',
@ -318,7 +332,8 @@ export class LinkPointsEditPlugin extends GraphicInteractionPlugin<Link> {
const { start, end } = getWaypointRangeIndex( const { start, end } = getWaypointRangeIndex(
linePoints, linePoints,
link.datas.curve, link.datas.curve,
p p,
link.datas.lineWidth
); );
addWayPoint(link, link.datas.curve, start, end, p); addWayPoint(link, link.datas.curve, start, end, p);
}; };