@riil-frontend/component-topology 9.0.0-a.26 → 9.0.0-a.28

package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
+var _checkbox = _interopRequireDefault(require("@alifd/next/lib/checkbox"));
+
 var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
 
 var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
@@ -94,10 +96,12 @@ function getValuesByEdges(topo) {
     })[0] || 'nil';
   }
 
-  function getEdgesValues(edges) {
+  function getEdgesValues(edges, topo) {
     var edgeValues = [];
+    var htTopo = topo.getHtTopo();
     edges.forEach(function (edge) {
       edgeValues.push({
+        baseAgreement: htTopo.getEdgeMultarc(edges),
         lineButton: edge.s('edge.type'),
         startPoint: getStartPoint(edge),
         endPoint: getEndPoint(edge),
@@ -108,8 +112,9 @@ function getValuesByEdges(topo) {
   }
 
   var selectionEdges = (0, _edgeTypeStyleUtil.getEdgesBySelection)(topo);
-  var edgeValues = getEdgesValues(selectionEdges);
+  var edgeValues = getEdgesValues(selectionEdges, topo);
   var values = {
+    baseAgreement: false,
     lineButton: undefined,
     startPoint: undefined,
     endPoint: undefined,
@@ -135,10 +140,18 @@ function EdgeType(props) {
       selection = props.selection,
       _onChange = props.onChange;
 
+  var _useState = (0, _react.useState)(false),
+      disable = _useState[0],
+      setDisabel = _useState[1];
+
   var field = _field["default"].useField({
     autoUnmount: false,
     values: getValuesByEdges(topo),
     onChange: function onChange(name, value) {
+      if (name == 'baseAgreement') {
+        setDisabel(value);
+      }
+
       if (['startPoint', 'endPoint'].includes(name) && value === 'nil') {
         _onChange(name, null);
       } else {
@@ -157,8 +170,12 @@ function EdgeType(props) {
     inline: true,
     labelAlign: "top"
   }, /*#__PURE__*/_react["default"].createElement(FormItem, null, /*#__PURE__*/_react["default"].createElement(_LineType["default"], {
-    name: "lineButton"
-  })), /*#__PURE__*/_react["default"].createElement(FormItem, {
+    name: "lineButton",
+    disable: disable
+  })), /*#__PURE__*/_react["default"].createElement(FormItem, null, /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
+    name: "baseAgreement",
+    onChange: _onChange
+  }, "\u81EA\u52A8\u8C03\u6574")), /*#__PURE__*/_react["default"].createElement(FormItem, {
     label: "\u8D77\u70B9"
   }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
     name: "startPoint",

package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.module.scss

@@ -5,7 +5,6 @@
   background: #FFFFFF;
   border-radius: 4px;
   margin-bottom: -7px;
-
   :global {
     .#{$css-prefix}form-item:first-child{
       margin-top: 0;
@@ -15,6 +14,11 @@
       margin-top: 7px;
       margin-bottom: 7px;
     }
+    .#{$css-prefix}form-item:nth-child(2){
+      display: block !important;
+      margin-top: 7px;
+      margin-bottom: 0px;
+    }
     .#{$css-prefix}form.#{$css-prefix}inline .#{$css-prefix}form-item:not(:last-child) {
       margin-right: 8px;
       .#{$css-prefix}select-trigger {

package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js

@@ -36,29 +36,48 @@ var LINE_TYPE_OPTIONS = [{
   value: 'ortho',
   label: '双折线',
   icon: 'topo_linear_icon_bilinear'
+}, {
+  value: 'arc',
+  label: '单弧线',
+  icon: 'topo_linear_icon_arc_line'
 }, {
   value: 'doublearc',
   label: '双弧线',
   icon: 'topo_linear_icon_arcline'
+}, {
+  value: 'points',
+  label: '自由线形',
+  icon: 'topo_linear_icon_pointsline'
 }];
 
 var LineType = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var value = props.value,
-      onChange = props.onChange;
+      onChange = props.onChange,
+      disable = props.disable;
 
   function lineButton(item) {
-    var _classNames;
+    if (disable) {
+      return /*#__PURE__*/_react["default"].createElement(_button["default"], {
+        className: _LineTypeModule["default"].redioBtnDisable
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        src: "/img/topo/editor/lineType/" + item.icon + "_disable.svg",
+        alt: "",
+        className: _LineTypeModule["default"].iconImg
+      }));
+    } else {
+      var _classNames;
 
-    return /*#__PURE__*/_react["default"].createElement(_button["default"], {
-      className: (0, _classnames["default"])(_LineTypeModule["default"].redioBtn, (_classNames = {}, _classNames[_LineTypeModule["default"].selected] = value === item.value, _classNames)),
-      onClick: function onClick() {
-        onChange(item.value);
-      }
-    }, /*#__PURE__*/_react["default"].createElement("img", {
-      src: "/img/topo/editor/lineType/" + item.icon + ".svg",
-      alt: "",
-      className: _LineTypeModule["default"].iconImg
-    }));
+      return /*#__PURE__*/_react["default"].createElement(_button["default"], {
+        className: (0, _classnames["default"])(_LineTypeModule["default"].redioBtn, (_classNames = {}, _classNames[_LineTypeModule["default"].selected] = value === item.value, _classNames)),
+        onClick: function onClick() {
+          onChange(item.value);
+        }
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        src: "/img/topo/editor/lineType/" + item.icon + ".svg",
+        alt: "",
+        className: _LineTypeModule["default"].iconImg
+      }));
+    }
   }
 
   return /*#__PURE__*/_react["default"].createElement("div", {

package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.module.scss

@@ -1,5 +1,15 @@
 .lineType{
   display:flex;
+  .redioBtnDisable {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    border: none !important;
+    color: #4D6277;
+    padding: 0;
+    margin-right: 10px;
+    text-align: center;
+  }
   .redioBtn {
     width: 24px;
     height: 24px;
@@ -7,9 +17,9 @@
     border: none !important;
     color: #4D6277;
     padding: 0;
-    margin-right: 16px;
+    margin-right: 10px;
     text-align: center;
-
+  
     .iconImg {
       vertical-align: middle;
     }

package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/index.js

@@ -68,6 +68,12 @@ function EdgeTypeButton(props) {
       return;
     }
 
+    if (name == 'baseAgreement') {
+      /** TODO: 自动调整api调用*/
+      htTopo.setEdgeMultarc(edges, value);
+      return;
+    }
+
     (0, _edgeTypeStyleUtil.setEdgesAndChildren)(topo, edges, function (edge) {
       if (name === 'startPoint') {
         // 删除设置

package/lib/core/editor/components/settings/propertyViews/group/DataTab/hoooks/useGroupRelateResource.js

@@ -11,8 +11,6 @@ var _componentTopologyGraph = require("@riil-frontend/component-topology-graph")
 
 var _sortBy = _interopRequireDefault(require("lodash/sortBy"));
 
-var _htElementDataUtil = require("../../../../../../../../utils/htElementDataUtil");
-
 var _htElementUtils = require("../../../../../../../../utils/htElementUtils");
 
 function sortResourcesByName(resources) {
@@ -30,7 +28,9 @@ function useGroupRelateResource(props) {
   } : _props$useGroupSortRe; // const [resources, setResources] = useState([]);
   // 过滤出资源
 
-  var resourceNodes = (0, _htElementDataUtil.getGroupChildrenResourceElements)(group); // 资源按名称排序
+  var resourceNodes = (0, _htElementUtils.getGroupChildren)(group).filter(function (item) {
+    return !!item.getTag();
+  }); // 资源按名称排序
 
   var useSortNodes = useGroupSortResources || ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.sortResources) || sortResourcesByName;
   var data = useSortNodes(resourceNodes.map(function (node) {

package/lib/core/editor/components/settings/propertyViews/node/data/BindIpInput.js

@@ -54,7 +54,6 @@ function BindIpInput(props) {
       if (errors) {
         console.error("saveIp-error", errors, vals);
       } else {
-        // console.log("saveIp", txtValue);
         setError("");
         onChange(txtValue);
         topoEditApi.relateNodeIp(txtValue, nodeElement);
@@ -74,13 +73,6 @@ function BindIpInput(props) {
 
   var checkIp = function checkIp(rule, value, callback) {
     var dm = topo.getDataModel();
-    var rex = /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/;
-    var reg = value.match(rex);
-
-    if (reg === null) {
-      return callback();
-    }
-
     var isUnique = (0, _exitLinkUtil.isUniqueIp)(dm, value, nodeElement); // console.log("checkIp", isUnique);
 
     if (!isUnique) {

package/lib/core/hooks/useCanvasTheme.js

@@ -74,6 +74,7 @@ function useCanvasTheme(props) {
     if (graphLoaded) {
       try {
         topo.getHtTopo().getGraphView().dm().setBackground(canvasColor);
+        topo.getHtTopo().getGraphView().dm().setBackground(canvasbackgroundImage);
       } catch (error) {
         console.error('切换主题失败', error);
       }

package/lib/core/hooks/useTopoEdit.js

@@ -25,8 +25,6 @@ var _componentTopologyGraph = require("@riil-frontend/component-topology-graph")
 
 var _template = require("../../utils/template");
 
-var _topoPermissionUtil = _interopRequireDefault(require("../../utils/topoPermissionUtil"));
-
 var _htElementUtils = require("../../utils/htElementUtils");
 
 var _useResourceConfig = _interopRequireDefault(require("./useResourceConfig"));
@@ -253,7 +251,7 @@ var useTopoEdit = function useTopoEdit(params) {
       return;
     }
 
-    if (!(0, _htElementDataUtil.getGroupChildrenResourceElements)(group).length || (0, _clusterUtil.isClusterHtElement)(group)) {
+    if (!(0, _htElementUtils.getGroupChildren)(group).filter(_htElementDataUtil.isResourceElement).length || (0, _clusterUtil.isClusterHtElement)(group)) {
       doDelete();
       return;
     } // 有子节点时需要确认
@@ -1016,42 +1014,23 @@ var useTopoEdit = function useTopoEdit(params) {
 
   function _relateNodeIp() {
     _relateNodeIp = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee16(txtValue, nodeElement) {
-      var dm, htTopo, elementNodes, isUnique, ids, ip, configObj, configData, _elements, newLinkElements, createElementsData;
+      var dm, htTopo, elementNodes, isUnique, ip, configObj, configData, _elements, newLinkElements, createElementsData;
 
       return _regenerator["default"].wrap(function _callee16$(_context16) {
         while (1) {
           switch (_context16.prev = _context16.next) {
             case 0:
-              // console.log("bindIPtoNode", data);
+              // console.log("bindIPtoNode", txtValue, nodeElement);
               // 根据配置查询拓扑数据
               dm = topo.getDataModel();
               htTopo = topo.getHtTopo();
               elementNodes = (0, _htElementUtils.getNodes)(dm); // 执行唯一性验证
 
               isUnique = (0, _exitLinkUtil.isUniqueIp)(dm, txtValue, nodeElement);
-              ids = [];
-              elementNodes.map(function (element) {
-                if (element.getTag()) {
-                  ids.push(element.getTag());
-                }
-              });
-              ip = {
-                id: "ip:" + txtValue,
-                name: txtValue,
-                customName: null,
-                bindType: "ip",
-                // 'groupId': null,
-                // 'groupTag': null,
-                ipAddress: txtValue,
-                // 'attributes': [],
-                // 'metrics': [],
-                type: "node",
-                isbinding: true // 'dtype': 'device'
-
-              }; // 获取关联链路
+              ip = (0, _exitLinkUtil.buildIpNode)(txtValue); // 获取关联链路
 
               if (!isUnique) {
-                _context16.next = 23;
+                _context16.next = 21;
                 break;
               }
 
@@ -1060,19 +1039,17 @@ var useTopoEdit = function useTopoEdit(params) {
               nodeElement.setName(txtValue);
               nodeElement.setTag("ip:" + txtValue); // 获取配置
 
-              configObj = topo.resourceConfig.getConfig(); // console.log("configObj", configObj);
-              // configObj.linkIps = [...(configObj.linkIps ?? []), txtValue];
-              // console.log("configObj---over", configObj);
-
-              _context16.next = 15;
+              configObj = topo.resourceConfig.getConfig();
+              _context16.next = 13;
               return resourceConfig.updateConfig(configObj);
 
-            case 15:
-              _context16.next = 17;
+            case 13:
+              _context16.next = 15;
               return editDispatchers.fetchDataByConfig();
 
-            case 17:
+            case 15:
               configData = _context16.sent;
+              // console.log("configData", configData);
               _elements = configData.elements;
               newLinkElements = findUNExistedLinkElements(_elements);
               createElementsData = {
@@ -1088,7 +1065,7 @@ var useTopoEdit = function useTopoEdit(params) {
               console.log("createElementsData", createElementsData);
               htTopo.createElements(createElementsData);
 
-            case 23:
+            case 21:
             case "end":
               return _context16.stop();
           }

package/lib/core/models/TopoApp.js

@@ -56,7 +56,7 @@ var _SelectionModel = _interopRequireDefault(require("./SelectionModel"));
 var _CiCache = _interopRequireDefault(require("./cache/CiCache"));
 
 // eslint-disable-next-line no-undef
-var version = typeof "9.0.0-a.26" === 'string' ? "9.0.0-a.26" : null;
+var version = typeof "9.0.0-a.28" === 'string' ? "9.0.0-a.28" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/lib/core/store/models/topoConfig.js

@@ -274,6 +274,7 @@ function _default(topoApp) {
                   case 0:
                     editState = rootState.topoConfig;
                     resources = editState.resources, _editState$groups = editState.groups, groups = _editState$groups === void 0 ? [] : _editState$groups, _editState$exportLink = editState.exportLinkIdList, exportLinkIdList = _editState$exportLink === void 0 ? [] : _editState$exportLink, _editState$ipNodes = editState.ipNodes, ipNodes = _editState$ipNodes === void 0 ? [] : _editState$ipNodes;
+                    console.log("editState", editState);
                     query = {
                       id: rootState.topoMod.topoId,
                       resources: resources,
@@ -281,10 +282,10 @@ function _default(topoApp) {
                       exportLinkIdList: exportLinkIdList,
                       ipNodes: ipNodes
                     };
-                    _context2.next = 5;
+                    _context2.next = 6;
                     return _this2.getTopoByConditions(query);
 
-                  case 5:
+                  case 6:
                     data = _context2.sent;
 
                     _rlog["default"].debug("按配置查询拓扑数据", {
@@ -297,7 +298,7 @@ function _default(topoApp) {
 
                     return _context2.abrupt("return", data);
 
-                  case 8:
+                  case 9:
                   case "end":
                     return _context2.stop();
                 }
@@ -339,7 +340,8 @@ function _default(topoApp) {
               while (1) {
                 switch (_context4.prev = _context4.next) {
                   case 0:
-                    // rlog.debug("getTopoByConditions--------", params);
+                    _rlog["default"].debug("getTopoByConditions--------", params);
+
                     topoId = params.id, resources = params.resources, groups = params.groups, exportLinkIdList = params.exportLinkIdList, ipNodes = params.ipNodes;
                     viewConditions = (0, _topoData2.resToConditions)(resources);
                     groupInfo = (0, _utils.isAvailableArray)(groups) && groups.map(function (group) {
@@ -351,23 +353,23 @@ function _default(topoApp) {
 
                     _rlog["default"].debug("getTopoByConditions--------", viewConditions, groupInfo);
 
-                    _context4.next = 6;
+                    _context4.next = 7;
                     return topoApp.serverApi.getTopoDataByResource(topoId, viewConditions, groupInfo, exportLinkIdList, ipNodes);
 
-                  case 6:
+                  case 7:
                     data = _context4.sent;
 
                     _rlog["default"].debug("getTopoByConditions--------data", data);
 
-                    _context4.next = 10;
+                    _context4.next = 11;
                     return (0, _getTopoData.buildData)(data);
 
-                  case 10:
+                  case 11:
                     data = _context4.sent;
-                    _context4.next = 13;
+                    _context4.next = 14;
                     return Promise.all([(0, _getTopoData.addLinkData)(data), topoApp.ciTyeCache.getCiTypeMap((0, _topoData.getCiTypes)(data)), dispatch.customIcon.loadCustomIcons()]);
 
-                  case 13:
+                  case 14:
                     _yield$Promise$all = _context4.sent;
                     dataWithLinkDetail = _yield$Promise$all[0];
                     _combTopoData = (0, _topoData.combTopoData)({
@@ -394,7 +396,7 @@ function _default(topoApp) {
                       topoDataTrans: topoDataTrans
                     });
 
-                  case 21:
+                  case 22:
                   case "end":
                     return _context4.stop();
                 }

package/lib/networkTopo/utils/exitLinkUtil.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
+exports.buildIpNode = buildIpNode;
 exports.isUniqueIp = isUniqueIp;
 exports.processByConditionResult = processByConditionResult;
 exports.processExitLink = processExitLink;
@@ -22,14 +23,14 @@ function isPingHtNode(node, ip) {
 }
 
 function isIpHtNode(node, ip) {
-  return node.a('bindType') === ip && node.a('ipAddress') === ip;
+  return node.a("bindType") === 'ip' && node.a("bindIp") === ip;
 }
 
 function buildIpNode(ip) {
   return {
-    'id': "ip:" + ip,
-    'name': ip,
-    bindType: 'ip',
+    id: "ip:" + ip,
+    name: ip,
+    bindType: "ip",
     // 绑定资源类型。关联资源 值为空，关联IP ip
     bindIp: ip,
     // TODO 所属区域，从序列化拿
@@ -59,11 +60,26 @@ function isExitLink(link) {
 
 function isUniqueIp(dataModel, ip, nodeElement) {
   var nodes = (0, _htElementUtils.getNodes)(dataModel);
-  var isUnique = !!nodes.filter(function (node) {
-    return node.getId() !== nodeElement.getId();
-  }).filter(function (node) {
-    return isPingHtNode(node, ip) || isIpHtNode(node, ip);
-  });
+  var isUnique = true;
+  console.log("nodes-nodeElement", nodes, nodeElement);
+
+  if (nodeElement) {
+    console.log("nodes-nodeElement---filter", nodes.filter(function (node) {
+      return node.getId() !== (nodeElement === null || nodeElement === void 0 ? void 0 : nodeElement.getId());
+    }));
+    var arr = nodes.filter(function (node) {
+      return node.getId() !== (nodeElement === null || nodeElement === void 0 ? void 0 : nodeElement.getId());
+    }).filter(function (node) {
+      return isPingHtNode(node, ip) || isIpHtNode(node, ip);
+    });
+    isUnique = arr.length === 0;
+    console.log("nodes-nodeElement---filter", arr, isUnique);
+  } else {
+    isUnique = nodes.filter(function (node) {
+      return node.a("ipAddress") === ip;
+    }).length === 0;
+  }
+
   return isUnique;
 }
 /**

package/package.json

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