37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
import React, { useState, memo, FC, useMemo, CSSProperties } from 'react';
|
|
import { Handle, Position, NodeProps, useUpdateNodeInternals } from 'reactflow';
|
|
|
|
const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' };
|
|
|
|
const CustomNode: FC<NodeProps> = ({ id }) => {
|
|
const [handleCount, setHandleCount] = useState(1);
|
|
const updateNodeInternals = useUpdateNodeInternals();
|
|
|
|
const handles = useMemo(
|
|
() =>
|
|
Array.from({ length: handleCount }, (x, i) => {
|
|
const handleId = `handle-${i}`;
|
|
return <Handle key={handleId} type="source" position={Position.Right} id={handleId} style={{ top: 10 * i }} />;
|
|
}),
|
|
[handleCount]
|
|
);
|
|
|
|
return (
|
|
<div style={nodeStyles}>
|
|
<Handle type="target" position={Position.Left} />
|
|
<div>output handle count: {handleCount}</div>
|
|
<button
|
|
onClick={() => {
|
|
setHandleCount((c) => c + 1);
|
|
updateNodeInternals(id);
|
|
}}
|
|
>
|
|
add handle
|
|
</button>
|
|
{handles}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(CustomNode);
|