GraphView: Tap gestures - get the node position properly

Earlier this was only working as the global and local coordinates were
the same. Now that I've added a SafeArea that is no longer the case.
This commit is contained in:
Vishesh Handa
2020-09-26 05:35:43 +02:00
parent 8e5ac69af2
commit 4d3573da98

View File

@ -26,7 +26,7 @@ class _GraphViewScreenState extends State<GraphViewScreen> {
return Container(width: 2500, height: 2500); return Container(width: 2500, height: 2500);
} }
return GraphView(graph); return SafeArea(child: GraphView(graph));
} }
} }
@ -51,6 +51,13 @@ class _GraphViewState extends State<GraphView> {
}); });
} }
Offset _getLocationPosition(Offset globalPos) {
RenderBox graphViewRenderBox = context.findRenderObject();
assert(graphViewRenderBox != null);
return graphViewRenderBox.globalToLocal(globalPos);
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
var children = <Widget>[]; var children = <Widget>[];
@ -62,12 +69,20 @@ class _GraphViewState extends State<GraphView> {
child: GestureDetector( child: GestureDetector(
child: NodeWidget(node, nodeSize), child: NodeWidget(node, nodeSize),
onPanStart: (details) { onPanStart: (details) {
node.x = details.globalPosition.dx; var pos = _getLocationPosition(details.globalPosition);
node.y = details.globalPosition.dy; node.x = pos.dx;
node.y = pos.dy;
node.pressed = true; node.pressed = true;
if (node.y <= nodeSize / 2) {
node.y = nodeSize / 2;
}
if (node.x <= nodeSize / 2) {
node.x = nodeSize / 2;
}
widget.graph.notify(); widget.graph.notify();
print("Pan start ${node.label} $details"); print("Pan start ${node.label} $pos");
}, },
onPanEnd: (DragEndDetails details) { onPanEnd: (DragEndDetails details) {
print("Pan end ${node.label} $details"); print("Pan end ${node.label} $details");
@ -75,11 +90,19 @@ class _GraphViewState extends State<GraphView> {
widget.graph.notify(); widget.graph.notify();
}, },
onPanUpdate: (details) { onPanUpdate: (details) {
node.x = details.globalPosition.dx; var pos = _getLocationPosition(details.globalPosition);
node.y = details.globalPosition.dy; node.x = pos.dx;
node.y = pos.dy;
if (node.y <= nodeSize / 2) {
node.y = nodeSize / 2;
}
if (node.x <= nodeSize / 2) {
node.x = nodeSize / 2;
}
widget.graph.notify(); widget.graph.notify();
print("Pan update ${node.label} ${details.globalPosition}"); print("Pan update ${node.label} $pos");
}, },
), ),
left: node.x - (nodeSize / 2), left: node.x - (nodeSize / 2),