lines for connecting spaces

lib/pages/spaces_management/view/spaces_management_page.dart

@@ -12,6 +12,7 @@ class SpaceManagementPage extends StatefulWidget {
 class SpaceManagementPageState extends State<SpaceManagementPage> {
   // Store created spaces
   List<SpaceData> spaces = [];
+  List<Connection> connections = [];
 
   @override
   Widget build(BuildContext context) {
@@ -24,6 +25,11 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
       ),
       body: Stack(
         children: [
+          // Draw lines using a CustomPaint widget
+          CustomPaint(
+            size: Size.infinite,
+            painter: LinePainter(connections),
+          ),
           Center(
             child: spaces.isEmpty
                 ? AddSpaceButton(
@@ -45,7 +51,7 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
   }
 
   // Function to open the Create Space dialog
-  void _showCreateSpaceDialog(Size screenSize, {Offset? position}) {
+  void _showCreateSpaceDialog(Size screenSize, {Offset? position, int? parentIndex, bool addConnection = false}) {
     showDialog(
       context: context,
       builder: (BuildContext context) {
@@ -59,7 +65,16 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
                     screenSize.height / 2 - 100, // Slightly above the center vertically
                   );
 
-              spaces.add(SpaceData(name: name, icon: icon, position: centerPosition));
+              SpaceData newSpace = SpaceData(name: name, icon: icon, position: centerPosition);
+              spaces.add(newSpace);
+
+              // Add connection for down-button
+              if (addConnection && parentIndex != null) {
+                connections.add(Connection(
+                  startSpace: spaces[parentIndex],
+                  endSpace: newSpace,
+                ));
+              }
             });
           },
         );
@@ -138,9 +153,15 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
               ),
             ),
                      child: Center(
-              child: SvgPicture.asset(spaces[index].icon, width: 24, height: 24, color: Colors.white),
+                child: SvgPicture.asset(
+                  spaces[index].icon,
+                  width: 24,
+                  height: 24,
+                  color: Colors.white,
                 ),
               ),
+            ),
+          
           const SizedBox(width: 10),
           Text(
             spaces[index].name,
@@ -162,6 +183,7 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
       child: GestureDetector(
         onTap: () {
           Offset newPosition;
+          bool addConnection = false;
           switch (direction) {
             case 'left':
               newPosition = spaces[index].position + const Offset(-200, 0);
@@ -171,12 +193,13 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
               break;
             case 'down':
               newPosition = spaces[index].position + const Offset(0, 150);
+              addConnection = true;
               break;
             default:
               newPosition = spaces[index].position;
           }
-
-          _showCreateSpaceDialog(screenSize, position: newPosition);
+          // Open the dialog to create a new space and pass down the new position
+          _showCreateSpaceDialog(screenSize, position: newPosition, parentIndex: index, addConnection: addConnection);
         },
         child: Container(
           width: 30,
@@ -199,5 +222,48 @@ class SpaceData {
   Offset position;
   bool isHovered;
 
-  SpaceData({required this.name, required this.icon, required this.position, this.isHovered = false});
+  SpaceData({
+    required this.name,
+    required this.icon,
+    required this.position,
+    this.isHovered = false,
+  });
 }
+
+// Class for connection lines between spaces
+class Connection {
+  final SpaceData startSpace;
+  final SpaceData endSpace;
+
+  Connection({required this.startSpace, required this.endSpace});
+}
+
+// Custom painter to draw lines between connected spaces
+class LinePainter extends CustomPainter {
+  final List<Connection> connections;
+
+  LinePainter(this.connections);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final paint = Paint()
+      ..color = Colors.black
+      ..strokeWidth = 2
+      ..style = PaintingStyle.stroke;
+
+    for (var connection in connections) {
+      final start = connection.startSpace.position + Offset(75, 60); // Bottom center of the starting space
+      final end = connection.endSpace.position + Offset(75, 0); // Top center of the ending space
+
+      // Draw a straight line connecting the two spaces
+      canvas.drawLine(start, end, paint);
+    }
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) {
+    return true;
+  }
+}
+
+