From f32076eba17869fda2333e4e324fb2695ed37599 Mon Sep 17 00:00:00 2001 From: hannathkadher Date: Thu, 5 Sep 2024 12:43:38 +0400 Subject: [PATCH] lines for connecting spaces --- .../view/spaces_management_page.dart | 82 +++++++++++++++++-- 1 file changed, 74 insertions(+), 8 deletions(-) diff --git a/lib/pages/spaces_management/view/spaces_management_page.dart b/lib/pages/spaces_management/view/spaces_management_page.dart index e185ee7d..cea30ccf 100644 --- a/lib/pages/spaces_management/view/spaces_management_page.dart +++ b/lib/pages/spaces_management/view/spaces_management_page.dart @@ -12,6 +12,7 @@ class SpaceManagementPage extends StatefulWidget { class SpaceManagementPageState extends State { // Store created spaces List spaces = []; + List connections = []; @override Widget build(BuildContext context) { @@ -24,6 +25,11 @@ class SpaceManagementPageState extends State { ), 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 { } // 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 { 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, + )); + } }); }, ); @@ -137,10 +152,16 @@ class SpaceManagementPageState extends State { bottomLeft: Radius.circular(15), ), ), - child: Center( - child: SvgPicture.asset(spaces[index].icon, width: 24, height: 24, color: Colors.white), + child: Center( + 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 { 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 { 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 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; + } +} + +