81 lines
3.1 KiB
TypeScript
81 lines
3.1 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
import { Graph } from '@antv/g6';
|
|
import { invoke } from '../../ipc-client';
|
|
import { IPC, type GraphData, type GraphNode } from '@hunter/shared';
|
|
import { useStore } from '../../store';
|
|
|
|
// 按顶层分组固定坐标布局：每组一列，组内纵向排开，间距充足（FR-G2 组内分行排布）
|
|
function layoutNodes(nodes: GraphNode[], width: number, height: number) {
|
|
const groups = new Map<string, GraphNode[]>();
|
|
nodes.forEach(n => { const a = groups.get(n.group) ?? []; a.push(n); groups.set(n.group, a); });
|
|
const groupList = [...groups.entries()];
|
|
const colWidth = groupList.length > 0 ? width / groupList.length : width;
|
|
const positions = new Map<string, { x: number; y: number }>();
|
|
groupList.forEach(([group, items], gi) => {
|
|
const colX = colWidth * gi + colWidth / 2;
|
|
const rowGap = Math.min(80, height / Math.max(items.length, 1));
|
|
const startY = height / 2 - (items.length * rowGap) / 2 + rowGap / 2;
|
|
items.forEach((n, ni) => positions.set(n.id, { x: colX, y: startY + ni * rowGap }));
|
|
});
|
|
return positions;
|
|
}
|
|
|
|
export function GraphView() {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const [graph, setGraph] = useState<Graph | null>(null);
|
|
const { openDoc } = useStore();
|
|
const sizeRef = useRef({ w: 800, h: 600 });
|
|
|
|
useEffect(() => {
|
|
if (!containerRef.current) return;
|
|
const el = containerRef.current;
|
|
const updateSize = () => { sizeRef.current = { w: el.clientWidth || 800, h: el.clientHeight || 600 }; };
|
|
updateSize();
|
|
const ro = new ResizeObserver(updateSize);
|
|
ro.observe(el);
|
|
const g = new Graph({
|
|
container: el,
|
|
width: sizeRef.current.w,
|
|
height: sizeRef.current.h,
|
|
autoResize: true,
|
|
layout: { type: 'grid' } as any,
|
|
node: {
|
|
style: {
|
|
size: 28,
|
|
fill: (d: any) => d.color || '#4a9eff',
|
|
labelText: (d: any) => truncate(d.title, 10),
|
|
labelFill: '#ddd',
|
|
labelFontSize: 11,
|
|
labelPlacement: 'bottom',
|
|
labelOffsetY: 4,
|
|
}
|
|
} as any,
|
|
edge: { style: { stroke: '#555', lineWidth: 1, endArrow: true } } as any,
|
|
behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
|
|
});
|
|
setGraph(g);
|
|
return () => { ro.disconnect(); g.destroy(); };
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!graph) return;
|
|
invoke(IPC.graph, undefined as never).then((data: GraphData) => {
|
|
const pos = layoutNodes(data.nodes, sizeRef.current.w, sizeRef.current.h);
|
|
graph.setData({
|
|
nodes: data.nodes.map(n => ({ id: n.id, x: pos.get(n.id)!.x, y: pos.get(n.id)!.y, style: { fill: n.color }, data: { title: n.title, star: n.star } })),
|
|
edges: data.edges.map(e => ({ source: e.source, target: e.target })),
|
|
} as any);
|
|
graph.render();
|
|
});
|
|
graph.on('node:click', (e: any) => { openDoc(e.target.id); });
|
|
}, [graph]);
|
|
|
|
return (
|
|
<div style={{ flex: 1, background: '#111', position: 'relative', overflow: 'hidden' }}>
|
|
<div ref={containerRef} style={{ position: 'absolute', inset: 0 }} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function truncate(s: string, n: number) { return s.length > n ? s.slice(0, n) + '…' : s; }
|