Typical Use Cases

• Real estate applications (apartment layout sketching)
• Interior design tools
• Facility management dashboards (office/warehouse zoning)
• Any application requiring a lightweight embedded floor plan editor

Installation and Setup

1. Add the Component to Your Application

1. Install the Floor Plan component from Forge 
2. Reference the module containing the Floor Plan block.
3. Drag the main Floor Plan UI block into your target screen.

Toolbar and Drawing Controls

The component toolbar exposes the following controls:

• Draw Mode – Enables drawing interactions on the canvas
• Wall – Draw wall segments
• Room – Draw closed room areas
• Door – Place doors attached to walls
• Window – Place windows attached to walls
• Snap to Grid – Snap drawing coordinates to a fixed grid
• Clear All – Remove all elements from the current plan

Recommended Local Structure

Maintain a local list:

FloorPlanRooms

Each item may include:

• Id
• Name
• AreaSqM
• Description
• Additional custom metadata

Bind:

• The room list widget → FloorPlanRooms
• The Room Information form → Filtered by SelectedRoomId

Suggested Data Model

To integrate with your domain model, map the canvas data to entities.

Entity: FloorPlan

• Id
• Name
• SerializedPlanJson (Text)

Entity: Room

• Id
• Name
• AreaSqM (Decimal)
• FloorPlanId (Foreign Key)

Entity: FloorPlanElement

• Id
• Type (Wall, Room, Door, Window)
• GeometryJson (Text – coordinates and shape data)
• RoomId (Optional relationship)

The canvas can read and write these structures through client actions.

Styling and Customization

The component supports:

• Custom CSS for:
  • Grid appearance
  • Room fill color
  • Selection outlines
  • Wall thickness
• Localizable room labels
• Custom formatting of area display
• Extension of Room Information panel with:
  • Room type
  • Flooring
  • Notes
  • Any domain-specific fields