81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import { BaseEdgeModel, BaseNodeModel, GraphModel } from '@logicflow/core'
|
||
import { defineComponent, h, reactive, isVue3, Teleport, markRaw, Fragment } from 'vue-demi'
|
||
|
||
let active = false
|
||
const items = reactive<{ [key: string]: any }>({})
|
||
|
||
export function connect(
|
||
id: string,
|
||
component: any,
|
||
container: HTMLDivElement,
|
||
node: BaseNodeModel | BaseEdgeModel,
|
||
graph: GraphModel,
|
||
get_props?: any
|
||
) {
|
||
if (!get_props) {
|
||
get_props = (node: BaseNodeModel | BaseEdgeModel, graph: GraphModel) => {
|
||
return { nodeModel: node, graph }
|
||
}
|
||
}
|
||
if (active) {
|
||
items[id] = markRaw(
|
||
defineComponent({
|
||
render: () => h(Teleport, { to: container } as any, [h(component, get_props(node, graph))]),
|
||
provide: () => ({
|
||
getNode: () => node,
|
||
getGraph: () => graph
|
||
})
|
||
})
|
||
)
|
||
}
|
||
}
|
||
|
||
export function disconnect(id: string) {
|
||
if (active) {
|
||
delete items[id]
|
||
}
|
||
}
|
||
|
||
export function isActive() {
|
||
return active
|
||
}
|
||
|
||
export function getTeleport(): any {
|
||
if (!isVue3) {
|
||
throw new Error('teleport is only available in Vue3')
|
||
}
|
||
active = true
|
||
|
||
return defineComponent({
|
||
props: {
|
||
flowId: {
|
||
type: String,
|
||
required: true
|
||
}
|
||
},
|
||
setup(props) {
|
||
return () => {
|
||
const children: Record<string, any>[] = []
|
||
Object.keys(items).forEach((id) => {
|
||
// https://github.com/didi/LogicFlow/issues/1768
|
||
// 多个不同的VueNodeView都会connect注册到items中，因此items存储了可能有多个flowId流程图的数据
|
||
// 当使用多个LogicFlow时，会创建多个flowId + 同时使用KeepAlive
|
||
// 每一次items改变，会触发不同flowId持有的setup()执行，由于每次setup()执行就是遍历items，因此存在多次重复渲染元素的问题
|
||
// 即items[0]会在Page1的setup()执行，items[0]也会在Page2的setup()执行，从而生成两个items[0]
|
||
|
||
// 比对当前界面显示的flowId，只更新items[当前页面flowId:nodeId]的数据
|
||
// 比如items[0]属于Page1的数据，那么Page2无论active=true/false，都无法执行items[0]
|
||
if (id.startsWith(props.flowId)) {
|
||
children.push(items[id])
|
||
}
|
||
})
|
||
return h(
|
||
Fragment,
|
||
{},
|
||
children.map((item) => h(item))
|
||
)
|
||
}
|
||
}
|
||
})
|
||
}
|