@logicflow/vue-node-registry 1.0.9 → 1.0.10

package/.turbo/turbo-build.log

@@ -1,17 +1,34 @@
-
-> @logicflow/vue-node-registry@1.0.8 prebuild /Users/didi/Desktop/github/LogicFlow/packages/vue-node-registry
-> rss
-
-> [prebuild] run-s -s clean:build 
-> [clean:build] rimraf dist es lib 
-
-> @logicflow/vue-node-registry@1.0.8 build /Users/didi/Desktop/github/LogicFlow/packages/vue-node-registry
-> rss
-
-> [build] run-p -s build:dev build:umd 
-> [build:umd] pnpm run --if-present build:less && rollup -c ../../rollup.config.js --bundleConfigAsCjs 
-> [build:dev] pnpm run --if-present build:less && run-p -s build:cjs build:esm 
-> [build:less] ./scripts/build-less
-> [build:less] ./scripts/build-less
-
-./src/index.ts → dist/index.min.js...
+
+> @logicflow/vue-node-registry@1.0.10 prebuild /Users/r0ger1tlearn/WorkSpace/Github/DiDi/logicflow/packages/vue-node-registry
+> rss
+
+> [prebuild] run-s -s clean:build 
+> [clean:build] rimraf dist es lib 
+
+> @logicflow/vue-node-registry@1.0.10 build /Users/r0ger1tlearn/WorkSpace/Github/DiDi/logicflow/packages/vue-node-registry
+> rss
+
+> [build] run-p -s build:dev build:umd 
+> [build:dev] pnpm run --if-present build:less && run-p -s build:cjs build:esm 
+> [build:umd] pnpm run --if-present build:less && rollup -c ../../rollup.config.js --bundleConfigAsCjs 
+> [build:less] ./scripts/build-less
+> [build:less] ./scripts/build-less
+
+./src/index.ts → dist/index.min.js...
++----------------------------------------------+
+|                                              |
+|   Bundle Format: umd                         |
+|   Bundle Name: VueNodeRegistry               |
+|   External Globals:                          |
+|    @logicflow/core: Core                     |
+|    @vue/composition-api: VueCompositionApi   |
+|    vue: Vue                                  |
+|                                              |
+|   Destination: dist/index.min.js             |
+|   Bundle   Size: 390 B                       |
+|   Minified Size: 351 B                       |
+|   GZipped  Size: 200 B                       |
+|                                              |
++----------------------------------------------+
+(!) [plugin typescript] @rollup/plugin-typescript: Rollup requires that TypeScript produces ES Modules. Unfortunately your configuration specifies a "module" other than "esnext". Unless you know what you're doing, please change "module" to "esnext" in the target tsconfig.json file or plugin options.
+created dist/index.min.js in 4.5s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @logicflow/vue-node-registry
 
+## 1.0.10
+
+### Patch Changes
+
+- release react/vue-node-registry
+
 ## 1.0.9
 
 ### Patch Changes

package/dist/index.min.js

@@ -0,0 +1,2 @@
+!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=require("tslib");e.__exportStar(require("./view"),exports),e.__exportStar(require("./model"),exports),e.__exportStar(require("./registry"),exports),e.__exportStar(require("./teleport"),exports)}));
+//# sourceMappingURL=index.min.js.map

package/dist/index.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.min.js","sources":["../src/index.ts"],"sourcesContent":["export * from './view'\nexport * from './model'\nexport * from './registry'\nexport * from './teleport'\n"],"names":["tslib_1","__exportStar","require","exports"],"mappings":"2KAAAA,EAAsBC,aAAAC,QAAA,UAAAC,SACtBH,EAAuBC,aAAAC,QAAA,WAAAC,SACvBH,EAA0BC,aAAAC,QAAA,cAAAC,SAC1BH,EAA0BC,aAAAC,QAAA,cAAAC"}

package/es/index.d.ts

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

package/es/index.js

@@ -0,0 +1,5 @@
+export * from './view';
+export * from './model';
+export * from './registry';
+export * from './teleport';
+//# sourceMappingURL=index.js.map

package/es/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA"}

package/es/model.d.ts

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

package/es/model.js

@@ -0,0 +1,62 @@
+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);
+};
+import { HtmlNodeModel } from '@logicflow/core';
+import { cloneDeep, isNil } from 'lodash-es';
+var VueNodeModel = /** @class */ (function (_super) {
+    __extends(VueNodeModel, _super);
+    function VueNodeModel() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    VueNodeModel.prototype.setAttributes = function () {
+        // DONE: 解决 width、height、radius 为 0 时的问题
+        var _a = this.properties, width = _a.width, height = _a.height, radius = _a.radius;
+        if (!isNil(width)) {
+            this.width = width;
+        }
+        if (!isNil(height)) {
+            this.height = height;
+        }
+        if (!isNil(radius)) {
+            this.radius = radius;
+        }
+    };
+    VueNodeModel.prototype.getTextStyle = function () {
+        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), (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), (cloneDeep(customNodeStyle) || {}));
+    };
+    return VueNodeModel;
+}(HtmlNodeModel));
+export { VueNodeModel };
+export default VueNodeModel;
+//# sourceMappingURL=model.js.map

package/es/model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../src/model.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAkB,EAAE,aAAa,EAAuB,MAAM,iBAAiB,CAAA;AAC/E,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAiB5C;IAEU,gCAAgB;IAF1B;;IA2CA,CAAC;IAxCC,oCAAa,GAAb;QACE,wCAAwC;QAClC,IAAA,KAA4B,IAAI,CAAC,UAAU,EAAzC,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAoB,CAAA;QACjD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;YAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACpB,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACtB,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACtB,CAAC;IACH,CAAC;IAED,mCAAY,GAAZ;QACQ,IAAA,KAAoC,IAAI,CAAC,UAAU,EAAjD,YAAQ,EAAR,IAAI,mBAAG,CAAC,KAAA,EAAE,YAAQ,EAAR,IAAI,mBAAG,CAAC,KAAA,EAAE,SAAS,eAAoB,CAAA;QACzD,IAAM,KAAK,GAAG,gBAAK,CAAC,YAAY,WAAE,CAAA;QAElC,6BAA6B;QAC7B,sCACK,KAAK,GACL,CAAC,SAAS,CAAC,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,UAAU,MAFK,CAEL;QAEnB,6BACK,KAAK,GACL,CAAC,SAAS,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,EAGtC;IACH,CAAC;IACH,mBAAC;AAAD,CAAC,AA3CD,CAEU,aAAa,GAyCtB;;AAED,eAAe,YAAY,CAAA"}

package/es/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/es/registry.js

@@ -0,0 +1,19 @@
+import { VueNodeView } from './view';
+import { VueNodeModel } from './model';
+export var vueNodesMap = {};
+export 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');
+    }
+    vueNodesMap[type] = {
+        component: component,
+        effect: effect,
+    };
+    lf.register({
+        type: type,
+        view: CustomNodeView || VueNodeView,
+        model: CustomNodeModel || VueNodeModel,
+    });
+}
+//# sourceMappingURL=registry.js.map

package/es/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAUtC,MAAM,CAAC,IAAM,WAAW,GAMpB,EAAE,CAAA;AAEN,MAAM,UAAU,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,WAAW,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,WAAW;QACnC,KAAK,EAAE,eAAe,IAAI,YAAY;KACvC,CAAC,CAAA;AACJ,CAAC"}

package/es/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/es/teleport.js

@@ -0,0 +1,59 @@
+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

package/es/teleport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"teleport.js","sourceRoot":"","sources":["../src/teleport.ts"],"names":[],"mappings":"AACA,OAAO,EACL,eAAe,EACf,CAAC,EACD,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,GACT,MAAM,UAAU,CAAA;AAEjB,IAAI,MAAM,GAAG,KAAK,CAAA;AAClB,IAAM,KAAK,GAAG,QAAQ,CAAyB,EAAE,CAAC,CAAA;AAElD,MAAM,UAAU,OAAO,CACrB,EAAU,EACV,SAAc,EACd,SAAyB,EACzB,IAAmB,EACnB,KAAiB;IAEjB,IAAI,MAAM,EAAE,CAAC;QACX,KAAK,CAAC,EAAE,CAAC,GAAG,OAAO,CACjB,eAAe,CAAC;YACd,MAAM,EAAE;gBACN,OAAA,CAAC,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,SAAS,EAAS,EAAE;oBACpC,CAAC,CAAC,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;AAED,MAAM,UAAU,UAAU,CAAC,EAAU;IACnC,IAAI,MAAM,EAAE,CAAC;QACX,OAAO,KAAK,CAAC,EAAE,CAAC,CAAA;IAClB,CAAC;AACH,CAAC;AAED,MAAM,UAAU,QAAQ;IACtB,OAAO,MAAM,CAAA;AACf,CAAC;AAED,MAAM,UAAU,WAAW;IACzB,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,IAAI,KAAK,CAAC,oCAAoC,CAAC,CAAA;IACvD,CAAC;IACD,MAAM,GAAG,IAAI,CAAA;IAEb,OAAO,eAAe,CAAC;QACrB,KAAK,EAAE;YACL,MAAM,EAAE;gBACN,IAAI,EAAE,MAAM;gBACZ,QAAQ,EAAE,IAAI;aACf;SACF;QACD,KAAK,YAAC,KAAK;YACT,OAAO;gBACL,IAAM,QAAQ,GAA0B,EAAE,CAAA;gBAC1C,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,UAAC,EAAE;oBAC5B,gDAAgD;oBAChD,iEAAiE;oBACjE,8CAA8C;oBAC9C,4EAA4E;oBAC5E,uEAAuE;oBAEvE,iDAAiD;oBACjD,gEAAgE;oBAChE,IAAI,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;wBAChC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA;oBAC1B,CAAC;gBACH,CAAC,CAAC,CAAA;gBACF,OAAO,CAAC,CACN,QAAQ,EACR,EAAE,EACF,QAAQ,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,CAAC,CAAC,IAAI,CAAC,EAAP,CAAO,CAAC,CAChC,CAAA;YACH,CAAC,CAAA;QACH,CAAC;KACF,CAAC,CAAA;AACJ,CAAC"}

package/es/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/es/view.js

@@ -0,0 +1,120 @@
+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

package/es/view.js.map

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

package/lib/index.d.ts

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

package/lib/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./view"), exports);
+__exportStar(require("./model"), exports);
+__exportStar(require("./registry"), exports);
+__exportStar(require("./teleport"), exports);
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yCAAsB;AACtB,0CAAuB;AACvB,6CAA0B;AAC1B,6CAA0B"}

package/lib/model.d.ts

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

package/lib/model.js

@@ -0,0 +1,65 @@
+"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 () {
+        // DONE: 解决 width、height、radius 为 0 时的问题
+        var _a = this.properties, width = _a.width, height = _a.height, radius = _a.radius;
+        if (!(0, lodash_es_1.isNil)(width)) {
+            this.width = width;
+        }
+        if (!(0, lodash_es_1.isNil)(height)) {
+            this.height = height;
+        }
+        if (!(0, lodash_es_1.isNil)(radius)) {
+            this.radius = radius;
+        }
+    };
+    VueNodeModel.prototype.getTextStyle = function () {
+        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,wCAA+E;AAC/E,uCAA4C;AAiB5C;IAEU,gCAAgB;IAF1B;;IA2CA,CAAC;IAxCC,oCAAa,GAAb;QACE,wCAAwC;QAClC,IAAA,KAA4B,IAAI,CAAC,UAAU,EAAzC,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAoB,CAAA;QACjD,IAAI,CAAC,IAAA,iBAAK,EAAC,KAAK,CAAC,EAAE,CAAC;YAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACpB,CAAC;QACD,IAAI,CAAC,IAAA,iBAAK,EAAC,MAAM,CAAC,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACtB,CAAC;QACD,IAAI,CAAC,IAAA,iBAAK,EAAC,MAAM,CAAC,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACtB,CAAC;IACH,CAAC;IAED,mCAAY,GAAZ;QACQ,IAAA,KAAoC,IAAI,CAAC,UAAU,EAAjD,YAAQ,EAAR,IAAI,mBAAG,CAAC,KAAA,EAAE,YAAQ,EAAR,IAAI,mBAAG,CAAC,KAAA,EAAE,SAAS,eAAoB,CAAA;QACzD,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,UAAU,MAFK,CAEL;QAEnB,6BACK,KAAK,GACL,CAAC,IAAA,qBAAS,EAAC,eAAe,CAAC,IAAI,EAAE,CAAC,EAGtC;IACH,CAAC;IACH,mBAAC;AAAD,CAAC,AA3CD,CAEU,oBAAa,GAyCtB;AA3CY,oCAAY;AA6CzB,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,66 @@
+"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

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,EAAE;YACL,MAAM,EAAE;gBACN,IAAI,EAAE,MAAM;gBACZ,QAAQ,EAAE,IAAI;aACf;SACF;QACD,KAAK,YAAC,KAAK;YACT,OAAO;gBACL,IAAM,QAAQ,GAA0B,EAAE,CAAA;gBAC1C,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,UAAC,EAAE;oBAC5B,gDAAgD;oBAChD,iEAAiE;oBACjE,8CAA8C;oBAC9C,4EAA4E;oBAC5E,uEAAuE;oBAEvE,iDAAiD;oBACjD,gEAAgE;oBAChE,IAAI,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;wBAChC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA;oBAC1B,CAAC;gBACH,CAAC,CAAC,CAAA;gBACF,OAAO,IAAA,YAAC,EACN,mBAAQ,EACR,EAAE,EACF,QAAQ,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,IAAA,YAAC,EAAC,IAAI,CAAC,EAAP,CAAO,CAAC,CAChC,CAAA;YACH,CAAC,CAAA;QACH,CAAC;KACF,CAAC,CAAA;AACJ,CAAC;AArCD,kCAqCC"}

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,123 @@
+"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-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 = 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.unmount();
+            this.vm = null;
+        }
+        if (root) {
+            root.innerHTML = '';
+        }
+        return root;
+    };
+    VueNodeView.prototype.unmount = function () {
+        if ((0, teleport_1.isActive)()) {
+            (0, teleport_1.disconnect)(this.targetId());
+        }
+        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

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/vue-node-registry",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "LogicFlow Vue Component Node Registry",
   "main": "lib/index.js",
   "module": "es/index.js",