image-studio/view/canvas/useCanvasInput.ts

import { useEffect, useRef, useState, type RefObject } from "react";
import { commandIds } from "@commands/ids";
import type { AppStore } from "@editor/store";
import { isPanInteractionMode } from "@editor/tools";
import type { GlobalKeybindConsumer, GlobalPointerConsumer, GlobalWheelConsumer } from "@input/index";
import {
  createTransformControlsInputController,
  createViewportPanInputController,
  handleArtboardSelection,
  handleViewportWheel,
  keybindEventFromKeyboardEvent,
  pointerInputEventFromPointerEvent,
  wheelInputEventFromWheelEvent,
} from "@input/index";
import { beginBrushSession, canPreviewBrush, cancelBrushSession, commitBrushSession, updateBrushSession, type BrushSession } from "./brush";
import { applyMagicWandAt } from "./magic-wand";

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);
  const brushSession = useRef<BrushSession | undefined>(undefined);
  const brushSessionId = useRef(0);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    let disposed = false;

    const transformHandler = createTransformControlsInputController({
      getDocument: () => store.getState().document,
      getEditor: () => store.getState().editor,
      dispatch: store.dispatch,
    });

    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 clearBrushPreview = () => {
      if (store.getState().editor.brushPreview) store.dispatch(commandIds.toolSetBrushPreview, undefined);
    };

    const updateBrushPreview = (position: { x: number; y: number }) => {
      if (!pointInsideCanvas(position, canvas)) {
        clearBrushPreview();
        return;
      }

      const state = store.getState();
      if (!canPreviewBrush(state.document, state.editor)) {
        clearBrushPreview();
        return;
      }

      store.dispatch(commandIds.toolSetBrushPreview, { position: viewportPointToDocumentPoint(position, state.editor.viewport) });
    };

    const commitActiveBrushSession = (position: { x: number; y: number }) => {
      const session = brushSession.current;
      if (!session) return;

      const sessionId = brushSessionId.current + 1;
      brushSessionId.current = sessionId;
      brushSession.current = undefined;
      void commitBrushSession({ store, session }).then(() => {
        if (!disposed && brushSessionId.current === sessionId && !brushSession.current) updateBrushPreview(position);
      });
    };

    const handleKeyDown = (event: KeyboardEvent) => {
      if (isEditableKeyboardTarget(event.target)) return;

      const consumed = panHandler.keyDown(keybindEventFromKeyboardEvent(event));
      if (consumed) {
        clearBrushPreview();
        event.preventDefault();
      }
    };

    const handleKeyUp = (event: KeyboardEvent) => {
      if (isEditableKeyboardTarget(event.target)) return;

      const consumed = panHandler.keyUp(keybindEventFromKeyboardEvent(event));
      if (consumed) event.preventDefault();
    };

    const handlePointerDown = (event: PointerEvent) => {
      const inputEvent = pointerInputEventFromPointerEvent(event);
      const transformed = transformHandler.pointerDown(inputEvent);
      if (transformed) {
        clearBrushPreview();
        canvas.setPointerCapture(event.pointerId);
        event.preventDefault();
        return;
      }

      const consumed = panHandler.pointerDown(inputEvent);
      if (consumed) {
        clearBrushPreview();
        canvas.setPointerCapture(event.pointerId);
        setIsPanning(true);
        event.preventDefault();
        return;
      }

      const state = store.getState();
      const documentPoint = viewportPointToDocumentPoint(inputEvent.position, state.editor.viewport);
      const brush = (inputEvent.buttons & 1) === 1 && !isPanInteractionMode(state.editor.tools.interactionMode)
        ? beginBrushSession(state.document, state.editor, documentPoint)
        : undefined;
      if (brush) {
        store.dispatch(commandIds.toolSetBrushPreview, { position: documentPoint });
        brushSessionId.current += 1;
        brushSession.current = brush;
        canvas.setPointerCapture(event.pointerId);
        event.preventDefault();
        return;
      }

      if (state.editor.tools.activeTool === "magicWand") {
        void applyMagicWandAt(store, documentPoint, inputEvent.shiftKey ? "add" : inputEvent.altKey ? "subtract" : undefined);
        event.preventDefault();
        return;
      }

      const currentState = store.getState();
      const selectionToolActive = currentState.editor.tools.activeTool === "select";
      const selected = selectionToolActive && handleArtboardSelection({
        event: inputEvent,
        document: currentState.document,
        viewport: currentState.editor.viewport,
        dispatch: store.dispatch,
      });
      if (selected) event.preventDefault();
    };

    const handlePointerMove = (event: PointerEvent) => {
      const inputEvent = pointerInputEventFromPointerEvent(event);
      if (brushSession.current) {
        if ((inputEvent.buttons & 1) !== 1 || isPanInteractionMode(store.getState().editor.tools.interactionMode)) {
          commitActiveBrushSession(inputEvent.position);
          event.preventDefault();
          return;
        }

        const point = viewportPointToDocumentPoint(inputEvent.position, store.getState().editor.viewport);
        store.dispatch(commandIds.toolSetBrushPreview, { position: point });
        const settings = store.getState().editor.tools.brush;
        brushSession.current = updateBrushSession({ store, session: brushSession.current, point, color: settings.color, size: settings.size, hardness: settings.hardness });
        event.preventDefault();
        return;
      }

      const transformed = transformHandler.pointerMove(inputEvent);
      if (transformed) {
        clearBrushPreview();
        event.preventDefault();
        return;
      }

      const consumed = panHandler.pointerMove(inputEvent);
      if (consumed) {
        clearBrushPreview();
        event.preventDefault();
        return;
      }

      updateBrushPreview(inputEvent.position);
    };

    const handlePointerUp = (event: PointerEvent) => {
      const inputEvent = pointerInputEventFromPointerEvent(event);
      if (brushSession.current) {
        commitActiveBrushSession(inputEvent.position);
        event.preventDefault();
        return;
      }

      const transformed = transformHandler.pointerUp(inputEvent);
      if (transformed) {
        clearBrushPreview();
        event.preventDefault();
        return;
      }

      const consumed = panHandler.pointerUp(inputEvent);
      if (!consumed) return;

      setIsPanning(false);
      clearBrushPreview();
      event.preventDefault();
    };

    const handlePointerLeave = () => {
      if (!brushSession.current) clearBrushPreview();
    };

    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("pointerleave", handlePointerLeave);
    canvas.addEventListener("wheel", handleWheel, { passive: false });

    return () => {
      disposed = true;
      brushSessionId.current += 1;
      if (brushSession.current) {
        cancelBrushSession({ store, session: brushSession.current });
        brushSession.current = undefined;
      }
      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("pointerleave", handlePointerLeave);
      canvas.removeEventListener("wheel", handleWheel);
    };
  }, [canvasRef, options, store]);

  return { isPanning };
}

function isEditableKeyboardTarget(target: EventTarget | null) {
  return (
    target instanceof HTMLElement &&
    (target.isContentEditable || target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement)
  );
}

function pointInsideCanvas(point: { x: number; y: number }, canvas: HTMLCanvasElement) {
  return point.x >= 0 && point.y >= 0 && point.x <= canvas.width && point.y <= canvas.height;
}

function viewportPointToDocumentPoint(point: { x: number; y: number }, viewport: { center: { x: number; y: number }; size: { w: number; h: number }; zoom: number }) {
  return {
    x: viewport.center.x + (point.x - viewport.size.w / 2) / viewport.zoom,
    y: viewport.center.y + (point.y - viewport.size.h / 2) / viewport.zoom,
  };
}