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

LogicFlow Vue Component Node Registry

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import { isVue2, isVue3, createApp, h, Vue2 } from 'vue-demi';
import { HtmlNode } from '@logicflow/core';
import { vueNodesMap } from './registry';
import { isActive, connect, disconnect } from './teleport';
var VueNodeView = /** @class */ (function (_super) {
    __extends(VueNodeView, _super);
    function VueNodeView() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    VueNodeView.prototype.getComponentContainer = function () {
        return this.root;
    };
    VueNodeView.prototype.targetId = function () {
        return "".concat(this.props.graphModel.flowId, ":").concat(this.props.model.id);
    };
    VueNodeView.prototype.componentWillUnmount = function () {
        _super.prototype.componentWillUnmount.call(this);
        this.unmount();
    };
    VueNodeView.prototype.setHtml = function (rootEl) {
        var el = document.createElement('div');
        el.className = 'custom-vue-node-content';
        this.root = el;
        rootEl.appendChild(el);
        this.renderVueComponent();
    };
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    VueNodeView.prototype.confirmUpdate = function (_rootEl) {
        // TODO: 如有需要，可以先通过继承的方式，自定义该节点的更新逻辑；我们后续会根据实际需求，丰富该功能
        // console.log('_rootEl', _rootEl)
    };
    VueNodeView.prototype.renderVueComponent = function () {
        var _a;
        this.unmountVueComponent();
        var root = this.getComponentContainer();
        var _b = this.props, model = _b.model, graphModel = _b.graphModel;
        if (root) {
            var component_1 = vueNodesMap[model.type].component;
            if (component_1) {
                if (isVue2) {
                    var Vue = Vue2;
                    this.vm = new Vue({
                        el: root,
                        render: function (h) {
                            return h(component_1, {
                                node: model,
                                graph: graphModel,
                            });
                        },
                        provide: function () {
                            return {
                                getNode: function () { return model; },
                                getGraph: function () { return graphModel; },
                            };
                        },
                    });
                }
                else if (isVue3) {
                    if (isActive()) {
                        connect(this.targetId(), component_1, root, model, graphModel);
                    }
                    else {
                        this.vm = createApp({
                            render: function () {
                                return h(component_1, {
                                    node: model,
                                    graph: graphModel,
                                });
                            },
                            provide: function () {
                                return {
                                    getNode: function () { return model; },
                                    getGraph: function () { return graphModel; },
                                };
                            },
                        });
                        (_a = this.vm) === null || _a === void 0 ? void 0 : _a.mount(root);
                    }
                }
            }
        }
    };
    VueNodeView.prototype.unmountVueComponent = function () {
        var root = this.getComponentContainer();
        if (this.vm) {
            isVue2 && this.vm.$destroy();
            isVue3 && this.vm.unmount();
            this.vm = null;
        }
        if (root) {
            root.innerHTML = '';
        }
        return root;
    };
    VueNodeView.prototype.unmount = function () {
        if (isActive()) {
            disconnect(this.targetId());
        }
        this.unmountVueComponent();
    };
    return VueNodeView;
}(HtmlNode));
export { VueNodeView };
export default VueNodeView;
//# sourceMappingURL=view.js.map