34 lines
830 B
TypeScript
34 lines
830 B
TypeScript
import { memo, FC } from 'react';
|
|
|
|
import { Handle, Position, NodeProps, Connection, Edge } from 'react-flow-renderer';
|
|
|
|
const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
|
|
|
|
const labelStyle = {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
};
|
|
|
|
const dragHandleStyle = {
|
|
display: 'inline-block',
|
|
width: 25,
|
|
height: 25,
|
|
backgroundColor: 'teal',
|
|
marginLeft: 5,
|
|
borderRadius: '50%',
|
|
};
|
|
|
|
const ColorSelectorNode: FC<NodeProps> = () => {
|
|
return (
|
|
<>
|
|
<Handle type="target" position={Position.Left} onConnect={onConnect} />
|
|
<div style={labelStyle}>
|
|
Only draggable here → <span className="custom-drag-handle" style={dragHandleStyle} />
|
|
</div>
|
|
<Handle type="source" position={Position.Right} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default memo(ColorSelectorNode);
|