liteflow-editor-process 1.0.0

package/dist/LiteFlowEditor/panels/breadcrumb/index.js

@@ -0,0 +1,67 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useReducer, useEffect } from 'react';
+import { Breadcrumb } from 'antd';
+import { HomeOutlined } from '@ant-design/icons';
+import { getIconByType } from "../../cells";
+import styles from "./index.module.less";
+var BreadcrumbPath = function BreadcrumbPath(props) {
+  var flowGraph = props.flowGraph;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedModel = _useState2[0],
+    setSelectedModel = _useState2[1];
+  var forceUpdate = useReducer(function (n) {
+    return n + 1;
+  }, 0)[1];
+  useEffect(function () {
+    var handler = function handler() {
+      setSelectedModel(null);
+      forceUpdate();
+    };
+    var handleSelect = function handleSelect(component) {
+      setSelectedModel(component);
+    };
+    flowGraph.on('settingBar:forceUpdate', handler);
+    flowGraph.on('model:select', handleSelect);
+    return function () {
+      flowGraph.off('settingBar:forceUpdate', handler);
+      flowGraph.off('model:select', handleSelect);
+    };
+  }, [flowGraph, setSelectedModel, forceUpdate]);
+  var nodes = flowGraph.getSelectedCells().filter(function (v) {
+    return !v.isEdge();
+  });
+  var parents = [];
+  if (selectedModel || nodes.length === 1) {
+    var currentModel = selectedModel || nodes[0].getData().model;
+    var nextModel = currentModel.proxy || currentModel;
+    while (nextModel) {
+      if (nextModel.parent) {
+        parents.splice(0, 0, nextModel);
+      }
+      nextModel = nextModel.parent;
+    }
+  }
+  var handleSelectModel = function handleSelectModel(selectedModel) {
+    flowGraph.trigger('model:select', selectedModel);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.liteflowEditorBreadcrumb
+  }, /*#__PURE__*/React.createElement(Breadcrumb, null, /*#__PURE__*/React.createElement(Breadcrumb.Item, null, /*#__PURE__*/React.createElement(HomeOutlined, null)), parents.map(function (elNodeModel, index) {
+    var icon = getIconByType(elNodeModel.type);
+    var handleClick = function handleClick() {
+      flowGraph.cleanSelection();
+      flowGraph.select(elNodeModel.getNodes());
+      setSelectedModel(elNodeModel);
+      handleSelectModel(elNodeModel);
+    };
+    return /*#__PURE__*/React.createElement(Breadcrumb.Item, {
+      key: index,
+      onClick: handleClick
+    }, /*#__PURE__*/React.createElement("img", {
+      className: styles.liteflowEditorBreadcrumbIcon,
+      src: icon
+    }), /*#__PURE__*/React.createElement("span", null, elNodeModel.type));
+  })));
+};
+export default BreadcrumbPath;

package/dist/LiteFlowEditor/panels/breadcrumb/index.module.less

@@ -0,0 +1,23 @@
+.liteflowEditorBreadcrumb {
+  position: absolute;
+  left: 8px;
+  bottom: 12px;
+  height: 36px;
+  padding: 6px;
+  border-radius: 2px;
+  background-color: #fff;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
+  user-select: none;
+  .liteflowEditorBreadcrumbIcon {
+    width: 16px;
+    height: 16px;
+    margin-right: 4px;
+    margin-top: -4px;
+  }
+  :global {
+    .ant-breadcrumb-link {
+      cursor: pointer;
+      color: rgba(0, 0, 0, 0.65);
+    }
+  }
+}

package/dist/LiteFlowEditor/panels/flowGraph/contextMenu/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Graph } from '@antv/x6';
+interface IProps {
+    x: number;
+    y: number;
+    scene: string;
+    visible: boolean;
+    flowGraph: Graph;
+}
+declare const FlowGraphContextMenu: React.FC<IProps>;
+export default FlowGraphContextMenu;

package/dist/LiteFlowEditor/panels/flowGraph/contextMenu/index.js

@@ -0,0 +1,98 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import React, { useRef, useCallback } from 'react';
+import styles from "./index.module.less";
+import { Menu } from 'antd';
+import useClickAway from "../../../hooks/useClickAway";
+import { nodeMenuConfig, blankMenuConfig } from "./menuConfig";
+var menuConfigMap = {
+  node: nodeMenuConfig,
+  blank: blankMenuConfig
+};
+var FlowGraphContextMenu = function FlowGraphContextMenu(props) {
+  var menuRef = useRef(null);
+  var x = props.x,
+    y = props.y,
+    scene = props.scene,
+    visible = props.visible,
+    flowGraph = props.flowGraph;
+  var menuConfig = menuConfigMap[scene];
+  useClickAway(function () {
+    return onClickAway();
+  }, menuRef);
+  var onClickAway = useCallback(function () {
+    return flowGraph.trigger('graph:hideContextMenu');
+  }, [flowGraph]);
+  var onClickMenu = useCallback(function (_ref) {
+    var key = _ref.key;
+    var handlerMap = Helper.makeMenuHandlerMap(menuConfig);
+    var handler = handlerMap[key];
+    if (handler) {
+      onClickAway();
+      handler(flowGraph);
+    }
+  }, [flowGraph, menuConfig]);
+  return !visible ? null : /*#__PURE__*/React.createElement("div", {
+    ref: menuRef,
+    className: styles.liteflowEditorContextMenu,
+    style: {
+      left: x,
+      top: y
+    }
+  }, /*#__PURE__*/React.createElement(Menu, {
+    mode: 'vertical',
+    selectable: false,
+    onClick: onClickMenu
+  }, Helper.makeMenuContent(flowGraph, menuConfig)));
+};
+var Helper = {
+  makeMenuHandlerMap: function makeMenuHandlerMap(config) {
+    var queue = config.slice(0);
+    var handlerMap = {};
+    while (queue.length > 0) {
+      var _ref2 = queue.pop(),
+        _key = _ref2.key,
+        handler = _ref2.handler,
+        children = _ref2.children;
+      if (children && children.length > 0) {
+        queue.push.apply(queue, _toConsumableArray(children));
+      } else {
+        handlerMap[_key] = handler;
+      }
+    }
+    return handlerMap;
+  },
+  makeMenuContent: function makeMenuContent(flowGraph, menuConfig) {
+    var loop = function loop(config) {
+      return config.map(function (item) {
+        var content = null;
+        var key = item.key,
+          title = item.title,
+          icon = item.icon,
+          children = item.children,
+          _item$disabled = item.disabled,
+          disabled = _item$disabled === void 0 ? false : _item$disabled,
+          showDividerBehind = item.showDividerBehind;
+        if (typeof disabled === 'function') {
+          disabled = disabled(flowGraph);
+        }
+        if (children && children.length > 0) {
+          content = /*#__PURE__*/React.createElement(Menu.SubMenu, {
+            key: key,
+            icon: icon,
+            title: title,
+            disabled: disabled
+          }, loop(children));
+        } else {
+          content = /*#__PURE__*/React.createElement(Menu.Item, {
+            key: key,
+            icon: icon,
+            disabled: disabled
+          }, title);
+        }
+        return [content, showDividerBehind && /*#__PURE__*/React.createElement(Menu.Divider, null)];
+      });
+    };
+    return loop(menuConfig);
+  }
+};
+export default FlowGraphContextMenu;

package/dist/LiteFlowEditor/panels/flowGraph/contextMenu/index.module.less

@@ -0,0 +1,7 @@
+.liteflowEditorContextMenu {
+  z-index: 1003;
+  position: fixed;
+  min-width: 200px;
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05) !important;
+}

package/dist/LiteFlowEditor/panels/flowGraph/contextMenu/menuConfig/blank.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const blankMenuConfig: {
+    key: string;
+    title: string;
+    icon: React.JSX.Element;
+    handler: (flowGraph: import("@antv/x6").Graph) => void;
+}[];
+export default blankMenuConfig;

package/dist/LiteFlowEditor/panels/flowGraph/contextMenu/menuConfig/blank.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { shortcuts } from "../../../../common/shortcuts";
+import { SnippetsOutlined } from '@ant-design/icons';
+var blankMenuConfig = [{
+  key: 'selectAll',
+  title: '全选',
+  icon: /*#__PURE__*/React.createElement(SnippetsOutlined, null),
+  handler: shortcuts.selectAll.handler
+}
+// {
+//   key: 'paste',
+//   title: '粘贴',
+//   icon: <SnippetsOutlined />,
+//   disabled: (flowGraph: Graph) => flowGraph.isClipboardEmpty(),
+//   handler: shortcuts.paste.handler,
+// },
+];
+export default blankMenuConfig;

package/dist/LiteFlowEditor/panels/flowGraph/contextMenu/menuConfig/index.d.ts

@@ -0,0 +1,3 @@
+import nodeMenuConfig from './node';
+import blankMenuConfig from './blank';
+export { nodeMenuConfig, blankMenuConfig };

package/dist/LiteFlowEditor/panels/flowGraph/contextMenu/menuConfig/index.js

@@ -0,0 +1,3 @@
+import nodeMenuConfig from "./node";
+import blankMenuConfig from "./blank";
+export { nodeMenuConfig, blankMenuConfig };

package/dist/LiteFlowEditor/panels/flowGraph/contextMenu/menuConfig/node.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Graph } from '@antv/x6';
+declare const nodeMenuConfig: {
+    key: string;
+    title: string;
+    icon: React.JSX.Element;
+    handler: (flowGraph: Graph) => void;
+}[];
+export default nodeMenuConfig;

package/dist/LiteFlowEditor/panels/flowGraph/contextMenu/menuConfig/node.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DeleteOutlined } from '@ant-design/icons';
+import { shortcuts } from "../../../../common/shortcuts";
+var nodeMenuConfig = [{
+  key: 'delete',
+  title: '删除',
+  icon: /*#__PURE__*/React.createElement(DeleteOutlined, null),
+  handler: shortcuts.delete.handler
+}];
+export default nodeMenuConfig;

package/dist/LiteFlowEditor/panels/flowGraph/contextPad/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Edge, Node, Graph } from '@antv/x6';
+interface IProps {
+    x: number;
+    y: number;
+    edge?: Edge;
+    node?: Node;
+    scene?: IContextPadScene;
+    title?: string;
+    visible: boolean;
+    flowGraph: Graph;
+}
+declare const FlowGraphContextPad: React.FC<IProps>;
+export default FlowGraphContextPad;

package/dist/LiteFlowEditor/panels/flowGraph/contextPad/index.js

@@ -0,0 +1,108 @@
+import React, { useRef, useCallback, useContext } from 'react';
+import { message } from 'antd';
+import useClickAway from "../../../hooks/useClickAway";
+import { NODE_GROUP, SEQUENCE_GROUP,
+// BRANCH_GROUP,
+CONTROL_GROUP
+// OTHER_GROUP,
+} from "../../../cells";
+import ELBuilder from "../../../model/builder";
+import { history } from "../../../hooks/useHistory";
+import styles from "./index.module.less";
+import { useTranslation } from 'react-i18next';
+import { GraphContext } from "../../../context/GraphContext";
+var groups = [NODE_GROUP, SEQUENCE_GROUP, /*BRANCH_GROUP,*/CONTROL_GROUP /*OTHER_GROUP*/];
+var FlowGraphContextPad = function FlowGraphContextPad(props) {
+  var menuRef = useRef(null);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useContext = useContext(GraphContext),
+    chainObject = _useContext.chainObject;
+  var x = props.x,
+    y = props.y,
+    visible = props.visible,
+    flowGraph = props.flowGraph,
+    edge = props.edge,
+    node = props.node,
+    _props$scene = props.scene,
+    scene = _props$scene === void 0 ? 'append' : _props$scene,
+    _props$title = props.title,
+    title = _props$title === void 0 ? t('insert_node') : _props$title;
+  useClickAway(function () {
+    return onClickAway();
+  }, menuRef);
+  var onClickAway = useCallback(function () {
+    return flowGraph.trigger('graph:hideContextPad');
+  }, [flowGraph]);
+  var onClickMenu = useCallback(function (cellType) {
+    if (edge) {
+      if (!chainObject.hasPermission) {
+        return message.warning(t('no_permission_tips_add_node'));
+      }
+      var targetNode = edge.getTargetNode();
+      var _ref = (targetNode === null || targetNode === void 0 ? void 0 : targetNode.getData()) || {},
+        targetModel = _ref.model;
+      var sourceNode = edge.getSourceNode();
+      var _ref2 = (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.getData()) || {},
+        sourceModel = _ref2.model;
+      var inComingEdgesLength = (flowGraph.getIncomingEdges(targetNode) || []).length;
+      if (inComingEdgesLength > 1 || sourceModel && targetModel !== null && targetModel !== void 0 && targetModel.isParentOf(sourceModel)) {
+        sourceModel === null || sourceModel === void 0 || sourceModel.append(ELBuilder.createELNode(cellType.type, targetModel));
+      } else {
+        targetModel === null || targetModel === void 0 || targetModel.prepend(ELBuilder.createELNode(cellType.type, targetModel));
+      }
+      history.push();
+    } else if (node) {
+      var _ref3 = node.getData() || {},
+        model = _ref3.model;
+      if (scene === 'prepend') {
+        model.prepend(ELBuilder.createELNode(cellType.type, model));
+      } else if (scene === 'replace') {
+        model.replace(ELBuilder.createELNode(cellType.type, model));
+      } else {
+        model.append(ELBuilder.createELNode(cellType.type, model));
+      }
+      history.push();
+    }
+    onClickAway();
+  }, [flowGraph, edge, node]);
+  return !visible ? null : /*#__PURE__*/React.createElement("div", {
+    ref: menuRef,
+    className: styles.liteflowEditorContextPad,
+    style: {
+      left: x,
+      top: y
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.liteflowEditorContextPadHeader
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: styles.liteflowEditorContextPadTitle
+  }, t(title))), /*#__PURE__*/React.createElement("div", {
+    className: styles.liteflowEditorContextPadBody
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.liteflowEditorContextPadResults
+  }, groups.map(function (group) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: group.key,
+      className: styles.liteflowEditorContextPadGroup
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.liteflowEditorContextPadGroupName
+    }, t(group.name)), /*#__PURE__*/React.createElement("div", {
+      className: styles.liteflowEditorContextPadGroupItems
+    }, group.cellTypes.map(function (cellType, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: index,
+        className: styles.liteflowEditorContextPadGroupItem,
+        onClick: function onClick() {
+          onClickMenu(cellType);
+        }
+      }, /*#__PURE__*/React.createElement("img", {
+        className: styles.liteflowEditorContextPadGroupItemIcon,
+        src: cellType.icon
+      }), /*#__PURE__*/React.createElement("div", {
+        className: styles.liteflowEditorContextPadGroupItemLabel
+      }, t(cellType.label)));
+    })));
+  }))));
+};
+export default FlowGraphContextPad;

package/dist/LiteFlowEditor/panels/flowGraph/contextPad/index.module.less

@@ -0,0 +1,81 @@
+.liteflowEditorContextPad {
+  z-index: 1003;
+  position: fixed;
+  min-width: 200px;
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05) !important;
+  background: #fff;
+  text-align: left !important;
+  .liteflowEditorContextPadHeader {
+    display: flex;
+    align-items: stretch;
+    line-height: 20px;
+    margin: 10px 12px 10px 12px;
+    .liteflowEditorContextPadTitle {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 14px;
+    }
+  }
+  .liteflowEditorContextPadBody {
+    .liteflowEditorContextPadSearch {
+      margin: 10px 12px;
+    }
+    .liteflowEditorContextPadResults {
+      margin: 7px 3px 7px 12px;
+      max-height: 280px;
+      overflow: auto;
+      padding-right: 9px;
+      .liteflowEditorContextPadGroup {
+        .liteflowEditorContextPadGroupName {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          color: rgba(0, 0, 0, 0.45);
+          font-size: 12px;
+          padding: 5px 12px;
+          min-height: 32px;
+        }
+        .liteflowEditorContextPadGroupItems {
+          .liteflowEditorContextPadGroupItem {
+            display: flex;
+            min-height: 32px;
+            padding: 5px 12px;
+            color: rgba(0, 0, 0, 0.88);
+            font-size: 14px;
+            line-height: 1.5;
+            cursor: pointer;
+            &:hover {
+              background-color: rgba(0, 0, 0, 0.04);
+            }
+            .liteflowEditorContextPadGroupItemIcon {
+              margin-right: 8px;
+            }
+            .liteflowEditorContextPadGroupItemLabel {
+              flex: auto;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+      }
+    }
+  }
+  :global {
+    *::-webkit-scrollbar {
+      width: 6px;
+    }
+    *::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+      background-color: rgba(0, 0, 0, 0.2);
+    }
+    *::-webkit-scrollbar-track {
+      box-shadow: none;
+      background: transparent;
+      margin: 0;
+      padding: 5px;
+    }
+  }
+}

package/dist/LiteFlowEditor/panels/flowGraph/createFlowGraph.d.ts

@@ -0,0 +1,3 @@
+import { Graph } from '@antv/x6';
+declare const createFlowChart: (container: HTMLDivElement, miniMapContainer: HTMLDivElement) => Graph;
+export default createFlowChart;

package/dist/LiteFlowEditor/panels/flowGraph/createFlowGraph.js

@@ -0,0 +1,199 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Button } from 'antd';
+import { Graph, NodeView } from '@antv/x6';
+import { debounce } from 'lodash';
+import { MIN_ZOOM, MAX_ZOOM, NODE_TYPE_START, NODE_TYPE_END, NODE_TYPE_INTERMEDIATE_END } from "../../constant";
+// import MiniMapSimpleNode from './miniMapSimpleNode';
+import { LITEFLOW_ANCHOR, LITEFLOW_ROUTER, registerEvents, registerShortcuts } from "../../common";
+var createFlowChart = function createFlowChart(container, miniMapContainer) {
+  var flowGraph = new Graph({
+    autoResize: true,
+    container: container,
+    rotating: false,
+    resizing: false,
+    onEdgeLabelRendered: function onEdgeLabelRendered(args) {
+      var edge = args.edge,
+        selectors = args.selectors,
+        label = args.label;
+      // console.log('onEdgeLabelRendered', edge, selectors, label);
+      var content = selectors.foContent;
+      if (content) {
+        var _label$attrs;
+        content.style.display = 'flex';
+        content.style.alignItems = 'center';
+        content.style.justifyContent = 'center';
+        content.style.overflow = 'hidden';
+        if ((label === null || label === void 0 || (_label$attrs = label.attrs) === null || _label$attrs === void 0 ? void 0 : _label$attrs.label.text) === '+') {
+          var showContextPad = debounce(function (info) {
+            flowGraph.trigger('graph:showContextPad', info);
+          }, 100);
+          var handleOnClick = function handleOnClick(event) {
+            showContextPad({
+              x: event.clientX,
+              y: event.clientY,
+              edge: edge
+            });
+          };
+          ReactDOM.render( /*#__PURE__*/React.createElement(Button, {
+            size: "small",
+            onClick: handleOnClick,
+            className: "liteflow-edge-add-button"
+          }, "+"), content);
+        } else {
+          var _label$attrs2;
+          content.appendChild(document.createTextNode((label === null || label === void 0 || (_label$attrs2 = label.attrs) === null || _label$attrs2 === void 0 ? void 0 : _label$attrs2.label.text) + ''));
+        }
+      }
+    },
+    // https://x6.antv.vision/zh/docs/tutorial/basic/clipboard
+    // clipboard: {
+    //   enabled: true,
+    //   useLocalStorage: true,
+    // },
+    // https://x6.antv.vision/zh/docs/tutorial/intermediate/connector
+    connecting: {
+      snap: true,
+      allowBlank: false,
+      allowLoop: false,
+      allowNode: false,
+      allowEdge: false,
+      dangling: true,
+      highlight: true,
+      anchor: LITEFLOW_ANCHOR,
+      // LITEFLOW_ANCHOR, // 'center',
+      connectionPoint: 'bbox',
+      connector: {
+        name: 'rounded',
+        //两条线交叉时，出现线桥。
+        args: {
+          radius: 8
+        }
+      },
+      router: LITEFLOW_ROUTER,
+      // LITEFLOW_ROUTER, // 'normal',
+      validateEdge: function validateEdge(args) {
+        var _edge$target;
+        var edge = args.edge;
+        return !!(edge !== null && edge !== void 0 && (_edge$target = edge.target) !== null && _edge$target !== void 0 && _edge$target.port);
+      },
+      validateConnection: function validateConnection(_ref) {
+        var sourceView = _ref.sourceView,
+          targetView = _ref.targetView,
+          sourceMagnet = _ref.sourceMagnet,
+          targetMagnet = _ref.targetMagnet;
+        if (!sourceMagnet) {
+          return false;
+        } else if (!targetMagnet) {
+          return false;
+        } else {
+          return sourceView !== targetView;
+        }
+      }
+    },
+    // https://x6.antv.vision/zh/docs/tutorial/basic/background
+    background: {
+      color: '#f4f7fc'
+    },
+    // https://x6.antv.vision/zh/docs/tutorial/basic/grid
+    grid: {
+      visible: true
+    },
+    // https://x6.antv.vision/zh/docs/tutorial/basic/selection
+    selecting: {
+      enabled: true,
+      rubberband: false,
+      // 启用框选
+      movable: true,
+      multiple: true,
+      strict: true,
+      showNodeSelectionBox: true,
+      selectNodeOnMoved: true,
+      pointerEvents: 'none',
+      filter: function filter(cell) {
+        var noShapeList = [NODE_TYPE_START, NODE_TYPE_END, NODE_TYPE_INTERMEDIATE_END, 'WHEN'];
+        return cell.isNode() && !noShapeList.includes(cell.shape);
+      }
+    },
+    // https://x6.antv.vision/zh/docs/tutorial/basic/snapline
+    snapline: {
+      enabled: true,
+      clean: 100
+    },
+    // https://x6.antv.vision/zh/docs/tutorial/basic/keyboard
+    keyboard: {
+      enabled: true,
+      global: false
+    },
+    // https://x6.antv.vision/zh/docs/tutorial/basic/history
+    history: {
+      enabled: true,
+      beforeAddCommand: function beforeAddCommand(event, args) {
+        if (args.options) {
+          return args.options.ignore !== true;
+        }
+      }
+    },
+    // https://x6.antv.vision/zh/docs/tutorial/basic/minimap
+    minimap: {
+      width: 150,
+      height: 150,
+      minScale: MIN_ZOOM,
+      maxScale: MAX_ZOOM,
+      enabled: true,
+      scalable: false,
+      container: miniMapContainer,
+      graphOptions: {
+        async: true,
+        getCellView: function getCellView(cell) {
+          if (cell.isNode()) {
+            return NodeView.registry.get('react-shape-view');
+            // return MiniMapSimpleNode;
+          }
+        },
+        createCellView: function createCellView(cell) {
+          if (cell.isEdge()) {
+            return null;
+          }
+        }
+      }
+    },
+    // https://x6.antv.vision/zh/docs/tutorial/basic/scroller
+    scroller: {
+      enabled: true,
+      pageVisible: false,
+      pageBreak: false,
+      pannable: true,
+      autoResize: true
+    },
+    mousewheel: {
+      enabled: true,
+      minScale: MIN_ZOOM,
+      maxScale: MAX_ZOOM,
+      modifiers: ['ctrl', 'meta']
+    },
+    // embedding: {
+    //   enabled: true,
+    //   findParent({ node }) {
+    //     const bbox = node.getBBox();
+    //     return this.getNodes().filter((grahpNode) => {
+    //       const nodeData = grahpNode.getData();
+    //       if (nodeData && nodeData.parent) {
+    //         const targetBBox = grahpNode.getBBox();
+    //         return bbox.isIntersectWithRect(targetBBox);
+    //       }
+    //       return false;
+    //     });
+    //   },
+    //   frontOnly: false,
+    // },
+    interacting: {
+      nodeMovable: true,
+      edgeLabelMovable: false
+    }
+  });
+  registerEvents(flowGraph);
+  registerShortcuts(flowGraph);
+  return flowGraph;
+};
+export default createFlowChart;