Merge pull request #1706 from jile1997/feat

feat: 部分优化

Author: lhbxs

packages/x-flow/src/XFlow.tsx

@@ -176,6 +176,8 @@ const XFlow: FC<FlowProps> = memo(props => {
           isAddingNode: false,
         });
       }
+    } else if (e.key === 'Escape'){
+      setOpenPanel(false)
     }
   });
 

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

@@ -277,6 +277,30 @@ export default memo((props: any) => {
     };
   }, [menuItem, isEnd]);
 
+  const renderHandleMemo = useCallback(()=>{
+    if(renderHandle){
+      return renderHandle(
+        SourceHandle,
+        {
+          position:sourcePosition,
+          isConnectable:connectable,
+          selected:selected,
+          isHovered:isHovered,
+          handleAddNode:handleAddNode
+        },
+        {
+          id,
+          type,
+          data,
+          layout,
+          isConnectable,
+          readOnly
+        }
+      )
+    }
+    return null
+  },[renderHandle,SourceHandle,sourcePosition,connectable,selected,isHovered,handleAddNode,id,type,data,layout,isConnectable,readOnly])
+
   return (
     <div
       className={classNames('xflow-node-container', {
@@ -292,7 +316,12 @@ export default memo((props: any) => {
     >
       {!settingMap?.[type]?.targetHandleHidden && !isNote && (
         <Handle
-          {...handleProps}
+          isValidConnection={(edge)=>{
+            if(handleProps.isValidConnection){
+              return handleProps.isValidConnection(edge,'target',type)
+            }
+            return true
+          }}
           type="target"
           position={targetPosition}
           isConnectable={connectable}
@@ -333,24 +362,7 @@ export default memo((props: any) => {
         <div onClick={()=>{
           onClick(data)
         }}>
-          {renderHandle(
-            SourceHandle,
-            {
-              position:sourcePosition,
-              isConnectable:connectable,
-              selected:selected,
-              isHovered:isHovered,
-              handleAddNode:handleAddNode
-            },
-            {
-              id,
-              type,
-              data,
-              layout,
-              isConnectable,
-              readOnly
-            }
-          )}
+          {renderHandleMemo()}
         </div>
         :
         <Fragment>
@@ -363,6 +375,7 @@ export default memo((props: any) => {
                 isHovered={isHovered}
                 handleAddNode={handleAddNode}
                 isConnected={isSourceHandleConnected}
+                nodeType={type}
                 // isConnectableStart={isConnectableStart}
                 // isConnectableEnd={isConnectableEnd}
               />

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

@@ -2,7 +2,7 @@ import { PlusOutlined } from '@ant-design/icons';
 import { Handle } from '@xyflow/react';
 import { Tooltip } from 'antd';
 import classNames from 'classnames';
-import React, { ComponentProps, memo, useContext, useMemo, useRef, useState } from 'react';
+import React, { ComponentProps, memo, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import NodeSelectPopover from '../NodesPopover';
 import { ConfigContext } from '../../models/context';
 import './index.less';
@@ -18,6 +18,7 @@ export default memo((props:Partial<HandleProps> &  Record<string,any> ) => {
     handleAddNode,
     switchTitle,
     isConnected, // 是否有连接的节点
+    nodeType,
     ...rest
   } = props;
   const [isShowTooltip, setIsShowTooltip] = useState(false);
@@ -40,7 +41,12 @@ export default memo((props:Partial<HandleProps> &  Record<string,any> ) => {
 
   return (
     <Handle
-      {...handleProps}
+      isValidConnection={(edge)=>{
+        if(handleProps.isValidConnection){
+          return handleProps.isValidConnection(edge,'source',nodeType)
+        }
+        return true
+      }}
       type="source"
       position={position}
       isConnectable={isConnectable}
@@ -72,6 +78,7 @@ export default memo((props:Partial<HandleProps> &  Record<string,any> ) => {
                 addNode={handleAddNode}
                 ref={popoverRef}
                 onNodeSelectPopoverChange={val => setOpenNodeSelectPopover(val)}
+                nodeType={nodeType}
               >
                 <Tooltip
                   title="点击添加节点"

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

@@ -17,15 +17,21 @@ import NodesMenu from '../NodesMenu';
 import './index.less';
 
 export default forwardRef((props: any, popoverRef) => {
-  const { addNode, children, onNodeSelectPopoverChange } = props;
+  const { addNode, children, onNodeSelectPopoverChange,nodeType } = props;
   const { setIsAddingNode } = useStore(s => ({
     setIsAddingNode: s.setIsAddingNode,
   }));
   const ref = useRef<any>(null);
   const closeRef: any = useRef<HTMLButtonElement>(null);
   const [open, setOpen] = useState(false);
 
-  const { settings, nodeSelector, antdVersion ,readOnly ,clickAddNode,settingMap }: any = useContext(ConfigContext);
+  const { settings, nodeSelector, antdVersion ,readOnly ,clickAddNode,settingMap,filterSettings }: any = useContext(ConfigContext);
+  const items = useMemo(()=>{
+    if(typeof filterSettings === 'function'){
+      return filterSettings(settings,nodeType)
+    }
+    return settings
+  },[settings,nodeType])
   const { showSearch, popoverProps = { placement: 'top' } } =
     nodeSelector || {};
 
@@ -97,7 +103,7 @@ export default forwardRef((props: any, popoverRef) => {
       content={
         <NodesMenu
           ref={ref}
-          items={settings}
+          items={items}
           showSearch={showSearch}
           onClick={handCreateNode}
         />

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

@@ -69,6 +69,7 @@ export default memo((props: any) => {
             (edges || [])?.filter(flow => flow?.sourceHandle === item?._id)
               ?.length > 0
           }
+          nodeType={'Parallel'}
         />
       </div>
     );

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

@@ -56,6 +56,7 @@ export default memo((props: any) => {
             (edges || [])?.filter(flow => flow?.sourceHandle === item?._id)
               ?.length > 0
           }
+          nodeType={'switch'}
         />
       </div>
     );
@@ -140,6 +141,7 @@ export default memo((props: any) => {
                     flow?.sourceHandle === 'id_else' && flow?.source === id
                 )?.length > 0
               }
+              nodeType={'Switch'}
             />
           </div>
         </div>

packages/x-flow/src/types.ts

@@ -139,7 +139,7 @@ export interface TControl{
 export interface THandle{
   // isConnectableStart?:boolean
   // isConnectableEnd?:boolean
-  isValidConnection?:HandleProps['isValidConnection']
+  isValidConnection?:(edges:Parameters<HandleProps['isValidConnection']>[0],edgeType:'source'|'target',nodeType:string)=>boolean
 }
 export interface FlowProps {
   initialValues?: {
@@ -167,6 +167,7 @@ export interface FlowProps {
    * 节点配置
    */
   settings?: (TNodeGroup | TNodeItem)[];
+  filterSettings?:(settings:(TNodeGroup | TNodeItem)[],nodeType:string)=>(TNodeGroup | TNodeItem)[]
   nodeSelector?: TNodeSelector;
   iconFontUrl?: string;
   globalConfig?: {

packages/x-flow/src/withProvider.tsx

@@ -35,6 +35,7 @@ export default function withProvider<T>(
       clickAddNode,
       onTesting,
       openColorfulMode,
+      filterSettings,
       ...restProps
     } = props;
     const settingMap = useMemo(() => {
@@ -65,6 +66,7 @@ export default function withProvider<T>(
       clickAddNode,
       onTesting,
       openColorfulMode,
+      filterSettings,
       widgets: {
         ...defaultWidgets,
         ...widgets,