34 lines
915 B
TypeScript
34 lines
915 B
TypeScript
import React, { memo, FC, useMemo, CSSProperties } from 'react';
|
|
import { Handle, Position, NodeProps } from '@react-flow/core';
|
|
|
|
const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' };
|
|
|
|
const CustomNode: FC<NodeProps> = ({ data }) => {
|
|
const handles = useMemo(
|
|
() =>
|
|
Array.from({ length: data.handleCount }, (x, i) => {
|
|
const handleId = `handle-${i}`;
|
|
return (
|
|
<Handle
|
|
key={handleId}
|
|
type='source'
|
|
position={Position.Right}
|
|
id={handleId}
|
|
style={{ top: 10 * i + data.handlePosition * 10 }}
|
|
/>
|
|
);
|
|
}),
|
|
[data.handleCount, data.handlePosition]
|
|
);
|
|
|
|
return (
|
|
<div style={nodeStyles}>
|
|
<Handle type='target' position={Position.Left} />
|
|
<div>output handle count: {data.handleCount}</div>
|
|
{handles}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(CustomNode);
|