60 lines
1.3 KiB
TypeScript
60 lines
1.3 KiB
TypeScript
import '@wokwi/elements';
|
|
import { useRef, useEffect } from 'react';
|
|
|
|
interface PushbuttonProps {
|
|
id?: string;
|
|
color?: 'red' | 'green' | 'blue' | 'yellow' | 'white' | 'black';
|
|
pressed?: boolean;
|
|
x?: number;
|
|
y?: number;
|
|
onPress?: () => void;
|
|
onRelease?: () => void;
|
|
}
|
|
|
|
export const Pushbutton = ({
|
|
id,
|
|
color = 'red',
|
|
pressed = false,
|
|
x = 0,
|
|
y = 0,
|
|
onPress,
|
|
onRelease,
|
|
}: PushbuttonProps) => {
|
|
const buttonRef = useRef<HTMLElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (buttonRef.current) {
|
|
(buttonRef.current as any).color = color;
|
|
(buttonRef.current as any).pressed = pressed;
|
|
}
|
|
}, [color, pressed]);
|
|
|
|
useEffect(() => {
|
|
const element = buttonRef.current;
|
|
if (!element) return;
|
|
|
|
const handlePress = () => onPress?.();
|
|
const handleRelease = () => onRelease?.();
|
|
|
|
element.addEventListener('button-press', handlePress);
|
|
element.addEventListener('button-release', handleRelease);
|
|
|
|
return () => {
|
|
element.removeEventListener('button-press', handlePress);
|
|
element.removeEventListener('button-release', handleRelease);
|
|
};
|
|
}, [onPress, onRelease]);
|
|
|
|
return (
|
|
<wokwi-pushbutton
|
|
id={id}
|
|
ref={buttonRef}
|
|
style={{
|
|
position: 'absolute',
|
|
left: `${x}px`,
|
|
top: `${y}px`,
|
|
}}
|
|
/>
|
|
);
|
|
};
|