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:
@@ -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()}
|
||||
|
||||
Reference in New Issue
Block a user