ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-07-10 15:17:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

changed the view

Browse Source
This commit is contained in:
hannathkadher
2024-09-05 16:18:58 +04:00
parent 17510c48f2
commit 55d4349f2e
1 changed files with 105 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
lib/pages/spaces_management/view/spaces_management_page.dart
View File

@ -19,39 +19,50 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
Size screenSize = MediaQuery.of(context).size; Size screenSize = MediaQuery.of(context).size;
return Scaffold( return Scaffold(
backgroundColor: ColorsManager.whiteColors, backgroundColor: ColorsManager.whiteColors,
appBar: AppBar( appBar: AppBar(
title: const Text('Space Management'), title: const Text('Space Management'),
), ),
body: Stack( body: InteractiveViewer(
children: [ boundaryMargin: const EdgeInsets.all(
// Draw lines using a CustomPaint widget double.infinity), // Allow panning to any side
CustomPaint( minScale: 0.5, // Minimum zoom scale
size: Size.infinite, maxScale: 2.5, // Maximum zoom scale
painter: CurvedLinePainter(connections), panEnabled: true, // Enable panning (move left/right)
), scaleEnabled: true, // Enable zooming
Center( child: MouseRegion(
child: spaces.isEmpty cursor: SystemMouseCursors.grab,
? AddSpaceButton( child: Stack(
onTap: () { children: [
_showCreateSpaceDialog(screenSize); // Draw lines using a CustomPaint widget
}, CustomPaint(
) size: Size.infinite,
: Stack( painter: CurvedLinePainter(connections),
children: spaces
.asMap()
.entries
.map((entry) => _buildSpaceCard(entry.key, screenSize))
.toList(),
), ),
), Center(
], child: spaces.isEmpty
), ? AddSpaceButton(
); onTap: () {
_showCreateSpaceDialog(screenSize);
},
)
: Stack(
children: spaces
.asMap()
.entries
.map((entry) =>
_buildSpaceCard(entry.key, screenSize))
.toList(),
),
),
],
),
)));
} }
// Function to open the Create Space dialog // Function to open the Create Space dialog
void _showCreateSpaceDialog(Size screenSize, {Offset? position, int? parentIndex, bool addConnection = false}) { void _showCreateSpaceDialog(Size screenSize,
{Offset? position, int? parentIndex, String? direction}) {
showDialog( showDialog(
context: context, context: context,
builder: (BuildContext context) { builder: (BuildContext context) {
@ -62,17 +73,20 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
Offset centerPosition = position ?? Offset centerPosition = position ??
Offset( Offset(
screenSize.width / 2 - 75, // Center horizontally screenSize.width / 2 - 75, // Center horizontally
screenSize.height / 2 - 100, // Slightly above the center vertically screenSize.height / 2 -
100, // Slightly above the center vertically
); );
SpaceData newSpace = SpaceData(name: name, icon: icon, position: centerPosition); SpaceData newSpace =
SpaceData(name: name, icon: icon, position: centerPosition);
spaces.add(newSpace); spaces.add(newSpace);
// Add connection for down-button // Add connection for down-button
if (addConnection && parentIndex != null) { if (parentIndex != null && direction != null) {
connections.add(Connection( connections.add(Connection(
startSpace: spaces[parentIndex], startSpace: spaces[parentIndex],
endSpace: newSpace, endSpace: newSpace,
direction: direction,
)); ));
} }
}); });
@ -112,9 +126,12 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
children: [ children: [
_buildSpaceContainer(index), _buildSpaceContainer(index),
if (spaces[index].isHovered) ...[ if (spaces[index].isHovered) ...[
_buildPlusButton(index, 'left', const Offset(-21, 20), screenSize), _buildPlusButton(
_buildPlusButton(index, 'right', const Offset(140, 20), screenSize), index, 'left', const Offset(-21, 20), screenSize),
_buildPlusButton(index, 'down', const Offset(63, 50), screenSize), _buildPlusButton(
index, 'right', const Offset(140, 20), screenSize),
_buildPlusButton(
index, 'down', const Offset(63, 50), screenSize),
], ],
], ],
), ),
@ -152,16 +169,15 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
bottomLeft: Radius.circular(15), bottomLeft: Radius.circular(15),
), ),
), ),
child: Center( child: Center(
child: SvgPicture.asset( child: SvgPicture.asset(
spaces[index].icon, spaces[index].icon,
width: 24, width: 24,
height: 24, height: 24,
color: Colors.white, color: Colors.white,
),
), ),
), ),
),
const SizedBox(width: 10), const SizedBox(width: 10),
Text( Text(
spaces[index].name, spaces[index].name,
@ -176,14 +192,14 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
} }
// Function to build plus buttons for new space creation // Function to build plus buttons for new space creation
Widget _buildPlusButton(int index, String direction, Offset offset, Size screenSize) { Widget _buildPlusButton(
int index, String direction, Offset offset, Size screenSize) {
return Positioned( return Positioned(
left: offset.dx, left: offset.dx,
top: offset.dy, top: offset.dy,
child: GestureDetector( child: GestureDetector(
onTap: () { onTap: () {
Offset newPosition; Offset newPosition;
bool addConnection = false;
switch (direction) { switch (direction) {
case 'left': case 'left':
newPosition = spaces[index].position + const Offset(-200, 0); newPosition = spaces[index].position + const Offset(-200, 0);
@ -193,13 +209,13 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
break; break;
case 'down': case 'down':
newPosition = spaces[index].position + const Offset(0, 150); newPosition = spaces[index].position + const Offset(0, 150);
addConnection = true;
break; break;
default: default:
newPosition = spaces[index].position; newPosition = spaces[index].position;
} }
// Open the dialog to create a new space and pass down the new position // Open the dialog to create a new space and pass down the new position
_showCreateSpaceDialog(screenSize, position: newPosition, parentIndex: index, addConnection: addConnection); _showCreateSpaceDialog(screenSize,
position: newPosition, parentIndex: index, direction: direction);
}, },
child: Container( child: Container(
width: 30, width: 30,
@ -234,8 +250,12 @@ class SpaceData {
class Connection { class Connection {
final SpaceData startSpace; final SpaceData startSpace;
final SpaceData endSpace; final SpaceData endSpace;
final String direction;
Connection({required this.startSpace, required this.endSpace}); Connection(
{required this.startSpace,
required this.endSpace,
required this.direction});
} }
// Custom painter to draw lines between connected spaces // Custom painter to draw lines between connected spaces
@ -253,23 +273,47 @@ class CurvedLinePainter extends CustomPainter {
..style = PaintingStyle.stroke; ..style = PaintingStyle.stroke;
for (var connection in connections) { for (var connection in connections) {
final start = connection.startSpace.position + Offset(75, 60); // Bottom center of the starting space Offset start = connection.startSpace.position +
final end = connection.endSpace.position + Offset(75, 0); // Top center of the ending space Offset(75, 60); // Center bottom of start space
Offset end = connection.endSpace.position +
Offset(75, 0); // Center top of end space
// Calculate control point for Bézier curve (to create a curve) // Draw straight line for left/right connections and curved line for down connections
final controlPoint = Offset((start.dx + end.dx) / 2, start.dy + 50); if (connection.direction == 'down') {
// Curved line for down connections
// Draw the Bézier curve final controlPoint = Offset((start.dx + end.dx) / 2, start.dy + 50);
final path = Path() final path = Path()
..moveTo(start.dx, start.dy) ..moveTo(start.dx, start.dy)
..quadraticBezierTo(controlPoint.dx, controlPoint.dy, end.dx, end.dy); ..quadraticBezierTo(controlPoint.dx, controlPoint.dy, end.dx, end.dy);
canvas.drawPath(path, paint);
canvas.drawPath(path, paint); }
if (connection.direction == 'right') {
start = Offset(
connection.startSpace.position.dx + 150,
connection.startSpace.position.dy +
30); // Right center of the first space
end = Offset(
connection.endSpace.position.dx,
connection.endSpace.position.dy +
30); // Left center of the new space
canvas.drawLine(start, end, paint);
} else if (connection.direction == 'left') {
// Straight line for left/right connections
start = Offset(
connection.startSpace.position.dx,
connection.startSpace.position.dy +
30); // Left center of the first space
end = Offset(
connection.endSpace.position.dx + 150,
connection.endSpace.position.dy +
30); // Right center of the new space
canvas.drawLine(start, end, paint);
}
// Draw small connection dots at the start and end points // Draw small connection dots at the start and end points
final dotPaint = Paint()..color = ColorsManager.blackColor; final dotPaint = Paint()..color = ColorsManager.blackColor;
canvas.drawCircle(start, 5, dotPaint); // Start dot canvas.drawCircle(start, 5, dotPaint); // Start dot
canvas.drawCircle(end, 5, dotPaint); // End dot canvas.drawCircle(end, 5, dotPaint); // End dot
} }
} }