77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
import React, { useContext } from 'react'
|
|
import { Handle, Position } from '@xyflow/react'
|
|
import { ArrowDownLeft, ArrowUpRight } from 'lucide-react'
|
|
import FlowContext from '@/lib/flowContext'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
type NodeHandleProps = {
|
|
id: string
|
|
/** Pass when this handle is a connection target so valid highlight can show as soon as connection starts */
|
|
nodeId?: string
|
|
}
|
|
|
|
export function InputHandle({ id, nodeId }: NodeHandleProps) {
|
|
const ctx = useContext(FlowContext)
|
|
const connectionFrom = ctx?.connectionFrom ?? null
|
|
const isValidConnection = ctx?.isValidConnection
|
|
const isConnecting = Boolean(nodeId && connectionFrom && connectionFrom.nodeId !== nodeId)
|
|
const isValidTarget =
|
|
isConnecting &&
|
|
isValidConnection?.({
|
|
source: connectionFrom!.nodeId,
|
|
sourceHandle: connectionFrom!.sourceHandle ?? undefined,
|
|
target: nodeId!,
|
|
targetHandle: id,
|
|
})
|
|
|
|
return (
|
|
<Handle
|
|
type="target"
|
|
position={Position.Left}
|
|
id={id}
|
|
className={cn(isValidTarget && 'connection-valid-target', isConnecting && !isValidTarget && 'connection-invalid-target')}
|
|
style={{
|
|
top: 20,
|
|
width: 20,
|
|
height: 20,
|
|
left: -15,
|
|
borderRadius: '9999px',
|
|
background: 'transparent',
|
|
border: 'none',
|
|
padding: 0,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<ArrowDownLeft className="w-4 h-4 text-foreground pointer-events-none" />
|
|
</Handle>
|
|
)
|
|
}
|
|
|
|
export function OutputHandle({ id }: NodeHandleProps) {
|
|
return (
|
|
<Handle
|
|
type="source"
|
|
position={Position.Right}
|
|
id={id}
|
|
style={{
|
|
top: 20,
|
|
width: 20,
|
|
height: 20,
|
|
right: -15,
|
|
borderRadius: '9999px',
|
|
background: 'transparent',
|
|
border: 'none',
|
|
padding: 0,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<ArrowUpRight className="w-4 h-4 text-foreground pointer-events-none" />
|
|
</Handle>
|
|
)
|
|
}
|
|
|