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

LogicFlow Vue Component Node Registry

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getTeleport = exports.isActive = exports.disconnect = exports.connect = void 0;
var vue_demi_1 = require("vue-demi");
var active = false;
var items = (0, vue_demi_1.reactive)({});
function connect(id, component, container, node, graph) {
    if (active) {
        items[id] = (0, vue_demi_1.markRaw)((0, vue_demi_1.defineComponent)({
            render: function () {
                return (0, vue_demi_1.h)(vue_demi_1.Teleport, { to: container }, [
                    (0, vue_demi_1.h)(component, { node: node, graph: graph }),
                ]);
            },
            provide: function () { return ({
                getNode: function () { return node; },
                getGraph: function () { return graph; },
            }); },
        }));
    }
}
exports.connect = connect;
function disconnect(id) {
    if (active) {
        delete items[id];
    }
}
exports.disconnect = disconnect;
function isActive() {
    return active;
}
exports.isActive = isActive;
function getTeleport() {
    if (!vue_demi_1.isVue3) {
        throw new Error('teleport is only available in Vue3');
    }
    active = true;
    return (0, vue_demi_1.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 (0, vue_demi_1.h)(vue_demi_1.Fragment, {}, children.map(function (item) { return (0, vue_demi_1.h)(item); }));
            };
        },
    });
}
exports.getTeleport = getTeleport;
//# sourceMappingURL=teleport.js.map