File size: 3,218 Bytes
c9d0005 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | import { PlusOutlined } from '@ant-design/icons';
import { Handle } from '@xyflow/react';
import { Tooltip } from 'antd';
import classNames from 'classnames';
import React, { ComponentProps, memo, useContext, useEffect, useMemo, useRef, useState } from 'react';
import NodeSelectPopover from '../NodesPopover';
import { ConfigContext } from '../../models/context';
import './index.less';
export type HandleProps = ComponentProps<typeof Handle>
export default memo((props:Partial<HandleProps> & Record<string,any> ) => {
const {
position,
isConnectable,
selected,
isHovered,
handleAddNode,
switchTitle,
isConnected, // 是否有连接的节点
nodeType,
...rest
} = props;
const [isShowTooltip, setIsShowTooltip] = useState(false);
const [openNodeSelectPopover, setOpenNodeSelectPopover] = useState(false);
const popoverRef = useRef(null);
const { antdVersion, globalConfig } = useContext(ConfigContext);
const handleProps = globalConfig?.handle || {};
const toolTipVersionProps = useMemo(() => {
if (antdVersion === 'V5') {
return {
open: isShowTooltip,
};
}
// V4
return {
visible: isShowTooltip,
};
}, [isShowTooltip]);
return (
<Handle
isValidConnection={(edge)=>{
if(handleProps.isValidConnection){
return handleProps.isValidConnection(edge,'source',nodeType)
}
return true
}}
type="source"
position={position}
isConnectable={isConnectable}
onMouseEnter={() => setIsShowTooltip(true)}
onMouseLeave={() => setIsShowTooltip(false)}
onClick={e => {
e.stopPropagation();
popoverRef?.current?.changeOpen(true);
setIsShowTooltip(false);
setOpenNodeSelectPopover(true);
}}
{...rest}
className={classNames(
{
'handle-disconnected': !isConnected,
},
rest.className
)}
>
{(selected || isHovered || openNodeSelectPopover) && (
<>
{switchTitle && (
<div className="xflow-node-switch-title">{switchTitle}</div>
)}
{isConnectable && (
<div className="xflow-node-add-box">
<NodeSelectPopover
placement="right"
addNode={handleAddNode}
ref={popoverRef}
onNodeSelectPopoverChange={val => setOpenNodeSelectPopover(val)}
nodeType={nodeType}
>
<Tooltip
title="点击添加节点"
// arrow={false}
overlayInnerStyle={{
background: '#fff',
color: '#354052',
fontSize: '12px',
}}
color="#fff"
{...toolTipVersionProps}
getPopupContainer={() =>
document.getElementById('xflow-container') as HTMLElement
}
>
<PlusOutlined style={{ color: '#fff', fontSize: 10 }} />
</Tooltip>
</NodeSelectPopover>
</div>
)}
</>
)}
</Handle>
);
});
|