41 lines
1.6 KiB
TypeScript
41 lines
1.6 KiB
TypeScript
import { useMemo, useRef } from "react";
|
|
import type { AppStore } from "@editor/store";
|
|
import type { GlobalKeybindConsumer, GlobalPointerConsumer, GlobalWheelConsumer } from "@input/index";
|
|
import { canvasCursorClass } from "./canvas/cursor";
|
|
import { useCanvasInput } from "./canvas/useCanvasInput";
|
|
import { useCanvasRenderer } from "./canvas/useCanvasRenderer";
|
|
import { useCanvasResize } from "./canvas/useCanvasResize";
|
|
import { useAppState } from "./useAppState";
|
|
|
|
const ignoreGlobalKeybind: GlobalKeybindConsumer = () => false;
|
|
const ignoreGlobalPointer: GlobalPointerConsumer = () => false;
|
|
const ignoreGlobalWheel: GlobalWheelConsumer = () => false;
|
|
|
|
export type CanvasViewportProps = {
|
|
store: AppStore;
|
|
globalKeybindConsumer?: GlobalKeybindConsumer;
|
|
globalPointerConsumer?: GlobalPointerConsumer;
|
|
globalWheelConsumer?: GlobalWheelConsumer;
|
|
};
|
|
|
|
export function CanvasViewport({
|
|
store,
|
|
globalKeybindConsumer = ignoreGlobalKeybind,
|
|
globalPointerConsumer = ignoreGlobalPointer,
|
|
globalWheelConsumer = ignoreGlobalWheel,
|
|
}: CanvasViewportProps) {
|
|
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
|
const state = useAppState(store);
|
|
const inputOptions = useMemo(
|
|
() => ({ globalKeybindConsumer, globalPointerConsumer, globalWheelConsumer }),
|
|
[globalKeybindConsumer, globalPointerConsumer, globalWheelConsumer],
|
|
);
|
|
|
|
useCanvasRenderer(canvasRef, store);
|
|
useCanvasResize(canvasRef, store.dispatch);
|
|
const input = useCanvasInput(canvasRef, store, inputOptions);
|
|
const cursorClass = canvasCursorClass(state.editor.tools.interactionMode, input);
|
|
|
|
return <canvas ref={canvasRef} className={`h-full w-full ${cursorClass}`} />;
|
|
}
|