fix: node handle tooltip

This commit is contained in:
StyleZhang 2024-09-30 15:23:04 +08:00
parent b67b81bf8f
commit d2971e84bb

View File

@ -24,7 +24,6 @@ import {
import {
useStore,
} from '../../../store'
import Tooltip from '@/app/components/base/tooltip'
type NodeHandleProps = {
handleId: string
@ -154,10 +153,23 @@ export const NodeSourceHandle = memo(({
}, [notInitialWorkflow, data.type, isChatMode])
return (
<Tooltip
popupContent={(
<Handle
id={handleId}
type='source'
position={Position.Right}
className={`
group/handle !w-4 !h-4 !bg-transparent !rounded-none !outline-none !border-none z-[1]
after:absolute after:w-0.5 after:h-2 after:right-1.5 after:top-1 after:bg-primary-500
hover:scale-125 transition-all
${!connected && 'after:opacity-0'}
${handleClassName}
`}
isConnectable={isConnectable}
onClick={handleHandleClick}
>
<div className='hidden group-hover/handle:block absolute left-1/2 -top-1 -translate-y-full -translate-x-1/2 p-1.5 border-[0.5px] border-components-panel-border bg-components-tooltip-bg rounded-lg shadow-lg'>
<div className='system-xs-regular text-text-tertiary'>
<div>
<div className=' whitespace-nowrap'>
<span className='system-xs-medium text-text-secondary'>{t('workflow.common.parallelTip.click.title')}</span>
{t('workflow.common.parallelTip.click.desc')}
</div>
@ -166,42 +178,26 @@ export const NodeSourceHandle = memo(({
{t('workflow.common.parallelTip.drag.desc')}
</div>
</div>
)}
>
<Handle
id={handleId}
type='source'
position={Position.Right}
className={`
!w-4 !h-4 !bg-transparent !rounded-none !outline-none !border-none z-[1]
after:absolute after:w-0.5 after:h-2 after:right-1.5 after:top-1 after:bg-primary-500
hover:scale-125 transition-all
${!connected && 'after:opacity-0'}
${handleClassName}
`}
isConnectable={isConnectable}
onClick={handleHandleClick}
>
{
isConnectable && !getNodesReadOnly() && (
<BlockSelector
open={open}
onOpenChange={handleOpenChange}
onSelect={handleSelect}
asChild
triggerClassName={open => `
hidden absolute top-0 left-0 pointer-events-none
${nodeSelectorClassName}
group-hover:!flex
${data.selected && '!flex'}
${open && '!flex'}
`}
availableBlocksTypes={availableNextBlocks}
/>
)
}
</Handle>
</Tooltip>
</div>
{
isConnectable && !getNodesReadOnly() && (
<BlockSelector
open={open}
onOpenChange={handleOpenChange}
onSelect={handleSelect}
asChild
triggerClassName={open => `
hidden absolute top-0 left-0 pointer-events-none
${nodeSelectorClassName}
group-hover:!flex
${data.selected && '!flex'}
${open && '!flex'}
`}
availableBlocksTypes={availableNextBlocks}
/>
)
}
</Handle>
)
})
NodeSourceHandle.displayName = 'NodeSourceHandle'