feat: infinite canvas

Author: TeeWrath

lib/features/workspace/pages/canvas_page.dart

@@ -1,33 +1,77 @@
 import 'package:cookethflow/features/models/canvas_models/canvas_painter.dart';
+import 'package:cookethflow/features/workspace/providers/canvas_provider.dart';
 import 'package:cookethflow/features/workspace/providers/workspace_provider.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'package:vector_math/vector_math_64.dart'; // Required for Vector3.
 
 class CanvasPage extends StatelessWidget {
   const CanvasPage({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return Consumer<WorkspaceProvider>(
-      builder: (context, provider, child) {
+    return Consumer2<WorkspaceProvider, CanvasProvider>(
+      builder: (context, workspaceProvider, canvasProvider, child) {
         return Scaffold(
-          backgroundColor: provider.currentWorkspaceColor,
+          backgroundColor: workspaceProvider.currentWorkspaceColor,
           body: MouseRegion(
             onHover: (event) {
-              provider.syncCanvasObject(event.position);
+              // Mouse hover position is directly event.localPosition relative to MouseRegion.
+              // InteractiveViewer's transform is applied implicitly by its child's position.
+              // We need to apply the inverse of the current transformation to get canvas coordinates.
+              final Matrix4 transform = canvasProvider.transformationController.value;
+              final Matrix4? inverseTransform = Matrix4.tryInvert(transform);
+
+              if (inverseTransform == null) {
+                // This case should be rare for valid transforms.
+                return;
+              }
+
+              // Transform the local position (relative to InteractiveViewer's viewport)
+              // to canvas coordinates.
+              final Vector3 transformed = inverseTransform.transform3(Vector3(event.localPosition.dx, event.localPosition.dy, 0));
+              final Offset canvasCoordinates = Offset(transformed.x, transformed.y);
+
+              workspaceProvider.syncCanvasObject(canvasCoordinates);
             },
-            child: GestureDetector(
-              onPanDown: provider.onPanDown,
-              onPanUpdate: provider.onPanUpdate,
-              onPanEnd: provider.onPanEnd,
-              child: CustomPaint(
-                size: MediaQuery.of(context).size,
-                painter: CanvasPainter(
-                  userCursors: provider.userCursors,
-                  canvasObjects: provider.canvasObjects,
-                  currentlySelectedObjectId:
-                      provider.currentlySelectedObjectId,
-                  handleRadius: provider.handleRadius,
+            child: InteractiveViewer(
+              transformationController: canvasProvider.transformationController,
+              minScale: 0.1, // Minimum zoom level
+              maxScale: 4.0, // Maximum zoom level
+              boundaryMargin: const EdgeInsets.all(double.infinity), // Allows "infinite" panning
+              constrained: false, // Important: allows content to go beyond initial bounds
+              // InteractiveViewer automatically handles mouse drag for pan and scroll wheel for zoom.
+              // We do NOT put onPanDown, onPanUpdate directly on InteractiveViewer as it will conflict
+              // with the child GestureDetector for object manipulation.
+              // We let InteractiveViewer manage its own pan/zoom gestures.
+              // The GestureDetector below will handle *object* interactions.
+              child: GestureDetector(
+                // Use onTapDown for adding new nodes when not in pointer mode,
+                // and for initiating object selection/move/resize.
+                onPanDown: (details) {
+                  // details.localPosition is already relative to the GestureDetector's parent (InteractiveViewer's child).
+                  // This means it's already in the canvas coordinate system!
+                  workspaceProvider.onPanDown(DragDownDetails(globalPosition: details.localPosition));
+                },
+                onPanUpdate: (details) {
+                  // details.localPosition and details.delta are already in canvas coordinates.
+                  workspaceProvider.onPanUpdate(DragUpdateDetails(
+                    globalPosition: details.localPosition,
+                    delta: details.delta,
+                  ));
+                },
+                onPanEnd: workspaceProvider.onPanEnd,
+                child: CustomPaint(
+                  // Set a large, arbitrary size for the CustomPaint.
+                  // The actual drawing will occur based on the canvas coordinates of your objects.
+                  // InteractiveViewer will handle the viewport.
+                  size: const Size(20000, 20000), // Sufficiently large "infinite" canvas
+                  painter: CanvasPainter(
+                    userCursors: workspaceProvider.userCursors,
+                    canvasObjects: workspaceProvider.canvasObjects,
+                    currentlySelectedObjectId: workspaceProvider.currentlySelectedObjectId,
+                    handleRadius: workspaceProvider.handleRadius,
+                  ),
                 ),
               ),
             ),
@@ -36,4 +80,4 @@ class CanvasPage extends StatelessWidget {
       },
     );
   }
-}
+}

lib/features/workspace/providers/canvas_provider.dart

@@ -0,0 +1,44 @@
+import 'package:cookethflow/core/utils/state_handler.dart';
+import 'package:cookethflow/features/workspace/providers/workspace_provider.dart';
+import 'package:flutter/widgets.dart'; // Import for TransformationController
+
+class CanvasProvider extends StateHandler {
+  final WorkspaceProvider _workspaceProvider;
+  CanvasProvider(this._workspaceProvider) : super();
+
+  final TransformationController _transformationController =
+      TransformationController();
+
+  TransformationController get transformationController =>
+      _transformationController;
+
+  void zoomIn() {
+    _transformationController.value = Matrix4.identity()
+      ..translate(_transformationController.value.getTranslation().x, _transformationController.value.getTranslation().y)
+      ..scale(_transformationController.value.storage[0] * 1.2); // Zoom in by 20%
+    notifyListeners();
+  }
+
+  void zoomOut() {
+    _transformationController.value = Matrix4.identity()
+      ..translate(_transformationController.value.getTranslation().x, _transformationController.value.getTranslation().y)
+      ..scale(_transformationController.value.storage[0] * 0.8); // Zoom out by 20%
+    notifyListeners();
+  }
+
+  void resetZoom() {
+    _transformationController.value = Matrix4.identity();
+    notifyListeners();
+  }
+
+  double get currentZoomPercentage {
+    final scale = _transformationController.value.storage[0];
+    return scale * 100;
+  }
+
+  @override
+  void dispose() {
+    _transformationController.dispose();
+    super.dispose();
+  }
+}

lib/features/workspace/providers/workspace_provider.dart

@@ -25,9 +25,9 @@ import 'package:uuid/uuid.dart';
 class WorkspaceProvider extends StateHandler {
   late SupabaseService _supabaseService;
   late DashboardProvider _dashboardProvider;
-  
+
   // Initialize _currentWorkspace as null, it will be set by setWorkspace
-  WorkspaceModel? _currentWorkspace; 
+  WorkspaceModel? _currentWorkspace;
 
   WorkspaceProvider(this._supabaseService, this._dashboardProvider) : super() {
     _myId = _supabaseService.supabase.auth.currentUser?.id ?? const Uuid().v4();
@@ -48,11 +48,11 @@ class WorkspaceProvider extends StateHandler {
   String? _currentlySelectedObjectId;
   InteractionMode _interactionMode = InteractionMode.none;
   Offset? _panStartPoint;
-  Offset _cursorPosition = const Offset(0, 0);
-  static const double _defaultShapeSize = 100.0;
-  static const double _handleRadius = 8.0;
+  Offset _cursorPosition = const Offset(0, 0); // Now stores canvas coordinates
+  static const double _defaultShapeSize = 100.0; // In canvas units
+  static const double _handleRadius = 8.0; // In canvas units
   Color _currentWorkspaceColor = scaffoldColor;
-  
+
   TextEditingController _workspaceNameController = TextEditingController(
     text: 'Workspace Name',
   );
@@ -92,15 +92,15 @@ class WorkspaceProvider extends StateHandler {
       // Handle case where workspace isn't found (e.g., navigate back, show error)
       return;
     }
-    
+
     _workspaceNameController.text = _currentWorkspace!.name;
     _canvasObjects.clear(); // Clear existing objects when changing workspace
     _userCursors.clear(); // Clear cursors too
     _currentlySelectedObjectId = null; // Clear selected object
 
     await _fetchCanvasObjects(); // Fetch objects for the new workspace
     _setupRealtimeChannel(_currentWorkspace!.id); // Set up realtime for new workspace
-    
+
     notifyListeners();
   }
 
@@ -118,6 +118,8 @@ class WorkspaceProvider extends StateHandler {
           .order('created_at', ascending: true);
 
       for (final canvasObjectData in initialData) {
+        // Ensure that `canvasObjectData['object']` is directly the JSONB content
+        // and not wrapped in another object if not intended.
         final canvasObject = CanvasObject.fromJson(canvasObjectData['object']);
         _canvasObjects[canvasObject.id] = canvasObject;
       }
@@ -155,6 +157,7 @@ class WorkspaceProvider extends StateHandler {
   }
 
   // --- Realtime Sync ---
+  // Now expects canvas coordinates for cursorPosition
   Future<void> syncCanvasObject(Offset cursorPosition) {
     final myCursor = UserCursor(position: cursorPosition, id: _myId);
     if (_currentWorkspace == null || _canvasChannel == null) return Future.value();
@@ -163,8 +166,8 @@ class WorkspaceProvider extends StateHandler {
       event: Constants.broadcastEventName,
       payload: {
         'cursor': myCursor.toJson(),
-        if (_currentlySelectedObjectId != null)
-          'object': _canvasObjects[_currentlySelectedObjectId]?.toJson(),
+        if (_currentlySelectedObjectId != null && _canvasObjects.containsKey(_currentlySelectedObjectId!)) // Ensure object exists
+          'object': _canvasObjects[_currentlySelectedObjectId!]!.toJson(),
         'workspace_id': _currentWorkspace!.id, // Include workspace_id in broadcast
       },
     );
@@ -196,25 +199,26 @@ class WorkspaceProvider extends StateHandler {
     }
   }
 
+  // Modified onPanEnd to ensure object is saved when interaction stops
   void onPanEnd(DragEndDetails details) async {
     if (_currentlySelectedObjectId != null) {
-      syncCanvasObject(_cursorPosition);
+      syncCanvasObject(_cursorPosition); // Sync final position
+
+      final drawnObjectId = _currentlySelectedObjectId;
+      if (drawnObjectId != null && _currentWorkspace != null) {
+        // Save the current object state to the database
+        await _supabaseService.supabase.from('canvas_objects').upsert({
+          'id': drawnObjectId,
+          'object': _canvasObjects[drawnObjectId]!.toJson(), // Ensure this toJson() matches your DB schema (jsonb)
+          'workspace_id': _currentWorkspace!.id,
+        });
+        print('Canvas object ${drawnObjectId} upserted to DB.');
+      }
     }
 
-    final drawnObjectId = _currentlySelectedObjectId;
-
     _panStartPoint = null;
     _interactionMode = InteractionMode.none;
     notifyListeners();
-
-    if (drawnObjectId == null || _currentWorkspace == null) {
-      return;
-    }
-    await _supabaseService.supabase.from('canvas_objects').upsert({
-      'id': drawnObjectId,
-      'object': _canvasObjects[drawnObjectId]!.toJson(),
-      'workspace_id': _currentWorkspace!.id,
-    });
   }
 
   // --- UI/Interaction Logic ---
@@ -285,7 +289,8 @@ class WorkspaceProvider extends StateHandler {
     notifyListeners();
   }
 
-  void addNewNode(DragDownDetails details) {
+  // Expects details.globalPosition to be in canvas coordinates
+  void addNewNode(DragDownDetails details) async { // Make async to save immediately
     if (_currentWorkspace == null) {
       print("Cannot add node: No workspace selected.");
       return;
@@ -329,60 +334,86 @@ class WorkspaceProvider extends StateHandler {
     if (newObject != null) {
       _canvasObjects[newObject.id] = newObject;
       _currentlySelectedObjectId = newObject.id;
-      _interactionMode = InteractionMode.moving;
+      _interactionMode = InteractionMode.moving; // Set to moving immediately after creation
       notifyListeners();
+
+      // Immediately save the newly created object to the database
+      try {
+        await _supabaseService.supabase.from('canvas_objects').upsert({
+          'id': newObject.id,
+          'object': newObject.toJson(),
+          'workspace_id': _currentWorkspace!.id,
+        });
+        print('New canvas object ${newObject.id} inserted into DB.');
+      } catch (e) {
+        print('Error inserting new canvas object: $e');
+      }
     }
   }
 
+  // Expects details.globalPosition and details.delta to be in canvas coordinates
   void onPanDown(DragDownDetails details) {
-    _cursorPosition = details.globalPosition;
-    _panStartPoint = details.globalPosition;
+    _cursorPosition = details.globalPosition; // This is now in canvas coordinates
+    _panStartPoint = details.globalPosition; // This is now in canvas coordinates
 
     _currentlySelectedObjectId = null;
     _interactionMode = InteractionMode.none;
     notifyListeners();
 
     if (_currentMode == DrawMode.pointer) {
-      if (_currentlySelectedObjectId != null) {
-        final selectedObject = _canvasObjects[_currentlySelectedObjectId!]!;
-        final rect = selectedObject.getBounds();
+      // Prioritize handle interaction check
+      for (final canvasObject in _canvasObjects.values.toList().reversed) {
+        final rect = canvasObject.getBounds();
 
+        // Check for handle interaction. Handle radius also in canvas units.
         if ((details.globalPosition - rect.topLeft).distance < _handleRadius) {
+          _currentlySelectedObjectId = canvasObject.id;
           _interactionMode = InteractionMode.resizingTopLeft;
+          notifyListeners();
+          return; // Exit after finding a handle
         } else if ((details.globalPosition - rect.topRight).distance < _handleRadius) {
+          _currentlySelectedObjectId = canvasObject.id;
           _interactionMode = InteractionMode.resizingTopRight;
+          notifyListeners();
+          return;
         } else if ((details.globalPosition - rect.bottomLeft).distance < _handleRadius) {
+          _currentlySelectedObjectId = canvasObject.id;
           _interactionMode = InteractionMode.resizingBottomLeft;
+          notifyListeners();
+          return;
         } else if ((details.globalPosition - rect.bottomRight).distance < _handleRadius) {
+          _currentlySelectedObjectId = canvasObject.id;
           _interactionMode = InteractionMode.resizingBottomRight;
+          notifyListeners();
+          return;
         }
       }
 
-      if (_interactionMode == InteractionMode.none) {
-        for (final canvasObject in _canvasObjects.values.toList().reversed) {
-          if (canvasObject.intersectsWith(details.globalPosition)) {
-            _currentlySelectedObjectId = canvasObject.id;
-            _interactionMode = InteractionMode.moving;
-            notifyListeners();
-            break;
-          }
+      // If no handle interaction, check if we're clicking on an object to move it
+      for (final canvasObject in _canvasObjects.values.toList().reversed) {
+        if (canvasObject.intersectsWith(details.globalPosition)) { // details.globalPosition is now canvas coordinate
+          _currentlySelectedObjectId = canvasObject.id;
+          _interactionMode = InteractionMode.moving;
+          notifyListeners();
+          break; // Exit after selecting an object
         }
       }
     } else {
-      addNewNode(details);
+      addNewNode(details); // Call addNewNode if not in pointer mode
     }
   }
 
+  // Expects details.globalPosition and details.delta to be in canvas coordinates
   void onPanUpdate(DragUpdateDetails details) {
-    _cursorPosition = details.globalPosition;
+    _cursorPosition = details.globalPosition; // This is now in canvas coordinates
     if (_currentlySelectedObjectId == null) return;
 
     final currentObject = _canvasObjects[_currentlySelectedObjectId!];
     if (currentObject == null) return;
 
     switch (_interactionMode) {
       case InteractionMode.moving:
-        _canvasObjects[_currentlySelectedObjectId!] = currentObject.move(details.delta);
+        _canvasObjects[_currentlySelectedObjectId!] = currentObject.move(details.delta); // delta is already in canvas units
         break;
       case InteractionMode.resizingTopLeft:
         final newTopLeft = currentObject.getBounds().topLeft + details.delta;