@nocobase/plugin-graph-collection-manager 0.9.0-alpha.1

package/lib/client/GraphDrawPage.js

@@ -0,0 +1,1746 @@
+"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 _css() {
+  const data = require("@emotion/css");
+
+  _css = function _css() {
+    return data;
+  };
+
+  return data;
+}
+
+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 _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 _lodash() {
+  const data = require("lodash");
+
+  _lodash = function _lodash() {
+    return data;
+  };
+
+  return data;
+}
+
+function _react2() {
+  const data = _interopRequireWildcard(require("react"));
+
+  _react2 = function _react2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _reactI18next() {
+  const data = require("react-i18next");
+
+  _reactI18next = function _reactI18next() {
+    return data;
+  };
+
+  return data;
+}
+
+var _actionHooks = require("./action-hooks");
+
+var _AddCollectionAction = require("./components/AddCollectionAction");
+
+var _Entity = _interopRequireDefault(require("./components/Entity"));
+
+var _style = require("./style");
+
+var _utils = require("./utils");
+
+var _ViewNode = require("./components/ViewNode");
+
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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 LINE_HEIGHT = 40;
+const NODE_WIDTH = 250;
+let targetGraph;
+let targetNode;
+let 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((0, _lodash().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 getPopupContainer = () => {
+  return document.getElementById('graph_container');
+};
+
+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 = (0, _lodash().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 = (0, _lodash().take)(gNodes, linkNodes.length);
+  const nodeWithoutEdges = (0, _lodash().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((0, _lodash().maxBy)(nodeWithEdges, k => {
+      return targetGraph.getCellById(k).position().y;
+    })).position().y;
+    minX = targetGraph.getCellById((0, _lodash().minBy)(nodeWithEdges, k => {
+      return targetGraph.getCellById(k).position().x;
+    })).position().x;
+    const maxX = targetGraph.getCellById((0, _lodash().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;
+    });
+    let referenceNode = (_targetGraph$getCell = targetGraph.getCell((0, _lodash().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 = (0, _lodash().take)(nodeWithoutEdges, alternateNum);
+      rawEntity = getGridData(num, (0, _lodash().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;
+
+  let options = (0, _react2().useContext)(_react().SchemaOptionsContext);
+  const ctx = (0, _react2().useContext)(_client().CollectionManagerContext);
+  const api = (0, _client().useAPIClient)();
+  const compile = (0, _client().useCompile)();
+
+  const _useTranslation = (0, _reactI18next().useTranslation)('graphPositions'),
+        t = _useTranslation.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 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();
+      console.log(data);
+      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().CollectionManagerProvider, {
+          collections: (_targetGraph2 = targetGraph) === null || _targetGraph2 === void 0 ? void 0 : _targetGraph2.collections,
+          refreshCM: refreshGM,
+          interfaces: ctx.interfaces
+        }, _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 ? 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 = (0, _lodash().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 = (0, _lodash().maxBy)(positions, 'y').y;
+          const yNodes = positions.filter(v => {
+            return Math.abs(v.y - maxY) < 100;
+          });
+          let referenceNode = (0, _lodash().maxBy)(yNodes, 'x');
+          let position;
+
+          if (referenceNode.x > 4500) {
+            const minX = (0, _lodash().minBy)(positions, 'x').x;
+            referenceNode = (0, _lodash().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);
+    let visibleEdges = connectedEdges.filter(v => {
+      var _v$store$data;
+
+      return !((_v$store$data = v.store.data) === null || _v$store$data === void 0 ? 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 ? 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 ? 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 ? 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 ? 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 ? 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: (0, _css().cx)(_style.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, _css().cx)(_style.collectionListClass)
+  }, _react2().default.createElement(_client().SchemaComponent, {
+    components: {
+      Select: props => _react2().default.createElement(_client().Select, _objectSpread(_objectSpread({}, props), {}, {
+        getPopupContainer: () => {
+          return document.getElementById('graph_container');
+        }
+      })),
+      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: 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': () => {
+                    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, _css().css)`
+                                        .ant-menu-item {
+                                          height: 32px;
+                                          line-height: 32px;
+                                        }
+                                      `,
+                      style: {
+                        maxHeight: '70vh',
+                        overflowY: 'auto',
+                        border: 'none'
+                      }
+                    }, _react2().default.createElement(_antd().Menu.Divider, null), collectionList.map(v => {
+                      return _react2().default.createElement(_antd().Menu.Item, {
+                        key: v.name,
+                        onClick: e => {
+                          if (e.key !== selectedKeys[0]) {
+                            setSelectKey([e.key]);
+                            handleFiterCollections(e.key);
+                          } else {
+                            targetGraph.filterConfig = null;
+                            handleFiterCollections(false);
+                            setSelectKey([]);
+                          }
+                        }
+                      }, _react2().default.createElement("span", null, compile(v.title)));
+                    })));
+
+                    return _react2().default.createElement(_antd().Popover, {
+                      content: content,
+                      autoAdjustOverflow: true,
+                      placement: "bottomRight",
+                      trigger: ['click'],
+                      getPopupContainer: getPopupContainer,
+                      overlayClassName: (0, _css().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: 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, _css().css)`
+                                        .ant-menu-item {
+                                          height: 32px;
+                                          line-height: 32px;
+                                        }
+                                      `,
+                      style: {
+                        maxHeight: '70vh',
+                        overflowY: 'auto',
+                        border: 'none'
+                      }
+                    }, _react2().default.createElement(_antd().Menu.Divider, null), menuItems.map(v => {
+                      return _react2().default.createElement(_antd().Menu.Item, {
+                        key: v.key,
+                        onClick: e => {
+                          targetGraph.connectionType = v.key;
+                          const _targetGraph8 = targetGraph,
+                                filterConfig = _targetGraph8.filterConfig;
+                          filterConfig && handleFiterCollections(filterConfig.key);
+                          handleSetRelationshipType(v.key);
+                        }
+                      }, _react2().default.createElement("span", null, t(v.label)));
+                    })));
+
+                    return _react2().default.createElement(_antd().Popover, {
+                      content: content,
+                      autoAdjustOverflow: true,
+                      placement: "bottomRight",
+                      trigger: ['click'],
+                      getPopupContainer: getPopupContainer,
+                      overlayClassName: (0, _css().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, _css().css)`
+                                        .ant-menu-item {
+                                          height: 32px;
+                                          line-height: 32px;
+                                        }
+                                      `,
+                      style: {
+                        maxHeight: '70vh',
+                        overflowY: 'auto',
+                        border: 'none'
+                      }
+                    }, _react2().default.createElement(_antd().Menu.Divider, null), menuItems.map(v => {
+                      return _react2().default.createElement(_antd().Menu.Item, {
+                        key: v.key,
+                        onClick: e => {
+                          targetGraph.direction = v.key;
+                          const _targetGraph9 = targetGraph,
+                                filterConfig = _targetGraph9.filterConfig;
+
+                          if (filterConfig) {
+                            handleFiterCollections(filterConfig.key);
+                          }
+                        }
+                      }, _react2().default.createElement("span", null, t(v.label)));
+                    })));
+
+                    return _react2().default.createElement(_antd().Popover, {
+                      content: content,
+                      autoAdjustOverflow: true,
+                      placement: "bottomRight",
+                      trigger: ['click'],
+                      getPopupContainer: getPopupContainer,
+                      overlayClassName: (0, _css().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",
+    style: {
+      width: '300px',
+      height: '250px',
+      right: '10px',
+      bottom: '20px',
+      position: 'fixed'
+    }
+  })));
+});
+
+exports.GraphDrawPage = GraphDrawPage;