From a2eea8f22fff270d3d050a3b982a606b34fe46ca Mon Sep 17 00:00:00 2001
From: Hiren Kangad <hir.012612@gmail.com>
Date: Tue, 10 Mar 2026 10:40:27 +0530
Subject: [PATCH] fix(refboard): dot grid behind canvas, paste at native size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 frontend/src/canvas/PixiCanvas.tsx |  2 +-
 frontend/src/canvas/clipboard.ts   | 10 +++-------
 frontend/src/pages/Editor.tsx      | 22 +++++++++++-----------
 3 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/frontend/src/canvas/PixiCanvas.tsx b/frontend/src/canvas/PixiCanvas.tsx
index 28e82c2..2f44d97 100644
--- a/frontend/src/canvas/PixiCanvas.tsx
+++ b/frontend/src/canvas/PixiCanvas.tsx
@@ -119,7 +119,7 @@ const PixiCanvas = forwardRef<PixiCanvasHandle, PixiCanvasProps>(
 
       (async () => {
         await app.init({
-          background: '#1e1e1e',
+          backgroundAlpha: 0,
           resizeTo: container,
           antialias: true,
           autoDensity: true,
diff --git a/frontend/src/canvas/clipboard.ts b/frontend/src/canvas/clipboard.ts
index b2604c5..a1a705a 100644
--- a/frontend/src/canvas/clipboard.ts
+++ b/frontend/src/canvas/clipboard.ts
@@ -169,13 +169,9 @@ export async function pasteFromSystemClipboard(
       const assetKey = imgData.asset_key;
       const w = imgData.width || 400;
       const h = imgData.height || 300;
-      const maxDim = 600;
-      let fw = w, fh = h;
-      if (w > maxDim || h > maxDim) {
-        const s = maxDim / Math.max(w, h);
-        fw = Math.round(w * s);
-        fh = Math.round(h * s);
-      }
+      // Display at native size — let user resize manually if needed
+      const fw = w;
+      const fh = h;
       if (assetKey) {
         const center = viewport.center;
         scene.addImageFromUpload(assetKey, fw, fh, center.x - fw / 2, center.y - fh / 2);
diff --git a/frontend/src/pages/Editor.tsx b/frontend/src/pages/Editor.tsx
index 9fa4eaa..e4601a4 100644
--- a/frontend/src/pages/Editor.tsx
+++ b/frontend/src/pages/Editor.tsx
@@ -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()}