Admin Renderer

Admin Renderer — это вариант рендерера Seatmap, предназначенный для создания внутренних инструментов и интерфейсов управления площадкой. Используйте его, когда нужно дать сотрудникам возможность выбирать, просматривать или управлять секциями, а не бронировать места.

Обзор

Импортируйте и создайте экземпляр 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');

Активация режима selectSections

Admin Renderer поддерживает четыре режима взаимодействия: 'pan', 'select', 'selectRows' и 'selectSections'. Чтобы активировать режим выбора секций:

renderer.setMode('selectSections');

Остальные три режима ('pan', 'select', 'selectRows') этим изменением не затрагиваются и задаются тем же способом.

Взаимодействие в режиме selectSections

Клик — переключает состояние выбора секции, по которой кликнули (выбрана / снята).
Перетаскивание — рисует прямоугольник по холсту и выбирает все секции, которые он пересекает.

Admin renderer с несколькими выбранными секциями

Прямоугольник выделения, рисуемый поверх секций

Клавиши-модификаторы для выделения рамкой

При рисовании прямоугольника выделения следующие клавиши-модификаторы меняют способ применения выбора:

Modifier	Поведение
None	REPLACE — заменяет текущий выбор секциями внутри прямоугольника.
Shift или Cmd / Meta	ADD — добавляет пересекаемые секции к текущему выбору.
Alt / Option	SUBTRACT — удаляет пересекаемые секции из текущего выбора.

Колбэк onSectionsSelectionChange

Используйте колбэк onSectionsSelectionChange, чтобы получать итоговый выбор после каждого взаимодействия пользователя:

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');

Каждый элемент массива sections — это объект ISection. Основные поля для этого сценария:

id — уникальный идентификатор секции.
name — отображаемое имя секции.
seatCount — количество мест в секции.

ISection содержит дополнительные поля; трёх перечисленных выше достаточно для большинства админ-сценариев.

onSectionsSelectionChange срабатывает один раз после того, как весь выбор финализирован — по одному разу на клик и по одному разу на завершённое перетаскивание. В отличие от него, onSectionClick срабатывает по одному разу для каждой затронутой секции: один раз при переключении одиночным кликом и по разу на каждую пересекаемую секцию при перетаскивании. Тем, кто полагается на onSectionClick в режиме selectSections, следует учитывать, что он срабатывает несколько раз за одно перетаскивание.

seatCount в ISection

seatCount доступно в ISection как в колбэке onSectionsSelectionChange, так и в onSectionClick.