feat(graph): interactive GraphView — hover-highlight + click-to-open (T-323)

GraphView lays a VaultGraph out with the force solver, paints it, and wires hover (light the hovered node's neighbourhood, dim the rest) + click (onOpen with the node's vault path). A shared GraphViewport keeps hit-testing aligned with paint. Solver + model + painter + interactive view now stand; the pql link-data wiring, filter, and MultitabPane/slot registration are the remaining "integrate into the app" work. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-02 08:34:26 +02:00
parent 6bea1723bb
commit c529703b9f
4 changed files with 181 additions and 4 deletions
@@ -0,0 +1,87 @@
+/// The interactive vault-graph view (T-323): lays a [VaultGraph] out with the
+/// force solver, paints it via [GraphPainter], and wires hover (highlight the
+/// neighbourhood) + click (open the note). Pan/zoom + filtering layer on later.
+library;
+
+import 'package:clide/builtin/graph/src/graph_painter.dart';
+import 'package:clide/src/graph/force_layout.dart';
+import 'package:clide/src/graph/vault_graph.dart';
+import 'package:clide/widgets/src/clide_settings.dart';
+import 'package:flutter/widgets.dart';
+
+class GraphView extends StatefulWidget {
+  const GraphView({super.key, required this.graph, this.onOpen, this.layoutSize = const Size(800, 600)});
+
+  final VaultGraph graph;
+
+  /// Called with a node's id (its vault-relative path) when it's clicked.
+  final void Function(String nodeId)? onOpen;
+
+  final Size layoutSize;
+
+  @override
+  State<GraphView> createState() => _GraphViewState();
+}
+
+class _GraphViewState extends State<GraphView> {
+  late Map<String, GraphPoint> _pos;
+  String? _hovered;
+
+  @override
+  void initState() {
+    super.initState();
+    _relayout();
+  }
+
+  @override
+  void didUpdateWidget(GraphView old) {
+    super.didUpdateWidget(old);
+    if (!identical(old.graph, widget.graph)) _relayout();
+  }
+
+  void _relayout() {
+    _pos = ForceLayout.compute(
+      [for (final n in widget.graph.nodes) n.id],
+      widget.graph.edgePairs,
+      width: widget.layoutSize.width,
+      height: widget.layoutSize.height,
+    );
+    _hovered = null;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final tokens = ClideSettings.theme.of(context).surface;
+    return LayoutBuilder(
+      builder: (ctx, constraints) {
+        final size = constraints.biggest;
+        String? hit(Offset local) => hitTestNode(widget.graph, _pos, local, size, layoutSize: widget.layoutSize);
+        return MouseRegion(
+          onHover: (e) {
+            final h = hit(e.localPosition);
+            if (h != _hovered) setState(() => _hovered = h);
+          },
+          onExit: (_) {
+            if (_hovered != null) setState(() => _hovered = null);
+          },
+          child: GestureDetector(
+            onTapUp: (d) {
+              final h = hit(d.localPosition);
+              if (h != null) widget.onOpen?.call(h);
+            },
+            child: CustomPaint(
+              size: size,
+              painter: GraphPainter(
+                graph: widget.graph,
+                positions: _pos,
+                tokens: tokens,
+                highlight: _hovered == null ? null : widget.graph.neighborhood(_hovered!),
+                layoutSize: widget.layoutSize,
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}