fix(refboard): dot grid behind canvas, paste at native size

- Make PixiJS canvas background transparent so SVG dot grid shows through
- Move dot grid SVG before canvas in DOM with zIndex 0 (behind images)
- Set wrapper div background to #1e1e1e
- Remove 600px cap on pasted images — preserve native dimensions
This commit is contained in:
Hiren Kangad
2026-03-10 10:40:27 +05:30
parent 2b708f50c6
commit a2eea8f22f
3 changed files with 15 additions and 19 deletions
+11 -11
View File
@@ -468,16 +468,8 @@ export default function Editor({ isPublicView }: EditorProps) {
/>}
{/* Canvas */}
<div style={{ flex: 1, position: 'relative', overflow: 'hidden' }} onContextMenu={handleContextMenu}>
<PixiCanvas
ref={canvasRef}
canvasState={canvasState}
currentTool={activeTool}
boardId={resolvedBoardId}
onChange={onCanvasChange}
/>
{/* Dot grid — above canvas, below UI, no pointer events */}
<div style={{ flex: 1, position: 'relative', overflow: 'hidden', background: '#1e1e1e' }} onContextMenu={handleContextMenu}>
{/* Dot grid — behind transparent canvas */}
{showGrid && (() => {
const scale = canvasTransform[0] || 1;
const tx = canvasTransform[4] || 0;
@@ -491,7 +483,7 @@ export default function Editor({ isPublicView }: EditorProps) {
const oy = ty % screenSpacing;
const alpha = Math.max(0.12, Math.min(0.35, scale * 0.18));
return (
<svg style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 1 }} width="100%" height="100%">
<svg style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 0 }} width="100%" height="100%">
<defs>
<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})`} />
@@ -501,6 +493,14 @@ export default function Editor({ isPublicView }: EditorProps) {
</svg>
);
})()}
<PixiCanvas
ref={canvasRef}
canvasState={canvasState}
currentTool={activeTool}
boardId={resolvedBoardId}
onChange={onCanvasChange}
/>
<UserCursors
socket={getSocket()}