jpmschweitzer/clide
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(graph): pan + zoom on the vault graph view (T-323)

Browse Source 
Folds a user zoom (scroll wheel, clamped) and pan (drag) transform into
GraphViewport so the painter and hit-testing move in lockstep — hover and
click keep landing on what's drawn. Zoom scales about the canvas centre; a
fresh graph re-fits and drops the transform.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
jpmschweitzer
2026-07-02 15:55:59 +02:00
co-authored by Claude Opus 4.8
parent 07ef8cbbcc
commit e6556401f3
5 changed files with 158 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/builtin/graph/graph_painter_test.dart
+37
View File
@@ -69,6 +69,23 @@ void main() {
expect(await tester.runAsync(() => hasInk(GraphPainter(graph: const VaultGraph([], []), positions: const {}, tokens: tokens))), isFalse);
});
testWidgets('paints under a user zoom + pan', (tester) async {
final tokens = await tokensFrom(tester);
final g = twoNodes();
final pos = ForceLayout.compute(['a.md', 'b.md'], g.edgePairs);
expect(await tester.runAsync(() => hasInk(GraphPainter(graph: g, positions: pos, tokens: tokens, zoom: 2, pan: const Offset(15, -10)))), isTrue);
});
testWidgets('repaints when zoom or pan changes, not when identical', (tester) async {
final tokens = await tokensFrom(tester);
final g = twoNodes();
final pos = ForceLayout.compute(['a.md', 'b.md'], g.edgePairs);
GraphPainter p({double zoom = 1, Offset pan = Offset.zero}) => GraphPainter(graph: g, positions: pos, tokens: tokens, zoom: zoom, pan: pan);
expect(p().shouldRepaint(p()), isFalse);
expect(p(zoom: 2).shouldRepaint(p()), isTrue);
expect(p(pan: const Offset(1, 0)).shouldRepaint(p()), isTrue);
});
group('hitTestNode', () {
test('finds the node under the point, null when far or empty', () {
final g = VaultGraph.fromOutlinks({'a.md': const []});
@@ -79,5 +96,25 @@ void main() {
expect(hitTestNode(g, pos, const Offset(20, 20), const Size(800, 600)), isNull);
expect(hitTestNode(g, const {}, Offset.zero, const Size(800, 600)), isNull);
});
test('pan shifts the hit location; zoom scales about the centre', () {
final g = VaultGraph.fromOutlinks({'a.md': const []});
final pos = ForceLayout.compute(['a.md'], const []); // single node at (400,300)
// A pan moves the node by the same pixels — hit follows it, misses the old spot.
expect(hitTestNode(g, pos, const Offset(500, 300), const Size(800, 600), pan: const Offset(100, 0)), 'a.md');
expect(hitTestNode(g, pos, const Offset(400, 300), const Size(800, 600), pan: const Offset(100, 0)), isNull);
// Zoom scales about the canvas centre, so a centre node stays under it.
expect(hitTestNode(g, pos, const Offset(400, 300), const Size(800, 600), zoom: 3), 'a.md');
});
});
group('GraphViewport.fit', () {
test('a centre point is pan-translated and zoom-invariant', () {
const canvas = Size(800, 600), layout = Size(800, 600);
final centre = (x: 400.0, y: 300.0);
expect(GraphViewport.fit(canvas, layout).toPixel(centre), const Offset(400, 300));
expect(GraphViewport.fit(canvas, layout, zoom: 4).toPixel(centre), const Offset(400, 300));
expect(GraphViewport.fit(canvas, layout, pan: const Offset(10, 20)).toPixel(centre), const Offset(410, 320));
});
});
}