mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-10 07:07:19 +00:00
lines for connecting spaces
This commit is contained in:
@ -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,
|
||||
));
|
||||
}
|
||||
});
|
||||
},
|
||||
);
|
||||
@ -137,10 +152,16 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
|
||||
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<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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
Reference in New Issue
Block a user