Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | 1x 3x 1x | import React, { forwardRef } from 'react';
interface DrawCanvasProps {
width: number;
height: number;
onPointerDown?: (e: React.PointerEvent<HTMLCanvasElement>) => void;
onPointerMove?: (e: React.PointerEvent<HTMLCanvasElement>) => void;
onPointerUp?: (e: React.PointerEvent<HTMLCanvasElement>) => void;
isPanning: boolean;
'data-testid'?: string;
}
/**
* Interactive drawing surface for active tools (brush, eraser, line, shape)
*/
export const DrawCanvas = forwardRef<HTMLCanvasElement, DrawCanvasProps>(
(
{
width,
height,
onPointerDown,
onPointerMove,
onPointerUp,
isPanning,
'data-testid': testId = 'draw-canvas',
},
ref,
) => {
const cursor = isPanning ? 'grabbing' : 'crosshair';
return (
<canvas
ref={ref}
role="presentation"
width={width}
height={height}
className="absolute inset-0"
style={{
zIndex: 10,
cursor,
}}
onPointerDown={onPointerDown}
onPointerMove={onPointerMove}
onPointerUp={onPointerUp}
data-testid={testId}
/>
);
},
);
DrawCanvas.displayName = 'DrawCanvas';
|