@seatlayer/core 0.15.0 → 0.16.0

package/dist/index.cjs

@@ -963,6 +963,7 @@ var ISO_ANGLE_DEG = -11.5;
 var ISO_SQUASH = 0.58;
 var LIFT_PER_STEP = 58;
 var ISO_TWEEN_MS = 320;
+var CAMERA_GLIDE_MS = 650;
 var BLOCK_FILL_ALPHA = 0.85;
 var SOLD_DARKEN = 0.5;
 var SECTION_LABEL_PX = 20;
@@ -1917,6 +1918,40 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       this.seatLayer.batchDraw();
     }
   }
+  /** Frame the currently available inventory that survived a buyer price
+   *  filter. Clearing the filter glides back to the full venue. */
+  focusCategories(keys) {
+    if (!keys?.length) {
+      this.focusRegion(this.bounds, { durationMs: CAMERA_GLIDE_MS });
+      return;
+    }
+    const wanted = new Set(keys);
+    const matching = this.seats.filter((seat) => {
+      if (!wanted.has(seat.categoryKey) || this.seatInClosedSection(seat.id)) return false;
+      const status = this.statusById.get(seat.id) ?? "free";
+      return status === "free" || this.ownedHold.has(seat.id);
+    });
+    if (!matching.length) return;
+    let minX = Infinity;
+    let maxX = -Infinity;
+    let minY = Infinity;
+    let maxY = -Infinity;
+    for (const seat of matching) {
+      minX = Math.min(minX, seat.x);
+      maxX = Math.max(maxX, seat.x);
+      minY = Math.min(minY, seat.y);
+      maxY = Math.max(maxY, seat.y);
+    }
+    const pad = Math.max(24, this.seatR * 3);
+    minX -= pad;
+    maxX += pad;
+    minY -= pad;
+    maxY += pad;
+    this.focusRegion(
+      { x: minX, y: minY, width: Math.max(40, maxX - minX), height: Math.max(40, maxY - minY) },
+      { durationMs: CAMERA_GLIDE_MS }
+    );
+  }
   // ---- isometric ("3D") view mode -------------------------------------------
   /**
    * Switch the projection between flat top-down and the isometric "3D" view
@@ -2246,8 +2281,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
         break;
     }
     if (boothLabel) {
-      const owned = status === "held" && this.ownedHold.has(id);
-      boothLabel.text(status === "booked" ? "SOLD" : status === "held" ? owned ? "HELD BY YOU" : "HELD" : seat.label);
+      boothLabel.text(status === "booked" ? "SOLD" : status === "held" ? "HELD" : seat.label);
       boothLabel.fontSize(status === "free" ? 10 : Math.min(10, Math.max(6, this.boothDims.get(seat.rowId)?.width ?? 40) / 6));
       boothLabel.fontStyle(status === "free" ? "600" : "800");
       boothLabel.fill(status === "free" ? this.theme.seatLabelColor ?? DEF_SEAT_LABEL : "#ffffff");
@@ -3444,7 +3478,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
   }
   /**
    * Smoothly glide the camera to frame a section (by id) or a world-space bounds
-   * rect — the Slice 5 "glide in". Pan+zoom tween over ~450ms easeInOutCubic; the
+   * rect — the Slice 5 "glide in". Pan+zoom tween over a calm easeInOutCubic; the
    * melt/LOD rides the camera every frame. `prefers-reduced-motion` (or
    * `opts.animate === false`) snaps via zoomToBounds. A grab (pointer-down) or a
    * newer glide cancels an in-flight one.
@@ -3476,13 +3510,13 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       return;
     }
     const start = performance.now();
-    const DUR = 450;
+    const duration = Math.max(180, Math.min(1200, opts?.durationMs ?? CAMERA_GLIDE_MS));
     const step = (now) => {
       if (this.destroyed) {
         this.glideRaf = 0;
         return;
       }
-      const raw = Math.min(1, (now - start) / DUR);
+      const raw = Math.min(1, (now - start) / duration);
       const e = raw < 0.5 ? 4 * raw * raw * raw : 1 - Math.pow(-2 * raw + 2, 3) / 2;
       const sc = fromScale + (toScale - fromScale) * e;
       this.stage.scale({ x: sc, y: sc });
@@ -3607,15 +3641,49 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       if (seat.kind === "booth") continue;
       if (seat.x < x0 || seat.x > x1 || seat.y < y0 || seat.y > y1) continue;
       const status = this.statusById.get(seat.id) ?? "free";
-      const statusCue = status === "booked" ? "\xD7" : status === "held" && !this.ownedHold.has(seat.id) ? "H" : null;
+      const unavailable = status === "booked" || status === "held" && !this.ownedHold.has(seat.id);
+      if (unavailable) {
+        const cue = new import_Group.Group({ x: seat.x, y: seat.y, listening: false });
+        if (status === "held") {
+          cue.add(new import_Rect.Rect({
+            x: -4.2,
+            y: -0.7,
+            width: 8.4,
+            height: 6.5,
+            cornerRadius: 1.3,
+            stroke: "#ffffff",
+            strokeWidth: 1.25,
+            listening: false
+          }));
+          cue.add(new import_Line.Line({
+            points: [-2.4, -0.8, -2.4, -2.7, -1.2, -4, 0, -4.35, 1.2, -4, 2.4, -2.7, 2.4, -0.8],
+            stroke: "#ffffff",
+            strokeWidth: 1.2,
+            lineCap: "round",
+            lineJoin: "round",
+            listening: false
+          }));
+        } else {
+          cue.add(new import_Line.Line({
+            points: [-4.2, 4.2, 4.2, -4.2],
+            stroke: "#ffffff",
+            strokeWidth: 1.8,
+            lineCap: "round",
+            listening: false
+          }));
+        }
+        this.labelGroup.add(cue);
+        if (++count >= MAX_LABELS) break;
+        continue;
+      }
       const t2 = new import_Text.Text({
         x: seat.x,
         y: seat.y,
-        text: statusCue ?? seat.label,
-        fontSize: statusCue ? status === "booked" ? 13 : 8 : 7,
-        fontStyle: statusCue ? "800" : "600",
+        text: seat.label,
+        fontSize: 7,
+        fontStyle: "600",
         fontFamily: this.labelFont(),
-        fill: statusCue ? "#ffffff" : this.theme.seatLabelColor ?? DEF_SEAT_LABEL,
+        fill: this.theme.seatLabelColor ?? DEF_SEAT_LABEL,
         listening: false,
         perfectDrawEnabled: false
       });
@@ -4272,6 +4340,17 @@ var PickerController = class {
   setCategoryFilter(keys) {
     this.renderer?.setCategoryFilter?.(keys);
   }
+  /** An explicit buyer price-filter action should not only dim the rest of the
+   *  chart: clear any older section drill-in and guide the camera to the seats
+   *  that remain relevant. Clearing the filter glides back to the full chart. */
+  focusCategoryFilter(keys) {
+    const renderer = this.renderer;
+    if (!renderer) return;
+    renderer.clearSectionFocus?.();
+    this.opts.onSectionFocus?.(null);
+    if (renderer.focusCategories) renderer.focusCategories(keys);
+    else renderer.zoomToFit();
+  }
   /** World-space rect currently visible + full chart bounds (F3 minimap frame). */
   getViewport() {
     const r = this.renderer;