Skip to content

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 + Zone architecture pattern for manager structure and CRUD logic
  • Expose public API methods (drawFurnitures, getFurniturePointsByViewportCenter) and callbacks (onRemoveFurniture, onUpdateFurniture, onClickFurniture)

Chosen Approach

  • Parameter Design: FurnitureParam uses the same 4-point model as ZoneParam, with an additional furnitureType field for asset matching
  • Architecture: FurnitureManager manages CRUD via diff-based updates; Furniture component combines Sprite + EditControlLayer + TapRotateButton
  • Config: FurnitureConfig added as a top-level AppConfig property with asset definitions, opacity, and outline styling
  • Rotation: New TapRotateButton component (extending BaseControlButton) provides click-to-rotate-90-degree behavior, replacing the standard drag-rotate control
  • Layer: LAYER_FURNITURE inserted between LAYER_PATH and LAYER_CONTROLS in the rendering order

Impacted Files/Modules

New Files

FilePurpose
src/core/managers/FurnitureManager.tsTexture loading, CRUD via drawFurnitures, edit-state subscription
src/core/components/Furniture/Furniture.tsSprite display + EditControlLayer + TapRotateButton
src/core/components/Base/TapRotateButton.tsClick-to-rotate-90-degrees button

Modified Files

FileChanges
src/core/@types/index.d.tsAdded FurnitureParam, FurnitureAsset, FurnitureConfig types; furniture to AppConfig; editingFurnitureIds to RuntimeConfig
src/core/@types/callbacks.tsAdded onRemoveFurniture, onUpdateFurniture, onClickFurniture
src/core/@types/methods.tsAdded drawFurnitures, getFurniturePointsByViewportCenter; furnitures to snapshotByData data param
src/core/constant/methods.tsAdded method/callback names for RJS bundle exposure
src/core/constant/config.tsAdded furniture defaults to DEFAULT_CONFIG and DEFAULT_RUNTIME_CONFIG
src/core/application/AppContainer.tsAdded LAYER_FURNITURE constant and layer ordering
src/core/application/MapApplication.tsRegistered FurnitureManager, exposed public API, wired asset preloading/snapshot/origin
src/core/application/AppService.tsAdded furnitureManager and furnitureConfig accessors
src/core/index.docs.tsExported FurnitureParam type
src/app/debugTools/index.tsAdded "Test Furniture" button for development verification

Verification Checklist

  • [x] FurnitureParam, FurnitureAsset, FurnitureConfig types defined
  • [x] Callbacks (onRemoveFurniture, onUpdateFurniture, onClickFurniture) registered
  • [x] Public API methods (drawFurnitures, getFurniturePointsByViewportCenter) exposed
  • [x] Default config values provided with doubleBed.png asset
  • [x] LAYER_FURNITURE added between LAYER_PATH and LAYER_CONTROLS
  • [x] TapRotateButton component created
  • [x] Furniture component renders sprite from points with editing controls
  • [x] FurnitureManager handles CRUD, edit-state, and layer positioning
  • [x] Integration in MapApplication (managers, assets, snapshot, origin, destroy)
  • [x] Demo app test button functional
  • [x] npm run lint passes
  • [x] npx tsc --noEmit passes

最后更新于: