fix(examples): capture control baseline early on user interaction

kpal81xd · kpal81xd · commit d33f3b4589bf · 2026-05-29T14:59:08.000+01:00
The 2s settle window was meant to let example async-init `data.set` calls
land in the baseline before user diffs start tracking. But if the user
changes a control inside that window (e.g. pasting a Scene.url into
gaussian-splatting/lod-streaming right after the page loads), the
modified value gets folded into the baseline at settle end and so never
appears in the shared URL — even though subsequent changes outside the
window do.

Capture the baseline as soon as the user interacts with #controlPanel
(via document-level capture-phase pointerdown/focusin), whichever comes
first. Async-init writes that fire before the user touches anything
still flow into the baseline as intended; anything after the first
interaction is treated as a real user diff.
diff --git a/examples/src/app/components/Example.mjs b/examples/src/app/components/Example.mjs
@@ -237,6 +237,9 @@ class Example extends TypedComponent {
     /** @type {ReturnType<typeof setTimeout> | null} */
     _settleTimer = null;
 
+    /** @type {((e: Event) => void) | null} */
+    _earlyCaptureHandler = null;
+
     _applying = 0;
 
     /**
@@ -717,7 +720,8 @@ class Example extends TypedComponent {
     /**
      * Apply URL-provided control overrides to the observer and arm the settle window.
      * Baseline is captured once at the end of the window so async-init `data.set` calls
-     * don't pollute it.
+     * don't pollute it — or as soon as the user touches the controls panel, whichever
+     * comes first, so user input during the window isn't folded into the baseline.
      *
      * @param {Observer} observer - Example observer.
      */
@@ -727,10 +731,16 @@ class Example extends TypedComponent {
         flattenLeaves(readState().controls, '', flat);
         this._loadControls = flat;
         this._baseline = {};
-        if (this._settleTimer) {
-            clearTimeout(this._settleTimer);
-        }
+        this._clearSettle();
         this._settleTimer = setTimeout(this._captureBaseline, SETTLE_WINDOW_MS);
+        this._earlyCaptureHandler = (e) => {
+            const target = /** @type {Node | null} */ (e.target);
+            if (target && document.getElementById('controlPanel')?.contains(target)) {
+                this._captureBaseline();
+            }
+        };
+        document.addEventListener('pointerdown', this._earlyCaptureHandler, true);
+        document.addEventListener('focusin', this._earlyCaptureHandler, true);
         this._applying++;
         for (const path of Object.keys(this._loadControls)) {
             if (observer.has(path)) {
@@ -740,8 +750,20 @@ class Example extends TypedComponent {
         this._applying--;
     }
 
+    _clearSettle() {
+        if (this._settleTimer !== null) {
+            clearTimeout(this._settleTimer);
+            this._settleTimer = null;
+        }
+        if (this._earlyCaptureHandler) {
+            document.removeEventListener('pointerdown', this._earlyCaptureHandler, true);
+            document.removeEventListener('focusin', this._earlyCaptureHandler, true);
+            this._earlyCaptureHandler = null;
+        }
+    }
+
     _captureBaseline() {
-        this._settleTimer = null;
+        this._clearSettle();
         const { observer } = this.state;
         if (!observer) {
             return;
@@ -759,10 +781,7 @@ class Example extends TypedComponent {
         if (!observer) {
             this._baseline = {};
             this._loadControls = {};
-            if (this._settleTimer) {
-                clearTimeout(this._settleTimer);
-                this._settleTimer = null;
-            }
+            this._clearSettle();
         }
         if (observer) {
             this._observerHandle = observer.on('*:set', this._handleControlSet);
