63 lines
2.0 KiB
TypeScript
63 lines
2.0 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>;
|
|
width: number;
|
|
height: number;
|
|
};
|
|
|
|
function Canvas({ editor, canvasRef, width, height }: Props): ReactElement {
|
|
useEffect(() => {
|
|
if (!canvasRef.current) return;
|
|
|
|
editor.render(canvasRef.current);
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<div className="Canvas">
|
|
<canvas
|
|
ref={canvasRef}
|
|
width={width}
|
|
height={height}
|
|
style={{ width, height, backgroundColor: "black" }}
|
|
tabIndex={0}
|
|
onMouseDown={(ev) => {
|
|
const pos = v2(ev.nativeEvent.offsetX, ev.nativeEvent.offsetY);
|
|
editor.events.send({ tag: "MouseDown", pos });
|
|
editor.renderIfNeeded(ev.target as HTMLCanvasElement);
|
|
}}
|
|
onMouseUp={(ev) => {
|
|
const pos = v2(ev.nativeEvent.offsetX, ev.nativeEvent.offsetY);
|
|
editor.events.send({ tag: "MouseUp", pos });
|
|
editor.renderIfNeeded(ev.target as HTMLCanvasElement);
|
|
}}
|
|
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 });
|
|
editor.renderIfNeeded(ev.target as HTMLCanvasElement);
|
|
}}
|
|
onMouseLeave={(ev) => {
|
|
editor.events.send({ tag: "MouseLeave" });
|
|
editor.renderIfNeeded(ev.target as HTMLCanvasElement);
|
|
}}
|
|
onKeyDown={(ev) => {
|
|
editor.events.send({ tag: "KeyDown", key: ev.key });
|
|
editor.renderIfNeeded(ev.target as HTMLCanvasElement);
|
|
}}
|
|
onKeyUp={(ev) => {
|
|
editor.events.send({ tag: "KeyUp", key: ev.key });
|
|
editor.renderIfNeeded(ev.target as HTMLCanvasElement);
|
|
}}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Canvas;
|