synabun 1.3.0

package/neural-interface/public/variant/2d/hulls.js

@@ -0,0 +1,207 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — 2D Category Hulls
+// Convex hull overlays around category clusters
+// Canvas: #hull-canvas
+// ═══════════════════════════════════════════
+
+import { gfx } from './gfx.js';
+import { state, emit, on } from '../../shared/state.js';
+import { catColor, hexAlpha } from '../../shared/colors.js';
+
+const $ = (id) => document.getElementById(id);
+
+// ── Private state ──
+let _hullsVisible = true;
+let _hullThrottle = 0;
+let _hullCanvas = null;
+let _hullCtx = null;
+let _graph = null;
+
+// ═══════════════════════════════════════════
+// INIT
+// ═══════════════════════════════════════════
+
+/**
+ * Initialize hull overlay canvas and toggle button.
+ * @param {object} graphInstance  The force-graph instance
+ */
+export function initHulls(graphInstance) {
+  _graph = graphInstance;
+  _hullCanvas = $('hull-canvas');
+  if (!_hullCanvas) return;
+  _hullCtx = _hullCanvas.getContext('2d');
+
+  _hullCanvas.width = window.innerWidth;
+  _hullCanvas.height = window.innerHeight;
+
+  // Toggle button
+  const toggleBtn = $('hull-toggle-btn');
+  if (toggleBtn) {
+    toggleBtn.addEventListener('click', () => {
+      toggleHulls();
+    });
+  }
+
+  // Handle window resize
+  window.addEventListener('resize', _onResize);
+}
+
+// ═══════════════════════════════════════════
+// DRAW
+// ═══════════════════════════════════════════
+
+/**
+ * Draw convex hulls around category clusters.
+ * Throttled to max ~2fps (500ms interval).
+ * Called from graph's onRenderFramePost callback.
+ */
+export function drawHulls() {
+  if (!_hullsVisible || !_graph) {
+    if (_hullCanvas && _hullCtx) {
+      _hullCtx.clearRect(0, 0, _hullCanvas.width, _hullCanvas.height);
+    }
+    return;
+  }
+  const now = performance.now();
+  if (now - _hullThrottle < 500) return;
+  _hullThrottle = now;
+
+  if (!_hullCanvas || !_hullCtx) return;
+
+  _hullCanvas.width = window.innerWidth;
+  _hullCanvas.height = window.innerHeight;
+  const ctx = _hullCtx;
+  ctx.clearRect(0, 0, _hullCanvas.width, _hullCanvas.height);
+
+  const gd = _graph.graphData();
+  const zoom = _graph.zoom();
+  const center = _graph.centerAt();
+
+  // Group nodes by category (skip anchors and tags)
+  const catGroups = {};
+  gd.nodes.forEach(n => {
+    if (n.payload._isAnchor || n.payload._isTag) return;
+    const cat = n.payload.category;
+    if (!catGroups[cat]) catGroups[cat] = [];
+    catGroups[cat].push(n);
+  });
+
+  // Convert graph coords to screen coords
+  function toScreen(gx, gy) {
+    return {
+      x: (gx - center.x) * zoom + window.innerWidth / 2,
+      y: (gy - center.y) * zoom + window.innerHeight / 2,
+    };
+  }
+
+  for (const [cat, nodes] of Object.entries(catGroups)) {
+    if (nodes.length < 3) continue;
+    const color = catColor(cat);
+
+    // Convert to screen points
+    const points = nodes.map(n => toScreen(n.x, n.y));
+
+    // Compute convex hull
+    const hull = convexHull(points);
+    if (hull.length < 3) continue;
+
+    // Draw hull with padding
+    ctx.beginPath();
+    const pad = 20 * zoom;
+    const cx = hull.reduce((s, p) => s + p.x, 0) / hull.length;
+    const cy = hull.reduce((s, p) => s + p.y, 0) / hull.length;
+
+    hull.forEach((p, i) => {
+      const dx = p.x - cx, dy = p.y - cy;
+      const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+      const px = p.x + (dx / dist) * pad;
+      const py = p.y + (dy / dist) * pad;
+      if (i === 0) ctx.moveTo(px, py);
+      else ctx.lineTo(px, py);
+    });
+    ctx.closePath();
+    ctx.fillStyle = hexAlpha(color, gfx.hullOpacity);
+    ctx.strokeStyle = hexAlpha(color, gfx.hullOpacity * 2.5);
+    ctx.lineWidth = 1;
+    ctx.fill();
+    ctx.stroke();
+
+    // Category label at centroid
+    ctx.font = 'bold 11px sans-serif';
+    ctx.fillStyle = hexAlpha(color, 0.5);
+    ctx.textAlign = 'center';
+    ctx.fillText(cat, cx, cy);
+  }
+}
+
+// ═══════════════════════════════════════════
+// CONVEX HULL (Graham scan)
+// ═══════════════════════════════════════════
+
+/**
+ * Compute the convex hull of a set of 2D points using Graham scan.
+ * @param {Array<{x:number, y:number}>} points
+ * @returns {Array<{x:number, y:number}>} Hull vertices in order
+ */
+function convexHull(points) {
+  if (points.length < 3) return points;
+  const pts = [...points].sort((a, b) => a.x - b.x || a.y - b.y);
+  const cross = (O, A, B) => (A.x - O.x) * (B.y - O.y) - (A.y - O.y) * (B.x - O.x);
+  const lower = [];
+  for (const p of pts) { while (lower.length >= 2 && cross(lower[lower.length - 2], lower[lower.length - 1], p) <= 0) lower.pop(); lower.push(p); }
+  const upper = [];
+  for (let i = pts.length - 1; i >= 0; i--) { const p = pts[i]; while (upper.length >= 2 && cross(upper[upper.length - 2], upper[upper.length - 1], p) <= 0) upper.pop(); upper.push(p); }
+  upper.pop(); lower.pop();
+  return lower.concat(upper);
+}
+
+// ═══════════════════════════════════════════
+// TOGGLE
+// ═══════════════════════════════════════════
+
+/**
+ * Toggle hull visibility on/off.
+ * Updates the toggle button active state and clears the canvas when hiding.
+ */
+export function toggleHulls() {
+  _hullsVisible = !_hullsVisible;
+  const btn = $('hull-toggle-btn');
+  if (btn) btn.classList.toggle('active', _hullsVisible);
+  if (!_hullsVisible && _hullCanvas && _hullCtx) {
+    _hullCtx.clearRect(0, 0, _hullCanvas.width, _hullCanvas.height);
+  }
+}
+
+/**
+ * Get whether hulls are currently visible.
+ * @returns {boolean}
+ */
+export function isHullsVisible() {
+  return _hullsVisible;
+}
+
+// ═══════════════════════════════════════════
+// RESIZE
+// ═══════════════════════════════════════════
+
+function _onResize() {
+  if (!_hullCanvas) return;
+  _hullCanvas.width = window.innerWidth;
+  _hullCanvas.height = window.innerHeight;
+}
+
+/**
+ * Update the graph instance reference (e.g. after graph rebuild).
+ * @param {object} graphInstance
+ */
+export function setGraph(graphInstance) {
+  _graph = graphInstance;
+}
+
+/**
+ * Get the hull canvas element (for external resize coordination).
+ * @returns {HTMLCanvasElement|null}
+ */
+export function getHullCanvas() {
+  return _hullCanvas;
+}

package/neural-interface/public/variant/2d/lasso.js

@@ -0,0 +1,135 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — 2D Lasso Selection
+// Shift+drag rectangle selection on the canvas
+// Adds matched cards to state.multiSelected
+// Canvas: #lasso-canvas
+// ═══════════════════════════════════════════
+
+import { state, emit } from '../../shared/state.js';
+import { updateMultiSelectBar } from '../../shared/ui-multiselect.js';
+import { screenToWorld, getAllCards } from './graph.js';
+import { CARD_W, CARD_H } from './layout.js';
+
+const $ = (id) => document.getElementById(id);
+
+// ── Private state ──
+let _lassoActive = false;
+let _lassoStart = null;
+let _lassoEnd = null;
+let _lassoCanvas = null;
+let _lassoCtx = null;
+
+// ═══════════════════════════════════════════
+// INIT
+// ═══════════════════════════════════════════
+
+/**
+ * Initialize lasso selection system.
+ * @param {object} _graphInstance  Unused — kept for API compatibility
+ */
+export function initLasso(_graphInstance) {
+  _lassoCanvas = $('lasso-canvas');
+  if (!_lassoCanvas) return;
+  _lassoCtx = _lassoCanvas.getContext('2d');
+
+  _lassoCanvas.width = window.innerWidth;
+  _lassoCanvas.height = window.innerHeight;
+
+  document.addEventListener('pointerdown', _onPointerDown);
+  document.addEventListener('pointermove', _onPointerMove);
+  document.addEventListener('pointerup', _onPointerUp);
+  window.addEventListener('resize', _onResize);
+}
+
+// ═══════════════════════════════════════════
+// EVENT HANDLERS
+// ═══════════════════════════════════════════
+
+function _onPointerDown(e) {
+  if (!e.shiftKey || e.button !== 0) return;
+  if (e.target.closest('#title-bar, #category-sidebar, .detail-card, #minimap, .glass')) return;
+  _lassoActive = true;
+  _lassoStart = { x: e.clientX, y: e.clientY };
+  _lassoEnd = { x: e.clientX, y: e.clientY };
+  e.preventDefault();
+}
+
+function _onPointerMove(e) {
+  if (!_lassoActive) return;
+  _lassoEnd = { x: e.clientX, y: e.clientY };
+
+  // Draw selection rect
+  _lassoCtx.clearRect(0, 0, _lassoCanvas.width, _lassoCanvas.height);
+  const x = Math.min(_lassoStart.x, _lassoEnd.x);
+  const y = Math.min(_lassoStart.y, _lassoEnd.y);
+  const w = Math.abs(_lassoEnd.x - _lassoStart.x);
+  const h = Math.abs(_lassoEnd.y - _lassoStart.y);
+  _lassoCtx.strokeStyle = 'rgba(100, 180, 255, 0.6)';
+  _lassoCtx.fillStyle = 'rgba(100, 180, 255, 0.08)';
+  _lassoCtx.lineWidth = 1;
+  _lassoCtx.fillRect(x, y, w, h);
+  _lassoCtx.strokeRect(x, y, w, h);
+}
+
+function _onPointerUp() {
+  if (!_lassoActive) return;
+  _lassoActive = false;
+  _lassoCtx.clearRect(0, 0, _lassoCanvas.width, _lassoCanvas.height);
+
+  const x1 = Math.min(_lassoStart.x, _lassoEnd.x);
+  const y1 = Math.min(_lassoStart.y, _lassoEnd.y);
+  const x2 = Math.max(_lassoStart.x, _lassoEnd.x);
+  const y2 = Math.max(_lassoStart.y, _lassoEnd.y);
+
+  // Only select if drag was meaningful (> 10px in either direction)
+  if (x2 - x1 < 10 && y2 - y1 < 10) return;
+
+  // Convert screen rectangle corners to world coordinates
+  const topLeft = screenToWorld(x1, y1);
+  const bottomRight = screenToWorld(x2, y2);
+
+  state.multiSelected.clear();
+
+  const cards = getAllCards();
+  for (const card of cards) {
+    if (card.x >= topLeft.x && card.x <= bottomRight.x &&
+        card.y >= topLeft.y && card.y <= bottomRight.y) {
+      state.multiSelected.add(card.node.id);
+    }
+  }
+
+  updateMultiSelectBar();
+  emit('lasso:completed', { count: state.multiSelected.size });
+}
+
+// ═══════════════════════════════════════════
+// CLEAR
+// ═══════════════════════════════════════════
+
+export function clearLasso() {
+  _lassoActive = false;
+  if (_lassoCtx && _lassoCanvas) {
+    _lassoCtx.clearRect(0, 0, _lassoCanvas.width, _lassoCanvas.height);
+  }
+}
+
+// ═══════════════════════════════════════════
+// RESIZE
+// ═══════════════════════════════════════════
+
+function _onResize() {
+  if (!_lassoCanvas) return;
+  _lassoCanvas.width = window.innerWidth;
+  _lassoCanvas.height = window.innerHeight;
+}
+
+/**
+ * Update the graph instance reference (compatibility — no-op).
+ */
+export function setGraph(_graphInstance) {
+  // No-op
+}
+
+export function getLassoCanvas() {
+  return _lassoCanvas;
+}