42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { loadImageData } from "@common/display/canvas";
|
|
import type { HTMLAttributes } from "preact/compat";
|
|
import { useEffect, useMemo, useRef } from "preact/hooks";
|
|
|
|
interface Props extends HTMLAttributes<HTMLCanvasElement> {
|
|
dataView: DataView;
|
|
pointer: number;
|
|
}
|
|
|
|
export const PointerCanvas = ({ dataView, pointer, ...otherProps }: Props) => {
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
const ctx = useMemo(() => canvasRef.current?.getContext('2d'), [canvasRef.current]);
|
|
|
|
const imageData = useMemo(() => loadImageData(dataView, pointer), [dataView, pointer]);
|
|
|
|
useEffect(() => {
|
|
if (canvasRef.current) {
|
|
canvasRef.current.width = imageData.width;
|
|
canvasRef.current.height = imageData.height;
|
|
}
|
|
}, [imageData, canvasRef.current]);
|
|
|
|
useEffect(() => {
|
|
let raf: number;
|
|
const frame = () => {
|
|
if (ctx) {
|
|
ctx.putImageData(imageData, 0, 0);
|
|
}
|
|
raf = requestAnimationFrame(frame);
|
|
}
|
|
raf = requestAnimationFrame(frame);
|
|
|
|
return () => {
|
|
cancelAnimationFrame(raf);
|
|
};
|
|
}, [ctx, imageData]);
|
|
|
|
return <>
|
|
<canvas ref={canvasRef} {...otherProps} />
|
|
</>;
|
|
};
|