local-knowledge-graph 1.10.2 → 1.10.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "local-knowledge-graph",
-  "version": "1.10.2",
+  "version": "1.10.4",
   "description": "本地知识图谱整合器：3D可视化 + AI对话建图 + 智能检索 + Git回溯 + RDF合规，全流程本地运行",
   "main": "server.js",
   "bin": {

package/public/app.js

@@ -298,7 +298,7 @@ function makeRelLine(pa, pb, arc, color, dashed, opacity, dashSize, gapSize) {
   return line;
 }
 
-// 每帧根据节点最新位置刷新弧线几何（标签为HTML层，弧顶点存 l.arcTop 供屏幕投影）
+// 每帧根据节点最新位置刷新弧线几何与标签位置（Sprite 标签贴线、近大远小）
 const _arcDir = new THREE.Vector3(), _arcOff = new THREE.Vector3(), _arcTmp = new THREE.Vector3();
 function updateRelLine(l) {
   if (!l.arc) {
@@ -307,7 +307,7 @@ function updateRelLine(l) {
     posAttr.setXYZ(1, l.b.pos.x, l.b.pos.y, l.b.pos.z);
     posAttr.needsUpdate = true;
     if (l.dashed) l.line.computeLineDistances();
-    l.arcTop = (l.arcTop || new THREE.Vector3()).copy(l.a.pos).add(l.b.pos).multiplyScalar(0.5);
+    if (l.label) l.label.position.copy(l.a.pos).add(l.b.pos).multiplyScalar(0.5);
     return;
   }
   _arcDir.subVectors(l.b.pos, l.a.pos);
@@ -319,73 +319,19 @@ function updateRelLine(l) {
   }
   posAttr.needsUpdate = true;
   if (l.dashed) l.line.computeLineDistances();
-  arcPoint(_arcTmp, l.a.pos, l.b.pos, _arcDir, _arcOff, 0.5);
-  l.arcTop = (l.arcTop || new THREE.Vector3()).copy(_arcTmp);
-}
-
-/* ---- 关系标签：HTML层 + 屏幕空间防重叠 ---- */
-const relLabelEls = new Map(); // relationId -> div
-function rebuildLinkLabelEls() {
-  const layer = $('link-labels');
-  layer.innerHTML = '';
-  relLabelEls.clear();
-  for (const l of simLinks) {
-    const el = document.createElement('div');
-    el.className = 'rel-label';
-    const name = l.inferredName || (state.relations.find((x) => x.id === l.id) || {}).name || '';
-    el.textContent = name;
-    el.style.color = l.colorCss || '#ccc';
-    el.style.borderColor = (l.colorCss || '#ccc') + '55';
-    el.onclick = () => {
-      state.selected = { type: 'relation', id: l.id };
-      renderInfoCard();
-    };
-    layer.appendChild(el);
-    relLabelEls.set(l.id, el);
-    l.labelEl = el;
-  }
-  measureLinkLabels();
-}
-
-// 一次性测量标签尺寸（投影定位需要 w/h；避免每帧读 offsetWidth 强制回流）
-function measureLinkLabels() {
-  for (const el of relLabelEls.values()) {
-    el._w = el.offsetWidth;
-    el._h = el.offsetHeight;
+  // 标签置于弧顶（t=0.5），贴合弧线
+  if (l.label) {
+    arcPoint(_arcTmp, l.a.pos, l.b.pos, _arcDir, _arcOff, 0.5);
+    l.label.position.copy(_arcTmp);
   }
 }
-window.addEventListener('resize', () => setTimeout(measureLinkLabels, 60));
 
-const _projV = new THREE.Vector3();
-function updateLinkLabels() {
-  const layer = $('link-labels');
-  if (!layer || !simLinks.length) return;
-  const W = renderer.domElement.clientWidth, H = renderer.domElement.clientHeight;
-  const items = [];
-  for (const l of simLinks) {
-    const el = l.labelEl;
-    if (!el) continue;
-    _projV.copy(l.arcTop || l.a.pos).project(camera);
-    if (_projV.z > 1 || _projV.z < -1) { el.style.display = 'none'; continue; }
-    const x = (_projV.x + 1) / 2 * W, y = (1 - _projV.y) / 2 * H;
-    if (x < -80 || x > W + 80 || y < -40 || y > H + 40) { el.style.display = 'none'; continue; }
-    el.style.display = 'block';
-    items.push({ el, x, y, w: el._w || 40, h: el._h || 18 });
-  }
-  // 屏幕空间防重叠：按 y 排序，与已放置矩形相交的标签向下推开，直到无碰撞
-  items.sort((p, q) => p.y - q.y);
-  const placed = [];
-  for (const it of items) {
-    let ny = it.y, guard = 0;
-    while (guard++ < 60) {
-      const hit = placed.find((p) => Math.abs(ny - p.y) < (it.h + p.h) / 2 + 2 && Math.abs(it.x - p.x) < (it.w + p.w) / 2 + 4);
-      if (!hit) break;
-      ny = hit.y + (hit.h + it.h) / 2 + 2;
-    }
-    it.y = ny;
-    placed.push(it);
-    it.el.style.transform = `translate(${(it.x - it.w / 2).toFixed(1)}px, ${(it.y - it.h / 2).toFixed(1)}px)`;
-  }
+// 弧顶标签初始定位（构建时用；此后每帧由 updateRelLine 跟随）
+function setRelLabelPos(lbl, pa, pb, arc) {
+  if (!arc) { lbl.position.copy(pa).add(pb).multiplyScalar(0.5); return; }
+  const dir = pb.clone().sub(pa);
+  const off = arcOffsetVec(dir, arc);
+  lbl.position.copy(arcPoint(new THREE.Vector3(), pa, pb, dir, off, 0.5));
 }
 
 function buildNodeMesh(category) {
@@ -499,7 +445,12 @@ function rebuildGraph() {
     line.userData.relationId = r.id;
     line.userData.baseOpacity = op;
     linkGroup.add(line);
-    simLinks.push({ id: r.id, a, b, line, dashed, confidence: conf, arc, colorCss: st.css });
+    // 线标注显示具体关系名（如"父子"），线型/颜色仍由大类规定；Sprite 保持贴线与近大远小
+    const lbl = makeLabelSprite(r.name, st.css, 24);
+    lbl.userData.text = r.name;
+    setRelLabelPos(lbl, a.pos, b.pos, arc);
+    labelGroup.add(lbl);
+    simLinks.push({ id: r.id, a, b, line, label: lbl, dashed, confidence: conf, arc });
   });
 
   // 推理关系叠加：虚化虚线 + "(推)"标注，负数id与库中显式关系区分；仅显示两端均在当前视图的边
@@ -518,10 +469,12 @@ function rebuildGraph() {
       const line = makeRelLine(a.pos, b.pos, arc, 0xc792ea, true, 0.35, 3, 5);
       line.userData.relationId = -(idx + 1);
       linkGroup.add(line);
-      simLinks.push({ id: line.userData.relationId, a, b, line, dashed: true, arc, colorCss: '#c792ea', inferredName: ir.name + '(推)' });
+      const lbl = makeLabelSprite(ir.name + '(推)', '#c792ea', 22);
+      setRelLabelPos(lbl, a.pos, b.pos, arc);
+      labelGroup.add(lbl);
+      simLinks.push({ id: line.userData.relationId, a, b, line, label: lbl, dashed: true, arc });
     });
   }
-  rebuildLinkLabelEls();
 
   simBudget = 420;
   settleCount = 0;
@@ -599,7 +552,6 @@ function animate() {
     if (camFly.t >= 1) camFly = null;
   }
   controls.update();
-  updateLinkLabels();
   renderer.render(scene, camera);
 }
 animate();
@@ -1573,7 +1525,7 @@ function applyCanvasHi(nodes, rels) {
     const base = l.line.userData.baseOpacity === undefined ? 0.9 : l.line.userData.baseOpacity;
     const on = rels.has(l.id);
     l.line.material.opacity = on ? Math.max(base, 0.95) : 0.05;
-    if (l.labelEl) l.labelEl.style.opacity = on ? 1 : 0.06;
+    if (l.label) l.label.material.opacity = on ? 1 : 0.06;
   }
 }
 
@@ -1586,7 +1538,7 @@ function clearCanvasHi() {
   }
   for (const l of simLinks) {
     l.line.material.opacity = l.line.userData.baseOpacity === undefined ? 0.9 : l.line.userData.baseOpacity;
-    if (l.labelEl) l.labelEl.style.opacity = 1;
+    if (l.label) l.label.material.opacity = 1;
   }
 }
 
@@ -1879,11 +1831,8 @@ function applyStyleLight(dirty) {
         : new THREE.LineBasicMaterial({ color: st.color, transparent: true, opacity: op });
       if (st.dashed) l.line.computeLineDistances();
       l.dashed = st.dashed;
-      // 标签为HTML层：直接换色
-      if (l.labelEl) {
-        l.labelEl.style.color = st.css;
-        l.labelEl.style.borderColor = st.css + '55';
-      }
+      const fresh = relabel(l.label, st.css, 24);
+      if (fresh) l.label = fresh;
     }
   }
 }

package/public/index.html

@@ -231,7 +231,6 @@
     </div>
 
     <div id="canvas-wrap">
-      <div id="link-labels"></div>
       <div class="legend" id="legend"></div>
       <button id="m-legend" class="m-btn">图例</button>
       <div id="ego-bar">

package/public/style.css

@@ -98,16 +98,6 @@
 
   #canvas-wrap { flex: 1; position: relative; min-width: 0; background: radial-gradient(ellipse at center, #0d1424 0%, #070a12 100%); }
   #canvas-wrap canvas { display: block; touch-action: none; }
-  /* 关系标签层：屏幕空间定位，防重叠 */
-  #link-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
-  .rel-label {
-    position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer;
-    font-size: 11px; line-height: 1; padding: 3px 7px; border-radius: 9px; white-space: nowrap;
-    background: rgba(9,13,24,.78); border: 1px solid transparent; user-select: none;
-    will-change: transform; text-shadow: none;
-  }
-  .rel-label:hover { filter: brightness(1.25); }
-  html[data-theme="light"] .rel-label { background: rgba(255,255,255,.86); }
   .legend {
     position: absolute; left: 12px; bottom: 12px; background: rgba(13,20,36,.85);
     border: 1px solid #1e2a44; border-radius: 8px; padding: 9px 12px; font-size: 11px; color: #a9bbd8;