diff --git a/src/drawApp/graphics/LinkInteraction.ts b/src/drawApp/graphics/LinkInteraction.ts index 5855b80..cd28295 100644 --- a/src/drawApp/graphics/LinkInteraction.ts +++ b/src/drawApp/graphics/LinkInteraction.ts @@ -1,8 +1,22 @@ 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 { graphicData } from 'src/protos/stationLayoutGraphics'; 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 { constructor(data?: graphicData.Link) { @@ -75,3 +89,94 @@ export class LinkData extends GraphicDataBase implements ILinkData { 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 { + 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); + } +} diff --git a/src/drawApp/graphics/RunLineInteraction.ts b/src/drawApp/graphics/RunLineInteraction.ts index 803147b..793b1f4 100644 --- a/src/drawApp/graphics/RunLineInteraction.ts +++ b/src/drawApp/graphics/RunLineInteraction.ts @@ -1,5 +1,9 @@ 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 { GraphicDataBase } from './GraphicDataBase'; import { @@ -8,13 +12,14 @@ import { JlGraphic, } from 'src/jl-graphic'; import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu'; +import { MenuItemOptions } from 'src/jl-graphic/ui/Menu'; import { FederatedMouseEvent, DisplayObject, IPointData } from 'pixi.js'; import { addWayPoint, - addWaypointConfig, clearWayPoint, - clearWaypointsConfig, getWaypointRangeIndex, + PolylineEditPlugin, + removeLineWayPoint, } from 'src/jl-graphic/plugins/GraphicEditPlugin'; 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({ name: '运行线编辑菜单', 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 { static Name = 'runline_draw_right_menu'; constructor(app: GraphicApp) { super(DrawRunLinePlugin.Name, app); app.registerMenu(RunLineEditMenu); + app.registerMenu(EpEditMenu); } static init(app: GraphicApp) { return new DrawRunLinePlugin(app); @@ -106,12 +130,32 @@ export class DrawRunLinePlugin extends GraphicInteractionPlugin { } bind(g: RunLine): void { g.on('_rightclick', this.onContextMenu, this); + g.on('selected', this.onSelected, this); } unbind(g: RunLine): 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 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) { const target = e.target as DisplayObject; const runLine = target.getGraphic() as RunLine; @@ -120,7 +164,12 @@ export class DrawRunLinePlugin extends GraphicInteractionPlugin { addWaypointConfig.handler = () => { const linePoints = runLine.linePoints; 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); }; clearWaypointsConfig.handler = () => { diff --git a/src/graphics/link/LinkDrawAssistant.ts b/src/graphics/link/LinkDrawAssistant.ts index 0542ee1..bc46804 100644 --- a/src/graphics/link/LinkDrawAssistant.ts +++ b/src/graphics/link/LinkDrawAssistant.ts @@ -22,6 +22,7 @@ import { linePoint, pointPolygon, } from 'src/jl-graphic'; +import { MenuItemOptions } from 'src/jl-graphic/ui/Menu'; import AbsorbablePoint, { AbsorbableCircle, } from 'src/jl-graphic/graphic/AbsorbablePosition'; @@ -30,9 +31,7 @@ import { ILineGraphic, PolylineEditPlugin, addWayPoint, - addWaypointConfig, clearWayPoint, - clearWaypointsConfig, getWaypointRangeIndex, } from 'src/jl-graphic/plugins/GraphicEditPlugin'; import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu'; @@ -68,7 +67,13 @@ export class LinkDraw extends GraphicDrawAssistant { }); 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.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({ name: '轨道编辑菜单', @@ -318,7 +332,8 @@ export class LinkPointsEditPlugin extends GraphicInteractionPlugin { const { start, end } = getWaypointRangeIndex( linePoints, link.datas.curve, - p + p, + link.datas.lineWidth ); addWayPoint(link, link.datas.curve, start, end, p); };