canvas with panning

example/lib/app.dart

@@ -9,8 +9,60 @@ class App extends StatefulWidget {
 }
 
 class _AppState extends State<App> {
+  Offset _dragStartFocalPoint = Offset.zero;
+  Offset _lastFocalPoint = Offset.zero;
+  Offset _offset = Offset.zero;
+  double _scale = 1.0;
+
   @override
   Widget build(BuildContext context) {
-    return Scaffold(body: InfiniteLazy2dGrid());
+    return Scaffold(
+      body: CanvasView(
+        children: [
+          Container(width: 100, height: 100, color: Colors.red),
+          Container(width: 100, height: 100, color: Colors.green),
+          Container(width: 100, height: 100, color: Colors.blue),
+        ],
+        positions: [
+          Offset(0, 0), // Position for red container
+          Offset(200, 0), // Position for green container
+          Offset(400, 0), // Position for blue container
+        ],
+        offset: _offset,
+        scale: _scale,
+        handleScaleUpdate: (details) {
+          // double dampeningFactor = 0.1;
+          // double scaleDelta = (details.scale - 1) * dampeningFactor;
+          // double newScale = _scale * (1 + scaleDelta);
+          // newScale = newScale.clamp(0.4, 4.0);
+
+          // focal point in the coordinate system of the grid
+          Offset focalPoint = details.localFocalPoint;
+          Offset gridFocalPoint = (_offset + focalPoint) / _scale;
+
+          // new scale set
+          // _scale = newScale;
+
+          // adjust offset to keep the focal point stationary
+          _offset = gridFocalPoint * _scale - focalPoint;
+
+          // panning
+          if (_lastFocalPoint != null) {
+            // right is positive, down is positive
+            Offset delta = -(details.focalPoint - _lastFocalPoint!); //inverse panning (natural)
+            const sensitivity = 1.0; // Adjust sensitivity as needed
+            _offset += delta * sensitivity;
+          }
+          _lastFocalPoint = details.focalPoint;
+          setState(() {});
+        },
+        handleScaleStart: (details) {
+          _lastFocalPoint = details.localFocalPoint;
+          _dragStartFocalPoint = details.localFocalPoint;
+          setState(() {});
+        },
+        canvasBackground: const SingleColorBackround(Colors.white),
+      ),
+    );
   }
 }