(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
Preferences
Grid Snap
Show Wall Guidelines
Show Wall Lengths
Show Wall Angles
Show Only Small Wall Angles
Floor Plan Statistics
Stats

This sample allows for users to create detailed floor plans. Furniture can be directly dragged from the Furniture Palette onto the main grid. Doors and windows may be dragged directly onto walls from the Wall Parts Palette. Pertinent selection information can be viewed and edited from the Selection Info Window (Ctrl + I or right click -> 'Show Selection Info' or double click a node).

Users may drag walls from the Wall Parts Palette, or they may create walls with the Wall Building Tool (Ctrl + 1 or simply click on the tool icon to the right of the 'View' menu). The Wall Building Tool allows users to click anywhere on the diagram, use that point as a startpoint for the wall, then hold the mouse button and drag to the desired wall endpoint. The dragging functionality is supplied by the Wall Reshaping Tool. The Wall Reshaping Tool also allows for selected walls to be reshaped from their endpoints.

Core functionality for this sample can be found in FloorPlanner.js.

{ "class": "go.GraphLinksModel", "modelData": {"units":"centimeters", "unitsAbbreviation":"cm", "gridSize":10, "wallWidth":5, "preferences":{"showWallGuidelines":true, "showWallLengths":true, "showWallAngles":true, "showOnlySmallWallAngles":true, "showGrid":true, "gridSnap":true}, "position":"-921.9822330470338 -335.51776695296644"}, "nodeDataArray": [ {"key":"wall", "category":"WallGroup", "caption":"Wall", "type":"Wall", "startpoint":{"class":"go.Point", "x":-480, "y":-300}, "endpoint":{"class":"go.Point", "x":300, "y":-300}, "strokeWidth":5, "isGroup":true, "notes":""}, {"key":"wall2", "category":"WallGroup", "caption":"Wall", "type":"Wall", "startpoint":{"class":"go.Point", "x":300, "y":-300}, "endpoint":{"class":"go.Point", "x":400, "y":-200}, "strokeWidth":5, "isGroup":true, "notes":""}, {"key":"wall3", "category":"WallGroup", "caption":"Wall", "type":"Wall", "startpoint":{"class":"go.Point", "x":400, "y":-200}, "endpoint":{"class":"go.Point", "x":400, "y":140}, "strokeWidth":5, "isGroup":true, "notes":""}, {"key":"wall4", "category":"WallGroup", "caption":"Wall", "type":"Wall", "startpoint":{"class":"go.Point", "x":400, "y":140}, "endpoint":{"class":"go.Point", "x":-480, "y":140}, "strokeWidth":5, "isGroup":true, "notes":""}, {"key":"wall5", "category":"WallGroup", "caption":"Wall", "type":"Wall", "startpoint":{"class":"go.Point", "x":-480, "y":140}, "endpoint":{"class":"go.Point", "x":-480, "y":-300}, "strokeWidth":5, "isGroup":true, "notes":""}, {"key":"wall6", "category":"WallGroup", "caption":"Wall", "type":"Wall", "startpoint":{"class":"go.Point", "x":-320, "y":-300}, "endpoint":{"class":"go.Point", "x":-320, "y":-80}, "strokeWidth":5, "isGroup":true, "notes":""}, {"key":"wall7", "category":"WallGroup", "caption":"Wall", "type":"Wall", "startpoint":{"class":"go.Point", "x":-320, "y":-80}, "endpoint":{"class":"go.Point", "x":120, "y":-80}, "strokeWidth":5, "isGroup":true, "notes":""}, {"key":"wall8", "category":"WallGroup", "caption":"Wall", "type":"Wall", "startpoint":{"class":"go.Point", "x":120, "y":-80}, "endpoint":{"class":"go.Point", "x":120, "y":-300}, "strokeWidth":5, "isGroup":true, "notes":""}, {"key":"door", "category":"DoorNode", "color":"rgba(0, 0, 0, 0)", "caption":"Door", "type":"Door", "width":40, "doorOpeningHeight":5, "swing":"left", "notes":"", "loc":"-399.80000019073486 -300", "group":"wall", "angle":180}, {"category":"WindowNode", "key":"window", "color":"white", "caption":"Window", "type":"Window", "shape":"Rectangle", "height":5, "width":40, "notes":"", "loc":"-447.80000019073486 -300", "group":"wall"}, {"category":"WindowNode", "key":"window2", "color":"white", "caption":"Window", "type":"Window", "shape":"Rectangle", "height":5, "width":40, "notes":"", "loc":"-346.80000019073486 -300", "group":"wall"}, {"category":"MultiPurposeNode", "key":"MultiPurposeNode", "color":"#ffffff", "stroke":"#000000", "name":"Writable Node", "type":"Writable Node", "shape":"Rectangle", "text":"Boottray", "width":60, "height":30, "notes":"", "loc":"-455 -220", "angle":270}, {"category":"MultiPurposeNode", "key":"MultiPurposeNode2", "color":"#000000", "stroke":"#FFFFFF", "name":"Writable Node", "type":"Writable Node", "shape":"Rectangle", "text":"TV", "width":140, "height":20, "notes":"", "loc":"-110 -280"}, {"category":"WindowNode", "key":"window3", "color":"white", "caption":"Window", "type":"Window", "shape":"Rectangle", "height":5, "width":60, "notes":"", "loc":"-239.80000019073486 -300", "group":"wall"}, {"category":"WindowNode", "key":"window4", "color":"white", "caption":"Window", "type":"Window", "shape":"Rectangle", "height":5, "width":60, "notes":"", "loc":"10.199999809265137 -300", "group":"wall"}, {"key":"sofaMedium", "color":"#ff8080", "stroke":"#007F7F", "caption":"Sofa", "type":"Sofa", "geo":"F1 M0 0 L80 0 80 40 0 40 0 0 M10 35 L10 10 M0 0 Q8 0 10 10 M0 40 Q40 15 80 40 M70 10 Q72 0 80 0 M70 10 L70 35", "height":45, "width":90, "notes":"", "loc":"-193.18019484660536 -113.18019484660536", "group":-32}, {"key":"wall9", "category":"WallGroup", "caption":"Wall", "type":"Wall", "startpoint":{"class":"go.Point", "x":-480, "y":10}, "endpoint":{"class":"go.Point", "x":-50, "y":10}, "strokeWidth":5, "isGroup":true, "notes":""}, {"key":"wall10", "category":"WallGroup", "caption":"Wall", "type":"Wall", "startpoint":{"class":"go.Point", "x":-50, "y":10}, "endpoint":{"class":"go.Point", "x":-50, "y":140}, "strokeWidth":5, "isGroup":true, "notes":""}, {"key":"wall11", "category":"WallGroup", "caption":"Wall", "type":"Wall", "startpoint":{"class":"go.Point", "x":120, "y":140}, "endpoint":{"class":"go.Point", "x":120, "y":80}, "strokeWidth":5, "isGroup":true, "notes":""}, {"key":"wall12", "category":"WallGroup", "caption":"Wall", "type":"Wall", "startpoint":{"class":"go.Point", "x":210, "y":-30}, "endpoint":{"class":"go.Point", "x":400, "y":-30}, "strokeWidth":5, "isGroup":true, "notes":""}, {"key":"door2", "category":"DoorNode", "color":"rgba(0, 0, 0, 0)", "caption":"Door", "type":"Door", "width":40, "doorOpeningHeight":5, "swing":"left", "notes":"", "loc":"120 112.20000076293945", "group":"wall11", "angle":90}, {"key":"door3", "category":"DoorNode", "color":"rgba(0, 0, 0, 0)", "caption":"Door", "type":"Door", "width":40, "doorOpeningHeight":5, "swing":"left", "notes":"", "loc":"-50 76.20000076293945", "group":"wall10", "angle":270}, {"key":"door4", "category":"DoorNode", "color":"rgba(0, 0, 0, 0)", "caption":"Door", "type":"Door", "width":40, "doorOpeningHeight":5, "swing":"left", "notes":"", "loc":"-422.80000019073486 10", "group":"wall9", "angle":180}, {"key":"wall13", "category":"WallGroup", "caption":"Wall", "type":"Wall", "startpoint":{"class":"go.Point", "x":-290, "y":10}, "endpoint":{"class":"go.Point", "x":-290, "y":140}, "strokeWidth":5, "isGroup":true, "notes":""}, {"category":"MultiPurposeNode", "key":"MultiPurposeNode3", "color":"#ffffff", "stroke":"#000000", "name":"Writable Node", "type":"Writable Node", "shape":"Rectangle", "text":"Washer", "width":60, "height":60, "notes":"", "loc":"-252 46"}, {"category":"MultiPurposeNode", "key":"MultiPurposeNode4", "color":"#ffffff", "stroke":"#000000", "name":"Writable Node", "type":"Writable Node", "shape":"Rectangle", "text":"Dryer", "width":60, "height":60, "notes":"", "loc":"-253 104"}, {"category":"MultiPurposeNode", "key":"MultiPurposeNode5", "color":"#515151", "stroke":"#AEAEAE", "name":"Writable Node", "type":"Writable Node", "shape":"Rectangle", "text":"Fridge", "width":50, "height":40, "notes":"", "loc":"240 -270", "angle":0}, {"key":"sofaMedium2", "color":"#ff8080", "stroke":"#007F7F", "caption":"Sofa", "type":"Sofa", "geo":"F1 M0 0 L80 0 80 40 0 40 0 0 M10 35 L10 10 M0 0 Q8 0 10 10 M0 40 Q40 15 80 40 M70 10 Q72 0 80 0 M70 10 L70 35", "height":45, "width":90, "notes":"", "loc":"-103.18019484660539 -113.18019484660536", "group":-32}, {"key":"sofaMedium22", "color":"#ff8080", "stroke":"#007F7F", "caption":"Sofa", "type":"Sofa", "geo":"F1 M0 0 L80 0 80 40 0 40 0 0 M10 35 L10 10 M0 0 Q8 0 10 10 M0 40 Q40 15 80 40 M70 10 Q72 0 80 0 M70 10 L70 35", "height":45, "width":90, "notes":"", "loc":"-13.180194846605374 -113.18019484660536", "group":-32}, {"key":"armChair", "color":"#8080c0", "stroke":"#7F7F3F", "caption":"Arm Chair", "type":"Arm Chair", "geo":"F1 M0 0 L40 0 40 40 0 40 0 0 M10 30 L10 10 M0 0 Q8 0 10 10 M0 40 Q20 15 40 40 M30 10 Q32 0 40 0 M30 10 L30 30", "width":45, "height":45, "notes":"", "loc":"-273.1801948466054 -143.18019484660545", "angle":45, "group":-32}, {"key":"armChair2", "color":"#8080c0", "stroke":"#7F7F3F", "caption":"Arm Chair", "type":"Arm Chair", "geo":"F1 M0 0 L40 0 40 40 0 40 0 0 M10 30 L10 10 M0 0 Q8 0 10 10 M0 40 Q20 15 40 40 M30 10 Q32 0 40 0 M30 10 L30 30", "width":45, "height":45, "notes":"", "loc":"66.81980515339461 -143.18019484660545", "angle":315, "group":-32}, {"isGroup":true, "key":-32, "caption":"Group", "notes":""}, {"key":"shower", "color":"#ffffff", "stroke":"#000000", "caption":"Shower/Tub", "type":"Shower/Tub", "geo":"F1 M0 0 L40 0 40 60 0 60 0 0 M35 15 L35 55 5 55 5 15 Q5 5 20 5 Q35 5 35 15 M22.5 20 A2.5 2.5 180 1 1 22.5 19.99", "width":50, "height":90, "notes":"", "loc":"-320 80"}, {"key":"sink", "color":"#ffffff", "stroke":"#000000", "caption":"Sink", "type":"Sink", "geo":"F1 M0 0 L40 0 40 40 0 40 0 0z M5 7.5 L18.5 7.5 M 21.5 7.5 L35 7.5 35 35 5 35 5 7.5 M 15 21.25 A 5 5 180 1 0 15 21.24 M23 3.75 A 3 3 180 1 1 23 3.74 M21.5 6.25 L 21.5 12.5 18.5 12.5 18.5 6.25 M15 3.75 A 1 1 180 1 1 15 3.74 M 10 4.25 L 10 3.25 13 3.25 M 13 4.25 L 10 4.25 M27 3.75 A 1 1 180 1 1 27 3.74 M 26.85 3.25 L 30 3.25 30 4.25 M 26.85 4.25 L 30 4.25", "width":27, "height":27, "notes":"", "loc":"-370 110", "angle":180}, {"key":"toilet", "color":"#ffffff", "stroke":"#000000", "caption":"Toilet", "type":"Toilet", "geo":"F1 M0 0 L25 0 25 10 0 10 0 0 M20 10 L20 15 5 15 5 10 20 10 M5 15 Q0 15 0 25 Q0 40 12.5 40 Q25 40 25 25 Q25 15 20 15", "width":25, "height":35, "notes":"", "loc":"-450 110", "angle":180}, {"key":"door5", "category":"DoorNode", "color":"rgba(0, 0, 0, 0)", "caption":"Door", "type":"Door", "width":40, "doorOpeningHeight":5, "swing":"left", "notes":"", "loc":"-320 -186.79999923706055", "group":"wall6", "angle":90}, {"key":"door6", "category":"DoorNode", "color":"rgba(0, 0, 0, 0)", "caption":"Door", "type":"Door", "width":40, "doorOpeningHeight":5, "swing":"right", "notes":"", "loc":"-320 -226.79999923706055", "group":"wall6", "angle":90}, {"key":"door62", "category":"DoorNode", "color":"rgba(0, 0, 0, 0)", "caption":"Door", "type":"Door", "width":40, "doorOpeningHeight":5, "swing":"left", "notes":"", "loc":"120 -229.79999923706055", "group":"wall8", "angle":270}, {"key":"door52", "category":"DoorNode", "color":"rgba(0, 0, 0, 0)", "caption":"Door", "type":"Door", "width":40, "doorOpeningHeight":5, "swing":"right", "notes":"", "loc":"120 -189.79999923706055", "group":"wall8", "angle":270}, {"key":"diningTable", "color":"#804040", "stroke":"#7FBFBF", "caption":"Dining Table", "type":"Dining Table", "geo":"F1 M 0 0 L 0 100 200 100 200 0 0 0 M 25 0 L 25 -10 75 -10 75 0 M 125 0 L 125 -10 175 -10 175 0 M 200 25 L 210 25 210 75 200 75 M 125 100 L 125 110 L 175 110 L 175 100 M 25 100 L 25 110 75 110 75 100 M 0 75 -10 75 -10 25 0 25", "width":125, "height":62.5, "notes":"", "loc":"260 -150"}, {"key":"stove", "color":"#ffffff", "stroke":"#000000", "caption":"Stove", "type":"Stove", "geo":"F1 M 0 0 L 0 100 100 100 100 0 0 0 M 30 15 A 15 15 180 1 0 30.01 15 M 70 15 A 15 15 180 1 0 70.01 15M 30 55 A 15 15 180 1 0 30.01 55 M 70 55 A 15 15 180 1 0 70.01 55", "width":60, "height":50, "notes":"", "loc":"303.5355339059328 -254.14213562373095", "angle":45}, {"key":"staircase", "color":"#ffffff", "stroke":"#000000", "caption":"Staircase", "type":"Staircase", "geo":"F1 M0 0 L 0 100 250 100 250 0 0 0 M25 100 L 25 0 M 50 100 L 50 0 M 75 100 L 75 0 M 100 100 L 100 0 M 125 100 L 125 0 M 150 100 L 150 0 M 175 100 L 175 0 M 200 100 L 200 0 M 225 100 L 225 0", "width":125, "height":50, "notes":"", "loc":"330 -70", "angle":0}, {"key":"bed", "color":"#ffffff", "stroke":"#000000", "caption":"Bed", "type":"Bed", "geo":"F1 M0 0 L40 0 40 60 0 60 0 0 M 7.5 2.5 L32.5 2.5 32.5 17.5 7.5 17.5 7.5 2.5 M0 20 L40 20 M0 25 L40 25", "width":76.2, "height":101.6, "notes":"", "loc":"340 90", "angle":90}, {"key":"roundTable", "color":"#ffffff", "stroke":"#000000", "caption":"Nightstand", "type":"Round Table", "shape":"Ellipse", "width":30, "height":31, "notes":"", "loc":"370 30", "text":"Nightstand"}, {"category":"WindowNode", "key":"window5", "color":"white", "caption":"Window", "type":"Window", "shape":"Rectangle", "height":5, "width":60, "notes":"", "loc":"-376.80000019073486 140", "group":"wall4", "angle":180}, {"category":"WindowNode", "key":"window6", "color":"white", "caption":"Window", "type":"Window", "shape":"Rectangle", "height":5, "width":60, "notes":"", "loc":"329.4735930304595 -270.5264069695405", "group":"wall2", "angle":45}, {"category":"WindowNode", "key":"window7", "color":"white", "caption":"Window", "type":"Window", "shape":"Rectangle", "height":5, "width":60, "notes":"", "loc":"371.89999990165234 -228.10000009834766", "group":"wall2", "angle":45}, {"category":"WindowNode", "key":"window8", "color":"white", "caption":"Window", "type":"Window", "shape":"Rectangle", "height":5, "width":60, "notes":"", "loc":"400 11.599999994039536", "group":"wall3", "angle":90}, {"category":"MultiPurposeNode", "key":"MultiPurposeNode6", "color":"#ffffff", "stroke":"#000000", "name":"Writable Node", "type":"Writable Node", "shape":"Rectangle", "text":"Counter", "width":60, "height":50, "notes":"", "loc":"343.53553390593277 -213.53553390593277", "angle":45, "caption":"Counter"}, {"key":"wall14", "category":"WallGroup", "caption":"Wall", "type":"Wall", "startpoint":{"class":"go.Point", "x":210, "y":-30}, "endpoint":{"class":"go.Point", "x":120, "y":80}, "strokeWidth":5, "isGroup":true, "notes":""} ], "linkDataArray": []}