@seatlayer/core 0.10.1 → 0.10.2

package/dist/index.cjs

@@ -3168,14 +3168,40 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       this.seatLayer.batchDraw();
     }
   }
-  cacheSeatLayer() {
+  /** Rebuild the seat-layer bitmap synchronously (no paint). Shared by the
+   *  debounced cacheSeatLayer() and the synchronous forceDraw() catch-up. */
+  rebuildSeatCache() {
     const pr = clamp(this.stage.scaleX() * this.dpr, 0.15, 2);
     this.seatLayer.clearCache();
     this.seatLayer.cache({ pixelRatio: pr });
     this.seatLayer.listening(false);
     this.cached = true;
+  }
+  cacheSeatLayer() {
+    this.rebuildSeatCache();
     this.seatLayer.batchDraw();
   }
+  /**
+   * SYNCHRONOUS repaint that bypasses requestAnimationFrame — see the
+   * ISeatmapRenderer.forceDraw() contract. Chrome pauses rAF (and therefore
+   * Konva's batchDraw) on hidden/backgrounded/occluded tabs, so seat-status
+   * deltas applied via setStatus() mutate the scene graph but never reach the
+   * canvas until the tab is foregrounded. This flushes the cache-debounce and
+   * paints every layer setStatus() can touch, immediately.
+   *
+   * Additive: the foreground path never calls this, so foreground behaviour is
+   * byte-identical.
+   */
+  forceDraw() {
+    if (this.recacheTimer) {
+      clearTimeout(this.recacheTimer);
+      this.recacheTimer = null;
+      this.rebuildSeatCache();
+    }
+    this.bgLayer.draw();
+    this.seatLayer.draw();
+    this.overlayLayer.draw();
+  }
   updateLabels() {
     const show = this.effScale() > LABEL_SCALE;
     this.labelGroup.destroyChildren();
@@ -3311,6 +3337,10 @@ var PickerController = class {
     this.reconnectTimer = null;
     this.attempt = 0;
     this.closed = false;
+    /** Bound visibilitychange listener (buyer catch-up on tab regain). Kept on the
+     *  instance so destroy() can detach it; null when not attached (guards double
+     *  mounts / non-DOM environments). */
+    this.onVisibilityChange = null;
     // hold state
     this.hold_ = null;
     this.liveStatuses = /* @__PURE__ */ new Map();
@@ -3436,6 +3466,7 @@ var PickerController = class {
     this.closedSections = new Set(closedIds);
     if (closedIds.length) renderer.setClosedSections?.(closedIds);
     if (seats) this.applySeatsMap(seats);
+    this.attachVisibilityListener();
     this.connect();
     return {
       doc: res.doc,
@@ -3862,6 +3893,7 @@ var PickerController = class {
   }
   destroy() {
     this.closed = true;
+    this.detachVisibilityListener();
     if (this.reconnectTimer) {
       clearTimeout(this.reconnectTimer);
       this.reconnectTimer = null;
@@ -4058,6 +4090,37 @@ var PickerController = class {
     }
   }
   // ---- realtime socket ------------------------------------------------------
+  /**
+   * Buyer catch-up on tab regain. While a tab is hidden Chrome pauses rAF, so
+   * seat-status deltas that arrived over the WS mutated the scene graph but the
+   * canvas colors never repainted. When the tab becomes visible again we (1)
+   * resnapshot to pull authoritative state for anything the socket may have
+   * missed while backgrounded, then (2) forceDraw() a synchronous repaint so the
+   * seat colors are correct immediately rather than on the next incidental draw.
+   *
+   * Attached once per mount; guarded against double-attach and non-DOM
+   * environments; detached in destroy() (no leaks).
+   */
+  attachVisibilityListener() {
+    if (this.onVisibilityChange) return;
+    if (typeof document === "undefined" || typeof document.addEventListener !== "function") return;
+    const handler = () => {
+      if (this.closed) return;
+      if (document.visibilityState !== "visible") return;
+      void this.resnapshot().then(() => {
+        if (!this.closed) this.renderer?.forceDraw();
+      });
+    };
+    this.onVisibilityChange = handler;
+    document.addEventListener("visibilitychange", handler);
+  }
+  detachVisibilityListener() {
+    if (!this.onVisibilityChange) return;
+    if (typeof document !== "undefined" && typeof document.removeEventListener === "function") {
+      document.removeEventListener("visibilitychange", this.onVisibilityChange);
+    }
+    this.onVisibilityChange = null;
+  }
   connect() {
     if (this.closed) return;
     let ws;
@@ -4103,6 +4166,9 @@ var PickerController = class {
           }
           r.setStatus([id], next);
         }
+        if (this.opts.keepLiveWhileHidden && typeof document !== "undefined" && document.visibilityState === "hidden") {
+          r.forceDraw();
+        }
         this.clearBookedHoldIfSettled();
         this.opts.onStatusChange?.();
       }