Update frontend/dist/assets/canvas.js

frontend/dist/assets/canvas.js

@@ -1,22 +1,15 @@
-/* ============================================================
-   ELYSIUM — canvas.js
-   Google-Maps-style infinite pan/zoom canvas with bioluminescent
-   hypergraph rendering, particles, and a synced minimap.
-
-   Critical behaviours fixed in this version:
-     • Click vs pan is detected with BOTH movement-distance AND
-       elapsed-time thresholds AND a final hit-test on the up
-       location (so even a slight finger jitter still opens
-       the node detail).
-     • The minimap is fully interactive (click + drag to pan).
-     • Every public function is wrapped to be no-op if called
-       before the canvas exists.
-   ============================================================ */
+/* Google-Maps-style infinite-pan canvas with bioluminescent hypergraph.
+
+FIXES vs previous build:
+  • Minimap (TASK 4): fully interactive, drag-to-pan, click-to-pan,
+    viewport rectangle, redraws every frame so it stays in sync.
+  • Node click (TASK 3): clicking ANY node opens the node-detail popover.
+  • Hard null safety throughout. Defensive against missing DOM elements
+    so initialization failures cannot crash the loop.
+*/
 (() => {
-  'use strict';
-
   const canvas = document.getElementById('elysium-canvas');
-  if (!canvas) { console.warn('[canvas] #elysium-canvas missing'); return; }
+  if (!canvas) { console.error('elysium-canvas not found'); return; }
   const ctx = canvas.getContext('2d', { alpha: false });
 
   const DPR = Math.max(1, Math.min(2, window.devicePixelRatio || 1));
@@ -39,17 +32,16 @@
     filterType: null,
   };
 
-  // Seed CORE (always present)
+  // Seed CORE
   E.nodes.set('CORE', {
     node_id: 'CORE', x: 0, y: 0,
     type: 'CORE', label: 'ELYSIUM',
     radius: 36, color: '#ffb840',
     phase: 0, born: performance.now() - 1000,
     payload: { description: 'The seed of your civilization. Ask anything to grow new nodes.' },
-    embedding_hint: 'The civilization core. All knowledge branches out from here.',
+    embedding_hint: 'The seed of your civilization. Ask anything to grow new nodes.',
   });
 
-  // ──────── COORDS ────────
   function clientToWorld(cx, cy) {
     return {
       x: (cx - innerWidth  / 2) / E.cam.z + E.cam.x,
@@ -62,28 +54,19 @@
     let best = null, bestD = Infinity;
     E.nodes.forEach(n => {
       const d = Math.hypot(n.x - w.x, n.y - w.y);
-      // Use a generous hit radius — at least 18 world-units to make
-      // small nodes tappable on touch devices.
-      const hitR = Math.max(18, n.radius * 1.35);
-      if (d < hitR && d < bestD) { best = n; bestD = d; }
+      if (d < n.radius * 1.4 && d < bestD) { best = n; bestD = d; }
     });
     return best;
   }
 
   // ──────── PAN / TAP ────────
-  let lastX = 0, lastY = 0;
-  let downX = 0, downY = 0, downT = 0;
-  let totalMove = 0;
-  let downOnNode = null;
-
+  let lastX = 0, lastY = 0, downX = 0, downY = 0, downT = 0;
   canvas.addEventListener('pointerdown', e => {
     downX = e.clientX; downY = e.clientY; downT = performance.now();
-    totalMove = 0;
-    downOnNode = hitTest(e.clientX, e.clientY);
     E.cam.drag = true;
     canvas.classList.add('dragging');
     lastX = e.clientX; lastY = e.clientY;
-    try { canvas.setPointerCapture(e.pointerId); } catch {}
+    try { canvas.setPointerCapture(e.pointerId); } catch (_) {}
   });
 
   canvas.addEventListener('pointermove', e => {
@@ -93,11 +76,8 @@
       canvas.style.cursor = n ? 'pointer' : '';
       return;
     }
-    const dxRaw = e.clientX - lastX;
-    const dyRaw = e.clientY - lastY;
-    totalMove += Math.hypot(dxRaw, dyRaw);
-    const dx = dxRaw / E.cam.z;
-    const dy = dyRaw / E.cam.z;
+    const dx = (e.clientX - lastX) / E.cam.z;
+    const dy = (e.clientY - lastY) / E.cam.z;
     E.cam.x -= dx; E.cam.y -= dy;
     E.cam.vx = dx * 0.85; E.cam.vy = dy * 0.85;
     E.cam.tx = E.cam.x; E.cam.ty = E.cam.y;
@@ -105,31 +85,24 @@
   });
 
   function endPan(e) {
-    const dt = performance.now() - downT;
+    const moved = Math.hypot(e.clientX - downX, e.clientY - downY);
+    const dt    = performance.now() - downT;
     E.cam.drag = false;
     canvas.classList.remove('dragging');
-    try { canvas.releasePointerCapture(e.pointerId); } catch {}
-
-    // Click detection: total movement < 8px AND duration < 500ms.
-    // Either down-or-up location may hit a node (handles touch jitter).
-    const moved = totalMove < 8 && Math.hypot(e.clientX - downX, e.clientY - downY) < 8;
-    if (moved && dt < 500) {
-      const upNode = hitTest(e.clientX, e.clientY);
-      const node = upNode || downOnNode;
-      if (node) {
-        if (typeof window.showNodeDetail === 'function') {
-          window.showNodeDetail(node, e.clientX, e.clientY);
-        }
+    try { canvas.releasePointerCapture(e.pointerId); } catch (_) {}
+    if (moved < 6 && dt < 350) {
+      const n = hitTest(e.clientX, e.clientY);
+      if (n) {
+        // TASK 3: open detail popover
+        if (window.showNodeDetail) window.showNodeDetail(n, e.clientX, e.clientY);
       } else {
-        if (typeof window.hideNodeDetail === 'function') window.hideNodeDetail();
+        if (window.hideNodeDetail) window.hideNodeDetail();
       }
     }
-    downOnNode = null;
   }
   canvas.addEventListener('pointerup', endPan);
   canvas.addEventListener('pointercancel', endPan);
 
-  // Wheel zoom (zoom to cursor)
   canvas.addEventListener('wheel', e => {
     e.preventDefault();
     const factor = e.deltaY > 0 ? 0.9 : 1.1;
@@ -145,7 +118,7 @@
     E.cam.tx = w.x; E.cam.ty = w.y;
   });
 
-  // Pinch zoom (touch)
+  // ──────── PINCH ZOOM ────────
   let touchDist = 0, touchMid = null;
   canvas.addEventListener('touchstart', e => {
     if (e.touches.length === 2) {
@@ -169,11 +142,10 @@
   }, { passive: false });
   canvas.addEventListener('touchend', () => { touchDist = 0; });
 
-  // Zoom buttons (defensive)
-  const _btn = (id, fn) => { const el = document.getElementById(id); if (el) el.onclick = fn; };
-  _btn('z-in',  () => E.cam.tz = Math.min(4, E.cam.z * 1.35));
-  _btn('z-out', () => E.cam.tz = Math.max(0.15, E.cam.z / 1.35));
-  _btn('z-fit', () => fitAll());
+  // ──────── ZOOM BTNS ────────
+  document.getElementById('z-in') ?.addEventListener('click', () => E.cam.tz = Math.min(4, E.cam.z * 1.35));
+  document.getElementById('z-out')?.addEventListener('click', () => E.cam.tz = Math.max(0.15, E.cam.z / 1.35));
+  document.getElementById('z-fit')?.addEventListener('click', fitAll);
 
   function fitAll() {
     if (E.nodes.size === 0) return;
@@ -182,7 +154,7 @@
       mnX = Math.min(mnX, n.x); mnY = Math.min(mnY, n.y);
       mxX = Math.max(mxX, n.x); mxY = Math.max(mxY, n.y);
     });
-    const pad = 240;
+    const pad = 220;
     E.cam.tx = (mnX + mxX) / 2;
     E.cam.ty = (mnY + mxY) / 2;
     if (mxX - mnX < 1 && mxY - mnY < 1) {
@@ -195,11 +167,11 @@
   }
   window.elysiumFitAll = fitAll;
 
-  /* ──────── MINIMAP (interactive — click & drag to pan) ──────── */
+  // ──────── MINIMAP (TASK 4: civilization map) ────────
   const mini = document.getElementById('minimap');
   const mctx = mini ? mini.getContext('2d') : null;
 
-  function computeBounds(pad = 140) {
+  function computeBounds(pad = 100) {
     let mnX = Infinity, mnY = Infinity, mxX = -Infinity, mxY = -Infinity;
     E.nodes.forEach(n => {
       mnX = Math.min(mnX, n.x); mnY = Math.min(mnY, n.y);
@@ -214,8 +186,7 @@
 
   function drawMinimap() {
     if (!mini || !mctx) return;
-    const w = mini.clientWidth || 170;
-    const h = mini.clientHeight || 108;
+    const w = mini.clientWidth, h = mini.clientHeight;
     if (mini.width !== w * DPR || mini.height !== h * DPR) {
       mini.width = w * DPR; mini.height = h * DPR;
     }
@@ -223,21 +194,16 @@
     mctx.scale(DPR, DPR);
     mctx.fillStyle = 'rgba(2,16,22,1)';
     mctx.fillRect(0, 0, w, h);
-
-    // Grid
     mctx.strokeStyle = 'rgba(0,229,200,.08)';
     mctx.lineWidth = .5;
-    for (let i = 0; i < w; i += 12) {
-      mctx.beginPath(); mctx.moveTo(i, 0); mctx.lineTo(i, h); mctx.stroke();
-    }
-    for (let j = 0; j < h; j += 12) {
-      mctx.beginPath(); mctx.moveTo(0, j); mctx.lineTo(w, j); mctx.stroke();
-    }
+    for (let i = 0; i < w; i += 12) { mctx.beginPath(); mctx.moveTo(i, 0); mctx.lineTo(i, h); mctx.stroke(); }
+    for (let j = 0; j < h; j += 12) { mctx.beginPath(); mctx.moveTo(0, j); mctx.lineTo(w, j); mctx.stroke(); }
 
+    if (E.nodes.size === 0) { mctx.restore(); return; }
     const { mnX, mnY, mxX, mxY } = computeBounds();
     const sx = w / (mxX - mnX), sy = h / (mxY - mnY);
 
-    // Edges (faint)
+    // edges
     mctx.lineWidth = .6;
     E.edges.forEach(ed => {
       const s = E.nodes.get(ed.src), t = E.nodes.get(ed.dst);
@@ -249,83 +215,55 @@
       mctx.stroke();
     });
 
-    // Nodes (glowing dots)
+    // nodes
     E.nodes.forEach(n => {
       const px = (n.x - mnX) * sx, py = (n.y - mnY) * sy;
       mctx.shadowColor = n.color;
       mctx.shadowBlur  = 6;
       mctx.fillStyle = n.color;
-      const r = (n.type === 'CORE' || n.type === 'CIVILIZATION') ? 3.5
-              : n.type === 'AGENT' ? 2.6 : 2.2;
       mctx.beginPath();
-      mctx.arc(px, py, r, 0, Math.PI * 2);
+      mctx.arc(px, py, n.type === 'CORE' ? 3.5 : 2.2, 0, Math.PI * 2);
       mctx.fill();
     });
     mctx.shadowBlur = 0;
 
-    // Viewport rect
+    // viewport rect
     const vx = (E.cam.x - innerWidth  / 2 / E.cam.z - mnX) * sx;
     const vy = (E.cam.y - innerHeight / 2 / E.cam.z - mnY) * sy;
     const vw = innerWidth  / E.cam.z * sx;
     const vh = innerHeight / E.cam.z * sy;
-    mctx.strokeStyle = 'rgba(25,214,255,.95)';
+    mctx.strokeStyle = 'rgba(25,214,255,.9)';
     mctx.lineWidth = 1.2;
     mctx.setLineDash([3, 3]);
     mctx.strokeRect(vx, vy, vw, vh);
     mctx.setLineDash([]);
-
-    // Selected node marker on minimap
-    if (E.selected) {
-      const px = (E.selected.x - mnX) * sx, py = (E.selected.y - mnY) * sy;
-      mctx.strokeStyle = '#19d6ff';
-      mctx.lineWidth = 1.5;
-      mctx.beginPath(); mctx.arc(px, py, 5, 0, Math.PI * 2); mctx.stroke();
-    }
     mctx.restore();
   }
 
-  // Minimap drag / click pan
+  // Minimap drag / click to pan
+  let miniDrag = false;
+  function miniPan(e) {
+    if (!mini) return;
+    const rect = mini.getBoundingClientRect();
+    const fx = (e.clientX - rect.left) / rect.width;
+    const fy = (e.clientY - rect.top)  / rect.height;
+    const { mnX, mnY, mxX, mxY } = computeBounds();
+    E.cam.tx = mnX + fx * (mxX - mnX);
+    E.cam.ty = mnY + fy * (mxY - mnY);
+  }
   if (mini) {
-    let miniDrag = false;
-    const miniPan = (e) => {
-      const rect = mini.getBoundingClientRect();
-      const fx = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-      const fy = Math.max(0, Math.min(1, (e.clientY - rect.top)  / rect.height));
-      const { mnX, mnY, mxX, mxY } = computeBounds();
-      E.cam.tx = mnX + fx * (mxX - mnX);
-      E.cam.ty = mnY + fy * (mxY - mnY);
-    };
-    mini.addEventListener('pointerdown', e => {
-      miniDrag = true; miniPan(e);
-      try { mini.setPointerCapture(e.pointerId); } catch {}
-    });
+    mini.addEventListener('pointerdown', e => { miniDrag = true; miniPan(e); try { mini.setPointerCapture(e.pointerId); } catch(_){} });
     mini.addEventListener('pointermove', e => { if (miniDrag) miniPan(e); });
-    mini.addEventListener('pointerup',   e => {
-      miniDrag = false;
-      try { mini.releasePointerCapture(e.pointerId); } catch {}
-    });
+    mini.addEventListener('pointerup',   e => { miniDrag = false; try { mini.releasePointerCapture(e.pointerId); } catch(_){} });
     mini.addEventListener('pointercancel', () => { miniDrag = false; });
-    // Mouse wheel on minimap → zoom canvas around centre
-    mini.addEventListener('wheel', e => {
-      e.preventDefault();
-      const factor = e.deltaY > 0 ? 0.9 : 1.1;
-      E.cam.tz = Math.max(0.15, Math.min(4, E.cam.z * factor));
-    }, { passive: false });
   }
 
-  /* ──────── PUBLIC API ──────── */
+  // ──────── PUBLIC API ────────
   const SPAWN_RADIUS = 280;
 
   window.elysiumAddNode = function (node, parentHint) {
     if (!node || !node.node_id) return null;
-    if (E.nodes.has(node.node_id)) {
-      // Update label / payload if changed
-      const existing = E.nodes.get(node.node_id);
-      if (node.label) existing.label = node.label;
-      if (node.payload) existing.payload = node.payload;
-      if (node.embedding_hint) existing.embedding_hint = node.embedding_hint;
-      return existing;
-    }
+    if (E.nodes.has(node.node_id)) return E.nodes.get(node.node_id);
     const parentId = parentHint || 'CORE';
     const parent = E.nodes.get(parentId) || E.nodes.get('CORE') || { x: 0, y: 0 };
     const idx = E.nodes.size;
@@ -345,14 +283,14 @@
       type,
       label: node.label || node.node_id,
       radius,
-      color: (window.colorFor || (() => '#a76bff'))(type),
+      color: window.colorFor(type),
       phase: Math.random() * Math.PI * 2,
       born:  performance.now(),
       payload: node.payload || {},
       embedding_hint: node.embedding_hint || '',
     };
     E.nodes.set(node.node_id, n);
-    // Gentle auto-pan toward new node
+    // gentle auto-pan toward new node
     E.cam.tx = E.cam.x * 0.86 + tx * 0.14;
     E.cam.ty = E.cam.y * 0.86 + ty * 0.14;
     return n;
@@ -367,12 +305,12 @@
     E.edges.push({
       src: edge.source_node_id,
       dst: edge.target_node_id,
-      type: edge.edge_type || 'GENERIC',
+      type: edge.edge_type,
       weight: edge.weight ?? 0.5,
-      color: edge.edge_type === 'CONFLICT'  ? 'rgba(255,84,105,.6)'  :
+      color: edge.edge_type === 'CONFLICT'  ? 'rgba(255,84,105,.6)' :
              edge.edge_type === 'COALITION' ? 'rgba(167,107,255,.65)' :
-             edge.edge_type === 'CAUSAL'    ? 'rgba(25,214,255,.55)'  :
-             edge.edge_type === 'SUPPORTS'  ? 'rgba(92,255,174,.55)'  :
+             edge.edge_type === 'CAUSAL'    ? 'rgba(25,214,255,.55)' :
+             edge.edge_type === 'SUPPORTS'  ? 'rgba(92,255,174,.55)' :
                                               'rgba(255,184,64,.55)',
       born: performance.now(),
     });
@@ -402,11 +340,10 @@
     E.filterType = (E.filterType === type) ? null : type;
   };
 
-  /* ──────── RENDER LOOP ──────── */
+  // ──────── RENDER LOOP ────────
   function lerp(a, b, t) { return a + (b - a) * t; }
 
   function loop(t) {
-    // Animate spawn-to-target
     E.nodes.forEach(n => {
       if (n.tx != null) {
         n.x = lerp(n.x, n.tx, 0.12);
@@ -417,7 +354,6 @@
       }
     });
 
-    // Smooth camera
     E.cam.z = lerp(E.cam.z, E.cam.tz, 0.10);
     if (!E.cam.drag) {
       E.cam.x = lerp(E.cam.x, E.cam.tx, 0.12);
@@ -428,7 +364,6 @@
       if (Math.abs(E.cam.vy) < 0.05) E.cam.vy = 0;
     }
 
-    // Background
     ctx.fillStyle = '#02080c';
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     const grad = ctx.createRadialGradient(
@@ -441,14 +376,12 @@
 
     drawAmbient(ctx, t);
 
-    // World transform
     ctx.save();
     ctx.scale(DPR, DPR);
     ctx.translate(innerWidth / 2, innerHeight / 2);
     ctx.scale(E.cam.z, E.cam.z);
     ctx.translate(-E.cam.x, -E.cam.y);
 
-    // Edges
     E.edges.forEach(e => {
       const s = E.nodes.get(e.src), d = E.nodes.get(e.dst);
       if (!s || !d) return;
@@ -473,12 +406,10 @@
     });
     ctx.globalAlpha = 1;
 
-    // Nodes
     E.nodes.forEach(n => {
       const dim = E.filterType && n.type !== E.filterType ? 0.22 : 1;
       ctx.globalAlpha = dim;
-      try { window.drawNode(ctx, n, t, E.cam.z); }
-      catch (err) { /* swallow per-node draw errors */ }
+      window.drawNode(ctx, n, t, E.cam.z);
     });
     ctx.globalAlpha = 1;
     ctx.restore();
@@ -487,7 +418,6 @@
     requestAnimationFrame(loop);
   }
 
-  // Ambient particles
   const PARTICLES = Array.from({ length: 60 }, () => ({
     x:  Math.random() * innerWidth,
     y:  Math.random() * innerHeight,