106 lines
3.7 KiB
TypeScript
106 lines
3.7 KiB
TypeScript
import { useEffect, useState, type RefObject } from "react";
|
|
import type { AppStore } from "@editor/store";
|
|
import { isPanInteractionMode } from "@editor/tools";
|
|
import type { GlobalKeybindConsumer, GlobalPointerConsumer, GlobalWheelConsumer } from "@input/index";
|
|
import {
|
|
createViewportPanInputController,
|
|
handleViewportWheel,
|
|
keybindEventFromKeyboardEvent,
|
|
pointerInputEventFromPointerEvent,
|
|
wheelInputEventFromWheelEvent,
|
|
} from "@input/index";
|
|
|
|
export type CanvasInputOptions = {
|
|
globalKeybindConsumer: GlobalKeybindConsumer;
|
|
globalPointerConsumer: GlobalPointerConsumer;
|
|
globalWheelConsumer: GlobalWheelConsumer;
|
|
};
|
|
|
|
export type CanvasInputState = {
|
|
isPanning: boolean;
|
|
};
|
|
|
|
export function useCanvasInput(
|
|
canvasRef: RefObject<HTMLCanvasElement | null>,
|
|
store: AppStore,
|
|
options: CanvasInputOptions,
|
|
): CanvasInputState {
|
|
const [isPanning, setIsPanning] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
|
|
const panHandler = createViewportPanInputController({
|
|
globalKeyConsumer: options.globalKeybindConsumer,
|
|
globalPointerConsumer: options.globalPointerConsumer,
|
|
dispatch: store.dispatch,
|
|
getCurrentZoom: () => store.getState().editor.viewport.zoom,
|
|
isPanMode: () => isPanInteractionMode(store.getState().editor.tools.interactionMode),
|
|
});
|
|
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
const consumed = panHandler.keyDown(keybindEventFromKeyboardEvent(event));
|
|
if (consumed) event.preventDefault();
|
|
};
|
|
|
|
const handleKeyUp = (event: KeyboardEvent) => {
|
|
const consumed = panHandler.keyUp(keybindEventFromKeyboardEvent(event));
|
|
if (consumed) event.preventDefault();
|
|
};
|
|
|
|
const handlePointerDown = (event: PointerEvent) => {
|
|
const consumed = panHandler.pointerDown(pointerInputEventFromPointerEvent(event));
|
|
if (!consumed) return;
|
|
|
|
canvas.setPointerCapture(event.pointerId);
|
|
setIsPanning(true);
|
|
event.preventDefault();
|
|
};
|
|
|
|
const handlePointerMove = (event: PointerEvent) => {
|
|
const consumed = panHandler.pointerMove(pointerInputEventFromPointerEvent(event));
|
|
if (consumed) event.preventDefault();
|
|
};
|
|
|
|
const handlePointerUp = (event: PointerEvent) => {
|
|
const consumed = panHandler.pointerUp(pointerInputEventFromPointerEvent(event));
|
|
if (!consumed) return;
|
|
|
|
setIsPanning(false);
|
|
event.preventDefault();
|
|
};
|
|
|
|
const handleWheel = (event: WheelEvent) => {
|
|
const consumed = handleViewportWheel({
|
|
event: wheelInputEventFromWheelEvent(event),
|
|
globalConsumer: options.globalWheelConsumer,
|
|
dispatch: store.dispatch,
|
|
currentZoom: store.getState().editor.viewport.zoom,
|
|
});
|
|
|
|
if (consumed) event.preventDefault();
|
|
};
|
|
|
|
window.addEventListener("keydown", handleKeyDown);
|
|
window.addEventListener("keyup", handleKeyUp);
|
|
canvas.addEventListener("pointerdown", handlePointerDown);
|
|
canvas.addEventListener("pointermove", handlePointerMove);
|
|
canvas.addEventListener("pointerup", handlePointerUp);
|
|
canvas.addEventListener("pointercancel", handlePointerUp);
|
|
canvas.addEventListener("wheel", handleWheel, { passive: false });
|
|
|
|
return () => {
|
|
window.removeEventListener("keydown", handleKeyDown);
|
|
window.removeEventListener("keyup", handleKeyUp);
|
|
canvas.removeEventListener("pointerdown", handlePointerDown);
|
|
canvas.removeEventListener("pointermove", handlePointerMove);
|
|
canvas.removeEventListener("pointerup", handlePointerUp);
|
|
canvas.removeEventListener("pointercancel", handlePointerUp);
|
|
canvas.removeEventListener("wheel", handleWheel);
|
|
};
|
|
}, [canvasRef, options, store]);
|
|
|
|
return { isPanning };
|
|
}
|