@seatlayer/core 0.10.1 → 0.11.0

package/dist/index.cjs

@@ -956,6 +956,7 @@ var SECTION_PROMINENT_SCALE = 0.45 * SEAT_LEGIBLE_SCALE;
 var BLOCK_MELT_TOP = 0.9 * SEAT_LEGIBLE_SCALE;
 var ZONE_PROMINENT_SCALE = 0.55 * SECTION_PROMINENT_SCALE;
 var MAX_LABELS = 700;
+var MARQUEE_RING_CAP = 2500;
 var ISO_ANGLE_DEG = -11.5;
 var ISO_SQUASH = 0.58;
 var LIFT_PER_STEP = 58;
@@ -1182,8 +1183,28 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     this.panLast = null;
     /** Cumulative gesture movement in px — clicks are suppressed after a real pan/pinch. */
     this.moved = 0;
+    /**
+     * Manage-mode rubber-band marquee (option-gated). `start`/`cur` are WORLD-space
+     * points (overlayLayer rides the stage transform); `rect` is the on-canvas
+     * selection band. Null except during an active manage-mode drag.
+     */
+    this.marquee = null;
+    this.marqueeCur = null;
     // ---- keyboard navigation (accessibility) ----------------------------------
     this.onKeyDown = (e) => {
+      if (this.opts.manageMode) {
+        if ((e.metaKey || e.ctrlKey) && (e.key === "a" || e.key === "A")) {
+          e.preventDefault();
+          this.opts.onMarquee?.(this.selectAllSelectable());
+          return;
+        }
+        if (e.key === "Escape" && this.selection.size) {
+          e.preventDefault();
+          this.clearSelection();
+          this.opts.onMarquee?.([]);
+          return;
+        }
+      }
       const dir = e.key === "ArrowLeft" ? { x: -1, y: 0 } : e.key === "ArrowRight" ? { x: 1, y: 0 } : e.key === "ArrowUp" ? { x: 0, y: -1 } : e.key === "ArrowDown" ? { x: 0, y: 1 } : null;
       if (dir) {
         e.preventDefault();
@@ -1206,9 +1227,15 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       this.pointers.set(e.pointerId, this.toLocal(e));
       if (this.pointers.size === 1) {
         this.moved = 0;
-        this.panLast = this.toLocal(e);
         this.pinch = null;
+        if (this.opts.manageMode && this.opts.marqueeSelect && e.pointerType !== "touch" && e.button === 0 && this.getRung() === "seats") {
+          this.beginMarquee(this.toLocal(e));
+          this.panLast = null;
+        } else {
+          this.panLast = this.toLocal(e);
+        }
       } else if (this.pointers.size === 2) {
+        if (this.marquee) this.cancelMarquee();
         const [a, b] = [...this.pointers.values()];
         const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
         const s = this.stage.scaleX();
@@ -1227,6 +1254,10 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       const prev = this.pointers.get(e.pointerId);
       this.moved += Math.hypot(p.x - prev.x, p.y - prev.y);
       this.pointers.set(e.pointerId, p);
+      if (this.marquee) {
+        this.updateMarquee(p);
+        return;
+      }
       if (this.pinch && this.pointers.size >= 2) {
         const [a, b] = [...this.pointers.values()];
         const dist = Math.hypot(b.x - a.x, b.y - a.y);
@@ -1252,6 +1283,12 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       }
     };
     this.onPointerEnd = (e) => {
+      if (this.marquee) {
+        this.finishMarquee();
+        this.pointers.delete(e.pointerId);
+        if (this.pointers.size === 0) this.panLast = null;
+        return;
+      }
       this.pointers.delete(e.pointerId);
       if (this.pointers.size < 2) this.pinch = null;
       if (this.pointers.size === 1) {
@@ -1487,6 +1524,144 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     }
     if (changed) this.overlayLayer.batchDraw();
   }
+  // ---- manage-mode bulk selection (SDK SeatManager) -------------------------
+  // All option-gated: no-ops (or empty) unless `manageMode` is set, so buyer
+  // surfaces that never pass the flag can't reach any of this.
+  /** Select every selectable seat on the chart (⌘A). Returns the added seats. */
+  selectAllSelectable() {
+    if (!this.opts.manageMode) return [];
+    const ids = [];
+    for (const seat of this.seats) if (this.isSelectable(seat.id)) ids.push(seat.id);
+    return this.selectMany(ids);
+  }
+  /** Select the selectable seats matching these public labels (category/row/
+   *  section bulk resolves to labels host-side). Returns the newly added seats. */
+  selectByLabels(labels) {
+    if (!this.opts.manageMode) return [];
+    const want = new Set(labels);
+    const ids = [];
+    for (const seat of this.seats) {
+      if (want.has(seat.label) && this.isSelectable(seat.id)) ids.push(seat.id);
+    }
+    return this.selectMany(ids);
+  }
+  /** Selectable seats in a section OR zone id — pure read (no selection change). */
+  getSelectableInSection(sectionId) {
+    const out = [];
+    const seen = /* @__PURE__ */ new Set();
+    for (const sec of this.sections) {
+      if (sec.id !== sectionId && sec.zone !== sectionId) continue;
+      for (const id of sec.memberIds) {
+        if (seen.has(id)) continue;
+        seen.add(id);
+        if (!this.isSelectable(id)) continue;
+        const s = this.seatById.get(id);
+        if (s) out.push(s);
+      }
+    }
+    return out;
+  }
+  /**
+   * Union `ids` into the selection in one batched pass. Beyond MARQUEE_RING_CAP
+   * total selected we skip the per-seat ring nodes (fill paint still marks the
+   * seats) so a whole-arena select doesn't spawn thousands of Konva shapes.
+   * Returns the full current selection.
+   */
+  selectMany(ids) {
+    const fresh = ids.filter((id) => !this.selection.has(id));
+    if (!fresh.length) return this.getSelection();
+    const drawRings = this.selection.size + fresh.length <= MARQUEE_RING_CAP;
+    for (const id of fresh) {
+      if (drawRings) {
+        this.setSelected(id, true, true);
+      } else {
+        this.selection.add(id);
+        const c = this.circleById.get(id);
+        if (c) this.paintSeat(c, id);
+      }
+    }
+    if (!this.cached) this.seatLayer.batchDraw();
+    this.overlayLayer.batchDraw();
+    return this.getSelection();
+  }
+  // ---- manage-mode marquee gesture ------------------------------------------
+  beginMarquee(clientPt) {
+    const w = this.screenToWorld(clientPt);
+    const s = this.stage.scaleX() || 1;
+    const rect = new import_Rect.Rect({
+      x: w.x,
+      y: w.y,
+      width: 0,
+      height: 0,
+      stroke: this.effSelection,
+      strokeWidth: 1.5 / s,
+      // world units → ~constant on-screen px under the stage scale
+      dash: [5 / s, 4 / s],
+      fill: "rgba(110,123,255,0.10)",
+      listening: false,
+      perfectDrawEnabled: false,
+      shadowForStrokeEnabled: false
+    });
+    this.overlayLayer.add(rect);
+    this.marquee = { start: w, rect };
+    this.marqueeCur = w;
+    this.overlayLayer.batchDraw();
+  }
+  updateMarquee(clientPt) {
+    if (!this.marquee) return;
+    const w = this.screenToWorld(clientPt);
+    const { start, rect } = this.marquee;
+    rect.setAttrs({
+      x: Math.min(start.x, w.x),
+      y: Math.min(start.y, w.y),
+      width: Math.abs(w.x - start.x),
+      height: Math.abs(w.y - start.y)
+    });
+    this.marqueeCur = w;
+    this.overlayLayer.batchDraw();
+  }
+  cancelMarquee() {
+    if (!this.marquee) return;
+    this.marquee.rect.destroy();
+    this.marquee = null;
+    this.marqueeCur = null;
+    this.overlayLayer.batchDraw();
+  }
+  /**
+   * Pointer-up: hit-test the marquee world-rect against the in-memory seat
+   * centres (NOT the Konva hit-graph — that's a cached bitmap when zoomed and
+   * far slower), keep only SELECTABLE seats, union them into the selection and
+   * fire `onMarquee`. A near-zero drag reads as a click: clear the selection.
+   */
+  finishMarquee() {
+    const m = this.marquee;
+    this.marquee = null;
+    if (!m) return;
+    m.rect.destroy();
+    this.overlayLayer.batchDraw();
+    const cur = this.marqueeCur ?? m.start;
+    this.marqueeCur = null;
+    const x0 = Math.min(m.start.x, cur.x);
+    const x1 = Math.max(m.start.x, cur.x);
+    const y0 = Math.min(m.start.y, cur.y);
+    const y1 = Math.max(m.start.y, cur.y);
+    const s = this.stage.scaleX() || 1;
+    if ((x1 - x0) * s < 4 && (y1 - y0) * s < 4) {
+      if (this.selection.size) {
+        this.clearSelection();
+        this.opts.onMarquee?.([]);
+      }
+      return;
+    }
+    const ids = [];
+    for (const seat of this.seats) {
+      if (seat.x < x0 || seat.x > x1 || seat.y < y0 || seat.y > y1) continue;
+      if (!this.isSelectable(seat.id)) continue;
+      ids.push(seat.id);
+    }
+    this.selectMany(ids);
+    this.opts.onMarquee?.(this.getSelection());
+  }
   flashSeat(seatId, color = "#f43f5e") {
     const seat = this.seatById.get(seatId);
     if (!seat) return;
@@ -3168,14 +3343,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 +3512,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 +3641,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 +4068,7 @@ var PickerController = class {
   }
   destroy() {
     this.closed = true;
+    this.detachVisibilityListener();
     if (this.reconnectTimer) {
       clearTimeout(this.reconnectTimer);
       this.reconnectTimer = null;
@@ -4058,6 +4265,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 +4341,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?.();
       }