729 lines
38 KiB
TypeScript
729 lines
38 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import {
|
||
ChangeEvent,
|
||
PointerEvent as ReactPointerEvent,
|
||
WheelEvent as ReactWheelEvent,
|
||
useEffect,
|
||
useMemo,
|
||
useRef,
|
||
useState,
|
||
} from "react";
|
||
import demoData from "../data/star-graph.json";
|
||
import styles from "./StarGraph.module.css";
|
||
import hoverStyles from "./StarGraphHover.module.css";
|
||
|
||
type GraphNode = {
|
||
id: string;
|
||
label: string;
|
||
type: string;
|
||
x: number;
|
||
y: number;
|
||
color: string;
|
||
size: number;
|
||
description: string;
|
||
tags: string[];
|
||
};
|
||
|
||
type GraphEdge = {
|
||
id: string;
|
||
source: string;
|
||
target: string;
|
||
label: string;
|
||
type: string;
|
||
};
|
||
|
||
type GraphData = {
|
||
title: string;
|
||
subtitle: string;
|
||
nodeTypes: { id: string; name: string; color: string }[];
|
||
nodes: GraphNode[];
|
||
edges: GraphEdge[];
|
||
};
|
||
|
||
type Interaction = {
|
||
mode: "node" | "pan";
|
||
nodeId?: string;
|
||
startX: number;
|
||
startY: number;
|
||
baseX: number;
|
||
baseY: number;
|
||
moved: boolean;
|
||
};
|
||
|
||
const STORAGE_KEY = "orbit-star-graph-v1";
|
||
const INITIAL_GRAPH = demoData as GraphData;
|
||
const RELATION_TYPES = ["角色关系", "组织关系", "地点关系", "剧情关系", "事件关系", "协作关系", "自定义"];
|
||
|
||
export default function StarGraphPage() {
|
||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||
const importRef = useRef<HTMLInputElement>(null);
|
||
const interactionRef = useRef<Interaction | null>(null);
|
||
const suppressClickRef = useRef(false);
|
||
const [graph, setGraph] = useState<GraphData>(() => cloneGraph(INITIAL_GRAPH));
|
||
const [hydrated, setHydrated] = useState(false);
|
||
const [canvasSize, setCanvasSize] = useState({ width: 900, height: 650, dpr: 1 });
|
||
const [viewport, setViewport] = useState({ x: 0, y: 0, scale: 1 });
|
||
const [query, setQuery] = useState("");
|
||
const [typeFilter, setTypeFilter] = useState("all");
|
||
const [selectedNodeId, setSelectedNodeId] = useState<string | null>("project-starsea");
|
||
const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null);
|
||
const [connectMode, setConnectMode] = useState(false);
|
||
const [connectFrom, setConnectFrom] = useState<string | null>(null);
|
||
const [hoveredNodeId, setHoveredNodeId] = useState<string | null>(null);
|
||
const [hoverPoint, setHoverPoint] = useState({ x: 0, y: 0 });
|
||
const [showAddNode, setShowAddNode] = useState(false);
|
||
const [showAddEdge, setShowAddEdge] = useState(false);
|
||
const [addPoint, setAddPoint] = useState({ x: 0, y: 0 });
|
||
const [pendingEdge, setPendingEdge] = useState({ source: "", target: "" });
|
||
const [newNode, setNewNode] = useState({ label: "", type: "character", description: "", tags: "" });
|
||
const [newEdge, setNewEdge] = useState({ label: "关联", type: "自定义" });
|
||
const [toast, setToast] = useState("");
|
||
|
||
const stars = useMemo(() => makeStars(180), []);
|
||
const selectedNode = graph.nodes.find((node) => node.id === selectedNodeId) ?? null;
|
||
const selectedEdge = graph.edges.find((edge) => edge.id === selectedEdgeId) ?? null;
|
||
const fromNode = graph.nodes.find((node) => node.id === connectFrom) ?? null;
|
||
const hoveredNode = graph.nodes.find((node) => node.id === hoveredNodeId) ?? null;
|
||
const visibleNodes = graph.nodes.filter((node) => {
|
||
const text = `${node.label} ${node.type} ${node.tags.join(" ")}`.toLowerCase();
|
||
return (typeFilter === "all" || node.type === typeFilter) && text.includes(query.trim().toLowerCase());
|
||
});
|
||
|
||
useEffect(() => {
|
||
try {
|
||
const stored = window.localStorage.getItem(STORAGE_KEY);
|
||
if (stored) {
|
||
const parsed = JSON.parse(stored);
|
||
if (isGraphData(parsed)) setGraph(parsed);
|
||
}
|
||
} catch {
|
||
// Keep the bundled demo if local data cannot be read.
|
||
}
|
||
setHydrated(true);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (!hydrated) return;
|
||
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(graph));
|
||
}, [graph, hydrated]);
|
||
|
||
useEffect(() => {
|
||
const canvas = canvasRef.current;
|
||
if (!canvas) return;
|
||
const resize = () => {
|
||
const rect = canvas.getBoundingClientRect();
|
||
const dpr = Math.min(window.devicePixelRatio || 1, 2);
|
||
canvas.width = Math.max(1, Math.round(rect.width * dpr));
|
||
canvas.height = Math.max(1, Math.round(rect.height * dpr));
|
||
setCanvasSize({ width: rect.width, height: rect.height, dpr });
|
||
};
|
||
resize();
|
||
const observer = new ResizeObserver(resize);
|
||
observer.observe(canvas);
|
||
return () => observer.disconnect();
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const canvas = canvasRef.current;
|
||
if (!canvas) return;
|
||
const context = canvas.getContext("2d");
|
||
if (!context) return;
|
||
let frame = 0;
|
||
const draw = (time: number) => {
|
||
drawGraph({
|
||
context,
|
||
width: canvasSize.width,
|
||
height: canvasSize.height,
|
||
dpr: canvasSize.dpr,
|
||
time,
|
||
stars,
|
||
graph,
|
||
viewport,
|
||
selectedNodeId,
|
||
selectedEdgeId,
|
||
connectFrom,
|
||
query,
|
||
typeFilter,
|
||
});
|
||
frame = window.requestAnimationFrame(draw);
|
||
};
|
||
frame = window.requestAnimationFrame(draw);
|
||
return () => window.cancelAnimationFrame(frame);
|
||
}, [canvasSize, stars, graph, viewport, selectedNodeId, selectedEdgeId, connectFrom, query, typeFilter]);
|
||
|
||
const notify = (message: string) => {
|
||
setToast(message);
|
||
window.setTimeout(() => setToast(""), 1800);
|
||
};
|
||
|
||
const updateNode = (id: string, patch: Partial<GraphNode>) => {
|
||
setGraph((current) => ({ ...current, nodes: current.nodes.map((node) => node.id === id ? { ...node, ...patch } : node) }));
|
||
};
|
||
|
||
const updateEdge = (id: string, patch: Partial<GraphEdge>) => {
|
||
setGraph((current) => ({ ...current, edges: current.edges.map((edge) => edge.id === id ? { ...edge, ...patch } : edge) }));
|
||
};
|
||
|
||
const pointInCanvas = (event: { clientX: number; clientY: number }) => {
|
||
const rect = canvasRef.current?.getBoundingClientRect();
|
||
return { x: event.clientX - (rect?.left ?? 0), y: event.clientY - (rect?.top ?? 0) };
|
||
};
|
||
|
||
const screenPoint = (node: GraphNode) => ({
|
||
x: canvasSize.width / 2 + viewport.x + node.x * viewport.scale,
|
||
y: canvasSize.height / 2 + viewport.y + node.y * viewport.scale,
|
||
});
|
||
|
||
const hitNode = (point: { x: number; y: number }) => {
|
||
for (let index = graph.nodes.length - 1; index >= 0; index -= 1) {
|
||
const node = graph.nodes[index];
|
||
const screen = screenPoint(node);
|
||
const card = nodeCardSize(node, viewport.scale);
|
||
if (Math.abs(point.x - screen.x) <= card.width / 2 + 5 && Math.abs(point.y - screen.y) <= card.height / 2 + 5) return node;
|
||
}
|
||
return null;
|
||
};
|
||
|
||
const hitEdge = (point: { x: number; y: number }) => graph.edges.find((edge) => {
|
||
const source = graph.nodes.find((node) => node.id === edge.source);
|
||
const target = graph.nodes.find((node) => node.id === edge.target);
|
||
if (!source || !target) return false;
|
||
return distanceToSegment(point, screenPoint(source), screenPoint(target)) < 9;
|
||
}) ?? null;
|
||
|
||
const handlePointerDown = (event: ReactPointerEvent<HTMLCanvasElement>) => {
|
||
const point = pointInCanvas(event);
|
||
const node = hitNode(point);
|
||
if (connectMode && node) return;
|
||
event.currentTarget.setPointerCapture(event.pointerId);
|
||
interactionRef.current = node
|
||
? { mode: "node", nodeId: node.id, startX: point.x, startY: point.y, baseX: node.x, baseY: node.y, moved: false }
|
||
: { mode: "pan", startX: point.x, startY: point.y, baseX: viewport.x, baseY: viewport.y, moved: false };
|
||
};
|
||
|
||
const handlePointerMove = (event: ReactPointerEvent<HTMLCanvasElement>) => {
|
||
const interaction = interactionRef.current;
|
||
const point = pointInCanvas(event);
|
||
if (!interaction) {
|
||
const node = hitNode(point);
|
||
setHoveredNodeId(node?.id ?? null);
|
||
setHoverPoint({
|
||
x: clamp(point.x + 15, 12, Math.max(12, canvasSize.width - 238)),
|
||
y: clamp(point.y + 15, 58, Math.max(58, canvasSize.height - 150)),
|
||
});
|
||
return;
|
||
}
|
||
setHoveredNodeId(null);
|
||
const dx = point.x - interaction.startX;
|
||
const dy = point.y - interaction.startY;
|
||
if (Math.hypot(dx, dy) > 3) interaction.moved = true;
|
||
if (interaction.mode === "node" && interaction.nodeId) {
|
||
updateNode(interaction.nodeId, { x: interaction.baseX + dx / viewport.scale, y: interaction.baseY + dy / viewport.scale });
|
||
} else {
|
||
setViewport((current) => ({ ...current, x: interaction.baseX + dx, y: interaction.baseY + dy }));
|
||
}
|
||
};
|
||
|
||
const handlePointerUp = (event: ReactPointerEvent<HTMLCanvasElement>) => {
|
||
if (interactionRef.current?.moved) suppressClickRef.current = true;
|
||
interactionRef.current = null;
|
||
if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
|
||
};
|
||
|
||
const handleCanvasClick = (event: ReactPointerEvent<HTMLCanvasElement>) => {
|
||
if (suppressClickRef.current) {
|
||
suppressClickRef.current = false;
|
||
return;
|
||
}
|
||
const point = pointInCanvas(event);
|
||
const node = hitNode(point);
|
||
if (node) {
|
||
if (connectMode) {
|
||
if (!connectFrom) {
|
||
setConnectFrom(node.id);
|
||
setSelectedNodeId(node.id);
|
||
setSelectedEdgeId(null);
|
||
notify(`已选择起点：${node.label}`);
|
||
} else if (connectFrom === node.id) {
|
||
notify("请选择另一个节点");
|
||
} else {
|
||
setPendingEdge({ source: connectFrom, target: node.id });
|
||
setNewEdge({ label: "关联", type: "自定义" });
|
||
setShowAddEdge(true);
|
||
}
|
||
return;
|
||
}
|
||
setSelectedNodeId(node.id);
|
||
setSelectedEdgeId(null);
|
||
return;
|
||
}
|
||
if (connectMode) return;
|
||
const edge = hitEdge(point);
|
||
setSelectedEdgeId(edge?.id ?? null);
|
||
setSelectedNodeId(null);
|
||
};
|
||
|
||
const handleDoubleClick = (event: ReactPointerEvent<HTMLCanvasElement>) => {
|
||
const point = pointInCanvas(event);
|
||
if (hitNode(point)) return;
|
||
setAddPoint({
|
||
x: (point.x - canvasSize.width / 2 - viewport.x) / viewport.scale,
|
||
y: (point.y - canvasSize.height / 2 - viewport.y) / viewport.scale,
|
||
});
|
||
setShowAddNode(true);
|
||
};
|
||
|
||
const handleWheel = (event: ReactWheelEvent<HTMLCanvasElement>) => {
|
||
event.preventDefault();
|
||
const point = pointInCanvas(event);
|
||
const nextScale = clamp(viewport.scale * (event.deltaY > 0 ? 0.9 : 1.1), 0.45, 2.2);
|
||
const worldX = (point.x - canvasSize.width / 2 - viewport.x) / viewport.scale;
|
||
const worldY = (point.y - canvasSize.height / 2 - viewport.y) / viewport.scale;
|
||
setViewport({
|
||
scale: nextScale,
|
||
x: point.x - canvasSize.width / 2 - worldX * nextScale,
|
||
y: point.y - canvasSize.height / 2 - worldY * nextScale,
|
||
});
|
||
};
|
||
|
||
const openAddNode = () => {
|
||
setAddPoint({ x: -viewport.x / viewport.scale, y: -viewport.y / viewport.scale });
|
||
setNewNode({ label: "", type: "character", description: "", tags: "" });
|
||
setShowAddNode(true);
|
||
};
|
||
|
||
const createNode = () => {
|
||
const label = newNode.label.trim();
|
||
if (!label) return notify("请输入节点名称");
|
||
const nodeType = graph.nodeTypes.find((type) => type.id === newNode.type) ?? graph.nodeTypes[0];
|
||
const node: GraphNode = {
|
||
id: `node-${Date.now()}`,
|
||
label,
|
||
type: nodeType.id,
|
||
x: addPoint.x,
|
||
y: addPoint.y,
|
||
color: nodeType.color,
|
||
size: 21,
|
||
description: newNode.description.trim() || "暂无说明",
|
||
tags: newNode.tags.split(/[,，]/).map((tag) => tag.trim()).filter(Boolean),
|
||
};
|
||
setGraph((current) => ({ ...current, nodes: [...current.nodes, node] }));
|
||
setSelectedNodeId(node.id);
|
||
setSelectedEdgeId(null);
|
||
setShowAddNode(false);
|
||
notify("节点已添加");
|
||
};
|
||
|
||
const createEdge = () => {
|
||
if (!pendingEdge.source || !pendingEdge.target) return;
|
||
const duplicate = graph.edges.some((edge) =>
|
||
(edge.source === pendingEdge.source && edge.target === pendingEdge.target)
|
||
|| (edge.source === pendingEdge.target && edge.target === pendingEdge.source));
|
||
if (duplicate) {
|
||
setShowAddEdge(false);
|
||
setConnectFrom(null);
|
||
return notify("这两个节点已经存在关联");
|
||
}
|
||
const edge: GraphEdge = {
|
||
id: `edge-${Date.now()}`,
|
||
source: pendingEdge.source,
|
||
target: pendingEdge.target,
|
||
label: newEdge.label.trim() || "关联",
|
||
type: newEdge.type,
|
||
};
|
||
setGraph((current) => ({ ...current, edges: [...current.edges, edge] }));
|
||
setSelectedEdgeId(edge.id);
|
||
setSelectedNodeId(null);
|
||
setShowAddEdge(false);
|
||
setConnectFrom(null);
|
||
notify("直线关联已建立");
|
||
};
|
||
|
||
const deleteNode = (id: string) => {
|
||
setGraph((current) => ({
|
||
...current,
|
||
nodes: current.nodes.filter((node) => node.id !== id),
|
||
edges: current.edges.filter((edge) => edge.source !== id && edge.target !== id),
|
||
}));
|
||
setSelectedNodeId(null);
|
||
if (connectFrom === id) setConnectFrom(null);
|
||
notify("节点及其关联已删除");
|
||
};
|
||
|
||
const deleteEdge = (id: string) => {
|
||
setGraph((current) => ({ ...current, edges: current.edges.filter((edge) => edge.id !== id) }));
|
||
setSelectedEdgeId(null);
|
||
notify("关联已删除");
|
||
};
|
||
|
||
const resetGraph = () => {
|
||
setGraph(cloneGraph(INITIAL_GRAPH));
|
||
setViewport({ x: 0, y: 0, scale: 1 });
|
||
setSelectedNodeId("project-starsea");
|
||
setSelectedEdgeId(null);
|
||
setConnectFrom(null);
|
||
notify("已恢复演示数据");
|
||
};
|
||
|
||
const exportGraph = () => {
|
||
const blob = new Blob([JSON.stringify(graph, null, 2)], { type: "application/json;charset=utf-8" });
|
||
const url = URL.createObjectURL(blob);
|
||
const anchor = document.createElement("a");
|
||
anchor.href = url;
|
||
anchor.download = "star-graph.json";
|
||
anchor.click();
|
||
URL.revokeObjectURL(url);
|
||
notify("JSON 已导出");
|
||
};
|
||
|
||
const importGraph = async (event: ChangeEvent<HTMLInputElement>) => {
|
||
const file = event.target.files?.[0];
|
||
if (!file) return;
|
||
try {
|
||
const parsed = JSON.parse(await file.text());
|
||
if (!isGraphData(parsed)) throw new Error("invalid");
|
||
setGraph(parsed);
|
||
setSelectedNodeId(parsed.nodes[0]?.id ?? null);
|
||
setSelectedEdgeId(null);
|
||
notify("JSON 已导入");
|
||
} catch {
|
||
notify("JSON 格式不正确");
|
||
}
|
||
event.target.value = "";
|
||
};
|
||
|
||
const focusNode = (node: GraphNode) => {
|
||
setViewport((current) => ({ ...current, x: -node.x * current.scale, y: -node.y * current.scale }));
|
||
setSelectedNodeId(node.id);
|
||
setSelectedEdgeId(null);
|
||
};
|
||
|
||
return (
|
||
<div className={styles.page}>
|
||
<header className={styles.header}>
|
||
<Link className={styles.brand} href="/"><span>✦</span><div><strong>StarGraph</strong><small>星空关系网络</small></div></Link>
|
||
<nav><Link href="/worklist">工作列表</Link><Link href="/approval">审批流程</Link><Link className={styles.activeNav} href="/stargraph">星图网络</Link></nav>
|
||
<div className={styles.headerStats}><span><b>{graph.nodes.length}</b> 节点</span><span><b>{graph.edges.length}</b> 关联</span><em>{hydrated ? "● 已自动保存" : "正在读取…"}</em></div>
|
||
</header>
|
||
|
||
<div className={styles.workspace}>
|
||
<aside className={styles.sidebar}>
|
||
<div className={styles.sideHeading}><span>GRAPH EXPLORER</span><h1>{graph.title}</h1><p>{graph.subtitle}</p></div>
|
||
<label className={styles.search}><span>⌕</span><input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="搜索节点或标签" />{query && <button onClick={() => setQuery("")}>×</button>}</label>
|
||
<div className={styles.filters}>
|
||
<button className={typeFilter === "all" ? styles.filterActive : ""} onClick={() => setTypeFilter("all")}><i style={{ background: "#a9b1d6" }} />全部<b>{graph.nodes.length}</b></button>
|
||
{graph.nodeTypes.map((type) => <button key={type.id} className={typeFilter === type.id ? styles.filterActive : ""} onClick={() => setTypeFilter(type.id)}><i style={{ background: type.color }} />{type.name}<b>{graph.nodes.filter((node) => node.type === type.id).length}</b></button>)}
|
||
</div>
|
||
<div className={styles.nodeListHeader}><span>节点列表</span><b>{visibleNodes.length}</b></div>
|
||
<div className={styles.nodeList}>
|
||
{visibleNodes.map((node) => <button key={node.id} className={selectedNodeId === node.id ? styles.nodeActive : ""} onClick={() => focusNode(node)}><i style={{ background: node.color, boxShadow: `0 0 12px ${node.color}` }} /><span><strong>{node.label}</strong><small>{typeName(graph, node.type)} · {graph.edges.filter((edge) => edge.source === node.id || edge.target === node.id).length} 条关联</small></span><em>›</em></button>)}
|
||
{visibleNodes.length === 0 && <p className={styles.emptyList}>没有匹配的节点</p>}
|
||
</div>
|
||
<div className={styles.dataActions}><button onClick={exportGraph}>⇩ 导出 JSON</button><button onClick={() => importRef.current?.click()}>⇧ 导入</button><button onClick={resetGraph}>↺ 重置</button><input ref={importRef} type="file" accept="application/json,.json" onChange={importGraph} /></div>
|
||
</aside>
|
||
|
||
<main className={`${styles.stage} ${connectMode ? styles.connecting : ""}`}>
|
||
<canvas
|
||
ref={canvasRef}
|
||
className={styles.canvas}
|
||
role="img"
|
||
aria-label={`星空关系图，共 ${graph.nodes.length} 个节点和 ${graph.edges.length} 条直线关联。可拖动节点或画布，滚轮缩放。`}
|
||
onPointerDown={handlePointerDown}
|
||
onPointerMove={handlePointerMove}
|
||
onPointerUp={handlePointerUp}
|
||
onPointerCancel={handlePointerUp}
|
||
onPointerLeave={() => setHoveredNodeId(null)}
|
||
onClick={handleCanvasClick}
|
||
onDoubleClick={handleDoubleClick}
|
||
onWheel={handleWheel}
|
||
/>
|
||
{hoveredNode && <aside className={hoverStyles.hoverCard} style={{ left: hoverPoint.x, top: hoverPoint.y }} aria-live="polite">
|
||
<div className={hoverStyles.hoverHeader}><i style={{ background: hoveredNode.color, boxShadow: `0 0 12px ${hoveredNode.color}` }} /><span><small>{typeName(graph, hoveredNode.type)}</small><strong>{hoveredNode.label}</strong></span><em>{graph.edges.filter((edge) => edge.source === hoveredNode.id || edge.target === hoveredNode.id).length} 关联</em></div>
|
||
<p>{hoveredNode.description}</p>
|
||
{hoveredNode.tags.length > 0 && <div className={hoverStyles.hoverTags}>{hoveredNode.tags.map((tag) => <span key={tag}>{tag}</span>)}</div>}
|
||
</aside>}
|
||
<div className={styles.canvasToolbar}>
|
||
<button className={styles.primaryButton} onClick={openAddNode}><span>＋</span>添加节点</button>
|
||
<button className={connectMode ? styles.connectButtonActive : ""} onClick={() => { setConnectMode((value) => !value); setConnectFrom(null); }}><span>⌁</span>{connectMode ? "退出关联" : "关联节点"}</button>
|
||
<i />
|
||
<button title="放大" onClick={() => setViewport((current) => ({ ...current, scale: clamp(current.scale + 0.15, 0.45, 2.2) }))}>＋</button>
|
||
<button title="缩小" onClick={() => setViewport((current) => ({ ...current, scale: clamp(current.scale - 0.15, 0.45, 2.2) }))}>−</button>
|
||
<button title="居中" onClick={() => setViewport({ x: 0, y: 0, scale: 1 })}>⌾</button>
|
||
<span className={styles.zoomValue}>{Math.round(viewport.scale * 100)}%</span>
|
||
</div>
|
||
{connectMode && <div className={styles.connectHint}><span>{connectFrom ? "2" : "1"}</span><p><strong>{fromNode ? `起点：${fromNode.label}` : "请选择第一个节点"}</strong><small>{fromNode ? "再点击另一个表单节点，即可建立直线关联" : "点击任意方形表单节点作为关联起点"}</small></p>{connectFrom && <button onClick={() => setConnectFrom(null)}>重选</button>}</div>}
|
||
<div className={styles.canvasHelp}><span>拖动画布移动</span><span>滚轮缩放</span><span>拖动节点调整位置</span><span>双击空白处添加</span></div>
|
||
<div className={styles.minimapLabel}><span>LIVE MAP</span><b>直线关系模式</b></div>
|
||
<p className={styles.srOnly}>节点包括：{graph.nodes.map((node) => node.label).join("、")}。关联包括：{graph.edges.map((edge) => `${nodeLabel(graph, edge.source)}与${nodeLabel(graph, edge.target)}：${edge.label}`).join("；")}。</p>
|
||
</main>
|
||
|
||
<aside className={styles.inspector}>
|
||
<div className={styles.inspectorHeading}><div><span>INSPECTOR</span><strong>{selectedNode ? "节点属性" : selectedEdge ? "关联属性" : "属性面板"}</strong></div><small>{selectedNode ? "NODE" : selectedEdge ? "EDGE" : "EMPTY"}</small></div>
|
||
{selectedNode ? <>
|
||
<div className={styles.nodePreview}><i style={{ background: selectedNode.color, boxShadow: `0 0 28px ${selectedNode.color}`, borderRadius: "7px" }} /><div><strong>{selectedNode.label}</strong><span>{typeName(graph, selectedNode.type)}</span></div><em>{graph.edges.filter((edge) => edge.source === selectedNode.id || edge.target === selectedNode.id).length}</em></div>
|
||
<div className={styles.fieldGroup}>
|
||
<label><span>节点名称</span><input value={selectedNode.label} onChange={(event) => updateNode(selectedNode.id, { label: event.target.value })} /></label>
|
||
<label><span>节点类型</span><select value={selectedNode.type} onChange={(event) => { const type = graph.nodeTypes.find((item) => item.id === event.target.value); updateNode(selectedNode.id, { type: event.target.value, color: type?.color ?? selectedNode.color }); }}>{graph.nodeTypes.map((type) => <option key={type.id} value={type.id}>{type.name}</option>)}</select></label>
|
||
<label><span>说明</span><textarea rows={4} value={selectedNode.description} onChange={(event) => updateNode(selectedNode.id, { description: event.target.value })} /></label>
|
||
<label><span>标签（逗号分隔）</span><input value={selectedNode.tags.join("，")} onChange={(event) => updateNode(selectedNode.id, { tags: event.target.value.split(/[,，]/).map((tag) => tag.trim()).filter(Boolean) })} /></label>
|
||
<label><span>发光颜色</span><div className={styles.colorInput}><input type="color" value={selectedNode.color} onChange={(event) => updateNode(selectedNode.id, { color: event.target.value })} /><code>{selectedNode.color.toUpperCase()}</code></div></label>
|
||
<label><span>节点大小</span><div className={styles.rangeInput}><input type="range" min="14" max="36" value={selectedNode.size} onChange={(event) => updateNode(selectedNode.id, { size: Number(event.target.value) })} /><b>{selectedNode.size}</b></div></label>
|
||
</div>
|
||
<div className={styles.relationBlock}><div><strong>已连接节点</strong><span>{graph.edges.filter((edge) => edge.source === selectedNode.id || edge.target === selectedNode.id).length}</span></div>{graph.edges.filter((edge) => edge.source === selectedNode.id || edge.target === selectedNode.id).map((edge) => { const otherId = edge.source === selectedNode.id ? edge.target : edge.source; const other = graph.nodes.find((node) => node.id === otherId); return <button key={edge.id} onClick={() => { setSelectedEdgeId(edge.id); setSelectedNodeId(null); }}><i style={{ background: other?.color }} /><span><strong>{other?.label}</strong><small>{edge.label}</small></span><em>›</em></button>; })}</div>
|
||
<button className={styles.deleteButton} onClick={() => deleteNode(selectedNode.id)}>删除此节点</button>
|
||
</> : selectedEdge ? <>
|
||
<div className={styles.edgePreview}><span style={{ background: graph.nodes.find((node) => node.id === selectedEdge.source)?.color, borderRadius: "3px" }} /><i /><span style={{ background: graph.nodes.find((node) => node.id === selectedEdge.target)?.color, borderRadius: "3px" }} /></div>
|
||
<div className={styles.edgeEndpoints}><strong>{nodeLabel(graph, selectedEdge.source)}</strong><small>直线连接至</small><strong>{nodeLabel(graph, selectedEdge.target)}</strong></div>
|
||
<div className={styles.fieldGroup}>
|
||
<label><span>关联名称</span><input value={selectedEdge.label} onChange={(event) => updateEdge(selectedEdge.id, { label: event.target.value })} /></label>
|
||
<label><span>关联类型</span><select value={selectedEdge.type} onChange={(event) => updateEdge(selectedEdge.id, { type: event.target.value })}>{RELATION_TYPES.map((type) => <option key={type}>{type}</option>)}</select></label>
|
||
</div>
|
||
<div className={styles.edgeNote}><span>╱</span><p><strong>直线关联</strong><small>节点移动后，连接线会自动跟随更新。</small></p></div>
|
||
<button className={styles.deleteButton} onClick={() => deleteEdge(selectedEdge.id)}>删除此关联</button>
|
||
</> : <div className={styles.emptyInspector}><span>✦</span><h2>选择一个节点</h2><p>点击画布中的节点或连接线，可在这里查看和修改属性。</p><button onClick={openAddNode}>＋ 添加第一个节点</button></div>}
|
||
</aside>
|
||
</div>
|
||
|
||
{showAddNode && <div className={styles.modalBackdrop} onMouseDown={(event) => { if (event.target === event.currentTarget) setShowAddNode(false); }}><section className={styles.modal} role="dialog" aria-modal="true" aria-labelledby="add-node-title"><div className={styles.modalHeader}><div><span>NEW STAR</span><h2 id="add-node-title">添加新节点</h2></div><button onClick={() => setShowAddNode(false)}>×</button></div><div className={styles.modalBody}><label><span>节点名称 *</span><input autoFocus value={newNode.label} onChange={(event) => setNewNode({ ...newNode, label: event.target.value })} placeholder="例如：新角色、线索或地点" onKeyDown={(event) => { if (event.key === "Enter") createNode(); }} /></label><label><span>节点类型</span><div className={styles.typeCards}>{graph.nodeTypes.map((type) => <button key={type.id} className={newNode.type === type.id ? styles.typeCardActive : ""} onClick={() => setNewNode({ ...newNode, type: type.id })}><i style={{ background: type.color, boxShadow: `0 0 12px ${type.color}` }} />{type.name}</button>)}</div></label><label><span>说明</span><textarea rows={3} value={newNode.description} onChange={(event) => setNewNode({ ...newNode, description: event.target.value })} placeholder="简要描述这个节点" /></label><label><span>标签</span><input value={newNode.tags} onChange={(event) => setNewNode({ ...newNode, tags: event.target.value })} placeholder="使用逗号分隔多个标签" /></label></div><div className={styles.modalFooter}><button onClick={() => setShowAddNode(false)}>取消</button><button className={styles.modalPrimary} onClick={createNode}>添加到星图</button></div></section></div>}
|
||
|
||
{showAddEdge && <div className={styles.modalBackdrop} onMouseDown={(event) => { if (event.target === event.currentTarget) setShowAddEdge(false); }}><section className={`${styles.modal} ${styles.edgeModal}`} role="dialog" aria-modal="true" aria-labelledby="add-edge-title"><div className={styles.modalHeader}><div><span>NEW CONNECTION</span><h2 id="add-edge-title">建立直线关联</h2></div><button onClick={() => setShowAddEdge(false)}>×</button></div><div className={styles.connectionPreview}><div><i style={{ background: graph.nodes.find((node) => node.id === pendingEdge.source)?.color, borderRadius: "5px" }} /><strong>{nodeLabel(graph, pendingEdge.source)}</strong></div><span><b>────────</b><small>直线</small></span><div><i style={{ background: graph.nodes.find((node) => node.id === pendingEdge.target)?.color, borderRadius: "5px" }} /><strong>{nodeLabel(graph, pendingEdge.target)}</strong></div></div><div className={styles.modalBody}><label><span>关联名称</span><input autoFocus value={newEdge.label} onChange={(event) => setNewEdge({ ...newEdge, label: event.target.value })} placeholder="例如：好友、所属、依赖" onKeyDown={(event) => { if (event.key === "Enter") createEdge(); }} /></label><label><span>关联类型</span><select value={newEdge.type} onChange={(event) => setNewEdge({ ...newEdge, type: event.target.value })}>{RELATION_TYPES.map((type) => <option key={type}>{type}</option>)}</select></label></div><div className={styles.modalFooter}><button onClick={() => setShowAddEdge(false)}>取消</button><button className={styles.modalPrimary} onClick={createEdge}>确认关联</button></div></section></div>}
|
||
|
||
{toast && <div className={styles.toast}>✓ {toast}</div>}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function drawGraph(options: {
|
||
context: CanvasRenderingContext2D;
|
||
width: number;
|
||
height: number;
|
||
dpr: number;
|
||
time: number;
|
||
stars: { x: number; y: number; size: number; alpha: number; phase: number }[];
|
||
graph: GraphData;
|
||
viewport: { x: number; y: number; scale: number };
|
||
selectedNodeId: string | null;
|
||
selectedEdgeId: string | null;
|
||
connectFrom: string | null;
|
||
query: string;
|
||
typeFilter: string;
|
||
}) {
|
||
const { context: ctx, width, height, dpr, time, stars, graph, viewport, selectedNodeId, selectedEdgeId, connectFrom, query, typeFilter } = options;
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
ctx.clearRect(0, 0, width, height);
|
||
const background = ctx.createLinearGradient(0, 0, width, height);
|
||
background.addColorStop(0, "#070a19");
|
||
background.addColorStop(0.48, "#10112b");
|
||
background.addColorStop(1, "#070b1b");
|
||
ctx.fillStyle = background;
|
||
ctx.fillRect(0, 0, width, height);
|
||
|
||
drawNebula(ctx, width * 0.2, height * 0.28, Math.max(width, height) * 0.42, "111,89,255");
|
||
drawNebula(ctx, width * 0.82, height * 0.68, Math.max(width, height) * 0.38, "39,199,217");
|
||
stars.forEach((star) => {
|
||
const pulse = 0.68 + Math.sin(time * 0.0014 + star.phase) * 0.32;
|
||
ctx.beginPath();
|
||
ctx.fillStyle = `rgba(218,231,255,${star.alpha * pulse})`;
|
||
ctx.arc(star.x * width, star.y * height, star.size, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
});
|
||
|
||
const toScreen = (node: GraphNode) => ({ x: width / 2 + viewport.x + node.x * viewport.scale, y: height / 2 + viewport.y + node.y * viewport.scale });
|
||
const matches = (node: GraphNode) => {
|
||
const search = query.trim().toLowerCase();
|
||
return (typeFilter === "all" || node.type === typeFilter) && (!search || `${node.label} ${node.tags.join(" ")}`.toLowerCase().includes(search));
|
||
};
|
||
|
||
graph.edges.forEach((edge) => {
|
||
const source = graph.nodes.find((node) => node.id === edge.source);
|
||
const target = graph.nodes.find((node) => node.id === edge.target);
|
||
if (!source || !target) return;
|
||
const sourceCenter = toScreen(source);
|
||
const targetCenter = toScreen(target);
|
||
const a = cardEdgePoint(sourceCenter, targetCenter, nodeCardSize(source, viewport.scale));
|
||
const b = cardEdgePoint(targetCenter, sourceCenter, nodeCardSize(target, viewport.scale));
|
||
const active = edge.id === selectedEdgeId;
|
||
const faded = !matches(source) || !matches(target);
|
||
ctx.save();
|
||
ctx.globalAlpha = faded ? 0.09 : active ? 1 : 0.48;
|
||
ctx.beginPath();
|
||
ctx.moveTo(a.x, a.y);
|
||
ctx.lineTo(b.x, b.y);
|
||
ctx.lineWidth = active ? 2.4 : 1.15;
|
||
ctx.strokeStyle = active ? "#e8e5ff" : "#7e86bc";
|
||
ctx.shadowBlur = active ? 12 : 4;
|
||
ctx.shadowColor = active ? "#9b8aff" : "#4d60a3";
|
||
ctx.stroke();
|
||
const mx = (a.x + b.x) / 2;
|
||
const my = (a.y + b.y) / 2;
|
||
ctx.font = '500 10px "Microsoft YaHei", "PingFang SC", sans-serif';
|
||
const labelWidth = ctx.measureText(edge.label).width + 14;
|
||
ctx.shadowBlur = 0;
|
||
ctx.fillStyle = active ? "rgba(111,92,214,.92)" : "rgba(13,17,43,.76)";
|
||
ctx.fillRect(mx - labelWidth / 2, my - 9, labelWidth, 18);
|
||
ctx.fillStyle = active ? "#ffffff" : "#aeb6dd";
|
||
ctx.textAlign = "center";
|
||
ctx.textBaseline = "middle";
|
||
ctx.fillText(edge.label, mx, my);
|
||
ctx.restore();
|
||
});
|
||
|
||
graph.nodes.forEach((node) => {
|
||
const point = toScreen(node);
|
||
const card = nodeCardSize(node, viewport.scale);
|
||
const left = point.x - card.width / 2;
|
||
const top = point.y - card.height / 2;
|
||
const active = node.id === selectedNodeId;
|
||
const linking = node.id === connectFrom;
|
||
const faded = !matches(node);
|
||
const relationCount = graph.edges.filter((edge) => edge.source === node.id || edge.target === node.id).length;
|
||
const pulse = 0.78 + Math.sin(time * 0.002 + node.x * 0.01) * 0.18;
|
||
ctx.save();
|
||
ctx.globalAlpha = faded ? 0.16 : 1;
|
||
roundedRectPath(ctx, left, top, card.width, card.height, 5);
|
||
ctx.fillStyle = "rgba(11,15,34,.96)";
|
||
ctx.shadowBlur = active || linking ? 22 : 9 * pulse;
|
||
ctx.shadowColor = node.color;
|
||
ctx.fill();
|
||
ctx.shadowBlur = 0;
|
||
ctx.lineWidth = active || linking ? 1.8 : 1;
|
||
ctx.setLineDash(linking ? [5, 3] : []);
|
||
ctx.strokeStyle = linking ? "#ffffff" : active ? node.color : "rgba(135,145,190,.35)";
|
||
ctx.stroke();
|
||
ctx.setLineDash([]);
|
||
|
||
ctx.fillStyle = node.color;
|
||
ctx.fillRect(left, top, 3, card.height);
|
||
ctx.fillStyle = hexToRgba(node.color, active ? 0.18 : 0.1);
|
||
ctx.fillRect(left + 3, top, card.width - 3, card.height);
|
||
|
||
const padding = 7;
|
||
const markerSize = clamp(card.height - 13, 9, 13);
|
||
ctx.fillStyle = node.color;
|
||
roundedRectPath(ctx, left + padding, point.y - markerSize / 2, markerSize, markerSize, 2);
|
||
ctx.fill();
|
||
ctx.font = `700 ${clamp(markerSize - 5, 7, 9)}px "Microsoft YaHei", "PingFang SC", sans-serif`;
|
||
ctx.fillStyle = "#ffffff";
|
||
ctx.textAlign = "center";
|
||
ctx.textBaseline = "middle";
|
||
ctx.fillText(typeGlyph(node.type), left + padding + markerSize / 2, point.y + .5);
|
||
ctx.font = `${active ? 700 : 600} ${clamp(card.height * .34, 9, 11)}px "Microsoft YaHei", "PingFang SC", sans-serif`;
|
||
ctx.fillStyle = active ? "#ffffff" : "#e2e7fb";
|
||
ctx.textAlign = "left";
|
||
ctx.fillText(fitCanvasText(ctx, node.label, card.width - markerSize - 34), left + padding + markerSize + 6, point.y + .5);
|
||
ctx.font = '600 8px "Microsoft YaHei", "PingFang SC", sans-serif';
|
||
ctx.textAlign = "right";
|
||
ctx.fillStyle = "#7f89aa";
|
||
ctx.fillText(String(relationCount), left + card.width - 7, point.y + .5);
|
||
if (active || linking) {
|
||
const portSize = 4;
|
||
ctx.fillStyle = linking ? "#ffffff" : node.color;
|
||
[[point.x, top], [left + card.width, point.y], [point.x, top + card.height], [left, point.y]].forEach(([x, y]) => ctx.fillRect(x - portSize / 2, y - portSize / 2, portSize, portSize));
|
||
}
|
||
ctx.restore();
|
||
});
|
||
}
|
||
|
||
function nodeCardSize(node: GraphNode, scale: number) {
|
||
const emphasis = clamp((node.size - 14) / 22, 0, 1);
|
||
return {
|
||
width: clamp((92 + emphasis * 14) * scale, 70, 118),
|
||
height: clamp((25 + emphasis * 5) * scale, 21, 32),
|
||
};
|
||
}
|
||
|
||
function cardEdgePoint(center: { x: number; y: number }, toward: { x: number; y: number }, card: { width: number; height: number }) {
|
||
const dx = toward.x - center.x;
|
||
const dy = toward.y - center.y;
|
||
if (dx === 0 && dy === 0) return center;
|
||
const xScale = dx === 0 ? Number.POSITIVE_INFINITY : card.width / 2 / Math.abs(dx);
|
||
const yScale = dy === 0 ? Number.POSITIVE_INFINITY : card.height / 2 / Math.abs(dy);
|
||
const scale = Math.min(xScale, yScale);
|
||
return { x: center.x + dx * scale, y: center.y + dy * scale };
|
||
}
|
||
|
||
function roundedRectPath(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number) {
|
||
const r = Math.min(radius, width / 2, height / 2);
|
||
ctx.beginPath();
|
||
ctx.moveTo(x + r, y);
|
||
ctx.lineTo(x + width - r, y);
|
||
ctx.quadraticCurveTo(x + width, y, x + width, y + r);
|
||
ctx.lineTo(x + width, y + height - r);
|
||
ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
|
||
ctx.lineTo(x + r, y + height);
|
||
ctx.quadraticCurveTo(x, y + height, x, y + height - r);
|
||
ctx.lineTo(x, y + r);
|
||
ctx.quadraticCurveTo(x, y, x + r, y);
|
||
ctx.closePath();
|
||
}
|
||
|
||
function fitCanvasText(ctx: CanvasRenderingContext2D, text: string, maxWidth: number) {
|
||
if (ctx.measureText(text).width <= maxWidth) return text;
|
||
let value = text;
|
||
while (value.length > 1 && ctx.measureText(`${value}…`).width > maxWidth) value = value.slice(0, -1);
|
||
return `${value}…`;
|
||
}
|
||
|
||
function hexToRgba(hex: string, alpha: number) {
|
||
const clean = hex.replace("#", "");
|
||
const value = Number.parseInt(clean.length === 3 ? clean.split("").map((char) => `${char}${char}`).join("") : clean, 16);
|
||
const red = (value >> 16) & 255;
|
||
const green = (value >> 8) & 255;
|
||
const blue = value & 255;
|
||
return `rgba(${red},${green},${blue},${alpha})`;
|
||
}
|
||
|
||
function drawNebula(ctx: CanvasRenderingContext2D, x: number, y: number, radius: number, rgb: string) {
|
||
const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
|
||
gradient.addColorStop(0, `rgba(${rgb},.12)`);
|
||
gradient.addColorStop(0.35, `rgba(${rgb},.055)`);
|
||
gradient.addColorStop(1, `rgba(${rgb},0)`);
|
||
ctx.fillStyle = gradient;
|
||
ctx.fillRect(x - radius, y - radius, radius * 2, radius * 2);
|
||
}
|
||
|
||
function makeStars(count: number) {
|
||
let seed = 12873;
|
||
const random = () => {
|
||
seed = (seed * 16807) % 2147483647;
|
||
return (seed - 1) / 2147483646;
|
||
};
|
||
return Array.from({ length: count }, () => ({ x: random(), y: random(), size: 0.3 + random() * 1.25, alpha: 0.25 + random() * 0.65, phase: random() * Math.PI * 2 }));
|
||
}
|
||
|
||
function distanceToSegment(point: { x: number; y: number }, a: { x: number; y: number }, b: { x: number; y: number }) {
|
||
const dx = b.x - a.x;
|
||
const dy = b.y - a.y;
|
||
if (dx === 0 && dy === 0) return Math.hypot(point.x - a.x, point.y - a.y);
|
||
const t = clamp(((point.x - a.x) * dx + (point.y - a.y) * dy) / (dx * dx + dy * dy), 0, 1);
|
||
return Math.hypot(point.x - (a.x + t * dx), point.y - (a.y + t * dy));
|
||
}
|
||
|
||
function clamp(value: number, min: number, max: number) {
|
||
return Math.min(max, Math.max(min, value));
|
||
}
|
||
|
||
function cloneGraph(graph: GraphData): GraphData {
|
||
return JSON.parse(JSON.stringify(graph));
|
||
}
|
||
|
||
function isGraphData(value: unknown): value is GraphData {
|
||
if (!value || typeof value !== "object") return false;
|
||
const candidate = value as Partial<GraphData>;
|
||
return Array.isArray(candidate.nodes) && Array.isArray(candidate.edges) && Array.isArray(candidate.nodeTypes);
|
||
}
|
||
|
||
function nodeLabel(graph: GraphData, id: string) {
|
||
return graph.nodes.find((node) => node.id === id)?.label ?? "未知节点";
|
||
}
|
||
|
||
function typeName(graph: GraphData, id: string) {
|
||
return graph.nodeTypes.find((type) => type.id === id)?.name ?? id;
|
||
}
|
||
|
||
function typeGlyph(type: string) {
|
||
return ({ project: "星", character: "人", world: "界", organization: "组", event: "事" } as Record<string, string>)[type] ?? "点";
|
||
}
|