1. База знаний
2. renderer

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

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

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

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

Колбэк 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.

Плоский вид секции

Плоский вид разворачивает одну секцию на её сетку мест — так же, как её показывает редактор схем. Остальная часть площадки затемняется подложкой, а подписи рядов и мест рисуются поверх развёрнутой сетки.

const flattened = await renderer.setFlatSectionView(sectionId);

await renderer.setFlatSectionView(null);

setFlatSectionView возвращает:

• true, когда вид развёрнут для этой секции или когда для выхода передан null.
• false, когда секцию развернуть нельзя — входная зона, столы, неизвестный id или секция без сетки.

Запрос уже развёрнутой секции возвращает true и ничего не делает, поэтому вызов никогда не выключает вид. Выход всегда возвращает true, независимо от того, было ли что-то развёрнуто.

Чтобы получать уведомления о каждом входе и выходе, включая те, которые рендерер инициирует сам при уничтожении или перезагрузке схемы, передайте onFlatSectionViewChange:

const renderer = new SeatmapAdminRenderer(document.getElementById('renderer-container'), {
  publicKey: 'your-public-key',
  onFlatSectionViewChange: (sectionId) => {
    console.log(sectionId === null ? 'вид площадки' : `развёрнута: ${sectionId}`);
  },
});

Колбэк нужно передать в момент создания рендерера. Присваивание после этого не действует, потому что рендерер хранит копию того объекта настроек, с которым был создан.

Выделение блока мест

selectSeatBlock выделяет прямоугольный блок мест между опорным и конечным местом по координатам сетки. Метод работает по собственной сетке рядов и мест секции, а не по экранной геометрии, поэтому блок следует за раскладкой мест даже в изогнутой или повёрнутой секции.

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

await renderer.selectSeatBlock(anchorSeatId, focusSeatId);

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

Третий аргумент — алгебра выделения, по умолчанию RendererSelectMode.REPLACE. ADD и SUBTRACT комбинируют блок с текущим выделением.

Промис возвращает false, если одно из мест неизвестно, места принадлежат разным секциям или для секции недоступны координаты сетки; в остальных случаях — true.

Горячие клавиши

Admin Renderer обрабатывает клавиатурный ввод, пока указатель находится над холстом. Нажатия в input, textarea, select и любом редактируемом элементе игнорируются.

Mod — это Cmd в macOS и Ctrl в остальных системах. Комбинация с удержанием активна только пока клавиша зажата: Space временно включает панорамирование и возвращает предыдущий режим при отпускании, а F разворачивает секцию под указателем на время удержания.

Свои комбинации

Передайте карту hotkeys, чтобы переназначить или отключить отдельные действия. Ключи — идентификаторы действий из таблицы выше; значение заменяет комбинацию по умолчанию, а null отключает действие.

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

Значение hotkeys: false полностью отключает обработку клавиатуры — это удобно, когда клавиатурой управляет окружающий админ-интерфейс.

Комбинация записывается как необязательный префикс Mod+ и одна клавиша: буква, цифра, =, - или код клавиши вроде Space или Escape. Типы HotkeysSetting и AdminHotkeyAction экспортируются из пакета.