@riil-frontend/component-topology 11.0.10 → 11.0.12

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/components/VerticalIconTab/VerticalIconTab.js

@@ -3,8 +3,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _Balloon from "@alifd/next/es/balloon";
 import React, { useState } from 'react';
 import classNames from 'classnames';
-import styles from "./VerticalIconTab.module.scss";
 import variables from '@alifd/theme-19926/variables.js';
+import styles from "./VerticalIconTab.module.scss";
 /**
  * 自定义标题
  * @param {*} param0 

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,97 @@
-import { getCiTypesFromCiElements } from "../../../utils/topoData"; // 资源类型含有属性和指标集合
+import { getCiTypesFromCiElements } from "../../../utils/topoData";
+/**
+ * 获取节点标注、悬浮框配置
+ * @param {*} topo 
+ * @returns 
+ */
+
+export function getNodeModels(topo) {
+  return getNodeModSet();
+
+  function getNodeModSet() {
+    var data = topo.store.getModelState('topoMod').data;
+    var ciTypes = getCiTypesFromCiElements(data.nodes);
+    return getMods(ciTypes);
+  }
+  /**
+   *
+   * @param {array} ciTypeCodes
+   * @returns
+   */
+
+
+  function getMods(ciTypeCodes) {
+    var ciTypeMap = topo.ciTyeCache.ciTypes;
+    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: "/img/model/" + ciTypeObj.icon + ".svg",
+        list: buildModelFields(ciTypeObj, 'node')
+      };
+    });
+  }
+
+  function buildModels(ciTypeObj) {
+    return {
+      id: ciTypeObj.code,
+      label: ciTypeObj.displayName,
+      icon: "/img/model/" + ciTypeObj.icon + ".svg",
+      list: buildModelFields(ciTypeObj, 'node')
+    };
+  }
+  /**
+   * 过滤ci元数据中的属性和指标，用于属性和指标显示设置
+   * @param {} ciTypeObj
+   * @returns
+   */
+
+
+  function buildModelFields(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 +122,7 @@ export function getNodeCiModSet(params) {
         icon: ciTypeObj.icon,
         list: ciModfilter(ciTypeObj, globalConfig, 'node', ciTypeObj.code)
       };
-    }); // console.log("modSet--------------------", modSet);
-
+    });
     return modSet;
   }
   /**
@@ -60,13 +152,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/topoView.js

@@ -27,6 +27,7 @@ import HistoryManager from "../../models/HistoryManager";
 import editorStyles from "./editor.module.scss";
 import basicIcons from "../../common/icons/basicIcons";
 import HelpIcon from "../../editor/components/BottomFloatTool/HelpIcon";
+import { updateNodesNameVisible } from "../../models/utils/nodeNameVisibleUtil";
 
 var Topology = function Topology(props) {
   var _classnames;
@@ -120,6 +121,7 @@ var Topology = function Topology(props) {
       topoData: topoData,
       htElements: topo.getDataModel().getDatas().toArray()
     });
+    updateNodesNameVisible(topo);
     upgradeV103GraphClusterNode(topo, topoData);
     fixLink(topo);
     handleClusterNoPermission(topo);
@@ -145,6 +147,7 @@ var Topology = function Topology(props) {
       topoData: topoData,
       htElements: topo.getDataModel().getDatas().toArray()
     });
+    updateNodesNameVisible(topo);
     upgradeV103GraphClusterNode(topo, topoData);
     fixLink(topo);
     handleClusterNoPermission(topo);

package/es/core/editor/components/BottomFloatTool/HelpIcon.js

@@ -1,8 +1,97 @@
-import React from 'react';
+import _Balloon from "@alifd/next/es/balloon";
+import _Grid from "@alifd/next/es/grid";
+import React, { useState, useEffect } from 'react';
+import styles from "./HelpIcon.module.scss";
+import useCanvasThemeConfig from "../../../hooks/useCanvasThemeConfig";
 
 function HelpIcon(props) {
-  var topo = props.topo;
-  return /*#__PURE__*/React.createElement("div", null, "HelpIcon");
+  var topo = props.topo,
+      topoType = props.topoType;
+  var localStorageVal = localStorage.getItem(topoType + 'helpBoxHidden');
+
+  var _useState = useState(),
+      helpBoxIsShow = _useState[0],
+      setHelpBoxIsShow = _useState[1]; //TODO:在主得style里面需要增加color与background属性，根据外部传值进行改变，默认值为$color-text1-4,#fff
+
+
+  var Row = _Grid.Row,
+      Col = _Grid.Col;
+
+  var _useCanvasThemeConfig = useCanvasThemeConfig({
+    topo: topo
+  }),
+      themeConfig = _useCanvasThemeConfig.themeConfig;
+
+  var helpIconNames = themeConfig.editor.helpIcon;
+
+  var onChange = function onChange(visible, type) {
+    if (type != 'docClick') {
+      setHelpBoxIsShow(visible);
+      localStorage.setItem(topoType + 'helpBoxHidden', !visible);
+    }
+  };
+
+  var topoModState = topo.store.useModelState('topoMod');
+  var graphLoaded = topoModState.graphLoaded;
+  useEffect(function () {
+    if (graphLoaded) {
+      setHelpBoxIsShow(localStorageVal == 'true' ? false : true);
+    }
+  }, [topo, graphLoaded]);
+  return /*#__PURE__*/React.createElement(_Balloon, {
+    triggerType: "click",
+    align: "t",
+    trigger: /*#__PURE__*/React.createElement("div", {
+      className: styles.topoHelpIconBtn,
+      onClick: function onClick() {
+        open;
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      src: "/img/topo/editor/bottomFloatTool/default.svg",
+      alt: ""
+    })),
+    closable: true,
+    visible: helpBoxIsShow,
+    onVisibleChange: onChange,
+    shouldUpdatePosition: true,
+    id: helpIconNames
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.topoHelpIcon
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles[helpIconNames + 'Box']
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.title
+  }, "\u5FEB\u6377\u952E"), /*#__PURE__*/React.createElement("div", {
+    className: styles.conten
+  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+    span: "16"
+  }, "\u590D\u5236"), /*#__PURE__*/React.createElement(Col, {
+    span: "8"
+  }, "ctrl/\u2318+c")), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+    span: "16"
+  }, "\u7C98\u8D34"), /*#__PURE__*/React.createElement(Col, {
+    span: "8"
+  }, "ctrl/\u2318+v")), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+    span: "16"
+  }, "\u64A4\u9500"), /*#__PURE__*/React.createElement(Col, {
+    span: "8"
+  }, "ctrl/\u2318+z")), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+    span: "16"
+  }, "\u6062\u590D"), /*#__PURE__*/React.createElement(Col, {
+    span: "8"
+  }, "ctrl/\u2318+y")), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+    span: "16"
+  }, "\u6587\u5B57\u52A0\u7C97"), /*#__PURE__*/React.createElement(Col, {
+    span: "8"
+  }, "ctrl/\u2318+b")), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+    span: "16"
+  }, "\u9009\u62E9-\u62D6\u52A8"), /*#__PURE__*/React.createElement(Col, {
+    span: "8"
+  }, "\u7A7A\u683C")), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+    span: "16"
+  }, "\u9000\u51FA\u94FE\u8DEF/\u7EBF\u7ED8\u5236"), /*#__PURE__*/React.createElement(Col, {
+    span: "8"
+  }, "\u9F20\u6807\u53F3\u952E"))))));
 }
 
 export default HelpIcon;

package/es/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/es/core/editor/hooks/useNewElementTheme.js

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import THEMES from "../config/themes";
 import ThemeUtil from "../utils/themeUtil";
+import { setNewNodeNameVisible } from "../../models/utils/nodeNameVisibleUtil";
 
 function useNewElementTheme(props) {
   var topo = props.topo;
@@ -20,6 +21,7 @@ function useNewElementTheme(props) {
           data = e.data;
 
       if (kind === 'add') {
+        // 设置主题样式
         var displayConfig = topo.store.getModelState('displayConfig');
         var theme = displayConfig.canvasTheme || 'white';
         var themeConfig = THEMES.find(function (item) {
@@ -31,7 +33,9 @@ function useNewElementTheme(props) {
         }),
             setElementTheme = _ThemeUtil.setElementTheme;
 
-        setElementTheme(data, themeConfig);
+        setElementTheme(data, themeConfig); // 临时放这里，新加入节点按配置显示隐藏名称
+
+        setNewNodeNameVisible(topo, data);
       }
     }
 

package/es/core/hooks/useCanvasThemeConfig.js

@@ -6,12 +6,16 @@ var themeMap = [{
   color: '#FFFFFF',
   editor: {
     // 快捷帮助
-    helpIcon: {}
+    helpIcon: 'white'
   }
 }, {
   name: 'lightblue',
   label: '蓝色',
-  color: '#F9FBFF'
+  color: '#F9FBFF',
+  editor: {
+    // 快捷帮助
+    helpIcon: 'white'
+  }
 }, // {
 //   name: 'yellow',
 //   label: '黄色',
@@ -25,11 +29,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/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();
     }
   };