Improve grid

2025-11-28 18:09:34 -04:00
parent 3af9cb8543
commit 751e87a9e8
1 changed files with 45 additions and 2 deletions
@@ -45,6 +45,48 @@ export function ExploreMapCanvas() {
          panY: ref.state.positionY,
        })
      );
+
+      // Update grid scale dynamically to maintain visibility at different zoom levels
+      if (canvasRef.current) {
+        const scale = ref.state.scale;
+        // Adjust grid size and line width based on zoom level to maintain visibility
+        // Formula: we want the rendered line to be at least 1px on screen
+        // So if scale = 0.17, and we want 1px visible, we need lineWidth / scale >= 1
+        // Therefore lineWidth >= 1 / scale
+        let gridSize = 20;
+        let lineWidth = 1;
+
+        if (scale < 0.8) {
+          gridSize = 40;
+          lineWidth = 2;
+        }
+        if (scale < 0.5) {
+          gridSize = 80;
+          lineWidth = 3;
+        }
+        if (scale < 0.3) {
+          gridSize = 160;
+          lineWidth = 4;
+        }
+        if (scale < 0.2) {
+          gridSize = 200;
+          lineWidth = 6;
+        }
+        if (scale < 0.15) {
+          gridSize = 320;
+          lineWidth = 8;
+        }
+        if (scale < 0.1) {
+          gridSize = 640;
+          lineWidth = 12;
+        }
+
+        canvasRef.current.style.backgroundSize = `${gridSize}px ${gridSize}px`;
+        canvasRef.current.style.backgroundImage = `
+          linear-gradient(var(--grid-color) ${lineWidth}px, transparent ${lineWidth}px),
+          linear-gradient(90deg, var(--grid-color) ${lineWidth}px, transparent ${lineWidth}px)
+        `;
+      }
    },
    [dispatch]
  );
@@ -118,9 +160,10 @@ const getStyles = (theme: GrafanaTheme2) => {
      position: 'relative',
      width: '10000px',
      height: '10000px',
+      '--grid-color': theme.colors.border.weak,
      backgroundImage: `
-        linear-gradient(${theme.colors.border.weak} 1px, transparent 1px),
-        linear-gradient(90deg, ${theme.colors.border.weak} 1px, transparent 1px)
+        linear-gradient(var(--grid-color) 1px, transparent 1px),
+        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px)
      `,
      backgroundSize: '20px 20px',
      backgroundPosition: '-1px -1px',