Update assets/js/ui/flow_view.js

assets/js/ui/flow_view.js

@@ -3,264 +3,91 @@ export class FlowView {
     this.canvas = canvas;
     this.g = canvas.getContext("2d");
     this.ctx = ctx;
+    this.scene = null;
 
-    // camera / viewport (world -> screen)
-    this.view = {
-      x: 0,
-      y: 0,
-      scale: 1
-    };
-
-    // input state
-    this.drag = { active:false, sx:0, sy:0, vx:0, vy:0 };
     this.pulses = [];
     this.lastSeenLedgerId = 0;
 
-    // animation loop
-    this.running = true;
-    this.lastFrame = performance.now();
-    this.heartbeatAcc = 0;
-
-    // interactions
-    this.bindInteractions();
-    this.resetView();
-
-    requestAnimationFrame((t)=>this.loop(t));
+    canvas.addEventListener("click", (e)=> this.onClick(e));
   }
 
-  resetView(){
-    // put router near center of the screen in world coords
-    this.view.scale = 1;
-    this.view.x = this.canvas.width * 0.5;
-    this.view.y = this.canvas.height * 0.5;
-  }
-
-  bindInteractions(){
-    // Mouse drag to pan
-    this.canvas.addEventListener("mousedown", (e)=>{
-      this.drag.active = true;
-      this.drag.sx = e.clientX;
-      this.drag.sy = e.clientY;
-      this.drag.vx = this.view.x;
-      this.drag.vy = this.view.y;
-    });
-
-    window.addEventListener("mouseup", ()=>{
-      this.drag.active = false;
-    });
-
-    window.addEventListener("mousemove", (e)=>{
-      if (!this.drag.active) return;
-      const dx = e.clientX - this.drag.sx;
-      const dy = e.clientY - this.drag.sy;
-      this.view.x = this.drag.vx + dx;
-      this.view.y = this.drag.vy + dy;
-    });
-
-    // Wheel zoom (zoom around cursor)
-    this.canvas.addEventListener("wheel", (e)=>{
-      e.preventDefault();
-      const { offsetX, offsetY } = e;
-
-      const zoom = Math.exp(-e.deltaY * 0.0015);
-      const oldScale = this.view.scale;
-      const newScale = clamp(oldScale * zoom, 0.6, 2.4);
-
-      // keep cursor position stable in world coords
-      const wx = (offsetX - this.view.x) / oldScale;
-      const wy = (offsetY - this.view.y) / oldScale;
-
-      this.view.scale = newScale;
-      this.view.x = offsetX - wx * newScale;
-      this.view.y = offsetY - wy * newScale;
-    }, { passive:false });
-
-    // Touch pan (single finger)
-    this.canvas.addEventListener("touchstart", (e)=>{
-      if (e.touches.length !== 1) return;
-      const t = e.touches[0];
-      this.drag.active = true;
-      this.drag.sx = t.clientX;
-      this.drag.sy = t.clientY;
-      this.drag.vx = this.view.x;
-      this.drag.vy = this.view.y;
-    }, { passive:true });
+  setScenario(scene){ this.scene = scene; }
 
-    this.canvas.addEventListener("touchmove", (e)=>{
-      if (!this.drag.active || e.touches.length !== 1) return;
-      const t = e.touches[0];
-      const dx = t.clientX - this.drag.sx;
-      const dy = t.clientY - this.drag.sy;
-      this.view.x = this.drag.vx + dx;
-      this.view.y = this.drag.vy + dy;
-    }, { passive:true });
-
-    this.canvas.addEventListener("touchend", ()=>{
-      this.drag.active = false;
-    });
-
-    // click info (optional)
-    this.canvas.addEventListener("click", (e)=>{
-      const p = this.screenToWorld(e.offsetX, e.offsetY);
-      const info = `world @ ${p.x.toFixed(0)},${p.y.toFixed(0)} • zoom ${(this.view.scale*100).toFixed(0)}%`;
-      const out = document.getElementById("flowInfo");
-      if (out) out.textContent = info;
-    });
+  onClick(e){
+    const r = this.canvas.getBoundingClientRect();
+    const x = (e.clientX - r.left) * (this.canvas.width / r.width);
+    const y = (e.clientY - r.top) * (this.canvas.height / r.height);
+    // v1: no selection logic yet; we’ll add node hit-test in next iteration
+    document.getElementById("flowInfo").textContent = `click @ ${x.toFixed(0)},${y.toFixed(0)}`;
   }
 
-  loop(t){
-    const dt = Math.min(0.05, (t - this.lastFrame) / 1000);
-    this.lastFrame = t;
+  render(){
+    const { g } = this;
+    const { ledger } = this.ctx;
+    g.clearRect(0,0,this.canvas.width,this.canvas.height);
 
-    this.step(dt);
-    this.draw();
+    // retro grid
+    g.globalAlpha = 0.15;
+    g.strokeStyle = "#4a6a8f";
+    for (let i=0;i<this.canvas.width;i+=30){ g.beginPath(); g.moveTo(i,0); g.lineTo(i,this.canvas.height); g.stroke(); }
+    for (let j=0;j<this.canvas.height;j+=30){ g.beginPath(); g.moveTo(0,j); g.lineTo(this.canvas.width,j); g.stroke(); }
+    g.globalAlpha = 1;
 
-    if (this.running) requestAnimationFrame((nt)=>this.loop(nt));
-  }
-
-  step(dt){
-    const { ledger } = this.ctx;
+    const nodes = defaultNodes(this.canvas.width, this.canvas.height);
+    drawEdges(g, nodes);
+    drawNodes(g, nodes);
 
-    // spawn pulses on new ledger entries (continuous response)
-    const last = ledger.entries[ledger.entries.length - 1];
+    // detect new ledger events -> spawn pulses
+    const last = ledger.entries[ledger.entries.length-1];
     if (last && last.id > this.lastSeenLedgerId) {
-      // if multiple entries arrived since last frame, play them all (tight + correct)
-      for (let i = this.lastSeenLedgerId; i < last.id; i++){
-        const entry = ledger.entries[i]; // id starts at 1, array is 0-index
-        if (!entry) continue;
-        this.spawnPulse(entry.type, entry.payload);
-      }
       this.lastSeenLedgerId = last.id;
+      this.spawnPulse(nodes, last.type);
     }
 
-    // heartbeat: if inbox has stuff, emit a subtle pulse every ~1.2s
-    this.heartbeatAcc += dt;
-    if (this.heartbeatAcc > 1.2) {
-      this.heartbeatAcc = 0;
-      const inboxCount = this.ctx.state.inbox?.length || 0;
-      if (inboxCount > 0) {
-        this.pulses.push({ path:["Inbox","Router"], t:0, ttl:110, r:4 });
-      }
-    }
-
-    // advance pulses
-    this.pulses.forEach(p => p.t += dt * 60);
-    this.pulses = this.pulses.filter(p => p.t < p.ttl);
-  }
-
-  spawnPulse(type, payload){
-    if (type === "email.received") {
-      this.pulses.push({ path:["External","Inbox"], t:0, ttl:90, r:6 });
-      return;
-    }
-    if (type === "email.tagged") {
-      this.pulses.push({ path:["Inbox","Router"], t:0, ttl:90, r:6 });
-      return;
-    }
-    if (type === "email.routed") {
-      const dest = payload?.routeTo || "Support";
-      const safe = ["Support","Sales","Finance","Engineering"].includes(dest) ? dest : "Support";
-      this.pulses.push({ path:["Router", safe], t:0, ttl:90, r:6 });
-      return;
-    }
-    if (type === "external.signal") {
-      this.pulses.push({ path:["External","Router"], t:0, ttl:90, r:6 });
-      return;
-    }
-    if (type === "hunt.started") {
-      this.pulses.push({ path:["Hunt","Router"], t:0, ttl:90, r:6 });
-      return;
-    }
-    if (type === "hunt.match") {
-      this.pulses.push({ path:["Router","Hunt"], t:0, ttl:90, r:6 });
-      return;
-    }
-    if (type === "hunt.done") {
-      this.pulses.push({ path:["Hunt","Router"], t:0, ttl:90, r:6 });
-      return;
-    }
-  }
-
-  draw(){
-    const g = this.g;
-    const w = this.canvas.width, h = this.canvas.height;
-    g.clearRect(0,0,w,h);
-
-    // apply camera transform
-    g.save();
-    g.translate(this.view.x, this.view.y);
-    g.scale(this.view.scale, this.view.scale);
-
-    // world layout (router centered at 0,0)
-    const nodes = defaultNodes();
-
-    drawGrid(g, w, h, this.view);
-    drawEdges(g, nodes);
-    drawNodes(g, nodes);
+    // animate pulses
+    this.pulses.forEach(p=> p.t += 1);
+    this.pulses = this.pulses.filter(p=> p.t < p.ttl);
     drawPulses(g, nodes, this.pulses);
 
-    g.restore();
+    // request next frame if pulses exist
+    if (this.pulses.length > 0) requestAnimationFrame(()=> this.render());
   }
 
-  screenToWorld(sx, sy){
-    return {
-      x: (sx - this.view.x) / this.view.scale,
-      y: (sy - this.view.y) / this.view.scale
+  spawnPulse(nodes, type){
+    // simple routing map (v1). We’ll evolve this with actual route events later.
+    const map = {
+      "email.received": ["External", "Inbox"],
+      "email.tagged": ["Inbox", "Router"],
+      "email.routed": ["Router", "Support"],
+      "hunt.started": ["Hunt", "Router"],
+      "hunt.match": ["Router", "Hunt"],
+      "hunt.done": ["Hunt", "Router"],
+      "external.signal": ["External", "Router"],
     };
+    const path = map[type] || ["Inbox","Router"];
+    this.pulses.push({ path, t:0, ttl:90 });
   }
 }
 
-function defaultNodes(){
+function defaultNodes(w,h){
+  const cx = w/2, cy = h/2;
   return {
-    External: { x: -320, y: -170 },
-    Inbox:    { x: -210, y: 0 },
-    Router:   { x: 0,    y: 0 },
-    Support:  { x: 320,  y: -120 },
-    Sales:    { x: 320,  y: -20 },
-    Finance:  { x: 320,  y: 80 },
-    Engineering:{ x: 320, y: 180 },
-    Hunt:     { x: -320, y: 180 }
+    External: { x: 110, y: 90 },
+    Inbox:    { x: 220, y: 260 },
+    Router:   { x: cx,  y: cy },
+    Support:  { x: w-160, y: 140 },
+    Sales:    { x: w-160, y: 240 },
+    Finance:  { x: w-160, y: 340 },
+    Engineering:{ x: w-160, y: 440 },
+    Hunt:     { x: 110, y: 440 },
   };
 }
 
-function drawGrid(g, w, h, view){
-  // draw grid in world space
-  g.save();
-  g.globalAlpha = 0.18;
-  g.strokeStyle = "#4a6a8f";
-  g.lineWidth = 1 / view.scale;
-
-  const step = 30;
-  const minX = (-view.x) / view.scale - w;
-  const maxX = (-view.x) / view.scale + w;
-  const minY = (-view.y) / view.scale - h;
-  const maxY = (-view.y) / view.scale + h;
-
-  const startX = Math.floor(minX/step)*step;
-  const endX   = Math.ceil(maxX/step)*step;
-  const startY = Math.floor(minY/step)*step;
-  const endY   = Math.ceil(maxY/step)*step;
-
-  for (let x = startX; x <= endX; x += step){
-    g.beginPath();
-    g.moveTo(x, startY);
-    g.lineTo(x, endY);
-    g.stroke();
-  }
-  for (let y = startY; y <= endY; y += step){
-    g.beginPath();
-    g.moveTo(startX, y);
-    g.lineTo(endX, y);
-    g.stroke();
-  }
-  g.restore();
-}
-
 function drawNodes(g, nodes){
   for (const [name,n] of Object.entries(nodes)){
     g.fillStyle = "#0b0f14";
     g.strokeStyle = "#ffd24a";
-    g.lineWidth = 1.4;
+    g.lineWidth = 1;
     g.beginPath();
     g.rect(n.x-55, n.y-18, 110, 36);
     g.fill();
@@ -282,7 +109,7 @@ function drawEdges(g, nodes){
     ["Router","Finance"],
     ["Router","Engineering"],
     ["Router","Hunt"],
-    ["Hunt","Router"]
+    ["Hunt","Router"],
   ];
   g.strokeStyle = "rgba(143,176,214,.35)";
   g.lineWidth = 2;
@@ -299,17 +126,13 @@ function drawPulses(g, nodes, pulses){
   pulses.forEach(p=>{
     const [a,b] = p.path;
     const A = nodes[a], B = nodes[b];
-    if (!A || !B) return;
-
     const t = p.t / p.ttl;
     const x = A.x + (B.x - A.x) * t;
     const y = A.y + (B.y - A.y) * t;
 
     g.fillStyle = "rgba(77,255,136,.85)";
     g.beginPath();
-    g.arc(x,y,p.r || 6,0,Math.PI*2);
+    g.arc(x,y,6,0,Math.PI*2);
     g.fill();
   });
 }
-
-function clamp(v, a, b){ return Math.max(a, Math.min(b, v)); }