@takagaki/cortex-decisions-viewer 0.12.114 → 0.12.115

package/dist/render.js

@@ -20603,6 +20603,12 @@ ${calendarAddUrl.toString()}
       (inAdj[e.b.id] = inAdj[e.b.id] || []).push(e.a.id);
     });
 
+    // 描き直しの間引き（engine #551 のカクつき対策）。操作・検索・期間の切り替え・ホバーの波の間は毎フレーム描き、
+    // それが済んで止まっている間は、星の瞬き（ゆっくり）のためだけに IDLE_FRAME_MS ごとに描く
+    var IDLE_FRAME_MS = 100;
+    var activeUntil = 0;
+    function poke(ms) { activeUntil = Math.max(activeUntil, performance.now() + ms); }
+
     // 検索: 一致ノード（matched）が光り、その隣接（lit）は残し、他は減光する
     var matched = {}, lit = {}, searching = false;
     // 期間（engine #551）を選んでいるときは、その期間に生まれた・変わった記録だけが一致になる（キーワードと両方なら両方を満たす記録）
@@ -20611,6 +20617,7 @@ ${calendarAddUrl.toString()}
       var range = graphPeriodRange(graphState.period.unit === "all" ? null : graphState.period);
       searching = q.length > 0 || !!range;
       matched = {}; lit = {};
+      poke(250);
       if (!searching) {
         countEl.textContent = "点 " + nodes.length + " / つながり " + edges.length;
         return;
@@ -20659,6 +20666,8 @@ ${calendarAddUrl.toString()}
     var UPSTREAM_HOPS = 1;   // 参照元（入辺）を辿る深さ
     var SWEEP_STEP_MS = 120; // 波が1段（1ホップ）進むごとの間隔
     var SWEEP_GROW_MS = 200; // 辺・点が灯り切るまでの時間
+    // ホバーの波が流れ切るまで毎フレーム描く時間（参照元 1 段＋参照先 2 段＝順番 3 まで＋灯り切る時間に余裕を見る）
+    var HOVER_SWEEP_MS = (DOWNSTREAM_HOPS + UPSTREAM_HOPS + 2) * SWEEP_STEP_MS + SWEEP_GROW_MS + 300;
     function computeFitTarget() {
       if (!nodes.length) return null;
       var minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
@@ -20686,7 +20695,10 @@ ${calendarAddUrl.toString()}
         view.x += (t.x - view.x) * 0.18;
         view.y += (t.y - view.y) * 0.18;
       }
+      // まだ目に見えて動いているか（止まっていれば描き直しを間引ける）
+      return Math.abs(t.scale - view.scale) > view.scale * 0.0005 || Math.abs(t.x - view.x) > 0.1 || Math.abs(t.y - view.y) > 0.1;
     }
+    var fitMoving = true;
 
     // ロード時に1回だけ: Goldの中心から外へ「ふわっ」と光が広がるイントロ。
     // 金色（#fcd34d）はホバー連鎖・検索の専用色なので、イントロは寒色で別物として見せる。
@@ -20700,6 +20712,7 @@ ${calendarAddUrl.toString()}
     resetBtn.addEventListener("click", function () {
       autoFit = true; // 全ノードが収まる表示へ滑らかに戻す
       resize();
+      poke(250);
       if (!reduceMotion) introStart = performance.now(); // 中心から光が広がるイントロを再生
     });
     canvas.parentNode.appendChild(resetBtn);
@@ -20834,6 +20847,96 @@ ${calendarAddUrl.toString()}
       return n.recordId && n.glow !== null ? 0.4 + 0.6 * n.glow : 1;
     }
 
+    // 点の光（にじみ・shadowBlur）は、点ごとに毎フレーム描くと 700 点で 1 フレーム 30ms を超える（engine #551 のカクつき）。
+    // にじみだけを小さな絵に前もって描いて使い回し、本体の円はその上に正確な半径で描く。
+    // 絵は画面の画素（device px）で作る（shadowBlur は座標変換に影響されない＝元の描き方と同じ幅）。
+    // 半径は 0.25px・にじみの幅は小さいうちは 0.5 刻み、大きいと約 4% 刻みに丸めて、絵の数を抑える
+    // （小さい点のにじみの明るさは円の面積に比例するので、1px 刻みでは引いた表示で明るさが ±数十% ずれる）
+    var TAU = Math.PI * 2;
+    // 使い回しの置き場は「最近使った順」の上限つき（上限を超えたら一番古いものから捨てる＝ズームし続けても一度に作り直さない）
+    function spriteStore(max) {
+      var m = new Map();
+      return {
+        get: function (k) { var v = m.get(k); if (v) { m.delete(k); m.set(k, v); } return v; },
+        set: function (k, v) { m.set(k, v); if (m.size > max) m.delete(m.keys().next().value); },
+      };
+    }
+    var haloCache = spriteStore(800);
+    // これより大きいにじみ（大きく寄ったとき・画面にわずかな点しか無い）は絵にせず直接描く（大きな絵を溜めない）
+    var HALO_SPRITE_MAX = 512;
+    function haloBlurStep(blur) {
+      if (blur < 0.25) return 0;
+      if (blur <= 12) return Math.round(blur * 2) / 2;
+      return Math.round(12 * Math.pow(1.04, Math.round(Math.log(blur / 12) / Math.log(1.04))) * 2) / 2;
+    }
+    function haloSprite(color, R, blur) {
+      var bq = haloBlurStep(blur);
+      if (!bq) return null;
+      var rq = Math.max(0.25, Math.round(R * 4) / 4);
+      var half = Math.ceil(rq + bq * 1.5 + 2); // にじみ（σ=blur/2）が見える範囲 ≒ 3σ
+      if (half * 2 > HALO_SPRITE_MAX) return false;
+      var key = color + "|" + rq + "|" + bq;
+      var sp = haloCache.get(key);
+      if (sp) return sp;
+      var size = half * 2;
+      var c = document.createElement("canvas");
+      c.width = size; c.height = size;
+      var g = c.getContext("2d");
+      if (!g) return null;
+      // 円は絵の外（左へ size ずらす）に描き、影だけを絵の中央へ落とす＝にじみだけが残る
+      g.shadowColor = color;
+      g.shadowBlur = bq;
+      g.shadowOffsetX = size;
+      g.fillStyle = color;
+      g.beginPath();
+      g.arc(half - size, half, rq, 0, TAU);
+      g.fill();
+      sp = { c: c, h: half };
+      haloCache.set(key, sp);
+      return sp;
+    }
+    // X・Y は画素の境目に揃えた値を渡す（半端な位置だと絵の引き伸ばしが入り、1 枚ごとに何倍も重くなる）
+    function drawHalo(color, R, blur, X, Y) {
+      var sp = haloSprite(color, R, blur);
+      if (sp) { ctx.drawImage(sp.c, X - sp.h, Y - sp.h); return; }
+      if (sp === false) {
+        ctx.save();
+        ctx.shadowColor = color;
+        ctx.shadowBlur = blur;
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.arc(X, Y, R, 0, TAU);
+        ctx.fill();
+        ctx.restore();
+      }
+    }
+    // ラベルも文字を絵にして使い回す（検索で数百のラベルを毎フレーム文字から描くと 1 フレーム 100ms を超える）。
+    // 文字の大きさは画面の画素で一定（11px）なので、ズームしても同じ絵が使える
+    var labelCache = spriteStore(3000);
+    function labelFont(bold) { return (bold ? "600 " : "") + (11 * dpr) + "px 'Noto Sans JP', sans-serif"; }
+    function drawLabel(text, color, bold, X, baseY) {
+      var key = color + "|" + (bold ? 1 : 0) + "|" + text;
+      var sp = labelCache.get(key);
+      if (!sp) {
+        var font = labelFont(bold);
+        var c = document.createElement("canvas");
+        var g = c.getContext("2d");
+        if (!g) return;
+        g.font = font;
+        var asc = Math.ceil(13 * dpr), desc = Math.ceil(4 * dpr); // 11px の文字の上下＋少しの余白
+        c.width = Math.max(1, Math.ceil(g.measureText(text).width) + 2);
+        c.height = asc + desc;
+        g.font = font; // 大きさを変えると描き方の設定が戻るので、もう一度
+        g.fillStyle = color;
+        g.fillText(text, 0, asc);
+        sp = { c: c, asc: asc };
+        labelCache.set(key, sp);
+      }
+      ctx.drawImage(sp.c, Math.round(X), Math.round(baseY - sp.asc));
+    }
+    // ホバーの連鎖（参照先・参照元）は触った点が変わったときだけ辿り直す
+    var linFor = null, linCache = null;
+
     function draw() {
       var rect = canvas.getBoundingClientRect();
       var now = performance.now();
@@ -20862,7 +20965,7 @@ ${calendarAddUrl.toString()}
         ctx.fill();
       });
       ctx.globalAlpha = 1;
-      if (autoFit) applyFit(false); // 全ノードが収まる位置・倍率へ滑らかに追従
+      fitMoving = autoFit ? !!applyFit(false) : false; // 全ノードが収まる位置・倍率へ滑らかに追従
       ctx.translate(view.x, view.y);
       ctx.scale(view.scale, view.scale);
 
@@ -20882,7 +20985,8 @@ ${calendarAddUrl.toString()}
         }
         return hop;
       }
-      if (hovered) {
+      if (hovered && linFor === hovered) lin = linCache;
+      else if (hovered) {
         var downHop = bfsDir(outAdj, DOWNSTREAM_HOPS); // 参照先
         var upHop = bfsDir(inAdj, UPSTREAM_HOPS);       // 参照元
         var maxUp = 0;
@@ -20897,6 +21001,7 @@ ${calendarAddUrl.toString()}
           if (id === hovered.id || lin[id] !== undefined) return;
           lin[id] = { order: maxUp + downHop[id], hop: downHop[id], dir: "down" };
         });
+        linFor = hovered; linCache = lin;
       }
       function hopAlpha(d) {
         return d <= 1 ? 1 : Math.max(0.6, 1 - d * 0.1);
@@ -20915,7 +21020,13 @@ ${calendarAddUrl.toString()}
         reference: "rgba(180,196,230,0.32)", source: "rgba(180,196,230,0.32)", link: "rgba(180,196,230,0.22)",
         about: "rgba(196,181,253,0.22)",
       };
+      // 画面に入っている範囲（世界座標）。両端が同じ側の外にある線は描かない
+      var em = 4 / view.scale; // 線の太さの分の余白（画面で 4px）
+      var wx0 = -view.x / view.scale - em, wy0 = -view.y / view.scale - em;
+      var wx1 = (rect.width - view.x) / view.scale + em, wy1 = (rect.height - view.y) / view.scale + em;
       edges.forEach(function (e) {
+        if ((e.a.x < wx0 && e.b.x < wx0) || (e.a.x > wx1 && e.b.x > wx1) ||
+            (e.a.y < wy0 && e.b.y < wy0) || (e.a.y > wy1 && e.b.y > wy1)) return;
         // ホバー中: リネージに入った辺だけ、波の順に「order の低い側→高い側」へ伸びながら金色に。
         if (hovered) {
           var la = lin[e.a.id], lb = lin[e.b.id];
@@ -20955,6 +21066,10 @@ ${calendarAddUrl.toString()}
         ctx.stroke();
       });
 
+      // 点は画面の画素の座標で描く（にじみの絵をそのまま置くため）
+      var k = view.scale * dpr, ox = view.x * dpr, oy = view.y * dpr;
+      var cw = canvas.width, ch = canvas.height;
+      ctx.setTransform(1, 0, 0, 1, 0, 0);
       nodes.forEach(function (n) {
         var style = GROUP_STYLE[n.group] || GROUP_STYLE.phantom;
         var alphaN = 1;
@@ -20977,46 +21092,45 @@ ${calendarAddUrl.toString()}
         }
         var dim = alphaN < 0.3;
         var isGold = !!n.recordId;
+        var r0 = nodeRadius(n);
+        // 画面の画素での位置と半径（ラベル・輪・にじみはすべて画素で描く）
+        // 中心は画素の境目に揃える（にじみの絵と本体の円の中心を合わせる。dpr 2 なら 0.25px 以内の差）
+        var X = Math.round(n.x * k + ox), Y = Math.round(n.y * k + oy), R = r0 * k;
+        var inChain = hovered && n !== hovered && lin[n.id] !== undefined;
+        var blur =
+          (isGold ? (n.glow === null || matched[n.id] ? Math.max(16, n.glow === null ? 16 : 6 + 22 * n.glow) : 6 + 22 * n.glow) : 7) * (dim ? 0.3 : 1) * (inChain ? 1.7 : 1) * (1 + introFlash * 1.8);
+        // ラベル: Gold層レコードはズームイン時のみ表示（引いて全体表示中は出さない）。
+        // それ以外はホバーの連鎖に入ったときか検索ヒット時のみ（ズームに関係なく表示）。
+        var showLabel = (n.recordId && view.scale >= LABEL_MIN_SCALE) || (hovered && lin[n.id] !== undefined && sweepRamp(lin[n.id]) > 0.15) || (searching && lit[n.id]);
+        // 画面の外の点は描かない（にじみの届く幅・輪・右に出るラベルの幅を見込む）
+        var reach = R + Math.max(blur, 18) * 1.5 + 6 * dpr;
+        if (X + reach + (showLabel ? 300 * dpr : 0) < 0 || X - reach > cw || Y + reach < 0 || Y - reach > ch) return;
         // Gold以外の星はゆっくり瞬く
         var tw = isGold ? 1 : 0.72 + 0.28 * (0.5 + 0.5 * Math.sin(now * 0.0017 + n.phase));
         ctx.globalAlpha = alphaN * tw * glowAlpha(n);
-        var r0 = nodeRadius(n);
         var fill = isGold ? style.color : "#c9d6f2";
         // 検索一致ノードとホバー中のノードは金色のリングで発光させる
         if ((matched[n.id] || n === hovered) && !dim) {
-          ctx.save();
-          ctx.shadowColor = "#fcd34d";
-          ctx.shadowBlur = 18;
+          drawHalo("#fcd34d", R + 2 * dpr, 18, X, Y);
           ctx.beginPath();
-          ctx.arc(n.x, n.y, r0 + 2 / view.scale, 0, Math.PI * 2);
+          ctx.arc(X, Y, R + 2 * dpr, 0, TAU);
           ctx.fillStyle = fill;
           ctx.fill();
-          ctx.restore();
           ctx.strokeStyle = "#fcd34d";
-          ctx.lineWidth = 2.5 / view.scale;
+          ctx.lineWidth = 2.5 * dpr;
           ctx.beginPath();
-          ctx.arc(n.x, n.y, r0 + 3.5 / view.scale, 0, Math.PI * 2);
+          ctx.arc(X, Y, R + 3.5 * dpr, 0, TAU);
           ctx.stroke();
         }
         // 星本体（色のにじみ＝グロー付き）
-        var inChain = hovered && n !== hovered && lin[n.id] !== undefined;
-        ctx.save();
-        ctx.shadowColor =
-          introFlash > 0.01 ? "#bcd0ff" : isGold ? style.color : "#9fb4e8";
-        ctx.shadowBlur =
-          (isGold ? (n.glow === null || matched[n.id] ? Math.max(16, n.glow === null ? 16 : 6 + 22 * n.glow) : 6 + 22 * n.glow) : 7) * (dim ? 0.3 : 1) * (inChain ? 1.7 : 1) * (1 + introFlash * 1.8);
+        drawHalo(introFlash > 0.01 ? "#bcd0ff" : isGold ? style.color : "#9fb4e8", R, blur, X, Y);
         ctx.beginPath();
-        ctx.arc(n.x, n.y, r0, 0, Math.PI * 2);
+        ctx.arc(X, Y, R, 0, TAU);
         ctx.fillStyle = fill;
         ctx.fill();
-        ctx.restore();
-        // ラベル: Gold層レコードはズームイン時のみ表示（引いて全体表示中は出さない）。
-        // それ以外はホバーの連鎖に入ったときか検索ヒット時のみ（ズームに関係なく表示）。
-        if ((n.recordId && view.scale >= LABEL_MIN_SCALE) || (hovered && lin[n.id] !== undefined && sweepRamp(lin[n.id]) > 0.15) || (searching && lit[n.id])) {
-          ctx.fillStyle = dim ? "#3d4763" : matched[n.id] ? "#fde68a" : isGold ? "#e7edfb" : "#9fb0d6";
-          ctx.font = (matched[n.id] ? "600 " : "") + (11 / view.scale) + "px 'Noto Sans JP', sans-serif";
+        if (showLabel) {
           var label = n.label.length > 24 ? n.label.slice(0, 23) + "…" : n.label;
-          ctx.fillText(label, n.x + nodeRadius(n) + 4 / view.scale, n.y + 4 / view.scale);
+          drawLabel(label, dim ? "#3d4763" : matched[n.id] ? "#fde68a" : isGold ? "#e7edfb" : "#9fb0d6", !!matched[n.id], X + R + 4 * dpr, Y + 4 * dpr);
         }
       });
       ctx.globalAlpha = 1;
@@ -21054,7 +21168,7 @@ ${calendarAddUrl.toString()}
         return;
       }
       var nh = nodeAt(ev.clientX, ev.clientY);
-      if (nh !== hovered) { hovered = nh; hoverStart = nh ? performance.now() : 0; } // 別ノードでスイープ再生
+      if (nh !== hovered) { hovered = nh; hoverStart = nh ? performance.now() : 0; poke(HOVER_SWEEP_MS); } // 別ノードでスイープ再生
       canvas.style.cursor = hovered ? "pointer" : "grab";
     });
     canvas.addEventListener("mousedown", function (ev) {
@@ -21086,6 +21200,7 @@ ${calendarAddUrl.toString()}
       view.x = mx - (mx - view.x) * factor;
       view.y = my - (my - view.y) * factor;
       view.scale *= factor;
+      poke(250);
     }, { passive: false });
 
     // ビルド時に座標計算済みなら、ウォームアップ（重い同期計算）を完全に省略する＝開いた瞬間ゼロ待ち。
@@ -21104,10 +21219,17 @@ ${calendarAddUrl.toString()}
       if (!running || !document.body.contains(canvas)) { running = false; return; }
       // 収束後（alpha減衰しきり・無操作）は O(n²) の物理計算 tick を止める。これが「固まり続ける」主因。
       // ドラッグ/パン中は動かす必要があるので回す。描画(draw)はホバー演出・イントロのため毎フレーム続ける。
-      if (alpha > 0.004 || draggingNode || panning) tick();
-      draw();
+      var moving = alpha > 0.004 || draggingNode || panning;
+      if (moving) tick();
+      // 動いている・操作の直後・イントロ・自動フレーミングの途中は毎フレーム描く。止まっている間は瞬きのためだけに間引いて描く（engine #551）
+      var now = performance.now();
+      if (moving || introStart || fitMoving || now < activeUntil || now - lastDrawAt >= IDLE_FRAME_MS) {
+        lastDrawAt = now;
+        draw();
+      }
       requestAnimationFrame(loop);
     }
+    var lastDrawAt = 0;
     loop();
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takagaki/cortex-decisions-viewer",
-  "version": "0.12.114",
+  "version": "0.12.115",
   "description": "Cortexの意思決定記録（Decisions/*.md）を静的サイトにビルドして閲覧する。各レコードに「Edit on GitHub」リンクを付与する。",
   "license": "UNLICENSED",
   "private": false,