@logicflow/vue-node-registry 0.0.1-beta.0

package/lib/model.d.ts

@@ -0,0 +1,16 @@
+import LogicFlow, { HtmlNodeModel } from '@logicflow/core';
+export type CustomProperties = {
+    width?: number;
+    height?: number;
+    radius?: number;
+    refX?: number;
+    refY?: number;
+    style?: LogicFlow.CommonTheme;
+    textStyle?: LogicFlow.TextNodeTheme;
+};
+export declare class VueNodeModel extends HtmlNodeModel {
+    setAttributes(): void;
+    getTextStyle(): LogicFlow.TextNodeTheme;
+    getNodeStyle(): LogicFlow.CommonTheme;
+}
+export default VueNodeModel;

package/lib/model.js

@@ -0,0 +1,66 @@
+"use strict";
+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 __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VueNodeModel = void 0;
+var core_1 = require("@logicflow/core");
+var lodash_es_1 = require("lodash-es");
+var VueNodeModel = /** @class */ (function (_super) {
+    __extends(VueNodeModel, _super);
+    function VueNodeModel() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    VueNodeModel.prototype.setAttributes = function () {
+        console.log('this.properties', this.properties);
+        var _a = this.properties, width = _a.width, height = _a.height, radius = _a.radius;
+        if (width) {
+            this.width = width;
+        }
+        if (height) {
+            this.height = height;
+        }
+        if (radius) {
+            this.radius = radius;
+        }
+    };
+    VueNodeModel.prototype.getTextStyle = function () {
+        // const { x, y, width, height } = this
+        var _a = this.properties, _b = _a.refX, refX = _b === void 0 ? 0 : _b, _c = _a.refY, refY = _c === void 0 ? 0 : _c, textStyle = _a.textStyle;
+        var style = _super.prototype.getTextStyle.call(this);
+        // 通过 transform 重新设置 text 的位置
+        return __assign(__assign(__assign({}, style), ((0, lodash_es_1.cloneDeep)(textStyle) || {})), { transform: "matrix(1 0 0 1 ".concat(refX, " ").concat(refY, ")") });
+    };
+    VueNodeModel.prototype.getNodeStyle = function () {
+        var style = _super.prototype.getNodeStyle.call(this);
+        var customNodeStyle = this.properties.style;
+        return __assign(__assign({}, style), ((0, lodash_es_1.cloneDeep)(customNodeStyle) || {}));
+    };
+    return VueNodeModel;
+}(core_1.HtmlNodeModel));
+exports.VueNodeModel = VueNodeModel;
+exports.default = VueNodeModel;
+//# sourceMappingURL=model.js.map

package/lib/model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../src/model.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wCAA0D;AAC1D,uCAAqC;AAiBrC;IAAkC,gCAAa;IAA/C;;IA8CA,CAAC;IA7CC,oCAAa,GAAb;QACE,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QACzC,IAAA,KAA4B,IAAI,CAAC,UAA8B,EAA7D,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAwC,CAAA;QACrE,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACpB,CAAC;QACD,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACtB,CAAC;QACD,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACtB,CAAC;IACH,CAAC;IAED,mCAAY,GAAZ;QACE,uCAAuC;QACjC,IAAA,KAIF,IAAI,CAAC,UAA8B,EAHrC,YAAQ,EAAR,IAAI,mBAAG,CAAC,KAAA,EACR,YAAQ,EAAR,IAAI,mBAAG,CAAC,KAAA,EACR,SAAS,eAC4B,CAAA;QACvC,IAAM,KAAK,GAAG,gBAAK,CAAC,YAAY,WAAE,CAAA;QAElC,6BAA6B;QAC7B,sCACK,KAAK,GACL,CAAC,IAAA,qBAAS,EAAC,SAAS,CAAC,IAAI,EAAE,CAAC,KAC/B,SAAS,EAAE,yBAAkB,IAAI,cAAI,IAAI,MAAG,IAC7C;IACH,CAAC;IAED,mCAAY,GAAZ;QACE,IAAM,KAAK,GAAG,gBAAK,CAAC,YAAY,WAAE,CAAA;QAEhC,IAAO,eAAe,GAEpB,IAAI,CAAC,UAA8B,MAFf,CAEe;QAEvC,6BACK,KAAK,GACL,CAAC,IAAA,qBAAS,EAAC,eAAe,CAAC,IAAI,EAAE,CAAC,EAGtC;IACH,CAAC;IACH,mBAAC;AAAD,CAAC,AA9CD,CAAkC,oBAAa,GA8C9C;AA9CY,oCAAY;AAgDzB,kBAAe,YAAY,CAAA"}

package/lib/registry.d.ts

@@ -0,0 +1,12 @@
+import LogicFlow from '@logicflow/core';
+import RegisterConfig = LogicFlow.RegisterConfig;
+export type VueNodeConfig = {
+    type: string;
+    component: any;
+    effect?: (keyof LogicFlow.PropertiesType)[];
+} & Partial<RegisterConfig>;
+export declare const vueNodesMap: Record<string, {
+    component: any;
+    effect?: (keyof LogicFlow.PropertiesType)[];
+}>;
+export declare function register(config: VueNodeConfig, lf: LogicFlow): void;

package/lib/registry.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.register = exports.vueNodesMap = void 0;
+var view_1 = require("./view");
+var model_1 = require("./model");
+exports.vueNodesMap = {};
+function register(config, lf) {
+    var type = config.type, component = config.component, effect = config.effect, CustomNodeView = config.view, CustomNodeModel = config.model;
+    if (!type) {
+        throw new Error('You should specify type in config');
+    }
+    exports.vueNodesMap[type] = {
+        component: component,
+        effect: effect,
+    };
+    lf.register({
+        type: type,
+        view: CustomNodeView || view_1.VueNodeView,
+        model: CustomNodeModel || model_1.VueNodeModel,
+    });
+}
+exports.register = register;
+//# sourceMappingURL=registry.js.map

package/lib/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":";;;AACA,+BAAoC;AACpC,iCAAsC;AAUzB,QAAA,WAAW,GAMpB,EAAE,CAAA;AAEN,SAAgB,QAAQ,CAAC,MAAqB,EAAE,EAAa;IAEzD,IAAA,IAAI,GAKF,MAAM,KALJ,EACJ,SAAS,GAIP,MAAM,UAJC,EACT,MAAM,GAGJ,MAAM,OAHF,EACA,cAAc,GAElB,MAAM,KAFY,EACb,eAAe,GACpB,MAAM,MADc,CACd;IAEV,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAA;IACtD,CAAC;IACD,mBAAW,CAAC,IAAI,CAAC,GAAG;QAClB,SAAS,WAAA;QACT,MAAM,QAAA;KACP,CAAA;IAED,EAAE,CAAC,QAAQ,CAAC;QACV,IAAI,MAAA;QACJ,IAAI,EAAE,cAAc,IAAI,kBAAW;QACnC,KAAK,EAAE,eAAe,IAAI,oBAAY;KACvC,CAAC,CAAA;AACJ,CAAC;AAtBD,4BAsBC"}

package/lib/teleport.d.ts

@@ -0,0 +1,5 @@
+import { BaseNodeModel, GraphModel } from '@logicflow/core';
+export declare function connect(id: string, component: any, container: HTMLDivElement, node: BaseNodeModel, graph: GraphModel): void;
+export declare function disconnect(id: string): void;
+export declare function isActive(): boolean;
+export declare function getTeleport(): any;

package/lib/teleport.js

@@ -0,0 +1,47 @@
+"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)({
+        setup: function () {
+            return function () {
+                return (0, vue_demi_1.h)(vue_demi_1.Fragment, {}, Object.keys(items).map(function (id) { return (0, vue_demi_1.h)(items[id]); }));
+            };
+        },
+    });
+}
+exports.getTeleport = getTeleport;
+//# sourceMappingURL=teleport.js.map

package/lib/teleport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"teleport.js","sourceRoot":"","sources":["../src/teleport.ts"],"names":[],"mappings":";;;AACA,qCAQiB;AAEjB,IAAI,MAAM,GAAG,KAAK,CAAA;AAClB,IAAM,KAAK,GAAG,IAAA,mBAAQ,EAAyB,EAAE,CAAC,CAAA;AAElD,SAAgB,OAAO,CACrB,EAAU,EACV,SAAc,EACd,SAAyB,EACzB,IAAmB,EACnB,KAAiB;IAEjB,IAAI,MAAM,EAAE,CAAC;QACX,KAAK,CAAC,EAAE,CAAC,GAAG,IAAA,kBAAO,EACjB,IAAA,0BAAe,EAAC;YACd,MAAM,EAAE;gBACN,OAAA,IAAA,YAAC,EAAC,mBAAQ,EAAE,EAAE,EAAE,EAAE,SAAS,EAAS,EAAE;oBACpC,IAAA,YAAC,EAAC,SAAS,EAAE,EAAE,IAAI,MAAA,EAAE,KAAK,OAAA,EAAE,CAAC;iBAC9B,CAAC;YAFF,CAEE;YACJ,OAAO,EAAE,cAAM,OAAA,CAAC;gBACd,OAAO,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;gBACnB,QAAQ,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK;aACtB,CAAC,EAHa,CAGb;SACH,CAAC,CACH,CAAA;IACH,CAAC;AACH,CAAC;AArBD,0BAqBC;AAED,SAAgB,UAAU,CAAC,EAAU;IACnC,IAAI,MAAM,EAAE,CAAC;QACX,OAAO,KAAK,CAAC,EAAE,CAAC,CAAA;IAClB,CAAC;AACH,CAAC;AAJD,gCAIC;AAED,SAAgB,QAAQ;IACtB,OAAO,MAAM,CAAA;AACf,CAAC;AAFD,4BAEC;AAED,SAAgB,WAAW;IACzB,IAAI,CAAC,iBAAM,EAAE,CAAC;QACZ,MAAM,IAAI,KAAK,CAAC,oCAAoC,CAAC,CAAA;IACvD,CAAC;IACD,MAAM,GAAG,IAAI,CAAA;IAEb,OAAO,IAAA,0BAAe,EAAC;QACrB,KAAK;YACH,OAAO;gBACL,OAAA,IAAA,YAAC,EACC,mBAAQ,EACR,EAAE,EACF,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,UAAC,EAAE,IAAK,OAAA,IAAA,YAAC,EAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAZ,CAAY,CAAC,CAC7C;YAJD,CAIC,CAAA;QACL,CAAC;KACF,CAAC,CAAA;AACJ,CAAC;AAhBD,kCAgBC"}

package/lib/view.d.ts

@@ -0,0 +1,14 @@
+import { HtmlNode } from '@logicflow/core';
+export declare class VueNodeView extends HtmlNode {
+    root?: any;
+    private vm;
+    getComponentContainer(): any;
+    protected targetId(): string;
+    componentWillUnmount(): void;
+    setHtml(rootEl: SVGForeignObjectElement): void;
+    confirmUpdate(_rootEl: SVGForeignObjectElement): void;
+    protected renderVueComponent(): void;
+    protected unmountVueComponent(): any;
+    unmount(): void;
+}
+export default VueNodeView;

package/lib/view.js

@@ -0,0 +1,119 @@
+"use strict";
+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 __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VueNodeView = void 0;
+var vue_demi_1 = require("vue-demi");
+var core_1 = require("@logicflow/core");
+var registry_1 = require("./registry");
+var teleport_1 = require("./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-react-node-content';
+        this.root = el;
+        this.renderVueComponent();
+        rootEl.appendChild(el);
+    };
+    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 = registry_1.vueNodesMap[model.type].component;
+            if (component_1) {
+                if (vue_demi_1.isVue2) {
+                    var Vue = vue_demi_1.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 (vue_demi_1.isVue3) {
+                    if ((0, teleport_1.isActive)()) {
+                        (0, teleport_1.connect)(this.targetId(), component_1, root, model, graphModel);
+                    }
+                    else {
+                        this.vm = (0, vue_demi_1.createApp)({
+                            render: function () {
+                                return (0, vue_demi_1.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) {
+            vue_demi_1.isVue2 && this.vm.$destroy();
+            vue_demi_1.isVue3 && this.vm.$destroy();
+            this.vm = null;
+        }
+        if (root) {
+            root.innerHTML = '';
+        }
+        return root;
+    };
+    VueNodeView.prototype.unmount = function () {
+        this.unmountVueComponent();
+    };
+    return VueNodeView;
+}(core_1.HtmlNode));
+exports.VueNodeView = VueNodeView;
+exports.default = VueNodeView;
+//# sourceMappingURL=view.js.map

package/lib/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../src/view.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@logicflow/vue-node-registry",
+  "version": "0.0.1-beta.0",
+  "description": "LogicFlow Vue Component Node Registry",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "unpkg": "dist/index.js",
+  "jsdeliver": "dist/index.js",
+  "types": "lib/index.d.ts",
+  "keywords": [
+    "@logicflow/vue-node-registry",
+    "LogicFlow",
+    "Vue",
+    "Node"
+  ],
+  "dependencies": {
+    "vue-demi": "latest"
+  },
+  "peerDependencies": {
+    "@vue/composition-api": "^1.0.0-rc.1",
+    "vue": "^2.0.0 || >=3.0.0",
+    "@logicflow/core": "2.0.0-beta.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "vue": "^3.0.0",
+    "@logicflow/core": "2.0.0-beta.0"
+  },
+  "author": {
+    "name": "boyongjiong",
+    "email": "boyongjiong@gmail.com"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "clean:turbo": "rss",
+    "clean:build": "rss",
+    "clean": "rss",
+    "build:less": "rss",
+    "build:esm": "tsc --module esnext --target es5 --outDir ./es",
+    "build:cjs": "tsc --module commonjs --target es5 --outDir ./lib",
+    "build:umd": "rss",
+    "build:dev": "rss",
+    "build:watch": "rss",
+    "build:watch:esm": "rss",
+    "build:watch:cjs": "rss",
+    "build": "rss",
+    "prebuild": "rss",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './view'
+export * from './model'
+export * from './registry'
+export * from './teleport'

package/src/model.ts

@@ -0,0 +1,67 @@
+import LogicFlow, { HtmlNodeModel } from '@logicflow/core'
+import { cloneDeep } from 'lodash-es'
+
+export type CustomProperties = {
+  // 形状属性
+  width?: number
+  height?: number
+  radius?: number
+
+  // 文字位置属性
+  refX?: number
+  refY?: number
+
+  // 样式属性
+  style?: LogicFlow.CommonTheme
+  textStyle?: LogicFlow.TextNodeTheme
+}
+
+export class VueNodeModel extends HtmlNodeModel {
+  setAttributes() {
+    console.log('this.properties', this.properties)
+    const { width, height, radius } = this.properties as CustomProperties
+    if (width) {
+      this.width = width
+    }
+    if (height) {
+      this.height = height
+    }
+    if (radius) {
+      this.radius = radius
+    }
+  }
+
+  getTextStyle(): LogicFlow.TextNodeTheme {
+    // const { x, y, width, height } = this
+    const {
+      refX = 0,
+      refY = 0,
+      textStyle,
+    } = this.properties as CustomProperties
+    const style = super.getTextStyle()
+
+    // 通过 transform 重新设置 text 的位置
+    return {
+      ...style,
+      ...(cloneDeep(textStyle) || {}),
+      transform: `matrix(1 0 0 1 ${refX} ${refY})`,
+    }
+  }
+
+  getNodeStyle(): LogicFlow.CommonTheme {
+    const style = super.getNodeStyle()
+    const {
+      style: customNodeStyle,
+      // radius = 0, // 第二种方式，设置圆角
+    } = this.properties as CustomProperties
+
+    return {
+      ...style,
+      ...(cloneDeep(customNodeStyle) || {}),
+      // rx: radius,
+      // ry: radius,
+    }
+  }
+}
+
+export default VueNodeModel

package/src/registry.ts

@@ -0,0 +1,43 @@
+import LogicFlow from '@logicflow/core'
+import { VueNodeView } from './view'
+import { VueNodeModel } from './model'
+
+import RegisterConfig = LogicFlow.RegisterConfig
+
+export type VueNodeConfig = {
+  type: string
+  component: any
+  effect?: (keyof LogicFlow.PropertiesType)[]
+} & Partial<RegisterConfig>
+
+export const vueNodesMap: Record<
+  string,
+  {
+    component: any
+    effect?: (keyof LogicFlow.PropertiesType)[]
+  }
+> = {}
+
+export function register(config: VueNodeConfig, lf: LogicFlow) {
+  const {
+    type,
+    component,
+    effect,
+    view: CustomNodeView,
+    model: CustomNodeModel,
+  } = config
+
+  if (!type) {
+    throw new Error('You should specify type in config')
+  }
+  vueNodesMap[type] = {
+    component,
+    effect,
+  }
+
+  lf.register({
+    type,
+    view: CustomNodeView || VueNodeView,
+    model: CustomNodeModel || VueNodeModel,
+  })
+}

package/src/teleport.ts

@@ -0,0 +1,64 @@
+import { 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,
+  graph: GraphModel,
+) {
+  if (active) {
+    items[id] = markRaw(
+      defineComponent({
+        render: () =>
+          h(Teleport, { to: container } as any, [
+            h(component, { 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({
+    setup() {
+      return () =>
+        h(
+          Fragment,
+          {},
+          Object.keys(items).map((id) => h(items[id])),
+        )
+    },
+  })
+}

package/src/view.ts

@@ -0,0 +1,105 @@
+import { isVue2, isVue3, createApp, h, Vue2 } from 'vue-demi'
+import { HtmlNode } from '@logicflow/core'
+import { vueNodesMap } from './registry'
+import { isActive, connect } from './teleport'
+
+export class VueNodeView extends HtmlNode {
+  root?: any
+  private vm: any
+
+  getComponentContainer() {
+    return this.root
+  }
+
+  protected targetId() {
+    return `${this.props.graphModel.flowId}:${this.props.model.id}`
+  }
+
+  componentWillUnmount() {
+    super.componentWillUnmount()
+    this.unmount()
+  }
+
+  setHtml(rootEl: SVGForeignObjectElement) {
+    const el = document.createElement('div')
+    el.className = 'custom-react-node-content'
+    this.root = el
+
+    this.renderVueComponent()
+    rootEl.appendChild(el)
+  }
+
+  confirmUpdate(_rootEl: SVGForeignObjectElement) {
+    // TODO: 如有需要，可以先通过继承的方式，自定义该节点的更新逻辑；我们后续会根据实际需求，丰富该功能
+    console.log('_rootEl', _rootEl)
+  }
+
+  protected renderVueComponent() {
+    this.unmountVueComponent()
+    const root = this.getComponentContainer()
+    const { model, graphModel } = this.props
+
+    if (root) {
+      const { component } = vueNodesMap[model.type]
+      if (component) {
+        if (isVue2) {
+          const Vue = Vue2 as any
+          this.vm = new Vue({
+            el: root,
+            render(h: any) {
+              return h(component, {
+                node: model,
+                graph: graphModel,
+              })
+            },
+            provide() {
+              return {
+                getNode: () => model,
+                getGraph: () => graphModel,
+              }
+            },
+          })
+        } else if (isVue3) {
+          if (isActive()) {
+            connect(this.targetId(), component, root, model, graphModel)
+          } else {
+            this.vm = createApp({
+              render() {
+                return h(component, {
+                  node: model,
+                  graph: graphModel,
+                })
+              },
+              provide() {
+                return {
+                  getNode: () => model,
+                  getGraph: () => graphModel,
+                }
+              },
+            })
+            this.vm?.mount(root)
+          }
+        }
+      }
+    }
+  }
+
+  protected unmountVueComponent() {
+    const root = this.getComponentContainer()
+    if (this.vm) {
+      isVue2 && this.vm.$destroy()
+      isVue3 && this.vm.$destroy()
+      this.vm = null
+    }
+    if (root) {
+      root.innerHTML = ''
+    }
+    return root
+  }
+
+  unmount() {
+    this.unmountVueComponent()
+  }
+}
+
+export default VueNodeView