Hermes/refboard-ayon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix(refboard): render dot grid behind canvas, not on top

Browse Source 
Moved grid SVG before PixiCanvas in DOM order and set zIndex: 0
so it renders behind all canvas content.
This commit is contained in:
Hiren Kangad
2026-03-10 04:03:38 +05:30
parent a46eb47323
commit 2405f89462
1 changed files with 24 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Editor.tsx
+24 -27
View File
@@ -467,6 +467,30 @@ export default function Editor({ isPublicView }: EditorProps) {
{/* Canvas */}
<div style={{ flex: 1, position: 'relative', overflow: 'hidden' }} onContextMenu={handleContextMenu}>
{/* Dot grid — behind everything */}
{showGrid && (() => {
const scale = canvasTransform[0] || 1;
const tx = canvasTransform[4] || 0;
const ty = canvasTransform[5] || 0;
let spacing = 20;
while (spacing * scale < 12) spacing *= 2;
while (spacing * scale > 50) spacing /= 2;
const screenSpacing = spacing * scale;
const dotR = Math.max(0.5, Math.min(1.2, scale * 0.6));
const ox = tx % screenSpacing;
const oy = ty % screenSpacing;
const alpha = Math.max(0.08, Math.min(0.25, scale * 0.12));
return (
<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})`} />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#dotgrid)" />
</svg>
);
})()}
<PixiCanvas
ref={canvasRef}
canvasState={canvasState}
@@ -480,33 +504,6 @@ export default function Editor({ isPublicView }: EditorProps) {
canvasTransform={canvasTransform}
/>
{/* Dot grid overlay — adapts spacing at zoom levels like Figma */}
{showGrid && (() => {
const scale = canvasTransform[0] || 1;
const tx = canvasTransform[4] || 0;
const ty = canvasTransform[5] || 0;
// Adaptive spacing: base 20px, doubles when dots get too dense, halves when too sparse
let spacing = 20;
while (spacing * scale < 12) spacing *= 2;
while (spacing * scale > 50) spacing /= 2;
const screenSpacing = spacing * scale;
const dotR = Math.max(0.5, Math.min(1.2, scale * 0.6));
const ox = tx % screenSpacing;
const oy = ty % screenSpacing;
// Subtle dot: brighter at high zoom, dimmer at low zoom
const alpha = Math.max(0.08, Math.min(0.25, scale * 0.12));
return (
<svg style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 1 }} 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})`} />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#dotgrid)" />
</svg>
);
})()}
{/* Empty canvas guide */}
{objectCount === 0 && (
<div style={{