feat:1.新增hideTitleTips配置属性2.hideEdgeAddBtn转移配置位置

Author: 昔梦

docs/xflow/api.md

@@ -15,7 +15,7 @@ title: API
 | settings          | 节点配置，定义页面中可拖动的节点配置       | ( [TNodeGroup](#tnodegroup) \| [TNodeItem](#tnodeitem) )[ ] |        |
 | nodeSelector      | 节点选择器配置，可控制节点的可搜索性       | `TNodeSelector`                                             |
 | iconFontUrl       | iconfont url，用于配置图标渲染             | `String`                                                    |        |
-| globalConfig | 全局的面板和节点配置 |     {nodePanel:[TNodePanel](#tnodepanel),nodeView:[TNodeView](#tnodeview)}                                            |    |
+| globalConfig | 全局的面板和节点配置 |     {nodePanel:[TNodePanel](#tnodepanel),nodeView:[TNodeView](#tnodeview),edge:[TEdge](#tedge)}                                            |    |
 
 ## TNodePanel
 
@@ -34,8 +34,15 @@ title: API
 
 | 属性  | 描述         | 类型          | 默认值 |
 | ----- | ------------ | ------------- | ------ |
-| hideEdgeAddBtn | 是否隐藏两个节点之间，连线上的增加节点按钮    | `boolean`      |    false    |
+| hideTitleTips | 是否隐藏节点标题的tooltip描述信息提示    | `boolean`      |    false    |
+
+## TEdge
+
+边的全局配置
 
+| 属性  | 描述         | 类型          | 默认值 |
+| ----- | ------------ | ------------- | ------ |
+| hideEdgeAddBtn | 是否隐藏两个节点之间，连线上的增加节点按钮    | `boolean`      |    false    |
 
 ## TNodeGroup
 

docs/xflow/demo/nodeSetting/index.tsx

@@ -27,9 +27,12 @@ export const Flow = () => {
             width: '400px',
             hideDesc:true
           },
-          nodeView: {
+          edge: {
             hideEdgeAddBtn:true,
-          }
+          },
+          nodeView: {
+            hideTitleTips: true
+          },
         }}
       />
     </>

packages/x-flow/src/components/CustomEdge/index.tsx

@@ -28,7 +28,7 @@ export default memo((edge: any) => {
   });
 
   const { globalConfig } = useContext(ConfigContext);
-  const hideEdgeAddBtn = globalConfig?.nodeView?.hideEdgeAddBtn ?? false;
+  const hideEdgeAddBtn = globalConfig?.edge?.hideEdgeAddBtn ?? false;
 
   const {
     nodes,

packages/x-flow/src/components/NodeContainer/index.tsx

@@ -19,8 +19,10 @@ export default memo((props: any) => {
     NodeWidget,
     iconFontUrl,
     iconSvg,
+    hideTitleTips,
   } = props;
   const IconBox = useMemo(() => createIconFont(iconFontUrl), [iconFontUrl]);
+
   return (
     <div
       className={classNames('custom-node-container', {
@@ -29,30 +31,24 @@ export default memo((props: any) => {
       onClick={onClick}
     >
       <div className="node-title">
-        <Popover
-          content={<MenuTooltip {...props} />}
-          placement="bottomLeft"
-          trigger="hover"
-          getPopupContainer={() =>
-            document.getElementById('xflow-container') as HTMLElement
-          }
-        >
-          {/* <Tooltip
-            title='点击图标查看节点信息'
-            arrow={false}
-            placement='topLeft'
-            color='#fff'
-            overlayInnerStyle={{
-              color: '#354052',
-              fontSize: '12px',
-            }}
-            getPopupContainer={() => document.getElementById('xflow-container') as HTMLElement}
-          > */}
+        {!hideTitleTips ? (
+          <Popover
+            content={<MenuTooltip {...props} />}
+            placement="bottomLeft"
+            trigger="hover"
+            getPopupContainer={() =>
+              document.getElementById('xflow-container') as HTMLElement
+            }
+          >
+            <span className="icon-box" style={{ background: icon?.bgColor }}>
+              {iconSvg ? iconSvg : <IconBox {...icon} />}
+            </span>
+          </Popover>
+        ) : (
           <span className="icon-box" style={{ background: icon?.bgColor }}>
             {iconSvg ? iconSvg : <IconBox {...icon} />}
           </span>
-          {/* </Tooltip> */}
-        </Popover>
+        )}
         <Text
           style={{ width: 188, marginLeft: '8px' }}
           ellipsis={{

packages/x-flow/src/nodes/node-common/index.tsx

@@ -10,6 +10,7 @@ export default memo((props: any) => {
   const nodeDescription = nodeSetting?.description || '';
 
   const hideDesc = nodeSetting?.nodePanel?.hideDesc ?? globalConfig?.nodePanel?.hideDesc ?? false;
+  const hideTitleTips = globalConfig?.nodeView?.hideTitleTips ?? false;
 
   return (
     <NodeContainer
@@ -27,6 +28,7 @@ export default memo((props: any) => {
       iconFontUrl={iconFontUrl}
       description={nodeDescription} // 不允许用户更改的节点描述
       iconSvg={nodeSetting?.iconSvg}
+      hideTitleTips={hideTitleTips}
     />
   );
 });

packages/x-flow/src/nodes/node-end/index.tsx

@@ -9,6 +9,7 @@ export default memo((props: any) => {
   const NodeWidget = widgets[nodeSetting?.nodeWidget] || undefined;
   const nodeDescription = nodeSetting?.description || '';
   const hideDesc = nodeSetting?.nodePanel?.hideDesc ?? globalConfig?.nodePanel?.hideDesc ?? false;
+  const hideTitleTips = globalConfig?.nodeView?.hideTitleTips ?? false;
 
 
   return (
@@ -27,6 +28,7 @@ export default memo((props: any) => {
       iconFontUrl={iconFontUrl}
       description={nodeDescription} // 不允许用户更改的节点描述
       iconSvg={nodeSetting?.iconSvg}
+      hideTitleTips={hideTitleTips}
     />
   );
 });

packages/x-flow/src/nodes/node-parallel/index.tsx

@@ -19,6 +19,7 @@ export default memo((props: any) => {
   const NodeWidget = widgets[nodeSetting?.nodeWidget] || undefined;
   const nodeDescription = nodeSetting?.description || '';
   const hideDesc = nodeSetting?.nodePanel?.hideDesc ?? globalConfig?.nodePanel?.hideDesc ?? false;
+  const hideTitleTips = globalConfig?.nodeView?.hideTitleTips ?? false;
 
   return (
     <NodeContainer
@@ -46,6 +47,7 @@ export default memo((props: any) => {
       }
       description={nodeDescription} // 不允许用户更改的节点描述
       iconSvg={nodeSetting?.iconSvg}
+      hideTitleTips={hideTitleTips}
     />
   );
 });

packages/x-flow/src/nodes/node-start/index.tsx

@@ -9,6 +9,7 @@ export default memo((props: any) => {
   const NodeWidget = widgets[nodeSetting?.nodeWidget] || undefined;
   const nodeDescription = nodeSetting?.description || '';
   const hideDesc = nodeSetting?.nodePanel?.hideDesc ?? globalConfig?.nodePanel?.hideDesc ?? false;
+  const hideTitleTips = globalConfig?.nodeView?.hideTitleTips ?? false;
 
   return (
     <NodeContainer
@@ -26,6 +27,7 @@ export default memo((props: any) => {
       iconFontUrl={iconFontUrl}
       description={nodeDescription} // 不允许用户更改的节点描述
       iconSvg={nodeSetting?.iconSvg}
+      hideTitleTips={hideTitleTips}
     />
   );
 });

packages/x-flow/src/nodes/node-switch/index.tsx

@@ -19,6 +19,7 @@ export default memo((props: any) => {
   const NodeWidget = widgets[nodeSetting?.nodeWidget] || undefined;
   const nodeDescription = nodeSetting?.description || '';
   const hideDesc = nodeSetting?.nodePanel?.hideDesc ?? globalConfig?.nodePanel?.hideDesc ?? false;
+  const hideTitleTips = globalConfig?.nodeView?.hideTitleTips ?? false;
 
   return (
     <NodeContainer
@@ -46,6 +47,7 @@ export default memo((props: any) => {
       }
       description={nodeDescription} // 不允许用户更改的节点描述
       iconSvg={nodeSetting?.iconSvg}
+      hideTitleTips={hideTitleTips}
     />
   );
 });

packages/x-flow/src/types.ts

@@ -58,6 +58,9 @@ export interface FlowProps {
       hideDesc?: boolean; // 配置面板描述
     },
     nodeView?: {
+      hideTitleTips: boolean;
+    },
+    edge: {
       hideEdgeAddBtn: boolean;// 是否隐藏两个节点之间，连线上的增加节点按钮
     }
   }