1. Base de conocimiento
2. renderer

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.

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:

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.

Vista de sección plana

La vista de sección plana aplana una sola sección sobre su cuadrícula de asientos, tal como la muestra el editor de esquemas. El resto del recinto queda atenuado tras un fondo, y las etiquetas de fila y de asiento se dibujan sobre la cuadrícula aplanada.

const flattened = await renderer.setFlatSectionView(sectionId);

await renderer.setFlatSectionView(null);

setFlatSectionView se resuelve con:

• true cuando la vista está plana para esa sección, o cuando se pasó null para salir.
• false cuando la sección no se puede aplanar: admisión general, mesas, un id desconocido o una sección sin cuadrícula.

Solicitar la sección que ya está plana se resuelve con true y no hace nada, por lo que la llamada nunca desactiva la vista. Salir siempre se resuelve con true, hubiera o no algo aplanado.

Para recibir notificación de cada entrada y salida, incluidas las que inicia el propio renderizador al destruirse o al recargar un esquema, pasa onFlatSectionViewChange:

const renderer = new SeatmapAdminRenderer(document.getElementById('renderer-container'), {
  publicKey: 'your-public-key',
  onFlatSectionViewChange: (sectionId) => {
    console.log(sectionId === null ? 'vista del recinto' : `plana: ${sectionId}`);
  },
});

El callback debe indicarse en el momento de la construcción. Asignarlo después no tiene efecto, porque el renderizador conserva una copia del objeto de configuración con el que fue construido.

Seleccionar un bloque de asientos

selectSeatBlock selecciona el bloque rectangular de asientos que abarca las coordenadas de cuadrícula entre un asiento ancla y un asiento de destino. Opera sobre la propia cuadrícula de filas y asientos de la sección, no sobre la geometría en pantalla, de modo que el bloque sigue la disposición de asientos incluso cuando la sección está curvada o rotada.

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

await renderer.selectSeatBlock(anchorSeatId, focusSeatId);

await renderer.selectSeatBlock(anchorSeatId, focusSeatId, RendererSelectMode.ADD);

El tercer argumento es el álgebra de selección y su valor por defecto es RendererSelectMode.REPLACE. ADD y SUBTRACT combinan el bloque con la selección actual.

La promesa se resuelve con false cuando alguno de los asientos es desconocido, cuando los dos asientos pertenecen a secciones distintas o cuando no hay coordenadas de cuadrícula disponibles para esa sección; en caso contrario, con true.

Atajos de teclado

El Admin Renderer procesa la entrada de teclado mientras el puntero está sobre el lienzo. Las pulsaciones escritas en un input, textarea, select o cualquier elemento editable se ignoran.

Mod es Cmd en macOS y Ctrl en el resto de sistemas. Una combinación de tipo mantener solo está activa mientras se mantiene la tecla: Space activa el desplazamiento temporalmente y vuelve al modo anterior al soltarla, y F aplana la sección bajo el puntero mientras se mantiene pulsada.

Combinaciones personalizadas

Pasa un mapa hotkeys para reasignar o desactivar acciones concretas. Las claves son los identificadores de acción de la tabla anterior; un valor sustituye la combinación por defecto y null desactiva esa acción.

const renderer = new SeatmapAdminRenderer(document.getElementById('renderer-container'), {
  publicKey: 'your-public-key',
  hotkeys: {
    selectAll: 'Mod+E',
    flatSection: null,
  },
});

Usa hotkeys: false para desactivar por completo el manejo del teclado, útil cuando la interfaz de administración que rodea al renderizador se encarga del teclado.

Las combinaciones se escriben como un prefijo opcional Mod+ más una sola tecla: una letra, un dígito, =, - o un código de tecla como Space o Escape. Los tipos HotkeysSetting y AdminHotkeyAction se exportan desde el paquete.