@riil-frontend/component-topology 11.0.3 → 11.0.5

package/es/components/ModelAttrSelectDrawer/components/MultipleTypeAttributeSelectDrawer.js

@@ -0,0 +1,82 @@
+import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+import ModelAttrSelectDrawer from "./ModelAttrSelectDrawer";
+
+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__*/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 = useRef();
+
+  var _useState = useState(parseValue((value === null || value === void 0 ? void 0 : value.data) || {})),
+      selected = _useState[0],
+      setSelected = _useState[1];
+
+  useEffect(function () {
+    setSelected(parseValue((value === null || value === void 0 ? void 0 : value.data) || {}));
+  }, [value]); // 点击选择数据，显示抽屉
+
+  var show = function show() {
+    queryData();
+    batchAttrMetric.current.show({
+      showType: showType
+    });
+  };
+
+  useImperativeHandle(ref, function () {
+    return {
+      show: show
+    };
+  }); // 保存指标设置
+
+  var save = function save(showType, parm) {
+    rlog.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.createElement(ModelAttrSelectDrawer, {
+    ref: batchAttrMetric,
+    value: selected,
+    dataSource: data,
+    limit: limit,
+    showType: showType,
+    onOk: save
+  });
+});
+MultipleTypeAttributeSelectDrawer.displayName = 'MultipleTypeAttributeSelectDrawer';
+export default MultipleTypeAttributeSelectDrawer;

package/es/components/ModelAttrSelectDrawer/index.js

@@ -1,2 +1,2 @@
-import ModelAttrSelectDrawer from "./components/ModelAttrSelectDrawer";
-export default ModelAttrSelectDrawer;
+import MultipleTypeAttributeSelectDrawer from "./components/MultipleTypeAttributeSelectDrawer";
+export default MultipleTypeAttributeSelectDrawer;

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

@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { DEFAULT_NODE_TAG_COMMON_CONFIG } from "../../../constants/ResourceInfoDisplay";
 import BasicConfig from "./ResourceDisplay/BasicConfig";
+import NodeAttrSettingDrawer from "./components/NodeAttrSettingDrawer";
 var defaultCommonOptions = [{
   value: 'graph:name',
   label: '图片名称'
@@ -19,15 +20,17 @@ var defaultCommonOptions = [{
 var NodeTag = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var commonOptions = props.commonOptions;
   return /*#__PURE__*/React.createElement(BasicConfig, _extends({
-    ref: ref
-  }, props, {
+    ref: ref,
     limit: 3,
     elementType: "node",
     showType: "tag",
     commonOptions: commonOptions || defaultCommonOptions,
     defaultCommonConfig: DEFAULT_NODE_TAG_COMMON_CONFIG,
+    customSettingDrawer: function customSettingDrawer(params) {
+      return /*#__PURE__*/React.createElement(NodeAttrSettingDrawer, params);
+    },
     type: "node"
-  }));
+  }, props));
 });
 NodeTag.displayName = 'NodeTag';
 NodeTag.propTypes = {

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

@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { DEFAULT_TIP_COMMON_CONFIG } from "../../../constants/ResourceInfoDisplay";
 import BasicConfig from "./ResourceDisplay/BasicConfig";
+import NodeAttrSettingDrawer from "./components/NodeAttrSettingDrawer";
 var defaultCommonOptions = [{
   value: 'attribute:display_name',
   label: '显示名称'
@@ -19,14 +20,16 @@ var defaultCommonOptions = [{
 var NodeTip = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var commonOptions = props.commonOptions;
   return /*#__PURE__*/React.createElement(BasicConfig, _extends({
-    ref: ref
-  }, props, {
+    ref: ref,
     limit: 4,
     elementType: "node",
     showType: "tip",
     commonOptions: commonOptions || defaultCommonOptions,
-    defaultCommonConfig: DEFAULT_TIP_COMMON_CONFIG
-  }));
+    defaultCommonConfig: DEFAULT_TIP_COMMON_CONFIG,
+    customSettingDrawer: function customSettingDrawer(params) {
+      return /*#__PURE__*/React.createElement(NodeAttrSettingDrawer, params);
+    }
+  }, props));
 });
 NodeTip.propTypes = {
   commonOptions: PropTypes.array

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

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["topo", "showType", "value"];
+import React, { forwardRef, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import rlog from '@riil-frontend/component-topology-utils/lib/rlog';
+import ModelAttrSelectDrawer from "../../../../components/ModelAttrSelectDrawer";
+import { getNodeModels } from "../../ResourceViewAttributeSetting/nodeCiTypeAttrUtil";
+/**
+ * 节点标注、悬浮框设置
+ */
+
+var NodeAttrSettingDrawer = /*#__PURE__*/forwardRef(function (props, ref) {
+  var topo = props.topo,
+      showType = props.showType,
+      value = props.value,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _useState = useState([]),
+      data = _useState[0],
+      setData = _useState[1];
+
+  var queryData = function queryData() {
+    rlog.info('属性配置：加载数据');
+    var items = getNodeModels(topo);
+    setData(items);
+  };
+
+  return /*#__PURE__*/React.createElement(ModelAttrSelectDrawer, _extends({
+    ref: ref
+  }, otherProps, {
+    value: value,
+    data: data,
+    showType: showType,
+    queryData: queryData
+  }));
+});
+NodeAttrSettingDrawer.displayName = 'NodeAttrSettingDrawer';
+NodeAttrSettingDrawer.propTypes = {};
+export default NodeAttrSettingDrawer;

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

@@ -1,4 +1,88 @@
-import { getCiTypesFromCiElements } from "../../../utils/topoData"; // 资源类型含有属性和指标集合
+import { getCiTypesFromCiElements } from "../../../utils/topoData";
+/**
+ * 获取节点标注、悬浮框配置
+ * @param {*} topo 
+ * @returns 
+ */
+
+export function getNodeModels(topo) {
+  var data = topo.store.getModelState('topoMod').data;
+  var ciTypeMap = topo.ciTyeCache.ciTypes;
+  return getNodeModSet();
+
+  function getNodeModSet() {
+    var ciTypes = 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);
+  }
+
+  ;
+} // 资源类型含有属性和指标集合
 
 export function getNodeCiModSet(params) {
   var topo = params.topo;
@@ -29,8 +113,7 @@ export function getNodeCiModSet(params) {
         icon: ciTypeObj.icon,
         list: ciModfilter(ciTypeObj, globalConfig, 'node', ciTypeObj.code)
       };
-    }); // console.log("modSet--------------------", modSet);
-
+    });
     return modSet;
   }
   /**
@@ -60,13 +143,7 @@ export 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/es/core/components/TopoView/GraphViewPanel.js

@@ -8,12 +8,9 @@ export default function GraphViewPanel(props) {
 
   var topo = props.topo,
       hideBackgroundColor = props.hideBackgroundColor;
-  var displayConfig = topo.store.useModelState('displayConfig');
-  var themeName = displayConfig.canvasTheme || 'white';
 
   var _useCanvasTheme = useCanvasTheme({
     topo: topo,
-    themeName: themeName,
     hideBackgroundColor: hideBackgroundColor
   }),
       canvasColor = _useCanvasTheme.canvasColor,

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

@@ -299,7 +299,8 @@ var Topology = function Topology(props) {
   }), /*#__PURE__*/React.createElement(PortalContainer, {
     ref: helpIconPortalRef
   }, /*#__PURE__*/React.createElement(HelpIcon, {
-    topo: topo
+    topo: topo,
+    topoType: props.topoType
   }))));
 };
 
@@ -317,6 +318,8 @@ Topology.propTypes = {
   onLineDelete: PropTypes.func,
   onLoaded: PropTypes.func,
   onLoad: PropTypes.func,
+  // 拓扑类型，用于分别控制进入编辑模式默认显示帮助信息
+  topoType: PropTypes.string,
 
   /**
    * @deprecated 工具栏
@@ -327,8 +330,8 @@ Topology.defaultProps = {
   defaultEnterEditMode: false,
   viewerProps: {},
   editorProps: {},
-  topoContext: {} // titleBar: false,
-
+  topoContext: {},
+  topoType: 'default'
 };
 Topology.displayName = 'Topology';
 export default Topology;

package/es/core/hooks/useCanvasTheme.js

@@ -1,43 +1,18 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect } from 'react';
-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 _extends({}, map, (_extends2 = {}, _extends2[item.name] = item, _extends2));
-}, {});
+import useCanvasThemeConfig from "./useCanvasThemeConfig";
 export default 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 = useCanvasThemeConfig({
+    topo: topo
+  }),
+      themeName = _useCanvasThemeConfig.themeName,
+      themeConfig = _useCanvasThemeConfig.themeConfig;
+
   var canvasColor = hideBackgroundColor ? null : themeConfig.color;
   var canvasbackgroundImage = hideBackgroundColor ? null : themeConfig.backgroundImage;
   useEffect(function () {

package/es/core/hooks/useCanvasThemeConfig.js

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from '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 _extends({}, 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
+  };
+}
+
+export default useCanvasThemeConfig;

package/es/core/hooks/useTopoEdit.js

@@ -234,7 +234,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: "全部删除"
@@ -289,27 +290,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 = 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/es/core/models/TopoApp.js

@@ -24,7 +24,7 @@ import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionModel from "./SelectionModel";
 import CiCache from "./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);
 /**
  * 拓扑显示和编辑

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

@@ -70,7 +70,7 @@ var ElementTagTipConfig = /*#__PURE__*/function () {
 
   _proto.getNodeFiedldMap = function getNodeFiedldMap() {
     var mtCodes = getNodeMtCodes(this.topoData);
-    return this.getFiedldMapByType(mtCodes, 'node');
+    return this.getFiedldMapByMtCodes(mtCodes, 'node');
   }
   /**
    * 获得节点字段配置项map
@@ -79,8 +79,13 @@ var ElementTagTipConfig = /*#__PURE__*/function () {
 
   _proto.getLinkFidldMap = function getLinkFidldMap() {
     var mtCodes = getLinkMtCodes(this.topoData);
-    return this.getFiedldMapByType(mtCodes, 'link');
-  };
+    return this.getFiedldMapByMtCodes(mtCodes, 'link');
+  }
+  /**
+   * 获取链路标注悬浮框属性配置数据
+   * @returns 
+   */
+  ;
 
   _proto.getLinkConfigItems = function getLinkConfigItems() {
     var mtCodes = getLinkMtCodes(this.topoData);
@@ -110,45 +115,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;
   };