From 0d9f574d8ec4cefbd08817a88b2aaa374669f7a2 Mon Sep 17 00:00:00 2001 From: Lakshyajeet Jalal Date: Fri, 7 Jun 2024 22:28:08 +0530 Subject: [PATCH] components rearranged --- lib/components/edge_component.dart | 79 +----------------------- lib/components/vertex_component.dart | 23 ++----- lib/widgets/edge_info_box.dart | 91 ++++++++++++++++++++++++++++ lib/widgets/vertex_info_box.dart | 49 +++++++++++++++ web/site.webmanifest | 6 +- 5 files changed, 150 insertions(+), 98 deletions(-) create mode 100644 lib/widgets/edge_info_box.dart create mode 100644 lib/widgets/vertex_info_box.dart diff --git a/lib/components/edge_component.dart b/lib/components/edge_component.dart index a13176d..1f1b2c9 100644 --- a/lib/components/edge_component.dart +++ b/lib/components/edge_component.dart @@ -4,7 +4,7 @@ import 'package:visual_graphs/components/graph_game.dart'; import 'package:visual_graphs/models/graph.dart'; import 'package:flame/components.dart'; import 'package:flutter/material.dart'; -import 'package:flutter/services.dart'; +import 'package:visual_graphs/widgets/edge_info_box.dart'; class EdgeComponent extends ShapeComponent with HasGameRef { Edge edge; @@ -52,6 +52,8 @@ class EdgeComponent extends ShapeComponent with HasGameRef { void showInfo(BuildContext context) { showAdaptiveDialog( context: context, + barrierDismissible: true, + useSafeArea: true, builder: (BuildContext context) { return EdgeInfoBox(edgeComponent: this); }, @@ -278,78 +280,3 @@ class EdgeComponent extends ShapeComponent with HasGameRef { ); } } - -class EdgeInfoBox extends StatefulWidget { - final EdgeComponent edgeComponent; - const EdgeInfoBox({super.key, required this.edgeComponent}); - - @override - State createState() => _EdgeInfoBoxState(); -} - -class _EdgeInfoBoxState extends State { - @override - Widget build(BuildContext context) { - return AlertDialog.adaptive( - title: Text( - "Edge: Node ${widget.edgeComponent.edge.from.label} ${widget.edgeComponent.edge.isDirected ? "to" : "&"} Node ${widget.edgeComponent.edge.to.label}"), - content: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Text("ID: ${widget.edgeComponent.edge.id}"), - TextField( - decoration: const InputDecoration( - labelText: "Weight", - ), - keyboardType: TextInputType.number, - controller: TextEditingController( - text: widget.edgeComponent.edge.weight.toString()), - focusNode: FocusNode()..requestFocus(), - onChanged: (value) { - if (value.isEmpty) { - widget.edgeComponent.edge.weight = 0; - } - try { - widget.edgeComponent.edge.weight = int.parse(value); - } catch (e) { - return; - } - }, - inputFormatters: [ - FilteringTextInputFormatter.allow(RegExp(r'[0-9\-]')), - ], - ), - CheckboxListTile( - title: const Text("Directed"), - value: widget.edgeComponent.edge.isDirected, - onChanged: (value) => setState(() { - widget.edgeComponent.gameRef.graph - .removeEdge(widget.edgeComponent.edge); - widget.edgeComponent.edge.isDirected = value!; - widget.edgeComponent.gameRef.graph - .addEdge(widget.edgeComponent.edge); - }), - ), - if (widget.edgeComponent.edge.isDirected) - ElevatedButton.icon( - onPressed: () { - widget.edgeComponent.gameRef.graph - .removeEdge(widget.edgeComponent.edge); - - // swap the vertices - var temp = widget.edgeComponent.edge.from; - widget.edgeComponent.edge.from = widget.edgeComponent.edge.to; - widget.edgeComponent.edge.to = temp; - - widget.edgeComponent.gameRef.graph - .addEdge(widget.edgeComponent.edge); - setState(() {}); - }, - label: const Text("Reverse"), - icon: const Icon(Icons.swap_horiz_outlined), - ), - ], - ), - ); - } -} diff --git a/lib/components/vertex_component.dart b/lib/components/vertex_component.dart index 1dfb6c2..d312f00 100644 --- a/lib/components/vertex_component.dart +++ b/lib/components/vertex_component.dart @@ -8,6 +8,7 @@ import 'package:flame/components.dart'; import 'package:flame/effects.dart'; import 'package:flame/events.dart'; import 'package:flutter/material.dart'; +import 'package:visual_graphs/widgets/vertex_info_box.dart'; class VertexComponent extends ShapeComponent with @@ -73,26 +74,10 @@ class VertexComponent extends ShapeComponent void showInfo(BuildContext context) { showAdaptiveDialog( context: context, + barrierDismissible: true, + useSafeArea: true, builder: (BuildContext context) { - return AlertDialog.adaptive( - title: Text("Node ${vertex.label}"), - content: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Text("ID: ${vertex.id}"), - TextField( - decoration: const InputDecoration( - labelText: "Label", - ), - controller: TextEditingController(text: vertex.label), - focusNode: FocusNode()..requestFocus(), - onChanged: (value) { - vertex.label = value; - }, - ), - ], - ), - ); + return VertexInfoBox(vertexComponent: this); }, ); } diff --git a/lib/widgets/edge_info_box.dart b/lib/widgets/edge_info_box.dart new file mode 100644 index 0000000..8f7c6ce --- /dev/null +++ b/lib/widgets/edge_info_box.dart @@ -0,0 +1,91 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; +import 'package:visual_graphs/components/edge_component.dart'; + +class EdgeInfoBox extends StatefulWidget { + final EdgeComponent edgeComponent; + const EdgeInfoBox({super.key, required this.edgeComponent}); + + @override + State createState() => _EdgeInfoBoxState(); +} + +class _EdgeInfoBoxState extends State { + @override + Widget build(BuildContext context) { + return AlertDialog.adaptive( + title: Text( + "Edge: Node ${widget.edgeComponent.edge.from.label} ${widget.edgeComponent.edge.isDirected ? "to" : "&"} Node ${widget.edgeComponent.edge.to.label}"), + content: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Text("ID: ${widget.edgeComponent.edge.id}"), + TextField( + decoration: const InputDecoration( + labelText: "Weight", + ), + keyboardType: TextInputType.number, + controller: TextEditingController( + text: widget.edgeComponent.edge.weight.toString()), + focusNode: FocusNode()..requestFocus(), + onChanged: (value) { + if (value.isEmpty) { + widget.edgeComponent.edge.weight = 0; + } + try { + widget.edgeComponent.edge.weight = int.parse(value); + } catch (e) { + return; + } + }, + inputFormatters: [ + FilteringTextInputFormatter.allow(RegExp(r'[0-9\-]')), + ], + ), + CheckboxListTile( + title: const Text("Directed"), + value: widget.edgeComponent.edge.isDirected, + onChanged: (value) => setState(() { + widget.edgeComponent.gameRef.graph + .removeEdge(widget.edgeComponent.edge); + widget.edgeComponent.edge.isDirected = value!; + widget.edgeComponent.gameRef.graph + .addEdge(widget.edgeComponent.edge); + }), + ), + if (widget.edgeComponent.edge.isDirected) + ElevatedButton.icon( + onPressed: () { + widget.edgeComponent.gameRef.graph + .removeEdge(widget.edgeComponent.edge); + + // swap the vertices + var temp = widget.edgeComponent.edge.from; + widget.edgeComponent.edge.from = widget.edgeComponent.edge.to; + widget.edgeComponent.edge.to = temp; + + widget.edgeComponent.gameRef.graph + .addEdge(widget.edgeComponent.edge); + setState(() {}); + }, + label: const Text("Reverse"), + icon: const Icon(Icons.swap_horiz_outlined), + ), + const SizedBox(height: 10), + Row( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.end, + children: [ + FilledButton( + child: const Text("Done"), + onPressed: () { + Navigator.of(context).pop(); + }, + ), + ], + ) + ], + ), + ); + } +} diff --git a/lib/widgets/vertex_info_box.dart b/lib/widgets/vertex_info_box.dart new file mode 100644 index 0000000..4c96ca5 --- /dev/null +++ b/lib/widgets/vertex_info_box.dart @@ -0,0 +1,49 @@ +import 'package:flutter/material.dart'; +import 'package:visual_graphs/components/vertex_component.dart'; + +class VertexInfoBox extends StatefulWidget { + final VertexComponent vertexComponent; + const VertexInfoBox({super.key, required this.vertexComponent}); + + @override + State createState() => _VertexInfoBoxState(); +} + +class _VertexInfoBoxState extends State { + @override + Widget build(BuildContext context) { + return AlertDialog.adaptive( + title: Text("Node ${widget.vertexComponent.vertex.label}"), + content: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Text("ID: ${widget.vertexComponent.vertex.id}"), + TextField( + decoration: const InputDecoration( + labelText: "Label", + ), + controller: TextEditingController( + text: widget.vertexComponent.vertex.label), + focusNode: FocusNode()..requestFocus(), + onChanged: (value) { + widget.vertexComponent.vertex.label = value; + }, + ), + const SizedBox(height: 10), + Row( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.end, + children: [ + FilledButton( + child: const Text("Done"), + onPressed: () { + Navigator.of(context).pop(); + }, + ), + ], + ) + ], + ), + ); + } +} diff --git a/web/site.webmanifest b/web/site.webmanifest index 6bca689..d7ee76e 100644 --- a/web/site.webmanifest +++ b/web/site.webmanifest @@ -3,10 +3,10 @@ "short_name": "VisualGraphs", "start_url": ".", "display": "standalone", - "background_color": "#211F30", - "theme_color": "#211F30", + "background_color": "#211f30", + "theme_color": "#211f30", "description": "A Graph Algorithms Visualizer that helps you visualize and understand the working of various graph algorithms.", - "orientation": "landscape-primary", + "orientation": "landscape", "prefer_related_applications": false, "icons": [ {