33 lines
923 B
TypeScript
33 lines
923 B
TypeScript
import { memo, type FC, type CSSProperties } from 'react';
|
|
import { Handle, Position, type NodeProps } from '@xyflow/react';
|
|
|
|
const sourceHandleStyleA: CSSProperties = { left: 50 };
|
|
const sourceHandleStyleB: CSSProperties = {
|
|
right: 50,
|
|
left: 'auto',
|
|
};
|
|
|
|
const CustomNode: FC<NodeProps> = ({ data, positionAbsoluteX, positionAbsoluteY }) => {
|
|
return (
|
|
<>
|
|
<Handle type="target" position={Position.Top} />
|
|
<div>
|
|
<div>
|
|
Label: <strong>{data.label}</strong>
|
|
</div>
|
|
<div>
|
|
Position:{' '}
|
|
<strong>
|
|
{positionAbsoluteX.toFixed(2)},{positionAbsoluteY.toFixed(2)}
|
|
</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<Handle type="source" position={Position.Bottom} id="a" style={sourceHandleStyleA} />
|
|
<Handle type="source" position={Position.Bottom} id="b" style={sourceHandleStyleB} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default memo(CustomNode);
|