fixing canvas issue

This commit is contained in:
hannathkadher
2024-10-14 09:44:22 +04:00
parent 56c4c858be
commit 220cfdbd27
2 changed files with 70 additions and 51 deletions

View File

@ -1,3 +1,5 @@
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/common/buttons/add_space_button.dart';
@ -27,6 +29,8 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
// Store created spaces
List<SpaceData> spaces = [];
List<Connection> connections = [];
double canvasWidth = 4000; // Initial canvas width
double canvasHeight = 4000; // Initial canvas height
// Track whether to show the community list view or community structure
@ -44,6 +48,23 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
super.initState();
}
void updateCanvasSize() {
double maxX = 0;
double maxY = 0;
for (var space in spaces) {
maxX = max(maxX, space.position.dx + 150); // Width of space
maxY = max(maxY, space.position.dy + 60); // Height of space
}
setState(() {
canvasWidth = max(canvasWidth, maxX + 200); // Ensure padding
canvasHeight = max(canvasHeight, maxY + 200); // Ensure padding
});
print("Updated canvas size: $canvasWidth x $canvasHeight");
}
@override
Widget build(BuildContext context) {
Size screenSize = MediaQuery.of(context).size;
@ -100,7 +121,7 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
return Expanded(
child: Container(
decoration: const BoxDecoration(
color: ColorsManager.whiteColors,
color: ColorsManager.blackColor,
border: Border(
left: BorderSide(
color: ColorsManager.whiteColors,
@ -115,7 +136,7 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 27.0),
width: double.infinity,
decoration: BoxDecoration(
color: ColorsManager.whiteColors,
color: ColorsManager.blackColor,
boxShadow: [
BoxShadow(
color: ColorsManager.shadowBlackColor, // Subtle shadow
@ -150,14 +171,16 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
// Use Expanded to ensure InteractiveViewer takes the available space
Flexible(
child: InteractiveViewer(
boundaryMargin: const EdgeInsets.all(500), // Adjusted to 500
boundaryMargin: const EdgeInsets.all(20000), // Adjusted to 500
minScale: 0.5, // Minimum zoom scale
maxScale: 2.5, // Maximum zoom scale
maxScale: 5.5, // Maximum zoom scale
panEnabled: true, // Enable panning
scaleEnabled: true, // Enable zooming
child: Container(
color: ColorsManager
.transparentColor, // Transparent background
width: canvasWidth, // Large width for free movement
height: canvasHeight, // Large height for free movement
color: ColorsManager.blue1, // Transparent background
child: spaces.isEmpty
? Center(
child: AddSpaceButton(
@ -187,6 +210,7 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
setState(() {
spaces[index].position += delta;
});
updateCanvasSize();
},
onHoverChanged:
(int index, bool isHovered) {

View File

@ -1,5 +1,4 @@
import 'package:flutter/material.dart';
import 'plus_button_widget.dart'; // Make sure to import your PlusButtonWidget
class SpaceCardWidget extends StatelessWidget {
@ -26,52 +25,48 @@ class SpaceCardWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Positioned(
left: position.dx,
top: position.dy,
child: GestureDetector(
onPanUpdate: (details) {
// Call the provided callback to update the position
onPanUpdate(index, details.delta);
return GestureDetector(
onPanUpdate: (details) {
// Call the provided callback to update the position
onPanUpdate(index, details.delta);
},
child: MouseRegion(
onEnter: (_) {
// Call the provided callback to handle hover state
onHoverChanged(index, true);
},
child: MouseRegion(
onEnter: (_) {
// Call the provided callback to handle hover state
onHoverChanged(index, true);
},
onExit: (_) {
// Call the provided callback to handle hover state
onHoverChanged(index, false);
},
child: Stack(
clipBehavior: Clip.none,
children: [
buildSpaceContainer(index), // Build the space container
if (isHovered) ...[
PlusButtonWidget(
index: index,
direction: 'left',
offset: const Offset(-21, 20),
screenSize: screenSize,
onButtonTap: onButtonTap,
),
PlusButtonWidget(
index: index,
direction: 'right',
offset: const Offset(140, 20),
screenSize: screenSize,
onButtonTap: onButtonTap,
),
PlusButtonWidget(
index: index,
direction: 'down',
offset: const Offset(63, 50),
screenSize: screenSize,
onButtonTap: onButtonTap,
),
],
onExit: (_) {
// Call the provided callback to handle hover state
onHoverChanged(index, false);
},
child: Stack(
clipBehavior: Clip.none, // Allow hovering elements to be displayed outside the boundary
children: [
buildSpaceContainer(index), // Build the space container
if (isHovered) ...[
PlusButtonWidget(
index: index,
direction: 'left',
offset: const Offset(-21, 20),
screenSize: screenSize,
onButtonTap: onButtonTap,
),
PlusButtonWidget(
index: index,
direction: 'right',
offset: const Offset(140, 20),
screenSize: screenSize,
onButtonTap: onButtonTap,
),
PlusButtonWidget(
index: index,
direction: 'down',
offset: const Offset(63, 50),
screenSize: screenSize,
onButtonTap: onButtonTap,
),
],
),
],
),
),
);