113 lines
4.3 KiB
TypeScript
113 lines
4.3 KiB
TypeScript
'use client';
|
|
|
|
import { Plus, Eye, EyeOff, Trash2 } from 'lucide-react';
|
|
import { useCalculateStore } from '@/lib/calculate/store';
|
|
import { cn } from '@/lib/utils';
|
|
import GraphCanvas from './GraphCanvas';
|
|
|
|
export function GraphPanel() {
|
|
const {
|
|
graphFunctions,
|
|
variables,
|
|
addGraphFunction,
|
|
updateGraphFunction,
|
|
removeGraphFunction,
|
|
} = useCalculateStore();
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3 h-full min-h-0">
|
|
|
|
{/* ── Function list ────────────────────────────────────── */}
|
|
<div className="glass rounded-xl p-3 shrink-0">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
|
|
Functions <span className="text-muted-foreground/40 normal-case font-normal">— use x as variable</span>
|
|
</span>
|
|
<button
|
|
onClick={addGraphFunction}
|
|
disabled={graphFunctions.length >= 8}
|
|
className="flex items-center gap-1 text-xs text-muted-foreground hover:text-primary transition-colors disabled:opacity-30"
|
|
>
|
|
<Plus className="w-3.5 h-3.5" /> Add
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
{graphFunctions.map((fn, i) => (
|
|
<div key={fn.id} className="flex items-center gap-2">
|
|
|
|
{/* Color swatch / color picker */}
|
|
<div className="relative shrink-0 w-4 h-4">
|
|
<div
|
|
className="w-4 h-4 rounded-full ring-1 ring-white/15 cursor-pointer"
|
|
style={{ background: fn.color }}
|
|
/>
|
|
<input
|
|
type="color"
|
|
value={fn.color}
|
|
onChange={(e) => updateGraphFunction(fn.id, { color: e.target.value })}
|
|
className="absolute inset-0 opacity-0 cursor-pointer w-full h-full"
|
|
title="Change color"
|
|
/>
|
|
</div>
|
|
|
|
{/* Index label */}
|
|
<span
|
|
className="text-xs font-mono shrink-0 w-6"
|
|
style={{ color: fn.visible ? fn.color : 'rgba(161,161,170,0.4)' }}
|
|
>
|
|
f{i + 1}
|
|
</span>
|
|
|
|
{/* Expression input */}
|
|
<input
|
|
value={fn.expression}
|
|
onChange={(e) => updateGraphFunction(fn.id, { expression: e.target.value })}
|
|
placeholder={i === 0 ? 'sin(x)' : i === 1 ? 'x^2 / 4' : 'f(x)…'}
|
|
className={cn(
|
|
'flex-1 min-w-0 bg-transparent border border-border/35 rounded px-2 py-1',
|
|
'text-sm font-mono outline-none transition-colors',
|
|
'placeholder:text-muted-foreground/30',
|
|
'focus:border-primary/50',
|
|
!fn.visible && 'opacity-40'
|
|
)}
|
|
/>
|
|
|
|
{/* Visibility toggle */}
|
|
<button
|
|
onClick={() => updateGraphFunction(fn.id, { visible: !fn.visible })}
|
|
className={cn(
|
|
'shrink-0 transition-colors',
|
|
fn.visible
|
|
? 'text-muted-foreground hover:text-foreground'
|
|
: 'text-muted-foreground/25 hover:text-muted-foreground'
|
|
)}
|
|
title={fn.visible ? 'Hide' : 'Show'}
|
|
>
|
|
{fn.visible ? <Eye className="w-3.5 h-3.5" /> : <EyeOff className="w-3.5 h-3.5" />}
|
|
</button>
|
|
|
|
{/* Delete */}
|
|
{graphFunctions.length > 1 && (
|
|
<button
|
|
onClick={() => removeGraphFunction(fn.id)}
|
|
className="shrink-0 text-muted-foreground/30 hover:text-destructive transition-colors"
|
|
title="Remove"
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Canvas ───────────────────────────────────────────── */}
|
|
<div className="glass rounded-xl overflow-hidden flex-1 min-h-0">
|
|
<GraphCanvas functions={graphFunctions} variables={variables} />
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|