1.iconfont新增remove和运行图标 2.节点图标点击出现节点描述气泡

Author: 昔梦

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

@@ -7,7 +7,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
  */
 
 const Icon = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/a/font_4069358_n02zzaov1o.js',
+  scriptUrl: '//at.alicdn.com/t/a/font_4069358_4p70zmc30ro.js',
 });
 
 export default Icon;

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

@@ -1,7 +1,8 @@
-import { Typography } from 'antd';
+import { Popover, Tooltip, Typography } from 'antd';
 import classNames from 'classnames';
 import React, { memo, useMemo } from 'react';
 import createIconFont from '../../utils/createIconFont';
+import { MenuTooltip } from '../NodesMenu';
 import './index.less';
 
 const { Text, Paragraph } = Typography;
@@ -28,9 +29,26 @@ export default memo((props: any) => {
       onClick={onClick}
     >
       <div className="node-title">
-        <span className="icon-box" style={{ background: icon?.bgColor }}>
-          <IconBox {...icon} />
-        </span>
+        <Popover
+          title={<MenuTooltip {...props} />}
+          placement="bottomLeft"
+          trigger="click"
+        >
+          <Tooltip
+            title="点击图标查看节点信息"
+            arrow={false}
+            placement="topLeft"
+            color="#fff"
+            overlayInnerStyle={{
+              color: '#354052',
+              fontSize: '12px',
+            }}
+          >
+            <span className="icon-box" style={{ background: icon?.bgColor }}>
+              <IconBox {...icon} />
+            </span>
+          </Tooltip>
+        </Popover>
         <Text
           style={{ width: 188, marginLeft: '8px' }}
           ellipsis={{
@@ -48,6 +66,7 @@ export default memo((props: any) => {
           {title}
         </Text>
       </div>
+
       <div className="node-body">{children}</div>
       {NodeWidget && <div className="node-widget">{NodeWidget}</div>}
       {!hideDesc && !!desc && (

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

@@ -36,7 +36,7 @@ const searchNodeList = (query: string, list: any[]) => {
 };
 
 // 悬浮菜单项详细描述
-const MenuTooltip = ({ icon, title, description, iconFontUrl }: any) => {
+export const MenuTooltip = ({ icon, title, description, iconFontUrl }: any) => {
   const IconBox = useMemo(() => createIconFont(iconFontUrl), [iconFontUrl]);
 
   return (
@@ -129,8 +129,8 @@ const NodesMenu = (props: TNodeMenu, ref: Ref<HTMLDivElement>) => {
             {filterHiddenMenu(item.items).map((data: any, index: number) => (
               <MenuItem
                 iconFontUrl={iconFontUrl}
-                {...data} 
-                onClick={handleItemClick} 
+                {...data}
+                onClick={handleItemClick}
                 key={index}
               />
             ))}

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

@@ -104,7 +104,7 @@ const Panel: FC<IPanelProps> = (props: IPanelProps) => {
               <Space size={[4, 4]}>
                 {!isDisabled && (
                   <>
-                    <IconView type='icon-bofang' style={{ fontSize: 18 }} />
+                    <IconView type='icon-yunhang' style={{ fontSize: 16 }} />
                     <Divider type='vertical' />
                   </>
                 )}

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

@@ -7,6 +7,7 @@ export default memo((props: any) => {
   const { settingMap, widgets, iconFontUrl } = useContext(ConfigContext);
   const nodeSetting = settingMap[type] || {};
   const NodeWidget = widgets[nodeSetting?.nodeWidget] || undefined;
+  const nodeDescription = nodeSetting?.description || '';
 
   return (
     <NodeContainer
@@ -22,6 +23,7 @@ export default memo((props: any) => {
       desc={data?.desc}
       NodeWidget={NodeWidget ? <NodeWidget data={data} /> : undefined}
       iconFontUrl={iconFontUrl}
+      description={nodeDescription} // 不允许用户更改的节点描述
     />
   );
 });

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

@@ -7,6 +7,7 @@ export default memo((props: any) => {
   const { settingMap,widgets, iconFontUrl } = useContext(ConfigContext);
   const nodeSetting = settingMap[type] || {};
   const NodeWidget = widgets[nodeSetting?.nodeWidget] || undefined;
+  const nodeDescription = nodeSetting?.description || '';
 
   return (
     <NodeContainer
@@ -22,6 +23,7 @@ export default memo((props: any) => {
       desc={data?.desc}
       NodeWidget={NodeWidget ? <NodeWidget data={data} /> : undefined}
       iconFontUrl={iconFontUrl}
+      description={nodeDescription} // 不允许用户更改的节点描述
     />
   );
 });

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

@@ -7,6 +7,8 @@ export default memo((props: any) => {
   const { settingMap, widgets, iconFontUrl } = useContext(ConfigContext);
   const nodeSetting = settingMap[type] || {};
   const NodeWidget = widgets[nodeSetting?.nodeWidget] || undefined;
+  const nodeDescription = nodeSetting?.description || '';
+
 
   return (
     <NodeContainer
@@ -22,6 +24,7 @@ export default memo((props: any) => {
       desc={data?.desc}
       NodeWidget={NodeWidget ? <NodeWidget data={data} /> : undefined}
       iconFontUrl={iconFontUrl}
+      description={nodeDescription} // 不允许用户更改的节点描述
     />
   );
 });

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

@@ -17,6 +17,7 @@ export default memo((props: any) => {
   const { settingMap, widgets, iconFontUrl } = useContext(ConfigContext);
   const nodeSetting = settingMap[type] || {};
   const NodeWidget = widgets[nodeSetting?.nodeWidget] || undefined;
+  const nodeDescription = nodeSetting?.description || '';
 
   return (
     <NodeContainer
@@ -42,6 +43,7 @@ export default memo((props: any) => {
           CustomNodeWidget={NodeWidget}
         />
       }
+      description={nodeDescription} // 不允许用户更改的节点描述
     />
   );
 });

packages/x-flow/src/utils/createIconFont.ts

@@ -3,6 +3,6 @@ import { createFromIconfontCN } from '@ant-design/icons';
 export default (url?: string) => {
   return createFromIconfontCN({
     // scriptUrl: url || '//at.alicdn.com/t/a/font_4201076_frx3c9x07if.js',
-    scriptUrl: url || '//at.alicdn.com/t/a/font_4069358_n02zzaov1o.js',
+    scriptUrl: url || '//at.alicdn.com/t/a/font_4069358_4p70zmc30ro.js',
   });
 };