53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
|
import { DragEvent } from 'react';
|
||
|
|
import { NodeType } from '../../../lib/canvas/schema';
|
||
|
|
|
||
|
|
interface PaletteItem {
|
||
|
|
type: NodeType;
|
||
|
|
label: string;
|
||
|
|
icon: string;
|
||
|
|
description: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const PALETTE_ITEMS: PaletteItem[] = [
|
||
|
|
{ type: 'model', label: 'Model', icon: '📦', description: 'NX model file' },
|
||
|
|
{ type: 'solver', label: 'Solver', icon: '⚙️', description: 'Nastran solution' },
|
||
|
|
{ type: 'designVar', label: 'Design Variable', icon: '📐', description: 'Parameter to vary' },
|
||
|
|
{ type: 'extractor', label: 'Extractor', icon: '🔬', description: 'Physics extraction' },
|
||
|
|
{ type: 'objective', label: 'Objective', icon: '🎯', description: 'Optimization goal' },
|
||
|
|
{ type: 'constraint', label: 'Constraint', icon: '🚧', description: 'Limit condition' },
|
||
|
|
{ type: 'algorithm', label: 'Algorithm', icon: '🧠', description: 'Optimization method' },
|
||
|
|
{ type: 'surrogate', label: 'Surrogate', icon: '🚀', description: 'Neural acceleration' },
|
||
|
|
];
|
||
|
|
|
||
|
|
export function NodePalette() {
|
||
|
|
const onDragStart = (event: DragEvent, nodeType: NodeType) => {
|
||
|
|
event.dataTransfer.setData('application/reactflow', nodeType);
|
||
|
|
event.dataTransfer.effectAllowed = 'move';
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="w-64 bg-gray-50 border-r border-gray-200 p-4 overflow-y-auto">
|
||
|
|
<h3 className="text-sm font-semibold text-gray-500 uppercase mb-4">
|
||
|
|
Components
|
||
|
|
</h3>
|
||
|
|
<div className="space-y-2">
|
||
|
|
{PALETTE_ITEMS.map((item) => (
|
||
|
|
<div
|
||
|
|
key={item.type}
|
||
|
|
draggable
|
||
|
|
onDragStart={(e) => onDragStart(e, item.type)}
|
||
|
|
className="flex items-center gap-3 p-3 bg-white rounded-lg border border-gray-200
|
||
|
|
cursor-grab hover:border-blue-300 hover:shadow-sm transition-all"
|
||
|
|
>
|
||
|
|
<span className="text-xl">{item.icon}</span>
|
||
|
|
<div>
|
||
|
|
<div className="font-medium text-gray-800">{item.label}</div>
|
||
|
|
<div className="text-xs text-gray-500">{item.description}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|