@sunspirytus/xflow-extension 1.0.52

package/lib/flowchart-canvas/config-graph.js

@@ -0,0 +1,217 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGraphConfig = exports.NsAddEdgeEvent = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+var classnames_1 = tslib_1.__importDefault(require("classnames"));
+var antd_1 = require("antd");
+var merge_1 = tslib_1.__importDefault(require("lodash/merge"));
+var xflow_core_1 = require("@sunspirytus/xflow-core");
+var x6_1 = require("@antv/x6");
+var flowchart_node_panel_1 = require("../flowchart-node-panel");
+var utils_1 = require("./utils");
+/** 临时边 */
+var TEMP_EGDE = 'flowchart-connecting-edge';
+/** 自定义React节点 */
+var ANT_PREFIX = 'ant';
+var NsAddEdgeEvent;
+(function (NsAddEdgeEvent) {
+    NsAddEdgeEvent.EVENT_NAME = 'ADD_FLOWCHART_EDGE_CMD_EVENT';
+})(NsAddEdgeEvent = exports.NsAddEdgeEvent || (exports.NsAddEdgeEvent = {}));
+var defaultEdgeConfig = {
+    attrs: {
+        line: {
+            stroke: '#A2B1C3',
+            targetMarker: {
+                name: 'block',
+                width: 12,
+                height: 8,
+            },
+            strokeDasharray: '5 5',
+            strokeWidth: 1,
+        },
+    },
+};
+var XFlowEdge = x6_1.Shape.Edge.registry.register('xflow', x6_1.Shape.Edge.define({
+    zIndex: 1,
+    highlight: true,
+    name: TEMP_EGDE,
+    label: '',
+    anchor: {
+        name: 'midSide',
+        args: {
+            dx: 10,
+        },
+    },
+    attrs: defaultEdgeConfig.attrs,
+    data: {
+        label: '',
+    },
+}), true);
+exports.useGraphConfig = (0, xflow_core_1.createGraphConfig)(function (config, proxy) {
+    var _a = proxy.getValue(), _b = _a.config, canvasConfig = _b === void 0 ? {} : _b, useConfig = _a.useConfig, _c = _a.mode, mode = _c === void 0 ? 'edit' : _c, _d = _a.showPortsOnNodeSelected, showPortsOnNodeSelected = _d === void 0 ? false : _d, _e = _a.edgeConfig, edgeConfig = _e === void 0 ? {} : _e;
+    config.setEdgeTypeParser(function (edge) { return edge === null || edge === void 0 ? void 0 : edge.renderKey; });
+    /** 这里比较黑，props 共享*/
+    (0, utils_1.setProps)(tslib_1.__assign(tslib_1.__assign({}, proxy.getValue()), { graphConfig: config }));
+    (0, flowchart_node_panel_1.setNodeRender)(config);
+    (0, flowchart_node_panel_1.setGroupRender)(config);
+    config.setX6Config((0, merge_1.default)({
+        grid: true,
+        history: true,
+        resizing: {
+            enabled: true,
+            minWidth: flowchart_node_panel_1.NODE_HEIGHT,
+            minHeight: flowchart_node_panel_1.NODE_HEIGHT,
+            preserveAspectRatio: function (shape) {
+                var data = shape.data;
+                return flowchart_node_panel_1.ASPECTRATIONODE.includes(data.name);
+            },
+        },
+        snapline: {
+            enabled: true,
+        },
+        connecting: {
+            router: 'manhattan',
+            connector: {
+                name: 'rounded',
+                args: {
+                    radius: 8,
+                },
+            },
+            anchor: 'center',
+            connectionPoint: 'anchor',
+            allowBlank: false,
+            snap: {
+                radius: 20,
+            },
+            createEdge: function () {
+                var _this = this;
+                var tempEdge = new XFlowEdge({});
+                this.once('edge:connected', function (args) {
+                    var edge = args.edge, isNew = args.isNew;
+                    /** 没有edge:connected时，会导致graph.once的事件没有执行 */
+                    if (isNew && edge && edge.isEdge() && tempEdge === edge) {
+                        var targetNode = edge.getTargetCell();
+                        if (targetNode && targetNode.isNode()) {
+                            var targetPortId = edge.getTargetPortId();
+                            var sourcePortId = edge.getSourcePortId();
+                            var sourceCellId = edge.getSourceCellId();
+                            var targetCellId = edge.getTargetCellId();
+                            var customEdgeConfig = typeof edgeConfig === 'function' ? edgeConfig(edge) : edgeConfig;
+                            _this.trigger(NsAddEdgeEvent.EVENT_NAME, tslib_1.__assign({ targetPortId: targetPortId, sourcePortId: sourcePortId, source: sourceCellId, target: targetCellId, edge: edge, tempEdgeId: tempEdge.id }, (0, merge_1.default)(defaultEdgeConfig, customEdgeConfig)));
+                        }
+                    }
+                });
+                return tempEdge;
+            },
+            validateEdge: function (args) {
+                var _a;
+                var edge = args.edge;
+                return !!((_a = edge === null || edge === void 0 ? void 0 : edge.target) === null || _a === void 0 ? void 0 : _a.port);
+            },
+            // 是否触发交互事件
+            validateMagnet: function () {
+                // 所有锚点均可触发
+                return true;
+            },
+            // 显示可用的链接桩
+            validateConnection: function (_a) {
+                var sourceView = _a.sourceView, targetView = _a.targetView, targetMagnet = _a.targetMagnet;
+                // 不允许连接到自己
+                if (sourceView === targetView) {
+                    return false;
+                }
+                var node = targetView.cell;
+                // 判断目标链接桩是否可连接
+                if (targetMagnet) {
+                    var portId = targetMagnet.getAttribute('port');
+                    var port = node.getPort(portId);
+                    return !(port && port.connected);
+                }
+                return;
+            },
+        },
+        highlighting: {
+            nodeAvailable: {
+                name: 'className',
+                args: {
+                    className: 'available',
+                },
+            },
+            magnetAvailable: {
+                name: 'className',
+                args: {
+                    className: 'available',
+                },
+            },
+            magnetAdsorbed: {
+                name: 'className',
+                args: {
+                    className: 'adsorbed',
+                },
+            },
+        },
+        onPortRendered: function (args) {
+            var port = args.port;
+            var contentSelectors = args.contentSelectors;
+            var container = contentSelectors && contentSelectors.content;
+            var placement = port.group;
+            var clz = (0, classnames_1.default)('xflow-port', { connected: port.connected });
+            if (container) {
+                react_dom_1.default.render((react_1.default.createElement(antd_1.ConfigProvider, { prefixCls: ANT_PREFIX },
+                    react_1.default.createElement(antd_1.Tooltip, { title: port.tooltip, placement: placement },
+                        react_1.default.createElement("span", { className: clz })))), container);
+            }
+        },
+    }, canvasConfig));
+    /** 内交互，上层通过实例绑定 */
+    config.setEvents([
+        {
+            eventName: 'node:selected',
+            callback: function () {
+                mode === 'edit' && (0, utils_1.changePortsVisible)(false);
+            },
+        },
+        {
+            eventName: 'edge:dblclick',
+            callback: function (e) {
+                (0, utils_1.addTools)(e);
+            },
+        },
+        {
+            eventName: 'edge:mouseleave',
+            callback: function (e, cmds) {
+                (0, utils_1.removeTools)(e, cmds);
+            },
+        },
+        {
+            eventName: 'node:mouseenter',
+            callback: function (e) {
+                mode === 'edit' && (0, utils_1.changePortsVisible)(true, e, showPortsOnNodeSelected);
+            },
+        },
+        {
+            eventName: 'node:mouseleave',
+            callback: function (e) {
+                (0, utils_1.changePortsVisible)(false, e);
+            },
+        },
+        {
+            eventName: 'node:moved',
+            callback: function (e, cmds) {
+                (0, utils_1.movedNode)(e, cmds);
+            },
+        },
+        {
+            eventName: 'node:resized',
+            callback: function (e, cmds) {
+                (0, utils_1.resizeNode)(e, cmds);
+            },
+        },
+    ]);
+    if (typeof useConfig === 'function') {
+        useConfig(config);
+    }
+});
+//# sourceMappingURL=config-graph.js.map

package/lib/flowchart-canvas/config-graph.js.map

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

package/lib/flowchart-canvas/extension/components/index.css

@@ -0,0 +1,65 @@
+.flowchart-extension-container .x6-edge {
+  stroke-width: 1px;
+}
+.flowchart-extension-container .x6-edge.success path:nth-child(2) {
+  stroke: #888 !important;
+}
+.flowchart-extension-container .x6-edge.success path:nth-child(3) {
+  fill: #888 !important;
+  stroke: #888 !important;
+}
+.flowchart-extension-container .x6-edge.error {
+  stroke-width: 2px;
+}
+.flowchart-extension-container .x6-edge.error path:nth-child(2) {
+  stroke: rgba(245, 34, 45, 0.45) !important;
+  stroke-width: 2px;
+}
+.flowchart-extension-container .x6-edge.guideProcessing path:nth-child(2) {
+  stroke: rgba(57, 202, 116, 0.8);
+  stroke-width: 2px;
+  stroke-dasharray: 8px, 2px;
+}
+.flowchart-extension-container .x6-edge.guideProcessing path:nth-child(2):local {
+  animation: processing-line 30s infinite linear;
+}
+.flowchart-extension-container .x6-edge.x6-edge-selected path:nth-child(2) {
+  stroke: #1890ff;
+  stroke-width: 2px;
+}
+.flowchart-extension-container .x6-edge:hover path:nth-child(2) {
+  stroke: #1890ff;
+  stroke-width: 2px;
+}
+.flowchart-extension-container .x6-edge.hoverHighlight path:nth-child(2) {
+  stroke: #1890ff;
+  stroke-width: 2px;
+}
+@keyframes processing-line {
+  to {
+    stroke-dashoffset: -1000;
+  }
+}
+.flowchart-extension-container .x6-widget-transform {
+  margin: -1px 0 0 -1px;
+  padding: 0;
+  border: 1px solid #239edd;
+}
+.flowchart-extension-container .x6-widget-transform > div {
+  border: 1px solid #239edd;
+}
+.flowchart-extension-container .x6-widget-transform > div:hover {
+  background-color: #3dafe4;
+}
+.flowchart-extension-container .x6-widget-transform-active-handle {
+  background-color: #3dafe4;
+}
+.flowchart-extension-container .x6-widget-transform-resize {
+  border-radius: 0;
+}
+.flowchart-extension-container .x6-widget-selection-inner {
+  border: 1px solid #239edd;
+}
+.flowchart-extension-container .x6-widget-selection-box {
+  opacity: 0;
+}

package/lib/flowchart-canvas/extension/components/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const FlowchartExtension: React.FC<{}>;

package/lib/flowchart-canvas/extension/components/index.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlowchartExtension = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var xflow_core_1 = require("@sunspirytus/xflow-core");
+var module_1 = require("../module");
+var FlowchartExtension = function () {
+    /** 获取扩展Registry */
+    var extensionRegistry = (0, xflow_core_1.useExtensionRegistry)();
+    var config = react_1.default.useMemo(function () { return ({
+        CONFIG_TYPE: 'FLOWCHART_EXTENSION',
+        getConfig: function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () { return tslib_1.__generator(this, function (_a) {
+            return [2 /*return*/];
+        }); }); },
+    }); }, []);
+    react_1.default.useEffect(function () {
+        /** 注册 extension 到 Registry */
+        var disposable = extensionRegistry.addExtension({
+            config: config,
+            createModule: module_1.createFlowchartExtensionModule,
+        });
+        /** 添加 classname */
+        extensionRegistry.addContainerClassNames('flowchart-extension-container');
+        return function () {
+            disposable.dispose();
+        };
+    }, [config, extensionRegistry]);
+    return null;
+};
+exports.FlowchartExtension = FlowchartExtension;
+//# sourceMappingURL=index.js.map

package/lib/flowchart-canvas/extension/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/flowchart-canvas/extension/components/index.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AAEzB,sDAA8D;AAC9D,oCAA0D;AAEnD,IAAM,kBAAkB,GAAiB;IAC9C,mBAAmB;IACnB,IAAM,iBAAiB,GAAG,IAAA,iCAAoB,GAAE,CAAA;IAChD,IAAM,MAAM,GAAG,eAAK,CAAC,OAAO,CAC1B,cAAM,OAAA,CAAC;QACL,WAAW,EAAE,qBAAqB;QAClC,SAAS,EAAE;;iBAAc;KAC1B,CAAC,EAHI,CAGJ,EACF,EAAE,CACH,CAAA;IACD,eAAK,CAAC,SAAS,CAAC;QACd,8BAA8B;QAC9B,IAAM,UAAU,GAAG,iBAAiB,CAAC,YAAY,CAAC;YAChD,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,uCAA8B;SAC7C,CAAC,CAAA;QACF,mBAAmB;QACnB,iBAAiB,CAAC,sBAAsB,CAAC,+BAA+B,CAAC,CAAA;QAEzE,OAAO;YACL,UAAU,CAAC,OAAO,EAAE,CAAA;QACtB,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAA;IAE/B,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAzBY,QAAA,kBAAkB,sBAyB9B"}

package/lib/flowchart-canvas/extension/components/index.less

@@ -0,0 +1,78 @@
+.flowchart-extension-container {
+  .x6-edge {
+    stroke-width: 1px;
+    &.success {
+      path:nth-child(2) {
+        stroke: #888 !important;
+      }
+      path:nth-child(3) {
+        fill: #888 !important;
+        stroke: #888 !important;
+      }
+    }
+    &.error {
+      stroke-width: 2px;
+      path:nth-child(2) {
+        stroke: rgba(245, 34, 45, 0.45) !important;
+        stroke-width: 2px;
+      }
+    }
+    &.guideProcessing {
+      path:nth-child(2) {
+        stroke: rgba(57, 202, 116, 0.8);
+        stroke-width: 2px;
+        stroke-dasharray: 8px, 2px;
+        &:local {
+          animation: processing-line 30s infinite linear;
+        }
+      }
+    }
+    &.x6-edge-selected {
+      path:nth-child(2) {
+        stroke: #1890ff;
+        stroke-width: 2px;
+      }
+    }
+    &:hover {
+      path:nth-child(2) {
+        stroke: #1890ff;
+        stroke-width: 2px;
+      }
+    }
+    &.hoverHighlight {
+      path:nth-child(2) {
+        stroke: #1890ff;
+        stroke-width: 2px;
+      }
+    }
+    @keyframes processing-line {
+      to {
+        stroke-dashoffset: -1000;
+      }
+    }
+  }
+
+  .x6-widget-transform {
+    margin: -1px 0 0 -1px;
+    padding: 0;
+    border: 1px solid #239edd;
+  }
+  .x6-widget-transform > div {
+    border: 1px solid #239edd;
+  }
+  .x6-widget-transform > div:hover {
+    background-color: #3dafe4;
+  }
+  .x6-widget-transform-active-handle {
+    background-color: #3dafe4;
+  }
+  .x6-widget-transform-resize {
+    border-radius: 0;
+  }
+  .x6-widget-selection-inner {
+    border: 1px solid #239edd;
+  }
+  .x6-widget-selection-box {
+    opacity: 0;
+  }
+}

package/lib/flowchart-canvas/extension/contributions/flow.d.ts

@@ -0,0 +1,12 @@
+import type { ICmdHooks } from '@sunspirytus/xflow-core';
+import { DisposableCollection, Disposable } from '@sunspirytus/xflow-core';
+import { IHookContribution } from '@sunspirytus/xflow-core';
+/**
+ * 内置的hook contribution
+ * 处理 config上的runtime的注册项
+ */
+export declare class FlowHooksContribution implements IHookContribution<ICmdHooks> {
+    toDispose: DisposableCollection;
+    registerHookHub: () => Promise<Disposable>;
+    registerHook: (hooks: ICmdHooks) => Promise<Disposable>;
+}

package/lib/flowchart-canvas/extension/contributions/flow.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlowHooksContribution = void 0;
+var tslib_1 = require("tslib");
+var mana_syringe_1 = require("mana-syringe");
+var xflow_core_1 = require("@sunspirytus/xflow-core");
+var xflow_core_2 = require("@sunspirytus/xflow-core");
+var config_graph_1 = require("../../config-graph");
+var utils_1 = require("../../utils");
+/**
+ * 内置的hook contribution
+ * 处理 config上的runtime的注册项
+ */
+var FlowHooksContribution = /** @class */ (function () {
+    function FlowHooksContribution() {
+        var _this = this;
+        this.toDispose = new xflow_core_1.DisposableCollection();
+        this.registerHookHub = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            return tslib_1.__generator(this, function (_a) {
+                return [2 /*return*/, xflow_core_1.Disposable.create(function () { })];
+            });
+        }); };
+        this.registerHook = function (hooks) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            var toDispose, disposables;
+            var _this = this;
+            return tslib_1.__generator(this, function (_a) {
+                toDispose = new xflow_core_1.DisposableCollection();
+                disposables = [
+                    hooks.afterGraphInit.registerHook({
+                        name: 'call add edge to replace temp edge',
+                        handler: function (handlerArgs) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                            var commandService, graph;
+                            var _this = this;
+                            return tslib_1.__generator(this, function (_a) {
+                                commandService = handlerArgs.commandService, graph = handlerArgs.graph;
+                                graph.on(config_graph_1.NsAddEdgeEvent.EVENT_NAME, function (args) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                                    var edge, edgeConfig, tempEdgeId, rest, config, sourceNode, targetNode, onAddEdge;
+                                    return tslib_1.__generator(this, function (_a) {
+                                        switch (_a.label) {
+                                            case 0:
+                                                edge = args.edge, edgeConfig = tslib_1.__rest(args, ["edge"]);
+                                                tempEdgeId = edgeConfig.tempEdgeId, rest = tslib_1.__rest(edgeConfig, ["tempEdgeId"]);
+                                                config = {
+                                                    edgeConfig: tslib_1.__assign(tslib_1.__assign({}, rest), { 
+                                                        // renderKey: FLOWCHART_EDGE, // 暂不支持
+                                                        source: {
+                                                            cell: edgeConfig.source,
+                                                            port: edgeConfig.sourcePortId,
+                                                        }, target: {
+                                                            cell: edgeConfig.target,
+                                                            port: edgeConfig.targetPortId,
+                                                        }, zIndex: 1, data: tslib_1.__assign({}, rest) }),
+                                                };
+                                                return [4 /*yield*/, commandService.executeCommand(xflow_core_1.XFlowEdgeCommands.ADD_EDGE.id, config)
+                                                    /** 删除 createEdge() 产生的 tempEdge */
+                                                ];
+                                            case 1:
+                                                _a.sent();
+                                                /** 删除 createEdge() 产生的 tempEdge */
+                                                return [4 /*yield*/, commandService.executeCommand(xflow_core_1.XFlowEdgeCommands.DEL_EDGE.id, {
+                                                        edgeConfig: {
+                                                            id: tempEdgeId,
+                                                        },
+                                                    })
+                                                    /**
+                                                     * 新增边时更新入边、出边信息
+                                                     * @link https://github.com/ant-design/ant-design-charts/issues/1189
+                                                     */
+                                                ];
+                                            case 2:
+                                                /** 删除 createEdge() 产生的 tempEdge */
+                                                _a.sent();
+                                                sourceNode = graph.getCellById(edgeConfig.source);
+                                                targetNode = graph.getCellById(edgeConfig.target);
+                                                return [4 /*yield*/, commandService.executeCommand(xflow_core_1.XFlowNodeCommands.UPDATE_NODE.id, {
+                                                        nodeConfig: tslib_1.__assign(tslib_1.__assign({}, sourceNode.data), { incomingEdges: graph.getIncomingEdges(sourceNode), outgoingEdges: graph.getOutgoingEdges(sourceNode) }),
+                                                    })];
+                                            case 3:
+                                                _a.sent();
+                                                return [4 /*yield*/, commandService.executeCommand(xflow_core_1.XFlowNodeCommands.UPDATE_NODE.id, {
+                                                        nodeConfig: tslib_1.__assign(tslib_1.__assign({}, targetNode.data), { incomingEdges: graph.getIncomingEdges(targetNode), outgoingEdges: graph.getOutgoingEdges(targetNode) }),
+                                                    })];
+                                            case 4:
+                                                _a.sent();
+                                                onAddEdge = (0, utils_1.getProps)('onAddEdge');
+                                                if (typeof onAddEdge === 'function') {
+                                                    onAddEdge(config.edgeConfig);
+                                                }
+                                                args.edge.remove();
+                                                return [2 /*return*/];
+                                        }
+                                    });
+                                }); });
+                                return [2 /*return*/];
+                            });
+                        }); },
+                    }),
+                ];
+                toDispose.pushAll(disposables);
+                return [2 /*return*/, xflow_core_1.Disposable.create(function () { })];
+            });
+        }); };
+    }
+    FlowHooksContribution = tslib_1.__decorate([
+        (0, mana_syringe_1.singleton)({ contrib: xflow_core_2.IHookContribution })
+    ], FlowHooksContribution);
+    return FlowHooksContribution;
+}());
+exports.FlowHooksContribution = FlowHooksContribution;
+//# sourceMappingURL=flow.js.map

package/lib/flowchart-canvas/extension/contributions/flow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow.js","sourceRoot":"","sources":["../../../../src/flowchart-canvas/extension/contributions/flow.tsx"],"names":[],"mappings":";;;;AACA,6CAAwC;AACxC,sDAKgC;AAChC,sDAA2D;AAC3D,mDAAmD;AACnD,qCAAsC;AAEtC;;;GAGG;AAEH;IAAA;QAAA,iBAuEC;QAtEC,cAAS,GAAG,IAAI,iCAAoB,EAAE,CAAA;QAEtC,oBAAe,GAAG;;gBAChB,sBAAO,uBAAU,CAAC,MAAM,CAAC,cAAO,CAAC,CAAC,EAAA;;aACnC,CAAA;QACD,iBAAY,GAAG,UAAO,KAAgB;;;;gBAC9B,SAAS,GAAG,IAAI,iCAAoB,EAAE,CAAA;gBACtC,WAAW,GAAG;oBAClB,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC;wBAChC,IAAI,EAAE,oCAAoC;wBAC1C,OAAO,EAAE,UAAM,WAAW;;;;gCAChB,cAAc,GAAY,WAAW,eAAvB,EAAE,KAAK,GAAK,WAAW,MAAhB,CAAgB;gCAC7C,KAAK,CAAC,EAAE,CAAC,6BAAc,CAAC,UAAU,EAAE,UAAO,IAA0B;;;;;gDAC3D,IAAI,GAAoB,IAAI,KAAxB,EAAK,UAAU,kBAAK,IAAI,EAA9B,QAAuB,CAAF,CAAS;gDAC5B,UAAU,GAAc,UAAU,WAAxB,EAAK,IAAI,kBAAK,UAAU,EAApC,cAAuB,CAAF,CAAe;gDACpC,MAAM,GAAG;oDACb,UAAU,wCACL,IAAI;wDACP,qCAAqC;wDACrC,MAAM,EAAE;4DACN,IAAI,EAAE,UAAU,CAAC,MAAM;4DACvB,IAAI,EAAE,UAAU,CAAC,YAAY;yDAC9B,EACD,MAAM,EAAE;4DACN,IAAI,EAAE,UAAU,CAAC,MAAM;4DACvB,IAAI,EAAE,UAAU,CAAC,YAAY;yDAC9B,EACD,MAAM,EAAE,CAAC,EACT,IAAI,uBAAO,IAAI,IAChB;iDACF,CAAA;gDACD,qBAAM,cAAc,CAAC,cAAc,CAAC,8BAAiB,CAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;oDAC1E,mCAAmC;kDADuC;;gDAA1E,SAA0E,CAAA;gDAC1E,mCAAmC;gDACnC,qBAAM,cAAc,CAAC,cAAc,CAAC,8BAAiB,CAAC,QAAQ,CAAC,EAAE,EAAE;wDACjE,UAAU,EAAE;4DACV,EAAE,EAAE,UAAU;yDACf;qDACF,CAAC;oDACF;;;uDAGG;kDAJD;;gDALF,mCAAmC;gDACnC,SAIE,CAAA;gDAKI,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,UAAU,CAAC,MAAM,CAAC,CAAA;gDACjD,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,UAAU,CAAC,MAAM,CAAC,CAAA;gDACvD,qBAAM,cAAc,CAAC,cAAc,CAAC,8BAAiB,CAAC,WAAW,CAAC,EAAE,EAAE;wDACpE,UAAU,wCACL,UAAU,CAAC,IAAI,KAClB,aAAa,EAAE,KAAK,CAAC,gBAAgB,CAAC,UAAU,CAAC,EACjD,aAAa,EAAE,KAAK,CAAC,gBAAgB,CAAC,UAAU,CAAC,GAClD;qDACF,CAAC,EAAA;;gDANF,SAME,CAAA;gDACF,qBAAM,cAAc,CAAC,cAAc,CAAC,8BAAiB,CAAC,WAAW,CAAC,EAAE,EAAE;wDACpE,UAAU,wCACL,UAAU,CAAC,IAAI,KAClB,aAAa,EAAE,KAAK,CAAC,gBAAgB,CAAC,UAAU,CAAC,EACjD,aAAa,EAAE,KAAK,CAAC,gBAAgB,CAAC,UAAU,CAAC,GAClD;qDACF,CAAC,EAAA;;gDANF,SAME,CAAA;gDACI,SAAS,GAAG,IAAA,gBAAQ,EAAC,WAAW,CAAC,CAAA;gDACvC,IAAI,OAAO,SAAS,KAAK,UAAU,EAAE;oDACnC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;iDAC7B;gDACD,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAA;;;;qCACnB,CAAC,CAAA;;;6BACH;qBACF,CAAC;iBACH,CAAA;gBACD,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC,CAAA;gBAC9B,sBAAO,uBAAU,CAAC,MAAM,CAAC,cAAO,CAAC,CAAC,EAAA;;aACnC,CAAA;IACH,CAAC;IAvEY,qBAAqB;QADjC,IAAA,wBAAS,EAAC,EAAE,OAAO,EAAE,8BAAiB,EAAE,CAAC;OAC7B,qBAAqB,CAuEjC;IAAD,4BAAC;CAAA,AAvED,IAuEC;AAvEY,sDAAqB"}

package/lib/flowchart-canvas/extension/module.d.ts

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

package/lib/flowchart-canvas/extension/module.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlowchartExtension = exports.createFlowchartExtensionModule = void 0;
+require("reflect-metadata");
+/** Application 扩展依赖 */
+var mana_syringe_1 = require("mana-syringe");
+var flow_1 = require("./contributions/flow");
+var components_1 = require("./components");
+Object.defineProperty(exports, "FlowchartExtension", { enumerable: true, get: function () { return components_1.FlowchartExtension; } });
+/** 依赖扩展模块，必须要加载 */
+var createFlowchartExtensionModule = function () {
+    return (0, mana_syringe_1.Module)(function (register) {
+        /** 扩展 runtime hook */
+        register(flow_1.FlowHooksContribution);
+    });
+};
+exports.createFlowchartExtensionModule = createFlowchartExtensionModule;
+//# sourceMappingURL=module.js.map

package/lib/flowchart-canvas/extension/module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.js","sourceRoot":"","sources":["../../../src/flowchart-canvas/extension/module.ts"],"names":[],"mappings":";;;AAAA,4BAAyB;AACzB,uBAAuB;AACvB,6CAAqC;AACrC,6CAA4D;AAC5D,2CAAiD;AAUR,mGAVhC,+BAAkB,OAUgC;AAR3D,mBAAmB;AACnB,IAAM,8BAA8B,GAAG;IACrC,OAAO,IAAA,qBAAM,EAAC,UAAA,QAAQ;QACpB,sBAAsB;QACtB,QAAQ,CAAC,4BAAqB,CAAC,CAAA;IACjC,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAEQ,wEAA8B"}

package/lib/flowchart-canvas/index.css

@@ -0,0 +1,71 @@
+.flowchart-extension-container.xflow-app-workspace {
+  overflow: hidden;
+  border: 1px solid #d9d9d9;
+}
+.flowchart-extension-container.xflow-app-workspace .xflow-workspace-panel {
+  z-index: 1;
+  background: #fff;
+}
+.flowchart-extension-container.xflow-app-workspace svg {
+  overflow: visible !important;
+}
+.flowchart-extension-container.xflow-app-workspace .x6-edge {
+  stroke-width: 1px;
+}
+.flowchart-extension-container.xflow-app-workspace .x6-edge.x6-edge-selected path:nth-child(2) {
+  stroke: #3572f9;
+}
+.flowchart-extension-container.xflow-app-workspace .x6-edge:hover path:nth-child(2) {
+  stroke: #3572f9;
+}
+.flowchart-extension-container.xflow-app-workspace .x6-edge.hoverHighlight path:nth-child(2) {
+  stroke: #3572f9;
+}
+.flowchart-extension-container.xflow-app-workspace .x6-port > circle {
+  stroke: #69c0ff;
+}
+.flowchart-extension-container.xflow-app-workspace .x6-widget-transform {
+  box-sizing: border-box !important;
+  margin: 0;
+  padding: 0;
+  border: 2px solid #3572f9;
+  box-shadow: 0 4px 4px 0 #dbe6ff;
+}
+.flowchart-extension-container.xflow-app-workspace .x6-widget-transform > div {
+  width: 8px;
+  height: 8px;
+  background-color: #fff;
+  border: 1px solid #3572f9;
+}
+.flowchart-extension-container.xflow-app-workspace .xflow-json-form .ant-tabs-content-holder {
+  padding: 0 !important;
+}
+.flowchart-container-collpase {
+  transition: left 0.5s;
+}
+.flowchart-container-collpase-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.flowchart-container-collpase-nodes {
+  border-right: 1px solid #d9d9d9;
+}
+.flowchart-container-collpase-icon {
+  position: absolute;
+  z-index: 99;
+  width: 20px;
+  color: #aaa;
+  font-size: 12px;
+  text-align: center;
+  background: #fff;
+  border: 1px solid #ccc;
+  transform: translate(0, -50%);
+  cursor: pointer;
+}
+.flowchart-container-collpase-icon:hover {
+  color: #2b84c0;
+}
+.flowchart-container-collpase .xflow-workspace-panel {
+  transition: left 0.5s;
+}

package/lib/flowchart-canvas/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export { FlowchartExtension } from './extension/module';
+import type { IFlowchartGraphProps } from './interface';
+export * from './interface';
+export declare const FlowchartCanvas: React.FC<IFlowchartGraphProps>;