(Unsaved File)

Drag a node to the Diagram or select the Wall Drawing Tool (Ctrl + 1) to begin

Palettes

### Furniture

### Wall Parts

Open File
Choose file to open...
Delete File
Choose file to remove...
Overview
Selection Info
Nothing selected
Options
Units
cm
m
in
ft
Grid
Show Grid
Units/1px (at scale 100%)
Preferences
Grid Snap
Show Wall Guidelines
Show Wall Lengths
Show Wall Angles
Show Only Small Wall Angles
Floor Plan Statistics
Stats

This Floorplanner samples makes use of multiple classes to allow for users to build, edit, save, and load feature-rich Floorplans. To start, build walls with the Wall Building Tool (Ctrl + 1), or drag furniture from Palettes onto the Floorplan area. The help at the bottom of the Floorplan area is context-specific and should aid in providing tips on how to better use this software.

This sample uses the following files.

- Floorplan.js - A special kind of Diagram with rules and listeners that help with floorplanning
- FloorplanFilesystem.js - A class to handle saving and loading floorplans (through localstorage). Linked to a Floorplan instance
- WallBuildingTool.js - For constructing new walls
- WallReshapingTool.js - For reshaping walls from their endpoints
- FloorplanUI.js - A class to handle GUI interaction as events on the Floorplan take place. Linked to a Floorplan instance

In addition, three files are used to store Flooplanner-specific Graph Object templates.

- Floorplanner-Templates-General.js - Contains templates for Context Menu, Diagram, Default Group, AngleNode, DimensionLink, PointNode, all all their dependencies
- Floorplanner-Templates-Furniture.js - Contains templates for Default Node (Furniture), MultiPurpose Node, and all their dependencies
- Floorplanner-Templates-Walls.js - Contains templates for Wall Group, Palette Wall Node, Window Node, Door Node, and all their dependencies