@seatlayer/core 0.10.2 → 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;