Skip to content

Commit 53fd618

Browse files
boyongjiongboyongjiong
authored
fix(extension): 修复线的 menu 无法正常显示的 bug (#1679)
* fix(extension): 修复线的 menu 无法正常显示的 bug - 修复初始化时 edgeConfig 中 type 未传值场景下，未使用 graphModel.edgeType(默认边类型) 初始化边的 bug * style(extension): 优化代码注释歧义的问题 * docs(extension): 同步更新 menu extension 官网文档示例代码
1 parent 8732b62 commit 53fd618

File tree

5 files changed

+145
-53
lines changed

5 files changed

+145
-53
lines changed

‎examples/feature-examples/src/pages/extensions/menu/index.tsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ import styles from './index.less'
88
import '@logicflow/core/es/index.css'
99
import '@logicflow/extension/es/index.css'
1010

11+
import EdgeData = LogicFlow.EdgeData
12+
import NodeData = LogicFlow.NodeData
13+
1114
const config: Partial<LogicFlow.Options> = {
1215
isSilentMode: false,
1316
stopScrollGraph: true,
@@ -93,6 +96,13 @@ const data = {
9396
text: 'html节点',
9497
},
9598
],
99+
edges: [
100+
{
101+
// type: 'polyline',
102+
sourceNodeId: '1',
103+
targetNodeId: '2',
104+
},
105+
],
96106
}
97107

98108
export default function MenuExtension() {
@@ -112,6 +122,58 @@ export default function MenuExtension() {
112122
plugins: [Menu],
113123
})
114124

125+
lf.addMenuConfig({
126+
nodeMenu: [
127+
{
128+
text: '分享',
129+
callback() {
130+
alert('分享成功！')
131+
},
132+
},
133+
{
134+
text: '属性',
135+
callback(node: NodeData) {
136+
alert(`
137+
节点id：${node.id}
138+
节点类型：${node.type}
139+
节点坐标：(x: ${node.x}, y: ${node.y})
140+
`)
141+
},
142+
},
143+
],
144+
edgeMenu: [
145+
{
146+
text: '属性',
147+
callback(edge: EdgeData) {
148+
const {
149+
id,
150+
type,
151+
startPoint,
152+
endPoint,
153+
sourceNodeId,
154+
targetNodeId,
155+
} = edge
156+
alert(`
157+
边id：${id}
158+
边类型：${type}
159+
边起点坐标：(startPoint: [${startPoint.x}, ${startPoint.y}])
160+
边终点坐标：(endPoint: [${endPoint.x}, ${endPoint.y}])
161+
源节点id：${sourceNodeId}
162+
目标节点id：${targetNodeId}
163+
`)
164+
},
165+
},
166+
],
167+
graphMenu: [
168+
{
169+
text: '分享',
170+
callback() {
171+
alert('分享成功！')
172+
},
173+
},
174+
],
175+
})
176+
115177
lf.render(data)
116178
lfRef.current = lf
117179
}

‎packages/core/src/model/GraphModel.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -420,8 +420,11 @@ export class GraphModel {
420420
this.nodes = []
421421
}
422422
if (graphData.edges) {
423+
const currEdgeType = this.edgeType
423424
this.edges = map(graphData.edges, (edge) => {
424-
const Model = this.getModel(edge.type ?? '') as BaseEdgeModelCtor
425+
const Model = this.getModel(
426+
edge.type ?? currEdgeType,
427+
) as BaseEdgeModelCtor
425428
if (!Model) {
426429
throw new Error(`找不到${edge.type}对应的边。`)
427430
}

‎packages/extension/src/components/menu/index.ts

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import LogicFlow from '@logicflow/core'
22

3+
import GraphData = LogicFlow.GraphData
4+
import NodeData = LogicFlow.NodeData
5+
import EdgeData = LogicFlow.EdgeData
6+
37
type SetType = 'add' | 'reset'
48

59
export type MenuItem = {
@@ -25,7 +29,7 @@ class Menu {
2529
private __container?: HTMLElement
2630
private __menuDOM?: HTMLElement
2731
private menuTypeMap?: Map<string, MenuItem[]>
28-
private __currentData: any
32+
private __currentData: EdgeData | NodeData | GraphData | null = null
2933
static pluginName = 'menu'
3034

3135
constructor({ lf }) {
@@ -107,7 +111,7 @@ class Menu {
107111
this.menuTypeMap?.set(DefaultSelectionMenuKey, DefaultSelectionMenu)
108112
}
109113

110-
render(lf, container) {
114+
render(lf: LogicFlow, container: HTMLElement) {
111115
if (lf.options.isSilentMode) return
112116
this.__container = container
113117
this.__currentData = null // 当前展示的菜单所属元素的model数据
@@ -147,7 +151,7 @@ class Menu {
147151
)
148152
}
149153
// 通过事件控制菜单的显示和隐藏
150-
this.lf.on('node:contextmenu', ({ data, position, e }: any) => {
154+
this.lf.on('node:contextmenu', ({ data, position, e }) => {
151155
const {
152156
domOverlayPosition: { x, y },
153157
} = position
@@ -157,14 +161,14 @@ class Menu {
157161
if (!model) return
158162
let menuList: any = []
159163
const typeMenus = this.menuTypeMap?.get(model.type)
160-
// 如果单个节点自定义了节点，以单个节点自定义为准
164+
// 1.如果单个节点自定义了菜单，以单个节点自定义为准
161165
if (model && model.menu && Array.isArray(model.menu)) {
162166
menuList = model.menu
163167
} else if (typeMenus) {
164-
// 如果定义当前节点类型的元素
168+
// 2.如果当前节点类型定义了菜单，再取该配置
165169
menuList = typeMenus
166170
} else {
167-
// 最后取全局默认
171+
// 3.最后取全局默认
168172
menuList = this.menuTypeMap?.get(DefaultNodeMenuKey)
169173
}
170174
this.__currentData = data
@@ -175,23 +179,21 @@ class Menu {
175179
clientY: e.clientY,
176180
})
177181
})
178-
this.lf.on('edge:contextmenu', ({ data, position, e }: any) => {
182+
this.lf.on('edge:contextmenu', ({ data, position, e }) => {
179183
const {
180184
domOverlayPosition: { x, y },
181185
} = position
182186
const { id } = data
183187
const model = this.lf.graphModel.getEdgeModelById(id)
184188
if (!model) return
185189
let menuList: any = []
186-
const typeMenus = this.menuTypeMap?.get(model.type) ?? []
187-
// 如果单个节点自定义了边
190+
const typeMenus = this.menuTypeMap?.get(model.type)
191+
// 菜单优先级： model.menu > typeMenus > defaultEdgeMenu，注释同上节点
188192
if (model && model.menu && Array.isArray(model.menu)) {
189193
menuList = model.menu
190194
} else if (typeMenus) {
191-
// 如果定义当前边类型的元素
192195
menuList = typeMenus
193196
} else {
194-
// 最后取全局默认
195197
menuList = this.menuTypeMap?.get(DefaultEdgeMenuKey) ?? []
196198
}
197199
this.__currentData = data
@@ -202,21 +204,22 @@ class Menu {
202204
clientY: e.clientY,
203205
})
204206
})
205-
this.lf.on('blank:contextmenu', ({ position }: any) => {
207+
this.lf.on('blank:contextmenu', ({ position }) => {
206208
const menuList = this.menuTypeMap?.get(DefaultGraphMenuKey) ?? []
207209
const {
208210
domOverlayPosition: { x, y },
209211
} = position
210212
this.showMenu(x, y, menuList)
211213
})
212-
this.lf.on('selection:contextmenu', ({ data, position }: any) => {
214+
this.lf.on('selection:contextmenu', ({ data, position }) => {
213215
const menuList = this.menuTypeMap?.get(DefaultSelectionMenuKey)
214216
const {
215217
domOverlayPosition: { x, y },
216218
} = position
217219
this.__currentData = data
218220
this.showMenu(x, y, menuList)
219221
})
222+
220223
this.lf.on('node:mousedown', () => {
221224
this.__menuDOM!.style.display = 'none'
222225
})

‎sites/docs/docs/tutorial/extension-component-menu.en-US.md

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -73,46 +73,58 @@ const lf = new LogicFlow({
7373
plugins: [Menu],
7474
});
7575
// Append options to the menu (must be set before lf.render())
76+
// we can use `lf.addMenuConfig` to add menu options as other options
7677
lf.extension.menu.addMenuConfig({
7778
nodeMenu: [
7879
{
79-
text: "share",
80+
text: '分享',
8081
callback() {
81-
alert("share success！");
82+
alert('分享成功！')
8283
},
8384
},
8485
{
85-
text: "properties",
86-
callback(node: any) {
86+
text: '属性',
87+
callback(node: NodeData) {
8788
alert(`
88-
nodeId：${node.id}
89-
nodeType：${node.type}
90-
nodeCoordinate：(x: ${node.x}, y: ${node.y})`);
89+
节点id：${node.id}
90+
节点类型：${node.type}
91+
节点坐标：(x: ${node.x}, y: ${node.y})
92+
`)
9193
},
9294
},
9395
],
9496
edgeMenu: [
9597
{
96-
text: "properties",
97-
callback(edge: any) {
98+
text: '属性',
99+
callback(edge: EdgeData) {
100+
const {
101+
id,
102+
type,
103+
startPoint,
104+
endPoint,
105+
sourceNodeId,
106+
targetNodeId,
107+
} = edge
98108
alert(`
99-
edgeId：${edge.id}
100-
edgeType：${edge.type}
101-
edgeCoordinate：(x: ${edge.x}, y: ${edge.y})
102-
sourceNodeId：${edge.sourceNodeId}
103-
targetNodeId：${edge.targetNodeId}`);
109+
边id：${id}
110+
边类型：${type}
111+
边起点坐标：(startPoint: [${startPoint.x}, ${startPoint.y}])
112+
边终点坐标：(endPoint: [${endPoint.x}, ${endPoint.y}])
113+
源节点id：${sourceNodeId}
114+
目标节点id：${targetNodeId}
115+
`)
104116
},
105117
},
106118
],
107119
graphMenu: [
108120
{
109-
text: "share",
121+
text: '分享',
110122
callback() {
111-
alert("share success!");
123+
alert('分享成功！')
112124
},
113125
},
114126
],
115-
});
127+
})
116128
lf.render();
117129
```
118130

‎sites/docs/docs/tutorial/extension-component-menu.md

Lines changed: 34 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -65,57 +65,69 @@ LogicFlow.use(Menu);
6565
通过`lf.extension.menu.addMenuConfig`方法可以在原有菜单的基础上追加新的选项，具体配置示例如下：
6666

6767
```jsx | purex | pure
68-
import LogicFlow from "@logicflow/core";
69-
import { Menu } from "@logicflow/extension";
68+
import LogicFlow from '@logicflow/core'
69+
import { Menu } from '@logicflow/extension'
7070

7171
// 实例化 Logic Flow
7272
const lf = new LogicFlow({
73-
container: document.getElementById("app"),
73+
container: document.getElementById('app'),
7474
// 注册组件
7575
plugins: [Menu],
76-
});
76+
})
7777
// 为菜单追加选项（必须在 lf.render() 之前设置）
78+
// 或者直接通过 lf.addMenuConfig 也可以调用
7879
lf.extension.menu.addMenuConfig({
7980
nodeMenu: [
8081
{
81-
text: "分享",
82+
text: '分享',
8283
callback() {
83-
alert("分享成功！");
84+
alert('分享成功！')
8485
},
8586
},
8687
{
87-
text: "属性",
88-
callback(node: any) {
88+
text: '属性',
89+
callback(node: NodeData) {
8990
alert(`
90-
节点id：${node.id}
91-
节点类型：${node.type}
92-
节点坐标：(x: ${node.x}, y: ${node.y})`);
91+
节点id：${node.id}
92+
节点类型：${node.type}
93+
节点坐标：(x: ${node.x}, y: ${node.y})
94+
`)
9395
},
9496
},
9597
],
9698
edgeMenu: [
9799
{
98-
text: "属性",
99-
callback(edge: any) {
100+
text: '属性',
101+
callback(edge: EdgeData) {
102+
const {
103+
id,
104+
type,
105+
startPoint,
106+
endPoint,
107+
sourceNodeId,
108+
targetNodeId,
109+
} = edge
100110
alert(`
101-
边id：${edge.id}
102-
边类型：${edge.type}
103-
边坐标：(x: ${edge.x}, y: ${edge.y})
104-
源节点id：${edge.sourceNodeId}
105-
目标节点id：${edge.targetNodeId}`);
111+
边id：${id}
112+
边类型：${type}
113+
边起点坐标：(startPoint: [${startPoint.x}, ${startPoint.y}])
114+
边终点坐标：(endPoint: [${endPoint.x}, ${endPoint.y}])
115+
源节点id：${sourceNodeId}
116+
目标节点id：${targetNodeId}
117+
`)
106118
},
107119
},
108120
],
109121
graphMenu: [
110122
{
111-
text: "分享",
123+
text: '分享',
112124
callback() {
113-
alert("分享成功！");
125+
alert('分享成功！')
114126
},
115127
},
116128
],
117-
});
118-
lf.render();
129+
})
130+
lf.render()
119131
```
120132

121133
## 重置菜单

0 commit comments

Comments
 (0)