dify/web/app/components/workflow/workflow-preview/components/node-handle.tsx

import type { Node } from '@/app/components/workflow/types'
import { cn } from '@langgenius/dify-ui/cn'
import { memo } from 'react'
import { Handle, Position } from 'reactflow'
import { BlockEnum } from '@/app/components/workflow/types'

type NodeHandleProps = {
  handleId: string
  handleClassName?: string
} & Pick<Node, 'id' | 'data'>

export const NodeTargetHandle = memo(({ data, handleId, handleClassName }: NodeHandleProps) => {
  const connected = data._connectedTargetHandleIds?.includes(handleId)

  return (
    <>
      <Handle
        id={handleId}
        type="target"
        position={Position.Left}
        className={cn(
          'z-1 size-4! rounded-none! border-none! bg-transparent! outline-hidden!',
          'after:absolute after:top-1 after:left-1.5 after:h-2 after:w-0.5 after:bg-workflow-link-line-handle',
          'transition-all hover:scale-125',
          !connected && 'after:opacity-0',
          (data.type === BlockEnum.Start ||
            data.type === BlockEnum.TriggerWebhook ||
            data.type === BlockEnum.TriggerSchedule ||
            data.type === BlockEnum.TriggerPlugin) &&
            'opacity-0',
          handleClassName,
        )}
      ></Handle>
    </>
  )
})
NodeTargetHandle.displayName = 'NodeTargetHandle'

export const NodeSourceHandle = memo(({ data, handleId, handleClassName }: NodeHandleProps) => {
  const connected = data._connectedSourceHandleIds?.includes(handleId)

  return (
    <Handle
      id={handleId}
      type="source"
      position={Position.Right}
      className={cn(
        'group/handle z-1 size-4! rounded-none! border-none! bg-transparent! outline-hidden!',
        'after:absolute after:top-1 after:right-1.5 after:h-2 after:w-0.5 after:bg-workflow-link-line-handle',
        'transition-all hover:scale-125',
        !connected && 'after:opacity-0',
        handleClassName,
      )}
    ></Handle>
  )
})
NodeSourceHandle.displayName = 'NodeSourceHandle'