@sunspirytus/xflow-core 1.0.52

package/lib/xflow-main/graph/graph-provider.js

@@ -0,0 +1,259 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerGraphModule = exports.GraphManager = exports.IModelServiceProvider = exports.ICommandServiceProvider = exports.IGraphProvider = void 0;
+var tslib_1 = require("tslib");
+var react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+var x6_1 = require("@antv/x6");
+var disposable_1 = require("../../common/disposable");
+var deferred_1 = require("../../common/deferred");
+var config_1 = require("./config");
+var mana_syringe_1 = require("mana-syringe");
+var command_1 = require("../../command");
+var interface_1 = require("../../model-service/interface");
+var hooks_1 = require("../../hooks");
+var context_1 = require("../../command-contributions/components/context");
+var constants_1 = require("../../constants");
+/** !!! 所有需要使用Graph相关信息的地方, 都统一使用IGraphProvider来获取 */
+exports.IGraphProvider = Symbol('IGraphProvider');
+exports.ICommandServiceProvider = Symbol('ICommandServiceProvider');
+exports.IModelServiceProvider = Symbol('IModelServiceProvider');
+var GraphManager = /** @class */ (function () {
+    function GraphManager() {
+        var _this = this;
+        /** 处理画布实例的销毁 */
+        this.toDispose = new disposable_1.DisposableCollection();
+        /** 储存画布实例 */
+        this.graphMap = new Map();
+        /** 获取X6 Graph 实例 */
+        this.getGraph = function (graphId) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            var graphDefer, options_1, hooks_2, mergedOptions, graphContainer, edgeRender, nodeRender, edgeTypeParser_1, edgeRenderMap_1, clientHeight, clientWidth, commandService_1, modelService_1, graph_1;
+            var _this = this;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        graphDefer = this.graphMap.get(graphId);
+                        if (!!graphDefer) return [3 /*break*/, 8];
+                        graphDefer = new deferred_1.Deferred();
+                        this.graphMap.set(graphId, graphDefer);
+                        return [4 /*yield*/, this.optionProvider.getOptions()
+                            /** 获取hooks实例： hooks方便其他组件可以修改注册graphOpions/events */
+                        ];
+                    case 1:
+                        options_1 = _a.sent();
+                        hooks_2 = this.hookService.hookProvider();
+                        return [4 /*yield*/, hooks_2.graphOptions.call(options_1.x6Options)];
+                    case 2:
+                        mergedOptions = _a.sent();
+                        graphContainer = options_1.graphContainer, edgeRender = options_1.edgeRender, nodeRender = options_1.nodeRender, edgeTypeParser_1 = options_1.edgeTypeParser;
+                        return [4 /*yield*/, hooks_2.reactEdgeLabelRender.call(edgeRender)
+                            /** 执行hooks：更新nodeRender */
+                        ];
+                    case 3:
+                        edgeRenderMap_1 = _a.sent();
+                        /** 执行hooks：更新nodeRender */
+                        return [4 /*yield*/, hooks_2.reactNodeRender.call(nodeRender)];
+                    case 4:
+                        /** 执行hooks：更新nodeRender */
+                        _a.sent();
+                        clientHeight = graphContainer.clientHeight, clientWidth = graphContainer.clientWidth;
+                        return [4 /*yield*/, this.commandServiceProvider.getCommandService()];
+                    case 5:
+                        commandService_1 = _a.sent();
+                        return [4 /*yield*/, this.modelServiceProvider.getModelService()
+                            /** 实例化 X6 Graph */
+                        ];
+                    case 6:
+                        modelService_1 = _a.sent();
+                        graph_1 = new x6_1.Graph(tslib_1.__assign(tslib_1.__assign({ container: graphContainer, width: clientWidth, height: clientHeight }, mergedOptions), { 
+                            /** X6提供了边渲染的钩子, 可以在这里设置边上需要渲染的React内容 */
+                            onEdgeLabelRendered: function (args) {
+                                var edge = args.edge, container = args.container;
+                                _this.renderEdgeReactLabel({
+                                    edge: edge,
+                                    container: container,
+                                    edgeRenderMap: edgeRenderMap_1,
+                                    edgeTypeParser: edgeTypeParser_1,
+                                    modelService: modelService_1,
+                                    commandService: commandService_1,
+                                });
+                            } }));
+                        /** 执行hooks：绑定事件执行api */
+                        return [4 /*yield*/, hooks_2.afterGraphInit.call({
+                                graph: graph_1,
+                                commandService: commandService_1,
+                                modelService: modelService_1,
+                                options: options_1,
+                            })];
+                    case 7:
+                        /** 执行hooks：绑定事件执行api */
+                        _a.sent();
+                        graphDefer.resolve(graph_1);
+                        graph_1.on('node:moved', function (_a) {
+                            var node = _a.node;
+                            var nodeData = node.getData();
+                            var position = node.position();
+                            node.setData(tslib_1.__assign(tslib_1.__assign({}, nodeData), { x: position === null || position === void 0 ? void 0 : position.x, y: position === null || position === void 0 ? void 0 : position.y }));
+                        });
+                        graph_1.on('node:resized', function (_a) {
+                            var node = _a.node;
+                            var nodeData = node.getData();
+                            var size = node.size();
+                            node.setData(tslib_1.__assign(tslib_1.__assign({}, nodeData), { width: size === null || size === void 0 ? void 0 : size.width, height: size === null || size === void 0 ? void 0 : size.height }));
+                        });
+                        this.toDispose.push(disposable_1.Disposable.create(function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                            return tslib_1.__generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, hooks_2.beforeGraphDestroy.call({
+                                            graph: graph_1,
+                                            commandService: commandService_1,
+                                            modelService: modelService_1,
+                                            options: options_1,
+                                        })];
+                                    case 1:
+                                        _a.sent();
+                                        this.graphMap.delete(graphId);
+                                        graph_1.dispose();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); }));
+                        _a.label = 8;
+                    case 8: return [2 /*return*/, graphDefer.promise];
+                }
+            });
+        }); };
+        this.renderEdgeReactLabel = function (args) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            var container, edgeTypeParser, edge, edgeRenderMap, commandService, modelService, renderKey, reactComponent, content, WrappedReactComponent;
+            return tslib_1.__generator(this, function (_a) {
+                container = args.container, edgeTypeParser = args.edgeTypeParser, edge = args.edge, edgeRenderMap = args.edgeRenderMap, commandService = args.commandService, modelService = args.modelService;
+                renderKey = edgeTypeParser(edge === null || edge === void 0 ? void 0 : edge.data) || constants_1.XFLOW_DEFAULT_EDGE;
+                reactComponent = edgeRenderMap.get(renderKey);
+                if (!reactComponent) {
+                    return [2 /*return*/];
+                }
+                if (edge && (edge === null || edge === void 0 ? void 0 : edge.data) && reactComponent) {
+                    content = this.edgeAppendForeignObject(edge, container);
+                    WrappedReactComponent = (0, context_1.getEdgeReactComponent)(reactComponent, commandService, modelService)(edge);
+                    react_dom_1.default.render(WrappedReactComponent, content);
+                }
+                return [2 /*return*/];
+            });
+        }); };
+    }
+    /** 实现在连线上渲染React节点 */
+    GraphManager.prototype.edgeAppendForeignObject = function (x6Edge, container) {
+        var fo = x6_1.Dom.createSvgElement('foreignObject');
+        var body = x6_1.Dom.createElementNS('body', x6_1.Dom.ns.xhtml);
+        var content = x6_1.Dom.createElementNS('div', x6_1.Dom.ns.xhtml);
+        var edgeData = x6Edge === null || x6Edge === void 0 ? void 0 : x6Edge.data;
+        var foWidth = (edgeData === null || edgeData === void 0 ? void 0 : edgeData.edgeContentWidth) || 100;
+        var foHeight = (edgeData === null || edgeData === void 0 ? void 0 : edgeData.edgeContentHeight) || 30;
+        fo.setAttribute('width', "".concat(foWidth));
+        fo.setAttribute('height', "".concat(foHeight));
+        fo.setAttribute('x', "".concat((-1.0 * foWidth) / 2));
+        fo.setAttribute('y', "".concat((-1.0 * foHeight) / 2));
+        body.setAttribute('xhtmls', x6_1.Dom.ns.xhtml);
+        body.style.width = '100%';
+        body.style.height = '100%';
+        body.style.padding = '0';
+        body.style.margin = '0';
+        body.style.background = 'unset';
+        body.style.overflow = 'visible';
+        body.className = 'xflow-edge-label-body';
+        content.style.width = '100%';
+        content.style.height = '100%';
+        body.appendChild(content);
+        fo.appendChild(body);
+        container.appendChild(fo);
+        return content;
+    };
+    GraphManager.prototype.dispose = function () {
+        this.toDispose.dispose();
+    };
+    tslib_1.__decorate([
+        (0, mana_syringe_1.inject)(config_1.IGraphOptionProvider),
+        tslib_1.__metadata("design:type", Object)
+    ], GraphManager.prototype, "optionProvider", void 0);
+    tslib_1.__decorate([
+        (0, mana_syringe_1.inject)(hooks_1.IHookService),
+        tslib_1.__metadata("design:type", Object)
+    ], GraphManager.prototype, "hookService", void 0);
+    tslib_1.__decorate([
+        (0, mana_syringe_1.inject)(exports.ICommandServiceProvider),
+        tslib_1.__metadata("design:type", Object)
+    ], GraphManager.prototype, "commandServiceProvider", void 0);
+    tslib_1.__decorate([
+        (0, mana_syringe_1.inject)(exports.IModelServiceProvider),
+        tslib_1.__metadata("design:type", Object)
+    ], GraphManager.prototype, "modelServiceProvider", void 0);
+    GraphManager = tslib_1.__decorate([
+        (0, mana_syringe_1.singleton)()
+    ], GraphManager);
+    return GraphManager;
+}());
+exports.GraphManager = GraphManager;
+var registerGraphModule = function (register) {
+    /** 注册GraphManager */
+    register(GraphManager);
+    register(exports.IGraphProvider, {
+        lifecycle: mana_syringe_1.Syringe.Lifecycle.singleton,
+        useDynamic: function (context) {
+            return {
+                getGraphInstance: function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+                    var graphManager, graphOptionProvider, graphConfig, x6Graph;
+                    return tslib_1.__generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                graphManager = context.container.get(GraphManager);
+                                graphOptionProvider = context.container.get(config_1.IGraphOptionProvider);
+                                return [4 /*yield*/, (graphOptionProvider === null || graphOptionProvider === void 0 ? void 0 : graphOptionProvider.getOptions())];
+                            case 1:
+                                graphConfig = _a.sent();
+                                return [4 /*yield*/, (graphManager === null || graphManager === void 0 ? void 0 : graphManager.getGraph(graphConfig.graphId))];
+                            case 2:
+                                x6Graph = _a.sent();
+                                return [2 /*return*/, x6Graph];
+                        }
+                    });
+                }); },
+                getGraphOptions: function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+                    var graphOptionProvider;
+                    return tslib_1.__generator(this, function (_a) {
+                        graphOptionProvider = context.container.get(config_1.IGraphOptionProvider);
+                        return [2 /*return*/, graphOptionProvider === null || graphOptionProvider === void 0 ? void 0 : graphOptionProvider.getOptions()];
+                    });
+                }); },
+            };
+        },
+    });
+    register(exports.ICommandServiceProvider, {
+        lifecycle: mana_syringe_1.Syringe.Lifecycle.singleton,
+        useDynamic: function (context) {
+            return {
+                getCommandService: function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+                    var commandService;
+                    return tslib_1.__generator(this, function (_a) {
+                        commandService = context.container.get(command_1.IGraphCommandService);
+                        return [2 /*return*/, commandService];
+                    });
+                }); },
+            };
+        },
+    });
+    register(exports.IModelServiceProvider, {
+        lifecycle: mana_syringe_1.Syringe.Lifecycle.singleton,
+        useDynamic: function (context) {
+            return {
+                getModelService: function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+                    var modelService;
+                    return tslib_1.__generator(this, function (_a) {
+                        modelService = context.container.get(interface_1.IModelService);
+                        return [2 /*return*/, modelService];
+                    });
+                }); },
+            };
+        },
+    });
+};
+exports.registerGraphModule = registerGraphModule;
+//# sourceMappingURL=graph-provider.js.map

package/lib/xflow-main/graph/graph-provider.js.map

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

package/lib/xflow-main/graph/index.d.ts

@@ -0,0 +1,4 @@
+import { createGraphConfig, IGraphConfig, GraphConfig } from './config';
+import { IGraphProvider } from './graph-provider';
+import { createX6GraphModule } from './module';
+export { createX6GraphModule, createGraphConfig, IGraphConfig, IGraphProvider, GraphConfig };

package/lib/xflow-main/graph/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GraphConfig = exports.IGraphProvider = exports.createGraphConfig = exports.createX6GraphModule = void 0;
+var config_1 = require("./config");
+Object.defineProperty(exports, "createGraphConfig", { enumerable: true, get: function () { return config_1.createGraphConfig; } });
+Object.defineProperty(exports, "GraphConfig", { enumerable: true, get: function () { return config_1.GraphConfig; } });
+var graph_provider_1 = require("./graph-provider");
+Object.defineProperty(exports, "IGraphProvider", { enumerable: true, get: function () { return graph_provider_1.IGraphProvider; } });
+var module_1 = require("./module");
+Object.defineProperty(exports, "createX6GraphModule", { enumerable: true, get: function () { return module_1.createX6GraphModule; } });
+//# sourceMappingURL=index.js.map

package/lib/xflow-main/graph/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/xflow-main/graph/index.ts"],"names":[],"mappings":";;;AAAA,mCAAuE;AAKzC,kGALrB,0BAAiB,OAKqB;AAAgC,4FALrC,oBAAW,OAKqC;AAJ1F,mDAAiD;AAIc,+FAJtD,+BAAc,OAIsD;AAF7E,mCAA8C;AAErC,oGAFA,4BAAmB,OAEA"}

package/lib/xflow-main/graph/module.d.ts

@@ -0,0 +1,4 @@
+import 'reflect-metadata';
+import type { GraphConfig } from './config';
+/** 依赖扩展模块，必须要加载 */
+export declare const createX6GraphModule: (config: GraphConfig) => import("mana-syringe").SyringeModule;

package/lib/xflow-main/graph/module.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createX6GraphModule = void 0;
+/* eslint-disable @typescript-eslint/no-redeclare */
+require("reflect-metadata");
+/** Application 扩展依赖 */
+var graph_provider_1 = require("./graph-provider");
+var config_1 = require("./config");
+var mana_syringe_1 = require("mana-syringe");
+/** 依赖扩展模块，必须要加载 */
+var createX6GraphModule = function (config) {
+    return (0, mana_syringe_1.Module)(function (register) {
+        /** 注册 GraphProvider */
+        (0, graph_provider_1.registerGraphModule)(register);
+        /** 注册 GraphProvider 配置 */
+        (0, config_1.registerGraphConfig)(register, config);
+    });
+};
+exports.createX6GraphModule = createX6GraphModule;
+//# sourceMappingURL=module.js.map

package/lib/xflow-main/graph/module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.js","sourceRoot":"","sources":["../../../src/xflow-main/graph/module.ts"],"names":[],"mappings":";;;AAAA,oDAAoD;AACpD,4BAAyB;AACzB,uBAAuB;AACvB,mDAAsD;AAEtD,mCAA8C;AAC9C,6CAAqC;AAErC,mBAAmB;AACZ,IAAM,mBAAmB,GAAG,UAAC,MAAmB;IACrD,OAAO,IAAA,qBAAM,EAAC,UAAA,QAAQ;QACpB,uBAAuB;QACvB,IAAA,oCAAmB,EAAC,QAAQ,CAAC,CAAA;QAC7B,0BAA0B;QAC1B,IAAA,4BAAmB,EAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IACvC,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAPY,QAAA,mBAAmB,uBAO/B"}

package/lib/xflow-main/graph/react-group-node/index.css

@@ -0,0 +1,44 @@
+.xflow-default-group-node {
+  z-index: 9;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.65);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 4px;
+  box-shadow: rgb(17 49 96 / 12%) 0px 1px 3px 0px, rgb(17 49 96 / 4%) 0px 0px 0px 1px;
+  cursor: grab;
+}
+.xflow-default-group-node:hover {
+  background-color: rgba(227, 244, 255, 0.45);
+  border: 1px solid #c1cdf7;
+  box-shadow: 0 0 3px 3px rgba(64, 169, 255, 0.2);
+  cursor: move;
+}
+.xflow-default-group-node .xflow-group-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 12px;
+  font-size: 14px;
+  line-height: 38px;
+}
+.xflow-default-group-node .xflow-group-header .header-left {
+  width: 80%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.xflow-default-group-node .xflow-group-header .header-right {
+  display: inline-flex;
+  align-items: center;
+}
+.xflow-default-group-node .xflow-group-header .header-right span.anticon {
+  margin-left: 8px;
+}
+.x6-node-selected .xflow-default-group-node {
+  background-color: rgba(243, 249, 255, 0.92);
+  border: 1px solid #c1cdf7;
+  box-shadow: 0 0 3px 3px rgba(64, 169, 255, 0.2);
+}
+.x6-node-selected .xflow-default-group-node:hover {
+  background-color: rgba(243, 249, 255, 0.6);
+}

package/lib/xflow-main/graph/react-group-node/index.d.ts

@@ -0,0 +1,2 @@
+import type { NsGraph } from '../../../interface';
+export declare const XFlowDefaultGroupNode: NsGraph.INodeRender;

package/lib/xflow-main/graph/react-group-node/index.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XFlowDefaultGroupNode = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var icons_1 = require("@ant-design/icons");
+var app_context_1 = require("../../components/app-context");
+var constant_1 = require("../../../command-contributions/constant");
+var XFlowDefaultGroupNode = function (props) {
+    var cell = props.cell;
+    var app = (0, app_context_1.useXFlowApp)();
+    var isCollapsed = props.data.isCollapsed || false;
+    var onExpand = function (e) {
+        e.preventDefault();
+        app.executeCommand(constant_1.XFlowGroupCommands.COLLAPSE_GROUP.id, {
+            nodeId: cell.id,
+            isCollapsed: false,
+        });
+    };
+    var onCollapse = function (e) {
+        e.preventDefault();
+        app.executeCommand(constant_1.XFlowGroupCommands.COLLAPSE_GROUP.id, {
+            nodeId: cell.id,
+            isCollapsed: true,
+            gap: 3,
+        });
+    };
+    return (react_1.default.createElement("div", { className: "xflow-default-group-node" },
+        react_1.default.createElement("div", { className: "xflow-group-header" },
+            react_1.default.createElement("div", { className: "header-left" }, props.data.label),
+            react_1.default.createElement("div", { className: "header-right" },
+                isCollapsed && react_1.default.createElement(icons_1.PlusSquareOutlined, { onClick: onExpand }),
+                !isCollapsed && react_1.default.createElement(icons_1.MinusSquareOutlined, { onClick: onCollapse })))));
+};
+exports.XFlowDefaultGroupNode = XFlowDefaultGroupNode;
+exports.XFlowDefaultGroupNode.displayName = 'XFlowDefaultGroupNode';
+//# sourceMappingURL=index.js.map

package/lib/xflow-main/graph/react-group-node/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/xflow-main/graph/react-group-node/index.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,2CAA2E;AAE3E,4DAA0D;AAC1D,oEAA4E;AACrE,IAAM,qBAAqB,GAAwB,UAAA,KAAK;IACrD,IAAA,IAAI,GAAK,KAAK,KAAV,CAAU;IACtB,IAAM,GAAG,GAAG,IAAA,yBAAW,GAAE,CAAA;IACzB,IAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,WAAW,IAAI,KAAK,CAAA;IACnD,IAAM,QAAQ,GAAG,UAAC,CAAmB;QACnC,CAAC,CAAC,cAAc,EAAE,CAAA;QAClB,GAAG,CAAC,cAAc,CAAC,6BAAkB,CAAC,cAAc,CAAC,EAAE,EAAE;YACvD,MAAM,EAAE,IAAI,CAAC,EAAE;YACf,WAAW,EAAE,KAAK;SACnB,CAAC,CAAA;IACJ,CAAC,CAAA;IACD,IAAM,UAAU,GAAG,UAAC,CAAmB;QACrC,CAAC,CAAC,cAAc,EAAE,CAAA;QAClB,GAAG,CAAC,cAAc,CAAC,6BAAkB,CAAC,cAAc,CAAC,EAAE,EAAE;YACvD,MAAM,EAAE,IAAI,CAAC,EAAE;YACf,WAAW,EAAE,IAAI;YACjB,GAAG,EAAE,CAAC;SACP,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,OAAO,CACL,uCAAK,SAAS,EAAC,0BAA0B;QACvC,uCAAK,SAAS,EAAC,oBAAoB;YACjC,uCAAK,SAAS,EAAC,aAAa,IAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAO;YACrD,uCAAK,SAAS,EAAC,cAAc;gBAC1B,WAAW,IAAI,8BAAC,0BAAkB,IAAC,OAAO,EAAE,QAAQ,GAAI;gBACxD,CAAC,WAAW,IAAI,8BAAC,2BAAmB,IAAC,OAAO,EAAE,UAAU,GAAI,CACzD,CACF,CACF,CACP,CAAA;AACH,CAAC,CAAA;AA/BY,QAAA,qBAAqB,yBA+BjC;AAED,6BAAqB,CAAC,WAAW,GAAG,uBAAuB,CAAA"}

package/lib/xflow-main/graph/react-group-node/index.less

@@ -0,0 +1,50 @@
+@light-border: 1px solid #d9d9d9;
+@primaryColor: #c1cdf7;
+
+.xflow-default-group-node {
+  z-index: 9;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.65);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 4px;
+  box-shadow: ~'rgb(17 49 96 / 12%) 0px 1px 3px 0px, rgb(17 49 96 / 4%) 0px 0px 0px 1px';
+  cursor: grab;
+  &:hover {
+    background-color: rgba(227, 244, 255, 0.45);
+    border: 1px solid @primaryColor;
+    box-shadow: 0 0 3px 3px rgba(64, 169, 255, 0.2);
+    cursor: move;
+  }
+  .xflow-group-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 12px;
+    font-size: 14px;
+    line-height: 38px;
+    .header-left {
+      width: 80%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .header-right {
+      display: inline-flex;
+      align-items: center;
+      span.anticon {
+        margin-left: 8px;
+      }
+    }
+  }
+}
+
+.x6-node-selected {
+  .xflow-default-group-node {
+    background-color: rgba(243, 249, 255, 0.92);
+    border: 1px solid @primaryColor;
+    box-shadow: 0 0 3px 3px rgb(64 169 255 / 20%);
+    &:hover {
+      background-color: rgba(243, 249, 255, 0.6);
+    }
+  }
+}

package/lib/xflow-main/graph/react-node/index.css

@@ -0,0 +1,42 @@
+.xflow-default-node {
+  z-index: 10;
+  display: flex;
+  width: 180px;
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  background-color: #fff;
+  border: 1px solid #c2c8d5;
+  border-radius: 2px;
+  box-shadow: -1px -1px 4px 0 rgba(223,223,223,0.50), -2px 2px 4px 0 rgba(244,244,244,0.50), 2px 3px 8px 2px rgba(151,151,151,0.05);
+  transition: all ease-in-out 0.15s;
+}
+.xflow-default-node:hover {
+  background-color: #fff;
+  border: 1px solid #3057e3;
+  box-shadow: 0 0 3px 3px rgba(48, 86, 227, 0.15);
+  cursor: move;
+}
+.xflow-default-node .icon {
+  width: 36px;
+}
+.xflow-default-node .label {
+  width: 108px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.xflow-default-node .status {
+  width: 36px;
+}
+.xflow-default-node.panel-node {
+  border: 0;
+}
+.x6-node-selected .xflow-default-node {
+  background-color: rgba(48, 86, 227, 0.05);
+  border: 1px solid #3057e3;
+  box-shadow: 0 0 3px 3px rgba(48, 86, 227, 0.15);
+}
+.x6-node-selected .xflow-default-node:hover {
+  background-color: #fff;
+  box-shadow: 0 0 5px 5px rgba(48, 86, 227, 0.15);
+}

package/lib/xflow-main/graph/react-node/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { NsGraph } from '../../../interface';
+/** 状态 类型 */
+export declare enum StatusEnum {
+    SUCCEEDED = "SUCCEEDED",
+    RUNNING = "RUNNING",
+    FAILED = "FAILED",
+    PENDING = "PENDING",
+    CREATING = "CREATING",
+    MANUAL_TERMINATE = "MANUAL_TERMINATE",
+    CACHED = "CACHED",
+    UNKNOWN = "UNKNOWN"
+}
+export declare const AlgoIcon: React.FC<IProps>;
+interface IProps {
+    status: StatusEnum;
+    hide: boolean;
+}
+export declare const XFlowDefaultNode: NsGraph.INodeRender;
+export {};

package/lib/xflow-main/graph/react-node/index.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XFlowDefaultNode = exports.AlgoIcon = exports.StatusEnum = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var icons_1 = require("@ant-design/icons");
+var fontStyle = { fontSize: '16px', color: '#3057e3' };
+/** 状态 类型 */
+var StatusEnum;
+(function (StatusEnum) {
+    StatusEnum["SUCCEEDED"] = "SUCCEEDED";
+    StatusEnum["RUNNING"] = "RUNNING";
+    StatusEnum["FAILED"] = "FAILED";
+    StatusEnum["PENDING"] = "PENDING";
+    StatusEnum["CREATING"] = "CREATING";
+    StatusEnum["MANUAL_TERMINATE"] = "MANUAL_TERMINATE";
+    StatusEnum["CACHED"] = "CACHED";
+    StatusEnum["UNKNOWN"] = "UNKNOWN";
+})(StatusEnum = exports.StatusEnum || (exports.StatusEnum = {}));
+var AlgoIcon = function (props) {
+    if (props.hide) {
+        return null;
+    }
+    switch (props.status) {
+        case StatusEnum.RUNNING:
+            return react_1.default.createElement(icons_1.RedoOutlined, { spin: true, style: { color: '#c1cdf7', fontSize: '16px' } });
+        case StatusEnum.FAILED:
+            return react_1.default.createElement(icons_1.CloseCircleOutlined, { style: { color: '#ff4d4f', fontSize: '16px' } });
+        case StatusEnum.SUCCEEDED:
+            return react_1.default.createElement(icons_1.CheckCircleOutlined, { style: { color: '#39ca74cc', fontSize: '16px' } });
+        case StatusEnum.PENDING:
+            return react_1.default.createElement(icons_1.ExclamationCircleOutlined, { style: { color: '#faad14', fontSize: '16px' } });
+        case StatusEnum.CREATING:
+            return react_1.default.createElement(icons_1.EditOutlined, { style: { color: '#faad14', fontSize: '16px' } });
+        case StatusEnum.MANUAL_TERMINATE:
+            return react_1.default.createElement(icons_1.StopOutlined, { style: { color: '#faad14', fontSize: '16px' } });
+        case StatusEnum.CACHED:
+            return react_1.default.createElement(icons_1.CloudDownloadOutlined, { style: { color: '#faad14', fontSize: '16px' } });
+        case StatusEnum.UNKNOWN:
+            return react_1.default.createElement(icons_1.QuestionCircleOutlined, { style: { color: '#d9d9d9', fontSize: '16px' } });
+        default:
+            return null;
+    }
+};
+exports.AlgoIcon = AlgoIcon;
+var XFlowDefaultNode = function (props) {
+    var icon = react_1.default.isValidElement(props.data.icon) ? (props.data.icon) : (react_1.default.createElement(icons_1.DatabaseOutlined, { style: fontStyle }));
+    return (react_1.default.createElement("div", { className: "xflow-default-node ".concat(props.isNodeTreePanel ? 'panel-node' : '') },
+        react_1.default.createElement("span", { className: "icon" }, icon),
+        react_1.default.createElement("span", { className: "label" }, props.data.label),
+        react_1.default.createElement("span", { className: "status" },
+            react_1.default.createElement(exports.AlgoIcon, { status: props.data && props.data.status, hide: props.isNodeTreePanel }))));
+};
+exports.XFlowDefaultNode = XFlowDefaultNode;
+exports.XFlowDefaultNode.displayName = 'XFlowDefaultNode';
+//# sourceMappingURL=index.js.map

package/lib/xflow-main/graph/react-node/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/xflow-main/graph/react-node/index.tsx"],"names":[],"mappings":"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"}

package/lib/xflow-main/graph/react-node/index.less

@@ -0,0 +1,49 @@
+@light-border: 1px solid #d9d9d9;
+@primaryColor: #c2c8d5;
+
+.xflow-default-node {
+  z-index: 10;
+  display: flex;
+  width: 180px;
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  background-color: #fff;
+  border: 1px solid @primaryColor;
+  border-radius: 2px;
+  box-shadow: ~'-1px -1px 4px 0 rgba(223,223,223,0.50), -2px 2px 4px 0 rgba(244,244,244,0.50), 2px 3px 8px 2px rgba(151,151,151,0.05)';
+  transition: all ease-in-out 0.15s;
+  &:hover {
+    background-color: #fff;
+    border: 1px solid #3057e3;
+    // border: 1px solid @primaryColor;
+    box-shadow: 0 0 3px 3px rgba(48, 86, 227, 0.15);
+    cursor: move;
+  }
+  .icon {
+    width: 36px;
+  }
+  .label {
+    width: 108px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .status {
+    width: 36px;
+  }
+  &.panel-node {
+    border: 0;
+  }
+}
+
+.x6-node-selected {
+  .xflow-default-node {
+    background-color: rgba(48, 86, 227, 0.05);
+    border: 1px solid #3057e3;
+    box-shadow: 0 0 3px 3px rgba(48, 86, 227, 0.15);
+    &:hover {
+      background-color: #fff;
+      box-shadow: 0 0 5px 5px rgba(48, 86, 227, 0.15);
+    }
+  }
+}