Fixed space layout

This commit is contained in:
hannathkadher
2024-11-15 00:38:14 +04:00
parent eacee98de2
commit de57e0f21d
7 changed files with 292 additions and 306 deletions

View File

@ -0,0 +1,215 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/common/buttons/add_space_button.dart';
import 'package:syncrow_web/pages/spaces_management/view/dialogs/create_space_dialog.dart';
import 'package:syncrow_web/pages/spaces_management/widgets/curved_line_painter.dart';
import 'package:syncrow_web/pages/spaces_management/widgets/space_card_widget.dart';
import 'package:syncrow_web/pages/spaces_management/model/community_model.dart';
import 'package:syncrow_web/pages/spaces_management/model/space_data_model.dart';
import 'package:syncrow_web/pages/spaces_management/model/connection_model.dart';
import 'package:syncrow_web/pages/spaces_management/widgets/space_container_widget.dart';
import 'package:syncrow_web/utils/color_manager.dart';
class CommunityStructureArea extends StatefulWidget {
final CommunityModel? selectedCommunity;
CommunityStructureArea({this.selectedCommunity});
@override
_CommunityStructureAreaState createState() => _CommunityStructureAreaState();
}
class _CommunityStructureAreaState extends State<CommunityStructureArea> {
double canvasWidth = 1000;
double canvasHeight = 1000;
List<SpaceData> spaces = [];
List<Connection> connections = [];
@override
Widget build(BuildContext context) {
Size screenSize = MediaQuery.of(context).size;
return Expanded(
child: Container(
decoration: const BoxDecoration(
border: Border(
left: BorderSide(color: ColorsManager.whiteColors, width: 1.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildHeader(),
Flexible(
child: InteractiveViewer(
boundaryMargin: EdgeInsets.all(500),
minScale: 0.5,
maxScale: 3.0,
constrained: false,
child: Container(
width: canvasWidth,
height: canvasHeight,
child: spaces.isEmpty
? Center(
child: AddSpaceButton(
onTap: () {
_showCreateSpaceDialog(screenSize);
},
),
)
: Stack(
children: [
for (var connection in connections)
CustomPaint(
painter: CurvedLinePainter([connection])),
for (var entry in spaces.asMap().entries)
Positioned(
left: entry.value.position.dx,
top: entry.value.position.dy,
child: SpaceCardWidget(
index: entry.key,
onButtonTap: (int index, Offset newPosition,
String direction) {
_showCreateSpaceDialog(
screenSize,
position:
spaces[index].position + newPosition,
parentIndex: index,
direction: direction,
);
},
position: entry.value.position,
isHovered: entry.value.isHovered,
screenSize: screenSize,
onHoverChanged: _handleHoverChanged,
onPositionChanged: (newPosition) {
_updateNodePosition(
entry.value, newPosition);
},
buildSpaceContainer: (int index) {
return SpaceContainerWidget(
index: index,
icon: spaces[index].icon,
name: spaces[index].name,
);
},
),
),
],
),
),
),
),
],
),
),
);
}
Widget _buildHeader() {
return Container(
padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 27.0),
width: double.infinity,
decoration: BoxDecoration(
color: ColorsManager.whiteColors,
boxShadow: [
BoxShadow(
color: ColorsManager.shadowBlackColor,
spreadRadius: 0,
blurRadius: 8,
offset: const Offset(0, 4),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Community Structure',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
if (widget.selectedCommunity != null)
Text(
widget.selectedCommunity!.name,
style: const TextStyle(
fontSize: 16, color: ColorsManager.blackColor),
),
],
),
);
}
void _updateNodePosition(SpaceData node, Offset newPosition) {
setState(() {
node.position = newPosition;
// Expand canvas to the right when node approaches the right edge
if (node.position.dx >= canvasWidth - 200) {
canvasWidth += 200;
}
// Expand canvas downward when node approaches the bottom edge
if (node.position.dy >= canvasHeight - 200) {
canvasHeight += 200;
}
// Expand canvas to the left when node approaches the left edge
if (node.position.dx <= 200) {
double shiftAmount = 200;
canvasWidth += shiftAmount;
// Shift all nodes to the right by shiftAmount
for (var n in spaces) {
n.position = Offset(n.position.dx + shiftAmount, n.position.dy);
}
}
// Prevent nodes from going out of bounds on top edge
if (node.position.dy < 0) {
node.position = Offset(node.position.dx, 0);
}
});
}
void _showCreateSpaceDialog(Size screenSize,
{Offset? position, int? parentIndex, String? direction}) {
showDialog(
context: context,
builder: (BuildContext context) {
return CreateSpaceDialog(
onCreateSpace: (String name, String icon) {
setState(() {
// Set the first space in the center or use passed position
Offset centerPosition = position ??
Offset(
screenSize.width / 2 - 75, // Center horizontally
screenSize.height / 2 -
100, // Slightly above the center vertically
);
SpaceData newSpace =
SpaceData(name: name, icon: icon, position: centerPosition);
spaces.add(newSpace);
_updateNodePosition(newSpace, newSpace.position);
// Add connection for down-button
if (parentIndex != null && direction != null) {
SpaceData parentSpace = spaces[parentIndex];
connections.add(Connection(
startSpace: parentSpace,
endSpace: newSpace,
direction: direction,
));
}
});
},
);
},
);
}
void _handleHoverChanged(int index, bool isHovered) {
setState(() {
spaces[index].isHovered = isHovered;
});
}
}