From cade96f1bde0927d5a332689a2581826ed20bc1d Mon Sep 17 00:00:00 2001
From: rakadu1 <rakadu1@bajajauto.co.in>
Date: Fri, 14 Nov 2025 10:22:44 +0530
Subject: [PATCH] Update frame moved to videoframecallback. Now the Sync engine
 is 100% solid logic.

---
 steps/src/debug.js          |  4 +--
 steps/src/p5/radarSketch.js | 71 ++++++++++++++++++++-----------------
 steps/src/sync.js           |  5 ++-
 3 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/steps/src/debug.js b/steps/src/debug.js
index 4d9aa3c..b7cf431 100644
--- a/steps/src/debug.js
+++ b/steps/src/debug.js
@@ -5,10 +5,10 @@
 
 export const debugFlags = {
   // Logs from videoFrameCallback and animationLoop in sync.js
-  sync: false,
+  sync: true,
 
   // Logs from the main p5.js draw() functions (e.g., radarSketch.js)
-  drawing: false,
+  drawing: true,
 
   // Logs related to file loading, parsing, and caching
   fileLoading: false,
diff --git a/steps/src/p5/radarSketch.js b/steps/src/p5/radarSketch.js
index 891ac8a..050346d 100644
--- a/steps/src/p5/radarSketch.js
+++ b/steps/src/p5/radarSketch.js
@@ -75,40 +75,45 @@ export const radarSketch = function (p) {
       canvasContainer.offsetHeight
     );
     canvas.parent("canvas-container");
-    // --- START: ADD MOUSE WHEEL LISTENER HERE ---
-    canvas.mouseWheel((event) => {
-      // Only run this logic if the close-up mode is active
-      if (appState.isCloseUpMode) {
-        event.preventDefault(); // Prevent the page from scrolling
-
-        const zoomSpeed = 0.5;
-        const direction = Math.sign(event.deltaY);
-        let newZoomFactor = appState.zoomFactor - direction * zoomSpeed;
-
-        // Clamp the zoom factor to a reasonable range
-        newZoomFactor = p.constrain(newZoomFactor, 1.5, 30);
-        appState.zoomFactor = newZoomFactor;
-
-        // IMPORTANT: We must manually trigger a redraw of the zoom sketch
-        // so it immediately updates with the new zoom factor.
-        if (
-          appState.zoomSketchInstance &&
-          appState.zoomSketchInstance.updateAndDraw
-        ) {
-          // We just need to trigger an update; the zoom sketch will read the new
-          // appState.zoomFactor when it redraws.
-          // We find the current hovered items again to pass them.
-          const hoveredItems = handleCloseUpDisplay(p, plotScales);
-          appState.zoomSketchInstance.updateAndDraw(
-            p.mouseX,
-            p.mouseY,
-            hoveredItems,
-            plotScales
-          );
+
+    // --- START: Manual Mouse Wheel Listener for Passive Option ---
+    // We attach the listener manually to the canvas element to set the `passive` flag to `false`.
+    // This is necessary to allow `event.preventDefault()` and signals to the browser that
+    // we are intentionally handling the scroll behavior, resolving the console warning.
+    canvas.elt.addEventListener(
+      "wheel",
+      (event) => {
+        // Only run this logic if the close-up mode is active
+        if (appState.isCloseUpMode) {
+          event.preventDefault(); // Prevent the page from scrolling
+
+          const zoomSpeed = 0.5;
+          const direction = Math.sign(event.deltaY);
+          let newZoomFactor = appState.zoomFactor - direction * zoomSpeed;
+
+          // Clamp the zoom factor to a reasonable range
+          newZoomFactor = p.constrain(newZoomFactor, 1.5, 30);
+          appState.zoomFactor = newZoomFactor;
+
+          // IMPORTANT: We must manually trigger a redraw of the zoom sketch
+          // so it immediately updates with the new zoom factor.
+          if (
+            appState.zoomSketchInstance &&
+            appState.zoomSketchInstance.updateAndDraw
+          ) {
+            const hoveredItems = handleCloseUpDisplay(p, plotScales);
+            appState.zoomSketchInstance.updateAndDraw(
+              p.mouseX,
+              p.mouseY,
+              hoveredItems,
+              plotScales
+            );
+          }
         }
-      }
-    });
-    // --- END: ADD MOUSE WHEEL LISTENER HERE ---
+      },
+      { passive: false }
+    );
+    // --- END: Manual Mouse Wheel Listener ---
 
     // Initialize graphics buffers
     staticBackgroundBuffer = p.createGraphics(p.width, p.height);
diff --git a/steps/src/sync.js b/steps/src/sync.js
index c3567cb..6213567 100644
--- a/steps/src/sync.js
+++ b/steps/src/sync.js
@@ -170,6 +170,7 @@ export function videoFrameCallback(now, metadata) {
   // 3. Update the application state. This is the ONLY state this function changes.
   if (frameIndex !== appState.currentFrame) {
     appState.currentFrame = frameIndex;
+    updateFrame(appState.currentFrame); // <-- MOVE UI UPDATE CALL HERE
   }
 
   // Re-register the callback for the next frame to create a loop
@@ -183,11 +184,9 @@ export function videoFrameCallback(now, metadata) {
 export function animationLoop() {
   if (debugFlags.sync) console.log("anim_DEBUG: animationLoop running.");
 
-  // 1. Update all UI elements based on the current frame.
-  updateFrame(appState.currentFrame);
-
   // Update debug overlay information
   updatePersistentOverlays(videoPlayer.currentTime);
+  // updatePersistentOverlays(); // This is a duplicate call and can be removed
   updateDebugOverlay(videoPlayer.currentTime);
 
   // --- START: Centralized Redraw Logic ---