@riil-frontend/component-topology 11.0.10 → 11.0.12

package/lib/core/editor/components/BottomFloatTool/HelpIcon.module.scss

@@ -0,0 +1,77 @@
+.topoHelpIconBtn{
+    width: '100%';
+    height: '100%';
+    margin: 0;
+    padding: 0;
+    border: 0;
+    cursor: pointer;
+    margin-top: -1px;
+    margin-left: -1px;
+}
+:global{
+    #white.next-overlay-inner{
+        padding: 10px;
+        .next-balloon-close{
+            right: 10px;
+            top:8px
+        }
+    }
+    #dark.next-overlay-inner{
+        padding: 10px;
+        background-color: #063658;
+        border-color: #08A5F4;
+        .next-balloon-close{
+            right: 10px;
+            /* color:$color-text1-5; */
+            color:#fff;
+            top:8px
+        }
+    }
+    #dark.next-overlay-inner:after{
+        border-color: #08A5F4;
+        background: #063658;
+    }
+}
+.topoHelpIcon{
+    width: 187px;
+    .whiteBox,.darkBox{
+        color:$color-text1-4;
+        font-size: 12px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        width: 187px;
+        background: #FFFFFF;
+        .title{
+            line-height: 15px;
+            font-weight: 500;
+        }
+        .colse{
+            float: right;
+            cursor: pointer;
+        }
+        .conten{
+            color:$color-text1-6;
+            font-weight: 400;
+            line-height: 20px;
+            margin-top: 8px;
+            :global{
+                .next-row{
+                    margin: 4px 0;
+                }
+                .next-col-8{
+                    text-align: right;
+                    color:$color-text1-4;
+                }
+            }
+        }
+        
+    }
+    .darkBox{
+        background: #063658;
+        color:$color-text1-5;
+        opacity: 0.85;
+        .conten{
+            color:$color-text1-5;
+            opacity: 0.85;
+        }
+    }
+}

package/lib/core/editor/hooks/useNewElementTheme.js

@@ -11,6 +11,8 @@ var _themes = _interopRequireDefault(require("../config/themes"));
 
 var _themeUtil = _interopRequireDefault(require("../utils/themeUtil"));
 
+var _nodeNameVisibleUtil = require("../../models/utils/nodeNameVisibleUtil");
+
 function useNewElementTheme(props) {
   var topo = props.topo;
   var topoModState = topo.store.useModelState('topoMod');
@@ -29,6 +31,7 @@ function useNewElementTheme(props) {
           data = e.data;
 
       if (kind === 'add') {
+        // 设置主题样式
         var displayConfig = topo.store.getModelState('displayConfig');
         var theme = displayConfig.canvasTheme || 'white';
 
@@ -41,7 +44,9 @@ function useNewElementTheme(props) {
         }),
             setElementTheme = _ThemeUtil.setElementTheme;
 
-        setElementTheme(data, themeConfig);
+        setElementTheme(data, themeConfig); // 临时放这里，新加入节点按配置显示隐藏名称
+
+        (0, _nodeNameVisibleUtil.setNewNodeNameVisible)(topo, data);
       }
     }
 

package/lib/core/hooks/useCanvasThemeConfig.js

@@ -15,12 +15,16 @@ var themeMap = [{
   color: '#FFFFFF',
   editor: {
     // 快捷帮助
-    helpIcon: {}
+    helpIcon: 'white'
   }
 }, {
   name: 'lightblue',
   label: '蓝色',
-  color: '#F9FBFF'
+  color: '#F9FBFF',
+  editor: {
+    // 快捷帮助
+    helpIcon: 'white'
+  }
 }, // {
 //   name: 'yellow',
 //   label: '黄色',
@@ -34,11 +38,19 @@ var themeMap = [{
 {
   name: 'dark',
   label: '深色',
-  color: '#031425'
+  color: '#031425',
+  editor: {
+    // 快捷帮助
+    helpIcon: 'dark'
+  }
 }, {
   name: 'poly',
   label: 'Poly',
-  backgroundImage: '/img/topo/themes/poly.png'
+  backgroundImage: '/img/topo/themes/poly.png',
+  editor: {
+    // 快捷帮助
+    helpIcon: 'dark'
+  }
 }].reduce(function (map, item) {
   var _extends2;
 

package/lib/core/hooks/useTopoEdit.js

@@ -263,7 +263,8 @@ var useTopoEdit = function useTopoEdit(params) {
       content: "是否仅删除区域或将区域包含的内容一同删除？",
       //footer:()=>{return <><Button type="primary" onClick={doDeleteOnlyGroup}>仅删除区域</Button><Button type="primary" onClick={doDeleteOnlyGroup}>确定</Button></>},
       okProps: {
-        children: "仅删除区域"
+        children: "仅删除区域",
+        type: "normal"
       },
       cancelProps: {
         children: "全部删除"
@@ -318,27 +319,30 @@ var useTopoEdit = function useTopoEdit(params) {
     });
 
     function doDeleteOnlyGroup() {
-      // console.log("仅删除区域", topo.view.topoClient, data);
+      topo.historyManager.beginTransaction(); // 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); // 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); // console.log("仅删除区域", children, group);
+      topo.view.topoClient.deleteGroup(data);
+      topo.historyManager.endTransaction(); // console.log("仅删除区域", children, group);
     }
 
     function doDelete() {
       topo.historyManager.beginTransaction(); // FIXME 。如果命中其他的动态条件，则立即显示
 
       topo.view.topoClient.deleteGroup(data);
-      topo.historyManager.endTransaction();
     }
   };
 

package/lib/core/models/AttributeMetricDisplay.js

@@ -11,22 +11,18 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _topo = _interopRequireDefault(require("@riil-frontend/component-topology-common/es/services/topo"));
-
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
 
-var _lodash = require("lodash");
-
 var _ResourceInfoDisplay = require("../../constants/ResourceInfoDisplay");
 
-var _services = require("../services");
-
 var _manageStatusUtil = require("../utils/manageStatusUtil");
 
 var _attributeFormatter = _interopRequireDefault(require("./attributeFormatter"));
 
 var _DictCache = _interopRequireDefault(require("./cache/DictCache"));
 
+var _nodeNameVisibleUtil = require("./utils/nodeNameVisibleUtil");
+
 function isGraphField(item) {
   return item.type === 'graph';
 }
@@ -177,11 +173,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
   ;
 
   _proto.getModelType = function getModelType(ci) {
-    if (ci.ciType === 'network_link') {
-      return ci.attributes.support_templates;
-    }
-
-    return ci.ciType;
+    return this.topo.elementTagTipConfig.getModelType(ci);
   }
   /**
    * 按链路类型获取对应的属性、指标配置
@@ -310,67 +302,21 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
       });
     });
     return metricCodes;
-  }
-  /**
-   * 从配置获得节点名称是否显示
-   * @param {*} node
-   * @returns
-   */
-  ;
-
-  _proto.getNodeNameVisible = function getNodeNameVisible(node) {
-    // if (!this.topo.isViewMode()) {
-    //   return true;
-    // }
-    var _this$getConfig3 = this.getConfig(),
-        nodeTag = _this$getConfig3.nodeTag;
-
-    var visible = true;
-
-    if (nodeTag) {
-      var isCustom = nodeTag.isCustom,
-          data = nodeTag.data;
-      var items = (isCustom ? data[node.ciType] : data) || [];
-      visible = !!items.filter(function (item) {
-        return item.type === 'graph';
-      }).length; // ipNode逻辑
-
-      if (isCustom && node.bindType === 'ip') {
-        visible = true;
-      }
-    }
-
-    return visible;
   };
 
   _proto.getNodesNameVisible = function getNodesNameVisible() {
-    var _this4 = this;
-
-    var nodes = this.topo.dataModel.getNodes();
-    return nodes.map(function (node) {
-      // console.log("getNodesNameVisible", node);
-      return {
-        id: node.id,
-        visible: _this4.getNodeNameVisible(node)
-      };
-    });
+    return (0, _nodeNameVisibleUtil.getNodesNameVisible)(this.topo);
   }
   /**
    * 根据配置执行节点名称显示隐藏
+   * 1. 资源根据标注配置显示隐藏
+   * 2. 默认标注配置不勾选图片名称，图片节点名称不显示
+   * 3. 自定义标注配置，图片名称显示
    */
   ;
 
   _proto.updateNodesNameVisible = function updateNodesNameVisible() {
-    var dm = this.topo.getDataModel();
-    this.getNodesNameVisible().forEach(function (_ref) {
-      var id = _ref.id,
-          visible = _ref.visible;
-      var ele = dm.getDataByTag(id); //
-
-      if (ele) {
-        ele.a('isShowName', visible);
-      }
-    });
+    (0, _nodeNameVisibleUtil.updateNodesNameVisible)(this.topo);
   }
   /**
    * 加载标注、悬浮框数据
@@ -474,7 +420,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
   /*#__PURE__*/
   function () {
     var _translateRefAttribute = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(ciDatas) {
-      var _this5 = this;
+      var _this4 = this;
 
       var refIdMap, ciRefAttributeMap, refIds, refCiMap;
       return _regenerator["default"].wrap(function _callee3$(_context3) {
@@ -490,7 +436,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
                     attributeMap = ciData.attributeMap;
                 ciRefAttributeMap[id] = [];
 
-                var ciTypeMeta = _this5.topo.ciTyeCache.getCiType(ciType);
+                var ciTypeMeta = _this4.topo.ciTyeCache.getCiType(ciType);
 
                 if (ciTypeMeta) {
                   ciTypeMeta.attributes.filter(function (attributeMeta) {
@@ -667,14 +613,14 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
   ;
 
   _proto.buildTagsTips = function buildTagsTips() {
-    var _this6 = this,
+    var _this5 = this,
         _this$extElementTagTi;
 
     // 获取标注、悬浮框配置
     var ciConfigs = this.getResourceTagTipConfig(); // console.log("buildTagsTips---ciConfigs", ciConfigs);
 
     var ciTagsAndTips = ciConfigs.map(function (ciConfig) {
-      return _this6.buildElementTagsTips(ciConfig.id);
+      return _this5.buildElementTagsTips(ciConfig.id);
     }); // console.log("ciTagsAndTips", ciTagsAndTips);
 
     var extTagsAndTips = ((_this$extElementTagTi = this.extElementTagTipBuilder) === null || _this$extElementTagTi === void 0 ? void 0 : _this$extElementTagTi.getExtElementTagsAndTips()) || [];

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 "11.0.10" === 'string' ? "11.0.10" : null;
+var version = typeof "11.0.12" === 'string' ? "11.0.12" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/lib/core/models/cache/CiTypeCache.js

@@ -22,12 +22,12 @@ var _keyBy = _interopRequireDefault(require("lodash/keyBy"));
 /**
  * Ci类型属性、指标缓存
  */
-var CiTyeCache = /*#__PURE__*/function () {
-  function CiTyeCache() {
+var CiTypeCache = /*#__PURE__*/function () {
+  function CiTypeCache() {
     this.cache = {};
   }
 
-  var _proto = CiTyeCache.prototype;
+  var _proto = CiTypeCache.prototype;
 
   _proto.getCiTypeMap = /*#__PURE__*/function () {
     var _getCiTypeMap = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(ciTypeIds) {
@@ -71,7 +71,7 @@ var CiTyeCache = /*#__PURE__*/function () {
     var _load = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(ciTypeIds) {
       var _this = this;
 
-      var unLoadCiTypeIds, ciTypeMetas, cache;
+      var unLoadCiTypeIds, ciTypeMetas;
       return _regenerator["default"].wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
@@ -84,36 +84,10 @@ var CiTyeCache = /*#__PURE__*/function () {
 
             case 3:
               ciTypeMetas = _context2.sent;
-              cache = (0, _extends2["default"])({}, this.cache);
-              ciTypeMetas.forEach(function (ciTypeMeta) {
-                var attributes = (ciTypeMeta.attributes || []).map(function (attr) {
-                  if (ciTypeMeta.code !== 'network_link') {
-                    return attr;
-                  } // 链路属性名称转化，临时方案
-
-
-                  var name = {
-                    source_id: '源端口',
-                    destination_id: '目的端口'
-                  }[attr.code] || attr.name;
-                  var userVisible = ['source_id', 'destination_id'].indexOf(attr.code) !== -1 ? true : attr.userVisible;
-                  return (0, _extends2["default"])({}, attr, {
-                    name: name,
-                    userVisible: userVisible
-                  });
-                });
-                var metrics = ciTypeMeta.metrics || [];
-                cache[ciTypeMeta.code] = (0, _extends2["default"])({}, ciTypeMeta, {
-                  attributes: attributes,
-                  attributeMap: (0, _keyBy["default"])(attributes, 'code'),
-                  metrics: metrics,
-                  metricMap: (0, _keyBy["default"])(metrics, 'code')
-                });
-              });
-              this.cache = cache;
+              this.addCiTypes(ciTypeMetas);
               return _context2.abrupt("return", this.cache);
 
-            case 8:
+            case 6:
             case "end":
               return _context2.stop();
           }
@@ -128,15 +102,32 @@ var CiTyeCache = /*#__PURE__*/function () {
     return load;
   }();
 
+  _proto.addCiTypes = function addCiTypes(ciTypeMetas) {
+    var _this2 = this;
+
+    ciTypeMetas.forEach(function (ciTypeMeta) {
+      _this2.addCiType(ciTypeMeta);
+    });
+  };
+
+  _proto.addCiType = function addCiType(ciTypeMeta) {
+    var cache = (0, _extends2["default"])({}, this.cache);
+    var attributes = adapterNetworkLinkAttributes(ciTypeMeta, ciTypeMeta.attributes || []);
+    var metrics = ciTypeMeta.metrics || [];
+    cache[ciTypeMeta.code] = (0, _extends2["default"])({}, ciTypeMeta, {
+      attributes: attributes,
+      attributeMap: (0, _keyBy["default"])(attributes, 'code'),
+      metrics: metrics,
+      metricMap: (0, _keyBy["default"])(metrics, 'code')
+    });
+    this.cache = cache;
+  };
+
   _proto.getCiType = function getCiType(typeCode) {
     return this.cache[typeCode];
   };
 
   _proto.getCiTypeByCi = function getCiTypeByCi(ci) {
-    // if (ci.ciType === 'network_link') {
-    //   const supportTemplates = link.attributes.support_templates;
-    // } else {
-    // }
     return this.getCiType(ci.ciType);
   };
 
@@ -150,15 +141,34 @@ var CiTyeCache = /*#__PURE__*/function () {
     return ciType === null || ciType === void 0 ? void 0 : ciType.metricMap[metricCode];
   };
 
-  (0, _createClass2["default"])(CiTyeCache, [{
+  (0, _createClass2["default"])(CiTypeCache, [{
     key: "ciTypes",
     get: function get() {
       return this.cache;
     }
   }]);
-  return CiTyeCache;
+  return CiTypeCache;
 }();
 
-var _default = new CiTyeCache();
+function adapterNetworkLinkAttributes(ciTypeMeta, attributes) {
+  return attributes.map(function (attr) {
+    if (ciTypeMeta.code !== 'network_link') {
+      return attr;
+    } // 链路属性名称转化，临时方案
+
+
+    var name = {
+      source_id: '源端口',
+      destination_id: '目的端口'
+    }[attr.code] || attr.name;
+    var userVisible = ['source_id', 'destination_id'].indexOf(attr.code) !== -1 ? true : attr.userVisible;
+    return (0, _extends2["default"])({}, attr, {
+      name: name,
+      userVisible: userVisible
+    });
+  });
+}
+
+var _default = new CiTypeCache();
 
 exports["default"] = _default;