Admin Renderer

El Admin Renderer es una variante del renderizador de Seatmap diseñada para crear herramientas internas e interfaces de gestión de recintos. Úsalo cuando necesites que el personal seleccione, inspeccione o gestione secciones en lugar de reservar asientos.

Visión general

Importa e instancia el Admin Renderer:

import { SeatmapAdminRenderer } from '@seatmap.pro/renderer';

const renderer = new SeatmapAdminRenderer(document.getElementById('renderer-container'), {
  publicKey: 'your-public-key',
});
renderer.loadEvent('your-event-id');

Activar el modo selectSections

El Admin Renderer admite cuatro modos de interacción: 'pan', 'select', 'selectRows' y 'selectSections'. Para activar el modo de selección de secciones:

renderer.setMode('selectSections');

Los otros tres modos ('pan', 'select', 'selectRows') no se ven afectados por este cambio y se pueden establecer del mismo modo.

Interacción en el modo selectSections

Clic — alterna el estado de selección de la sección en la que se hace clic (seleccionada / deseleccionada).
Arrastrar — dibuja un rectángulo sobre el lienzo y selecciona todas las secciones que lo intersectan.

Admin renderer con varias secciones seleccionadas

Rectángulo de selección dibujándose sobre las secciones

Teclas modificadoras para la selección por arrastre

Al dibujar un rectángulo de selección por arrastre, las siguientes teclas modificadoras cambian cómo se aplica la selección:

Modifier	Comportamiento
None	REPLACE — sustituye la selección actual por las secciones dentro del rectángulo.
Shift o Cmd / Meta	ADD — añade las secciones intersectadas a la selección actual.
Alt / Option	SUBTRACT — elimina las secciones intersectadas de la selección actual.

Callback onSectionsSelectionChange

Usa el callback onSectionsSelectionChange para recibir la selección final tras cada interacción del usuario:

const renderer = new SeatmapAdminRenderer(document.getElementById('renderer-container'), {
  publicKey: 'your-public-key',
  onSectionsSelectionChange: (sections) => {
    sections.forEach((section) => {
      console.log(section.id, section.name, section.seatCount);
    });
  },
});
renderer.loadEvent('your-event-id');

Cada elemento del array sections es un objeto ISection. Los campos principales para este caso de uso son:

id — identificador único de la sección.
name — nombre visible de la sección.
seatCount — número de asientos de la sección.

ISection contiene campos adicionales; los tres anteriores cubren los casos de uso de administración más habituales.

onSectionsSelectionChange se dispara una vez tras finalizar toda la selección: una vez por clic y una vez por arrastre completado. En cambio, onSectionClick se dispara una vez por cada sección afectada: una vez al alternar con un clic simple y una vez por cada sección intersectada durante un arrastre. Quienes dependan de onSectionClick en el modo selectSections deben tener en cuenta que se dispara varias veces por operación de arrastre.

seatCount en ISection

seatCount está disponible en ISection tanto en el callback onSectionsSelectionChange como en onSectionClick.