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