路径编辑调整
This commit is contained in:
parent
8f8ad4cd6a
commit
bea612c8ba
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -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 = () => {
|
||||||
|
@ -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);
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user