flutter/GitJournal
1
0
Fork 0
mirror of https://github.com/GitJournal/GitJournal.git synced 2025-06-28 18:03:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

Graph Visualization: Allow moving the nodes by dragging

Browse Source 
It's not perfect as if the nodes are too small, then this doesn't seem
to work, but it's a start. This was just an experiment, anyway.
This commit is contained in:
Vishesh Handa
2020-07-30 17:24:29 +02:00
parent 51c112101a
commit de9c4dfea2
1 changed files with 48 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
lib/main_graph.dart
View File

@ -1,25 +1,18 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:touchable/touchable.dart'; import 'package:touchable/touchable.dart';
class MyExampleWidget extends StatelessWidget { class MyExampleWidget extends StatefulWidget {
@override @override
Widget build(BuildContext context) { _MyExampleWidgetState createState() => _MyExampleWidgetState();
FocusScope.of(context).nextFocus();
return CanvasTouchDetector(
builder: (context) {
return CustomPaint(
painter: MyPainter(context),
);
},
);
}
} }
class MyPainter extends CustomPainter { class _MyExampleWidgetState extends State<MyExampleWidget> {
final BuildContext context;
Graph graph; Graph graph;
MyPainter(this.context) { @override
void initState() {
super.initState();
var a = Node("A", 30, 30); var a = Node("A", 30, 30);
var b = Node("B", 200, 200); var b = Node("B", 200, 200);
var c = Node("C", 200, 100); var c = Node("C", 200, 100);
@ -39,8 +32,28 @@ class MyPainter extends CustomPainter {
graph.edges = edges; graph.edges = edges;
} }
@override
Widget build(BuildContext context) {
FocusScope.of(context).nextFocus();
return CanvasTouchDetector(
builder: (context) {
return CustomPaint(
painter: MyPainter(context, graph),
);
},
);
}
}
class MyPainter extends CustomPainter {
final BuildContext context;
final Graph graph;
MyPainter(this.context, this.graph) : super(repaint: graph);
@override @override
void paint(Canvas canvas, Size size) { void paint(Canvas canvas, Size size) {
print("Paint");
var myCanvas = TouchyCanvas(context, canvas); var myCanvas = TouchyCanvas(context, canvas);
// Draw all the edges // Draw all the edges
@ -63,17 +76,29 @@ class MyPainter extends CustomPainter {
Offset(node.x, node.y), Offset(node.x, node.y),
30, 30,
Paint()..color = Colors.orange, Paint()..color = Colors.orange,
/*
onPanStart: (tapdetail) { onPanStart: (tapdetail) {
node.pressed = true; node.pressed = true;
print('$node Pan start - $tapdetail'); print('$node Pan start - $tapdetail');
node.x = tapdetail.localPosition.dx;
node.y = tapdetail.localPosition.dy;
graph.notify();
}, },
onPanDown: (tapdetail) { onPanDown: (tapdetail) {
node.pressed = false; node.pressed = false;
print('$node PanEnd - $tapdetail'); print('$node PanEnd - $tapdetail');
},*/ node.x = tapdetail.localPosition.dx;
node.y = tapdetail.localPosition.dy;
graph.notify();
},
onPanUpdate: (tapdetail) { onPanUpdate: (tapdetail) {
print('$node PanUpdate - $tapdetail'); print('$node PanUpdate - $tapdetail');
node.x = tapdetail.localPosition.dx;
node.y = tapdetail.localPosition.dy;
graph.notify();
}, },
/* /*
onTapDown: (details) { onTapDown: (details) {
@ -111,9 +136,13 @@ class Edge {
Edge(this.a, this.b); Edge(this.a, this.b);
} }
class Graph { class Graph extends ChangeNotifier {
List<Node> nodes = []; List<Node> nodes = [];
List<Edge> edges = []; List<Edge> edges = [];
void notify() {
notifyListeners();
}
} }
void main() => runApp(MyApp()); void main() => runApp(MyApp());
@ -148,3 +177,5 @@ class MyWidget extends StatelessWidget {
); );
} }
} }
// FIXME: Possibly use directed_graph library?