@seatlayer/core 0.15.1 → 0.16.0

package/dist/index.d.cts

@@ -522,6 +522,9 @@ interface ISeatmapRenderer {
     /** Price-band filter (F4): dim free seats whose category is NOT in `keys`
      *  (null clears). The widget resolves which categories fall in the band. */
     setCategoryFilter?(keys: string[] | null): void;
+    /** Smoothly frame the currently available seats in these categories. `null`
+     *  returns to the full chart. Used after an explicit buyer price-filter action. */
+    focusCategories?(keys: string[] | null): void;
     /** Dim the seats of these section/zone ids (organizer manager: held-back inventory). */
     setDimmedSections?(ids: string[] | null): void;
     /**
@@ -587,7 +590,7 @@ interface ISeatmapRenderer {
     sectionMembers?(id: string): string[];
     /**
      * Smoothly glide (pan+zoom) the camera to frame a section (by id) or a world-
-     * space bounds rect over ~450ms easeInOutCubic. `prefers-reduced-motion` snaps.
+     * space bounds rect over a calm easeInOutCubic glide. `prefers-reduced-motion` snaps.
      * A pointer-down (grab/pan) cancels an in-flight glide. Slice 5 "glide in".
      */
     focusRegion?(target: string | {
@@ -597,6 +600,8 @@ interface ISeatmapRenderer {
         height: number;
     }, opts?: {
         animate?: boolean;
+        minScale?: number;
+        durationMs?: number;
     }): void;
     /** Current LOD rung derived from zoom (for the ZONES/SECTIONS/SEATS pill). */
     getRung?(): LodRung;
@@ -970,6 +975,9 @@ declare class SeatmapRenderer implements ISeatmapRenderer {
      * widget resolves which categories fall inside the buyer's chosen band.
      */
     setCategoryFilter(keys: string[] | null): void;
+    /** Frame the currently available inventory that survived a buyer price
+     *  filter. Clearing the filter glides back to the full venue. */
+    focusCategories(keys: string[] | null): void;
     /**
      * Switch the projection between flat top-down and the isometric "3D" view
      * (rotate + y-squash about the chart centre, plus per-elevation lift). Tweens
@@ -1214,7 +1222,7 @@ declare class SeatmapRenderer implements ISeatmapRenderer {
     private zoomToBounds;
     /**
      * 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.
@@ -1227,6 +1235,7 @@ declare class SeatmapRenderer implements ISeatmapRenderer {
     }, opts?: {
         animate?: boolean;
         minScale?: number;
+        durationMs?: number;
     }): void;
     /** Cancel an in-flight camera glide (a grab or a newer glide interrupts it). */
     private cancelGlide;
@@ -1614,6 +1623,10 @@ declare class PickerController {
     /** Price-band filter (F4): dim free seats whose category is outside `keys`
      *  (null clears). The widget resolves which categories fall in the band. */
     setCategoryFilter(keys: string[] | null): void;
+    /** 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: string[] | null): void;
     /** World-space rect currently visible + full chart bounds (F3 minimap frame). */
     getViewport(): {
         visible: {

package/dist/index.d.ts

@@ -522,6 +522,9 @@ interface ISeatmapRenderer {
     /** Price-band filter (F4): dim free seats whose category is NOT in `keys`
      *  (null clears). The widget resolves which categories fall in the band. */
     setCategoryFilter?(keys: string[] | null): void;
+    /** Smoothly frame the currently available seats in these categories. `null`
+     *  returns to the full chart. Used after an explicit buyer price-filter action. */
+    focusCategories?(keys: string[] | null): void;
     /** Dim the seats of these section/zone ids (organizer manager: held-back inventory). */
     setDimmedSections?(ids: string[] | null): void;
     /**
@@ -587,7 +590,7 @@ interface ISeatmapRenderer {
     sectionMembers?(id: string): string[];
     /**
      * Smoothly glide (pan+zoom) the camera to frame a section (by id) or a world-
-     * space bounds rect over ~450ms easeInOutCubic. `prefers-reduced-motion` snaps.
+     * space bounds rect over a calm easeInOutCubic glide. `prefers-reduced-motion` snaps.
      * A pointer-down (grab/pan) cancels an in-flight glide. Slice 5 "glide in".
      */
     focusRegion?(target: string | {
@@ -597,6 +600,8 @@ interface ISeatmapRenderer {
         height: number;
     }, opts?: {
         animate?: boolean;
+        minScale?: number;
+        durationMs?: number;
     }): void;
     /** Current LOD rung derived from zoom (for the ZONES/SECTIONS/SEATS pill). */
     getRung?(): LodRung;
@@ -970,6 +975,9 @@ declare class SeatmapRenderer implements ISeatmapRenderer {
      * widget resolves which categories fall inside the buyer's chosen band.
      */
     setCategoryFilter(keys: string[] | null): void;
+    /** Frame the currently available inventory that survived a buyer price
+     *  filter. Clearing the filter glides back to the full venue. */
+    focusCategories(keys: string[] | null): void;
     /**
      * Switch the projection between flat top-down and the isometric "3D" view
      * (rotate + y-squash about the chart centre, plus per-elevation lift). Tweens
@@ -1214,7 +1222,7 @@ declare class SeatmapRenderer implements ISeatmapRenderer {
     private zoomToBounds;
     /**
      * 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.
@@ -1227,6 +1235,7 @@ declare class SeatmapRenderer implements ISeatmapRenderer {
     }, opts?: {
         animate?: boolean;
         minScale?: number;
+        durationMs?: number;
     }): void;
     /** Cancel an in-flight camera glide (a grab or a newer glide interrupts it). */
     private cancelGlide;
@@ -1614,6 +1623,10 @@ declare class PickerController {
     /** Price-band filter (F4): dim free seats whose category is outside `keys`
      *  (null clears). The widget resolves which categories fall in the band. */
     setCategoryFilter(keys: string[] | null): void;
+    /** 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: string[] | null): void;
     /** World-space rect currently visible + full chart bounds (F3 minimap frame). */
     getViewport(): {
         visible: {

package/dist/index.js

@@ -644,6 +644,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;
@@ -1598,6 +1599,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
@@ -3124,7 +3159,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.
@@ -3156,13 +3191,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 });
@@ -3287,15 +3322,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 Group({ x: seat.x, y: seat.y, listening: false });
+        if (status === "held") {
+          cue.add(new 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 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 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 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
       });
@@ -3952,6 +4021,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;