fix alignment for dot grid background + add clipping post canvas paint

lib/core/background.dart

@@ -9,25 +9,28 @@ abstract class CanvasBackground {
 
   /// draw the backround on this context. Implement this to have
   /// different kinds of backgrounds
-  void paint(Canvas canvas, Offset offset, double scale, Size canvasSize);
+  /// [screenOffset] is the screen space offset for clipping
+  /// [canvasOffset] is the grid space offset from the controller
+  void paint(Canvas canvas, Offset screenOffset, Offset canvasOffset, double scale, Size canvasSize);
 }
 
 class NoBackground extends CanvasBackground {
   const NoBackground();
 
   @override
-  void paint(Canvas canvas, Offset offset, double scale, Size canvasSize) {}
+  void paint(Canvas canvas, Offset screenOffset, Offset canvasOffset, double scale, Size canvasSize) {}
 }
 
 class SingleColorBackround extends CanvasBackground {
   const SingleColorBackround(Color backgroundColor) : super(bgColor: backgroundColor);
 
   @override
-  void paint(Canvas canvas, Offset offset, double scale, Size canvasSize) {
+  void paint(Canvas canvas, Offset screenOffset, Offset canvasOffset, double scale, Size canvasSize) {
     final paint = Paint()
       ..color = bgColor
       ..style = PaintingStyle.fill;
-    canvas.drawRect(Rect.fromLTWH(0, 0, canvasSize.width, canvasSize.height), paint);
+
+    canvas.drawRect(Rect.fromLTWH(screenOffset.dx, screenOffset.dy, canvasSize.width, canvasSize.height), paint);
   }
 }
 
@@ -39,18 +42,33 @@ class DotGridBackround extends CanvasBackground {
   const DotGridBackround({this.size = 2.0, this.spacing = 50.0, this.color = Colors.black12}) : super();
 
   @override
-  void paint(Canvas canvas, Offset offset, double scale, Size canvasSize) {
+  void paint(Canvas canvas, Offset screenOffset, Offset canvasOffset, double scale, Size canvasSize) {
     final paint = Paint()
       ..color = color
       ..strokeWidth = 1.0 * scale;
     double scaledSpacing = spacing * scale;
     double scaledSize = size * scale;
 
-    double startX = (offset.dx % scaledSpacing) - scaledSpacing;
-    double startY = (offset.dy % scaledSpacing) - scaledSpacing;
+    // Use canvasOffset to determine the grid position in grid space
+    // Calculate the grid origin in canvas space (0,0 should be at a grid point)
+    // Find the first grid point that aligns with the coordinate system
+    double firstGridX = (canvasOffset.dx / spacing).floor() * spacing;
+    double firstGridY = (canvasOffset.dy / spacing).floor() * spacing;
 
-    for (double x = startX; x < canvasSize.width + scaledSpacing; x += scaledSpacing) {
-      for (double y = startY; y < canvasSize.height + scaledSpacing; y += scaledSpacing) {
+    // Convert grid space coordinates to screen space
+    double screenStartX = (firstGridX - canvasOffset.dx) * scale + screenOffset.dx;
+    double screenStartY = (firstGridY - canvasOffset.dy) * scale + screenOffset.dy;
+
+    // Ensure we start drawing before the visible area to avoid gaps
+    while (screenStartX > screenOffset.dx) {
+      screenStartX -= scaledSpacing;
+    }
+    while (screenStartY > screenOffset.dy) {
+      screenStartY -= scaledSpacing;
+    }
+
+    for (double x = screenStartX; x < screenOffset.dx + canvasSize.width + scaledSpacing; x += scaledSpacing) {
+      for (double y = screenStartY; y < screenOffset.dy + canvasSize.height + scaledSpacing; y += scaledSpacing) {
         canvas.drawCircle(Offset(x, y), scaledSize, paint);
       }
     }

lib/core/controller/controller.dart

@@ -24,6 +24,7 @@ class LazyCanvasController with ChangeNotifier {
   final Offset? _buildCacheExtent;
   late Offset _buildExtent;
   final Size _hashCellSize;
+  bool _adhocRender = false;
   bool _init = false;
   late final SpatialHashing<int> _spatialHash;
   List<ChildInfo> _renderedChildrenCache = [];
@@ -46,7 +47,8 @@ class LazyCanvasController with ChangeNotifier {
   Size get canvasSize => _canvasSize;
   Offset get _ssCenter => Offset(_canvasSize.width / 2, _canvasSize.height / 2);
   Offset get _gsCenter => ssToGs(_ssCenter, _gsTopLeftOffset, _scale);
-  bool get _cleanRenderState => _init && _lastProcessedOffset == _gsTopLeftOffset && _lastProcessedScale == _scale;
+  bool get _cleanRenderState =>
+      _init && _lastProcessedOffset == _gsTopLeftOffset && _lastProcessedScale == _scale && !_adhocRender;
 
   // ==================== Callback Functions ====================
 
@@ -124,6 +126,7 @@ class LazyCanvasController with ChangeNotifier {
       // Create a new _ChildInfo with the new widget
       _children[id] = _ChildInfo(gsPosition: child.gsPosition, widget: newWidget)
         ..lastRenderedSize = child.lastRenderedSize;
+      _adhocRender = true; // so that even if the position is same, it will be re-rendered
       notifyListeners();
     } else {
       throw _ChildNotFoundException;
@@ -190,6 +193,7 @@ class LazyCanvasController with ChangeNotifier {
 
     _lastProcessedOffset = _gsTopLeftOffset;
     _lastProcessedScale = _scale;
+    _adhocRender = false;
 
     final idsToBuild = _childrenWithinBuildArea(_gsCenter, _buildExtent);
 

lib/core/render.dart

@@ -49,6 +49,7 @@ class _LazyCanvasState extends State<LazyCanvas> with TickerProviderStateMixin<L
             canvasBackground: widget.canvasBackground,
             ssPositions: ssPositions,
             scale: widget.controller.scale,
+            gridSpaceOffset: widget.controller.offset,
             onCanvasSizeChange: widget.controller.onCanvasSizeChange,
             onChildSizeChange: widget.controller.onChildSizeChange,
             children: children,
@@ -83,6 +84,7 @@ class _CanvasRenderObject extends MultiChildRenderObjectWidget {
   final List<int> childrenIds;
   final List<Offset> ssPositions;
   final double scale;
+  final Offset gridSpaceOffset;
   final CanvasBackground canvasBackground;
   final Function onCanvasSizeChange;
   final Function onChildSizeChange;
@@ -91,6 +93,7 @@ class _CanvasRenderObject extends MultiChildRenderObjectWidget {
     required this.childrenIds,
     required this.ssPositions,
     required this.scale,
+    required this.gridSpaceOffset,
     required this.canvasBackground,
     required this.onCanvasSizeChange,
     required this.onChildSizeChange,
@@ -104,6 +107,7 @@ class _CanvasRenderObject extends MultiChildRenderObjectWidget {
       childrenIds: childrenIds,
       ssPositions: ssPositions,
       scale: scale,
+      gridSpaceOffset: gridSpaceOffset,
       canvasBackground: canvasBackground,
       onCanvasSizeChange: onCanvasSizeChange,
       onChildSizeChange: onChildSizeChange,
@@ -116,6 +120,7 @@ class _CanvasRenderObject extends MultiChildRenderObjectWidget {
       ..childrenIds = childrenIds
       ..ssPositions = ssPositions
       ..canvasBackground = canvasBackground
+      ..gridSpaceOffset = gridSpaceOffset
       ..scale = scale;
   }
 }
@@ -133,6 +138,7 @@ class _CanvasRenderBox extends RenderBox
   CanvasBackground _canvasBackground;
   List<int> _childrenIds;
   List<Offset> _ssPositions;
+  Offset _gridSpaceOffset;
   double _scale;
   Function onCanvasSizeChange;
   Function onChildSizeChange;
@@ -141,6 +147,7 @@ class _CanvasRenderBox extends RenderBox
     required childrenIds,
     required ssPositions,
     required scale,
+    required gridSpaceOffset,
     required canvasBackground,
     required this.onCanvasSizeChange,
     required this.onChildSizeChange,
@@ -148,6 +155,7 @@ class _CanvasRenderBox extends RenderBox
        _childrenIds = childrenIds,
        _ssPositions = ssPositions,
        _scale = scale,
+       _gridSpaceOffset = gridSpaceOffset,
        _canvasBackground = canvasBackground;
 
   @override
@@ -180,6 +188,13 @@ class _CanvasRenderBox extends RenderBox
     }
   }
 
+  set gridSpaceOffset(Offset gridSpaceOffset) {
+    if (_gridSpaceOffset != gridSpaceOffset) {
+      _gridSpaceOffset = gridSpaceOffset;
+      markNeedsPaint();
+    }
+  }
+
   set canvasBackground(CanvasBackground canvasBackground) {
     if (_canvasBackground != canvasBackground) {
       _canvasBackground = canvasBackground;
@@ -215,8 +230,13 @@ class _CanvasRenderBox extends RenderBox
   @override
   void paint(PaintingContext context, Offset canvasStartOffset) {
     assert(childCount == _ssPositions.length);
+
+    // Clip to bounds before any painting, due to extent cache you may get the point ouside bounds
+    context.canvas.save();
+    context.canvas.clipRect(canvasStartOffset & size);
+
     // use the canvas background painter, pass it the canvas and that should handle drawing the background
-    _canvasBackground.paint(context.canvas, canvasStartOffset, _scale, size);
+    _canvasBackground.paint(context.canvas, canvasStartOffset, _gridSpaceOffset, _scale, size);
 
     // though using ssPositionns here directly worked for me but docs using the parentData
     // to get this info is the convention as child can be reordered ( though this will always
@@ -231,11 +251,13 @@ class _CanvasRenderBox extends RenderBox
       final drawAt = canvasStartOffset + childParentData.offset;
       context.canvas.translate(drawAt.dx, drawAt.dy);
       context.canvas.scale(childParentData.scale, childParentData.scale);
-      context.paintChild(child, Offset.zero); // pain at 0 as already translated
+      context.paintChild(child, Offset.zero); // paint at 0 as already translated
 
       context.canvas.restore();
       child = childParentData.nextSibling;
     }
+
+    context.canvas.restore(); // clip restore
   }
 
   @override