Tutorial

Getting Started

1. Use the left sidebar to pick a tool (Draw/Walls, Line/Slab, Rectangle, Door, Window, Symbol, Image, Circle, Roof).
2. The work area splits into 2D (left) and 3D (right). Use the buttons 2D Only / 3D Only / Exit Full to focus on one.
3. Save/Open lives in the sidebar; Export PDF is the top-left button on the 2D canvas.
4. Typical flow: draw slabs (room outlines) → 🏗 Build → ✨ Auto-Place doors and windows → tweak in 3D → Export.

Navigation (2D / 3D)

• Pan (2D): Right-mouse drag (RMB). Cursor shows "grabbing". Tap RMB (no drag) keeps its legacy behaviour: cancel the current operation, or commit the open line / roof drawing.
• Zoom (2D): Mouse wheel.
• 3D Orbit: Left-mouse drag in the 3D pane; wheel to dolly; right-mouse drag to pan.
• Switch view: Buttons above each pane swap between split / 2D only / 3D only.

Selections & Transform Gizmo

• Select: Click a wall, slab, fixture, image, symbol or circle.
• Multi-select: Hold Shift while clicking to add to the selection.
• Duplicate + Drag: Hold Ctrl/Cmd and mouse-down on the gizmo to duplicate, then drag.
• Move: Drag the move handles — movement is smooth with object snap (see Object Snap & Guides).
• Rotate: Drag the rotate handle. Default snap = 1°. Hold Shift for 45° increments. Rotation snapping is world-aligned (0°, 45°, 90°, …).
• Commit: Releasing the mouse finalizes the transform — undo/redo captures it.

Drawing Walls & Lines

• Walls: Draw mode — click to drop endpoints; click on an existing wall vertex to join. Snap dot shows when you're locking onto something.
• Interior Walls: Same as draw mode but using the Interior Wall tool — 100 mm thickness by default and tagged for Build classification.
• Lines / Slabs: The Line tool draws polygonal regions you can close into rooms.
• Rectangle (Rect): Click-drag to define a rectangular room footprint quickly. Shift while dragging makes it a square.
• Walls and slab edges snap to nearby polygon vertices and segments — see Object Snap & Guides.
• Move walls/vertices: select, then drag. Hold Shift to axis-lock to X or Y during the drag.
• Split a wall: Double-click on it to split at the cursor.

Rooms & Room Types

Click inside a closed slab to open the Room properties popup. The Nameinput is a typeahead — start typing or pick from the dropdown of common room types. Naming rooms unlocks the rules engine for Auto-Place.

• Suggested names: Bedroom, Master Bedroom, Bedroom 1/2/3, Living Room, Family Room, Lounge, Kitchen, Kitchenette, Dining, Dining Room, Living/Dining, Kitchen/Dining, Bathroom, Toilet, WC, Powder Room, Ensuite, Hallway, Corridor, Lobby, Entrance Lobby, Foyer, Entry, Porch, Garage, Double Garage, Triple Garage, Carport, Stairwell, Balcony, Decking, Patio, Terrace, Laundry, Mudroom, Utility, Pantry, Study, Office, Library, Walk-in Wardrobe, WIC, Cinema Room, Games Room, Gym, Storage, Plant Room.
• You can type any name — the dropdown is suggestions, not a hard list.
• Area: auto-computed from the slab; the popup lets you type an override in m².
• Outdoor rooms: Naming a slab Decking, Balcony, Patio, Terrace, Garden or Yard tells Build to skip walls around it — see the Build section.

🏗 Build & 🧹 Clear Build

Build turns your drawn slab polygons into a clean set of walls — exterior perimeter, interior partitions at shared edges, and proper mitred corners. It runs in one click and is fully deterministic: the same slabs always produce the same walls.

• 🏗 Build: Press once you've drawn your room slabs (and named them). Build emits an interior wall on every edge shared by two slabs, and exterior walls on every other slab edge. Manually drawn walls + manually placed doors/windows are preserved and re-anchored to the rebuilt walls.
• 🧹 Clear Build: Wipes every wall, fixture and picture — but takes a slab-anchored snapshot first. The next Build restores everything in place.
• Outdoor slabs (deck / balcony / patio / terrace / garden / yard) are filtered from Build — they appear as floor areas but no walls are emitted around them. The wall facing the outdoor space becomes a single building-envelope exterior wall.
• Mitred corners: walls along a continuous chain are joined with a true geometric mitre at every junction. Closed perimeters render with a hole punched through the centre so 3D extrusion is clean.
• Tip: Iterate freely. Tweak a slab → press Build again → walls regenerate, openings re-anchor by slab-edge.

✨ Auto-Place Doors & Windows

After Build, press ✨ Auto-Place to drop sensible doors and windows based on each room's name. Auto-Place is idempotent — rerunning it wipes its own previous output and regenerates; your manually placed openings are never touched.

Default rules

• Garage doors: 1 garage door per car on the front exterior wall. Car count is parsed from the name (Single / Double / Triple Garage, or N-car Garage). Uses the built-in garage door symbol.
• Bedroom ↔ bathroom / ensuite / WIC: corner-hug door, swings into the bath.
• Bedroom ↔ hallway or entry: circulation door, corner-hug.
• Bedroom social fallback: if there's no hallway/entry, a door connects the bedroom to an adjacent living or dining room instead.
• Mudroom ↔ garage: corner-hug door.
• Kitchen ↔ living / dining: 1.5 m open archway, centred on the shared wall.
• Dining ↔ living: 1.5 m open archway, centred — always placed when they share a wall.
• Living/dining ↔ outdoor: 2.1 m sliding patio door, centred.
• Garage ↔ outdoor: single pedestrian door.
• Front-entry door: on the entry slab's exterior wall, on the side away from the living/dining.
• Mudroom outdoor door: back-of-house door on the side away from garage + living/dining.
• Bedroom / kitchen windows: 1200 × 1200 mm, sill 900 mm, centred on the longest exterior wall.
• Bathroom / toilet vent window: 600 × 900 mm, sill 1200 mm (high for privacy).
• WIC window: 600 × 600 mm, sill 1500 mm.
• Hallway window: 900 × 1200 mm at the end of a corridor (only fires when the hallway has an exterior wall).
• Stairwell window: 1200 × 1800 mm, raised sill 1200 mm — tall to light the stair.
• Living / dining windows: 1500 × 1200 mm, two evenly spaced on the longest exterior wall.

All auto-placed windows use the Fixed window style with a 2 × 2 muntin grid by default. All auto-placed garage doors use the garage roller-style symbol.

Doors & Windows (Manual)

• Pick the Door or Window tool, hover a wall to see the preview snapping along it, click to drop.
• Door styles: single (default), double, sliding, garage, open (archway), empty (opening only).
• Window styles: Fixed (default — supports a muntin grid up to 4 × 4), Sliding, Casement, empty.
• New windows ship with a 2 × 2 muntin grid by default. Toggle the grid + pane counts in the fixture inspector.
• Drag along a wall to move; drop on a different wall to re-host.

Object Snap & Alignment Guides

Drawing and dragging now snap to nearby geometry using a screen-space radius (~12 px) so the feel is consistent at any zoom. Visual alignment guides appear when your cursor lines up with a vertex that's visibly close on screen.

• Wall drawing: the cursor snaps to wall endpoints, polygon vertices and polygon segments. Snapping to an existing wall endpoint terminates the chain; snapping to a polygon vertex or segment lets you keep drawing.
• Wall drag (vertex / segment): snaps to other wall endpoints + polygon vertices + polygon segments. Hold Shift to axis-lock the drag.
• Polygon drag: snaps to other polygons' vertices and segments. When dragging a whole polygon by its body, any of its corners can engage the snap — whichever lands closest to a target wins.
• Roof drawing / dragging: snaps to polygon and wall vertices + segments.
• Alignment guides: green dashed lines appear when your cursor's X or Y aligns with a vertex within ~10 px (and visibly close to the cursor). Use them to keep edges co-linear.

Multi-Floor Plans

• Add floors from the floor tab strip. Each floor stores its own walls, slabs, fixtures, roofs, columns, decking and pictures.
• Active floor edits are live in 2D & 3D. Adjacent floors render as faded ghost lines behind your current floor so you can align stacks of rooms.
• Each floor has its own elevation (mm) — the 3D view stacks them by that offset.
• PDF export automatically produces one page per non-empty floor at the same architectural scale, so they line up when flipping pages.

Symbols (Furniture)

• Pick a symbol from the panel or drag-drop from the catalog onto the 2D canvas.
• Live Uniform Scale: type a numeric scale into the Uniform Scale input — it updates instantly in both 2D and 3D.
• Elevation (mm): use the number field or slider for a live Y-offset in 3D.
• Final 3D scale = native fit × unitScale (from the GLB) × your Uniform Scale.

Images & Wall Pictures

• Drag images into the 2D canvas or use the Images panel.
• For wall-mounted pictures, hover a wall to see the preview, then click to place; drag to reposition along the wall.

Circles & Rectangular Slabs

• Circle tool: single-click to place. Adjust radius / height / elevation in the panel.
• Rect tool: click-drag to define a footprint; Shift forces square; optional height creates a 3D slab. Ctrl/Cmd + drag on a rectangle corner or edge resizes it.

Grid, Units & Dimensions

• Grid Snap: on by default. Set the minor step in the sidebar; major grid = 5 × minor.
• Units: switch between mm and imperial. Inputs adapt; values are stored in mm internally.
• Dimensions tier: the Dims toggle shows three tiers along your walls — interior segments (broken around openings), exterior segments + door/window widths, and overall plan width / length. PDF export honours this toggle.
• Room labels: toggle Hide labels / Show labels to control the name + area text inside each slab.

Vector PDF Export

The top-left Export PDF button produces a true vector PDF — not a screenshot. Output stays sharp at any zoom, prints crisply, and the room names + dimensions are selectable text.

• Multi-page: one page per non-empty floor.
• Auto-scale: the plan is fit to A3 landscape and the title block reports the chosen architectural ratio (1:50 / 1:100 / 1:200 / 1:500 / 1:1000 / 1:2000). All pages in the same export share the same scale.
• Walls: drawn with proper mitres + per-wall colour.
• Doors: match the 2D canvas exactly — single, double, sliding, garage, open, empty.
• Windows: heavy line + centre tick (with muntin grid where applicable).
• Room colours: filled rooms export with the same tinted fill the canvas shows.
• Dimensions: exported only when the Dims toggle is on.
• Title block: project name (from the gallery save name), drawing scale, date and paper size.
• Save / Open: use the gallery to save the project as a .zdraw scene; OPFS autosave behaves as configured in your project.

Keyboard Shortcuts

Troubleshooting

• Auto-Place added no openings. Make sure your slabs have recognised room names (Bedroom, Kitchen, Garage, Bathroom, Ensuite, Living Room, Dining, etc.). Names like "Office" still classify (as living) but generic names like "Storage" don't trigger rules.
• Wall doesn't show up after dragging a slab. Press Build again — manually editing slab points doesn't auto-rebuild walls.
• Deck slab has walls around it. Rename it to Decking, Balcony, Patio, Terrace, Garden or Yard — Build will then exclude it from the wall set.
• Drag feels grid-locked. Grid snap is on by default. Turn off the Grid snap toggle in the sidebar for free-form drag; alignment guides will still appear for nearby vertices.
• Snap to other polygons doesn't engage. Tolerances are screen-pixel — zoom in for finer control. Snap fires within ~12 px of a vertex and ~10 px of a segment.
• PDF exterior walls look unfilled. Check that the wall colour is set (Default Wall Color in the sidebar). The exporter uses that exact colour for the wall fill.
• Rectangle / room colour didn't export to PDF. The export mirrors the canvas: closed polygons fill unless fill is set to false. Toggle the rectangle's fill in the Rect panel.
• Symbol stays selected while dragging from catalog. Begin the drag from the catalog/panel area — selection in canvas won't interfere while you drop.
• Units look off for imported GLBs. Check unitScale on the symbol; final = native × unitScale × uniformScale.