Skip to content

Simulator events console plan

Background

The simulator page already helps developers validate source data input and runtime configuration, but it does not expose SDK callback activity. Developers can interact with the map yet still need custom code to inspect which callbacks fire and what payloads they receive.

Goal and scope

This iteration adds a developer-facing Events console to the simulator.

In scope:

  • record SDK public callbacks only
  • start with onClickRoom and onClickRoomProperties
  • show callback names, times, summaries, and expandable JSON payloads
  • add pause, clear, copy, and filter actions
  • place the console near the map preview
  • introduce reka-ui as a lightweight primitive layer for new overlays and collapsible UI

Out of scope:

  • logging simulator-internal actions
  • toast notifications for each callback
  • a generic SDK logging framework
  • a full migration of simulator controls to reka-ui

Chosen approach

Use a dedicated Events console placed with the map preview. Record events by wrapping the SDK MapCallbacks passed into the map instance. Persist only a bounded in-memory event list, with lightweight helpers for summaries, filtering, and JSON export.

Introduce reka-ui only for the new interaction primitives that need stronger accessibility and structure, such as collapsible payload details and event filter controls.

Impacted files or modules

Expected implementation targets:

  • docs/.vitepress/theme/components/MapPlayground.vue
  • docs/.vitepress/theme/components/simulator/useMapPlayground.ts
  • docs/.vitepress/theme/components/simulator/useMapCanvas.ts
  • docs/.vitepress/theme/components/simulator/usePlaygroundRender.ts
  • docs/.vitepress/theme/components/simulator/types.ts
  • docs/.vitepress/theme/components/simulator/sdkTypes.ts
  • new event composables under docs/.vitepress/theme/components/simulator/
  • new event UI components under docs/.vitepress/theme/components/simulator/
  • package.json and lockfile for the new UI primitive dependency

Verification checklist

  • [ ] Clicking a room appends an onClickRoom record.
  • [ ] Clicking a room property appends an onClickRoomProperties record.
  • [ ] Event rows show exact callback names and readable summaries.
  • [ ] Pause stops new records without clearing the list.
  • [ ] Clear resets only the event log.
  • [ ] Copy exports valid JSON.
  • [ ] The event list is bounded to the latest 100 entries.
  • [ ] npm run lint passes.
  • [ ] npx tsc --noEmit passes.
  • [ ] npm run docs:build passes.

最后更新于: