Appearance
Furniture Feature Implementation Plan
Background
Robot vacuum map applications commonly support furniture placement to help users visualize and manage their home layout. This feature allows placing furniture images on the map with full editing capabilities (move, scale, rotate).
Goal and Scope
Implement a furniture placement and editing feature for the robot vacuum map SDK:
- Render furniture as image sprites on the map using a points-based coordinate system (4 corner vertices)
- Support click-to-rotate (90-degree increments), drag-to-move, and handle-to-scale interactions
- Follow the
ControlsManager+Zonearchitecture pattern for manager structure and CRUD logic - Expose public API methods (
drawFurnitures,getFurniturePointsByViewportCenter) and callbacks (onRemoveFurniture,onUpdateFurniture,onClickFurniture)
Chosen Approach
- Parameter Design:
FurnitureParamuses the same 4-point model asZoneParam, with an additionalfurnitureTypefield for asset matching - Architecture:
FurnitureManagermanages CRUD via diff-based updates;Furniturecomponent combinesSprite+EditControlLayer+TapRotateButton - Config:
FurnitureConfigadded as a top-levelAppConfigproperty with asset definitions, opacity, and outline styling - Rotation: New
TapRotateButtoncomponent (extendingBaseControlButton) provides click-to-rotate-90-degree behavior, replacing the standard drag-rotate control - Layer:
LAYER_FURNITUREinserted betweenLAYER_PATHandLAYER_CONTROLSin the rendering order
Impacted Files/Modules
New Files
| File | Purpose |
|---|---|
src/core/managers/FurnitureManager.ts | Texture loading, CRUD via drawFurnitures, edit-state subscription |
src/core/components/Furniture/Furniture.ts | Sprite display + EditControlLayer + TapRotateButton |
src/core/components/Base/TapRotateButton.ts | Click-to-rotate-90-degrees button |
Modified Files
| File | Changes |
|---|---|
src/core/@types/index.d.ts | Added FurnitureParam, FurnitureAsset, FurnitureConfig types; furniture to AppConfig; editingFurnitureIds to RuntimeConfig |
src/core/@types/callbacks.ts | Added onRemoveFurniture, onUpdateFurniture, onClickFurniture |
src/core/@types/methods.ts | Added drawFurnitures, getFurniturePointsByViewportCenter; furnitures to snapshotByData data param |
src/core/constant/methods.ts | Added method/callback names for RJS bundle exposure |
src/core/constant/config.ts | Added furniture defaults to DEFAULT_CONFIG and DEFAULT_RUNTIME_CONFIG |
src/core/application/AppContainer.ts | Added LAYER_FURNITURE constant and layer ordering |
src/core/application/MapApplication.ts | Registered FurnitureManager, exposed public API, wired asset preloading/snapshot/origin |
src/core/application/AppService.ts | Added furnitureManager and furnitureConfig accessors |
src/core/index.docs.ts | Exported FurnitureParam type |
src/app/debugTools/index.ts | Added "Test Furniture" button for development verification |
Verification Checklist
- [x]
FurnitureParam,FurnitureAsset,FurnitureConfigtypes defined - [x] Callbacks (
onRemoveFurniture,onUpdateFurniture,onClickFurniture) registered - [x] Public API methods (
drawFurnitures,getFurniturePointsByViewportCenter) exposed - [x] Default config values provided with
doubleBed.pngasset - [x]
LAYER_FURNITUREadded betweenLAYER_PATHandLAYER_CONTROLS - [x]
TapRotateButtoncomponent created - [x]
Furniturecomponent renders sprite from points with editing controls - [x]
FurnitureManagerhandles CRUD, edit-state, and layer positioning - [x] Integration in
MapApplication(managers, assets, snapshot, origin, destroy) - [x] Demo app test button functional
- [x]
npm run lintpasses - [x]
npx tsc --noEmitpasses