@riil-frontend/component-topology 4.0.2 → 4.0.5

package/lib/hooks/useTopoEdit.js

@@ -901,7 +901,7 @@ var useTopoEdit = function useTopoEdit(params) {
 
   var bindNodeResource = /*#__PURE__*/function () {
     var _ref7 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8(params) {
-      var id, oldResId, newResId, node, groupElement, htTopo, config, groupId, groupTag, _yield$editDispatcher, elements, newData, newNodeElements, newLinkElements, newDatas, createElementsData, sm, dm, newElement, replaceOrAddRes;
+      var id, oldResId, newResId, node, parentGroupElement, htTopo, config, groupId, groupTag, _yield$editDispatcher, elements, newData, dm, newLinkElements, createElementsData, groupChildren, newGroupChildren, existedGroupChildren, groupElement, newElement, sm, replaceOrAddRes;
 
       return _regenerator["default"].wrap(function _callee8$(_context8) {
         while (1) {
@@ -921,15 +921,15 @@ var useTopoEdit = function useTopoEdit(params) {
 
               node = topo.getDataModel().getDataById(id); // 节点所属容器
 
-              groupElement = node.getParent();
+              parentGroupElement = node.getParent();
               htTopo = topo.getHtTopo();
               config = resourceConfig.getConfig();
 
-              if (groupElement) {
+              if (parentGroupElement) {
                 // 在容器中
-                groupId = groupElement.getTag(); // 容器业务id
+                groupId = parentGroupElement.getTag(); // 容器业务id
 
-                groupTag = groupElement.a("tag"); // 容器临时id
+                groupTag = parentGroupElement.a("tag"); // 容器临时id
 
                 config.groups = config.groups.map(function (g) {
                   // 匹配到容器，替换资源或增加
@@ -961,19 +961,8 @@ var useTopoEdit = function useTopoEdit(params) {
                 return item.id === newResId;
               });
 
-              if (newData.type === 'group') {
-                newNodeElements = [newData].concat((0, _topoData.findGroupChildren)(elements, newData));
-              } else {
-                newNodeElements = [newData];
-              }
-
-              newLinkElements = findUNExistedLinkElements(elements); // 过滤出关联的节点和连线，通知ht更新
-              // const newDatas = filterElementsByNodeId(elements, newResId);
-
-              newDatas = [].concat(newNodeElements, newLinkElements);
-
-              if (newDatas.length) {
-                _context8.next = 22;
+              if (newData) {
+                _context8.next = 19;
                 break;
               }
 
@@ -983,27 +972,58 @@ var useTopoEdit = function useTopoEdit(params) {
 
               return _context8.abrupt("return", false);
 
-            case 22:
-              createElementsData = {
-                groups: newDatas.filter(function (item) {
-                  return item.type === 'group';
-                }),
-                nodes: newDatas.filter(function (item) {
-                  return item.type === 'node';
-                }),
-                links: newDatas.filter(function (item) {
-                  return item.type === 'link';
-                }),
-                linkGroups: newDatas.filter(function (item) {
-                  return item.type === 'linkGroup';
-                })
-              };
+            case 19:
+              dm = htTopo.getGraphView().dm(); // 创建
 
-              _rlog["default"].debug('批量创建元素', newDatas, createElementsData);
+              newLinkElements = findUNExistedLinkElements(elements);
+              createElementsData = null;
+
+              if (newData.type === 'group') {
+                groupChildren = (0, _topoData.findGroupChildren)(elements, newData);
+                newGroupChildren = [];
+                existedGroupChildren = [];
+                groupChildren.forEach(function (groupChildData) {
+                  var ele = dm.getDataByTag(groupChildData.id);
+
+                  if (ele) {
+                    existedGroupChildren.push(groupChildData);
+                  } else {
+                    newGroupChildren.push(groupChildData);
+                  }
+                });
+                createElementsData = {
+                  groups: [newData],
+                  nodes: newGroupChildren,
+                  links: newLinkElements.filter(function (item) {
+                    return item.type === 'link';
+                  }),
+                  linkGroups: newLinkElements.filter(function (item) {
+                    return item.type === 'linkGroup';
+                  })
+                };
+                htTopo.createElements(createElementsData); // 切换前图上如果存在集群内的节点，切换节点为集群后，移到集群内
+
+                groupElement = dm.getDataByTag(newData.id);
+                existedGroupChildren.forEach(function (groupChildData) {
+                  var nodeElement = dm.getDataByTag(groupChildData.id);
+                  nodeElement.setParent(groupElement);
+                });
+              } else {
+                createElementsData = {
+                  groups: [],
+                  nodes: [newData],
+                  links: newLinkElements.filter(function (item) {
+                    return item.type === 'link';
+                  }),
+                  linkGroups: newLinkElements.filter(function (item) {
+                    return item.type === 'linkGroup';
+                  })
+                };
+                htTopo.createElements(createElementsData);
+              }
+
+              _rlog["default"].debug('批量创建元素', createElementsData); // 恢复图标、大小、位置
 
-              htTopo.createElements(createElementsData);
-              sm = htTopo.getGraphView().sm();
-              dm = htTopo.getGraphView().dm(); // 恢复图标、大小、位置
 
               newElement = dm.getDataByTag(newData.id);
 
@@ -1011,24 +1031,26 @@ var useTopoEdit = function useTopoEdit(params) {
                 newElement.setSize(node.getSize());
                 newElement.setPosition(node.getPosition());
                 newElement.setImage(node.getImage());
-              }
+              } // 选中
+
 
+              sm = htTopo.getGraphView().sm();
               sm.setSelection([newElement]); // 移除旧节点
 
               dm.remove(node); // saveBind(TopoEvent.DATA_TYPE_RESOURCE_SINGLE, newDatas);
               // node.a("customName", null);
               // 删除关联在节点上的出口链路
 
-              _context8.next = 33;
+              _context8.next = 31;
               return deleteExLink(node);
 
-            case 33:
+            case 31:
               // 临时放这里，仅拓扑中心有
               if (topo.linkDynamicStyleExecutor) {
                 topo.linkDynamicStyleExecutor.execute();
               }
 
-            case 34:
+            case 32:
             case "end":
               return _context8.stop();
           }

package/lib/topoCenter/components/editor/propertyViews/edge/addLinkDrawer/AddLinkDrawer.js

@@ -9,20 +9,18 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 
 var _drawer = _interopRequireDefault(require("@alifd/next/lib/drawer"));
 
+var _loading = _interopRequireDefault(require("@alifd/next/lib/loading"));
+
 var _message = _interopRequireDefault(require("@alifd/next/lib/message"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
-var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _topo = _interopRequireDefault(require("@riil-frontend/component-topology-common/es/services/topo"));
 
-var _ResourceTypeLimit = require("../../../../../../constants/ResourceTypeLimit");
-
 var _lodash = _interopRequireDefault(require("lodash"));
 
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
@@ -47,8 +45,6 @@ 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 CollapsePanel = _collapse["default"].Panel;
-
 function AddLinkDrawer(props) {
   var topo = props.topo,
       lineData = props.lineData;
@@ -81,18 +77,26 @@ function AddLinkDrawer(props) {
       loading = _useState3[0],
       setLoading = _useState3[1];
 
-  var _useState4 = (0, _react.useState)(),
-      sourceIFDoc = _useState4[0],
-      setSourceIFDoc = _useState4[1];
+  var _useState4 = (0, _react.useState)(false),
+      loadingConnectableNodes = _useState4[0],
+      setLoadingConnectableNodes = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      loadingFormData = _useState5[0],
+      setLoadingFormData = _useState5[1];
+
+  var _useState6 = (0, _react.useState)(),
+      sourceIFDoc = _useState6[0],
+      setSourceIFDoc = _useState6[1];
 
-  var _useState5 = (0, _react.useState)(),
-      targetIFDoc = _useState5[0],
-      setTargetIFDoc = _useState5[1]; // 保存后更新拓扑图状态
+  var _useState7 = (0, _react.useState)(),
+      targetIFDoc = _useState7[0],
+      setTargetIFDoc = _useState7[1]; // 保存后更新拓扑图状态
 
 
-  var _useState6 = (0, _react.useState)([]),
-      ciIdsConnectable = _useState6[0],
-      setCiIdsConnectable = _useState6[1];
+  var _useState8 = (0, _react.useState)([]),
+      ciIdsConnectable = _useState8[0],
+      setCiIdsConnectable = _useState8[1];
 
   var linkNodesRef = (0, _react.useRef)();
 
@@ -179,6 +183,11 @@ function AddLinkDrawer(props) {
       return _ref.apply(this, arguments);
     };
   }();
+  /**
+   * 连线第二个节点时的处理
+   * @param {*} e 
+   */
+
 
   var handleEvent = /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(e) {
@@ -193,16 +202,17 @@ function AddLinkDrawer(props) {
 
               setIsAddMode(true); // setTrue();
 
-              _context2.prev = 3;
-              _context2.next = 6;
+              setLoadingFormData(true);
+              _context2.prev = 4;
+              _context2.next = 7;
               return getPortsById(e.source._attrObject.id);
 
-            case 6:
+            case 7:
               sourcePorts = _context2.sent;
-              _context2.next = 9;
+              _context2.next = 10;
               return getPortsById(e.target._attrObject.id);
 
-            case 9:
+            case 10:
               targetPorts = _context2.sent;
               setSourceIFDoc(sourcePorts.portsDoc);
               setTargetIFDoc(targetPorts.portsDoc);
@@ -232,21 +242,24 @@ function AddLinkDrawer(props) {
                   connect_type: connect_type
                 }
               });
-              _context2.next = 23;
+              _context2.next = 24;
               break;
 
-            case 20:
-              _context2.prev = 20;
-              _context2.t0 = _context2["catch"](3);
+            case 21:
+              _context2.prev = 21;
+              _context2.t0 = _context2["catch"](4);
 
               _rlog["default"].error("出现异常", _context2.t0);
 
-            case 23:
+            case 24:
+              setLoadingFormData(false);
+
+            case 25:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[3, 20]]);
+      }, _callee2, null, [[4, 21]]);
     }));
 
     return function handleEvent(_x3) {
@@ -344,20 +357,22 @@ function AddLinkDrawer(props) {
 
   var getCiTypesConnectable = /*#__PURE__*/function () {
     var _ref4 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
-      var ciTypes, ciTypesConnectable, nodes, ciIds, ciNodes, isWriteable;
+      var ciNodes, ciTypes, ciTypesConnectable, nodes, ciIds, isWriteable;
       return _regenerator["default"].wrap(function _callee4$(_context4) {
         while (1) {
           switch (_context4.prev = _context4.next) {
             case 0:
+              ciNodes = [];
+              setLoadingConnectableNodes(true);
+              _context4.prev = 2;
               ciTypes = (0, _topoData.getCiTypes)(topo.dataModel.getData());
-              _context4.next = 3;
+              _context4.next = 6;
               return _topo["default"].networkLink.getCiTypesConnectable(ciTypes);
 
-            case 3:
+            case 6:
               ciTypesConnectable = _context4.sent;
               nodes = (0, _htElementUtils.getNodes)(topo.getDataModel());
               ciIds = [];
-              ciNodes = [];
 
               isWriteable = function isWriteable(node) {
                 var _node$a;
@@ -365,7 +380,7 @@ function AddLinkDrawer(props) {
                 return ["delete", "write"].indexOf(node.a("operation")) >= 0 || ((_node$a = node.a('permission')) === null || _node$a === void 0 ? void 0 : _node$a.writeable);
               };
 
-              nodes.map(function (node) {
+              nodes.forEach(function (node) {
                 // rlog.debug("过滤属性", node.a("operation"));
                 if (ciTypesConnectable[node.a("ciType")] && isWriteable(node)) {
                   ciIds.push(node.id);
@@ -376,14 +391,25 @@ function AddLinkDrawer(props) {
                 ciConnectable: ciIds
               });
               setCiIdsConnectable(ciIds);
+              _context4.next = 18;
+              break;
+
+            case 15:
+              _context4.prev = 15;
+              _context4.t0 = _context4["catch"](2);
+
+              _rlog["default"].error('查询可创建链路节点失败', _context4.t0);
+
+            case 18:
+              setLoadingConnectableNodes(false);
               return _context4.abrupt("return", ciNodes);
 
-            case 12:
+            case 20:
             case "end":
               return _context4.stop();
           }
         }
-      }, _callee4);
+      }, _callee4, null, [[2, 15]]);
     }));
 
     return function getCiTypesConnectable() {
@@ -673,7 +699,13 @@ function AddLinkDrawer(props) {
     };
   }();
 
-  return /*#__PURE__*/_react["default"].createElement(_drawer["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_loading["default"], {
+    visible: loadingConnectableNodes,
+    fullScreen: true
+  }), /*#__PURE__*/_react["default"].createElement(_loading["default"], {
+    visible: loadingFormData,
+    fullScreen: true
+  }), /*#__PURE__*/_react["default"].createElement(_drawer["default"], {
     closeMode: ["close", "esc"],
     visible: addLinkIsOpen,
     onClose: closeDrawer,
@@ -687,7 +719,7 @@ function AddLinkDrawer(props) {
     onSave: onSave,
     loading: loading,
     isAdd: isAddMode
-  }));
+  })));
 }
 
 var _default = AddLinkDrawer;

package/lib/utils/clusterUtil.js

@@ -12,11 +12,18 @@ exports.isClusterMemberHtElement = isClusterMemberHtElement;
 exports.processCluster = processCluster;
 exports.processClusterChildNode = processClusterChildNode;
 exports.processClusterChildrenNodes = processClusterChildrenNodes;
+exports.upgradeV103GraphClusterNode = upgradeV103GraphClusterNode;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _utils = require("@riil-frontend/component-topology-graph/es/utils");
+
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
 var _htElementUtils = require("./htElementUtils");
 
+var _topoData = require("./topoData");
+
 /**
  * 集群处理工具类
  */
@@ -110,4 +117,73 @@ function handleClusterNoPermission(topo) {
       group.setExpanded(false);
     }
   });
+}
+/**
+ * fix NEWITOM-22562 【1.0.3升级包集成】【网络拓扑】升级前创建的拓扑图，包含VSU集群，升级后不显示VSU集群了
+ * @param {*} topo 
+ */
+
+
+function upgradeV103GraphClusterNode(topo, topoData) {
+  var dm1 = topo.getDataModel();
+  dm1.removeDataByTag('00000000364831f0'); // FIXME
+
+  try {
+    doUpgrade();
+  } catch (error) {
+    _rlog["default"].error('upgradeV103GraphClusterNode', error);
+  }
+
+  function doUpgrade() {
+    // 查找图上未显示的集群、集群成员、关联的链路
+    var topoDataTrans = (0, _utils.transformTopoElements)(topoData);
+    var dm = topo.getDataModel();
+    var list = topoDataTrans.filter(function (data) {
+      return !dm.getDataByTag(data.id);
+    });
+
+    if (!list.length) {
+      return;
+    }
+
+    var groups = list.filter(function (item) {
+      return item.type === 'group';
+    });
+    var createElementsData = {
+      groups: groups,
+      nodes: list.filter(function (item) {
+        return item.type === 'node';
+      }),
+      links: list.filter(function (item) {
+        return item.type === 'link';
+      }),
+      linkGroups: list.filter(function (item) {
+        return item.type === 'linkGroup';
+      })
+    };
+    var htTopo = topo.getHtTopo();
+    htTopo.createElements(createElementsData);
+    groups.forEach(function (group) {
+      var groupElement = dm.getDataByTag(group.id); // 切换前图上如果存在集群内的节点，切换节点为集群后，移到集群内
+
+      (0, _topoData.findGroupChildren)(topoDataTrans, group).forEach(function (child) {
+        var childEle = dm.getDataByTag(child.id);
+
+        if (childEle) {
+          childEle.setParent(groupElement);
+        }
+      }); // 如果序列化有，恢复区域位置
+
+      var deserializeDm = new ht.DataModel();
+      var jsonDeserialize = new ht.JSONSerializer(deserializeDm);
+      jsonDeserialize.deserialize(topoData.serialize, null, true);
+      var oldNode = deserializeDm.getDataByTag(group.id);
+
+      if (oldNode) {
+        groupElement.setSize(oldNode.getSize());
+        groupElement.setPosition(oldNode.getPosition());
+        groupElement.setImage(oldNode.getImage());
+      }
+    }); // 恢复手工画的线
+  }
 }

package/lib/utils/topoData.js

@@ -383,23 +383,34 @@ function buildGlobal(_ref2) {
     canDragElementToGroup: function canDragElementToGroup(element, group) {
       if (!(0, _htElementUtils.isGroup)(group)) {
         return true;
-      }
+      } // 区域不能拖拽到区域
+
 
       if (element.dtype === 'container' && (0, _htElementUtils.isGroup)(group)) {
         return false;
-      }
+      } // 元素不能拖拽到集群
 
-      if ((0, _htElementUtils.isGroup)(group) && group.a('cluster')) {
+
+      if ((0, _clusterUtil.isClusterHtElement)(group)) {
         return false;
       }
 
-      console.error(element, group);
+      _rlog["default"].debug(element, group);
+
       return true;
     },
     // 图上元素能否拖动到区域中
-    canDragGraphElementsToGroup: function canDragGraphElementsToGroup(elemetns, group) {
-      if (!(0, _htElementUtils.isGroup)(group)) {
-        return true;
+    canDragGraphElementsToGroup: function canDragGraphElementsToGroup(elements, targetGroup) {
+      _rlog["default"].debug('canDragGraphElementsToGroup', {
+        elements: elements,
+        targetGroup: targetGroup
+      }); // 非集群的区域不能拖拽到区域
+
+
+      if (elements.filter(function (ele) {
+        return (0, _htElementUtils.isGroup)(ele) && !(0, _clusterUtil.isClusterHtElement)(ele);
+      }).length && (0, _htElementUtils.isGroup)(targetGroup)) {
+        return false;
       }
 
       return true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "4.0.2",
+  "version": "4.0.5",
   "description": "拓扑",
   "scripts": {
     "start": "build-scripts start",
@@ -114,6 +114,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@4.0.2/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@4.0.5/build/index.html",
   "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
 }