Skip to content

Commit 99933ba

Browse files
wangyiteng_vDymoneLewis
wangyiteng_v
authored and
DymoneLewis
committed
fix: 修复extension包引入vue包问题
1 parent 23a3d84 commit 99933ba

File tree

8 files changed

+198
-116
lines changed

8 files changed

+198
-116
lines changed

‎examples/vue3-app/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"echarts": "^5.5.1",
2424
"element-plus": "^2.0.4",
2525
"postcss": "^8.4.41",
26-
"tailwindcss": "latest",
26+
"tailwindcss": "^3.4.7",
2727
"vue": "^3.4.21",
2828
"vue-router": "^4.3.0"
2929
},

‎examples/vue3-app/src/components/chart/linkChart.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export default class LinkChart {
4646
this.flowId = graphModel.flowId!
4747
})
4848
g.init()
49-
this.lf.extension.miniMap.show()
49+
// this.lf.extension.miniMap.show()
5050

5151
// this.lf.render()
5252
}

‎examples/vue3-app/src/views/LFChartView.vue‎

Lines changed: 113 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<div class="w-full h-full">
3-
<el-button @click="handelMiniMap">显示小地图</el-button>
3+
<el-button @click="handelMiniMap()">{{ showMiniMap ? '隐藏' : '显示' }}小地图</el-button>
4+
<el-button @click="addNode">增加自定义节点</el-button>
45
<el-button @click="clearFlow">卸载画布</el-button>
56
<div ref="container" class="flow w-full h-full overflow-hidden" />
67
<TeleportContainer :flow-id="flowId" />
@@ -22,6 +23,7 @@ const props = defineProps<IProps>()
2223
const TeleportContainer = getTeleport()
2324
const container = ref()
2425
const graphData = ref<IGraphData>()
26+
const showMiniMap = ref(false)
2527
2628
const flowId = ref('')
2729
@@ -41,16 +43,16 @@ onMounted(() => {
4143
category: '分类123' + props.activeKey
4244
}
4345
},
44-
{
45-
id: 'node_id_2',
46-
type: 'defaultNode',
47-
x: 0,
48-
y: 0,
49-
properties: {
50-
type: 'first',
51-
url: 'http://www.test.com'
52-
}
53-
},
46+
// {
47+
// id: 'node_id_2',
48+
// type: 'defaultNode',
49+
// x: 0,
50+
// y: 0,
51+
// properties: {
52+
// type: 'first',
53+
// url: 'http://www.test.com'
54+
// }
55+
// },
5456
{
5557
id: 'node_id_3',
5658
type: 'analysisNode',
@@ -61,90 +63,90 @@ onMounted(() => {
6163
url: 'http://www.emei.vip/aaa.html',
6264
category: '分类123'
6365
}
64-
},
65-
{
66-
id: 'node_id_4',
67-
type: 'analysisNode',
68-
x: 0,
69-
y: 0,
70-
properties: {
71-
type: 'first',
72-
url: 'http://365897.com/aaa.html',
73-
category: '分类123'
74-
}
75-
},
76-
{
77-
id: 'node_id_5',
78-
type: 'defaultNode',
79-
x: 0,
80-
y: 0,
81-
properties: {
82-
type: 'middle',
83-
url: 'https://118037.com/1.html'
84-
}
85-
},
86-
{
87-
id: 'node_id_6',
88-
type: 'defaultNode',
89-
x: 0,
90-
y: 0,
91-
properties: {
92-
type: 'middle',
93-
url: 'https://www.emei.vip'
94-
}
95-
},
96-
{
97-
id: 'node_id_7',
98-
type: 'defaultNode',
99-
x: 0,
100-
y: 0,
101-
properties: {
102-
type: 'middle',
103-
url: 'https://bbbb.com'
104-
}
105-
},
106-
{
107-
id: 'node_id_8',
108-
type: 'analysisNode',
109-
x: 0,
110-
y: 0,
111-
properties: {
112-
type: 'middle',
113-
url: 'http://www.emei.vip/a.html',
114-
category: '分类123'
115-
}
116-
},
117-
{
118-
id: 'node_id_9',
119-
type: 'defaultNode',
120-
x: 0,
121-
y: 0,
122-
properties: {
123-
type: 'middle',
124-
url: 'https://aaaa.com',
125-
seq: 1
126-
}
127-
},
128-
{
129-
id: 'node_id_10',
130-
type: 'defaultNode',
131-
x: 0,
132-
y: 0,
133-
properties: {
134-
type: 'landing',
135-
url: 'https://bbbb.com'
136-
}
137-
},
138-
{
139-
id: 'node_id_11',
140-
type: 'defaultNode',
141-
x: 0,
142-
y: 0,
143-
properties: {
144-
type: 'landing',
145-
url: 'https://cccc.com'
146-
}
14766
}
67+
// {
68+
// id: 'node_id_4',
69+
// type: 'analysisNode',
70+
// x: 0,
71+
// y: 0,
72+
// properties: {
73+
// type: 'first',
74+
// url: 'http://365897.com/aaa.html',
75+
// category: '分类123'
76+
// }
77+
// },
78+
// {
79+
// id: 'node_id_5',
80+
// type: 'defaultNode',
81+
// x: 0,
82+
// y: 0,
83+
// properties: {
84+
// type: 'middle',
85+
// url: 'https://118037.com/1.html'
86+
// }
87+
// },
88+
// {
89+
// id: 'node_id_6',
90+
// type: 'defaultNode',
91+
// x: 0,
92+
// y: 0,
93+
// properties: {
94+
// type: 'middle',
95+
// url: 'https://www.emei.vip'
96+
// }
97+
// },
98+
// {
99+
// id: 'node_id_7',
100+
// type: 'defaultNode',
101+
// x: 0,
102+
// y: 0,
103+
// properties: {
104+
// type: 'middle',
105+
// url: 'https://bbbb.com'
106+
// }
107+
// },
108+
// {
109+
// id: 'node_id_8',
110+
// type: 'analysisNode',
111+
// x: 0,
112+
// y: 0,
113+
// properties: {
114+
// type: 'middle',
115+
// url: 'http://www.emei.vip/a.html',
116+
// category: '分类123'
117+
// }
118+
// },
119+
// {
120+
// id: 'node_id_9',
121+
// type: 'defaultNode',
122+
// x: 0,
123+
// y: 0,
124+
// properties: {
125+
// type: 'middle',
126+
// url: 'https://aaaa.com',
127+
// seq: 1
128+
// }
129+
// },
130+
// {
131+
// id: 'node_id_10',
132+
// type: 'defaultNode',
133+
// x: 0,
134+
// y: 0,
135+
// properties: {
136+
// type: 'landing',
137+
// url: 'https://bbbb.com'
138+
// }
139+
// },
140+
// {
141+
// id: 'node_id_11',
142+
// type: 'defaultNode',
143+
// x: 0,
144+
// y: 0,
145+
// properties: {
146+
// type: 'landing',
147+
// url: 'https://cccc.com'
148+
// }
149+
// }
148150
],
149151
edges: [
150152
{
@@ -215,8 +217,24 @@ onMounted(() => {
215217
})
216218
flowId.value = linkChart.flowId!
217219
})
220+
const addNode = () => {
221+
linkChart.lf.addNode({
222+
type: 'analysisNode',
223+
x: 110,
224+
y: 110,
225+
properties: {
226+
type: 'middle',
227+
url: 'https://bbbb.com'
228+
}
229+
})
230+
}
218231
const handelMiniMap = () => {
219-
linkChart.lf.extension.miniMap.show()
232+
if (showMiniMap.value) {
233+
linkChart.lf.extension.miniMap.hide()
234+
} else {
235+
linkChart.lf.extension.miniMap.show()
236+
}
237+
showMiniMap.value = !showMiniMap.value
220238
}
221239
const clearFlow = () => {
222240
linkChart.destroy()

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,7 @@ export class GraphModel {
181181
this.animation = setupAnimation(animation)
182182
this.overlapMode = options.overlapMode || OverlapMode.DEFAULT
183183

184+
this.isMiniMap = options.isMiniMap || false
184185
this.width = options.width ?? this.rootEl.getBoundingClientRect().width
185186
this.isContainerWidth = isNil(options.width)
186187
this.height = options.height ?? this.rootEl.getBoundingClientRect().height

‎packages/extension/src/components/mini-map/index.ts‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
import LogicFlow from '@logicflow/core'
2-
import {
3-
createTeleportContainer,
4-
destroyTeleportContainer,
5-
} from '@logicflow/vue-node-registry'
62

73
import Position = LogicFlow.Position
84
import MiniMapOption = MiniMap.MiniMapOption
@@ -240,8 +236,6 @@ export class MiniMap {
240236
*/
241237
public hide = () => {
242238
if (this.isShow) {
243-
// 隐藏小地图时摧毁实例
244-
destroyTeleportContainer(this.lfMap.graphModel.flowId)
245239
this.lf.off('graph:resize', this.onGraphResize)
246240
this.lfMap.destroy()
247241
// 保证重新创建实例时，小地图中内容偏移正确
@@ -363,14 +357,12 @@ export class MiniMap {
363357
history: false,
364358
snapline: false,
365359
disabledPlugins: this.disabledPlugins,
360+
isMiniMap: true,
366361
})
367362
// minimap中禁用adapter。
368363
// this.lfMap.adapterIn = (a) => a
369364
// this.lfMap.adapterOut = (a) => a
370365

371-
// 创建teleport容器（vue3中生效）
372-
createTeleportContainer(miniMapWrap, this.lfMap.graphModel.flowId)
373-
374366
this.miniMapWrap = miniMapWrap
375367
this.createViewPort()
376368
miniMapWrap.addEventListener('click', this.mapClick)
@@ -687,7 +679,6 @@ export class MiniMap {
687679
}
688680

689681
destroy() {
690-
destroyTeleportContainer(this.lfMap.graphModel.flowId)
691682
this.lf.off('graph:resize', this.onGraphResize)
692683
}
693684
}

‎packages/vue-node-registry/src/teleport.ts‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212

1313
let active = false
1414
const appInstances = new Map<string, InstanceType<any>>()
15+
const appNodesMap = new Map<string, any>() // 用于储存当前流程图节点id当节点都销毁时同时卸载vueApp实例
1516
const items = reactive<{ [key: string]: any }>({})
1617

1718
export function connect(
@@ -22,6 +23,9 @@ export function connect(
2223
graph: GraphModel,
2324
) {
2425
if (active) {
26+
if (graph.isMiniMap) {
27+
createTeleportContainer(container, graph.flowId)
28+
}
2529
items[id] = markRaw(
2630
defineComponent({
2731
render: () =>
@@ -37,9 +41,21 @@ export function connect(
3741
}
3842
}
3943

40-
export function disconnect(id: string) {
44+
export function disconnect(id: string, flowId: string) {
4145
if (active) {
4246
delete items[id]
47+
if (appInstances.has(flowId)) {
48+
const appNodeList = appNodesMap.get(flowId) || []
49+
const index = appNodeList.indexOf(id)
50+
if (index > -1) {
51+
appNodeList.splice(index, 1)
52+
if (appNodeList.length === 0) {
53+
destroyTeleportContainer(flowId)
54+
} else {
55+
appNodesMap.set(flowId, appNodeList)
56+
}
57+
}
58+
}
4359
}
4460
}
4561

@@ -74,6 +90,13 @@ export function getTeleport(): any {
7490
// 比如items[0]属于Page1的数据，那么Page2无论active=true/false，都无法执行items[0]
7591

7692
if (id.startsWith(props.flowId)) {
93+
if (appInstances.has(props.flowId)) {
94+
const appNodeList = appNodesMap.get(props.flowId) || []
95+
if (!appNodeList.includes(id)) {
96+
appNodeList.push(id)
97+
appNodesMap.set(props.flowId, appNodeList)
98+
}
99+
}
77100
children.push(items[id])
78101
}
79102
})
@@ -115,6 +138,7 @@ export function createTeleportContainer(
115138
app.mount(mountPoint)
116139

117140
appInstances.set(flowId, app)
141+
appNodesMap.set(flowId, [])
118142
}
119143
/**
120144
* 卸载 Teleport 容器组件
@@ -126,5 +150,6 @@ export function destroyTeleportContainer(flowId: string | undefined): void {
126150
if (app) {
127151
app.unmount()
128152
appInstances.delete(flowId)
153+
appNodesMap.delete(flowId)
129154
}
130155
}

‎packages/vue-node-registry/src/view.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ export class VueNodeView extends HtmlNode {
100100

101101
unmount() {
102102
if (isActive()) {
103-
disconnect(this.targetId())
103+
disconnect(this.targetId(), this.props.graphModel.flowId as string)
104104
}
105105
this.unmountVueComponent()
106106
}

0 commit comments

Comments
 (0)