30 lines
951 B
TypeScript
30 lines
951 B
TypeScript
import { useEffect, useRef } from 'react';
|
|
import { EffectEngine } from '../effects/effect-engine';
|
|
import { useAppearance } from '../appearance/appearance-store';
|
|
|
|
export function EffectLayer() {
|
|
const ref = useRef<HTMLCanvasElement>(null);
|
|
const engineRef = useRef<EffectEngine | null>(null);
|
|
const effect = useAppearance(s => s.effect);
|
|
const accent = useAppearance(s => s.draft.accent);
|
|
|
|
// 建引擎一次
|
|
useEffect(() => {
|
|
if (!ref.current) return;
|
|
const eng = new EffectEngine();
|
|
eng.attach(ref.current);
|
|
engineRef.current = eng;
|
|
return () => eng.detach();
|
|
}, []);
|
|
|
|
// effect/accent 变化时同步引擎（FR-A11 接线）
|
|
useEffect(() => {
|
|
const eng = engineRef.current;
|
|
if (!eng) return;
|
|
eng.setColor(accent);
|
|
eng.setType(effect);
|
|
}, [effect, accent]);
|
|
|
|
return <canvas ref={ref} data-effect={effect} style={{ position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 9999 }} />;
|
|
}
|