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),
+      ),
+    );
   }
 }

example/test/widget_test.dart

@@ -1,30 +0,0 @@
-// This is a basic Flutter widget test.
-//
-// To perform an interaction with a widget in your test, use the WidgetTester
-// utility in the flutter_test package. For example, you can send tap and scroll
-// gestures. You can also use WidgetTester to find child widgets in the widget
-// tree, read text, and verify that the values of widget properties are correct.
-
-import 'package:flutter/material.dart';
-import 'package:flutter_test/flutter_test.dart';
-
-import 'package:example/main.dart';
-
-void main() {
-  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
-    // Build our app and trigger a frame.
-    await tester.pumpWidget(const MyApp());
-
-    // Verify that our counter starts at 0.
-    expect(find.text('0'), findsOneWidget);
-    expect(find.text('1'), findsNothing);
-
-    // Tap the '+' icon and trigger a frame.
-    await tester.tap(find.byIcon(Icons.add));
-    await tester.pump();
-
-    // Verify that our counter has incremented.
-    expect(find.text('0'), findsNothing);
-    expect(find.text('1'), findsOneWidget);
-  });
-}