72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import { useEffect, type ReactElement, type RefObject } from "react";
|
|
import { type Editor } from "./editor/Editor";
|
|
import { v2 } from "./editor/V2";
|
|
|
|
type Props = {
|
|
editor: Editor;
|
|
canvasRef: RefObject<HTMLCanvasElement | null>;
|
|
};
|
|
|
|
function Canvas({ editor, canvasRef }: Props): ReactElement {
|
|
useEffect(() => {
|
|
if (canvasRef.current) {
|
|
editor.render(canvasRef.current);
|
|
}
|
|
|
|
const unsubscribe = editor.events.subscribe(["RenderRequest"], (ev) => {
|
|
if (canvasRef.current) {
|
|
editor.render(canvasRef.current);
|
|
}
|
|
});
|
|
|
|
function onResize() {
|
|
if (canvasRef.current) {
|
|
editor.render(canvasRef.current);
|
|
}
|
|
}
|
|
|
|
window.addEventListener("resize", onResize);
|
|
|
|
return () => {
|
|
window.removeEventListener("resize", onResize);
|
|
unsubscribe();
|
|
};
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<div className="Canvas">
|
|
<canvas
|
|
ref={canvasRef}
|
|
style={{ backgroundColor: "black" }}
|
|
tabIndex={0}
|
|
onMouseDown={(ev) => {
|
|
const pos = v2(ev.nativeEvent.offsetX, ev.nativeEvent.offsetY);
|
|
editor.events.send({ tag: "MouseDown", pos });
|
|
}}
|
|
onMouseUp={(ev) => {
|
|
const pos = v2(ev.nativeEvent.offsetX, ev.nativeEvent.offsetY);
|
|
editor.events.send({ tag: "MouseUp", pos });
|
|
}}
|
|
onMouseMove={(ev) => {
|
|
const deltaPos = v2(ev.movementX, ev.movementY);
|
|
const pos = v2(ev.nativeEvent.offsetX, ev.nativeEvent.offsetY);
|
|
editor.events.send({ tag: "MouseMove", pos, deltaPos });
|
|
}}
|
|
onMouseLeave={(_ev) => {
|
|
editor.events.send({ tag: "MouseLeave" });
|
|
}}
|
|
onKeyDown={(ev) => {
|
|
editor.events.send({ tag: "KeyDown", key: ev.key });
|
|
}}
|
|
onKeyUp={(ev) => {
|
|
editor.events.send({ tag: "KeyUp", key: ev.key });
|
|
}}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Canvas;
|