fix: update node handle opacity and pointer events behavior in components and tests (#35525)

Co-authored-by: CodingOnStar <hanxujiang@dify.com>
This commit is contained in:
Coding On Star 2026-04-23 17:24:19 +08:00 committed by fatelei
parent 625bd7ab63
commit 9616ac170b
No known key found for this signature in database
GPG Key ID: 2F91DA05646F4EED
2 changed files with 13 additions and 11 deletions

View File

@ -194,7 +194,9 @@ describe('node-handle', () => {
fireEvent.click(addNodeButton)
expect(addNodeButton).toHaveClass('opacity-100')
expect(addNodeButton).toHaveClass('pointer-events-auto')
// Trigger stays pointer-events-none so it never steals mousedown from
// the underlying React Flow handle (drag-to-connect must keep working).
expect(addNodeButton).toHaveClass('pointer-events-none')
fireEvent.click(handle)
@ -236,7 +238,7 @@ describe('node-handle', () => {
})
expect(getAddNodeButton()).toHaveClass('opacity-100')
expect(getAddNodeButton()).toHaveClass('pointer-events-auto')
expect(getAddNodeButton()).toHaveClass('pointer-events-none')
})
it.each([
@ -266,7 +268,7 @@ describe('node-handle', () => {
fireEvent.click(addNodeButton)
expect(addNodeButton).toHaveClass('opacity-100')
expect(addNodeButton).toHaveClass('pointer-events-auto')
expect(addNodeButton).toHaveClass('pointer-events-none')
fireEvent.click(getSelectNodeButton())
@ -295,7 +297,7 @@ describe('node-handle', () => {
expect(addNodeButton).toHaveClass('custom-selector')
expect(addNodeButton).toHaveClass('opacity-100')
expect(addNodeButton).toHaveClass('pointer-events-auto')
expect(addNodeButton).toHaveClass('pointer-events-none')
})
it.each([
@ -332,7 +334,7 @@ describe('node-handle', () => {
const addNodeButton = getAddNodeButton()
expect(addNodeButton).toHaveClass('opacity-100')
expect(addNodeButton).toHaveClass('pointer-events-auto')
expect(addNodeButton).toHaveClass('pointer-events-none')
expect(mockSetShouldAutoOpenStartNodeSelector).toHaveBeenCalledWith(false)
expect(mockSetHasSelectedStartNode).toHaveBeenCalledWith(false)
})

View File

@ -115,9 +115,9 @@ export const NodeTargetHandle = memo(({
triggerClassName={open => `
absolute left-0 top-0 opacity-0 pointer-events-none transition-opacity duration-150
${nodeSelectorClassName}
group-hover:opacity-100 group-hover:pointer-events-auto
${data.selected && 'opacity-100 pointer-events-auto'}
${open && 'opacity-100 pointer-events-auto'}
group-hover:opacity-100
${data.selected && 'opacity-100'}
${open && 'opacity-100'}
`}
availableBlocksTypes={availablePrevBlocks}
/>
@ -233,9 +233,9 @@ export const NodeSourceHandle = memo(({
triggerClassName={open => `
absolute top-0 left-0 opacity-0 pointer-events-none transition-opacity duration-150
${nodeSelectorClassName}
group-hover:opacity-100 group-hover:pointer-events-auto
${data.selected && 'opacity-100 pointer-events-auto'}
${open && 'opacity-100 pointer-events-auto'}
group-hover:opacity-100
${data.selected && 'opacity-100'}
${open && 'opacity-100'}
`}
availableBlocksTypes={availableNextBlocks}
/>