59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
import React from 'react'
|
|
import { Handle, Position } from 'reactflow'
|
|
import { Circle, CircleDashed } from 'lucide-react'
|
|
|
|
type NodeHandleProps = {
|
|
id: string
|
|
}
|
|
|
|
export function InputHandle({ id }: NodeHandleProps) {
|
|
return (
|
|
<Handle
|
|
type="target"
|
|
position={Position.Left}
|
|
id={id}
|
|
style={{
|
|
top: 20,
|
|
width: 20,
|
|
height: 20,
|
|
left: -10,
|
|
borderRadius: '9999px',
|
|
background: 'transparent',
|
|
border: 'none',
|
|
padding: 0,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<CircleDashed className="w-4 h-4 text-gray-500 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: -10,
|
|
borderRadius: '9999px',
|
|
background: 'transparent',
|
|
border: 'none',
|
|
padding: 0,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<Circle className="w-4 h-4 text-gray-800 pointer-events-none" />
|
|
</Handle>
|
|
)
|
|
}
|
|
|