mirror of
https://gitcode.com/JianFeeeee/TrulyMEM-TrueHumanMEM.git
synced 2026-10-04 00:14:26 +00:00
feat: harmonyos星图全面适配交互功能-搜索/过滤/连接高亮/拖拽/触摸/节点详情
This commit is contained in:
root
@ -5,6 +5,7 @@
|
||||
*/
|
||||
import web_webview from '@ohos.web.webview';
|
||||
import { GraphDatabase, RecallEntity } from '../model/GraphDatabase';
|
||||
import { GraphMemoryService } from '../services/GraphMemoryService';
|
||||
|
||||
// ========= 图数据结构定义 =========
|
||||
|
||||
@ -23,19 +24,46 @@ interface GraphEdgeItem {
|
||||
relation: string;
|
||||
}
|
||||
|
||||
interface NodeDetailInfo {
|
||||
name: string;
|
||||
type: string;
|
||||
mention_count: number;
|
||||
connection_count: number;
|
||||
connections: Array<{ type: string; target_name: string }>;
|
||||
}
|
||||
|
||||
// ========= WebView 原生桥接 =========
|
||||
|
||||
class NativeBridge {
|
||||
private controller: web_webview.WebviewController;
|
||||
private onRequestGraphData: () => void;
|
||||
private onNodeClickCallback: (nodeId: number, nodeName: string) => void;
|
||||
private onSearchCallback: (query: string) => void;
|
||||
|
||||
constructor(controller: web_webview.WebviewController, onRequestGraphData: () => void) {
|
||||
constructor(
|
||||
controller: web_webview.WebviewController,
|
||||
onRequestGraphData: () => void,
|
||||
onNodeClickCallback: (nodeId: number, nodeName: string) => void,
|
||||
onSearchCallback: (query: string) => void
|
||||
) {
|
||||
this.controller = controller;
|
||||
this.onRequestGraphData = onRequestGraphData;
|
||||
this.onNodeClickCallback = onNodeClickCallback;
|
||||
this.onSearchCallback = onSearchCallback;
|
||||
}
|
||||
|
||||
onNodeClick(nodeId: number, nodeName: string): void {
|
||||
console.info('Node clicked: id=' + nodeId + ', name=' + nodeName);
|
||||
if (this.onNodeClickCallback) {
|
||||
this.onNodeClickCallback(nodeId, nodeName);
|
||||
}
|
||||
}
|
||||
|
||||
onSearch(query: string): void {
|
||||
console.info('Search from WebView: ' + query);
|
||||
if (this.onSearchCallback) {
|
||||
this.onSearchCallback(query);
|
||||
}
|
||||
}
|
||||
|
||||
requestGraphData(): void {
|
||||
@ -54,11 +82,18 @@ export struct GraphPage {
|
||||
@Prop db: GraphDatabase;
|
||||
@State nodeCount: number = 0;
|
||||
@State edgeCount: number = 0;
|
||||
@State selectedNodeDetail: NodeDetailInfo | null = null;
|
||||
@State showNodeDetail: boolean = false;
|
||||
@State searchText: string = '';
|
||||
private graphService: GraphMemoryService = new GraphMemoryService(this.db);
|
||||
|
||||
// 初始化桥接对象
|
||||
private bridge: NativeBridge = new NativeBridge(this.controller, (): void => {
|
||||
this.pushGraphDataToWebView();
|
||||
});
|
||||
private bridge: NativeBridge = new NativeBridge(
|
||||
this.controller,
|
||||
(): void => { this.pushGraphDataToWebView(); },
|
||||
(nodeId: number, nodeName: string): void => { this.handleNodeClick(nodeId, nodeName); },
|
||||
(query: string): void => { this.handleSearchFromWeb(query); }
|
||||
);
|
||||
|
||||
/**
|
||||
* 外部触发刷新图数据（聊天写入新记忆后调用）
|
||||
@ -67,6 +102,46 @@ export struct GraphPage {
|
||||
await this.pushGraphDataToWebView();
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理节点点击 - 查询详细信息并显示浮层
|
||||
*/
|
||||
private async handleNodeClick(nodeId: number, nodeName: string): Promise<void> {
|
||||
try {
|
||||
// 从数据库查询节点详细信息
|
||||
const detail = await this.graphService.getNodeDetail(nodeName);
|
||||
if (detail) {
|
||||
this.selectedNodeDetail = detail;
|
||||
this.showNodeDetail = true;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('handleNodeClick error: ' + JSON.stringify(err));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理来自 WebView 的搜索请求
|
||||
*/
|
||||
private handleSearchFromWeb(query: string): void {
|
||||
this.searchText = query;
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理搜索输入 - 通知 WebView 过滤
|
||||
*/
|
||||
private onSearchInput(value: string): void {
|
||||
this.searchText = value;
|
||||
const jsCode = `window.dispatchEvent(new MessageEvent('message', { data: { type: 'search_nodes', query: '${value}' } }));`;
|
||||
this.controller.runJavaScript(jsCode);
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭节点详情浮层
|
||||
*/
|
||||
private closeNodeDetail(): void {
|
||||
this.showNodeDetail = false;
|
||||
this.selectedNodeDetail = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从数据库读取全量图数据，通过 runJavaScript 推送给 WebView
|
||||
*/
|
||||
@ -137,13 +212,15 @@ export struct GraphPage {
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Stack() {
|
||||
// WebView 显示 3D 星图
|
||||
Web({ src: $rawfile('graph.html'), controller: this.controller })
|
||||
.javaScriptAccess(true)
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
// 页面加载完成后推送数据
|
||||
.zoomAccess(true) // 启用缩放
|
||||
// 捏合手势支持 - 双指缩放
|
||||
.pinchGesture(PinchGesture({ fingers: 2 }))
|
||||
.onPageEnd(() => {
|
||||
this.pushGraphDataToWebView();
|
||||
})
|
||||
@ -151,10 +228,93 @@ export struct GraphPage {
|
||||
.javaScriptProxy({
|
||||
object: this.bridge,
|
||||
name: 'nativeBridge',
|
||||
methodList: ['onNodeClick'],
|
||||
methodList: ['onNodeClick', 'onSearch'],
|
||||
asyncMethodList: ['requestGraphData'],
|
||||
controller: this.controller
|
||||
})
|
||||
|
||||
// 搜索框组件 - 在 WebView 上方
|
||||
Column() {
|
||||
TextInput({ placeholder: '搜索节点...', text: this.searchText })
|
||||
.width('80%')
|
||||
.height(40)
|
||||
.backgroundColor('rgba(10, 10, 26, 0.8)')
|
||||
.fontColor('#ffffff')
|
||||
.placeholderColor('#666688')
|
||||
.borderRadius(8)
|
||||
.border({ width: 1, color: 'rgba(100, 100, 255, 0.3)' })
|
||||
.margin({ top: 20 })
|
||||
.onChange((value: string) => {
|
||||
this.onSearchInput(value);
|
||||
})
|
||||
}
|
||||
.width('100%')
|
||||
.alignContent(Alignment.Top)
|
||||
.position({ x: 0, y: 0 })
|
||||
.zIndex(10)
|
||||
|
||||
// 节点详情浮层
|
||||
if (this.showNodeDetail && this.selectedNodeDetail !== null) {
|
||||
Column() {
|
||||
Column() {
|
||||
Text(this.selectedNodeDetail.name)
|
||||
.fontSize(18)
|
||||
.fontColor('#44ff88')
|
||||
.fontWeight(FontWeight.Bold)
|
||||
.margin({ bottom: 10 })
|
||||
|
||||
Text('类型: ' + this.selectedNodeDetail.type)
|
||||
.fontSize(14)
|
||||
.fontColor('#aaaacc')
|
||||
|
||||
Text('提及次数: ' + this.selectedNodeDetail.mention_count)
|
||||
.fontSize(14)
|
||||
.fontColor('#aaaacc')
|
||||
|
||||
Text('连接数: ' + this.selectedNodeDetail.connection_count)
|
||||
.fontSize(14)
|
||||
.fontColor('#aaaacc')
|
||||
|
||||
if (this.selectedNodeDetail.connections && this.selectedNodeDetail.connections.length > 0) {
|
||||
Text('连接关系:')
|
||||
.fontSize(14)
|
||||
.fontColor('#8888aa')
|
||||
.margin({ top: 10, bottom: 5 })
|
||||
List() {
|
||||
ForEach(this.selectedNodeDetail.connections, (conn: { type: string; target_name: string }) => {
|
||||
ListItem() {
|
||||
Text(conn.type + ': ' + conn.target_name)
|
||||
.fontSize(12)
|
||||
.fontColor('#aaaacc')
|
||||
}
|
||||
})
|
||||
}
|
||||
.height(100)
|
||||
}
|
||||
|
||||
Button('关闭')
|
||||
.width(80)
|
||||
.height(30)
|
||||
.margin({ top: 15 })
|
||||
.backgroundColor('rgba(100, 100, 255, 0.3)')
|
||||
.fontColor('#ffffff')
|
||||
.onClick(() => {
|
||||
this.closeNodeDetail();
|
||||
})
|
||||
}
|
||||
.padding(20)
|
||||
.backgroundColor('rgba(10, 10, 26, 0.95)')
|
||||
.borderRadius(12)
|
||||
.border({ width: 1, color: 'rgba(100, 100, 255, 0.3)' })
|
||||
.width(300)
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
.backgroundColor('rgba(0, 0, 0, 0.5)')
|
||||
.justifyContent(FlexAlign.Center)
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.zIndex(20)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
|
||||
@ -748,4 +748,181 @@ export class GraphMemoryService {
|
||||
const graphData: GraphData = { nodes, edges };
|
||||
return graphData;
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询节点的完整信息 — 自身属性 + 所有相连关系 + 相邻节点名列表
|
||||
*/
|
||||
async getNodeDetail(nodeName: string): Promise<NodeDetailInfo | null> {
|
||||
try {
|
||||
const recallResult = await this.db.recall(nodeName, [nodeName], 1);
|
||||
if (recallResult.entities.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const entity = recallResult.entities[0];
|
||||
const connections: Array<{ type: string; target_name: string }> = [];
|
||||
let connectionCount = 0;
|
||||
|
||||
for (const rel of recallResult.relations) {
|
||||
if (rel.source === nodeName) {
|
||||
connections.push({
|
||||
type: rel.type,
|
||||
target_name: rel.target
|
||||
});
|
||||
connectionCount++;
|
||||
} else if (rel.target === nodeName) {
|
||||
connections.push({
|
||||
type: rel.type + ' (反向)',
|
||||
target_name: rel.source
|
||||
});
|
||||
connectionCount++;
|
||||
}
|
||||
}
|
||||
|
||||
const detail: NodeDetailInfo = {
|
||||
name: entity.name,
|
||||
type: entity.type,
|
||||
mention_count: entity.mention_count,
|
||||
connection_count: connectionCount,
|
||||
connections
|
||||
};
|
||||
return detail;
|
||||
} catch (err) {
|
||||
console.error('getNodeDetail error: ' + JSON.stringify(err));
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 返回带连接度数的图数据（每个节点增加 degree 字段）
|
||||
*/
|
||||
async getJoinedData(): Promise<GraphData> {
|
||||
const graphData = await this.getGraphDataForView();
|
||||
|
||||
// 计算每个节点的连接度数
|
||||
const degreeMap: Record<number, number> = {};
|
||||
for (const edge of graphData.edges) {
|
||||
degreeMap[edge.from] = (degreeMap[edge.from] || 0) + 1;
|
||||
degreeMap[edge.to] = (degreeMap[edge.to] || 0) + 1;
|
||||
}
|
||||
|
||||
// 为节点添加 degree 字段（通过扩展 NodeData）
|
||||
const nodesWithDegree = graphData.nodes.map(node => ({
|
||||
...node,
|
||||
degree: degreeMap[node.id] || 0
|
||||
}));
|
||||
|
||||
return { nodes: nodesWithDegree as any[], edges: graphData.edges };
|
||||
}
|
||||
}
|
||||
|
||||
// ========= NodeDetailInfo 接口定义 =========
|
||||
|
||||
interface NodeDetailInfo {
|
||||
name: string;
|
||||
type: string;
|
||||
mention_count: number;
|
||||
connection_count: number;
|
||||
connections: Array<{ type: string; target_name: string }>;
|
||||
}
|
||||
|
||||
for (const rel of recallResult.relations) {
|
||||
const from = nameToId[rel.source];
|
||||
const to = nameToId[rel.target];
|
||||
if (from !== undefined && to !== undefined) {
|
||||
const edge: EdgeData = {
|
||||
from,
|
||||
to,
|
||||
label: rel.type,
|
||||
weight: rel.confidence
|
||||
};
|
||||
edges.push(edge);
|
||||
}
|
||||
}
|
||||
|
||||
const graphData: GraphData = { nodes, edges };
|
||||
return graphData;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取节点详细信息——自身属性 + 所有相连关系 + 相邻节点名列表
|
||||
* 供 GraphPage 节点点击后查询用
|
||||
*/
|
||||
async getNodeDetail(nodeName: string): Promise<{
|
||||
name: string;
|
||||
type: string;
|
||||
mention_count: number;
|
||||
connection_count: number;
|
||||
connections: Array<{ type: string; target_name: string }>;
|
||||
} | null> {
|
||||
try {
|
||||
// 搜索节点
|
||||
const searchResults = await this.db.search(nodeName);
|
||||
const node = searchResults.find(n => n.name === nodeName);
|
||||
if (!node) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// 查询与该节点相关的所有关系
|
||||
const recallResult = await this.db.recall(nodeName, [nodeName], 1);
|
||||
const connections: Array<{ type: string; target_name: string }> = [];
|
||||
|
||||
for (const rel of recallResult.relations) {
|
||||
if (rel.source === nodeName) {
|
||||
connections.push({ type: rel.type, target_name: rel.target });
|
||||
} else if (rel.target === nodeName) {
|
||||
connections.push({ type: rel.type + '(反向)', target_name: rel.source });
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
name: node.name,
|
||||
type: node.type,
|
||||
mention_count: node.mentions,
|
||||
connection_count: connections.length,
|
||||
connections
|
||||
};
|
||||
} catch (e) {
|
||||
console.error('getNodeDetail error: ' + JSON.stringify(e));
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取带连接度的图数据
|
||||
* 每个节点增加 degree 字段，供前端根据度调整显示大小
|
||||
*/
|
||||
async getJoinedData(): Promise<GraphData & { stats: { maxDegree: number; avgDegree: number } }> {
|
||||
const graphData = await this.getGraphDataForView();
|
||||
|
||||
// 计算每个节点的度
|
||||
const degreeMap: Record<number, number> = {};
|
||||
for (const node of graphData.nodes) {
|
||||
degreeMap[node.id] = 0;
|
||||
}
|
||||
for (const edge of graphData.edges) {
|
||||
degreeMap[edge.from] = (degreeMap[edge.from] || 0) + 1;
|
||||
degreeMap[edge.to] = (degreeMap[edge.to] || 0) + 1;
|
||||
}
|
||||
|
||||
// 为每个节点附加度
|
||||
const enrichedNodes: NodeData[] = [];
|
||||
for (const n of graphData.nodes) {
|
||||
const enriched: NodeData & { degree: number } = n as (NodeData & { degree: number });
|
||||
enriched.degree = degreeMap[n.id] || 0;
|
||||
enrichedNodes.push(enriched);
|
||||
}
|
||||
|
||||
const degrees = Object.values(degreeMap);
|
||||
const maxDegree = Math.max(...degrees, 1);
|
||||
const avgDegree = degrees.length > 0
|
||||
? degrees.reduce((a, b) => a + b, 0) / degrees.length
|
||||
: 0;
|
||||
|
||||
return {
|
||||
nodes: enrichedNodes,
|
||||
edges: graphData.edges,
|
||||
stats: { maxDegree, avgDegree }
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,6 +19,23 @@
|
||||
#node-info .label { color: #8888aa; }
|
||||
#loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; color: #4488ff; z-index: 200; }
|
||||
#nav { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 20px; z-index: 100; }
|
||||
|
||||
/* 搜索框 */
|
||||
#search-box { position: absolute; top: 80px; left: 20px; z-index: 100; }
|
||||
#search-input { background: rgba(10, 10, 26, 0.8); border: 1px solid rgba(100, 100, 255, 0.3); color: #ffffff; padding: 8px 12px; border-radius: 6px; font-family: 'Courier New', monospace; font-size: 14px; width: 200px; outline: none; backdrop-filter: blur(10px); }
|
||||
#search-input::placeholder { color: #666688; }
|
||||
|
||||
/* 类型过滤按钮 */
|
||||
#type-filter { position: absolute; top: 120px; left: 20px; display: flex; gap: 8px; z-index: 100; flex-wrap: wrap; }
|
||||
.type-btn { background: rgba(10, 10, 26, 0.8); border: 1px solid rgba(100, 100, 255, 0.3); color: #aaaacc; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-family: 'Courier New', monospace; font-size: 12px; backdrop-filter: blur(10px); transition: all 0.3s; }
|
||||
.type-btn.active { background: rgba(68, 136, 255, 0.3); border-color: #4488ff; color: #ffffff; }
|
||||
|
||||
/* 缩放控制按钮 */
|
||||
#zoom-controls { position: absolute; bottom: 100px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 100; }
|
||||
.zoom-btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(10, 10, 26, 0.8); border: 1px solid rgba(100, 100, 255, 0.3); color: #ffffff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); font-family: 'Courier New', monospace; }
|
||||
|
||||
/* 边标签 */
|
||||
#edge-label { position: absolute; display: none; background: rgba(10, 10, 26, 0.9); color: #44ff88; padding: 4px 8px; border-radius: 4px; font-size: 12px; pointer-events: none; z-index: 150; border: 1px solid rgba(68, 255, 136, 0.3); }
|
||||
.nav-btn { background: rgba(10, 10, 26, 0.8); border: 1px solid rgba(100, 100, 255, 0.3); color: #aaaacc; padding: 12px 24px; border-radius: 8px; cursor: pointer; font-family: 'Courier New', monospace; font-size: 14px; backdrop-filter: blur(10px); }
|
||||
</style>
|
||||
</head>
|
||||
@ -40,6 +57,23 @@
|
||||
<div id="nav">
|
||||
<button class="nav-btn active">🌌 星图</button>
|
||||
</div>
|
||||
<div id="search-box">
|
||||
<input type="text" id="search-input" placeholder="搜索节点...">
|
||||
</div>
|
||||
<div id="type-filter">
|
||||
<button class="type-btn active" data-type="全部">全部</button>
|
||||
<button class="type-btn" data-type="Person">Person</button>
|
||||
<button class="type-btn" data-type="Task">Task</button>
|
||||
<button class="type-btn" data-type="AI">AI</button>
|
||||
<button class="type-btn" data-type="Concept">Concept</button>
|
||||
<button class="type-btn" data-type="Object">Object</button>
|
||||
</div>
|
||||
<div id="zoom-controls">
|
||||
<button class="zoom-btn" id="zoom-in">+</button>
|
||||
<button class="zoom-btn" id="zoom-out">-</button>
|
||||
<button class="zoom-btn" id="zoom-reset">R</button>
|
||||
</div>
|
||||
<div id="edge-label"></div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
@ -52,6 +86,13 @@
|
||||
let hoveredNode = null, selectedNode = null;
|
||||
let animationId;
|
||||
let highlightPulse = 0;
|
||||
let searchTerm = '';
|
||||
let activeTypeFilter = '全部';
|
||||
let isDragging = false;
|
||||
let dragNode = null;
|
||||
let originalPhysicsState = true;
|
||||
let edgeLabelEl = null;
|
||||
let nodePositions = {}; // 存储节点位置用于拖拽
|
||||
|
||||
const typeColors = { 'person': 0x4488ff, 'task': 0xff8844, 'ai': 0xaa44ff, 'concept': 0x44ff88, 'object': 0xff4444 };
|
||||
const defaultColor = 0xcccccc;
|
||||
@ -88,13 +129,72 @@
|
||||
window.__graphData = event.data.payload;
|
||||
loadGraphData();
|
||||
}
|
||||
if (event.data.type === 'search_nodes') {
|
||||
searchTerm = event.data.query || '';
|
||||
document.getElementById('search-input').value = searchTerm;
|
||||
applyFilters();
|
||||
}
|
||||
if (event.data.type === 'node_detail') {
|
||||
showNodeDetailPanel(event.data.detail);
|
||||
}
|
||||
if (event.data.type === 'highlight_node') {
|
||||
highlightNodeById(event.data.nodeId);
|
||||
}
|
||||
});
|
||||
// 搜索输入框事件
|
||||
const searchInput = document.getElementById('search-input');
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
searchTerm = e.target.value.toLowerCase();
|
||||
applyFilters();
|
||||
// 通知 ArkTS
|
||||
try {
|
||||
if (window.nativeBridge && window.nativeBridge.onSearch) {
|
||||
window.nativeBridge.onSearch(searchTerm);
|
||||
}
|
||||
} catch(e) {}
|
||||
});
|
||||
// 类型过滤按钮事件
|
||||
document.querySelectorAll('.type-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
activeTypeFilter = btn.dataset.type;
|
||||
applyFilters();
|
||||
});
|
||||
});
|
||||
// 缩放控制按钮
|
||||
document.getElementById('zoom-in').addEventListener('click', () => {
|
||||
camera.position.multiplyScalar(0.8);
|
||||
controls.update();
|
||||
});
|
||||
document.getElementById('zoom-out').addEventListener('click', () => {
|
||||
camera.position.multiplyScalar(1.2);
|
||||
controls.update();
|
||||
});
|
||||
document.getElementById('zoom-reset').addEventListener('click', () => {
|
||||
if (Object.keys(nodePositions).length > 0) {
|
||||
const allPositions = Object.values(nodePositions);
|
||||
let maxDist = 0;
|
||||
allPositions.forEach(pos => { maxDist = Math.max(maxDist, Math.sqrt(pos.x*pos.x + pos.y*pos.y + pos.z*pos.z)); });
|
||||
camera.position.set(maxDist * 2.2, maxDist * 1.5, maxDist * 2.2);
|
||||
controls.target.set(0, 0, 0);
|
||||
controls.update();
|
||||
}
|
||||
});
|
||||
// 边标签元素
|
||||
edgeLabelEl = document.getElementById('edge-label');
|
||||
// 鼠标移动检测边悬停
|
||||
renderer.domElement.addEventListener('mousemove', onEdgeHoverCheck);
|
||||
// 通知 ArkTS 请求图数据
|
||||
try {
|
||||
if (window.nativeBridge && window.nativeBridge.requestGraphData) {
|
||||
window.nativeBridge.requestGraphData();
|
||||
}
|
||||
} catch(e) {}
|
||||
// 触摸事件支持
|
||||
initTouchEvents();
|
||||
// 初始化拖拽功能
|
||||
initDragFunctionality();
|
||||
animate();
|
||||
}
|
||||
|
||||
@ -180,21 +280,22 @@
|
||||
nodeDegrees[e.target] = (nodeDegrees[e.target] || 0) + 1;
|
||||
});
|
||||
const positions = {};
|
||||
nodePositions = positions; // 存储供拖拽使用
|
||||
const maxDegree = Math.max(...Object.values(nodeDegrees), 1);
|
||||
nodes.forEach((node, i) => {
|
||||
const angle = (i / nodes.length) * Math.PI * 2;
|
||||
const radius = 15 + (nodeDegrees[node.id] / maxDegree) * 35;
|
||||
positions[node.id] = { x: radius * Math.cos(angle), y: (Math.random() - 0.5) * 10, z: radius * Math.sin(angle) };
|
||||
});
|
||||
for (let iter = 0; iter < 50; iter++) {
|
||||
for (let iter = 0; iter < 200; iter++) {
|
||||
Object.keys(positions).forEach(id1 => {
|
||||
Object.keys(positions).forEach(id2 => {
|
||||
if (id1 >= id2) return;
|
||||
const pos1 = positions[id1], pos2 = positions[id2];
|
||||
const dx = pos1.x - pos2.x, dy = pos1.y - pos2.y, dz = pos1.z - pos2.z;
|
||||
const dist = Math.sqrt(dx*dx + dy*dy + dz*dz) + 0.1;
|
||||
if (dist < 10) {
|
||||
const force = 0.1 / dist;
|
||||
if (dist < 20) { // 增加排斥距离
|
||||
const force = 0.3 / (dist * dist); // 增加排斥力系数（平方反比）
|
||||
pos1.x += (dx/dist)*force; pos1.y += (dy/dist)*force; pos1.z += (dz/dist)*force;
|
||||
pos2.x -= (dx/dist)*force; pos2.y -= (dy/dist)*force; pos2.z -= (dz/dist)*force;
|
||||
}
|
||||
@ -206,7 +307,7 @@
|
||||
const dx = pos2.x - pos1.x, dy = pos2.y - pos1.y, dz = pos2.z - pos1.z;
|
||||
const dist = Math.sqrt(dx*dx + dy*dy + dz*dz) + 0.1;
|
||||
if (dist > 15) {
|
||||
const force = 0.05;
|
||||
const force = 0.08; // 增加吸引力
|
||||
pos1.x += (dx/dist)*force; pos1.y += (dy/dist)*force; pos1.z += (dz/dist)*force;
|
||||
pos2.x -= (dx/dist)*force; pos2.y -= (dy/dist)*force; pos2.z -= (dz/dist)*force;
|
||||
}
|
||||
@ -218,23 +319,27 @@
|
||||
const radius = 0.4 + Math.min(node.mention_count * 0.15, 1.5);
|
||||
const color = typeColors[node.type] || defaultColor;
|
||||
const geometry = new THREE.SphereGeometry(radius, 16, 12);
|
||||
const material = new THREE.MeshPhongMaterial({ color: color, emissive: color, emissiveIntensity: 0.5 + Math.min(node.mention_count * 0.05, 0.3), shininess: 30 });
|
||||
const material = new THREE.MeshPhongMaterial({ color: color, emissive: color, emissiveIntensity: 0.5 + Math.min(node.mention_count * 0.05, 0.3), shininess: 30, transparent: true, opacity: 0 });
|
||||
const sphere = new THREE.Mesh(geometry, material);
|
||||
sphere.position.set(pos.x, pos.y, pos.z);
|
||||
sphere.userData = { nodeId: node.id, nodeData: node };
|
||||
scene.add(sphere);
|
||||
nodeMeshes.push(sphere);
|
||||
// 淡入动画
|
||||
fadeInObject(sphere, 500);
|
||||
});
|
||||
edges.forEach(edge => {
|
||||
const pos1 = positions[edge.source], pos2 = positions[edge.target];
|
||||
if (!pos1 || !pos2) return;
|
||||
const color = edgeColors[edge.relation_type] || defaultEdgeColor;
|
||||
const geometry = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(pos1.x, pos1.y, pos1.z), new THREE.Vector3(pos2.x, pos2.y, pos2.z)]);
|
||||
const material = new THREE.LineBasicMaterial({ color: color, transparent: true, opacity: 0.4, linewidth: 1 });
|
||||
const material = new THREE.LineBasicMaterial({ color: color, transparent: true, opacity: 0, linewidth: 1 });
|
||||
const line = new THREE.Line(geometry, material);
|
||||
line.userData = { edgeId: edge.id, edgeData: edge };
|
||||
scene.add(line);
|
||||
edgeLines.push(line);
|
||||
// 淡入动画
|
||||
fadeInLine(line, 500);
|
||||
});
|
||||
const allPositions = Object.values(positions);
|
||||
if (allPositions.length > 0) {
|
||||
@ -265,14 +370,19 @@
|
||||
}
|
||||
|
||||
function onMouseClick(event) {
|
||||
if (isDragging) return;
|
||||
raycaster.setFromCamera(mouse, camera);
|
||||
const intersects = raycaster.intersectObjects(nodeMeshes);
|
||||
if (intersects.length > 0) {
|
||||
const node = intersects[0].object;
|
||||
if (selectedNode === node) { selectedNode = null; document.getElementById('node-info').style.display = 'none'; }
|
||||
else {
|
||||
if (selectedNode === node) {
|
||||
selectedNode = null;
|
||||
document.getElementById('node-info').style.display = 'none';
|
||||
resetHighlight();
|
||||
} else {
|
||||
selectedNode = node;
|
||||
showNodeInfo(node.userData.nodeData, true);
|
||||
highlightNodeConnections(node.userData.nodeData);
|
||||
// 通知 ArkTS 节点被点击
|
||||
try {
|
||||
if (window.nativeBridge && window.nativeBridge.onNodeClick) {
|
||||
@ -280,6 +390,11 @@
|
||||
}
|
||||
} catch(e) {}
|
||||
}
|
||||
} else {
|
||||
// 点击空白处恢复
|
||||
selectedNode = null;
|
||||
document.getElementById('node-info').style.display = 'none';
|
||||
resetHighlight();
|
||||
}
|
||||
}
|
||||
|
||||
@ -294,6 +409,339 @@
|
||||
|
||||
function hideNodeInfo() { if (!selectedNode) document.getElementById('node-info').style.display = 'none'; }
|
||||
|
||||
// 淡入动画
|
||||
function fadeInObject(obj, duration) {
|
||||
const startOpacity = 0;
|
||||
const endOpacity = obj.material.opacity !== undefined ? (obj.material.transparent ? obj.material.opacity : 1) : 1;
|
||||
obj.material.opacity = startOpacity;
|
||||
obj.material.transparent = true;
|
||||
const startTime = Date.now();
|
||||
function animateFade() {
|
||||
const elapsed = Date.now() - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
obj.material.opacity = startOpacity + (endOpacity - startOpacity) * progress;
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(animateFade);
|
||||
} else {
|
||||
obj.material.transparent = endOpacity < 1;
|
||||
}
|
||||
}
|
||||
animateFade();
|
||||
}
|
||||
|
||||
function fadeInLine(line, duration) {
|
||||
const startOpacity = 0;
|
||||
const endOpacity = 0.4;
|
||||
line.material.opacity = startOpacity;
|
||||
const startTime = Date.now();
|
||||
function animateFade() {
|
||||
const elapsed = Date.now() - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
line.material.opacity = startOpacity + (endOpacity - startOpacity) * progress;
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(animateFade);
|
||||
}
|
||||
}
|
||||
animateFade();
|
||||
}
|
||||
|
||||
// 通过节点ID高亮节点（供ArkTS调用）
|
||||
function highlightNodeById(nodeId) {
|
||||
const mesh = nodeMeshes.find(m => m.userData.nodeData.id === nodeId);
|
||||
if (mesh) {
|
||||
selectedNode = mesh;
|
||||
showNodeInfo(mesh.userData.nodeData, true);
|
||||
highlightNodeConnections(mesh.userData.nodeData);
|
||||
}
|
||||
}
|
||||
|
||||
// 显示节点详情面板（供ArkTS调用）
|
||||
function showNodeDetailPanel(detail) {
|
||||
// 更新node-info面板显示详细信息
|
||||
document.getElementById('info-name').textContent = detail.name;
|
||||
document.getElementById('info-type').textContent = detail.type;
|
||||
document.getElementById('info-mentions').textContent = detail.mention_count;
|
||||
document.getElementById('info-links').textContent = detail.connection_count;
|
||||
document.getElementById('node-info').style.display = 'block';
|
||||
|
||||
// 如果有连接信息，添加到面板
|
||||
let detailHtml = `<h3>${detail.name}</h3>`;
|
||||
detailHtml += `<p><span class="label">类型:</span> ${detail.type}</p>`;
|
||||
detailHtml += `<p><span class="label">提及次数:</span> ${detail.mention_count}</p>`;
|
||||
detailHtml += `<p><span class="label">连接数:</span> ${detail.connection_count}</p>`;
|
||||
if (detail.connections && detail.connections.length > 0) {
|
||||
detailHtml += `<p><span class="label">连接关系:</span></p><ul style="margin-left: 15px; font-size: 12px;">`;
|
||||
detail.connections.forEach(conn => {
|
||||
detailHtml += `<li>${conn.type}: ${conn.target_name}</li>`;
|
||||
});
|
||||
detailHtml += `</ul>`;
|
||||
}
|
||||
document.getElementById('node-info').innerHTML = detailHtml;
|
||||
}
|
||||
|
||||
// 节点拖拽功能
|
||||
function initDragFunctionality() {
|
||||
let dragStartPos = { x: 0, y: 0 };
|
||||
|
||||
renderer.domElement.addEventListener('mousedown', (event) => {
|
||||
raycaster.setFromCamera(mouse, camera);
|
||||
const intersects = raycaster.intersectObjects(nodeMeshes);
|
||||
if (intersects.length > 0) {
|
||||
isDragging = false;
|
||||
dragNode = intersects[0].object;
|
||||
dragStartPos = { x: event.clientX, y: event.clientY };
|
||||
originalPhysicsState = true; // 暂停物理模拟
|
||||
}
|
||||
});
|
||||
|
||||
renderer.domElement.addEventListener('mousemove', (event) => {
|
||||
if (dragNode) {
|
||||
const dx = event.clientX - dragStartPos.x;
|
||||
const dy = event.clientY - dragStartPos.y;
|
||||
if (Math.abs(dx) > 3 || Math.abs(dy) > 3) {
|
||||
isDragging = true;
|
||||
}
|
||||
if (isDragging) {
|
||||
// 将屏幕坐标转换为3D空间
|
||||
const rect = renderer.domElement.getBoundingClientRect();
|
||||
const mouseX = ((event.clientX - rect.left) / rect.width) * 2 - 1;
|
||||
const mouseY = -((event.clientY - rect.top) / rect.height) * 2 + 1;
|
||||
const vector = new THREE.Vector3(mouseX, mouseY, 0.5);
|
||||
vector.unproject(camera);
|
||||
const dir = vector.sub(camera.position).normalize();
|
||||
const distance = -camera.position.z / dir.z;
|
||||
const newPos = camera.position.clone().add(dir.multiplyScalar(distance));
|
||||
dragNode.position.copy(newPos);
|
||||
// 更新存储的位置
|
||||
if (nodePositions[dragNode.userData.nodeId]) {
|
||||
nodePositions[dragNode.userData.nodeId] = { x: newPos.x, y: newPos.y, z: newPos.z };
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
renderer.domElement.addEventListener('mouseup', () => {
|
||||
if (dragNode) {
|
||||
// 恢复物理模拟
|
||||
dragNode = null;
|
||||
isDragging = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Touch事件支持
|
||||
function initTouchEvents() {
|
||||
let touchStart = null;
|
||||
let touchStartDistance = 0;
|
||||
let touchStartPos = { x: 0, y: 0 };
|
||||
let isTouchDrag = false;
|
||||
|
||||
renderer.domElement.addEventListener('touchstart', (event) => {
|
||||
event.preventDefault();
|
||||
if (event.touches.length === 1) {
|
||||
const touch = event.touches[0];
|
||||
touchStartPos = { x: touch.clientX, y: touch.clientY };
|
||||
isTouchDrag = false;
|
||||
|
||||
// 模拟鼠标事件用于射线检测
|
||||
const rect = renderer.domElement.getBoundingClientRect();
|
||||
mouse.x = ((touch.clientX - rect.left) / rect.width) * 2 - 1;
|
||||
mouse.y = -((touch.clientY - rect.top) / rect.height) * 2 + 1;
|
||||
|
||||
raycaster.setFromCamera(mouse, camera);
|
||||
const intersects = raycaster.intersectObjects(nodeMeshes);
|
||||
if (intersects.length > 0) {
|
||||
const node = intersects[0].object;
|
||||
if (selectedNode === node) {
|
||||
selectedNode = null;
|
||||
document.getElementById('node-info').style.display = 'none';
|
||||
resetHighlight();
|
||||
} else {
|
||||
selectedNode = node;
|
||||
showNodeInfo(node.userData.nodeData, true);
|
||||
highlightNodeConnections(node.userData.nodeData);
|
||||
try {
|
||||
if (window.nativeBridge && window.nativeBridge.onNodeClick) {
|
||||
window.nativeBridge.onNodeClick(node.userData.nodeData.id, node.userData.nodeData.name);
|
||||
}
|
||||
} catch(e) {}
|
||||
}
|
||||
}
|
||||
} else if (event.touches.length === 2) {
|
||||
// 双指缩放
|
||||
const dx = event.touches[0].clientX - event.touches[1].clientX;
|
||||
const dy = event.touches[0].clientY - event.touches[1].clientY;
|
||||
touchStartDistance = Math.sqrt(dx*dx + dy*dy);
|
||||
}
|
||||
}, { passive: false });
|
||||
|
||||
renderer.domElement.addEventListener('touchmove', (event) => {
|
||||
event.preventDefault();
|
||||
if (event.touches.length === 1 && controls) {
|
||||
const touch = event.touches[0];
|
||||
const dx = touch.clientX - touchStartPos.x;
|
||||
const dy = touch.clientY - touchStartPos.y;
|
||||
if (Math.abs(dx) > 5 || Math.abs(dy) > 5) {
|
||||
isTouchDrag = true;
|
||||
}
|
||||
// 模拟OrbitControls的鼠标移动
|
||||
if (isTouchDrag) {
|
||||
const rotateSpeed = 0.005;
|
||||
controls.rotateLeft(-dx * rotateSpeed);
|
||||
controls.rotateUp(-dy * rotateSpeed);
|
||||
controls.update();
|
||||
touchStartPos = { x: touch.clientX, y: touch.clientY };
|
||||
}
|
||||
} else if (event.touches.length === 2 && controls) {
|
||||
// 双指缩放
|
||||
const dx = event.touches[0].clientX - event.touches[1].clientX;
|
||||
const dy = event.touches[0].clientY - event.touches[1].clientY;
|
||||
const distance = Math.sqrt(dx*dx + dy*dy);
|
||||
const scale = touchStartDistance / distance;
|
||||
camera.position.multiplyScalar(scale);
|
||||
controls.update();
|
||||
touchStartDistance = distance;
|
||||
}
|
||||
}, { passive: false });
|
||||
|
||||
renderer.domElement.addEventListener('touchend', (event) => {
|
||||
if (event.touches.length === 0) {
|
||||
isTouchDrag = false;
|
||||
}
|
||||
}, { passive: false });
|
||||
}
|
||||
|
||||
// 搜索和类型过滤
|
||||
function applyFilters() {
|
||||
nodeMeshes.forEach(mesh => {
|
||||
const nodeData = mesh.userData.nodeData;
|
||||
const nameMatch = nodeData.name.toLowerCase().includes(searchTerm);
|
||||
const typeMatch = activeTypeFilter === '全部' || nodeData.type === activeTypeFilter;
|
||||
|
||||
if (nameMatch && typeMatch) {
|
||||
mesh.material.transparent = false;
|
||||
mesh.material.opacity = 1;
|
||||
mesh.scale.setScalar(1);
|
||||
} else {
|
||||
mesh.material.transparent = true;
|
||||
mesh.material.opacity = 0.2;
|
||||
mesh.scale.setScalar(0.8);
|
||||
}
|
||||
});
|
||||
// 同时过滤边
|
||||
edgeLines.forEach(line => {
|
||||
const edgeData = line.userData.edgeData;
|
||||
const sourceNode = nodes.find(n => n.id === edgeData.source);
|
||||
const targetNode = nodes.find(n => n.id === edgeData.target);
|
||||
const sourceMatch = sourceNode && sourceNode.name.toLowerCase().includes(searchTerm) && (activeTypeFilter === '全部' || sourceNode.type === activeTypeFilter);
|
||||
const targetMatch = targetNode && targetNode.name.toLowerCase().includes(searchTerm) && (activeTypeFilter === '全部' || targetNode.type === activeTypeFilter);
|
||||
|
||||
if ((sourceMatch || targetMatch) && searchTerm === '' && activeTypeFilter === '全部') {
|
||||
line.material.transparent = true;
|
||||
line.material.opacity = 0.4;
|
||||
} else if (sourceMatch || targetMatch) {
|
||||
line.material.transparent = true;
|
||||
line.material.opacity = 0.6;
|
||||
} else {
|
||||
line.material.transparent = true;
|
||||
line.material.opacity = 0.1;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 连接高亮
|
||||
function highlightNodeConnections(nodeData) {
|
||||
const connectedNodeIds = new Set();
|
||||
const connectedEdgeIds = new Set();
|
||||
|
||||
// 找出所有连接的节点和边
|
||||
edges.forEach(edge => {
|
||||
if (edge.source === nodeData.id || edge.target === nodeData.id) {
|
||||
connectedNodeIds.add(edge.source);
|
||||
connectedNodeIds.add(edge.target);
|
||||
connectedEdgeIds.add(edge.id);
|
||||
}
|
||||
});
|
||||
|
||||
nodeMeshes.forEach(mesh => {
|
||||
const meshNodeId = mesh.userData.nodeData.id;
|
||||
if (meshNodeId === nodeData.id) {
|
||||
// 选中的节点
|
||||
mesh.material.emissiveIntensity = 1.0;
|
||||
mesh.scale.setScalar(1.5);
|
||||
} else if (connectedNodeIds.has(meshNodeId)) {
|
||||
// 直接连接的节点
|
||||
mesh.material.emissiveIntensity = 0.8;
|
||||
mesh.scale.setScalar(1.3);
|
||||
mesh.material.transparent = false;
|
||||
mesh.material.opacity = 1;
|
||||
} else {
|
||||
// 无关系的节点
|
||||
mesh.material.transparent = true;
|
||||
mesh.material.opacity = 0.15;
|
||||
mesh.material.emissiveIntensity = 0.2;
|
||||
mesh.scale.setScalar(0.9);
|
||||
}
|
||||
});
|
||||
|
||||
edgeLines.forEach(line => {
|
||||
if (connectedEdgeIds.has(line.userData.edgeData.id)) {
|
||||
line.material.transparent = true;
|
||||
line.material.opacity = 0.8;
|
||||
line.material.linewidth = 2;
|
||||
} else {
|
||||
line.material.transparent = true;
|
||||
line.material.opacity = 0.1;
|
||||
line.material.linewidth = 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function resetHighlight() {
|
||||
nodeMeshes.forEach(mesh => {
|
||||
const nodeData = mesh.userData.nodeData;
|
||||
const nameMatch = nodeData.name.toLowerCase().includes(searchTerm);
|
||||
const typeMatch = activeTypeFilter === '全部' || nodeData.type === activeTypeFilter;
|
||||
|
||||
mesh.material.emissiveIntensity = 0.5 + Math.min(nodeData.mention_count * 0.05, 0.3);
|
||||
if (nameMatch && typeMatch) {
|
||||
mesh.material.transparent = false;
|
||||
mesh.material.opacity = 1;
|
||||
mesh.scale.setScalar(1);
|
||||
} else {
|
||||
mesh.material.transparent = true;
|
||||
mesh.material.opacity = 0.2;
|
||||
mesh.scale.setScalar(0.8);
|
||||
}
|
||||
});
|
||||
edgeLines.forEach(line => {
|
||||
line.material.transparent = true;
|
||||
line.material.opacity = 0.4;
|
||||
line.material.linewidth = 1;
|
||||
});
|
||||
}
|
||||
|
||||
// 边标签显示
|
||||
function onEdgeHoverCheck(event) {
|
||||
const rect = renderer.domElement.getBoundingClientRect();
|
||||
mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
|
||||
mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
|
||||
raycaster.setFromCamera(mouse, camera);
|
||||
|
||||
// 检查边悬停
|
||||
const edgeIntersects = raycaster.intersectObjects(edgeLines);
|
||||
if (edgeIntersects.length > 0) {
|
||||
const edge = edgeIntersects[0].object;
|
||||
const edgeData = edge.userData.edgeData;
|
||||
edgeLabelEl.textContent = edgeData.relation_type || '关系';
|
||||
edgeLabelEl.style.display = 'block';
|
||||
edgeLabelEl.style.left = (event.clientX - rect.left + 10) + 'px';
|
||||
edgeLabelEl.style.top = (event.clientY - rect.top - 10) + 'px';
|
||||
} else {
|
||||
edgeLabelEl.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
Reference in New Issue
Block a user