@nocobase/plugin-graph-collection-manager 0.11.1-alpha.5 → 0.12.0-alpha.2

package/lib/client/GraphDrawPage.js

@@ -1,1546 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GraphDrawPage = exports.DirectionType = exports.ConnectionType = void 0;
-function _icons() {
-  const data = require("@ant-design/icons");
-  _icons = function _icons() {
-    return data;
-  };
-  return data;
-}
-function _x4() {
-  const data = require("@antv/x6");
-  _x4 = function _x4() {
-    return data;
-  };
-  return data;
-}
-require("@antv/x6-react-shape");
-function _react() {
-  const data = require("@formily/react");
-  _react = function _react() {
-    return data;
-  };
-  return data;
-}
-function _client() {
-  const data = require("@nocobase/client");
-  _client = function _client() {
-    return data;
-  };
-  return data;
-}
-function _client2() {
-  const data = require("@nocobase/utils/client");
-  _client2 = function _client2() {
-    return data;
-  };
-  return data;
-}
-function _ahooks() {
-  const data = require("ahooks");
-  _ahooks = function _ahooks() {
-    return data;
-  };
-  return data;
-}
-function _antd() {
-  const data = require("antd");
-  _antd = function _antd() {
-    return data;
-  };
-  return data;
-}
-function _dagre() {
-  const data = _interopRequireDefault(require("dagre"));
-  _dagre = function _dagre() {
-    return data;
-  };
-  return data;
-}
-function _react2() {
-  const data = _interopRequireWildcard(require("react"));
-  _react2 = function _react2() {
-    return data;
-  };
-  return data;
-}
-var _actionHooks = require("./action-hooks");
-var _AddCollectionAction = require("./components/AddCollectionAction");
-var _Entity = _interopRequireDefault(require("./components/Entity"));
-var _ViewNode = require("./components/ViewNode");
-var _style = _interopRequireDefault(require("./style"));
-var _utils = require("./utils");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-const drop = _client2().lodash.drop,
-  groupBy = _client2().lodash.groupBy,
-  last = _client2().lodash.last,
-  maxBy = _client2().lodash.maxBy,
-  minBy = _client2().lodash.minBy,
-  take = _client2().lodash.take;
-const LINE_HEIGHT = 40;
-const NODE_WIDTH = 250;
-let targetGraph;
-let targetNode;
-const dir = 'TB'; // LR RL TB BT 横排
-var DirectionType;
-exports.DirectionType = DirectionType;
-(function (DirectionType) {
-  DirectionType["Both"] = "both";
-  DirectionType["Target"] = "target";
-  DirectionType["Source"] = "source";
-})(DirectionType || (exports.DirectionType = DirectionType = {}));
-var ConnectionType;
-exports.ConnectionType = ConnectionType;
-(function (ConnectionType) {
-  ConnectionType["Both"] = "both";
-  ConnectionType["Inherit"] = "inherited";
-  ConnectionType["Entity"] = "entity";
-})(ConnectionType || (exports.ConnectionType = ConnectionType = {}));
-const getGridData = (num, arr) => {
-  const newArr = [];
-  while (arr.length > 0 && num) {
-    newArr.push(arr.splice(0, num));
-  }
-  return newArr;
-};
-//初始布局
-function layout(_x) {
-  return _layout.apply(this, arguments);
-}
-function _layout() {
-  _layout = _asyncToGenerator(function* (createPositions) {
-    const _targetGraph10 = targetGraph,
-      positions = _targetGraph10.positions;
-    let graphPositions = [];
-    const nodes = targetGraph.getNodes();
-    const edges = targetGraph.getEdges();
-    const g = new (_dagre().default.graphlib.Graph)();
-    g.setGraph({
-      rankdir: dir,
-      nodesep: 50,
-      edgesep: 50,
-      rankSep: 50,
-      align: 'DL',
-      controlPoints: true
-    });
-    g.setDefaultEdgeLabel(() => ({}));
-    nodes.forEach((node, i) => {
-      const width = NODE_WIDTH;
-      const height = node.getPorts().length * 32 + 30;
-      g.setNode(node.id, {
-        width,
-        height
-      });
-    });
-    _dagre().default.layout(g);
-    targetGraph.freeze();
-    const dNodes = getGridData(15, g.nodes());
-    dNodes.forEach((arr, row) => {
-      arr.forEach((id, index) => {
-        const node = targetGraph.getCell(id);
-        const col = index % 15;
-        if (node) {
-          const targetPosition = positions && positions.find(v => {
-            return v.collectionName === node.store.data.name;
-          }) || {};
-          const calculatedPosition = {
-            x: col * 325 + 50,
-            y: row * 400 + 60
-          };
-          node.position(targetPosition.x || calculatedPosition.x, targetPosition.y || calculatedPosition.y);
-          if (positions && !positions.find(v => v.collectionName === node.store.data.name)) {
-            // 位置表中没有的表都自动保存
-            graphPositions.push({
-              collectionName: node.store.data.name,
-              x: calculatedPosition.x,
-              y: calculatedPosition.y
-            });
-          }
-        }
-      });
-    });
-    edges.forEach(edge => {
-      optimizeEdge(edge);
-    });
-    targetGraph.unfreeze();
-    if (targetNode) {
-      typeof targetNode === 'string' ? targetGraph.positionCell(last(nodes), 'top', {
-        padding: 100
-      }) : targetGraph.positionCell(targetNode, 'top', {
-        padding: 100
-      });
-    } else {
-      targetGraph.positionCell(nodes[0], 'top-left', {
-        padding: 100
-      });
-    }
-    if (graphPositions.length > 0) {
-      yield createPositions(graphPositions);
-      graphPositions = [];
-    }
-  });
-  return _layout.apply(this, arguments);
-}
-function optimizeEdge(edge) {
-  const connectionType = edge.store.data.connectionType;
-  const source = edge.getSource();
-  const target = edge.getTarget();
-  const sorceNodeX = targetGraph.getCell(source.cell).position().x;
-  const targeNodeX = targetGraph.getCell(target.cell).position().x;
-  const leftAnchor = connectionType ? {
-    name: 'topLeft',
-    args: {
-      dy: -20
-    }
-  } : {
-    name: 'left'
-  };
-  const rightAnchor = connectionType ? {
-    name: 'topRight',
-    args: {
-      dy: -20
-    }
-  } : 'right';
-  const router = connectionType ? 'normal' : 'er';
-  const vertices = edge.getVertices();
-  vertices.forEach(() => {
-    return edge.removeVertexAt(0);
-  });
-  if (sorceNodeX - 100 > targeNodeX) {
-    edge.setSource({
-      cell: source.cell,
-      port: source.port,
-      anchor: leftAnchor
-    });
-    edge.setTarget({
-      cell: target.cell,
-      port: target.port,
-      anchor: rightAnchor
-    });
-    edge.setRouter(router, {
-      direction: 'H'
-    });
-  } else if (Math.abs(sorceNodeX - targeNodeX) < 100) {
-    const sourceCell = targetGraph.getCell(source.cell);
-    const targetCell = targetGraph.getCell(target.cell);
-    edge.setSource({
-      cell: source.cell,
-      port: source.port,
-      anchor: leftAnchor
-    });
-    edge.setTarget({
-      cell: target.cell,
-      port: target.port,
-      anchor: leftAnchor
-    });
-    if (connectionType) {
-      edge.setVertices([{
-        x: sourceCell.position().x - 30,
-        y: sourceCell.position().y + 20
-      }, {
-        x: targetCell.position().x - 30,
-        y: targetCell.position().y + 20
-      }]);
-      edge.setRouter('normal');
-    } else {
-      edge.setRouter('oneSide', {
-        side: 'left'
-      });
-    }
-  } else {
-    edge.setSource({
-      cell: source.cell,
-      port: source.port,
-      anchor: rightAnchor
-    });
-    edge.setTarget({
-      cell: target.cell,
-      port: target.port,
-      anchor: leftAnchor
-    });
-    edge.setRouter(router, {
-      direction: 'H'
-    });
-  }
-}
-function getNodes(nodes) {
-  targetGraph.addNodes(nodes);
-}
-function getEdges(edges) {
-  edges.forEach(item => {
-    if (item.source && item.target) {
-      targetGraph.addEdge(_objectSpread(_objectSpread({}, item), {}, {
-        connector: {
-          name: 'normal',
-          zIndex: 1000
-        }
-      }));
-    }
-  });
-}
-const CollapsedContext = (0, _react2().createContext)({});
-const formatNodeData = () => {
-  const layoutNodes = [];
-  const edges = targetGraph.getEdges();
-  const nodes = targetGraph.getNodes();
-  edges.forEach(edge => {
-    layoutNodes.push(edge.getSourceCellId());
-    layoutNodes.push(edge.getTargetCellId());
-  });
-  const nodeGroup = groupBy(nodes, v => {
-    if (layoutNodes.includes(v.id)) {
-      return 'linkNodes';
-    } else {
-      return 'rawNodes';
-    }
-  });
-  return nodeGroup;
-};
-//自动布局
-const handelResetLayout = () => {
-  const _formatNodeData = formatNodeData(),
-    _formatNodeData$linkN = _formatNodeData.linkNodes,
-    linkNodes = _formatNodeData$linkN === void 0 ? [] : _formatNodeData$linkN,
-    rawNodes = _formatNodeData.rawNodes;
-  const _targetGraph = targetGraph,
-    positions = _targetGraph.positions;
-  const nodes = linkNodes.concat(rawNodes);
-  const edges = targetGraph.getEdges();
-  const g = new (_dagre().default.graphlib.Graph)();
-  let alternateNum;
-  let rawEntity;
-  let num;
-  let minX;
-  let maxY;
-  const updatePositionData = [];
-  g.setGraph({
-    rankdir: 'TB',
-    nodesep: 50,
-    edgesep: 50,
-    rankSep: 50,
-    align: 'DL',
-    controlPoints: true
-  });
-  const width = 250;
-  const height = 400;
-  nodes.forEach(node => {
-    g.setNode(node.id, {
-      width,
-      height
-    });
-  });
-  edges.forEach(edge => {
-    const source = edge.getSource();
-    const target = edge.getTarget();
-    g.setEdge(source.cell, target.cell, {});
-  });
-  _dagre().default.layout(g);
-  targetGraph.freeze();
-  const gNodes = g.nodes();
-  const nodeWithEdges = take(gNodes, linkNodes.length);
-  const nodeWithoutEdges = drop(gNodes, linkNodes.length);
-  nodeWithEdges.forEach(id => {
-    var _positions$find;
-    const node = targetGraph.getCell(id);
-    const positionId = (_positions$find = positions.find(v => v.collectionName === node.id)) === null || _positions$find === void 0 ? void 0 : _positions$find.id;
-    if (node) {
-      const pos = g.node(id);
-      updatePositionData.push({
-        id: positionId,
-        x: pos.x,
-        y: pos.y
-      });
-      node.position(pos === null || pos === void 0 ? void 0 : pos.x, pos === null || pos === void 0 ? void 0 : pos.y);
-    }
-  });
-  if (nodeWithEdges.length) {
-    var _targetGraph$getCell;
-    maxY = targetGraph.getCellById(maxBy(nodeWithEdges, k => {
-      return targetGraph.getCellById(k).position().y;
-    })).position().y;
-    minX = targetGraph.getCellById(minBy(nodeWithEdges, k => {
-      return targetGraph.getCellById(k).position().x;
-    })).position().x;
-    const maxX = targetGraph.getCellById(maxBy(nodeWithEdges, k => {
-      return targetGraph.getCellById(k).position().x;
-    })).position().x;
-    const yNodes = nodeWithEdges.filter(v => {
-      return Math.abs(targetGraph.getCellById(v).position().y - maxY) < 50;
-    });
-    const referenceNode = (_targetGraph$getCell = targetGraph.getCell(maxBy(yNodes, k => targetGraph.getCellById(k).position().x))) === null || _targetGraph$getCell === void 0 ? void 0 : _targetGraph$getCell.position();
-    num = Math.round(maxX / 320) || 1;
-    alternateNum = Math.floor((4500 - (maxX + 100 - referenceNode.x)) / 280);
-    rawEntity = getGridData(num, rawNodes);
-    if (alternateNum >= 1) {
-      const alternateNodes = take(nodeWithoutEdges, alternateNum);
-      rawEntity = getGridData(num, drop(nodeWithoutEdges, alternateNum));
-      alternateNodes.forEach((id, index) => {
-        const node = targetGraph.getCell(id);
-        if (node) {
-          var _positions$find2;
-          const calculatedPosition = {
-            x: referenceNode.x + 320 * index + 280,
-            y: referenceNode.y
-          };
-          node.position(calculatedPosition.x, calculatedPosition.y);
-          const positionId = (_positions$find2 = positions.find(v => v.collectionName === node.id)) === null || _positions$find2 === void 0 ? void 0 : _positions$find2.id;
-          updatePositionData.push({
-            id: positionId,
-            x: calculatedPosition.x,
-            y: calculatedPosition.y
-          });
-        }
-      });
-    }
-  } else {
-    num = 15;
-    alternateNum = 0;
-    rawEntity = getGridData(15, rawNodes);
-    minX = 50;
-    maxY = 50;
-  }
-  rawEntity.forEach((arr, row) => {
-    arr.forEach((id, index) => {
-      const node = targetGraph.getCell(id);
-      const col = index % num;
-      if (node) {
-        var _positions$find3;
-        const calculatedPosition = {
-          x: col * 325 + minX,
-          y: row * 300 + maxY + 300
-        };
-        node.position(calculatedPosition.x, calculatedPosition.y);
-        const positionId = (_positions$find3 = positions.find(v => v.collectionName === node.id)) === null || _positions$find3 === void 0 ? void 0 : _positions$find3.id;
-        updatePositionData.push({
-          id: positionId,
-          x: calculatedPosition.x,
-          y: calculatedPosition.y
-        });
-      }
-    });
-  });
-  edges.forEach(edge => {
-    optimizeEdge(edge);
-  });
-  targetGraph.unfreeze();
-  targetGraph.positionCell(nodes[0], 'top-left', {
-    padding: 100
-  });
-  targetGraph.updatePositionAction(updatePositionData, true);
-};
-const GraphDrawPage = _react2().default.memo(() => {
-  var _targetGraph7;
-  const _useGlobalTheme = (0, _client().useGlobalTheme)(),
-    theme = _useGlobalTheme.theme;
-  const _useStyles = (0, _style.default)(),
-    styles = _useStyles.styles;
-  const options = (0, _react2().useContext)(_react().SchemaOptionsContext);
-  const ctx = (0, _react2().useContext)(_client().CollectionManagerContext);
-  const api = (0, _client().useAPIClient)();
-  const compile = (0, _client().useCompile)();
-  const _useGCMTranslation = (0, _utils.useGCMTranslation)(),
-    t = _useGCMTranslation.t;
-  const _useState = (0, _react2().useState)([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    collectionData = _useState2[0],
-    setCollectionData = _useState2[1];
-  const _useState3 = (0, _react2().useState)([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    collectionList = _useState4[0],
-    setCollectionList = _useState4[1];
-  const _useCollectionManager = (0, _client().useCollectionManager)(),
-    refreshCM = _useCollectionManager.refreshCM;
-  const _useCurrentAppInfo = (0, _client().useCurrentAppInfo)(),
-    database = _useCurrentAppInfo.data.database;
-  const categoryCtx = (0, _react2().useContext)(_client().CollectionCategroriesContext);
-  const scope = _objectSpread({}, options === null || options === void 0 ? void 0 : options.scope);
-  const components = _objectSpread({}, options === null || options === void 0 ? void 0 : options.components);
-  const useSaveGraphPositionAction = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(function* (data) {
-      yield api.resource('graphPositions').create({
-        values: data
-      });
-      yield refreshPositions();
-    });
-    return function useSaveGraphPositionAction(_x2) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-  const useUpdatePositionAction = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(function* (data, isbatch = false) {
-      if (isbatch) {
-        yield api.resource('graphPositions').update({
-          values: data
-        });
-      } else {
-        yield api.resource('graphPositions').update({
-          filter: {
-            collectionName: data.collectionName
-          },
-          values: _objectSpread({}, data)
-        });
-      }
-      yield refreshPositions();
-    });
-    return function useUpdatePositionAction(_x3) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  const refreshPositions = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(function* () {
-      const _yield$api$resource$l = yield api.resource('graphPositions').list({
-          paginate: false
-        }),
-        data = _yield$api$resource$l.data;
-      targetGraph.positions = data.data;
-      return Promise.resolve();
-    });
-    return function refreshPositions() {
-      return _ref3.apply(this, arguments);
-    };
-  }();
-  const setTargetNode = node => {
-    targetNode = node;
-    if (node === 'destory') {
-      refreshPositions();
-    }
-  };
-  const refreshGM = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator(function* () {
-      const data = yield refreshCM();
-      targetGraph.collections = data;
-      targetGraph.updatePositionAction = useUpdatePositionAction;
-      const currentNodes = targetGraph.getNodes();
-      setCollectionData(data);
-      setCollectionList(data);
-      if (!currentNodes.length) {
-        renderInitGraphCollection(data);
-      } else {
-        renderDiffGraphCollection(data);
-      }
-    });
-    return function refreshGM() {
-      return _ref4.apply(this, arguments);
-    };
-  }();
-  const initGraphCollections = () => {
-    targetGraph = new (_x4().Graph)({
-      container: document.getElementById('container'),
-      moveThreshold: 0,
-      scroller: {
-        enabled: true,
-        pannable: true,
-        padding: {
-          top: 0,
-          left: 500,
-          right: 300,
-          bottom: 400
-        }
-      },
-      selecting: {
-        enabled: false,
-        multiple: true,
-        rubberband: true,
-        movable: true,
-        className: 'node-selecting',
-        modifiers: 'shift'
-      },
-      minimap: {
-        enabled: true,
-        container: document.getElementById('graph-minimap'),
-        width: 300,
-        height: 250,
-        padding: 10,
-        graphOptions: {
-          async: true,
-          getCellView(cell) {
-            if (cell.isNode()) {
-              return _ViewNode.SimpleNodeView;
-            }
-          },
-          createCellView(cell) {
-            if (cell.isEdge()) {
-              return null;
-            }
-          }
-        }
-      },
-      connecting: {
-        anchor: {
-          name: 'midSide'
-        }
-      },
-      mousewheel: {
-        enabled: true,
-        modifiers: ['ctrl', 'meta']
-      },
-      snapline: {
-        enabled: !0
-      },
-      keyboard: {
-        enabled: false
-      },
-      clipboard: {
-        enabled: false
-      },
-      interacting: {
-        magnetConnectable: false
-      },
-      async: true,
-      preventDefaultBlankAction: true
-    });
-    targetGraph.connectionType = ConnectionType.Both;
-    targetGraph.direction = DirectionType.Target;
-    targetGraph.cacheCollection = {};
-    _x4().Graph.registerPortLayout('erPortPosition', portsPositionArgs => {
-      return portsPositionArgs.map((_, index) => {
-        return {
-          position: {
-            x: 0,
-            y: (index + 1) * LINE_HEIGHT
-          },
-          angle: 0
-        };
-      });
-    }, true);
-    _x4().Graph.registerNode('er-rect', {
-      inherit: 'react-shape',
-      component: node => {
-        var _targetGraph2;
-        return _react2().default.createElement(_client().CurrentAppInfoContext.Provider, {
-          value: database
-        }, _react2().default.createElement(_client().APIClientProvider, {
-          apiClient: api
-        }, _react2().default.createElement(_client().SchemaComponentOptions, {
-          inherit: true,
-          scope: scope,
-          components: components
-        }, _react2().default.createElement(_client().CollectionCategroriesProvider, _objectSpread({}, categoryCtx), _react2().default.createElement(_client().CollectionManagerProvider, {
-          collections: (_targetGraph2 = targetGraph) === null || _targetGraph2 === void 0 ? void 0 : _targetGraph2.collections,
-          refreshCM: refreshGM,
-          interfaces: ctx.interfaces
-        }, _react2().default.createElement(_antd().ConfigProvider, {
-          theme: theme
-        }, _react2().default.createElement("div", {
-          style: {
-            height: 'auto'
-          }
-        }, _react2().default.createElement(_Entity.default, {
-          node: node,
-          setTargetNode: setTargetNode,
-          targetGraph: targetGraph
-        }))))))));
-      },
-      ports: {
-        groups: {
-          list: {
-            markup: [{
-              tagName: 'rect',
-              selector: 'portBody'
-            }],
-            attrs: {
-              portBody: {
-                width: NODE_WIDTH,
-                height: LINE_HEIGHT,
-                strokeWidth: 1,
-                // magnet: true,
-                visibility: 'hidden'
-              }
-            },
-            position: 'erPortPosition'
-          }
-        }
-      },
-      body: {
-        refWidth: 100,
-        refHeight: 100
-      }
-    }, true);
-    targetGraph.on('edge:mouseleave', ({
-      e,
-      edge: targetEdge
-    }) => {
-      e.stopPropagation();
-      handleEdgeUnActive(targetEdge);
-    });
-    targetGraph.on('node:moved', ({
-      e,
-      node
-    }) => {
-      e.stopPropagation();
-      const connectEdges = targetGraph.getConnectedEdges(node);
-      const currentPosition = node.position();
-      const oldPosition = targetGraph.positions.find(v => v.collectionName === node.store.data.name);
-      if (oldPosition) {
-        (oldPosition.x !== currentPosition.x || oldPosition.y !== currentPosition.y) && useUpdatePositionAction(_objectSpread({
-          collectionName: node.store.data.name
-        }, currentPosition));
-      } else {
-        useSaveGraphPositionAction(_objectSpread({
-          collectionName: node.store.data.name
-        }, currentPosition));
-      }
-      connectEdges.forEach(edge => {
-        optimizeEdge(edge);
-      });
-    });
-    targetGraph.on('cell:mouseenter', ({
-      e,
-      cell,
-      edge
-    }) => {
-      e.stopPropagation();
-      cell.toFront();
-      if (edge) {
-        handleEdgeActive(edge);
-      }
-    });
-    targetGraph.on('blank:click', e => {
-      var _targetGraph3, _targetGraph$collapse;
-      if ((_targetGraph3 = targetGraph) !== null && _targetGraph3 !== void 0 && _targetGraph3.activeEdge) {
-        var _targetGraph4;
-        handleEdgeUnActive((_targetGraph4 = targetGraph) === null || _targetGraph4 === void 0 ? void 0 : _targetGraph4.activeEdge);
-      }
-      (_targetGraph$collapse = targetGraph.collapseNodes) === null || _targetGraph$collapse === void 0 ? void 0 : _targetGraph$collapse.map(v => {
-        const node = targetGraph.getCell(Object.keys(v)[0]);
-        Object.values(v)[0] && node.setData({
-          collapse: false
-        });
-      });
-      targetGraph.cleanSelection();
-    });
-    targetGraph.on('node:selected', ({
-      e,
-      node
-    }) => {
-      node.setProp({
-        select: true
-      });
-    });
-    targetGraph.on('node:unselected', ({
-      e,
-      node
-    }) => {
-      node.setProp({
-        select: false
-      });
-    });
-  };
-  const handleEdgeUnActive = targetEdge => {
-    var _targetEdge$store;
-    targetGraph.activeEdge = null;
-    const _targetEdge$store$dat = (_targetEdge$store = targetEdge.store) === null || _targetEdge$store === void 0 ? void 0 : _targetEdge$store.data,
-      m2m = _targetEdge$store$dat.m2m,
-      connectionType = _targetEdge$store$dat.connectionType;
-    const m2mLineId = m2m === null || m2m === void 0 ? void 0 : m2m.find(v => v !== targetEdge.id);
-    const m2mEdge = targetGraph.getCellById(m2mLineId);
-    const lightsOut = edge => {
-      const targeNode = targetGraph.getCellById(edge.store.data.target.cell);
-      const sourceNode = targetGraph.getCellById(edge.store.data.source.cell);
-      targeNode.setProp({
-        targetPort: false,
-        associated: null
-      });
-      sourceNode.setProp({
-        sourcePort: false,
-        associated: null
-      });
-      edge.setAttrs({
-        line: {
-          stroke: '#ddd',
-          targetMarker: connectionType === ConnectionType.Inherit ? {
-            name: 'classic',
-            fill: '#ddd'
-          } : null
-        }
-      });
-      edge.setLabels(edge.getLabels().map(v => {
-        return _objectSpread(_objectSpread({}, v), {}, {
-          attrs: {
-            labelText: _objectSpread(_objectSpread({}, v.attrs.labelText), {}, {
-              fill: 'rgba(0, 0, 0, 0.3)'
-            }),
-            labelBody: _objectSpread(_objectSpread({}, v.attrs.labelBody), {}, {
-              stroke: '#ddd'
-            })
-          }
-        });
-      }));
-    };
-    lightsOut(targetEdge);
-    m2mEdge && lightsOut(m2mEdge);
-  };
-  const handleEdgeActive = targetEdge => {
-    var _targetEdge$store2;
-    targetGraph.activeEdge = targetEdge;
-    const _targetEdge$store$dat2 = (_targetEdge$store2 = targetEdge.store) === null || _targetEdge$store2 === void 0 ? void 0 : _targetEdge$store2.data,
-      associated = _targetEdge$store$dat2.associated,
-      m2m = _targetEdge$store$dat2.m2m,
-      connectionType = _targetEdge$store$dat2.connectionType;
-    const m2mLineId = m2m === null || m2m === void 0 ? void 0 : m2m.find(v => v !== targetEdge.id);
-    const m2mEdge = targetGraph.getCellById(m2mLineId);
-    const lightUp = edge => {
-      edge.toFront();
-      edge.setAttrs({
-        line: {
-          stroke: '#1890ff',
-          strokeWidth: 1,
-          textAnchor: 'middle',
-          textVerticalAnchor: 'middle',
-          sourceMarker: null,
-          targetMarker: connectionType === ConnectionType.Inherit ? {
-            name: 'classic',
-            fill: '#1890ff'
-          } : null
-        }
-      });
-      edge.setLabels(edge.getLabels().map(v => {
-        return _objectSpread(_objectSpread({}, v), {}, {
-          attrs: {
-            labelText: _objectSpread(_objectSpread({}, v.attrs.labelText), {}, {
-              fill: '#1890ff'
-            }),
-            labelBody: _objectSpread(_objectSpread({}, v.attrs.labelBody), {}, {
-              stroke: '#1890ff'
-            })
-          }
-        });
-      }));
-      const targeNode = targetGraph.getCellById(edge.store.data.target.cell);
-      const sourceNode = targetGraph.getCellById(edge.store.data.source.cell);
-      targeNode.toFront();
-      sourceNode.toFront();
-      targeNode.setProp({
-        targetPort: edge.store.data.target.port,
-        associated
-      });
-      sourceNode.setProp({
-        sourcePort: edge.store.data.source.port,
-        associated
-      });
-    };
-    lightUp(targetEdge);
-    m2mEdge && lightUp(m2mEdge);
-  };
-  // 首次渲染
-  const renderInitGraphCollection = rawData => {
-    const _formatData = (0, _utils.formatData)(rawData),
-      nodesData = _formatData.nodesData,
-      edgesData = _formatData.edgesData,
-      inheritEdges = _formatData.inheritEdges;
-    targetGraph.data = {
-      nodes: nodesData,
-      edges: edgesData
-    };
-    getNodes(nodesData);
-    getEdges(edgesData);
-    getEdges(inheritEdges);
-    layout(useSaveGraphPositionAction);
-  };
-  // 增量渲染
-  const renderDiffGraphCollection = rawData => {
-    const _targetGraph5 = targetGraph,
-      positions = _targetGraph5.positions;
-    const _formatData2 = (0, _utils.formatData)(rawData),
-      nodesData = _formatData2.nodesData,
-      edgesData = _formatData2.edgesData,
-      inheritEdges = _formatData2.inheritEdges;
-    const currentNodes = targetGraph.getNodes().map(v => v.store.data);
-    const totalEdges = targetGraph.getEdges().map(v => v.store.data);
-    const currentEdgesGroup = groupBy(totalEdges, v => {
-      if (v.connectionType) {
-        return 'currentInheritEdges';
-      } else {
-        return 'currentRelateEdges';
-      }
-    });
-    const diffNodes = (0, _utils.getDiffNode)(nodesData, currentNodes);
-    const diffEdges = (0, _utils.getDiffEdge)(edgesData, currentEdgesGroup.currentRelateEdges || []);
-    const diffInheritEdge = (0, _utils.getDiffEdge)(inheritEdges, currentEdgesGroup.currentInheritEdges || []);
-    diffNodes.forEach(({
-      status,
-      node,
-      port
-    }) => {
-      const updateNode = targetGraph.getCellById(node.id);
-      switch (status) {
-        case 'add':
-          const maxY = maxBy(positions, 'y').y;
-          const yNodes = positions.filter(v => {
-            return Math.abs(v.y - maxY) < 100;
-          });
-          let referenceNode = maxBy(yNodes, 'x');
-          let position;
-          if (referenceNode.x > 4500) {
-            const minX = minBy(positions, 'x').x;
-            referenceNode = minBy(yNodes, 'x');
-            position = {
-              x: minX,
-              y: referenceNode.y + 400
-            };
-          } else {
-            position = {
-              x: referenceNode.x + 350,
-              y: referenceNode.y
-            };
-          }
-          targetNode = targetGraph.addNode(_objectSpread(_objectSpread({}, node), {}, {
-            position
-          }));
-          useSaveGraphPositionAction(_objectSpread({
-            collectionName: node.name
-          }, position));
-          targetGraph && targetGraph.positionCell(targetNode, 'top', {
-            padding: 200
-          });
-          break;
-        case 'insertPort':
-          updateNode.insertPort(port.index, port.port);
-          break;
-        case 'deletePort':
-          updateNode.removePort(port.id);
-          break;
-        case 'updateNode':
-          updateNode.setProp({
-            title: node.title
-          });
-          break;
-        case 'delete':
-          targetGraph.removeCell(node.id);
-        default:
-          return null;
-      }
-    });
-    const renderDiffEdges = data => {
-      data.forEach(({
-        status,
-        edge
-      }) => {
-        switch (status) {
-          case 'add':
-            const newEdge = targetGraph.addEdge(_objectSpread({}, edge));
-            optimizeEdge(newEdge);
-            break;
-          case 'delete':
-            targetGraph.removeCell(edge.id);
-            break;
-          default:
-            return null;
-        }
-      });
-    };
-    setTimeout(() => {
-      renderDiffEdges(diffEdges.concat(diffInheritEdge));
-    });
-  };
-  const handleSearchCollection = e => {
-    const value = e.target.value.toLowerCase();
-    if (value) {
-      const targetCollections = collectionData.filter(v => {
-        const collectionTitle = compile(v.title).toLowerCase();
-        return collectionTitle.includes(value);
-      });
-      setCollectionList(targetCollections);
-    } else {
-      setCollectionList(collectionData);
-    }
-  };
-  // 处理不同方向的继承关系表
-  const hanleHighlightInheritedNode = (key, direction) => {
-    if (direction === DirectionType.Target) {
-      const INodes = (0, _utils.getInheritCollections)(targetGraph.collections, key);
-      INodes.forEach(v => {
-        var _targetGraph$getCellB;
-        (_targetGraph$getCellB = targetGraph.getCellById(v)) === null || _targetGraph$getCellB === void 0 ? void 0 : _targetGraph$getCellB.setAttrs({
-          hightLight: true,
-          direction,
-          connectionType: ConnectionType.Inherit
-        });
-      });
-    } else {
-      const INodes = (0, _utils.getChildrenCollections)(targetGraph.collections, key);
-      INodes.forEach(v => {
-        var _targetGraph$getCellB2;
-        (_targetGraph$getCellB2 = targetGraph.getCellById(v.name)) === null || _targetGraph$getCellB2 === void 0 ? void 0 : _targetGraph$getCellB2.setAttrs({
-          hightLight: true,
-          direction,
-          connectionType: ConnectionType.Inherit
-        });
-      });
-    }
-  };
-  // target index entity relation
-  const handelTargetIndexEntity = key => {
-    const node = targetGraph.getCellById(key);
-    targetGraph.cacheCollection[key] = true;
-    const connectedEdges = targetGraph.getConnectedEdges(node);
-    const visibleEdges = connectedEdges.filter(v => {
-      var _v$store$data;
-      return !((_v$store$data = v.store.data) !== null && _v$store$data !== void 0 && _v$store$data.connectionType) && v.getTargetCellId() === key;
-    });
-    visibleEdges.forEach(v => {
-      var _node$store$data$attr2;
-      if (v.store.data.m2m) {
-        v.store.data.m2m.forEach(i => {
-          const m2mEdge = targetGraph.getCellById(i);
-          if (m2mEdge.getTargetCellId() === key) {
-            var _node$store$data$attr;
-            const sourceId = m2mEdge.getSourceCellId();
-            const node = targetGraph.getCellById(sourceId);
-            if (!((_node$store$data$attr = node.store.data.attrs) !== null && _node$store$data$attr !== void 0 && _node$store$data$attr.hightLight)) {
-              node.setAttrs({
-                hightLight: true,
-                direction: DirectionType.Target,
-                connectionType: ConnectionType.Entity
-              });
-              handelTargetIndexEntity(sourceId);
-            }
-          }
-        });
-      }
-      const sourceId = v.getSourceCellId();
-      const node = targetGraph.getCellById(sourceId);
-      if (!((_node$store$data$attr2 = node.store.data.attrs) !== null && _node$store$data$attr2 !== void 0 && _node$store$data$attr2.hightLight)) {
-        node.setAttrs({
-          hightLight: true,
-          direction: DirectionType.Target,
-          connectionType: ConnectionType.Entity
-        });
-        handelTargetIndexEntity(sourceId);
-      }
-    });
-  };
-  // source index entity relation
-  const handelSourceIndexEntity = key => {
-    const node = targetGraph.getCellById(key);
-    const connectedEdges = targetGraph.getConnectedEdges(node);
-    const visibleEdges = connectedEdges.filter(v => {
-      var _v$store$data2;
-      return !((_v$store$data2 = v.store.data) !== null && _v$store$data2 !== void 0 && _v$store$data2.connectionType) && v.getSourceCellId() === key;
-    });
-    visibleEdges.forEach(v => {
-      var _node$store$data$attr4;
-      if (v.store.data.m2m) {
-        v.store.data.m2m.forEach(i => {
-          const m2mEdge = targetGraph.getCellById(i);
-          if (m2mEdge.getSourceCellId() === key) {
-            var _node$store$data$attr3;
-            const targetId = m2mEdge.getTargetCellId();
-            const node = targetGraph.getCellById(targetId);
-            if (!((_node$store$data$attr3 = node.store.data.attrs) !== null && _node$store$data$attr3 !== void 0 && _node$store$data$attr3.hightLight)) {
-              node.setAttrs({
-                hightLight: true,
-                direction: DirectionType.Source,
-                connectionType: ConnectionType.Entity
-              });
-              handelSourceIndexEntity(targetId);
-            }
-          }
-        });
-      }
-      const targetId = v.getTargetCellId();
-      const node = targetGraph.getCellById(targetId);
-      if (!((_node$store$data$attr4 = node.store.data.attrs) !== null && _node$store$data$attr4 !== void 0 && _node$store$data$attr4.hightLight)) {
-        node.setAttrs({
-          hightLight: true,
-          direction: DirectionType.Source,
-          connectionType: ConnectionType.Entity
-        });
-        handelSourceIndexEntity(targetId);
-      }
-    });
-  };
-  // 处理不同方向的实体关系表
-  const handleHighlightRelationNodes = (nodekey, direction) => {
-    if (direction === DirectionType.Target) {
-      handelTargetIndexEntity(nodekey);
-    } else {
-      handelSourceIndexEntity(nodekey);
-    }
-  };
-  const handleCleanHighlight = (key, currentDirection, currentConnectionType) => {
-    const nodes = targetGraph.getNodes().filter(v => {
-      var _v$store$data$attrs;
-      return (_v$store$data$attrs = v.store.data.attrs) === null || _v$store$data$attrs === void 0 ? void 0 : _v$store$data$attrs.hightLight;
-    });
-    const length = nodes.length;
-    for (let i = 0; i < length; i++) {
-      var _targetGraph$filterCo, _targetGraph$filterCo2;
-      const _nodes$i$getAttrs = nodes[i].getAttrs(),
-        direction = _nodes$i$getAttrs.direction,
-        connectionType = _nodes$i$getAttrs.connectionType;
-      const filterFlag = nodes[i].id !== key;
-      const directionFlag = key && ((_targetGraph$filterCo = targetGraph.filterConfig) === null || _targetGraph$filterCo === void 0 ? void 0 : _targetGraph$filterCo.key) === key ? direction !== currentDirection : true;
-      const renltionshipFlag = key && ((_targetGraph$filterCo2 = targetGraph.filterConfig) === null || _targetGraph$filterCo2 === void 0 ? void 0 : _targetGraph$filterCo2.key) === key ? connectionType !== currentConnectionType : true;
-      if (nodes[i].id !== key) {
-        setTimeout(() => {
-          filterFlag && (directionFlag || renltionshipFlag) && nodes[i].setAttrs({
-            hightLight: false
-          });
-        }, 0);
-      }
-    }
-  };
-  const handleFiterCollections = value => {
-    const _targetGraph6 = targetGraph,
-      connectionType = _targetGraph6.connectionType,
-      direction = _targetGraph6.direction,
-      filterConfig = _targetGraph6.filterConfig;
-    const directionBothFlag1 = value === (filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.key) && direction === DirectionType.Both;
-    const relationshipBothFlag = value === (filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.key) && (connectionType === ConnectionType.Both || connectionType === filterConfig.connectionType);
-    if (value) {
-      (!directionBothFlag1 || !relationshipBothFlag) && handleCleanHighlight(value, direction, connectionType);
-      targetNode = targetGraph.getCellById(value);
-      targetGraph.positionCell(targetNode, 'center', {
-        padding: 0
-      });
-      targetNode.setAttrs({
-        hightLight: true,
-        connectionType: connectionType
-      });
-      setTimeout(() => {
-        if ([ConnectionType.Entity, ConnectionType.Both].includes(connectionType)) {
-          if (direction === DirectionType.Both) {
-            handleHighlightRelationNodes(value, DirectionType.Target);
-            handleHighlightRelationNodes(value, DirectionType.Source);
-          } else {
-            direction === DirectionType.Target && handleHighlightRelationNodes(value, direction);
-            direction === DirectionType.Source && handleHighlightRelationNodes(value, direction);
-          }
-        }
-        if ([ConnectionType.Inherit, ConnectionType.Both].includes(connectionType)) {
-          if (direction === DirectionType.Both) {
-            hanleHighlightInheritedNode(value, DirectionType.Target);
-            hanleHighlightInheritedNode(value, DirectionType.Source);
-          } else {
-            hanleHighlightInheritedNode(value, direction);
-          }
-        }
-        targetGraph.filterConfig = {
-          key: value,
-          direction: direction,
-          connectionType
-        };
-      }, 0);
-    } else {
-      handleCleanHighlight();
-    }
-  };
-  const handleSetRelationshipType = type => {
-    handleSetEdgeVisible(type);
-  };
-  const handleSetEdgeVisible = type => {
-    targetNode = null;
-    const edges = targetGraph.getEdges();
-    edges.forEach(v => {
-      const connectionType = v.store.data.connectionType;
-      if (type === ConnectionType.Entity) {
-        if (connectionType) {
-          v.setVisible(false);
-        } else {
-          v.setVisible(true);
-        }
-      } else if (type === ConnectionType.Inherit) {
-        if (!connectionType) {
-          v.setVisible(false);
-        } else {
-          v.setVisible(true);
-        }
-      } else {
-        v.setVisible(true);
-      }
-    });
-  };
-  (0, _react2().useLayoutEffect)(() => {
-    initGraphCollections();
-    return () => {
-      targetGraph.off('cell:mouseenter');
-      targetGraph.off('edge:mouseleave');
-      targetGraph.off('node:moved');
-      targetGraph.off('blank:click');
-      targetGraph = null;
-      targetNode = null;
-    };
-  }, []);
-  (0, _react2().useEffect)(() => {
-    refreshPositions().then(() => {
-      refreshGM();
-    });
-  }, []);
-  const loadCollections = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator(function* () {
-      var _targetGraph$collecti;
-      return (_targetGraph$collecti = targetGraph.collections) === null || _targetGraph$collecti === void 0 ? void 0 : _targetGraph$collecti.map(collection => ({
-        label: compile(collection.title),
-        value: collection.name
-      }));
-    });
-    return function loadCollections() {
-      return _ref5.apply(this, arguments);
-    };
-  }();
-  return _react2().default.createElement(_antd().Layout, null, _react2().default.createElement("div", {
-    className: styles.graphCollectionContainerClass
-  }, _react2().default.createElement(_client().CollectionManagerProvider, {
-    collections: (_targetGraph7 = targetGraph) === null || _targetGraph7 === void 0 ? void 0 : _targetGraph7.collections,
-    refreshCM: refreshGM
-  }, _react2().default.createElement(CollapsedContext.Provider, {
-    value: {
-      collectionList,
-      handleSearchCollection
-    }
-  }, _react2().default.createElement("div", {
-    className: (0, _client().cx)(styles.collectionListClass)
-  }, _react2().default.createElement(_client().SchemaComponent, {
-    components: {
-      Select: props => _react2().default.createElement(_client().Select, _objectSpread(_objectSpread({
-        popupMatchSelectWidth: false
-      }, props), {}, {
-        getPopupContainer: _utils.getPopupContainer
-      })),
-      AddCollectionAction: _AddCollectionAction.AddCollectionAction
-    },
-    schema: {
-      type: 'void',
-      properties: {
-        block1: {
-          type: 'void',
-          'x-collection': 'collections',
-          'x-decorator': 'ResourceActionProvider',
-          'x-decorator-props': {
-            collection: _client().collection,
-            request: {
-              resource: 'collections',
-              action: 'list',
-              params: {
-                pageSize: 50,
-                filter: {
-                  inherit: false
-                },
-                sort: ['sort'],
-                appends: []
-              }
-            }
-          },
-          properties: {
-            actions: {
-              type: 'void',
-              'x-component': 'ActionBar',
-              'x-component-props': {
-                style: {
-                  fontSize: 16
-                }
-              },
-              properties: {
-                create: {
-                  type: 'void',
-                  title: '{{ t("Create collection") }}',
-                  'x-component': 'AddCollectionAction',
-                  'x-component-props': {
-                    type: 'primary'
-                  }
-                },
-                fullScreen: {
-                  type: 'void',
-                  'x-component': 'Action',
-                  'x-component-props': {
-                    component: (0, _react2().forwardRef)(() => {
-                      const _useFullscreen = (0, _ahooks().useFullscreen)(document.getElementById('graph_container')),
-                        _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
-                        isFullscreen = _useFullscreen2[0],
-                        toggleFullscreen = _useFullscreen2[1].toggleFullscreen;
-                      return _react2().default.createElement(_antd().Tooltip, {
-                        title: t('Full Screen'),
-                        getPopupContainer: _utils.getPopupContainer
-                      }, _react2().default.createElement(_antd().Button, {
-                        onClick: () => {
-                          toggleFullscreen();
-                        }
-                      }, isFullscreen ? _react2().default.createElement(_icons().FullscreenExitOutlined, null) : _react2().default.createElement(_icons().FullscreenOutlined, null)));
-                    }),
-                    useAction: () => {
-                      return {
-                        run() {}
-                      };
-                    }
-                  }
-                },
-                collectionList: {
-                  type: 'void',
-                  'x-component': function Com() {
-                    const _useContext = (0, _react2().useContext)(CollapsedContext),
-                      handleSearchCollection = _useContext.handleSearchCollection,
-                      collectionList = _useContext.collectionList;
-                    const _useState5 = (0, _react2().useState)([]),
-                      _useState6 = _slicedToArray(_useState5, 2),
-                      selectedKeys = _useState6[0],
-                      setSelectKey = _useState6[1];
-                    const content = _react2().default.createElement("div", null, _react2().default.createElement(_antd().Input, {
-                      style: {
-                        margin: '4px 0'
-                      },
-                      bordered: false,
-                      placeholder: t('Collection Search'),
-                      onChange: handleSearchCollection
-                    }), _react2().default.createElement(_antd().Menu, {
-                      selectedKeys: selectedKeys,
-                      selectable: true,
-                      className: (0, _client().css)`
-                                        .ant-menu-item {
-                                          height: 32px;
-                                          line-height: 32px;
-                                        }
-                                      `,
-                      style: {
-                        maxHeight: '70vh',
-                        overflowY: 'auto',
-                        border: 'none'
-                      },
-                      items: [{
-                        type: 'divider'
-                      }, ...collectionList.map(v => {
-                        return {
-                          key: v.name,
-                          label: compile(v.title),
-                          onClick: e => {
-                            if (e.key !== selectedKeys[0]) {
-                              setSelectKey([e.key]);
-                              handleFiterCollections(e.key);
-                            } else {
-                              targetGraph.filterConfig = null;
-                              handleFiterCollections(false);
-                              setSelectKey([]);
-                            }
-                          }
-                        };
-                      })]
-                    }));
-                    return _react2().default.createElement(_antd().Popover, {
-                      content: content,
-                      autoAdjustOverflow: true,
-                      placement: "bottomRight",
-                      trigger: ['click'],
-                      getPopupContainer: _utils.getPopupContainer,
-                      overlayClassName: (0, _client().css)`
-                                      .ant-popover-inner-content {
-                                        padding: 0;
-                                      }
-                                    `
-                    }, _react2().default.createElement(_antd().Button, null, _react2().default.createElement(_icons().MenuOutlined, null)));
-                  },
-                  'x-component-props': {
-                    icon: 'MenuOutlined',
-                    useAction: () => {
-                      return {
-                        run() {}
-                      };
-                    }
-                  }
-                },
-                autoLayout: {
-                  type: 'void',
-                  'x-component': 'Action',
-                  'x-component-props': {
-                    component: (0, _react2().forwardRef)(() => {
-                      return _react2().default.createElement(_antd().Tooltip, {
-                        title: t('Auto layout'),
-                        getPopupContainer: _utils.getPopupContainer
-                      }, _react2().default.createElement(_antd().Button, {
-                        onClick: () => {
-                          handelResetLayout();
-                        }
-                      }, _react2().default.createElement(_icons().ApartmentOutlined, null)));
-                    }),
-                    useAction: () => {
-                      return {
-                        run() {}
-                      };
-                    }
-                  }
-                },
-                connectionType: {
-                  type: 'void',
-                  'x-component': () => {
-                    const menuItems = [{
-                      key: ConnectionType.Both,
-                      label: 'All relationships'
-                    }, {
-                      key: ConnectionType.Entity,
-                      label: 'Entity relationship only'
-                    }, {
-                      key: ConnectionType.Inherit,
-                      label: 'Inheritance relationship only'
-                    }];
-                    const content = _react2().default.createElement("div", null, _react2().default.createElement(_antd().Menu, {
-                      defaultSelectedKeys: [ConnectionType.Both],
-                      selectable: true,
-                      className: (0, _client().css)`
-                                        .ant-menu-item {
-                                          height: 32px;
-                                          line-height: 32px;
-                                        }
-                                      `,
-                      style: {
-                        maxHeight: '70vh',
-                        overflowY: 'auto',
-                        border: 'none'
-                      },
-                      items: [{
-                        type: 'divider'
-                      }, ...menuItems.map(v => {
-                        return {
-                          key: v.key,
-                          label: t(v.label),
-                          onClick: e => {
-                            targetGraph.connectionType = v.key;
-                            const _targetGraph8 = targetGraph,
-                              filterConfig = _targetGraph8.filterConfig;
-                            filterConfig && handleFiterCollections(filterConfig.key);
-                            handleSetRelationshipType(v.key);
-                          }
-                        };
-                      })]
-                    }));
-                    return _react2().default.createElement(_antd().Popover, {
-                      content: content,
-                      autoAdjustOverflow: true,
-                      placement: "bottomRight",
-                      trigger: ['click'],
-                      getPopupContainer: _utils.getPopupContainer,
-                      overlayClassName: (0, _client().css)`
-                                      .ant-popover-inner-content {
-                                        padding: 0;
-                                      }
-                                    `
-                    }, _react2().default.createElement(_antd().Button, null, _react2().default.createElement(_icons().ShareAltOutlined, null)));
-                  },
-                  'x-component-props': {
-                    icon: 'MenuOutlined',
-                    useAction: () => {
-                      return {
-                        run() {}
-                      };
-                    }
-                  }
-                },
-                direction: {
-                  type: 'void',
-                  'x-component': () => {
-                    const menuItems = [{
-                      key: DirectionType.Both,
-                      label: 'All directions'
-                    }, {
-                      key: DirectionType.Target,
-                      label: 'Target index'
-                    }, {
-                      key: DirectionType.Source,
-                      label: 'Source index'
-                    }];
-                    const content = _react2().default.createElement("div", null, _react2().default.createElement(_antd().Menu, {
-                      defaultSelectedKeys: [DirectionType.Target],
-                      selectable: true,
-                      className: (0, _client().css)`
-                                        .ant-menu-item {
-                                          height: 32px;
-                                          line-height: 32px;
-                                        }
-                                      `,
-                      style: {
-                        maxHeight: '70vh',
-                        overflowY: 'auto',
-                        border: 'none'
-                      },
-                      items: [{
-                        type: 'divider'
-                      }, ...menuItems.map(v => {
-                        return {
-                          key: v.key,
-                          label: t(v.label),
-                          onClick: e => {
-                            targetGraph.direction = v.key;
-                            const _targetGraph9 = targetGraph,
-                              filterConfig = _targetGraph9.filterConfig;
-                            if (filterConfig) {
-                              handleFiterCollections(filterConfig.key);
-                            }
-                          }
-                        };
-                      })]
-                    }));
-                    return _react2().default.createElement(_antd().Popover, {
-                      content: content,
-                      autoAdjustOverflow: true,
-                      placement: "bottomRight",
-                      trigger: ['click'],
-                      getPopupContainer: _utils.getPopupContainer,
-                      overlayClassName: (0, _client().css)`
-                                      .ant-popover-inner-content {
-                                        padding: 0;
-                                      }
-                                    `
-                    }, _react2().default.createElement(_antd().Button, null, _react2().default.createElement(_icons().LineHeightOutlined, null)));
-                  }
-                },
-                selectMode: {
-                  type: 'void',
-                  'x-component': () => {
-                    return _react2().default.createElement(_antd().Tooltip, {
-                      title: t('Selection')
-                    }, _react2().default.createElement(_antd().Switch, {
-                      onChange: value => {
-                        targetGraph.toggleSelection();
-                      }
-                    }));
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    },
-    scope: {
-      useAsyncDataSource: _actionHooks.useAsyncDataSource,
-      loadCollections,
-      useCreateActionAndRefreshCM: () => (0, _actionHooks.useCreateActionAndRefreshCM)(setTargetNode),
-      enableInherits: (database === null || database === void 0 ? void 0 : database.dialect) === 'postgres'
-    }
-  })))), _react2().default.createElement("div", {
-    id: "container",
-    style: {
-      width: '100vw',
-      height: '100vh'
-    }
-  }), _react2().default.createElement("div", {
-    id: "graph-minimap",
-    className: styles.graphMinimap,
-    style: {
-      width: '300px',
-      height: '250px',
-      right: '10px',
-      bottom: '20px',
-      position: 'fixed'
-    }
-  })));
-});
-exports.GraphDrawPage = GraphDrawPage;
-GraphDrawPage.displayName = 'GraphDrawPage';