@riil-frontend/component-topology 11.0.4 → 11.0.5

package/lib/core/components/DisplaySettingDrawer/NodeTag.js

@@ -15,6 +15,8 @@ var _ResourceInfoDisplay = require("../../../constants/ResourceInfoDisplay");
 
 var _BasicConfig = _interopRequireDefault(require("./ResourceDisplay/BasicConfig"));
 
+var _NodeAttrSettingDrawer = _interopRequireDefault(require("./components/NodeAttrSettingDrawer"));
+
 var defaultCommonOptions = [{
   value: 'graph:name',
   label: '图片名称'
@@ -31,15 +33,17 @@ var defaultCommonOptions = [{
 var NodeTag = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var commonOptions = props.commonOptions;
   return /*#__PURE__*/_react["default"].createElement(_BasicConfig["default"], (0, _extends2["default"])({
-    ref: ref
-  }, props, {
+    ref: ref,
     limit: 3,
     elementType: "node",
     showType: "tag",
     commonOptions: commonOptions || defaultCommonOptions,
     defaultCommonConfig: _ResourceInfoDisplay.DEFAULT_NODE_TAG_COMMON_CONFIG,
+    customSettingDrawer: function customSettingDrawer(params) {
+      return /*#__PURE__*/_react["default"].createElement(_NodeAttrSettingDrawer["default"], params);
+    },
     type: "node"
-  }));
+  }, props));
 });
 
 NodeTag.displayName = 'NodeTag';

package/lib/core/components/DisplaySettingDrawer/NodeTip.js

@@ -15,6 +15,8 @@ var _ResourceInfoDisplay = require("../../../constants/ResourceInfoDisplay");
 
 var _BasicConfig = _interopRequireDefault(require("./ResourceDisplay/BasicConfig"));
 
+var _NodeAttrSettingDrawer = _interopRequireDefault(require("./components/NodeAttrSettingDrawer"));
+
 var defaultCommonOptions = [{
   value: 'attribute:display_name',
   label: '显示名称'
@@ -31,14 +33,16 @@ var defaultCommonOptions = [{
 var NodeTip = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var commonOptions = props.commonOptions;
   return /*#__PURE__*/_react["default"].createElement(_BasicConfig["default"], (0, _extends2["default"])({
-    ref: ref
-  }, props, {
+    ref: ref,
     limit: 4,
     elementType: "node",
     showType: "tip",
     commonOptions: commonOptions || defaultCommonOptions,
-    defaultCommonConfig: _ResourceInfoDisplay.DEFAULT_TIP_COMMON_CONFIG
-  }));
+    defaultCommonConfig: _ResourceInfoDisplay.DEFAULT_TIP_COMMON_CONFIG,
+    customSettingDrawer: function customSettingDrawer(params) {
+      return /*#__PURE__*/_react["default"].createElement(_NodeAttrSettingDrawer["default"], params);
+    }
+  }, props));
 });
 
 NodeTip.propTypes = {

package/lib/core/components/DisplaySettingDrawer/components/NodeAttrSettingDrawer.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/lib/rlog"));
+
+var _ModelAttrSelectDrawer = _interopRequireDefault(require("../../../../components/ModelAttrSelectDrawer"));
+
+var _nodeCiTypeAttrUtil = require("../../ResourceViewAttributeSetting/nodeCiTypeAttrUtil");
+
+var _excluded = ["topo", "showType", "value"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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 NodeAttrSettingDrawer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var topo = props.topo,
+      showType = props.showType,
+      value = props.value,
+      otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+
+  var _useState = (0, _react.useState)([]),
+      data = _useState[0],
+      setData = _useState[1];
+
+  var queryData = function queryData() {
+    _rlog["default"].info('属性配置：加载数据');
+
+    var items = (0, _nodeCiTypeAttrUtil.getNodeModels)(topo);
+    setData(items);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_ModelAttrSelectDrawer["default"], (0, _extends2["default"])({
+    ref: ref
+  }, otherProps, {
+    value: value,
+    data: data,
+    showType: showType,
+    queryData: queryData
+  }));
+});
+NodeAttrSettingDrawer.displayName = 'NodeAttrSettingDrawer';
+NodeAttrSettingDrawer.propTypes = {};
+var _default = NodeAttrSettingDrawer;
+exports["default"] = _default;

package/lib/core/components/ResourceViewAttributeSetting/nodeCiTypeAttrUtil.js

@@ -2,10 +2,95 @@
 
 exports.__esModule = true;
 exports.getNodeCiModSet = getNodeCiModSet;
+exports.getNodeModels = getNodeModels;
 
 var _topoData = require("../../../utils/topoData");
 
-// 资源类型含有属性和指标集合
+/**
+ * 获取节点标注、悬浮框配置
+ * @param {*} topo 
+ * @returns 
+ */
+function getNodeModels(topo) {
+  var data = topo.store.getModelState('topoMod').data;
+  var ciTypeMap = topo.ciTyeCache.ciTypes;
+  return getNodeModSet();
+
+  function getNodeModSet() {
+    var ciTypes = (0, _topoData.getCiTypesFromCiElements)(data.nodes);
+    return getMods(ciTypes);
+  }
+  /**
+   *
+   * @param {array} ciTypeCodes
+   * @returns
+   */
+
+
+  function getMods(ciTypeCodes) {
+    return Object.keys(ciTypeMap).filter(function (item) {
+      return ciTypeCodes.includes(item);
+    }).map(function (key) {
+      var ciTypeObj = ciTypeMap[key];
+      return {
+        id: ciTypeObj.code,
+        label: ciTypeObj.displayName,
+        icon: ciTypeObj.icon,
+        list: ciModfilter(ciTypeObj, 'node')
+      };
+    });
+  }
+  /**
+   * 过滤ci元数据中的属性和指标，用于属性和指标显示设置
+   * @param {} ciTypeObj
+   * @returns
+   */
+
+
+  function ciModfilter(ciTypeObj, type) {
+    var custom = [];
+
+    if (type === 'node') {
+      custom.push.apply(custom, [{
+        id: 'graph:name',
+        code: 'name',
+        name: '图片名称',
+        type: 'custom'
+      }, {
+        id: 'ciType:display_name',
+        code: 'ciType',
+        name: '资源类型',
+        type: 'custom'
+      }]);
+    }
+
+    var attributes = ciTypeObj.attributes.filter(function (attr) {
+      return !!attr.userVisible;
+    }).map(function (item) {
+      return {
+        type: 'attribute',
+        id: "attribute:" + item.code,
+        code: "attribute:" + item.code,
+        name: item.name,
+        typeName: '属性'
+      };
+    });
+    var metrics = ciTypeObj.metrics.map(function (item) {
+      return {
+        type: 'metric',
+        id: "metric:" + item.code,
+        code: "metric:" + item.code,
+        name: item.name,
+        typeName: '指标'
+      };
+    });
+    return [].concat(custom, attributes, metrics);
+  }
+
+  ;
+} // 资源类型含有属性和指标集合
+
+
 function getNodeCiModSet(params) {
   var topo = params.topo;
   var data = topo.store.getModelState('topoMod').data;
@@ -35,8 +120,7 @@ function getNodeCiModSet(params) {
         icon: ciTypeObj.icon,
         list: ciModfilter(ciTypeObj, globalConfig, 'node', ciTypeObj.code)
       };
-    }); // console.log("modSet--------------------", modSet);
-
+    });
     return modSet;
   }
   /**
@@ -66,13 +150,7 @@ function getNodeCiModSet(params) {
       (_tags$data$code = tags.data[code]) === null || _tags$data$code === void 0 ? void 0 : _tags$data$code.map(function (item) {
         tagArr.push(item.code + "-" + item.type);
       });
-    } // rlog.debug(
-    //   "过滤ci元数据中的属性和指标，用于属性和指标显示设置",
-    //   globalSetting,
-    //   tipArr,
-    //   tagArr
-    // );
-
+    }
 
     var custom = [];
 

package/lib/core/components/TopoView/GraphViewPanel.js

@@ -24,12 +24,9 @@ function GraphViewPanel(props) {
 
   var topo = props.topo,
       hideBackgroundColor = props.hideBackgroundColor;
-  var displayConfig = topo.store.useModelState('displayConfig');
-  var themeName = displayConfig.canvasTheme || 'white';
 
   var _useCanvasTheme = (0, _useCanvasTheme2["default"])({
     topo: topo,
-    themeName: themeName,
     hideBackgroundColor: hideBackgroundColor
   }),
       canvasColor = _useCanvasTheme.canvasColor,

package/lib/core/components/TopoView/topoView.js

@@ -343,7 +343,8 @@ var Topology = function Topology(props) {
   }), /*#__PURE__*/_react["default"].createElement(_PortalContainer["default"], {
     ref: helpIconPortalRef
   }, /*#__PURE__*/_react["default"].createElement(_HelpIcon["default"], {
-    topo: topo
+    topo: topo,
+    topoType: props.topoType
   }))));
 };
 
@@ -361,6 +362,8 @@ Topology.propTypes = {
   onLineDelete: _propTypes["default"].func,
   onLoaded: _propTypes["default"].func,
   onLoad: _propTypes["default"].func,
+  // 拓扑类型，用于分别控制进入编辑模式默认显示帮助信息
+  topoType: _propTypes["default"].string,
 
   /**
    * @deprecated 工具栏
@@ -371,8 +374,8 @@ Topology.defaultProps = {
   defaultEnterEditMode: false,
   viewerProps: {},
   editorProps: {},
-  topoContext: {} // titleBar: false,
-
+  topoContext: {},
+  topoType: 'default'
 };
 Topology.displayName = 'Topology';
 var _default = Topology;

package/lib/core/hooks/useCanvasTheme.js

@@ -5,53 +5,27 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = useCanvasTheme;
 
-var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireWildcard(require("react"));
 
+var _useCanvasThemeConfig2 = _interopRequireDefault(require("./useCanvasThemeConfig"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 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 themeMap = [{
-  name: 'white',
-  label: '白色',
-  color: '#FFFFFF'
-}, {
-  name: 'lightblue',
-  label: '蓝色',
-  color: '#F9FBFF'
-}, {
-  name: 'yellow',
-  label: '黄色',
-  color: '#FFFDE6'
-}, {
-  name: 'green',
-  label: '绿色',
-  color: '#EAFFE8'
-}, {
-  name: 'dark',
-  label: '深色',
-  color: '#031425'
-}, {
-  name: 'poly',
-  label: 'Poly',
-  backgroundImage: '/img/topo/themes/poly.png'
-}].reduce(function (map, item) {
-  var _extends2;
-
-  return (0, _extends3["default"])({}, map, (_extends2 = {}, _extends2[item.name] = item, _extends2));
-}, {});
-
 function useCanvasTheme(props) {
   var topo = props.topo,
-      themeName = props.themeName,
       hideBackgroundColor = props.hideBackgroundColor; // 拓扑图是否加载
 
   var _topo$store$useModelS = topo.store.useModelState('topoMod'),
       graphLoaded = _topo$store$useModelS.graphLoaded;
 
-  var themeConfig = themeMap[themeName || 'white'];
+  var _useCanvasThemeConfig = (0, _useCanvasThemeConfig2["default"])({
+    topo: topo
+  }),
+      themeName = _useCanvasThemeConfig.themeName,
+      themeConfig = _useCanvasThemeConfig.themeConfig;
+
   var canvasColor = hideBackgroundColor ? null : themeConfig.color;
   var canvasbackgroundImage = hideBackgroundColor ? null : themeConfig.backgroundImage;
   (0, _react.useEffect)(function () {

package/lib/core/hooks/useCanvasThemeConfig.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var themeMap = [{
+  name: 'white',
+  label: '白色',
+  color: '#FFFFFF',
+  editor: {
+    // 快捷帮助
+    helpIcon: {}
+  }
+}, {
+  name: 'lightblue',
+  label: '蓝色',
+  color: '#F9FBFF'
+}, // {
+//   name: 'yellow',
+//   label: '黄色',
+//   color: '#FFFDE6',
+// },
+// {
+//   name: 'green',
+//   label: '绿色',
+//   color: '#EAFFE8',
+// },
+{
+  name: 'dark',
+  label: '深色',
+  color: '#031425'
+}, {
+  name: 'poly',
+  label: 'Poly',
+  backgroundImage: '/img/topo/themes/poly.png'
+}].reduce(function (map, item) {
+  var _extends2;
+
+  return (0, _extends3["default"])({}, map, (_extends2 = {}, _extends2[item.name] = item, _extends2));
+}, {});
+
+function useCanvasThemeConfig(props) {
+  var topo = props.topo;
+  var displayConfig = topo.store.useModelState('displayConfig');
+  var themeName = displayConfig.canvasTheme || 'white';
+  var themeConfig = themeMap[themeName || 'white'];
+  return {
+    themeName: themeName,
+    themeConfig: themeConfig
+  };
+}
+
+var _default = useCanvasThemeConfig;
+exports["default"] = _default;

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

package/lib/core/models/tagstips/ElementTagTipConfig.js

@@ -83,7 +83,7 @@ var ElementTagTipConfig = /*#__PURE__*/function () {
 
   _proto.getNodeFiedldMap = function getNodeFiedldMap() {
     var mtCodes = (0, _utils.getNodeMtCodes)(this.topoData);
-    return this.getFiedldMapByType(mtCodes, 'node');
+    return this.getFiedldMapByMtCodes(mtCodes, 'node');
   }
   /**
    * 获得节点字段配置项map
@@ -92,8 +92,13 @@ var ElementTagTipConfig = /*#__PURE__*/function () {
 
   _proto.getLinkFidldMap = function getLinkFidldMap() {
     var mtCodes = (0, _utils.getLinkMtCodes)(this.topoData);
-    return this.getFiedldMapByType(mtCodes, 'link');
-  };
+    return this.getFiedldMapByMtCodes(mtCodes, 'link');
+  }
+  /**
+   * 获取链路标注悬浮框属性配置数据
+   * @returns 
+   */
+  ;
 
   _proto.getLinkConfigItems = function getLinkConfigItems() {
     var mtCodes = (0, _utils.getLinkMtCodes)(this.topoData);
@@ -123,45 +128,46 @@ var ElementTagTipConfig = /*#__PURE__*/function () {
     // ]
   };
 
-  _proto.getFiedldMapByType = function getFiedldMapByType(mtCodes, type) {
+  _proto.getFiedldMapByType = function getFiedldMapByType(ciType, type) {
+    var attributes = this.topo.ciTyeCache.getCiType(ciType).attributes.filter(function (attr) {
+      return !!attr.userVisible;
+    });
+    var metrics = this.getMtMetricModels(mtCode);
+    var extItems = type === 'node' ? [{
+      lavel: '图片名称',
+      value: 'graph:name',
+      typeName: null
+    }, {
+      lavel: '资源类型',
+      value: 'ciType:name',
+      typeName: null
+    }] : [];
+    return [].concat(extItems, attributes.map(function (item) {
+      return {
+        type: 'attribute',
+        id: "attribute:" + item.code,
+        code: "attribute:" + item.code,
+        name: item.name,
+        typeName: '属性'
+      };
+    }), metrics.map(function (item) {
+      return {
+        type: 'metric',
+        id: "metric:" + item.code,
+        code: "metric:" + item.code,
+        name: item.name,
+        typeName: '指标'
+      };
+    }));
+  };
+
+  _proto.getFiedldMapByMtCodes = function getFiedldMapByMtCodes(mtCodes, type) {
     var _this = this;
 
     var map = {};
     mtCodes.forEach(function (mtCode) {
       var ciType = _this.mtCiTypeMap[mtCode];
-
-      var attributes = _this.topo.ciTyeCache.getCiType(ciType).attributes.filter(function (attr) {
-        return !!attr.userVisible;
-      });
-
-      var metrics = _this.getMtMetricModels(mtCode);
-
-      var extItems = type === 'node' ? [{
-        lavel: '图片名称',
-        value: 'graph:name',
-        typeName: null
-      }, {
-        lavel: '资源类型',
-        value: 'ciType:name',
-        typeName: null
-      }] : [];
-      map[mtCode] = [].concat(extItems, attributes.map(function (item) {
-        return {
-          type: 'attribute',
-          id: "attribute:" + item.code,
-          code: "attribute:" + item.code,
-          name: item.name,
-          typeName: '属性'
-        };
-      }), metrics.map(function (item) {
-        return {
-          type: 'metric',
-          id: "metric:" + item.code,
-          code: "metric:" + item.code,
-          name: item.name,
-          typeName: '指标'
-        };
-      }));
+      map[mtCode] = _this.getFiedldMapByType(ciType, type);
     });
     return map;
   };

package/package.json

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