Subdivsable grid

[Pkerpo]

What would be a good way to add a grid?

Grid options

• snap to grid
• custom subdivisions
• scales with zoom

[Pkerpo]

One way to handle the grid would be to define it's parameters in SimuloClientController. Then in SimuloViewer draw the grid using this.ctx.stroke();.

To minimise draw functions only draw the grid once and update only when the user zoom, pans or changes screen size.

[amytimed]

the usual way to draw lines is to append rectangle shapes to viewer shapes in client controller

[Pkerpo]

So basically i should draw the grid without modifying SimuloViewer?
But won't i then add id's and other properties to the gridlines themself when i push them as rectangles?

Would it not be better to have a dedicated fast drawGrid() function in SimuloViewer.

Just a quick example this wont work.:

drawGrid(gridSize: number) {
   
     // Calculate the visible screen bounds in world space
     const topLeft = this.inverseTransformPoint(0, 0);
     const bottomRight = this.inverseTransformPoint(this.canvas.width, this.canvas.height);
   
     // Calculate the visible screen bounds in grid space
     const startX = Math.floor(topLeft.x / gridSize) * gridSize;
     const startY = Math.floor(topLeft.y / gridSize) * gridSize;
     const endX = Math.ceil(bottomRight.x / gridSize) * gridSize;
     const endY = Math.ceil(bottomRight.y / gridSize) * gridSize;
   
     this.ctx.strokeStyle = "#000000";
     this.ctx.lineWidth = 1;
     this.ctx.beginPath();
   
     // Draw vertical grid lines in visible screen space
     for (let x = startX; x <= endX; x += gridSize) {
       const screenX = this.transformPoint(x, 0).x;
       this.ctx.moveTo(screenX, 0);
       this.ctx.lineTo(screenX, this.canvas.height);
     }
   
     // Draw horizontal grid lines in visible screen space
     for (let y = startY; y <= endY; y += gridSize) {
       const screenY = this.transformPoint(0, y).y;
       this.ctx.moveTo(0, screenY);
       this.ctx.lineTo(this.canvas.width, screenY);
     }
   
     this.ctx.stroke();
   }

Then only call this once on startup and from then on only call it using EventListener, when the camera moves or screen is resized.

Please correct me if i'm wrong on this.