@riil-frontend/component-topology 13.0.0-dev.1 → 13.0.0-dev.2

package/es/core/hooks/useTopoEdit.js

@@ -4,19 +4,19 @@ import _Button from "@alifd/next/es/button";
 import _Dialog from "@alifd/next/es/dialog";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import _ from "lodash";
-import rlog from "@riil-frontend/component-topology-utils/es/rlog";
+import React, { useCallback, useState } from "react";
+import Logger from 'loglevel';
 import { TopoEvent } from "@riil-frontend/component-topology-graph";
 import { TPL_BLANK, TPL_TREE } from "../../utils/template";
-import { getGroupElementByTag, isEdge, isExistedElement, isGroup, isLayer, isNode, getGroupChildren } from "../../utils/htElementUtils";
+import { getGroupElementByTag, isEdge, containsElement, isGroup, isLayer, isNode, getGroupChildren, getElements } from "../../utils/htElementUtils";
 import useResourceConfig from "./useResourceConfig";
 import useGroupAddResource from "./useGroupAddResource";
 import { findGroupChildren } from "../../utils/topoData";
 import { isResourceElement } from "../../utils/htElementDataUtil";
 import { isClusterHtElement, isClusterMemberHtElement } from "../../utils/clusterUtil";
-import { isExitLink, mergeExportLinkData } from "../models/utils/linkUtils";
+import { isExitLink } from "../models/utils/linkUtils";
 import { isUniqueIp, buildIpNode } from "../../networkTopo/utils/exitLinkUtil";
+var rlog = Logger.getLogger('topo');
 
 var useTopoEdit = function useTopoEdit(params) {
   var topo = params.topo,
@@ -95,10 +95,6 @@ var useTopoEdit = function useTopoEdit(params) {
             return topoDispatchers.setTopoType(TPL_TREE);
 
           case 7:
-            // 更新配置
-            // resourceConfig.updateConfig(config);
-            // 更新配置对应的资源、链路
-            // editDispatchers.fetchDataByConfig();
             topo.historyManager.endTransaction();
 
           case 8:
@@ -197,48 +193,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);
-  // }
-
+  };
   /**
    * 删除容器。
    *
@@ -269,21 +224,17 @@ var useTopoEdit = function useTopoEdit(params) {
       // content: "若执行相关操作，此区域包含的内容也会一同被删除，确定删除吗？",
       content: "是否仅删除区域或将区域包含的内容一同删除？",
       footer: [/*#__PURE__*/React.createElement(_Button, {
+        key: "1",
         type: "normal",
         onClick: doDeleteOnlyGroup,
         style: {
           marginRight: "15px"
         }
       }, "\u4EC5\u5220\u9664\u533A\u57DF"), /*#__PURE__*/React.createElement(_Button, {
+        key: "2",
         type: "normal",
         onClick: doDelete
       }, "\u5168\u90E8\u5220\u9664")],
-      // okProps: {
-      //   children: "仅删除区域",
-      //   type: "normal",
-      //   className: "next-btn-normal",
-      // },
-      // cancelProps: { children: "全部删除" },
       messageProps: {
         type: "warning"
       }
@@ -294,13 +245,7 @@ var useTopoEdit = function useTopoEdit(params) {
       console.log("仅删除区域", topo.view.topoClient, data);
       var children = 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();
@@ -319,10 +264,6 @@ var useTopoEdit = function useTopoEdit(params) {
     }
   };
 
-  var deleteNode = function deleteNode(node) {
-    emitEvent(TopoEvent.EVENT_TRIGGER_DELETE, node);
-  };
-
   var handleDeleteNode = function handleDeleteNode(element) {
     var _topo$options$editor;
 
@@ -339,46 +280,32 @@ var useTopoEdit = function useTopoEdit(params) {
       if (typeof onNodeDelete === "function") {
         onNodeDelete(data);
       } else {
-        deleteNode(data);
+        emitEvent(TopoEvent.EVENT_TRIGGER_DELETE, data);
       }
     }
   }; // 删除关联在节点上的出口链路
 
 
-  var deleteExLink = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(node) {
-      var _node$getEdges$toArra, _node$getEdges;
-
-      var edges;
-      return _regeneratorRuntime.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 : [];
+  var deleteExLink = function deleteExLink(node) {
+    var _node$getEdges$toArra, _node$getEdges;
 
-            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 && 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 && isExitLink(link)) {
+            topo.getGraphView().dm().remove(edge);
+          }
         }
-      }, _callee4);
-    }));
-
-    return function deleteExLink(_x3) {
-      return _ref4.apply(this, arguments);
-    };
-  }();
+      });
+    }
+  };
 
   var onDeleteElement = function onDeleteElement(data) {
     var dtype = data.dtype;
@@ -429,7 +356,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") && !isExistedElement(topo.getHtTopo(), dm, element);
+      return (element.type === "link" || element.type === "linkGroup") && !containsElement(dm, element);
     });
     return newLinkElements;
   }
@@ -442,41 +369,56 @@ var useTopoEdit = function useTopoEdit(params) {
 
   function findUNExistedElements(elements) {
     var dm = topo.getDataModel();
-    var newLinkElements = elements.filter(function (element) {
-      return !isExistedElement(topo.getHtTopo(), dm, element);
+    var unExistedElements = elements.filter(function (element) {
+      return !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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10(group, resources) {
-      var id, tag, _yield$editDispatcher2, elements, nodeElements, newLinkElements, updateElements;
+    _bindGroupResources = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9(group, resources) {
+      var _yield$editDispatcher2, elements, dm, needDeleteHtDatas, nodeElements, newLinkElements, updateElements;
 
-      return _regeneratorRuntime.wrap(function _callee10$(_context10) {
-        while (1) switch (_context10.prev = _context10.next) {
+      return _regeneratorRuntime.wrap(function _callee9$(_context9) {
+        while (1) switch (_context9.prev = _context9.next) {
           case 0:
-            id = group.id, tag = group.tag;
-            rlog.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 = 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 = findGroupChildren(elements, group);
             newLinkElements = findUNExistedLinkElements(elements);
             updateElements = [].concat(nodeElements, newLinkElements);
@@ -491,16 +433,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);
   }
   /**
@@ -509,10 +451,10 @@ var useTopoEdit = function useTopoEdit(params) {
 
 
   function _addGroupResources() {
-    _addGroupResources = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11(group, newResourceIds) {
+    _addGroupResources = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10(group, newResourceIds) {
       var groupConfig, resources, groupData;
-      return _regeneratorRuntime.wrap(function _callee11$(_context11) {
-        while (1) switch (_context11.prev = _context11.next) {
+      return _regeneratorRuntime.wrap(function _callee10$(_context10) {
+        while (1) switch (_context10.prev = _context10.next) {
           case 0:
             groupConfig = resourceConfig.getGroupConfigByElement(group);
             resources = {
@@ -522,19 +464,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);
   }
   /**
@@ -546,24 +488,24 @@ var useTopoEdit = function useTopoEdit(params) {
 
 
   function _bindViewResources() {
-    _bindViewResources = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12(data) {
+    _bindViewResources = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11(data) {
       var config, result, _elements;
 
-      return _regeneratorRuntime.wrap(function _callee12$(_context12) {
-        while (1) switch (_context12.prev = _context12.next) {
+      return _regeneratorRuntime.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) {
@@ -577,35 +519,35 @@ 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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13(group, newResourceIds) {
+    _addLayerResources = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12(group, newResourceIds) {
       var _yield$editDispatcher3, elements, newElements;
 
-      return _regeneratorRuntime.wrap(function _callee13$(_context13) {
-        while (1) switch (_context13.prev = _context13.next) {
+      return _regeneratorRuntime.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);
@@ -628,32 +570,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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14(data) {
+    _addResourceToFirstLayer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13(data) {
       var group;
-      return _regeneratorRuntime.wrap(function _callee14$(_context14) {
-        while (1) switch (_context14.prev = _context14.next) {
+      return _regeneratorRuntime.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);
   }
@@ -685,27 +627,27 @@ var useTopoEdit = function useTopoEdit(params) {
 
 
   var onSaveComboRes = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(data) {
-      return _regeneratorRuntime.wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(data) {
+      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
           case 0:
             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:
@@ -717,22 +659,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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7(data) {
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(data) {
       var id, config, serialize, _config$layout, template, layout, saveConfig;
 
-      return _regeneratorRuntime.wrap(function _callee7$(_context7) {
-        while (1) switch (_context7.prev = _context7.next) {
+      return _regeneratorRuntime.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;
@@ -740,11 +682,11 @@ var useTopoEdit = function useTopoEdit(params) {
             if (onSave) {
               // 自定义保存
               saveConfig = /*#__PURE__*/function () {
-                var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
-                  return _regeneratorRuntime.wrap(function _callee6$(_context6) {
-                    while (1) switch (_context6.prev = _context6.next) {
+                var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+                  return _regeneratorRuntime.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,
@@ -753,13 +695,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);
                 };
               }();
 
@@ -772,13 +714,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);
     };
   }();
 
@@ -787,7 +729,7 @@ var useTopoEdit = function useTopoEdit(params) {
       type: type,
       data: data
     };
-    rlog.debug("TopoCenter:onSaveBind", eventData);
+    rlog.debug("=> ht: saveBind", eventData);
     emitEvent(TopoEvent.EVENT_DATA_RESULT, eventData);
   };
   /**
@@ -804,11 +746,11 @@ var useTopoEdit = function useTopoEdit(params) {
 
 
   var bindNodeResource = /*#__PURE__*/function () {
-    var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9(params) {
+    var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8(params) {
       var id, oldResId, newResId, node, parentGroupElement, htTopo, config, groupId, groupTag, _yield$editDispatcher, elements, newData, doBind, _doBind, replaceOrAddRes;
 
-      return _regeneratorRuntime.wrap(function _callee9$(_context9) {
-        while (1) switch (_context9.prev = _context9.next) {
+      return _regeneratorRuntime.wrap(function _callee8$(_context8) {
+        while (1) switch (_context8.prev = _context8.next) {
           case 0:
             replaceOrAddRes = function _replaceOrAddRes(resources, oldResId, newResId) {
               return _extends({}, resources, {
@@ -819,14 +761,23 @@ var useTopoEdit = function useTopoEdit(params) {
             };
 
             _doBind = function _doBind3() {
-              _doBind = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
-                var dm, newLinkElements, createElementsData, groupChildren, newGroupChildren, existedGroupChildren, groupElement, newElement, sm;
-                return _regeneratorRuntime.wrap(function _callee8$(_context8) {
-                  while (1) switch (_context8.prev = _context8.next) {
+              _doBind = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+                var dm, needDeleteHtDatas, newLinkElements, createElementsData, groupChildren, newGroupChildren, existedGroupChildren, groupElement, newElement, sm;
+                return _regeneratorRuntime.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 = 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;
@@ -875,7 +826,7 @@ var useTopoEdit = function useTopoEdit(params) {
                         htTopo.createElements(createElementsData);
                       }
 
-                      rlog.debug("批量创建元素", createElementsData); // 恢复图标、大小、位置
+                      rlog.debug("批量创建元素", createElementsData); // 恢复图标、大小、位置、父区域
 
                       newElement = dm.getDataByTag(newData.id);
 
@@ -883,21 +834,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]); // 临时放这里，仅拓扑中心有
+                      sm.setSelection([newElement]);
 
-                      if (topo.linkDynamicStyleExecutor) {
-                        topo.linkDynamicStyleExecutor.execute();
-                      }
-
-                    case 11:
+                    case 12:
                     case "end":
-                      return _context8.stop();
+                      return _context7.stop();
                   }
-                }, _callee8);
+                }, _callee7);
               }));
               return _doBind.apply(this, arguments);
             };
@@ -937,48 +885,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();
+            _context8.next = 21;
+            return doBind();
 
-            _Message.error("关联资源失败");
+          case 21:
+            topo.historyManager.endTransaction(); // 临时放这里，仅拓扑中心有
 
-            rlog.error("关联资源失败");
-            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.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);
     };
   }();
   /**
@@ -986,93 +941,96 @@ var useTopoEdit = function useTopoEdit(params) {
    */
 
 
-  function relateNodeIp(_x15, _x16) {
+  function relateNodeIp(_x14, _x15, _x16) {
     return _relateNodeIp.apply(this, arguments);
   }
 
   function _relateNodeIp() {
-    _relateNodeIp = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15(txtValue, nodeElement) {
-      var dm, isUnique, ipNodeData, configObj, configData, _elements2, newLinkElements, newLink, newLinkGroup, createElementsData, _htTopo;
+    _relateNodeIp = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14(txtValue, nodeElement, disableHistory) {
+      var dm, isUnique, ipNodeData, configObj, configData, elements, newLinkElements, newLink, newLinkGroup, createElementsData, _htTopo;
 
-      return _regeneratorRuntime.wrap(function _callee15$(_context15) {
-        while (1) switch (_context15.prev = _context15.next) {
+      return _regeneratorRuntime.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 = isUniqueIp(dm, txtValue, nodeElement); // 获取关联链路
+            isUnique = isUniqueIp(dm, txtValue, nodeElement);
 
-            if (!isUnique) {
-              _context15.next = 24;
+            if (isUnique) {
+              _context14.next = 7;
               break;
             }
 
-            ipNodeData = 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 = 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);
   }