1. 知识库
2. Renderer SDK

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

其他三种模式不受影响，也可用相同方式设置。

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 会为每个受影响区域触发：单击切换时一次，拖动时每个相交区域各一次。依赖 selectSections 模式下 onSectionClick 的集成需注意，一次拖动可能触发多次回调。

ISection 的 seatCount

onSectionsSelectionChange 和 onSectionClick 回调中的 ISection 都提供 seatCount。

区域平面视图

区域平面视图将单个区域展开为其座位网格，与座位图编辑器的展示方式相同。场地其余部分被背景遮罩调暗，行标签和座位标签绘制在展开后的网格上。

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 ? 'venue view' : `flat: ${sectionId}`);
  },
});

回调必须在构造时提供。之后赋值无效，因为渲染器保留的是构造时设置对象的副本。

选择座位块

selectSeatBlock 选择锚点座位与焦点座位之间网格坐标所覆盖的矩形座位块。它使用区域自身的排和座位网格，不依赖屏幕几何位置，因此即使区域弯曲或旋转，选区仍跟随座位布局。

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

await renderer.selectSeatBlock(anchorSeatId, focusSeatId);

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

第三个参数为选择运算，默认为 RendererSelectMode.REPLACE。ADD 和 SUBTRACT 将座位块与当前选择合并或相减。

任一座位未知、两座位属于不同区域，或该区域没有网格坐标时，Promise 解析为 false；否则为 true。

键盘快捷键

指针位于舞台区域时，Admin Renderer 处理键盘输入。在 input、textarea、select 或其他可编辑元素中输入的按键会被忽略。

Mod 在 macOS 上为 Cmd，其他平台为 Ctrl。按住型绑定仅在按键保持按下时生效：Space 临时平移，松开后恢复原模式；F 在按住期间展开鼠标所在区域。

自定义绑定

传入 hotkeys 映射可修改或禁用单个操作。键为上表操作 ID，值替换默认组合，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 类型。