feat: connector customizer

Author: TeeWrath

lib/core/utils/enums.dart

@@ -18,6 +18,7 @@ enum NodeType {
 
 enum ConnectionPoint { up, down, left, right }
 
+// NEW: Enum for connector line types
 enum ConnectionType { solid, dotted, dashed }
 
 // Enum to define the different shapes
@@ -34,16 +35,16 @@ enum ShapeType {
 
 enum DrawMode {
   pointer(iconData: Icons.pan_tool_alt),
-  hand(iconData: PhosphorIconsRegular.hand), // NEW: Add hand tool for panning
+  hand(iconData: PhosphorIconsRegular.hand),
   circle(iconData: Icons.circle_outlined),
   rectangle(iconData: Icons.rectangle_outlined),
   square(iconData: Icons.square_outlined),
   diamond(iconData: Icons.diamond_outlined),
   roundedSquare(iconData: Icons.rounded_corner),
-  parallelogram(iconData: Icons.square_foot_outlined), // Placeholder
-  cylinder(iconData: Icons.view_in_ar_outlined), // Placeholder
+  parallelogram(iconData: Icons.square_foot_outlined),
+  cylinder(iconData: Icons.view_in_ar_outlined),
   triangle(iconData: Icons.change_history),
-  invertedTriangle(iconData: Icons.warning_amber_rounded), // Placeholder
+  invertedTriangle(iconData: Icons.warning_amber_rounded),
   textBox(iconData: PhosphorIconsRegular.textT),
   stickyNote(iconData: PhosphorIconsRegular.notePencil);
 

lib/features/models/canvas_models/canvas_object.dart

@@ -62,7 +62,6 @@ abstract class CanvasObject extends SyncedObject {
         return StickyNoteObject.fromJson(json);
       case TextBoxObject.type:
         return TextBoxObject.fromJson(json);
-      // NEW: Add case for ConnectorObject
       case ConnectorObject.type:
         return ConnectorObject.fromJson(json);
       default:
@@ -79,7 +78,6 @@ abstract class CanvasObject extends SyncedObject {
     Offset newBottomRight,
   );
 
-  // NEW: Method to get connection point coordinates
   Offset getConnectionPoint(Alignment alignment) {
     final bounds = getBounds();
     if (alignment == Alignment.centerLeft) return bounds.centerLeft;

lib/features/models/canvas_models/canvas_painter.dart

@@ -1,3 +1,4 @@
+import 'dart:ui';
 import 'dart:convert';
 import 'dart:math';
 import 'package:cookethflow/core/theme/colors.dart';
@@ -139,18 +140,49 @@ class CanvasPainter extends CustomPainter {
       if (source != null && target != null) {
         final startPoint = source.getConnectionPoint(connector.sourceAlignment);
         final endPoint = target.getConnectionPoint(connector.targetAlignment);
-        final paint = Paint()
-          ..color = Colors.black87
-          ..strokeWidth = 2.0
+        
+        final connectorPaint = Paint()
+          ..color = connector.color
+          ..strokeWidth = connector.thickness
           ..style = PaintingStyle.stroke;
 
-        canvas.drawLine(startPoint, endPoint, paint);
-        _drawArrowhead(canvas, startPoint, endPoint, paint);
+        final path = Path()..moveTo(startPoint.dx, startPoint.dy)..lineTo(endPoint.dx, endPoint.dy);
+
+        switch (connector.connectionType) {
+          case ConnectionType.solid:
+            canvas.drawPath(path, connectorPaint);
+            break;
+          case ConnectionType.dotted:
+            canvas.drawPath(
+              dashPath(path, dashArray: CircularIntervalList<double>([1.0, 3.0])),
+              connectorPaint,
+            );
+            break;
+          case ConnectionType.dashed:
+            canvas.drawPath(
+              dashPath(path, dashArray: CircularIntervalList<double>([10.0, 5.0])),
+              connectorPaint,
+            );
+            break;
+        }
+
+        _drawArrowhead(canvas, startPoint, endPoint, connectorPaint);
 
         final originPaint = Paint()
-          ..color = Colors.black87
+          ..color = connector.color
           ..style = PaintingStyle.fill;
         canvas.drawCircle(startPoint, 4, originPaint);
+
+        if (currentlySelectedObjectId == connector.id) {
+          final selectPaint = Paint()
+            ..color = Colors.blue
+            ..strokeWidth = 2.0
+            ..style = PaintingStyle.stroke;
+          canvas.drawPath(
+            dashPath(path, dashArray: CircularIntervalList<double>([5.0, 3.0])),
+            selectPaint,
+          );
+        }
       }
     }
 
@@ -339,7 +371,7 @@ class CanvasPainter extends CustomPainter {
                 ...lineSpans
               ]),
               textDirection: TextDirection.ltr,
-              textAlign: TextAlign.center, // Center-align text for all objects
+              textAlign: TextAlign.center,
             );
             final availableWidth = rect.width - (2 * textPadding) - indent;
             if (availableWidth > 0) {
@@ -460,6 +492,13 @@ class CanvasPainter extends CustomPainter {
       if (newObj.getBounds() != oldObj.getBounds()) return true;
       if (newObj.textDelta != oldObj.textDelta) return true;
       if (newObj.runtimeType != oldObj.runtimeType) return true;
+      if (newObj is ConnectorObject && oldObj is ConnectorObject) {
+        if (newObj.color != oldObj.color ||
+            newObj.thickness != oldObj.thickness ||
+            newObj.connectionType != oldObj.connectionType) {
+          return true;
+        }
+      }
     }
     return false;
   }

lib/features/models/canvas_models/objects/connector_object.dart

@@ -1,4 +1,5 @@
 import 'dart:ui';
+import 'package:cookethflow/core/utils/enums.dart';
 import 'package:cookethflow/features/models/canvas_models/canvas_object.dart';
 import 'package:flutter/material.dart';
 import 'package:uuid/uuid.dart';
@@ -10,20 +11,26 @@ class ConnectorObject extends CanvasObject {
   final String targetId;
   final Alignment sourceAlignment;
   final Alignment targetAlignment;
+  final double thickness;
+  final ConnectionType connectionType;
 
   ConnectorObject({
     required super.id,
+    required super.color,
     required this.sourceId,
     required this.targetId,
     required this.sourceAlignment,
     required this.targetAlignment,
-  }) : super(color: Colors.black87, textDelta: null); // Connectors have a fixed color and no text
+    this.thickness = 2.0,
+    this.connectionType = ConnectionType.solid,
+  }) : super(textDelta: null);
 
   @override
   Map<String, dynamic> toJson() {
     return {
       'object_type': type,
       'id': id,
+      'color': color.value.toRadixString(16),
       'source_id': sourceId,
       'target_id': targetId,
       'source_alignment': {
@@ -34,12 +41,15 @@ class ConnectorObject extends CanvasObject {
         'x': targetAlignment.x,
         'y': targetAlignment.y
       },
+      'thickness': thickness,
+      'connection_type': connectionType.name,
     };
   }
 
   factory ConnectorObject.fromJson(Map<String, dynamic> json) {
     return ConnectorObject(
       id: json['id'],
+      color: Color(int.parse(json['color'] as String, radix: 16)),
       sourceId: json['source_id'],
       targetId: json['target_id'],
       sourceAlignment: Alignment(
@@ -50,6 +60,11 @@ class ConnectorObject extends CanvasObject {
         json['target_alignment']['x'],
         json['target_alignment']['y'],
       ),
+      thickness: json['thickness'] as double? ?? 2.0,
+      connectionType: ConnectionType.values.firstWhere(
+        (e) => e.name == json['connection_type'],
+        orElse: () => ConnectionType.solid,
+      ),
     );
   }
 
@@ -58,8 +73,10 @@ class ConnectorObject extends CanvasObject {
     required String targetId,
     required Alignment sourceAlignment,
     required Alignment targetAlignment,
+    Color color = Colors.black87,
+    double thickness = 2.0,
+    ConnectionType connectionType = ConnectionType.solid,
   }) {
-    // A connector cannot connect to its own points.
     if (sourceId == targetId) {
       throw StateError('A connector cannot connect to itself.');
     }
@@ -70,10 +87,12 @@ class ConnectorObject extends CanvasObject {
       targetId: targetId,
       sourceAlignment: sourceAlignment,
       targetAlignment: targetAlignment,
+      color: color,
+      thickness: thickness,
+      connectionType: connectionType,
     );
   }
 
-  // Connectors don't have a direct copyWith like shapes, as they are defined by their connections.
   @override
   ConnectorObject copyWith({
     String? textDelta,
@@ -82,34 +101,35 @@ class ConnectorObject extends CanvasObject {
     String? targetId,
     Alignment? sourceAlignment,
     Alignment? targetAlignment,
+    double? thickness,
+    ConnectionType? connectionType,
   }) {
     return ConnectorObject(
       id: id,
+      color: color ?? this.color,
       sourceId: sourceId ?? this.sourceId,
       targetId: targetId ?? this.targetId,
       sourceAlignment: sourceAlignment ?? this.sourceAlignment,
       targetAlignment: targetAlignment ?? this.targetAlignment,
+      thickness: thickness ?? this.thickness,
+      connectionType: connectionType ?? this.connectionType,
     );
   }
 
-  // A connector's bounds are the line between its two points. For hit detection, this is handled differently.
   @override
   Rect getBounds() => Rect.zero;
 
-  // Connectors are not moved directly; they follow their connected objects.
   @override
   ConnectorObject move(Offset delta) => this;
 
-  // Connectors cannot be resized.
   @override
   ConnectorObject resize(Offset newTopLeft, Offset newBottomRight) => this;
 
-  // Hit detection for a line is more complex than for a rect.
   @override
   bool intersectsWith(Offset point) {
-    // This requires calculating the distance from the point to the line segment.
-    // For simplicity, we'll skip complex hit detection for now.
-    // Interactions will be primarily through connection points on shapes.
+    // This method is for hit detection on the connector line itself.
+    // It requires access to the source and target objects to get the start and end points.
+    // This logic is best handled in the WorkspaceProvider's onPanDown, where all objects are available.
     return false;
   }
-}
+}