dsh-memory-engine 0.7.6 → 0.7.7

package/lib/render/canvas.js

@@ -4,8 +4,43 @@ export function createRenderer(canvas, data, options = {}) {
   const performance = window.performance;
   const ctx = canvas.getContext('2d', { alpha: false });
   if (!ctx) throw new Error('Canvas 2D 不可用');
-  const colors = { '人格':[255,215,106], '印象':[143,216,255], '知识':[126,231,178], '日记':[190,160,255], '对话':[255,160,140], '情绪':[255,90,90] };
-  const fallback = [145,205,255];
+  const THEMES = {
+    classic: {
+      colors: { '人格':[255,215,106], '印象':[143,216,255], '知识':[126,231,178], '日记':[190,160,255], '对话':[255,160,140], '情绪':[255,90,90] },
+      fallback:[145,205,255], background:'#03060c', grid:'rgba(40,90,140,0.055)',
+      link:'rgba(110,190,255,0.30)', linkHighlight:'rgba(160,220,255,0.22)',
+      pulse:[205,245,255], center:[255,255,255], fading:[255,110,110], glow:[0.7,0.19],
+      vignette:['rgba(0,0,0,0)','rgba(0,0,0,.78)'],
+    },
+    neon: {
+      colors: { '人格':[255,255,255], '印象':[63,242,224], '知识':[255,95,210], '事件':[165,107,255], '日记':[192,125,255], '对话':[255,147,233], '情绪':[255,66,130] },
+      fallback:[145,143,255], background:'#0a0410', grid:'rgba(156,70,210,0.07)',
+      link:['rgba(255,95,210,0.36)','rgba(165,107,255,0.36)'], linkHighlight:'rgba(224,175,255,0.24)',
+      pulse:[245,210,255], center:[255,255,255], fading:[255,90,165], glow:[0.7,0.19],
+      vignette:['rgba(10,4,16,0)','rgba(10,4,16,.78)'],
+    },
+    paper: {
+      colors: { '人格':[40,40,40], '印象':[107,107,107], '知识':[64,64,64], '事件':[85,85,85], '日记':[133,133,133], '对话':[116,116,116], '情绪':[76,76,76] },
+      fallback:[96,96,96], background:'#f7f5f0', grid:'rgba(80,78,73,0.022)',
+      link:'rgba(65,65,65,0.34)', linkHighlight:'rgba(100,100,100,0.055)',
+      pulse:[48,48,48], center:[36,36,36], fading:[126,126,126], glow:[0.025,0.006],
+      vignette:['rgba(135,132,125,0)','rgba(135,132,125,.08)'],
+    },
+    mono: {
+      colors: { '人格':[232,232,232], '印象':[200,200,200], '知识':[255,255,255], '事件':[138,138,138], '日记':[174,174,174], '对话':[218,218,218], '情绪':[160,160,160] },
+      fallback:[185,185,185], background:'#0d0d0d', grid:'rgba(130,130,130,0.045)',
+      link:'rgba(178,178,178,0.30)', linkHighlight:'rgba(210,210,210,0.22)',
+      pulse:[235,235,235], center:[255,255,255], fading:[150,150,150], glow:[0.7,0.19],
+      vignette:['rgba(0,0,0,0)','rgba(0,0,0,.78)'],
+    },
+  };
+  let themeName = options.graphTheme ?? data.graphTheme ?? 'classic';
+  if (!Object.hasOwn(THEMES, themeName)) throw new Error('未知图谱配色');
+  let theme = THEMES[themeName];
+  let layoutName = options.graphLayout ?? data.graphLayout ?? 'sphere';
+  if (!['sphere', 'flat', 'spiral'].includes(layoutName)) throw new Error('未知图谱布局');
+  let sphereNodes = [];
+  const layouts = new Map();
   let nodes = [], links = [], hubs = [], linkTwinkle = [], visibleLinks = [];
   const byId = new Map(), adjacency = new Map(), sprites = new Map();
   const pulses = [], firing = new Map(), selections = new Set();
@@ -24,13 +59,44 @@ function glowSprite(rgb) {
   off.width = off.height = 96;
   const brush = off.getContext('2d');
   const gradient = brush.createRadialGradient(48,48,1,48,48,48);
-  gradient.addColorStop(0,'rgba('+rgb.join(',')+',0.7)');
-  gradient.addColorStop(0.4,'rgba('+rgb.join(',')+',0.19)');
+  gradient.addColorStop(0,'rgba('+rgb.join(',')+','+theme.glow[0]+')');
+  gradient.addColorStop(0.4,'rgba('+rgb.join(',')+','+theme.glow[1]+')');
   gradient.addColorStop(1,'rgba('+rgb.join(',')+',0)');
   brush.fillStyle = gradient; brush.fillRect(0,0,96,96);
   return off;
 }
 
+  function recolor() {
+    sprites.clear();
+    for (const star of nodes) {
+      star._rgb = theme.colors[star.kind] || theme.fallback;
+      const key = star._rgb.join(',');
+      if (!sprites.has(key)) sprites.set(key, glowSprite(star._rgb));
+      star._glow = sprites.get(key);
+    }
+  }
+
+  function setTheme(nextTheme) {
+    if (destroyed || nextTheme === themeName) return;
+    if (!Object.hasOwn(THEMES, nextTheme)) throw new Error('未知图谱配色');
+    themeName = nextTheme;
+    theme = THEMES[nextTheme];
+    recolor();
+  }
+
+  function setLayout(nextLayout) {
+    if (destroyed) return;
+    if (!['sphere', 'flat', 'spiral'].includes(nextLayout)) throw new Error('未知图谱布局');
+    if (layoutName === nextLayout && layouts.has(nextLayout)) return;
+    if (!layouts.has(nextLayout)) {
+      if (typeof options.layoutNodes !== 'function') throw new Error('缺少图谱布局函数');
+      layouts.set(nextLayout, options.layoutNodes(sphereNodes, nextLayout).map(node => ({ ...node.pos })));
+    }
+    const positions = layouts.get(nextLayout);
+    nodes.forEach((node, index) => { node.pos = { ...positions[index] }; });
+    layoutName = nextLayout;
+  }
+
   // 字符串 → 32 位无符号哈希。给连线的闪烁参数做种子：
   // 用 id 而不是 Math.random，保证同一条线在每次打开时节奏一致（不会每次刷新都跳），
   // 但不同连线之间互不同步。
@@ -47,6 +113,10 @@ function glowSprite(rgb) {
     if (destroyed) return;
     spinSpeed=nextData.spinSpeed??0.35;
     nodes = nextData.nodes.map(node => ({ ...node, pos: { ...node.pos } }));
+    sphereNodes = nextData.nodes.map(node => ({ ...node, pos: { ...node.pos } }));
+    layouts.clear();
+    layouts.set('sphere', sphereNodes.map(node => ({ ...node.pos })));
+    if (layoutName !== 'sphere') setLayout(layoutName);
     links = nextData.links.map(link => [...link]);
     byId.clear(); adjacency.clear(); sprites.clear(); pulses.length = 0; firing.clear();
     selectedId=typeof options.selectedId==='string'?options.selectedId:null;
@@ -94,7 +164,6 @@ function glowSprite(rgb) {
         .slice(0, LINK_DRAW_CAP);
     }
 for (const star of nodes) {
-  star._rgb = colors[star.kind] || fallback;
   const count = Math.min(9, 4 + Math.round(Math.sqrt(star.degree) * 1.2));
   star._dendrites = Array.from({length:count},(_,index) => ({
     angle:index/count*Math.PI*2+random()*0.7,
@@ -102,11 +171,7 @@ for (const star of nodes) {
     fork:random()<0.55 ? (random()-0.5)*1.5 : null
   }));
 }
-for (const star of nodes) {
-  const key = star._rgb.join(',');
-  if (!sprites.has(key)) sprites.set(key,glowSprite(star._rgb));
-  star._glow = sprites.get(key);
-}
+recolor();
 
   }
 
@@ -210,8 +275,8 @@ function frame(now) {
     }
     nextFire=now+1400+Math.random()*3200;
   }
-  ctx.globalCompositeOperation='source-over'; ctx.fillStyle='#03060c'; ctx.fillRect(0,0,width,height);
-  ctx.strokeStyle='rgba(40,90,140,0.055)';ctx.lineWidth=1;
+  ctx.globalCompositeOperation='source-over'; ctx.fillStyle=theme.background; ctx.fillRect(0,0,width,height);
+  ctx.strokeStyle=theme.grid;ctx.lineWidth=1;
   for (let index=0;index<20;index++) {
     const y=index/20*height;
     ctx.beginPath();ctx.moveTo(0,y);ctx.bezierCurveTo(width*.3,y+Math.sin(now*.00007+index)*30,width*.7,y-Math.cos(now*.00006+index)*30,width,y);ctx.stroke();
@@ -246,13 +311,18 @@ function frame(now) {
     }
   }
   if (linkPaths.length) {
-    ctx.strokeStyle='rgba(110,190,255,0.30)';
+    if (Array.isArray(theme.link)) {
+      const gradient = ctx.createLinearGradient(0,0,width,height);
+      gradient.addColorStop(0,theme.link[0]);
+      gradient.addColorStop(1,theme.link[1]);
+      ctx.strokeStyle=gradient;
+    } else ctx.strokeStyle=theme.link;
     ctx.lineWidth=1;
     ctx.beginPath();
     for (const p of linkPaths) { ctx.moveTo(p[0],p[1]); ctx.quadraticCurveTo(p[2],p[3],p[4],p[5]); }
     ctx.stroke();
     // 更亮的一层，让关联线看得清
-    ctx.strokeStyle='rgba(160,220,255,0.22)';
+    ctx.strokeStyle=theme.linkHighlight;
     ctx.lineWidth=2;
     ctx.stroke();
   }
@@ -265,7 +335,7 @@ function frame(now) {
     const inverse=1-fraction;
     const x=inverse*inverse*first.p.x+2*inverse*fraction*mx+fraction*fraction*second.p.x;
     const y=inverse*inverse*first.p.y+2*inverse*fraction*my+fraction*fraction*second.p.y;
-    ctx.fillStyle='rgba(205,245,255,'+(.9*inverse)+')';ctx.beginPath();ctx.arc(x,y,2.5+2*inverse,0,Math.PI*2);ctx.fill();
+    ctx.fillStyle='rgba('+theme.pulse.join(',')+','+(.9*inverse)+')';ctx.beginPath();ctx.arc(x,y,2.5+2*inverse,0,Math.PI*2);ctx.fill();
   }
   for (const {star,p} of points) {
     const act=firing.get(star.id)||0,ret=Math.max(.05,Math.min(1.2,star.retention));
@@ -305,9 +375,9 @@ function frame(now) {
     ctx.globalAlpha=Math.min(1,.4+intensity*.7);ctx.drawImage(star._glow,p.x-glowRadius,p.y-glowRadius,glowRadius*2,glowRadius*2);ctx.globalAlpha=1;
     ctx.fillStyle='rgba('+rgb+','+Math.min(1,.42*intensity)+')';ctx.beginPath();ctx.arc(p.x,p.y,radius,0,Math.PI*2);ctx.fill();
     ctx.strokeStyle='rgba('+rgb+','+Math.min(1,.75*intensity)+')';ctx.lineWidth=1;ctx.stroke();
-    ctx.fillStyle='rgba(255,255,255,'+Math.min(1,.6*intensity)+')';ctx.beginPath();ctx.arc(p.x,p.y,radius*.42,0,Math.PI*2);ctx.fill();
+    ctx.fillStyle='rgba('+theme.center.join(',')+','+Math.min(1,.6*intensity)+')';ctx.beginPath();ctx.arc(p.x,p.y,radius*.42,0,Math.PI*2);ctx.fill();
     if (star.retention<.25) {
-      ctx.strokeStyle='rgba(255,110,110,'+Math.max(0,.45-star.retention)+')';ctx.setLineDash([3,4]);
+      ctx.strokeStyle='rgba('+theme.fading.join(',')+','+Math.max(0,.45-star.retention)+')';ctx.setLineDash([3,4]);
       ctx.beginPath();ctx.arc(p.x,p.y,radius*3.2,0,Math.PI*2);ctx.stroke();ctx.setLineDash([]);
     }
     star._screen={x:p.x,y:p.y,r:Math.max(8,radius*2.6)};
@@ -318,7 +388,7 @@ function frame(now) {
   }
   ctx.globalCompositeOperation='source-over';
   const vignette=ctx.createRadialGradient(width/2,height/2,Math.min(width,height)*.34,width/2,height/2,Math.max(width,height)*.8);
-  vignette.addColorStop(0,'rgba(0,0,0,0)');vignette.addColorStop(1,'rgba(0,0,0,.78)');
+  vignette.addColorStop(0,theme.vignette[0]);vignette.addColorStop(1,theme.vignette[1]);
   ctx.fillStyle=vignette;ctx.fillRect(0,0,width,height);
 }
   function start() {
@@ -371,12 +441,12 @@ function frame(now) {
     if (destroyed) return;
     stop(); destroyed=true;
     selections.clear(); byId.clear(); adjacency.clear(); sprites.clear();
-    nodes=[]; links=[]; hubs=[];
+    nodes=[]; links=[]; hubs=[]; sphereNodes=[]; layouts.clear();
   }
 
   setData(data);
   return {
-    start, stop, resize, setData, destroy,
+    start, stop, resize, setData, setTheme, setLayout, destroy,
     fireNeuron(id) { if (!destroyed && byId.has(id)) fire(id,performance.now()); },
     onSelect(callback) {
       if (!destroyed) selections.add(callback);

package/lib/render/layout.mjs

@@ -1,5 +1,38 @@
 const SEED = 20261030;
 
+export function layoutPositions(nodes, layout = 'sphere') {
+  if (!['sphere', 'flat', 'spiral'].includes(layout)) throw new Error('未知图谱布局');
+  if (layout === 'sphere') return nodes.map(node => ({ ...node, pos: { ...node.pos } }));
+  const memories = nodes.filter(node => !node.isCore).sort((left, right) =>
+    (right.degree || 0) - (left.degree || 0) || (String(left.id) < String(right.id) ? -1 : String(left.id) > String(right.id) ? 1 : 0));
+  const positions = new Map();
+  function jitter(id, axis) {
+    let hash = 20261030;
+    for (const character of String(id) + ':' + axis) hash = Math.imul(hash ^ character.codePointAt(0), 16777619);
+    hash = Math.imul(hash ^ (hash >>> 16), 0x45d9f3b);
+    return ((hash ^ (hash >>> 16)) >>> 0) / 4294967295 * 2 - 1;
+  }
+  if (layout === 'flat') {
+    for (let ring = 0; ring < 3; ring++) {
+      const members = memories.slice(Math.ceil(memories.length * ring / 3), Math.ceil(memories.length * (ring + 1) / 3));
+      const radius = [30, 55, 80][ring];
+      members.forEach((node, index) => {
+        const angle = index / members.length * Math.PI * 2;
+        positions.set(node.id, { x: Math.cos(angle) * radius + jitter(node.id, 'x') * 3,
+          y: Math.sin(angle) * radius + jitter(node.id, 'y') * 3, z: 0 });
+      });
+    }
+  } else {
+    memories.forEach((node, index) => {
+      const fraction = index / Math.max(1, memories.length - 1);
+      const angle = fraction * 3.2 * Math.PI + index % 3 * Math.PI * 2 / 3 + jitter(node.id, 'angle') * 0.35;
+      const radius = 18 + fraction * 92;
+      positions.set(node.id, { x: Math.cos(angle) * radius, y: Math.sin(angle) * radius, z: jitter(node.id, 'z') * 14 });
+    });
+  }
+  return nodes.map(node => ({ ...node, pos: node.isCore ? { x: 0, y: 0, z: 0 } : positions.get(node.id) }));
+}
+
 export function layoutMemories(nodes) {
   if (!nodes.some(node => node.isCore)) return layoutBrain(nodes);
   const golden = Math.PI * (3 - Math.sqrt(5));

package/lib/render/render.mjs

@@ -1,5 +1,6 @@
 import fs from 'node:fs';
 import { stripRendererExport } from '../../scripts/lib/strip-export.mjs';
+import { layoutPositions } from './layout.mjs';
 
 const rendererSource = stripRendererExport(fs.readFileSync(new URL('./canvas.js', import.meta.url), 'utf8'));
 
@@ -31,10 +32,21 @@ export function renderHtml(data, title = '记忆神经网络') {
   .review h2{font-size:14px;color:#ffdb82;margin:0 0 8px}.row{display:flex;gap:7px;align-items:center;margin:5px 0;color:#b1c6d9}
   .row .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar{width:52px;height:5px;border-radius:5px;background:#335066;overflow:hidden}.bar i{display:block;height:100%;background:#6bc9fa}
   .tip{position:fixed;right:18px;bottom:18px;color:#7b99ad;pointer-events:none}
+  body[data-graph-theme=neon]{--text:#f4dfff;--muted:#ba9aca;--accent:#ff9de1;--border:#704580;--panel:#170d21ee;--button:#271333}
+  body[data-graph-theme=paper]{color-scheme:light;--text:#303030;--muted:#72716d;--accent:#404040;--border:#b5b1a9;--panel:#f7f5f0f2;--button:#eeece6}
+  body[data-graph-theme=mono]{--text:#eee;--muted:#aaa;--accent:#eee;--border:#666;--panel:#171717ee;--button:#252525}
+  body:not([data-graph-theme=classic]){color:var(--text)}
+  body:not([data-graph-theme=classic]) .hud{color:var(--text);text-shadow:none}
+  body:not([data-graph-theme=classic]) .hud strong,body:not([data-graph-theme=classic]) h2{color:var(--accent)}
+  body:not([data-graph-theme=classic]) .sub,body:not([data-graph-theme=classic]) .tip,body:not([data-graph-theme=classic]) .meta{color:var(--muted)}
+  body:not([data-graph-theme=classic]) .panel,body:not([data-graph-theme=classic]) .review{background:var(--panel);border-color:var(--border);box-shadow:none}
+  body:not([data-graph-theme=classic]) .row,body:not([data-graph-theme=classic]) .close{color:var(--text)}
+  body:not([data-graph-theme=classic]) .copy{color:var(--text);background:var(--button);border-color:var(--border)}
+  body:not([data-graph-theme=classic]) .bar{background:var(--border)}body:not([data-graph-theme=classic]) .bar i{background:var(--accent)}
   @media(max-width:700px){.hud{top:8px;left:10px}.hud .sub,.tip{display:none}.review{left:10px;bottom:10px;max-height:24vh}.panel{top:8px;right:8px;max-height:55vh}}
 </style>
 </head>
-<body>
+<body data-graph-theme="${escapeHtml(data.graphTheme || 'classic')}">
 <canvas id="map" aria-label="记忆神经网络"></canvas>
 <div class="hud"><strong>${safeTitle}</strong><div><span id="total"></span> 个神经元 · <span id="linkCount"></span> 条突触</div><div class="sub">大小＝重要度和连接数 · 亮度＝留存</div></div>
 <section class="panel" id="panel"><button class="close" id="close" aria-label="关闭">×</button><div id="kind"></div><h2 id="title"></h2><div class="meta" id="meta"></div><div class="text" id="body"></div><button class="copy" id="copy" hidden>复制全文</button></section>
@@ -44,7 +56,8 @@ export function renderHtml(data, title = '记忆神经网络') {
 const DATA = ${embedded};
 const canvas = document.getElementById('map');
 ${rendererSource}
-const renderer = createRenderer(canvas, { ...DATA, nodes: DATA.stars });
+${layoutPositions.toString()}
+const renderer = createRenderer(canvas, { ...DATA, nodes: DATA.stars }, { layoutNodes: layoutPositions });
 document.getElementById('close').onclick=() => { document.getElementById('panel').style.display='none'; };
 document.getElementById('total').textContent=DATA.stats.total;
 document.getElementById('linkCount').textContent=DATA.links.length;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-memory-engine",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "description": "DSH 本地记忆插件：自动记忆、遗忘曲线、关键词关联、可检索可编辑，数据留在本机。",
   "keywords": [
     "dsh",

package/scripts/build-client.mjs

@@ -1,13 +1,16 @@
 import fs from 'node:fs';
 import { randomUUID } from 'node:crypto';
 import { stripRendererExport } from './lib/strip-export.mjs';
+import { layoutPositions } from '../lib/render/layout.mjs';
 
 const template = fs.readFileSync(new URL('../lib/client.src.js', import.meta.url), 'utf8');
 const renderer = fs.readFileSync(new URL('../lib/render/canvas.js', import.meta.url), 'utf8');
 const marker = '/* __CANVAS_RENDERER__ */';
 if (template.split(marker).length !== 2) throw new Error('Expected exactly one renderer marker');
+const layoutMarker = '/* __GRAPH_LAYOUT__ */';
+if (template.split(layoutMarker).length !== 2) throw new Error('Expected exactly one layout marker');
 const bundled = '// 由 scripts/build-client.mjs 生成，别直接改这个文件\n'
-  + template.replace(marker, () => stripRendererExport(renderer));
+  + template.replace(marker, () => stripRendererExport(renderer)).replace(layoutMarker, () => layoutPositions.toString());
 const target = new URL('../lib/client.js', import.meta.url);
 if (process.argv.includes('--check')) {
   if (fs.readFileSync(target, 'utf8') !== bundled) throw new Error('lib/client.js 已过期，请跑 pnpm build');