Drawing Grid Lines Dynamically

[davidkircos]

The code that renders grid lines generates a static number of lines, many of which are not visible at any given point.

https://github.com/quadratichq/quadratic/blob/main/src/core/gridGL/graphics/drawGridLines.ts

Rendering grid lines should be dynamic based on the location of the viewport.

Ex grid lines stop being rendered at y = 500

[Light2Dark]

Hi, I tried an interesting solution for this issue. Instead of rerendering the lines, I moved the grid around!

// moves the grid around to match the viewport
export const moveGrid  = function (viewport:  Viewport, grid:  Graphics)  {
	const offsets  =  getOffsets(viewport)
	grid.transform.position.set(offsets.x,  offsets.y);
}

// Quadratic Render Loop, render when dirty.
// Remember when anything changes on the stage to either set viewport.dirty = true
// Or use a react component that is a child of viewport (React Pixi will trigger a render)

ticker.add(
	()  =>  {
		if  (viewport.dirty)  {
		    // render
		    props.app.renderer.render(props.app.stage);
		    viewport.dirty  =  false;
		    moveGrid(viewport,  grid_ui);
		}
	},
	null,
	PIXI.UPDATE_PRIORITY.LOW  // unsure why but this is recommended to be LOW https://pixijs.download/dev/docs/PIXI.html#UPDATE_PRIORITY
);

I am not sure if there is a performance hit because its moving the grid around everytime the viewport changes but it seems to work. Let me know if I should do a pull request if you'd like to check the code.

[davidkircos]

Hey @Light2Dark , it would be great to try out your solution. Could you please create a PR?