@riil-frontend/component-topology 12.1.0-dev.8 → 12.1.1

package/lib/core/hooks/useTopoEdit.js

@@ -19,9 +19,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _lodash = _interopRequireDefault(require("lodash"));
-
-var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+var _loglevel = _interopRequireDefault(require("loglevel"));
 
 var _componentTopologyGraph = require("@riil-frontend/component-topology-graph");
 
@@ -47,6 +45,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
+var rlog = _loglevel["default"].getLogger('topo');
+
 var useTopoEdit = function useTopoEdit(params) {
   var topo = params.topo,
       topoId = params.topoId,
@@ -96,8 +96,7 @@ var useTopoEdit = function useTopoEdit(params) {
 
 
   var showGlobalAddResourceDrawer = function showGlobalAddResourceDrawer() {
-    _rlog["default"].debug("showGlobalAddResourceDrawer", resourceConfig.getViewResources());
-
+    rlog.debug("showGlobalAddResourceDrawer", resourceConfig.getViewResources());
     setComboResData(resourceConfig.getViewResources());
     setShowComboResDrawer(true);
   };
@@ -112,12 +111,10 @@ var useTopoEdit = function useTopoEdit(params) {
             topo.historyManager.beginTransaction(); // 从拓扑图获取分层和资源配置
 
             config = resourceConfig.getConfigFromHt(topo.getDataModel());
-
-            _rlog["default"].info("onLayerAdd", {
+            rlog.info("onLayerAdd", {
               config: config
             }); // 如果非分层拓扑且有分层，切换到分层模板，设置方向
 
-
             if (!(!isLayerTopo && config.layers.length)) {
               _context.next = 7;
               break;
@@ -151,12 +148,10 @@ var useTopoEdit = function useTopoEdit(params) {
             emitEvent(_componentTopologyGraph.TopoEvent.EVENT_TRIGGER_DELETE, layerElement); // 获取资源配置
 
             config = resourceConfig.getConfigFromHt(topo.getDataModel());
-
-            _rlog["default"].info("deleteLayer", {
+            rlog.info("deleteLayer", {
               config: config
             }); // 如果没有分层，将拓扑类型切换为空白模板
 
-
             if (config.layers.length) {
               _context2.next = 7;
               break;
@@ -227,48 +222,7 @@ var useTopoEdit = function useTopoEdit(params) {
         return onOk;
       }()
     });
-  }; // const deleteGroupFooterBtn = () => {
-  //   return (
-  //     <div>
-  //       <Button type="primary" onClick={doDeleteOnlyGroup()}>
-  //         仅删除区域
-  //       </Button>
-  //       <Button type="primary" onClick={doDeleteOnlyGroup()}>
-  //         确定
-  //       </Button>
-  //     </div>
-  //   );
-  // };
-  // const [groupDeleteVisible, setGroupDeleteVisible] = useState(false);
-  // function doDeleteOnlyGroup(data,group) {
-  //   topo.historyManager.beginTransaction();
-  //   console.log("仅删除区域", topo.view.topoClient, data);
-  //   const children = getGroupChildren(group);
-  //   children.map((child) => {
-  //     child.setParent(null);
-  //     // var viewRect = topo.getGraphView().getViewRect();
-  //     // var nodeRect = child.getRect();
-  //     // child.setPosition(
-  //     //   viewRect.x + nodeRect.width + 2,
-  //     //   viewRect.y + nodeRect.height + 4
-  //     // ); // 解决集群从区域内移出时，连线位置未更新的问题
-  //     setTimeout(function () {
-  //       child.iv();
-  //       topo.historyManager.endTransaction();
-  //     }, 50);
-  //   });
-  //   topo.view.topoClient.deleteGroup(data);
-  //   topo.historyManager.endTransaction();
-  //   setGroupDeleteVisible(false);
-  //   // console.log("仅删除区域", children, group);
-  // }
-  // function doDelete(data) {
-  //   topo.historyManager.beginTransaction();
-  //   // FIXME 。如果命中其他的动态条件，则立即显示
-  //   topo.view.topoClient.deleteGroup(data);
-  //   setGroupDeleteVisible(false);
-  // }
-
+  };
   /**
    * 删除容器。
    *
@@ -299,21 +253,17 @@ var useTopoEdit = function useTopoEdit(params) {
       // content: "若执行相关操作，此区域包含的内容也会一同被删除，确定删除吗？",
       content: "是否仅删除区域或将区域包含的内容一同删除？",
       footer: [/*#__PURE__*/_react["default"].createElement(_button["default"], {
+        key: "1",
         type: "normal",
         onClick: doDeleteOnlyGroup,
         style: {
           marginRight: "15px"
         }
       }, "\u4EC5\u5220\u9664\u533A\u57DF"), /*#__PURE__*/_react["default"].createElement(_button["default"], {
+        key: "2",
         type: "normal",
         onClick: doDelete
       }, "\u5168\u90E8\u5220\u9664")],
-      // okProps: {
-      //   children: "仅删除区域",
-      //   type: "normal",
-      //   className: "next-btn-normal",
-      // },
-      // cancelProps: { children: "全部删除" },
       messageProps: {
         type: "warning"
       }
@@ -324,13 +274,7 @@ var useTopoEdit = function useTopoEdit(params) {
       console.log("仅删除区域", topo.view.topoClient, data);
       var children = (0, _htElementUtils.getGroupChildren)(group);
       children.map(function (child) {
-        child.setParent(null); // var viewRect = topo.getGraphView().getViewRect();
-        // var nodeRect = child.getRect();
-        // child.setPosition(
-        //   viewRect.x + nodeRect.width + 2,
-        //   viewRect.y + nodeRect.height + 4
-        // ); // 解决集群从区域内移出时，连线位置未更新的问题
-
+        child.setParent(null);
         setTimeout(function () {
           child.iv();
           topo.historyManager.endTransaction();
@@ -349,10 +293,6 @@ var useTopoEdit = function useTopoEdit(params) {
     }
   };
 
-  var deleteNode = function deleteNode(node) {
-    emitEvent(_componentTopologyGraph.TopoEvent.EVENT_TRIGGER_DELETE, node);
-  };
-
   var handleDeleteNode = function handleDeleteNode(element) {
     var _topo$options$editor;
 
@@ -369,51 +309,38 @@ var useTopoEdit = function useTopoEdit(params) {
       if (typeof onNodeDelete === "function") {
         onNodeDelete(data);
       } else {
-        deleteNode(data);
+        emitEvent(_componentTopologyGraph.TopoEvent.EVENT_TRIGGER_DELETE, data);
       }
     }
   }; // 删除关联在节点上的出口链路
 
 
-  var deleteExLink = /*#__PURE__*/function () {
-    var _ref4 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(node) {
-      var _node$getEdges$toArra, _node$getEdges;
+  var deleteExLink = function deleteExLink(node) {
+    var _node$getEdges$toArra, _node$getEdges;
 
-      var edges;
-      return _regenerator["default"].wrap(function _callee4$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
-          case 0:
-            // console.log("删除关联在节点上的出口链路- node, config", node, config);
-            edges = (_node$getEdges$toArra = (_node$getEdges = node.getEdges()) === null || _node$getEdges === void 0 ? void 0 : _node$getEdges.toArray()) !== null && _node$getEdges$toArra !== void 0 ? _node$getEdges$toArra : [];
-
-            if (edges.length > 0) {
-              edges.map(function (edge) {
-                if (edge.getTag()) {
-                  var link = topo.dataModel.getDataById(edge.getTag());
+    rlog.debug("删除关联在节点上的出口链路", {
+      node: node
+    });
+    var edges = (_node$getEdges$toArra = (_node$getEdges = node.getEdges()) === null || _node$getEdges === void 0 ? void 0 : _node$getEdges.toArray()) !== null && _node$getEdges$toArra !== void 0 ? _node$getEdges$toArra : [];
 
-                  if (link && (0, _linkUtils.isExitLink)(link)) {
-                    topo.getGraphView().dm().remove(edge);
-                  }
-                }
-              });
-            }
+    if (edges.length > 0) {
+      edges.map(function (edge) {
+        if (edge.getTag()) {
+          var link = topo.dataModel.getDataById(edge.getTag());
 
-          case 2:
-          case "end":
-            return _context4.stop();
+          if (link && (0, _linkUtils.isExitLink)(link)) {
+            topo.getGraphView().dm().remove(edge);
+          }
         }
-      }, _callee4);
-    }));
+      });
+    }
+  };
 
-    return function deleteExLink(_x3) {
-      return _ref4.apply(this, arguments);
-    };
-  }();
+  var batchDeleteSelectedElement = function batchDeleteSelectedElement() {};
 
   var onDeleteElement = function onDeleteElement(data) {
     var dtype = data.dtype;
-
-    _rlog["default"].info("onDeleteElement", data);
+    rlog.info("onDeleteElement", data);
 
     if ((0, _htElementUtils.isLayer)(data)) {
       handleDeleteLayer(data);
@@ -460,7 +387,7 @@ var useTopoEdit = function useTopoEdit(params) {
   function findUNExistedLinkElements(elements) {
     var dm = topo.getDataModel();
     var newLinkElements = elements.filter(function (element) {
-      return (element.type === "link" || element.type === "linkGroup") && !(0, _htElementUtils.isExistedElement)(topo.getHtTopo(), dm, element);
+      return (element.type === "link" || element.type === "linkGroup") && !(0, _htElementUtils.containsElement)(dm, element);
     });
     return newLinkElements;
   }
@@ -473,43 +400,56 @@ var useTopoEdit = function useTopoEdit(params) {
 
   function findUNExistedElements(elements) {
     var dm = topo.getDataModel();
-    var newLinkElements = elements.filter(function (element) {
-      return !(0, _htElementUtils.isExistedElement)(topo.getHtTopo(), dm, element);
+    var unExistedElements = elements.filter(function (element) {
+      return !(0, _htElementUtils.containsElement)(dm, element);
     });
-    return newLinkElements;
+    return unExistedElements;
   }
   /**
-   * 关联容器的资源
+   * 区域关联资源
+   * @param {{ id, tag }} group 
+   * @param {*} resources 
    */
 
 
-  function bindGroupResources(_x4, _x5) {
+  function bindGroupResources(_x3, _x4) {
     return _bindGroupResources.apply(this, arguments);
   }
 
   function _bindGroupResources() {
-    _bindGroupResources = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10(group, resources) {
-      var id, tag, _yield$editDispatcher2, elements, nodeElements, newLinkElements, updateElements;
+    _bindGroupResources = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9(group, resources) {
+      var _yield$editDispatcher2, elements, dm, needDeleteHtDatas, nodeElements, newLinkElements, updateElements;
 
-      return _regenerator["default"].wrap(function _callee10$(_context10) {
-        while (1) switch (_context10.prev = _context10.next) {
+      return _regenerator["default"].wrap(function _callee9$(_context9) {
+        while (1) switch (_context9.prev = _context9.next) {
           case 0:
-            id = group.id, tag = group.tag;
-
-            _rlog["default"].debug("bindGroupResources--id, tag", id, tag);
-
+            rlog.debug("区域关联资源", {
+              group: group,
+              resources: resources
+            });
             topo.historyManager.beginTransaction();
-            _context10.next = 5;
+            _context9.next = 4;
             return resourceConfig.updateGroupResources(group, resources);
 
-          case 5:
-            _context10.next = 7;
+          case 4:
+            _context9.next = 6;
             return editDispatchers.fetchDataByConfig();
 
-          case 7:
-            _yield$editDispatcher2 = _context10.sent;
+          case 6:
+            _yield$editDispatcher2 = _context9.sent;
             elements = _yield$editDispatcher2.elements;
-            // 区域里的子区域及子区域的节点、新增的链路
+            rlog.debug("区域关联资源: 元素列表", elements); // 先删除多余的元素
+
+            dm = topo.getDataModel();
+            needDeleteHtDatas = (0, _htElementUtils.getElements)(dm).filter(function (htData) {
+              return htData.a('id') && !elements.find(function (ele) {
+                return ele.id === htData.a('id');
+              });
+            });
+            needDeleteHtDatas.forEach(function (htData) {
+              return dm.remove(htData);
+            }); // 区域里的所有子节点子区域、新增的链路
+
             nodeElements = (0, _topoData.findGroupChildren)(elements, group);
             newLinkElements = findUNExistedLinkElements(elements);
             updateElements = [].concat(nodeElements, newLinkElements);
@@ -524,16 +464,16 @@ var useTopoEdit = function useTopoEdit(params) {
 
             topo.historyManager.endTransaction();
 
-          case 14:
+          case 17:
           case "end":
-            return _context10.stop();
+            return _context9.stop();
         }
-      }, _callee10);
+      }, _callee9);
     }));
     return _bindGroupResources.apply(this, arguments);
   }
 
-  function addGroupResources(_x6, _x7) {
+  function addGroupResources(_x5, _x6) {
     return _addGroupResources.apply(this, arguments);
   }
   /**
@@ -542,10 +482,10 @@ var useTopoEdit = function useTopoEdit(params) {
 
 
   function _addGroupResources() {
-    _addGroupResources = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11(group, newResourceIds) {
+    _addGroupResources = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10(group, newResourceIds) {
       var groupConfig, resources, groupData;
-      return _regenerator["default"].wrap(function _callee11$(_context11) {
-        while (1) switch (_context11.prev = _context11.next) {
+      return _regenerator["default"].wrap(function _callee10$(_context10) {
+        while (1) switch (_context10.prev = _context10.next) {
           case 0:
             groupConfig = resourceConfig.getGroupConfigByElement(group);
             resources = {
@@ -555,19 +495,19 @@ var useTopoEdit = function useTopoEdit(params) {
               id: group.getTag(),
               tag: group.a("tag")
             };
-            _context11.next = 5;
+            _context10.next = 5;
             return bindGroupResources(groupData, resources);
 
           case 5:
           case "end":
-            return _context11.stop();
+            return _context10.stop();
         }
-      }, _callee11);
+      }, _callee10);
     }));
     return _addGroupResources.apply(this, arguments);
   }
 
-  function bindViewResources(_x8) {
+  function bindViewResources(_x7) {
     return _bindViewResources.apply(this, arguments);
   }
   /**
@@ -579,24 +519,24 @@ var useTopoEdit = function useTopoEdit(params) {
 
 
   function _bindViewResources() {
-    _bindViewResources = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee12(data) {
+    _bindViewResources = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11(data) {
       var config, result, _elements;
 
-      return _regenerator["default"].wrap(function _callee12$(_context12) {
-        while (1) switch (_context12.prev = _context12.next) {
+      return _regenerator["default"].wrap(function _callee11$(_context11) {
+        while (1) switch (_context11.prev = _context11.next) {
           case 0:
             // console.log("关联视图的资源", data);
             config = resourceConfig.getConfig();
             config.resources = data;
-            _context12.next = 4;
+            _context11.next = 4;
             return resourceConfig.updateConfig(config);
 
           case 4:
-            _context12.next = 6;
+            _context11.next = 6;
             return editDispatchers.fetchDataByConfig();
 
           case 6:
-            result = _context12.sent;
+            result = _context11.sent;
             console.log("fetchDataByConfig", result);
 
             if (result) {
@@ -610,44 +550,42 @@ var useTopoEdit = function useTopoEdit(params) {
 
           case 9:
           case "end":
-            return _context12.stop();
+            return _context11.stop();
         }
-      }, _callee12);
+      }, _callee11);
     }));
     return _bindViewResources.apply(this, arguments);
   }
 
-  function addLayerResources(_x9, _x10) {
+  function addLayerResources(_x8, _x9) {
     return _addLayerResources.apply(this, arguments);
   }
 
   function _addLayerResources() {
-    _addLayerResources = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee13(group, newResourceIds) {
+    _addLayerResources = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee12(group, newResourceIds) {
       var _yield$editDispatcher3, elements, newElements;
 
-      return _regenerator["default"].wrap(function _callee13$(_context13) {
-        while (1) switch (_context13.prev = _context13.next) {
+      return _regenerator["default"].wrap(function _callee12$(_context12) {
+        while (1) switch (_context12.prev = _context12.next) {
           case 0:
             topo.historyManager.beginTransaction(); // 构造新的配置
 
-            _context13.next = 3;
+            _context12.next = 3;
             return resourceConfig.addLayerStaticResources(group, newResourceIds);
 
           case 3:
-            _context13.next = 5;
+            _context12.next = 5;
             return editDispatchers.fetchDataByConfig();
 
           case 5:
-            _yield$editDispatcher3 = _context13.sent;
+            _yield$editDispatcher3 = _context12.sent;
             elements = _yield$editDispatcher3.elements;
             // 2022-11-10 修复 添加资源后分层重新布局问题，仅布局新增资源。替换api topo.updateElements(data)
             newElements = findUNExistedElements(elements);
-
-            _rlog["default"].debug("添加分层资源", {
+            rlog.debug("添加分层资源", {
               layer: group,
               newElements: newElements
             });
-
             topo.getHtTopo().addElements(newElements); // 临时放这里，仅拓扑中心有
 
             if (topo.linkDynamicStyleExecutor) {
@@ -663,32 +601,32 @@ var useTopoEdit = function useTopoEdit(params) {
 
           case 14:
           case "end":
-            return _context13.stop();
+            return _context12.stop();
         }
-      }, _callee13);
+      }, _callee12);
     }));
     return _addLayerResources.apply(this, arguments);
   }
 
-  function addResourceToFirstLayer(_x11) {
+  function addResourceToFirstLayer(_x10) {
     return _addResourceToFirstLayer.apply(this, arguments);
   }
 
   function _addResourceToFirstLayer() {
-    _addResourceToFirstLayer = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee14(data) {
+    _addResourceToFirstLayer = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee13(data) {
       var group;
-      return _regenerator["default"].wrap(function _callee14$(_context14) {
-        while (1) switch (_context14.prev = _context14.next) {
+      return _regenerator["default"].wrap(function _callee13$(_context13) {
+        while (1) switch (_context13.prev = _context13.next) {
           case 0:
             group = resourceConfig.getGroups()[0];
-            _context14.next = 3;
+            _context13.next = 3;
             return addLayerResources(group, data);
 
           case 3:
           case "end":
-            return _context14.stop();
+            return _context13.stop();
         }
-      }, _callee14);
+      }, _callee13);
     }));
     return _addResourceToFirstLayer.apply(this, arguments);
   }
@@ -720,28 +658,27 @@ var useTopoEdit = function useTopoEdit(params) {
 
 
   var onSaveComboRes = /*#__PURE__*/function () {
-    var _ref5 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5(data) {
-      return _regenerator["default"].wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
+    var _ref4 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(data) {
+      return _regenerator["default"].wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
           case 0:
-            _rlog["default"].debug("关联资源-----onSaveComboRes", data);
-
+            rlog.debug("关联资源-----onSaveComboRes", data);
             topo.historyManager.beginTransaction();
 
             if (!(getAddResourceType() === "addToFirstLayer")) {
-              _context5.next = 7;
+              _context4.next = 7;
               break;
             }
 
-            _context5.next = 5;
+            _context4.next = 5;
             return addResourceToFirstLayer(data);
 
           case 5:
-            _context5.next = 9;
+            _context4.next = 9;
             break;
 
           case 7:
-            _context5.next = 9;
+            _context4.next = 9;
             return bindViewResources(data);
 
           case 9:
@@ -753,22 +690,22 @@ var useTopoEdit = function useTopoEdit(params) {
 
           case 12:
           case "end":
-            return _context5.stop();
+            return _context4.stop();
         }
-      }, _callee5);
+      }, _callee4);
     }));
 
-    return function onSaveComboRes(_x12) {
-      return _ref5.apply(this, arguments);
+    return function onSaveComboRes(_x11) {
+      return _ref4.apply(this, arguments);
     };
   }();
 
   var onSaveTopo = /*#__PURE__*/function () {
-    var _ref6 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7(data) {
+    var _ref5 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6(data) {
       var id, config, serialize, _config$layout, template, layout, saveConfig;
 
-      return _regenerator["default"].wrap(function _callee7$(_context7) {
-        while (1) switch (_context7.prev = _context7.next) {
+      return _regenerator["default"].wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
           case 0:
             id = data.id, config = data.config, serialize = data.serialize;
             _config$layout = config === null || config === void 0 ? void 0 : config.layout, template = _config$layout.type, layout = _config$layout.layout;
@@ -776,11 +713,11 @@ var useTopoEdit = function useTopoEdit(params) {
             if (onSave) {
               // 自定义保存
               saveConfig = /*#__PURE__*/function () {
-                var _ref7 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
-                  return _regenerator["default"].wrap(function _callee6$(_context6) {
-                    while (1) switch (_context6.prev = _context6.next) {
+                var _ref6 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+                  return _regenerator["default"].wrap(function _callee5$(_context5) {
+                    while (1) switch (_context5.prev = _context5.next) {
                       case 0:
-                        _context6.next = 2;
+                        _context5.next = 2;
                         return editDispatchers.saveTopo({
                           id: id,
                           layout: layout,
@@ -789,13 +726,13 @@ var useTopoEdit = function useTopoEdit(params) {
 
                       case 2:
                       case "end":
-                        return _context6.stop();
+                        return _context5.stop();
                     }
-                  }, _callee6);
+                  }, _callee5);
                 }));
 
                 return function saveConfig() {
-                  return _ref7.apply(this, arguments);
+                  return _ref6.apply(this, arguments);
                 };
               }();
 
@@ -808,13 +745,13 @@ var useTopoEdit = function useTopoEdit(params) {
 
           case 3:
           case "end":
-            return _context7.stop();
+            return _context6.stop();
         }
-      }, _callee7);
+      }, _callee6);
     }));
 
-    return function onSaveTopo(_x13) {
-      return _ref6.apply(this, arguments);
+    return function onSaveTopo(_x12) {
+      return _ref5.apply(this, arguments);
     };
   }();
 
@@ -823,9 +760,7 @@ var useTopoEdit = function useTopoEdit(params) {
       type: type,
       data: data
     };
-
-    _rlog["default"].debug("TopoCenter:onSaveBind", eventData);
-
+    rlog.debug("=> ht: saveBind", eventData);
     emitEvent(_componentTopologyGraph.TopoEvent.EVENT_DATA_RESULT, eventData);
   };
   /**
@@ -842,11 +777,11 @@ var useTopoEdit = function useTopoEdit(params) {
 
 
   var bindNodeResource = /*#__PURE__*/function () {
-    var _ref8 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9(params) {
+    var _ref7 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8(params) {
       var id, oldResId, newResId, node, parentGroupElement, htTopo, config, groupId, groupTag, _yield$editDispatcher, elements, newData, doBind, _doBind, replaceOrAddRes;
 
-      return _regenerator["default"].wrap(function _callee9$(_context9) {
-        while (1) switch (_context9.prev = _context9.next) {
+      return _regenerator["default"].wrap(function _callee8$(_context8) {
+        while (1) switch (_context8.prev = _context8.next) {
           case 0:
             replaceOrAddRes = function _replaceOrAddRes(resources, oldResId, newResId) {
               return (0, _extends2["default"])({}, resources, {
@@ -857,14 +792,23 @@ var useTopoEdit = function useTopoEdit(params) {
             };
 
             _doBind = function _doBind3() {
-              _doBind = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
-                var dm, newLinkElements, createElementsData, groupChildren, newGroupChildren, existedGroupChildren, groupElement, newElement, sm;
-                return _regenerator["default"].wrap(function _callee8$(_context8) {
-                  while (1) switch (_context8.prev = _context8.next) {
+              _doBind = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+                var dm, needDeleteHtDatas, newLinkElements, createElementsData, groupChildren, newGroupChildren, existedGroupChildren, groupElement, newElement, sm;
+                return _regenerator["default"].wrap(function _callee7$(_context7) {
+                  while (1) switch (_context7.prev = _context7.next) {
                     case 0:
                       dm = htTopo.getGraphView().dm(); // 移除旧节点。先删除后创建，解决ip节点替换ping资源后链路丢失问题
 
-                      dm.remove(node); // 创建
+                      dm.remove(node); // 先删除多余的元素。解决 区域子节点关联ping，未更新显示链路及删除ip节点
+
+                      needDeleteHtDatas = (0, _htElementUtils.getElements)(dm).filter(function (htData) {
+                        return htData.a('id') && !elements.find(function (ele) {
+                          return ele.id === htData.a('id');
+                        });
+                      });
+                      needDeleteHtDatas.forEach(function (htData) {
+                        return dm.remove(htData);
+                      }); // 创建
 
                       newLinkElements = findUNExistedLinkElements(elements);
                       createElementsData = null;
@@ -913,8 +857,7 @@ var useTopoEdit = function useTopoEdit(params) {
                         htTopo.createElements(createElementsData);
                       }
 
-                      _rlog["default"].debug("批量创建元素", createElementsData); // 恢复图标、大小、位置
-
+                      rlog.debug("批量创建元素", createElementsData); // 恢复图标、大小、位置、父区域
 
                       newElement = dm.getDataByTag(newData.id);
 
@@ -922,21 +865,18 @@ var useTopoEdit = function useTopoEdit(params) {
                         newElement.setSize(node.getSize());
                         newElement.setPosition(node.getPosition());
                         newElement.setImage(node.getImage());
+                        newElement.setParent(parentGroupElement);
                       } // 选中
 
 
                       sm = htTopo.getGraphView().sm();
-                      sm.setSelection([newElement]); // 临时放这里，仅拓扑中心有
-
-                      if (topo.linkDynamicStyleExecutor) {
-                        topo.linkDynamicStyleExecutor.execute();
-                      }
+                      sm.setSelection([newElement]);
 
-                    case 11:
+                    case 12:
                     case "end":
-                      return _context8.stop();
+                      return _context7.stop();
                   }
-                }, _callee8);
+                }, _callee7);
               }));
               return _doBind.apply(this, arguments);
             };
@@ -947,9 +887,7 @@ var useTopoEdit = function useTopoEdit(params) {
 
             topo.historyManager.beginTransaction();
             id = params.id, oldResId = params.oldResId, newResId = params.newResId;
-
-            _rlog["default"].debug("bindNodeResource", params);
-
+            rlog.debug("bindNodeResource", params);
             node = topo.getDataModel().getDataById(id); // 节点所属容器
 
             parentGroupElement = node.getParent();
@@ -978,49 +916,55 @@ var useTopoEdit = function useTopoEdit(params) {
               config.resources = replaceOrAddRes(config.resources, oldResId, newResId);
             }
 
-            _context9.next = 13;
+            _context8.next = 13;
             return resourceConfig.updateConfig(config);
 
           case 13:
-            _context9.next = 15;
+            _context8.next = 15;
             return editDispatchers.fetchDataByConfig();
 
           case 15:
-            _yield$editDispatcher = _context9.sent;
+            _yield$editDispatcher = _context8.sent;
             elements = _yield$editDispatcher.elements;
             newData = elements.find(function (item) {
               return item.id === newResId;
             });
 
-            if (newData) {
-              _context9.next = 23;
+            if (!newData) {
+              _context8.next = 25;
               break;
             }
 
-            topo.historyManager.endTransaction();
-
-            _message["default"].error("关联资源失败");
+            _context8.next = 21;
+            return doBind();
 
-            _rlog["default"].error("关联资源失败");
+          case 21:
+            topo.historyManager.endTransaction(); // 临时放这里，仅拓扑中心有
 
-            return _context9.abrupt("return", false);
+            if (topo.linkDynamicStyleExecutor) {
+              topo.linkDynamicStyleExecutor.execute();
+            }
 
-          case 23:
-            _context9.next = 25;
-            return doBind();
+            _context8.next = 29;
+            break;
 
           case 25:
             topo.historyManager.endTransaction();
 
-          case 26:
+            _message["default"].error("关联资源失败");
+
+            rlog.error("关联资源失败");
+            return _context8.abrupt("return", false);
+
+          case 29:
           case "end":
-            return _context9.stop();
+            return _context8.stop();
         }
-      }, _callee9);
+      }, _callee8);
     }));
 
-    return function bindNodeResource(_x14) {
-      return _ref8.apply(this, arguments);
+    return function bindNodeResource(_x13) {
+      return _ref7.apply(this, arguments);
     };
   }();
   /**
@@ -1028,93 +972,96 @@ var useTopoEdit = function useTopoEdit(params) {
    */
 
 
-  function relateNodeIp(_x15, _x16) {
+  function relateNodeIp(_x14, _x15, _x16) {
     return _relateNodeIp.apply(this, arguments);
   }
 
   function _relateNodeIp() {
-    _relateNodeIp = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee15(txtValue, nodeElement) {
-      var dm, isUnique, ipNodeData, configObj, configData, _elements2, newLinkElements, newLink, newLinkGroup, createElementsData, _htTopo;
+    _relateNodeIp = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee14(txtValue, nodeElement, disableHistory) {
+      var dm, isUnique, ipNodeData, configObj, configData, elements, newLinkElements, newLink, newLinkGroup, createElementsData, _htTopo;
 
-      return _regenerator["default"].wrap(function _callee15$(_context15) {
-        while (1) switch (_context15.prev = _context15.next) {
+      return _regenerator["default"].wrap(function _callee14$(_context14) {
+        while (1) switch (_context14.prev = _context14.next) {
           case 0:
+            if (disableHistory === void 0) {
+              disableHistory = false;
+            }
+
             if (txtValue) {
-              _context15.next = 2;
+              _context14.next = 3;
               break;
             }
 
-            return _context15.abrupt("return");
+            return _context14.abrupt("return");
 
-          case 2:
-            // if (txtValue === nodeElement.a('bindIp')) {
-            //   return;
-            // }
+          case 3:
             // 根据配置查询拓扑数据
             dm = topo.getDataModel(); // 执行唯一性验证
 
-            isUnique = (0, _exitLinkUtil.isUniqueIp)(dm, txtValue, nodeElement); // 获取关联链路
+            isUnique = (0, _exitLinkUtil.isUniqueIp)(dm, txtValue, nodeElement);
 
-            if (!isUnique) {
-              _context15.next = 24;
+            if (isUnique) {
+              _context14.next = 7;
               break;
             }
 
-            ipNodeData = (0, _exitLinkUtil.buildIpNode)(txtValue);
-            _context15.next = 8;
-            return deleteExLink(nodeElement);
+            return _context14.abrupt("return");
 
-          case 8:
+          case 7:
+            disableHistory && topo.historyManager.setDisabled(true, '关联IP: 删除关联出口链路、节点绑定IP'); // 删除关联出口链路
+
+            deleteExLink(nodeElement); // 节点绑定IP
+
+            ipNodeData = (0, _exitLinkUtil.buildIpNode)(txtValue);
             nodeElement.a(ipNodeData);
             nodeElement.setName(txtValue);
-            nodeElement.setTag("ip:" + txtValue); // 获取配置
+            nodeElement.setTag("ip:" + txtValue);
+            disableHistory && topo.historyManager.setDisabled(false, '关联IP: 删除关联出口链路、节点绑定IP'); // 获取配置
 
             configObj = topo.resourceConfig.getConfig();
-            _context15.next = 14;
+            _context14.next = 17;
             return resourceConfig.updateConfig(configObj);
 
-          case 14:
-            _context15.next = 16;
+          case 17:
+            _context14.next = 19;
             return editDispatchers.fetchDataByConfig();
 
-          case 16:
-            configData = _context15.sent;
-            // console.log("configData",configObj, configData);
-            _elements2 = configData.elements;
-            newLinkElements = findUNExistedLinkElements(_elements2); // console.log("configData", configData, newLinkElements);
-
+          case 19:
+            configData = _context14.sent;
+            elements = configData.elements;
+            newLinkElements = findUNExistedLinkElements(elements);
             newLink = newLinkElements.filter(function (item) {
               return item.type === "link";
             });
             newLinkGroup = newLinkElements.filter(function (item) {
               return item.type === "linkGroup";
-            }); // const newData = elements.find((item) => item.id === `ip:${txtValue}`);
-            // console.log("newData",newLinkElements, newLink);
-
+            });
             createElementsData = {
               groups: [],
               nodes: [],
               links: newLink,
               linkGroups: newLinkGroup
             };
-            console.log("createElementsData", createElementsData);
+            rlog.debug("createElementsData", createElementsData);
 
             if ([].concat(newLink, newLinkGroup).length > 0) {
               _htTopo = topo.getHtTopo();
+              disableHistory && topo.historyManager.setDisabled(true, '关联IP: 创建链路');
 
-              _htTopo.createElements(createElementsData); // 临时放这里，仅拓扑中心有
+              _htTopo.createElements(createElementsData);
 
+              disableHistory && topo.historyManager.setDisabled(false, '关联IP: 创建链路'); // 临时放这里，仅拓扑中心有
 
               if (topo.linkDynamicStyleExecutor) {
                 topo.linkDynamicStyleExecutor.execute();
               }
             }
 
-          case 24:
+          case 27:
           case "end":
-            return _context15.stop();
+            return _context14.stop();
         }
-      }, _callee15);
+      }, _callee14);
     }));
     return _relateNodeIp.apply(this, arguments);
   }
@@ -1135,8 +1082,7 @@ var useTopoEdit = function useTopoEdit(params) {
    */
 
   var setViewMouseMode = function setViewMouseMode(mode) {
-    _rlog["default"].debug("设置视图鼠标模式", mode);
-
+    rlog.debug("设置视图鼠标模式", mode);
     topo.getHtTopo().setViewMouseMode(mode);
     topoEditDispatchers.update({
       viewMouseMode: mode
@@ -1208,6 +1154,7 @@ var useTopoEdit = function useTopoEdit(params) {
     onCloseComboResDrawer: function onCloseComboResDrawer() {
       return setShowComboResDrawer(false);
     },
+    batchDeleteSelectedElement: batchDeleteSelectedElement,
 
     /**
      * 拓扑图元素（节点、连线、容器）删除回调