54 lines
1.0 KiB
TypeScript
54 lines
1.0 KiB
TypeScript
import '@wokwi/elements';
|
|
import { useRef, useEffect } from 'react';
|
|
|
|
interface PotentiometerProps {
|
|
id?: string;
|
|
value?: number; // 0-100
|
|
x?: number;
|
|
y?: number;
|
|
onChange?: (value: number) => void;
|
|
}
|
|
|
|
export const Potentiometer = ({
|
|
id,
|
|
value = 50,
|
|
x = 0,
|
|
y = 0,
|
|
onChange,
|
|
}: PotentiometerProps) => {
|
|
const potRef = useRef<HTMLElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (potRef.current) {
|
|
(potRef.current as any).value = value;
|
|
}
|
|
}, [value]);
|
|
|
|
useEffect(() => {
|
|
const element = potRef.current;
|
|
if (!element || !onChange) return;
|
|
|
|
const handleChange = (e: any) => {
|
|
onChange(e.detail.value);
|
|
};
|
|
|
|
element.addEventListener('wokwi-potentiometer-change', handleChange);
|
|
|
|
return () => {
|
|
element.removeEventListener('wokwi-potentiometer-change', handleChange);
|
|
};
|
|
}, [onChange]);
|
|
|
|
return (
|
|
<wokwi-potentiometer
|
|
id={id}
|
|
ref={potRef}
|
|
style={{
|
|
position: 'absolute',
|
|
left: `${x}px`,
|
|
top: `${y}px`,
|
|
}}
|
|
/>
|
|
);
|
|
};
|