@logicflow/vue-node-registry/es/teleport.js

LogicFlow Vue Component Node Registry

import { defineComponent, h, reactive, isVue3, Teleport, markRaw, Fragment, } from 'vue-demi';
var active = false;
var items = reactive({});
export function connect(id, component, container, node, graph) {
    if (active) {
        items[id] = markRaw(defineComponent({
            render: function () {
                return h(Teleport, { to: container }, [
                    h(component, { node: node, graph: graph }),
                ]);
            },
            provide: function () { return ({
                getNode: function () { return node; },
                getGraph: function () { return graph; },
            }); },
        }));
    }
}
export function disconnect(id) {
    if (active) {
        delete items[id];
    }
}
export function isActive() {
    return active;
}
export function getTeleport() {
    if (!isVue3) {
        throw new Error('teleport is only available in Vue3');
    }
    active = true;
    return defineComponent({
        props: {
            flowId: {
                type: String,
                required: true,
            },
        },
        setup: function (props) {
            return function () {
                var children = [];
                Object.keys(items).forEach(function (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(function (item) { return h(item); }));
            };
        },
    });
}
//# sourceMappingURL=teleport.js.map