fix(refboard): dot grid above canvas with stronger visibility

Grid must overlay the opaque PixiJS canvas (zIndex 1, pointerEvents none).
Bumped dot radius and alpha for better visibility while staying decorative.
This commit is contained in:
Hiren Kangad
2026-03-10 04:08:08 +05:30
parent 2405f89462
commit 7da41e4bd0
+13 -11
View File
@@ -467,7 +467,15 @@ export default function Editor({ isPublicView }: EditorProps) {
{/* Canvas */} {/* Canvas */}
<div style={{ flex: 1, position: 'relative', overflow: 'hidden' }} onContextMenu={handleContextMenu}> <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }} onContextMenu={handleContextMenu}>
{/* Dot grid — behind everything */} <PixiCanvas
ref={canvasRef}
canvasState={canvasState}
currentTool={activeTool}
boardId={resolvedBoardId}
onChange={onCanvasChange}
/>
{/* Dot grid — above canvas, below UI, no pointer events */}
{showGrid && (() => { {showGrid && (() => {
const scale = canvasTransform[0] || 1; const scale = canvasTransform[0] || 1;
const tx = canvasTransform[4] || 0; const tx = canvasTransform[4] || 0;
@@ -476,12 +484,12 @@ export default function Editor({ isPublicView }: EditorProps) {
while (spacing * scale < 12) spacing *= 2; while (spacing * scale < 12) spacing *= 2;
while (spacing * scale > 50) spacing /= 2; while (spacing * scale > 50) spacing /= 2;
const screenSpacing = spacing * scale; const screenSpacing = spacing * scale;
const dotR = Math.max(0.5, Math.min(1.2, scale * 0.6)); const dotR = Math.max(0.5, Math.min(1.5, scale * 0.8));
const ox = tx % screenSpacing; const ox = tx % screenSpacing;
const oy = ty % screenSpacing; const oy = ty % screenSpacing;
const alpha = Math.max(0.08, Math.min(0.25, scale * 0.12)); const alpha = Math.max(0.12, Math.min(0.35, scale * 0.18));
return ( return (
<svg style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 0 }} width="100%" height="100%"> <svg style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 1 }} width="100%" height="100%">
<defs> <defs>
<pattern id="dotgrid" width={screenSpacing} height={screenSpacing} patternUnits="userSpaceOnUse" x={ox} y={oy}> <pattern id="dotgrid" width={screenSpacing} height={screenSpacing} patternUnits="userSpaceOnUse" x={ox} y={oy}>
<circle cx={dotR} cy={dotR} r={dotR} fill={`rgba(255,255,255,${alpha})`} /> <circle cx={dotR} cy={dotR} r={dotR} fill={`rgba(255,255,255,${alpha})`} />
@@ -491,13 +499,7 @@ export default function Editor({ isPublicView }: EditorProps) {
</svg> </svg>
); );
})()} })()}
<PixiCanvas
ref={canvasRef}
canvasState={canvasState}
currentTool={activeTool}
boardId={resolvedBoardId}
onChange={onCanvasChange}
/>
<UserCursors <UserCursors
socket={getSocket()} socket={getSocket()}
boardId={resolvedBoardId || ''} boardId={resolvedBoardId || ''}