syncrow-web/lib/pages/home/view/tree_page.dart

// import 'package:flutter/material.dart';
// import 'package:flutter_bloc/flutter_bloc.dart';
// import 'package:graphview/GraphView.dart';
// import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
// import 'package:syncrow_web/pages/home/bloc/home_event.dart';
// import 'package:syncrow_web/pages/home/bloc/home_state.dart';

// class TreeWidget extends StatelessWidget {
//   const TreeWidget({super.key});

//   @override
//   Widget build(BuildContext context) {
//     // final HomeBloc homeBloc = BlocProvider.of<HomeBloc>(context);
//     String firstNodeName = '';
//     String secondNodeName = '';

//     return SafeArea(
//       child: Container(
//         padding: const EdgeInsets.all(24),
//         width: MediaQuery.sizeOf(context).width,
//         height: MediaQuery.sizeOf(context).height,
//         alignment: AlignmentDirectional.center,
//         child: Column(
//           mainAxisSize: MainAxisSize.max,
//           crossAxisAlignment: CrossAxisAlignment.center,
//           mainAxisAlignment: MainAxisAlignment.center,
//           children: [
//             BlocBuilder<HomeBloc, HomeState>(builder: (context, state) {
//               if (state is HomeInitial) {
//                 return Wrap(
//                   children: [
//                     SizedBox(
//                       width: 100,
//                       child: TextFormField(
//                         decoration: const InputDecoration(
//                             labelText: "Subtree separation"),
//                         onChanged: (text) {
//                           firstNodeName = text;
//                         },
//                       ),
//                     ),
//                     const SizedBox(
//                       width: 8,
//                     ),
//                     Container(
//                       width: 100,
//                       child: TextFormField(
//                         decoration: InputDecoration(labelText: "Node Name"),
//                         onChanged: (text) {
//                           secondNodeName = text;
//                         },
//                       ),
//                     ),
//                     ElevatedButton(
//                       onPressed: () {
//                         final node1 = Node.Id(firstNodeName);
//                         final node2 = Node.Id(secondNodeName);
//                         context.read<HomeBloc>().add(CreateNewNode(
//                             sourceNode: node1, destinationNode: node2));
//                       },
//                       child: Text("Add"),
//                     )
//                   ],
//                 );
//               }
//               if (state is HomeUpdateTree) {
//                 return Expanded(
//                   child: InteractiveViewer(
//                       constrained: false,
//                       boundaryMargin: const EdgeInsets.all(100),
//                       minScale: 0.01,
//                       maxScale: 5.6,
//                       child: GraphView(
//                         graph: state.graph,
//                         algorithm: BuchheimWalkerAlgorithm(
//                             state.builder, TreeEdgeRenderer(state.builder)),
//                         paint: Paint()
//                           ..color = Colors.green
//                           ..strokeWidth = 1
//                           ..style = PaintingStyle.stroke,
//                         builder: (Node node) {
//                           // I can decide what widget should be shown here based on the id
//                           var nodeName = node.key!.value;
//                           return rectangleWidget(nodeName, node, context);
//                         },
//                       )),
//                 );
//               } else {
//                 return Container();
//               }
//             })
//           ],
//         ),
//       ),
//     );
//   }
// }

// Widget rectangleWidget(String text, Node node, BuildContext blocContext) {
//   String nodeName = '';
//   return InkWell(
//     onTap: () {
//       showDialog(
//         context: blocContext,
//         builder: (BuildContext context) {
//           return AlertDialog(
//             title: const Text('Add a child'),
//             content: TextField(
//               decoration:
//                   const InputDecoration(hintText: 'Enter your text here'),
//               onChanged: (value) {
//                 nodeName = value;
//               },
//             ),
//             actions: <Widget>[
//               TextButton(
//                 onPressed: () {
//                   Navigator.of(context).pop();
//                 },
//                 child: Text('Close'),
//               ),
//               TextButton(
//                 onPressed: () {
//                   if (nodeName.isNotEmpty) {
//                     final newNode = Node.Id(nodeName);
//                     blocContext.read<HomeBloc>().add(CreateNewNode(
//                         sourceNode: node, destinationNode: newNode));
//                   }
//                   Navigator.of(context).pop();
//                 },
//                 child: Text('Add'),
//               ),
//             ],
//           );
//         },
//       );
//     },
//     child: Container(
//       width: MediaQuery.of(blocContext).size.width * 0.2,
//       margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
//       padding: EdgeInsets.all(20.0),
//       decoration: BoxDecoration(
//         color: Colors.white,
//         borderRadius: BorderRadius.circular(10.0),
//         boxShadow: [
//           BoxShadow(
//             color: Colors.grey.withOpacity(0.5),
//             spreadRadius: 2,
//             blurRadius: 5,
//             offset: Offset(0, 3), // changes position of shadow
//           ),
//         ],
//       ),
//       child: Row(
//         children: [
//           const SizedBox(
//             child: Icon(
//               Icons.location_on,
//               color: Colors.blue,
//               size: 40.0,
//             ),
//           ),
//           const SizedBox(width: 10.0),
//           SizedBox(
//             child: Text(
//               text,
//               style: const TextStyle(
//                 fontSize: 24.0,
//                 fontWeight: FontWeight.bold,
//               ),
//             ),
//           ),
//           const Spacer(),
//           Container(
//             child: const Icon(
//               Icons.add_circle_outline,
//               color: Colors.grey,
//               size: 24.0,
//             ),
//           ),
//         ],
//       ),
//     ),
//   );
// }