local-knowledge-graph 1.10.0 → 1.10.2

package/package.json

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

package/public/app.js

@@ -256,6 +256,138 @@ function makeLabelSprite(text, cssColor, fontSize) {
   return sprite;
 }
 
+/* ---- 平行边弧形分离 ---- */
+// 同对节点多条关系时线弯曲错开：offset 为弧的偏移强度（0=直线），标签置于各弧顶
+const ARC_SEGMENTS = 16;
+function arcOffsetVec(dir, arc) {
+  // 弧偏移方向：取与边垂直的平面，按边序号均匀转开角度；强度=边长*比例，保证不同长度边分离度一致
+  const up = Math.abs(dir.y) > 0.92 ? new THREE.Vector3(1, 0, 0) : new THREE.Vector3(0, 1, 0);
+  const u = new THREE.Vector3().crossVectors(dir, up).normalize();
+  const v = new THREE.Vector3().crossVectors(dir, u).normalize();
+  const ang = (arc.idx / arc.total) * Math.PI * 2 + 0.6; // 固定相位避免与常用方向重合
+  const strength = 0.14; // 弧顶偏移 = 边长 * strength
+  return u.multiplyScalar(Math.cos(ang)).add(v.multiplyScalar(Math.sin(ang))).multiplyScalar(dir.length() * strength);
+}
+
+// 曲线上参数 t∈[0,1] 的点：a→b 直线叠加抛物弧偏移（中点最大，两端为0）
+function arcPoint(out, a, b, dir, off, t) {
+  const sag = 4 * t * (1 - t);
+  out.set(
+    a.x + dir.x * t + off.x * sag,
+    a.y + dir.y * t + off.y * sag,
+    a.z + dir.z * t + off.z * sag
+  );
+  return out;
+}
+
+function makeRelLine(pa, pb, arc, color, dashed, opacity, dashSize, gapSize) {
+  const pts = [];
+  if (arc) {
+    const dir = pb.clone().sub(pa);
+    const off = arcOffsetVec(dir, arc);
+    for (let i = 0; i <= ARC_SEGMENTS; i++) pts.push(arcPoint(new THREE.Vector3(), pa, pb, dir, off, i / ARC_SEGMENTS).clone());
+  } else {
+    pts.push(pa.clone(), pb.clone());
+  }
+  const geo = new THREE.BufferGeometry().setFromPoints(pts);
+  const mat = dashed
+    ? new THREE.LineDashedMaterial({ color, dashSize, gapSize, transparent: true, opacity })
+    : new THREE.LineBasicMaterial({ color, transparent: true, opacity });
+  const line = new THREE.Line(geo, mat);
+  if (dashed) line.computeLineDistances();
+  return line;
+}
+
+// 每帧根据节点最新位置刷新弧线几何（标签为HTML层，弧顶点存 l.arcTop 供屏幕投影）
+const _arcDir = new THREE.Vector3(), _arcOff = new THREE.Vector3(), _arcTmp = new THREE.Vector3();
+function updateRelLine(l) {
+  if (!l.arc) {
+    const posAttr = l.line.geometry.attributes.position;
+    posAttr.setXYZ(0, l.a.pos.x, l.a.pos.y, l.a.pos.z);
+    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);
+    return;
+  }
+  _arcDir.subVectors(l.b.pos, l.a.pos);
+  _arcOff.copy(arcOffsetVec(_arcDir, l.arc));
+  const posAttr = l.line.geometry.attributes.position;
+  for (let i = 0; i <= ARC_SEGMENTS; i++) {
+    arcPoint(_arcTmp, l.a.pos, l.b.pos, _arcDir, _arcOff, i / ARC_SEGMENTS);
+    posAttr.setXYZ(i, _arcTmp.x, _arcTmp.y, _arcTmp.z);
+  }
+  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;
+  }
+}
+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)`;
+  }
+}
+
 function buildNodeMesh(category) {
   const st = ENTITY_STYLE[category] || { color: 0xaaaaaa };
   let mesh;
@@ -338,6 +470,21 @@ function rebuildGraph() {
     simNodes.push({ id: e.id, pos: mesh.position.clone(), vel: new THREE.Vector3(), mesh, label, radius: 10, sizeScale: ENTITY_STYLE[e.category] ? (ENTITY_STYLE[e.category].size || 1) : 1 });
   });
 
+  // 同节点对的平行边统一编号：线作弧形分离，标签各置弧顶，避免文字与线完全重叠
+  const pairCount = new Map(); // 'a|b'(无向) -> 同对节点边的总数
+  for (const r of rels) {
+    const k = r.source_id < r.target_id ? `${r.source_id}|${r.target_id}` : `${r.target_id}|${r.source_id}`;
+    pairCount.set(k, (pairCount.get(k) || 0) + 1);
+  }
+  const pairSeen = new Map();
+  const arcOf = (r) => {
+    const k = r.source_id < r.target_id ? `${r.source_id}|${r.target_id}` : `${r.target_id}|${r.source_id}`;
+    const n = pairCount.get(k) || 1;
+    const i = pairSeen.get(k) || 0;
+    pairSeen.set(k, i + 1);
+    return n > 1 ? { idx: i, total: n } : null;
+  };
+
   rels.forEach((r) => {
     const a = simNodes.find((n) => n.id === r.source_id);
     const b = simNodes.find((n) => n.id === r.target_id);
@@ -347,21 +494,12 @@ function rebuildGraph() {
     const baseOp = st.opacity === undefined ? 0.9 : st.opacity;
     const op = conf === '存疑' ? Math.min(baseOp, 0.35) : baseOp; // 存疑降不透明度
     const dashed = st.dashed || conf === '推测';                  // 推测强制虚线
-    const geo = new THREE.BufferGeometry().setFromPoints([a.pos, b.pos]);
-    const mat = dashed
-      ? new THREE.LineDashedMaterial({ color: st.color, dashSize: st.dashSize || 6, gapSize: st.gapSize || 4, transparent: true, opacity: op })
-      : new THREE.LineBasicMaterial({ color: st.color, transparent: true, opacity: op });
-    const line = new THREE.Line(geo, mat);
+    const arc = arcOf(r);
+    const line = makeRelLine(a.pos, b.pos, arc, st.color, dashed, op, st.dashSize || 6, st.gapSize || 4);
     line.userData.relationId = r.id;
     line.userData.baseOpacity = op;
     linkGroup.add(line);
-    const mid = a.pos.clone().add(b.pos).multiplyScalar(0.5);
-    // 线标注显示具体关系名（如"父子"），线型/颜色仍由大类规定
-    const lbl = makeLabelSprite(r.name, st.css, 24);
-    lbl.userData.text = r.name;
-    lbl.position.copy(mid);
-    labelGroup.add(lbl);
-    simLinks.push({ id: r.id, a, b, line, label: lbl, dashed, confidence: conf });
+    simLinks.push({ id: r.id, a, b, line, dashed, confidence: conf, arc, colorCss: st.css });
   });
 
   // 推理关系叠加：虚化虚线 + "(推)"标注，负数id与库中显式关系区分；仅显示两端均在当前视图的边
@@ -372,18 +510,18 @@ function rebuildGraph() {
       const a = simNodes.find((n) => n.id === ir.source_id);
       const b = simNodes.find((n) => n.id === ir.target_id);
       if (!a || !b) return;
-      const geo = new THREE.BufferGeometry().setFromPoints([a.pos, b.pos]);
-      const mat = new THREE.LineDashedMaterial({ color: 0xc792ea, dashSize: 3, gapSize: 5, transparent: true, opacity: 0.35 });
-      const line = new THREE.Line(geo, mat);
-      line.computeLineDistances();
+      // 推理边并入平行边分组：同对节点的显式边与推理边互不错开编号，仅继续排号
+      const k = ir.source_id < ir.target_id ? `${ir.source_id}|${ir.target_id}` : `${ir.target_id}|${ir.source_id}`;
+      const n = (pairCount.get(k) || 0) + 1;
+      pairCount.set(k, n);
+      const arc = n > 1 ? { idx: n - 1, total: n } : null;
+      const line = makeRelLine(a.pos, b.pos, arc, 0xc792ea, true, 0.35, 3, 5);
       line.userData.relationId = -(idx + 1);
       linkGroup.add(line);
-      const lbl = makeLabelSprite(ir.name + '(推)', '#c792ea', 22);
-      lbl.position.copy(a.pos.clone().add(b.pos).multiplyScalar(0.5));
-      labelGroup.add(lbl);
-      simLinks.push({ id: line.userData.relationId, a, b, line, label: lbl, dashed: true });
+      simLinks.push({ id: line.userData.relationId, a, b, line, dashed: true, arc, colorCss: '#c792ea', inferredName: ir.name + '(推)' });
     });
   }
+  rebuildLinkLabelEls();
 
   simBudget = 420;
   settleCount = 0;
@@ -429,12 +567,7 @@ function simStep() {
   }
   settleCount++;
   for (const l of simLinks) {
-    const posAttr = l.line.geometry.attributes.position;
-    posAttr.setXYZ(0, l.a.pos.x, l.a.pos.y, l.a.pos.z);
-    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.label.position.copy(l.a.pos).add(l.b.pos).multiplyScalar(0.5);
+    updateRelLine(l);
   }
   for (const nd of simNodes) {
     nd.mesh.position.copy(nd.pos);
@@ -466,6 +599,7 @@ function animate() {
     if (camFly.t >= 1) camFly = null;
   }
   controls.update();
+  updateLinkLabels();
   renderer.render(scene, camera);
 }
 animate();
@@ -1439,7 +1573,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.label) l.label.material.opacity = on ? 1 : 0.06;
+    if (l.labelEl) l.labelEl.style.opacity = on ? 1 : 0.06;
   }
 }
 
@@ -1452,7 +1586,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.label) l.label.material.opacity = 1;
+    if (l.labelEl) l.labelEl.style.opacity = 1;
   }
 }
 
@@ -1745,8 +1879,11 @@ function applyStyleLight(dirty) {
         : new THREE.LineBasicMaterial({ color: st.color, transparent: true, opacity: op });
       if (st.dashed) l.line.computeLineDistances();
       l.dashed = st.dashed;
-      const fresh = relabel(l.label, st.css, 24);
-      if (fresh) l.label = fresh;
+      // 标签为HTML层：直接换色
+      if (l.labelEl) {
+        l.labelEl.style.color = st.css;
+        l.labelEl.style.borderColor = st.css + '55';
+      }
     }
   }
 }

package/public/index.html

@@ -231,6 +231,7 @@
     </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,6 +98,16 @@
 
   #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;