Skip to content

Simulator runtime controls plan

Background

The simulator page already supports source-data debugging for mapHex, pathHex, and roomProperties, but it does not expose the SDK runtime surface. Developers cannot validate runtime-only behavior such as room selection, visibility toggles, or interaction gates from the docs UI.

Goal and scope

This iteration adds a runtime control console to the simulator page.

In scope:

  • cover every RuntimeConfig field in the docs UI
  • group fields by behavior and dependency
  • keep unsupported fields visible but disabled
  • support bidirectional room selection between controls and map clicks
  • update runtime incrementally through mapApi.updateRuntime()

Out of scope:

  • full editing workflows for zones, carpets, furniture, spots, or waypoints
  • persistence of runtime state across page reloads
  • raw JSON runtime editing as the primary input mode

Chosen approach

Use a dedicated runtime console in the left control column, separate from the existing source-data tabs. Model simulator state in three layers:

  • source data state for mapHex, pathHex, and roomProperties
  • derived map state for rooms and runtime support
  • runtime draft state for live incremental updates

Use a dedicated room-selection sub-panel for the only strong map-driven interaction. All runtime updates go through updateRuntime(partial) rather than the full render pipeline.

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/usePlaygroundRender.ts
  • docs/.vitepress/theme/components/simulator/useMapCanvas.ts
  • docs/.vitepress/theme/components/simulator/types.ts
  • new runtime composables under docs/.vitepress/theme/components/simulator/
  • new runtime UI components under docs/.vitepress/theme/components/simulator/

Verification checklist

  • [x] RuntimeConfig fields are all represented in the simulator UI.
  • [x] Runtime changes update the live map without full re-render.
  • [x] selectRoomIds stays synchronized between checklist and map clicks.
  • [x] Dependency rules disable or normalize invalid child fields.
  • [x] Unsupported runtime fields show disabled state with a reason.
  • [x] npm run lint passes.
  • [x] npx tsc --noEmit passes.
  • [x] npm run docs:build passes.

最后更新于: