@nocobase/plugin-graph-collection-manager 0.9.1-alpha.1 → 0.9.2-alpha.1

package/lib/client/GraphDrawPage.js

@@ -4,192 +4,133 @@ 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;
 }
-
 var _actionHooks = require("./action-hooks");
-
 var _AddCollectionAction = require("./components/AddCollectionAction");
-
 var _Entity = _interopRequireDefault(require("./components/Entity"));
-
 var _ViewNode = require("./components/ViewNode");
-
 var _style = 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 = 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 _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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+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 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;
+      positions = _targetGraph10.positions;
     let graphPositions = [];
     const nodes = targetGraph.getNodes();
     const edges = targetGraph.getEdges();
@@ -211,16 +152,13 @@ function _layout() {
         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;
@@ -230,7 +168,6 @@ function _layout() {
             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({
@@ -246,7 +183,6 @@ function _layout() {
       optimizeEdge(edge);
     });
     targetGraph.unfreeze();
-
     if (targetNode) {
       typeof targetNode === 'string' ? targetGraph.positionCell((0, _lodash().last)(nodes), 'top', {
         padding: 100
@@ -258,7 +194,6 @@ function _layout() {
         padding: 100
       });
     }
-
     if (graphPositions.length > 0) {
       yield createPositions(graphPositions);
       graphPositions = [];
@@ -266,7 +201,6 @@ function _layout() {
   });
   return _layout.apply(this, arguments);
 }
-
 function optimizeEdge(edge) {
   const connectionType = edge.store.data.connectionType;
   const source = edge.getSource();
@@ -292,7 +226,6 @@ function optimizeEdge(edge) {
   vertices.forEach(() => {
     return edge.removeVertexAt(0);
   });
-
   if (sorceNodeX - 100 > targeNodeX) {
     edge.setSource({
       cell: source.cell,
@@ -320,7 +253,6 @@ function optimizeEdge(edge) {
       port: target.port,
       anchor: leftAnchor
     });
-
     if (connectionType) {
       edge.setVertices([{
         x: sourceCell.position().x - 30,
@@ -351,11 +283,9 @@ function optimizeEdge(edge) {
     });
   }
 }
-
 function getNodes(nodes) {
   targetGraph.addNodes(nodes);
 }
-
 function getEdges(edges) {
   edges.forEach(item => {
     if (item.source && item.target) {
@@ -368,13 +298,10 @@ function getEdges(edges) {
     }
   });
 }
-
 const getPopupContainer = () => {
   return document.getElementById('graph_container');
 };
-
 const CollapsedContext = (0, _react2().createContext)({});
-
 const formatNodeData = () => {
   const layoutNodes = [];
   const edges = targetGraph.getEdges();
@@ -391,17 +318,15 @@ const formatNodeData = () => {
     }
   });
   return nodeGroup;
-}; //自动布局
-
-
+};
+//自动布局
 const handelResetLayout = () => {
   const _formatNodeData = formatNodeData(),
-        _formatNodeData$linkN = _formatNodeData.linkNodes,
-        linkNodes = _formatNodeData$linkN === void 0 ? [] : _formatNodeData$linkN,
-        rawNodes = _formatNodeData.rawNodes;
-
+    _formatNodeData$linkN = _formatNodeData.linkNodes,
+    linkNodes = _formatNodeData$linkN === void 0 ? [] : _formatNodeData$linkN,
+    rawNodes = _formatNodeData.rawNodes;
   const _targetGraph = targetGraph,
-        positions = _targetGraph.positions;
+    positions = _targetGraph.positions;
   const nodes = linkNodes.concat(rawNodes);
   const edges = targetGraph.getEdges();
   const g = new (_dagre().default.graphlib.Graph)();
@@ -432,19 +357,15 @@ const handelResetLayout = () => {
     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({
@@ -455,10 +376,8 @@ const handelResetLayout = () => {
       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;
@@ -475,16 +394,13 @@ const handelResetLayout = () => {
     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
@@ -506,15 +422,12 @@ const handelResetLayout = () => {
     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
@@ -538,38 +451,29 @@ const handelResetLayout = () => {
   });
   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 _useGCMTranslation = (0, _utils.useGCMTranslation)(),
-        t = _useGCMTranslation.t;
-
+    t = _useGCMTranslation.t;
   const _useState = (0, _react2().useState)([]),
-        _useState2 = _slicedToArray(_useState, 2),
-        collectionData = _useState2[0],
-        setCollectionData = _useState2[1];
-
+    _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];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    collectionList = _useState4[0],
+    setCollectionList = _useState4[1];
   const _useCollectionManager = (0, _client().useCollectionManager)(),
-        refreshCM = _useCollectionManager.refreshCM;
-
+    refreshCM = _useCollectionManager.refreshCM;
   const _useCurrentAppInfo = (0, _client().useCurrentAppInfo)(),
-        database = _useCurrentAppInfo.data.database;
-
+    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({
@@ -577,12 +481,10 @@ const GraphDrawPage = _react2().default.memo(() => {
       });
       yield refreshPositions();
     });
-
     return function useSaveGraphPositionAction(_x2) {
       return _ref.apply(this, arguments);
     };
   }();
-
   const useUpdatePositionAction = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(function* (data, isbatch = false) {
       if (isbatch) {
@@ -597,39 +499,31 @@ const GraphDrawPage = _react2().default.memo(() => {
           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;
-
+          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();
@@ -638,19 +532,16 @@ const GraphDrawPage = _react2().default.memo(() => {
       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'),
@@ -681,19 +572,16 @@ const GraphDrawPage = _react2().default.memo(() => {
         padding: 10,
         graphOptions: {
           async: true,
-
           getCellView(cell) {
             if (cell.isNode()) {
               return _ViewNode.SimpleNodeView;
             }
           },
-
           createCellView(cell) {
             if (cell.isEdge()) {
               return null;
             }
           }
-
         }
       },
       connecting: {
@@ -723,7 +611,6 @@ const GraphDrawPage = _react2().default.memo(() => {
     targetGraph.connectionType = ConnectionType.Both;
     targetGraph.direction = DirectionType.Target;
     targetGraph.cacheCollection = {};
-
     _x4().Graph.registerPortLayout('erPortPosition', portsPositionArgs => {
       return portsPositionArgs.map((_, index) => {
         return {
@@ -735,12 +622,10 @@ const GraphDrawPage = _react2().default.memo(() => {
         };
       });
     }, 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, {
@@ -749,7 +634,7 @@ const GraphDrawPage = _react2().default.memo(() => {
           inherit: true,
           scope: scope,
           components: components
-        }, _react2().default.createElement(_client().CollectionCategroriesProvider, null, _react2().default.createElement(_client().CollectionManagerProvider, {
+        }, _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
@@ -788,7 +673,6 @@ const GraphDrawPage = _react2().default.memo(() => {
         refHeight: 100
       }
     }, true);
-
     targetGraph.on('edge:mouseleave', ({
       e,
       edge: targetEdge
@@ -804,7 +688,6 @@ const GraphDrawPage = _react2().default.memo(() => {
       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
@@ -814,7 +697,6 @@ const GraphDrawPage = _react2().default.memo(() => {
           collectionName: node.store.data.name
         }, currentPosition));
       }
-
       connectEdges.forEach(edge => {
         optimizeEdge(edge);
       });
@@ -826,20 +708,16 @@ const GraphDrawPage = _react2().default.memo(() => {
     }) => {
       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({
@@ -865,19 +743,14 @@ const GraphDrawPage = _react2().default.memo(() => {
       });
     });
   };
-
   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;
-
+      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);
@@ -911,24 +784,18 @@ const GraphDrawPage = _react2().default.memo(() => {
         });
       }));
     };
-
     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;
-
+      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({
@@ -969,18 +836,15 @@ const GraphDrawPage = _react2().default.memo(() => {
         associated
       });
     };
-
     lightUp(targetEdge);
     m2mEdge && lightUp(m2mEdge);
-  }; // 首次渲染
-
-
+  };
+  // 首次渲染
   const renderInitGraphCollection = rawData => {
     const _formatData = (0, _utils.formatData)(rawData),
-          nodesData = _formatData.nodesData,
-          edgesData = _formatData.edgesData,
-          inheritEdges = _formatData.inheritEdges;
-
+      nodesData = _formatData.nodesData,
+      edgesData = _formatData.edgesData,
+      inheritEdges = _formatData.inheritEdges;
     targetGraph.data = {
       nodes: nodesData,
       edges: edgesData
@@ -989,18 +853,15 @@ const GraphDrawPage = _react2().default.memo(() => {
     getEdges(edgesData);
     getEdges(inheritEdges);
     layout(useSaveGraphPositionAction);
-  }; // 增量渲染
-
-
+  };
+  // 增量渲染
   const renderDiffGraphCollection = rawData => {
     const _targetGraph5 = targetGraph,
-          positions = _targetGraph5.positions;
-
+      positions = _targetGraph5.positions;
     const _formatData2 = (0, _utils.formatData)(rawData),
-          nodesData = _formatData2.nodesData,
-          edgesData = _formatData2.edgesData,
-          inheritEdges = _formatData2.inheritEdges;
-
+      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 => {
@@ -1019,7 +880,6 @@ const GraphDrawPage = _react2().default.memo(() => {
       port
     }) => {
       const updateNode = targetGraph.getCellById(node.id);
-
       switch (status) {
         case 'add':
           const maxY = (0, _lodash().maxBy)(positions, 'y').y;
@@ -1028,7 +888,6 @@ const GraphDrawPage = _react2().default.memo(() => {
           });
           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');
@@ -1042,7 +901,6 @@ const GraphDrawPage = _react2().default.memo(() => {
               y: referenceNode.y
             };
           }
-
           targetNode = targetGraph.addNode(_objectSpread(_objectSpread({}, node), {}, {
             position
           }));
@@ -1053,29 +911,23 @@ const GraphDrawPage = _react2().default.memo(() => {
             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,
@@ -1086,25 +938,20 @@ const GraphDrawPage = _react2().default.memo(() => {
             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();
@@ -1114,15 +961,13 @@ const GraphDrawPage = _react2().default.memo(() => {
     } 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,
@@ -1133,7 +978,6 @@ const GraphDrawPage = _react2().default.memo(() => {
       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,
@@ -1141,31 +985,25 @@ const GraphDrawPage = _react2().default.memo(() => {
         });
       });
     }
-  }; // target index entity relation
-
-
+  };
+  // 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,
@@ -1177,10 +1015,8 @@ const GraphDrawPage = _react2().default.memo(() => {
           }
         });
       }
-
       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,
@@ -1190,30 +1026,24 @@ const GraphDrawPage = _react2().default.memo(() => {
         handelTargetIndexEntity(sourceId);
       }
     });
-  }; // source index entity relation
-
-
+  };
+  // 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,
@@ -1225,10 +1055,8 @@ const GraphDrawPage = _react2().default.memo(() => {
           }
         });
       }
-
       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,
@@ -1238,9 +1066,8 @@ const GraphDrawPage = _react2().default.memo(() => {
         handelSourceIndexEntity(targetId);
       }
     });
-  }; // 处理不同方向的实体关系表
-
-
+  };
+  // 处理不同方向的实体关系表
   const handleHighlightRelationNodes = (nodekey, direction) => {
     if (direction === DirectionType.Target) {
       handelTargetIndexEntity(nodekey);
@@ -1248,26 +1075,20 @@ const GraphDrawPage = _react2().default.memo(() => {
       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;
-
+        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({
@@ -1277,15 +1098,13 @@ const GraphDrawPage = _react2().default.memo(() => {
       }
     }
   };
-
   const handleFiterCollections = value => {
     const _targetGraph6 = targetGraph,
-          connectionType = _targetGraph6.connectionType,
-          direction = _targetGraph6.direction,
-          filterConfig = _targetGraph6.filterConfig;
+      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);
@@ -1306,7 +1125,6 @@ const GraphDrawPage = _react2().default.memo(() => {
             direction === DirectionType.Source && handleHighlightRelationNodes(value, direction);
           }
         }
-
         if ([ConnectionType.Inherit, ConnectionType.Both].includes(connectionType)) {
           if (direction === DirectionType.Both) {
             hanleHighlightInheritedNode(value, DirectionType.Target);
@@ -1315,7 +1133,6 @@ const GraphDrawPage = _react2().default.memo(() => {
             hanleHighlightInheritedNode(value, direction);
           }
         }
-
         targetGraph.filterConfig = {
           key: value,
           direction: direction,
@@ -1326,17 +1143,14 @@ const GraphDrawPage = _react2().default.memo(() => {
       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);
@@ -1354,7 +1168,6 @@ const GraphDrawPage = _react2().default.memo(() => {
       }
     });
   };
-
   (0, _react2().useLayoutEffect)(() => {
     initGraphCollections();
     return () => {
@@ -1371,22 +1184,18 @@ const GraphDrawPage = _react2().default.memo(() => {
       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, {
@@ -1454,10 +1263,9 @@ const GraphDrawPage = _react2().default.memo(() => {
                   '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;
-
+                        _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
+                        isFullscreen = _useFullscreen2[0],
+                        toggleFullscreen = _useFullscreen2[1].toggleFullscreen;
                       return _react2().default.createElement(_antd().Tooltip, {
                         title: t('Full Screen'),
                         getPopupContainer: getPopupContainer
@@ -1470,7 +1278,6 @@ const GraphDrawPage = _react2().default.memo(() => {
                     useAction: () => {
                       return {
                         run() {}
-
                       };
                     }
                   }
@@ -1479,14 +1286,12 @@ const GraphDrawPage = _react2().default.memo(() => {
                   type: 'void',
                   'x-component': () => {
                     const _useContext = (0, _react2().useContext)(CollapsedContext),
-                          handleSearchCollection = _useContext.handleSearchCollection,
-                          collectionList = _useContext.collectionList;
-
+                      handleSearchCollection = _useContext.handleSearchCollection,
+                      collectionList = _useContext.collectionList;
                     const _useState5 = (0, _react2().useState)([]),
-                          _useState6 = _slicedToArray(_useState5, 2),
-                          selectedKeys = _useState6[0],
-                          setSelectKey = _useState6[1];
-
+                      _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'
@@ -1523,7 +1328,6 @@ const GraphDrawPage = _react2().default.memo(() => {
                         }
                       }, _react2().default.createElement("span", null, compile(v.title)));
                     })));
-
                     return _react2().default.createElement(_antd().Popover, {
                       content: content,
                       autoAdjustOverflow: true,
@@ -1542,7 +1346,6 @@ const GraphDrawPage = _react2().default.memo(() => {
                     useAction: () => {
                       return {
                         run() {}
-
                       };
                     }
                   }
@@ -1564,7 +1367,6 @@ const GraphDrawPage = _react2().default.memo(() => {
                     useAction: () => {
                       return {
                         run() {}
-
                       };
                     }
                   }
@@ -1582,7 +1384,6 @@ const GraphDrawPage = _react2().default.memo(() => {
                       key: ConnectionType.Inherit,
                       label: 'Inheritance relationship only'
                     }];
-
                     const content = _react2().default.createElement("div", null, _react2().default.createElement(_antd().Menu, {
                       defaultSelectedKeys: [ConnectionType.Both],
                       selectable: true,
@@ -1603,13 +1404,12 @@ const GraphDrawPage = _react2().default.memo(() => {
                         onClick: e => {
                           targetGraph.connectionType = v.key;
                           const _targetGraph8 = targetGraph,
-                                filterConfig = _targetGraph8.filterConfig;
+                            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,
@@ -1628,7 +1428,6 @@ const GraphDrawPage = _react2().default.memo(() => {
                     useAction: () => {
                       return {
                         run() {}
-
                       };
                     }
                   }
@@ -1646,7 +1445,6 @@ const GraphDrawPage = _react2().default.memo(() => {
                       key: DirectionType.Source,
                       label: 'Source index'
                     }];
-
                     const content = _react2().default.createElement("div", null, _react2().default.createElement(_antd().Menu, {
                       defaultSelectedKeys: [DirectionType.Target],
                       selectable: true,
@@ -1667,15 +1465,13 @@ const GraphDrawPage = _react2().default.memo(() => {
                         onClick: e => {
                           targetGraph.direction = v.key;
                           const _targetGraph9 = targetGraph,
-                                filterConfig = _targetGraph9.filterConfig;
-
+                            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,
@@ -1731,5 +1527,4 @@ const GraphDrawPage = _react2().default.memo(() => {
     }
   })));
 });
-
 exports.GraphDrawPage = GraphDrawPage;