fixing canvas issue

lib/pages/spaces_management/view/spaces_management_page.dart

@@ -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
+                    width: canvasWidth, // Large width for free movement
-                        .transparentColor, // Transparent background
+                    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) {

lib/pages/spaces_management/widgets/space_card_widget.dart

@@ -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(
+    return GestureDetector(
-      left: position.dx,
+      onPanUpdate: (details) {
-      top: position.dy,
+        // Call the provided callback to update the position
-      child: GestureDetector(
+        onPanUpdate(index, details.delta);
-        onPanUpdate: (details) {
+      },
-          // Call the provided callback to update the position
+      child: MouseRegion(
-          onPanUpdate(index, details.delta);
+        onEnter: (_) {
+          // Call the provided callback to handle hover state
+          onHoverChanged(index, true);
         },
-        child: MouseRegion(
+        onExit: (_) {
-          onEnter: (_) {
+          // Call the provided callback to handle hover state
-            // Call the provided callback to handle hover state
+          onHoverChanged(index, false);
-            onHoverChanged(index, true);
+        },
-          },
+        child: Stack(
-          onExit: (_) {
+          clipBehavior: Clip.none, // Allow hovering elements to be displayed outside the boundary
-            // Call the provided callback to handle hover state
+          children: [
-            onHoverChanged(index, false);
+            buildSpaceContainer(index), // Build the space container
-          },
+            if (isHovered) ...[
-          child: Stack(
+              PlusButtonWidget(
-            clipBehavior: Clip.none,
+                index: index,
-            children: [
+                direction: 'left',
-              buildSpaceContainer(index), // Build the space container
+                offset: const Offset(-21, 20),
-              if (isHovered) ...[
+                screenSize: screenSize,
-                PlusButtonWidget(
+                onButtonTap: onButtonTap,
-                  index: index,
+              ),
-                  direction: 'left',
+              PlusButtonWidget(
-                  offset: const Offset(-21, 20),
+                index: index,
-                  screenSize: screenSize,
+                direction: 'right',
-                  onButtonTap: onButtonTap,
+                offset: const Offset(140, 20),
-                ),
+                screenSize: screenSize,
-                PlusButtonWidget(
+                onButtonTap: onButtonTap,
-                  index: index,
+              ),
-                  direction: 'right',
+              PlusButtonWidget(
-                  offset: const Offset(140, 20),
+                index: index,
-                  screenSize: screenSize,
+                direction: 'down',
-                  onButtonTap: onButtonTap,
+                offset: const Offset(63, 50),
-                ),
+                screenSize: screenSize,
-                PlusButtonWidget(
+                onButtonTap: onButtonTap,
-                  index: index,
+              ),
-                  direction: 'down',
-                  offset: const Offset(63, 50),
-                  screenSize: screenSize,
-                  onButtonTap: onButtonTap,
-                ),
-              ],
             ],
-          ),
+          ],
         ),
       ),
     );