@logicflow/react-node-registry 1.0.8 → 1.0.9

package/.turbo/turbo-build.log

@@ -1,17 +1,34 @@
-
-> @logicflow/react-node-registry@1.0.7 prebuild /Users/didi/Desktop/github/LogicFlow/packages/react-node-registry
-> rss
-
-> [prebuild] run-s -s clean:build 
-> [clean:build] rimraf dist es lib 
-
-> @logicflow/react-node-registry@1.0.7 build /Users/didi/Desktop/github/LogicFlow/packages/react-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/react-node-registry@1.0.9 prebuild /Users/r0ger1tlearn/WorkSpace/Github/DiDi/logicflow/packages/react-node-registry
+> rss
+
+> [prebuild] run-s -s clean:build 
+> [clean:build] rimraf dist es lib 
+
+> @logicflow/react-node-registry@1.0.9 build /Users/r0ger1tlearn/WorkSpace/Github/DiDi/logicflow/packages/react-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: ReactNodeRegistry   |
+|   External Globals:                |
+|    @logicflow/core: Core           |
+|    react: React                    |
+|    react-dom: ReactDom             |
+|                                    |
+|   Destination: dist/index.min.js   |
+|   Bundle   Size: 433 B             |
+|   Minified Size: 394 B             |
+|   GZipped  Size: 208 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.6s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @logicflow/react-node-registry
 
+## 1.0.9
+
+### Patch Changes
+
+- release react/vue-node-registry
+
 ## 1.0.8
 
 ### 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("./wrapper"),exports),e.__exportStar(require("./portal"),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 './wrapper'\nexport * from './portal'\n"],"names":["tslib_1","__exportStar","require","exports"],"mappings":"2KAAAA,EAAsBC,aAAAC,QAAA,UAAAC,SACtBH,EAAuBC,aAAAC,QAAA,WAAAC,SACvBH,EAA0BC,aAAAC,QAAA,cAAAC,SAC1BH,EAAyBC,aAAAC,QAAA,aAAAC,SACzBH,EAAwBC,aAAAC,QAAA,YAAAC"}

package/es/index.d.ts

@@ -0,0 +1,5 @@
+export * from './view';
+export * from './model';
+export * from './registry';
+export * from './wrapper';
+export * from './portal';

package/es/index.js

@@ -0,0 +1,6 @@
+export * from './view';
+export * from './model';
+export * from './registry';
+export * from './wrapper';
+export * from './portal';
+//# 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,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA"}

package/es/model.d.ts

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

package/es/model.js

@@ -0,0 +1,63 @@
+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 } from 'lodash-es';
+var ReactNodeModel = /** @class */ (function (_super) {
+    __extends(ReactNodeModel, _super);
+    function ReactNodeModel() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ReactNodeModel.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;
+        }
+    };
+    ReactNodeModel.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), (cloneDeep(textStyle) || {})), { transform: "matrix(1 0 0 1 ".concat(refX, " ").concat(refY, ")") });
+    };
+    ReactNodeModel.prototype.getNodeStyle = function () {
+        var style = _super.prototype.getNodeStyle.call(this);
+        var customNodeStyle = this.properties.style;
+        return __assign(__assign({}, style), (cloneDeep(customNodeStyle) || {}));
+    };
+    return ReactNodeModel;
+}(HtmlNodeModel));
+export { ReactNodeModel };
+export default ReactNodeModel;
+//# 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,MAAM,WAAW,CAAA;AAiBrC;IAEU,kCAAgB;IAF1B;;IA4CA,CAAC;IAzCC,sCAAa,GAAb;QACE,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QACzC,IAAA,KAA4B,IAAI,CAAC,UAAU,EAAzC,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAoB,CAAA;QACjD,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,qCAAY,GAAZ;QACE,uCAAuC;QACjC,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,qCAAY,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,qBAAC;AAAD,CAAC,AA5CD,CAEU,aAAa,GA0CtB;;AAED,eAAe,cAAc,CAAA"}

package/es/portal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare namespace Portal {
+    function connect(id: string, portal: React.ReactPortal): void;
+    function disconnect(id: string): void;
+    function isActive(): boolean;
+    function getProvider(): () => React.FunctionComponentElement<{
+        children?: React.ReactNode;
+    }>;
+}

package/es/portal.js

@@ -0,0 +1,78 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useReducer } from 'react';
+export var Portal;
+(function (Portal) {
+    var active = false;
+    var dispatch;
+    var reducer = function (state, action) {
+        var payload = action.payload;
+        switch (action.type) {
+            case 'add': {
+                var index = state.findIndex(function (item) { return item.id === payload.id; });
+                if (index >= 0) {
+                    state[index] = payload;
+                    return __spreadArray([], state, true);
+                }
+                return __spreadArray(__spreadArray([], state, true), [payload], false);
+            }
+            case 'remove': {
+                var index = state.findIndex(function (item) { return item.id === payload.id; });
+                if (index >= 0) {
+                    var result = __spreadArray([], state, true);
+                    result.splice(index, 1);
+                    return result;
+                }
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+        return state;
+    };
+    function connect(id, portal) {
+        if (active) {
+            dispatch({
+                type: 'add',
+                payload: {
+                    id: id,
+                    portal: portal,
+                },
+            });
+        }
+    }
+    Portal.connect = connect;
+    function disconnect(id) {
+        if (active) {
+            dispatch({
+                type: 'remove',
+                payload: { id: id },
+            });
+        }
+    }
+    Portal.disconnect = disconnect;
+    function isActive() {
+        return active;
+    }
+    Portal.isActive = isActive;
+    function getProvider() {
+        return function () {
+            active = true;
+            var _a = useReducer(reducer, []), items = _a[0], mutate = _a[1];
+            dispatch = mutate;
+            return React.createElement(React.Fragment, {
+                children: items.map(function (item) { return item.portal; }),
+            });
+        };
+    }
+    Portal.getProvider = getProvider;
+})(Portal || (Portal = {}));
+//# sourceMappingURL=portal.js.map

package/es/portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.js","sourceRoot":"","sources":["../src/portal.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,MAAM,KAAW,MAAM,CA4EtB;AA5ED,WAAiB,MAAM;IACrB,IAAI,MAAM,GAAG,KAAK,CAAA;IAClB,IAAI,QAAgC,CAAA;IAYpC,IAAM,OAAO,GAAG,UAAC,KAAgB,EAAE,MAAc;QAC/C,IAAM,OAAO,GAAG,MAAM,CAAC,OAAkB,CAAA;QACzC,QAAQ,MAAM,CAAC,IAAI,EAAE,CAAC;YACpB,KAAK,KAAK,CAAC,CAAC,CAAC;gBACX,IAAM,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,EAAtB,CAAsB,CAAC,CAAA;gBAC/D,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;oBACf,KAAK,CAAC,KAAK,CAAC,GAAG,OAAO,CAAA;oBACtB,yBAAW,KAAK,QAAC;gBACnB,CAAC;gBACD,uCAAW,KAAK,UAAE,OAAO,UAAC;YAC5B,CAAC;YACD,KAAK,QAAQ,CAAC,CAAC,CAAC;gBACd,IAAM,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,EAAtB,CAAsB,CAAC,CAAA;gBAC/D,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;oBACf,IAAM,MAAM,qBAAO,KAAK,OAAC,CAAA;oBACzB,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;oBACvB,OAAO,MAAM,CAAA;gBACf,CAAC;gBACD,MAAK;YACP,CAAC;YACD,OAAO,CAAC,CAAC,CAAC;gBACR,MAAK;YACP,CAAC;QACH,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC,CAAA;IAED,SAAgB,OAAO,CAAC,EAAU,EAAE,MAAyB;QAC3D,IAAI,MAAM,EAAE,CAAC;YACX,QAAQ,CAAC;gBACP,IAAI,EAAE,KAAK;gBACX,OAAO,EAAE;oBACP,EAAE,IAAA;oBACF,MAAM,QAAA;iBACP;aACF,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAVe,cAAO,UAUtB,CAAA;IAED,SAAgB,UAAU,CAAC,EAAU;QACnC,IAAI,MAAM,EAAE,CAAC;YACX,QAAQ,CAAC;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,EAAE,EAAE,IAAA,EAAE;aAChB,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAPe,iBAAU,aAOzB,CAAA;IAED,SAAgB,QAAQ;QACtB,OAAO,MAAM,CAAA;IACf,CAAC;IAFe,eAAQ,WAEvB,CAAA;IAED,SAAgB,WAAW;QACzB,OAAO;YACL,MAAM,GAAG,IAAI,CAAA;YACP,IAAA,KAAkB,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,EAAxC,KAAK,QAAA,EAAE,MAAM,QAA2B,CAAA;YAC/C,QAAQ,GAAG,MAAM,CAAA;YACjB,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE;gBACzC,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,MAAM,EAAX,CAAW,CAAC;aAC3C,CAAC,CAAA;QACJ,CAAC,CAAA;IACH,CAAC;IATe,kBAAW,cAS1B,CAAA;AACH,CAAC,EA5EgB,MAAM,KAAN,MAAM,QA4EtB"}

package/es/registry.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import LogicFlow, { BaseNodeModel, GraphModel } from '@logicflow/core';
+import RegisterConfig = LogicFlow.RegisterConfig;
+export type ReactNodeProps = {
+    node: BaseNodeModel;
+    graph: GraphModel;
+};
+export type ReactNodeConfig = {
+    type: string;
+    component: React.ComponentType<ReactNodeProps>;
+    effect?: (keyof LogicFlow.PropertiesType)[];
+} & Partial<RegisterConfig>;
+export declare const reactNodesMap: Record<string, {
+    component: React.ComponentType<ReactNodeProps>;
+    effect?: (keyof LogicFlow.PropertiesType)[];
+}>;
+export declare function register(config: ReactNodeConfig, lf: LogicFlow): void;

package/es/registry.js

@@ -0,0 +1,19 @@
+import ReactNodeView from './view';
+import ReactNodeModel from './model';
+export var reactNodesMap = {};
+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');
+    }
+    reactNodesMap[type] = {
+        component: component,
+        effect: effect,
+    };
+    lf.register({
+        type: type,
+        view: CustomNodeView || ReactNodeView,
+        model: CustomNodeModel || ReactNodeModel,
+    });
+}
+//# 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,aAAa,MAAM,QAAQ,CAAA;AAClC,OAAO,cAAc,MAAM,SAAS,CAAA;AAcpC,MAAM,CAAC,IAAM,aAAa,GAMtB,EAAE,CAAA;AAEN,MAAM,UAAU,QAAQ,CAAC,MAAuB,EAAE,EAAa;IAE3D,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,aAAa,CAAC,IAAI,CAAC,GAAG;QACpB,SAAS,WAAA;QACT,MAAM,QAAA;KACP,CAAA;IAED,EAAE,CAAC,QAAQ,CAAC;QACV,IAAI,MAAA;QACJ,IAAI,EAAE,cAAc,IAAI,aAAa;QACrC,KAAK,EAAE,eAAe,IAAI,cAAc;KACzC,CAAC,CAAA;AACJ,CAAC"}

package/es/view.d.ts

@@ -0,0 +1,13 @@
+import { Root } from 'react-dom/client';
+import { HtmlNode } from '@logicflow/core';
+export declare class ReactNodeView extends HtmlNode {
+    root?: Root;
+    protected targetId(): string;
+    componentWillUnmount(): void;
+    setHtml(rootEl: SVGForeignObjectElement): void;
+    confirmUpdate(_rootEl: SVGForeignObjectElement): void;
+    protected renderReactComponent(container: HTMLElement): void;
+    protected unmountReactComponent(): void;
+    unmount(): void;
+}
+export default ReactNodeView;

package/es/view.js

@@ -0,0 +1,78 @@
+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 { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { HtmlNode } from '@logicflow/core';
+import { Wrapper } from './wrapper';
+import { Portal } from './portal';
+import { createPortal } from 'react-dom';
+var ReactNodeView = /** @class */ (function (_super) {
+    __extends(ReactNodeView, _super);
+    function ReactNodeView() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ReactNodeView.prototype.targetId = function () {
+        return "".concat(this.props.graphModel.flowId, ":").concat(this.props.model.id);
+    };
+    ReactNodeView.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        this.unmount();
+    };
+    ReactNodeView.prototype.setHtml = function (rootEl) {
+        var el = document.createElement('div');
+        el.className = 'custom-react-node-content';
+        this.renderReactComponent(el);
+        rootEl.appendChild(el);
+    };
+    ReactNodeView.prototype.confirmUpdate = function (_rootEl) {
+        // TODO: 如有需要，可以先通过继承的方式，自定义该节点的更新逻辑；我们后续会根据实际需求，丰富该功能
+        console.log('_rootEl', _rootEl);
+    };
+    ReactNodeView.prototype.renderReactComponent = function (container) {
+        console.log('render render render ===>>>');
+        this.unmountReactComponent();
+        var _a = this.props, model = _a.model, graphModel = _a.graphModel;
+        if (container) {
+            var elem = createElement(Wrapper, {
+                node: model,
+                graph: graphModel,
+            });
+            if (Portal.isActive()) {
+                var portal = createPortal(elem, container, model.id);
+                Portal.connect(this.targetId(), portal);
+            }
+            else {
+                this.root = createRoot(container);
+                this.root.render(elem);
+            }
+        }
+    };
+    ReactNodeView.prototype.unmountReactComponent = function () {
+        if (this.rootEl && this.root) {
+            this.root.unmount();
+            this.root = undefined;
+            this.rootEl.innerHTML = '';
+        }
+    };
+    // DONE: 是否需要 unmount 或 destroy 方法，在销毁后做一些处理
+    ReactNodeView.prototype.unmount = function () {
+        this.unmountReactComponent();
+    };
+    return ReactNodeView;
+}(HtmlNode));
+export { ReactNodeView };
+export default ReactNodeView;
+//# sourceMappingURL=view.js.map

package/es/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../src/view.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAAe,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,UAAU,EAAQ,MAAM,kBAAkB,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC;IAAmC,iCAAQ;IAA3C;;IAqFA,CAAC;IAlFW,gCAAQ,GAAlB;QACE,OAAO,UAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,cAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAE,CAAA;IACjE,CAAC;IAED,4CAAoB,GAApB;QACE,gBAAK,CAAC,oBAAoB,WAAE,CAAA;QAC5B,IAAI,CAAC,OAAO,EAAE,CAAA;IAChB,CAAC;IAED,+BAAO,GAAP,UAAQ,MAA+B;QACrC,IAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QACxC,EAAE,CAAC,SAAS,GAAG,2BAA2B,CAAA;QAE1C,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAA;QAC7B,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,CAAA;IACxB,CAAC;IAED,qCAAa,GAAb,UAAc,OAAgC;QAC5C,sDAAsD;QACtD,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;IACjC,CAAC;IAES,4CAAoB,GAA9B,UAA+B,SAAsB;QACnD,OAAO,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAA;QAC1C,IAAI,CAAC,qBAAqB,EAAE,CAAA;QACtB,IAAA,KAAwB,IAAI,CAAC,KAAK,EAAhC,KAAK,WAAA,EAAE,UAAU,gBAAe,CAAA;QAExC,IAAI,SAAS,EAAE,CAAC;YACd,IAAM,IAAI,GAAG,aAAa,CAAC,OAAO,EAAE;gBAClC,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,UAAU;aAClB,CAAC,CAAA;YAEF,IAAI,MAAM,CAAC,QAAQ,EAAE,EAAE,CAAC;gBACtB,IAAM,MAAM,GAAG,YAAY,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,CAAgB,CAAA;gBACrE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,CAAC,CAAA;YACzC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,SAAS,CAAC,CAAA;gBACjC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;YACxB,CAAC;QACH,CAAC;IACH,CAAC;IAES,6CAAqB,GAA/B;QACE,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAC7B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAA;YACnB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAA;YACrB,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,EAAE,CAAA;QAC5B,CAAC;IACH,CAAC;IAED,4CAA4C;IAC5C,+BAAO,GAAP;QACE,IAAI,CAAC,qBAAqB,EAAE,CAAA;IAC9B,CAAC;IA4BH,oBAAC;AAAD,CAAC,AArFD,CAAmC,QAAQ,GAqF1C;;AAED,eAAe,aAAa,CAAA"}

package/es/wrapper.d.ts

@@ -0,0 +1,16 @@
+import React, { PureComponent } from 'react';
+import { BaseNodeModel, GraphModel } from '@logicflow/core';
+export interface IWrapperProps {
+    node: BaseNodeModel;
+    graph: GraphModel;
+}
+export interface IWrapperState {
+    tick: number;
+}
+export declare class Wrapper extends PureComponent<IWrapperProps, IWrapperState> {
+    constructor(props: IWrapperProps);
+    componentDidMount(): void;
+    clone(elem: React.ReactElement): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+}
+export default Wrapper;

package/es/wrapper.js

@@ -0,0 +1,64 @@
+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 React, { PureComponent } from 'react';
+import { EventType } from '@logicflow/core';
+import { reactNodesMap } from './registry';
+var Wrapper = /** @class */ (function (_super) {
+    __extends(Wrapper, _super);
+    function Wrapper(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = { tick: 0 };
+        return _this;
+    }
+    Wrapper.prototype.componentDidMount = function () {
+        var _this = this;
+        // TODO: 讨论设计，如果节点有「副作用」属性配置的处理逻辑
+        var _a = this.props, node = _a.node, graph = _a.graph;
+        graph.eventCenter.on(EventType.NODE_PROPERTIES_CHANGE, function (eventData) {
+            var keys = eventData.keys;
+            var content = reactNodesMap[node.type];
+            if (content && eventData.id === node.id) {
+                var effect_1 = content.effect;
+                // 如果没有定义 effect，则默认更新；如果定义了 effect，则只有在 effect 中的属性发生变化时才更新
+                if (!effect_1 || keys.some(function (key) { return effect_1.includes(key); })) {
+                    _this.setState({ tick: _this.state.tick + 1 });
+                }
+            }
+        });
+    };
+    Wrapper.prototype.clone = function (elem) {
+        var _a = this.props, node = _a.node, graph = _a.graph;
+        return typeof elem.type === 'string'
+            ? React.cloneElement(elem)
+            : React.cloneElement(elem, { node: node, graph: graph });
+    };
+    Wrapper.prototype.render = function () {
+        var node = this.props.node;
+        var content = reactNodesMap[node.type];
+        if (!content)
+            return null;
+        var component = content.component;
+        if (React.isValidElement(component)) {
+            return this.clone(component);
+        }
+        var FC = component;
+        return this.clone(React.createElement(FC, null));
+    };
+    return Wrapper;
+}(PureComponent));
+export { Wrapper };
+export default Wrapper;
+//# sourceMappingURL=wrapper.js.map

package/es/wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapper.js","sourceRoot":"","sources":["../src/wrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAiB,SAAS,EAAc,MAAM,iBAAiB,CAAA;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAW1C;IAA6B,2BAA2C;IACtE,iBAAY,KAAoB;QAC9B,YAAA,MAAK,YAAC,KAAK,CAAC,SAAA;QACZ,KAAI,CAAC,KAAK,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,CAAA;;IAC1B,CAAC;IAED,mCAAiB,GAAjB;QAAA,iBAgBC;QAfC,iCAAiC;QAC3B,IAAA,KAAkB,IAAI,CAAC,KAAK,EAA1B,IAAI,UAAA,EAAE,KAAK,WAAe,CAAA;QAClC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,SAAS,CAAC,sBAAsB,EAAE,UAAC,SAAS;YAC/D,IAAM,IAAI,GAAG,SAAS,CAAC,IAAgB,CAAA;YACvC,IAAM,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAExC,IAAI,OAAO,IAAI,SAAS,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE,CAAC;gBAChC,IAAA,QAAM,GAAK,OAAO,OAAZ,CAAY;gBAE1B,4DAA4D;gBAC5D,IAAI,CAAC,QAAM,IAAI,IAAI,CAAC,IAAI,CAAC,UAAC,GAAG,IAAK,OAAA,QAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,EAApB,CAAoB,CAAC,EAAE,CAAC;oBACxD,KAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAI,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,CAAA;gBAC9C,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,uBAAK,GAAL,UAAM,IAAwB;QACtB,IAAA,KAAkB,IAAI,CAAC,KAAK,EAA1B,IAAI,UAAA,EAAE,KAAK,WAAe,CAAA;QAElC,OAAO,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;YAClC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC;YAC1B,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,IAAI,MAAA,EAAE,KAAK,OAAA,EAAE,CAAC,CAAA;IAC/C,CAAC;IAED,wBAAM,GAAN;QACU,IAAA,IAAI,GAAK,IAAI,CAAC,KAAK,KAAf,CAAe;QAC3B,IAAM,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAExC,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAA;QAEjB,IAAA,SAAS,GAAK,OAAO,UAAZ,CAAY;QAC7B,IAAI,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC;YACpC,OAAO,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;QAC9B,CAAC;QACD,IAAM,EAAE,GAAG,SAAqB,CAAA;QAChC,OAAO,IAAI,CAAC,KAAK,CAAC,oBAAC,EAAE,OAAG,CAAC,CAAA;IAC3B,CAAC;IACH,cAAC;AAAD,CAAC,AA7CD,CAA6B,aAAa,GA6CzC;;AAED,eAAe,OAAO,CAAA"}

package/lib/index.d.ts

@@ -0,0 +1,5 @@
+export * from './view';
+export * from './model';
+export * from './registry';
+export * from './wrapper';
+export * from './portal';

package/lib/index.js

@@ -0,0 +1,22 @@
+"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("./wrapper"), exports);
+__exportStar(require("./portal"), 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,4CAAyB;AACzB,2CAAwB"}

package/lib/model.d.ts

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

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.ReactNodeModel = void 0;
+var core_1 = require("@logicflow/core");
+var lodash_es_1 = require("lodash-es");
+var ReactNodeModel = /** @class */ (function (_super) {
+    __extends(ReactNodeModel, _super);
+    function ReactNodeModel() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ReactNodeModel.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;
+        }
+    };
+    ReactNodeModel.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, ")") });
+    };
+    ReactNodeModel.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 ReactNodeModel;
+}(core_1.HtmlNodeModel));
+exports.ReactNodeModel = ReactNodeModel;
+exports.default = ReactNodeModel;
+//# 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,uCAAqC;AAiBrC;IAEU,kCAAgB;IAF1B;;IA4CA,CAAC;IAzCC,sCAAa,GAAb;QACE,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QACzC,IAAA,KAA4B,IAAI,CAAC,UAAU,EAAzC,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAoB,CAAA;QACjD,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,qCAAY,GAAZ;QACE,uCAAuC;QACjC,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,qCAAY,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,qBAAC;AAAD,CAAC,AA5CD,CAEU,oBAAa,GA0CtB;AA5CY,wCAAc;AA8C3B,kBAAe,cAAc,CAAA"}

package/lib/portal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare namespace Portal {
+    function connect(id: string, portal: React.ReactPortal): void;
+    function disconnect(id: string): void;
+    function isActive(): boolean;
+    function getProvider(): () => React.FunctionComponentElement<{
+        children?: React.ReactNode;
+    }>;
+}

package/lib/portal.js

@@ -0,0 +1,104 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Portal = void 0;
+var react_1 = __importStar(require("react"));
+var Portal;
+(function (Portal) {
+    var active = false;
+    var dispatch;
+    var reducer = function (state, action) {
+        var payload = action.payload;
+        switch (action.type) {
+            case 'add': {
+                var index = state.findIndex(function (item) { return item.id === payload.id; });
+                if (index >= 0) {
+                    state[index] = payload;
+                    return __spreadArray([], state, true);
+                }
+                return __spreadArray(__spreadArray([], state, true), [payload], false);
+            }
+            case 'remove': {
+                var index = state.findIndex(function (item) { return item.id === payload.id; });
+                if (index >= 0) {
+                    var result = __spreadArray([], state, true);
+                    result.splice(index, 1);
+                    return result;
+                }
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+        return state;
+    };
+    function connect(id, portal) {
+        if (active) {
+            dispatch({
+                type: 'add',
+                payload: {
+                    id: id,
+                    portal: portal,
+                },
+            });
+        }
+    }
+    Portal.connect = connect;
+    function disconnect(id) {
+        if (active) {
+            dispatch({
+                type: 'remove',
+                payload: { id: id },
+            });
+        }
+    }
+    Portal.disconnect = disconnect;
+    function isActive() {
+        return active;
+    }
+    Portal.isActive = isActive;
+    function getProvider() {
+        return function () {
+            active = true;
+            var _a = (0, react_1.useReducer)(reducer, []), items = _a[0], mutate = _a[1];
+            dispatch = mutate;
+            return react_1.default.createElement(react_1.default.Fragment, {
+                children: items.map(function (item) { return item.portal; }),
+            });
+        };
+    }
+    Portal.getProvider = getProvider;
+})(Portal || (exports.Portal = Portal = {}));
+//# sourceMappingURL=portal.js.map

package/lib/portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.js","sourceRoot":"","sources":["../src/portal.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAyC;AAEzC,IAAiB,MAAM,CA4EtB;AA5ED,WAAiB,MAAM;IACrB,IAAI,MAAM,GAAG,KAAK,CAAA;IAClB,IAAI,QAAgC,CAAA;IAYpC,IAAM,OAAO,GAAG,UAAC,KAAgB,EAAE,MAAc;QAC/C,IAAM,OAAO,GAAG,MAAM,CAAC,OAAkB,CAAA;QACzC,QAAQ,MAAM,CAAC,IAAI,EAAE,CAAC;YACpB,KAAK,KAAK,CAAC,CAAC,CAAC;gBACX,IAAM,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,EAAtB,CAAsB,CAAC,CAAA;gBAC/D,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;oBACf,KAAK,CAAC,KAAK,CAAC,GAAG,OAAO,CAAA;oBACtB,yBAAW,KAAK,QAAC;gBACnB,CAAC;gBACD,uCAAW,KAAK,UAAE,OAAO,UAAC;YAC5B,CAAC;YACD,KAAK,QAAQ,CAAC,CAAC,CAAC;gBACd,IAAM,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,EAAtB,CAAsB,CAAC,CAAA;gBAC/D,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;oBACf,IAAM,MAAM,qBAAO,KAAK,OAAC,CAAA;oBACzB,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;oBACvB,OAAO,MAAM,CAAA;gBACf,CAAC;gBACD,MAAK;YACP,CAAC;YACD,OAAO,CAAC,CAAC,CAAC;gBACR,MAAK;YACP,CAAC;QACH,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC,CAAA;IAED,SAAgB,OAAO,CAAC,EAAU,EAAE,MAAyB;QAC3D,IAAI,MAAM,EAAE,CAAC;YACX,QAAQ,CAAC;gBACP,IAAI,EAAE,KAAK;gBACX,OAAO,EAAE;oBACP,EAAE,IAAA;oBACF,MAAM,QAAA;iBACP;aACF,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAVe,cAAO,UAUtB,CAAA;IAED,SAAgB,UAAU,CAAC,EAAU;QACnC,IAAI,MAAM,EAAE,CAAC;YACX,QAAQ,CAAC;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,EAAE,EAAE,IAAA,EAAE;aAChB,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAPe,iBAAU,aAOzB,CAAA;IAED,SAAgB,QAAQ;QACtB,OAAO,MAAM,CAAA;IACf,CAAC;IAFe,eAAQ,WAEvB,CAAA;IAED,SAAgB,WAAW;QACzB,OAAO;YACL,MAAM,GAAG,IAAI,CAAA;YACP,IAAA,KAAkB,IAAA,kBAAU,EAAC,OAAO,EAAE,EAAE,CAAC,EAAxC,KAAK,QAAA,EAAE,MAAM,QAA2B,CAAA;YAC/C,QAAQ,GAAG,MAAM,CAAA;YACjB,OAAO,eAAK,CAAC,aAAa,CAAC,eAAK,CAAC,QAAQ,EAAE;gBACzC,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,MAAM,EAAX,CAAW,CAAC;aAC3C,CAAC,CAAA;QACJ,CAAC,CAAA;IACH,CAAC;IATe,kBAAW,cAS1B,CAAA;AACH,CAAC,EA5EgB,MAAM,sBAAN,MAAM,QA4EtB"}

package/lib/registry.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import LogicFlow, { BaseNodeModel, GraphModel } from '@logicflow/core';
+import RegisterConfig = LogicFlow.RegisterConfig;
+export type ReactNodeProps = {
+    node: BaseNodeModel;
+    graph: GraphModel;
+};
+export type ReactNodeConfig = {
+    type: string;
+    component: React.ComponentType<ReactNodeProps>;
+    effect?: (keyof LogicFlow.PropertiesType)[];
+} & Partial<RegisterConfig>;
+export declare const reactNodesMap: Record<string, {
+    component: React.ComponentType<ReactNodeProps>;
+    effect?: (keyof LogicFlow.PropertiesType)[];
+}>;
+export declare function register(config: ReactNodeConfig, lf: LogicFlow): void;

package/lib/registry.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.register = exports.reactNodesMap = void 0;
+var view_1 = __importDefault(require("./view"));
+var model_1 = __importDefault(require("./model"));
+exports.reactNodesMap = {};
+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.reactNodesMap[type] = {
+        component: component,
+        effect: effect,
+    };
+    lf.register({
+        type: type,
+        view: CustomNodeView || view_1.default,
+        model: CustomNodeModel || model_1.default,
+    });
+}
+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,gDAAkC;AAClC,kDAAoC;AAcvB,QAAA,aAAa,GAMtB,EAAE,CAAA;AAEN,SAAgB,QAAQ,CAAC,MAAuB,EAAE,EAAa;IAE3D,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,qBAAa,CAAC,IAAI,CAAC,GAAG;QACpB,SAAS,WAAA;QACT,MAAM,QAAA;KACP,CAAA;IAED,EAAE,CAAC,QAAQ,CAAC;QACV,IAAI,MAAA;QACJ,IAAI,EAAE,cAAc,IAAI,cAAa;QACrC,KAAK,EAAE,eAAe,IAAI,eAAc;KACzC,CAAC,CAAA;AACJ,CAAC;AAtBD,4BAsBC"}

package/lib/view.d.ts

@@ -0,0 +1,13 @@
+import { Root } from 'react-dom/client';
+import { HtmlNode } from '@logicflow/core';
+export declare class ReactNodeView extends HtmlNode {
+    root?: Root;
+    protected targetId(): string;
+    componentWillUnmount(): void;
+    setHtml(rootEl: SVGForeignObjectElement): void;
+    confirmUpdate(_rootEl: SVGForeignObjectElement): void;
+    protected renderReactComponent(container: HTMLElement): void;
+    protected unmountReactComponent(): void;
+    unmount(): void;
+}
+export default ReactNodeView;

package/lib/view.js

@@ -0,0 +1,81 @@
+"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.ReactNodeView = void 0;
+var react_1 = require("react");
+var client_1 = require("react-dom/client");
+var core_1 = require("@logicflow/core");
+var wrapper_1 = require("./wrapper");
+var portal_1 = require("./portal");
+var react_dom_1 = require("react-dom");
+var ReactNodeView = /** @class */ (function (_super) {
+    __extends(ReactNodeView, _super);
+    function ReactNodeView() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ReactNodeView.prototype.targetId = function () {
+        return "".concat(this.props.graphModel.flowId, ":").concat(this.props.model.id);
+    };
+    ReactNodeView.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        this.unmount();
+    };
+    ReactNodeView.prototype.setHtml = function (rootEl) {
+        var el = document.createElement('div');
+        el.className = 'custom-react-node-content';
+        this.renderReactComponent(el);
+        rootEl.appendChild(el);
+    };
+    ReactNodeView.prototype.confirmUpdate = function (_rootEl) {
+        // TODO: 如有需要，可以先通过继承的方式，自定义该节点的更新逻辑；我们后续会根据实际需求，丰富该功能
+        console.log('_rootEl', _rootEl);
+    };
+    ReactNodeView.prototype.renderReactComponent = function (container) {
+        console.log('render render render ===>>>');
+        this.unmountReactComponent();
+        var _a = this.props, model = _a.model, graphModel = _a.graphModel;
+        if (container) {
+            var elem = (0, react_1.createElement)(wrapper_1.Wrapper, {
+                node: model,
+                graph: graphModel,
+            });
+            if (portal_1.Portal.isActive()) {
+                var portal = (0, react_dom_1.createPortal)(elem, container, model.id);
+                portal_1.Portal.connect(this.targetId(), portal);
+            }
+            else {
+                this.root = (0, client_1.createRoot)(container);
+                this.root.render(elem);
+            }
+        }
+    };
+    ReactNodeView.prototype.unmountReactComponent = function () {
+        if (this.rootEl && this.root) {
+            this.root.unmount();
+            this.root = undefined;
+            this.rootEl.innerHTML = '';
+        }
+    };
+    // DONE: 是否需要 unmount 或 destroy 方法，在销毁后做一些处理
+    ReactNodeView.prototype.unmount = function () {
+        this.unmountReactComponent();
+    };
+    return ReactNodeView;
+}(core_1.HtmlNode));
+exports.ReactNodeView = ReactNodeView;
+exports.default = ReactNodeView;
+//# sourceMappingURL=view.js.map

package/lib/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../src/view.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,+BAAkD;AAClD,2CAAmD;AACnD,wCAA0C;AAC1C,qCAAmC;AACnC,mCAAiC;AACjC,uCAAwC;AAExC;IAAmC,iCAAQ;IAA3C;;IAqFA,CAAC;IAlFW,gCAAQ,GAAlB;QACE,OAAO,UAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,cAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAE,CAAA;IACjE,CAAC;IAED,4CAAoB,GAApB;QACE,gBAAK,CAAC,oBAAoB,WAAE,CAAA;QAC5B,IAAI,CAAC,OAAO,EAAE,CAAA;IAChB,CAAC;IAED,+BAAO,GAAP,UAAQ,MAA+B;QACrC,IAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QACxC,EAAE,CAAC,SAAS,GAAG,2BAA2B,CAAA;QAE1C,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAA;QAC7B,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,CAAA;IACxB,CAAC;IAED,qCAAa,GAAb,UAAc,OAAgC;QAC5C,sDAAsD;QACtD,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;IACjC,CAAC;IAES,4CAAoB,GAA9B,UAA+B,SAAsB;QACnD,OAAO,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAA;QAC1C,IAAI,CAAC,qBAAqB,EAAE,CAAA;QACtB,IAAA,KAAwB,IAAI,CAAC,KAAK,EAAhC,KAAK,WAAA,EAAE,UAAU,gBAAe,CAAA;QAExC,IAAI,SAAS,EAAE,CAAC;YACd,IAAM,IAAI,GAAG,IAAA,qBAAa,EAAC,iBAAO,EAAE;gBAClC,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,UAAU;aAClB,CAAC,CAAA;YAEF,IAAI,eAAM,CAAC,QAAQ,EAAE,EAAE,CAAC;gBACtB,IAAM,MAAM,GAAG,IAAA,wBAAY,EAAC,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,CAAgB,CAAA;gBACrE,eAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,CAAC,CAAA;YACzC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,GAAG,IAAA,mBAAU,EAAC,SAAS,CAAC,CAAA;gBACjC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;YACxB,CAAC;QACH,CAAC;IACH,CAAC;IAES,6CAAqB,GAA/B;QACE,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAC7B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAA;YACnB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAA;YACrB,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,EAAE,CAAA;QAC5B,CAAC;IACH,CAAC;IAED,4CAA4C;IAC5C,+BAAO,GAAP;QACE,IAAI,CAAC,qBAAqB,EAAE,CAAA;IAC9B,CAAC;IA4BH,oBAAC;AAAD,CAAC,AArFD,CAAmC,eAAQ,GAqF1C;AArFY,sCAAa;AAuF1B,kBAAe,aAAa,CAAA"}

package/lib/wrapper.d.ts

@@ -0,0 +1,16 @@
+import React, { PureComponent } from 'react';
+import { BaseNodeModel, GraphModel } from '@logicflow/core';
+export interface IWrapperProps {
+    node: BaseNodeModel;
+    graph: GraphModel;
+}
+export interface IWrapperState {
+    tick: number;
+}
+export declare class Wrapper extends PureComponent<IWrapperProps, IWrapperState> {
+    constructor(props: IWrapperProps);
+    componentDidMount(): void;
+    clone(elem: React.ReactElement): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+}
+export default Wrapper;

package/lib/wrapper.js

@@ -0,0 +1,90 @@
+"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 __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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = void 0;
+var react_1 = __importStar(require("react"));
+var core_1 = require("@logicflow/core");
+var registry_1 = require("./registry");
+var Wrapper = /** @class */ (function (_super) {
+    __extends(Wrapper, _super);
+    function Wrapper(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = { tick: 0 };
+        return _this;
+    }
+    Wrapper.prototype.componentDidMount = function () {
+        var _this = this;
+        // TODO: 讨论设计，如果节点有「副作用」属性配置的处理逻辑
+        var _a = this.props, node = _a.node, graph = _a.graph;
+        graph.eventCenter.on(core_1.EventType.NODE_PROPERTIES_CHANGE, function (eventData) {
+            var keys = eventData.keys;
+            var content = registry_1.reactNodesMap[node.type];
+            if (content && eventData.id === node.id) {
+                var effect_1 = content.effect;
+                // 如果没有定义 effect，则默认更新；如果定义了 effect，则只有在 effect 中的属性发生变化时才更新
+                if (!effect_1 || keys.some(function (key) { return effect_1.includes(key); })) {
+                    _this.setState({ tick: _this.state.tick + 1 });
+                }
+            }
+        });
+    };
+    Wrapper.prototype.clone = function (elem) {
+        var _a = this.props, node = _a.node, graph = _a.graph;
+        return typeof elem.type === 'string'
+            ? react_1.default.cloneElement(elem)
+            : react_1.default.cloneElement(elem, { node: node, graph: graph });
+    };
+    Wrapper.prototype.render = function () {
+        var node = this.props.node;
+        var content = registry_1.reactNodesMap[node.type];
+        if (!content)
+            return null;
+        var component = content.component;
+        if (react_1.default.isValidElement(component)) {
+            return this.clone(component);
+        }
+        var FC = component;
+        return this.clone(react_1.default.createElement(FC, null));
+    };
+    return Wrapper;
+}(react_1.PureComponent));
+exports.Wrapper = Wrapper;
+exports.default = Wrapper;
+//# sourceMappingURL=wrapper.js.map

package/lib/wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapper.js","sourceRoot":"","sources":["../src/wrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA4C;AAC5C,wCAAsE;AACtE,uCAA0C;AAW1C;IAA6B,2BAA2C;IACtE,iBAAY,KAAoB;QAC9B,YAAA,MAAK,YAAC,KAAK,CAAC,SAAA;QACZ,KAAI,CAAC,KAAK,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,CAAA;;IAC1B,CAAC;IAED,mCAAiB,GAAjB;QAAA,iBAgBC;QAfC,iCAAiC;QAC3B,IAAA,KAAkB,IAAI,CAAC,KAAK,EAA1B,IAAI,UAAA,EAAE,KAAK,WAAe,CAAA;QAClC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,gBAAS,CAAC,sBAAsB,EAAE,UAAC,SAAS;YAC/D,IAAM,IAAI,GAAG,SAAS,CAAC,IAAgB,CAAA;YACvC,IAAM,OAAO,GAAG,wBAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAExC,IAAI,OAAO,IAAI,SAAS,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE,CAAC;gBAChC,IAAA,QAAM,GAAK,OAAO,OAAZ,CAAY;gBAE1B,4DAA4D;gBAC5D,IAAI,CAAC,QAAM,IAAI,IAAI,CAAC,IAAI,CAAC,UAAC,GAAG,IAAK,OAAA,QAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,EAApB,CAAoB,CAAC,EAAE,CAAC;oBACxD,KAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAI,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,CAAA;gBAC9C,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,uBAAK,GAAL,UAAM,IAAwB;QACtB,IAAA,KAAkB,IAAI,CAAC,KAAK,EAA1B,IAAI,UAAA,EAAE,KAAK,WAAe,CAAA;QAElC,OAAO,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;YAClC,CAAC,CAAC,eAAK,CAAC,YAAY,CAAC,IAAI,CAAC;YAC1B,CAAC,CAAC,eAAK,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,IAAI,MAAA,EAAE,KAAK,OAAA,EAAE,CAAC,CAAA;IAC/C,CAAC;IAED,wBAAM,GAAN;QACU,IAAA,IAAI,GAAK,IAAI,CAAC,KAAK,KAAf,CAAe;QAC3B,IAAM,OAAO,GAAG,wBAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAExC,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAA;QAEjB,IAAA,SAAS,GAAK,OAAO,UAAZ,CAAY;QAC7B,IAAI,eAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC;YACpC,OAAO,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;QAC9B,CAAC;QACD,IAAM,EAAE,GAAG,SAAqB,CAAA;QAChC,OAAO,IAAI,CAAC,KAAK,CAAC,8BAAC,EAAE,OAAG,CAAC,CAAA;IAC3B,CAAC;IACH,cAAC;AAAD,CAAC,AA7CD,CAA6B,qBAAa,GA6CzC;AA7CY,0BAAO;AA+CpB,kBAAe,OAAO,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/react-node-registry",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "LogicFlow React Shape",
   "main": "lib/index.js",
   "module": "es/index.js",