29 lines
1003 B
TypeScript
29 lines
1003 B
TypeScript
import { ReactNode } from 'react';
|
|
import { Handle, Position, NodeProps } from '@xyflow/react';
|
|
import { AppNode } from '../types/graph';
|
|
import './CustomNode.css';
|
|
|
|
export default function CustomNode({
|
|
data,
|
|
selected
|
|
}: NodeProps<AppNode>): ReactNode {
|
|
const handleGenerate = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
};
|
|
|
|
return (
|
|
<div className={`custom-node ${selected ? 'selected' : ''}`}>
|
|
<div className="node-header">
|
|
<span className="node-label" title={data.label}>{data.label}</span>
|
|
<button className="gen-btn" onClick={handleGenerate} onDoubleClick={e => e.stopPropagation()}>生成配置</button>
|
|
</div>
|
|
|
|
{[Position.Top, Position.Bottom, Position.Right, Position.Left].map((position) => (
|
|
(["target", "source"] as const).map((type) => (
|
|
<Handle type={type} position={position} id={position} key={`${type}-${position}`} className="node-handle"/>
|
|
))
|
|
))}
|
|
</div>
|
|
);
|
|
}
|