@riil-frontend/component-topology 11.0.3 → 11.0.5

package/lib/components/ModelAttrSelectDrawer/components/MultipleTypeAttributeSelectDrawer.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
+var _ModelAttrSelectDrawer = _interopRequireDefault(require("./ModelAttrSelectDrawer"));
+
+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; }
+
+function parseValue(value) {
+  var selected = {};
+  Object.keys(value).forEach(function (ciType) {
+    selected[ciType] = value[ciType].map(function (_ref) {
+      var type = _ref.type,
+          code = _ref.code;
+      return type + ":" + code;
+    });
+  });
+  return selected;
+}
+/**
+ * 资源显示属性、指标配置
+ */
+
+
+var MultipleTypeAttributeSelectDrawer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var value = props.value,
+      data = props.data,
+      showType = props.showType,
+      limit = props.limit,
+      onChange = props.onChange,
+      queryData = props.queryData;
+  var batchAttrMetric = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)(parseValue((value === null || value === void 0 ? void 0 : value.data) || {})),
+      selected = _useState[0],
+      setSelected = _useState[1];
+
+  (0, _react.useEffect)(function () {
+    setSelected(parseValue((value === null || value === void 0 ? void 0 : value.data) || {}));
+  }, [value]); // 点击选择数据，显示抽屉
+
+  var show = function show() {
+    queryData();
+    batchAttrMetric.current.show({
+      showType: showType
+    });
+  };
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      show: show
+    };
+  }); // 保存指标设置
+
+  var save = function save(showType, parm) {
+    _rlog["default"].debug('saveMarkSetting', showType, parm);
+
+    var newSelected = {};
+    Object.keys(parm).forEach(function (ciType) {
+      newSelected[ciType] = parm[ciType].map(function (id) {
+        var _id$split = id.split(':'),
+            type = _id$split[0],
+            code = _id$split[1];
+
+        return {
+          code: code,
+          type: type
+        };
+      });
+    });
+    onChange({
+      isCustom: true,
+      data: newSelected
+    });
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_ModelAttrSelectDrawer["default"], {
+    ref: batchAttrMetric,
+    value: selected,
+    dataSource: data,
+    limit: limit,
+    showType: showType,
+    onOk: save
+  });
+});
+MultipleTypeAttributeSelectDrawer.displayName = 'MultipleTypeAttributeSelectDrawer';
+var _default = MultipleTypeAttributeSelectDrawer;
+exports["default"] = _default;

package/lib/components/ModelAttrSelectDrawer/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _ModelAttrSelectDrawer = _interopRequireDefault(require("./components/ModelAttrSelectDrawer"));
+var _MultipleTypeAttributeSelectDrawer = _interopRequireDefault(require("./components/MultipleTypeAttributeSelectDrawer"));
 
-var _default = _ModelAttrSelectDrawer["default"];
+var _default = _MultipleTypeAttributeSelectDrawer["default"];
 exports["default"] = _default;

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