4ad0bb8b2c
- Refactor LayersSheet component to support mask editing state and improve layer visibility handling. - Introduce functions to collect mask layer IDs and count display layers excluding masks. - Update BrushControls to include mask view mode options and a Done button for exiting mask editing. - Modify brush session handling to support brush previews when editing masks. - Implement a new BrushPreviewRenderer for rendering brush strokes with visual feedback. - Add document geometry utilities for transforming points and resolving layer bounds. - Ensure proper cleanup of brush preview on pointer leave and other interactions.
43 lines
1.8 KiB
TypeScript
43 lines
1.8 KiB
TypeScript
import { useMemo, useRef } from "react";
|
|
import type { AppStore } from "@editor/store";
|
|
import type { GlobalKeybindConsumer, GlobalPointerConsumer, GlobalWheelConsumer } from "@input/index";
|
|
import { canPreviewBrush } from "./canvas/brush";
|
|
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 hasBrushPreview = Boolean(state.editor.brushPreview && canPreviewBrush(state.document, state.editor));
|
|
const cursorClass = canvasCursorClass(state.editor.tools.interactionMode, input, hasBrushPreview);
|
|
|
|
return <canvas ref={canvasRef} className={`h-full w-full ${cursorClass}`} />;
|
|
}
|