Merge branch 'xflow' of https://github.com/alibaba/x-render into xflow

Author: youngjuning

docs/xflow/api.md

@@ -37,6 +37,7 @@ title: API
 | title                | 节点名称                                                                                                                                         | `string`                                                                                                                                                        |        |
 | type                 | 节点类型                                                                                                                                         | `string`                                                                                                                                                        |        |
 | hidden               | 是否在配置面板中显示节点                                                                                                                         | `boolean`                                                                                                                                                       | false  |
+| hideDesc               | 是否在配置面板中显示节点的描述信息                                                                                                                | `boolean`                                                                                                                                                       | false  |
 | targetHandleHidden   | 是否隐藏左侧输入连接头                                                                                                                           | `boolean`                                                                                                                                                       | false  |
 | sourceHandleHidden   | 是否隐藏右侧输出连接头                                                                                                                           | `boolean`                                                                                                                                                       | false  |
 | icon                 | 节点的图标配置                                                                                                                                   | `{type:string;bgColor:string}`                                                                                                                                  |        |

docs/xflow/schema/custom-settings.ts

@@ -59,6 +59,7 @@ export default [
       type: 'icon-model',
       bgColor: '#6172F3',
     },
+    hideDesc:true // 隐藏配置面板描述信息
   },
   {
     title: 'Prompt',

packages/x-flow/src/XFlow.tsx

@@ -257,7 +257,7 @@ const XFlow: FC<FlowProps> = memo(() => {
         }}
       >
         <CandidateNode />
-        <Operator addNode={handleAddNode} />
+        <Operator addNode={handleAddNode} xflowRef={workflowContainerRef} />
         <Background
           gap={[16, 16]}
           size={0.6}

packages/x-flow/src/components/CustomNode/sourceHandle.tsx

@@ -54,6 +54,7 @@ export default memo((props: any) => {
                   fontSize: '12px',
                 }}
                 open={isShowTooltip}
+                getPopupContainer={() => document.getElementById('xflow-container')}
               >
                 <PlusOutlined style={{ color: '#fff', fontSize: 10 }} />
               </Tooltip>

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_4p70zmc30ro.js',
+  scriptUrl: '//at.alicdn.com/t/a/font_4069358_36flyyai0sm.js',
 });
 
 export default Icon;

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

@@ -33,6 +33,7 @@ export default memo((props: any) => {
           title={<MenuTooltip {...props} />}
           placement="bottomLeft"
           trigger="click"
+          getPopupContainer={() => document.getElementById('xflow-container')}
         >
           <Tooltip
             title="点击图标查看节点信息"
@@ -43,6 +44,7 @@ export default memo((props: any) => {
               color: '#354052',
               fontSize: '12px',
             }}
+            getPopupContainer={() => document.getElementById('xflow-container')}
           >
             <span className="icon-box" style={{ background: icon?.bgColor }}>
               {iconSvg ? iconSvg : <IconBox {...icon} /> }
@@ -60,6 +62,7 @@ export default memo((props: any) => {
                 color: '#354052',
                 fontSize: '12px',
               },
+              getPopupContainer:() => document.getElementById('xflow-container')
             },
           }}
         >
@@ -81,6 +84,7 @@ export default memo((props: any) => {
                 color: '#354052',
                 fontSize: '12px',
               },
+              getPopupContainer: () => document.getElementById('xflow-container')
             },
           }}
           className="node-desc"

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

@@ -66,6 +66,7 @@ const MenuItem = (props: any) => {
       title={<MenuTooltip {...props} />}
       placement='right'
       arrow={false}
+      getPopupContainer={() => document.getElementById('xflow-container')}
     >
       <div
         className='menu-item'

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

@@ -44,6 +44,7 @@ export default forwardRef((props: any, popoverRef) => {
 
   return (
     <Popover
+      getPopupContainer={() => document.getElementById('xflow-container')}
       zIndex={2000}
       arrow={false}
       overlayInnerStyle={{ padding: '12px 6px' }}

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

@@ -56,7 +56,7 @@
       border-color: #fff;
     }
     textarea {
-      margin: 12px 0;
+      margin-top: 12px;
     }
   }
 
@@ -122,4 +122,4 @@
       font-size: 12px;
     }
   }
-}
+}

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

@@ -39,9 +39,9 @@ const Panel: FC<IPanelProps> = (props: IPanelProps) => {
   const isDisabled = ['Input', 'Output'].includes(nodeType) || disabled;
   const [descVal, setDescVal] = useState(data?.desc);
   const [titleVal, setTitleVal] = useState(data?.title || nodeSetting?.title);
+  const { hideDesc, nodeConfigPanelWidth, iconSvg } = nodeSetting;
 
   // const description = getDescription(nodeType, props.description);
-
   const handleNodeValueChange = debounce((data: any) => {
     const newNodes = produce(nodes, draft => {
       let node = null;
@@ -69,31 +69,36 @@ const Panel: FC<IPanelProps> = (props: IPanelProps) => {
 
   return (
     <Drawer
+      getContainer={false}
       rootClassName="custom-node-panel"
       open={true}
-      width={nodeSetting?.nodeConfigPanelWidth || configPanelWidth || 400} // 改为配置的width 节点的width > 全局的width>  默认 400
+      width={nodeConfigPanelWidth || configPanelWidth || 400} // 改为配置的width 节点的width > 全局的width>  默认 400
       mask={false}
       onClose={onClose}
+      headerStyle={{ paddingBottom: '12px' }}
       title={
         <>
           <div className="title-box">
             <div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
               <span
                 className="icon-box"
-                style={{ background: nodeSetting?.icon?.bgColor }}
+                style={{ background: nodeSetting?.icon?.bgColor || '#F79009'}}
               >
-                <Icon
-                  style={{ fontSize: 14, color: '#fff' }}
-                  type={nodeSetting?.icon?.type}
-                />
+                {iconSvg ? (
+                  iconSvg
+                ) : (
+                  <Icon
+                    style={{ fontSize: 14, color: '#fff' }}
+                    type={nodeSetting?.icon?.type}
+                  />
+                )}
               </span>
               {isDisabled ? (
                 <span style={{ marginLeft: '11px' }}>{nodeSetting?.title}</span>
               ) : (
                 <Input
                   style={{ width: '100%' }}
-                  // defaultValue={data?.title || nodeSetting?.title}
-                  value={titleVal} //  || nodeSetting?.title
+                  value={titleVal}
                   onChange={e => {
                     setTitleVal(e.target.value);
                     handleNodeValueChange({ title: e.target.value });
@@ -118,23 +123,23 @@ const Panel: FC<IPanelProps> = (props: IPanelProps) => {
               </Space>
             </div>
           </div>
-          <div className="desc-box">
-            {isDisabled ? (
-              description
-            ) : (
-              <Input.TextArea
-                placeholder="添加描述..."
-                autoSize={{ minRows: 1 }}
-                value={descVal}
-                // value={data?.desc}
-                // defaultValue={description}
-                onChange={e => {
-                  setDescVal(e.target.value);
-                  handleNodeValueChange({ desc: e.target.value });
-                }}
-              />
-            )}
-          </div>
+          {!hideDesc && (
+            <div className="desc-box">
+              {isDisabled ? (
+                description
+              ) : (
+                <Input.TextArea
+                  placeholder="添加描述..."
+                  autoSize={{ minRows: 1 }}
+                  value={descVal}
+                  onChange={e => {
+                    setDescVal(e.target.value);
+                    handleNodeValueChange({ desc: e.target.value });
+                  }}
+                />
+              )}
+            </div>
+          )}
         </>
       }
     >