Roof layout

A React block (a whole screen) in Beamline's Manufacturing app.

The roof of a solar design. The roof in plan with every face's panels drawn as they lie under its roof type's rules (projected from the slope), each face's pitch, bearing and panel count, and the roof's total panels and size. Faces chosen together on the plan or from their chips; their pitch, azimuth and material read as words that open their editors, a value that differs between them said as Mixed with each value until one is set for all. Mounting rules for each roof type: how many panels fit on the face shown, the face drawn along its slope with the ridge, the setback dashed and measured, and the panels; edge and ridge setbacks and spacing as words that open their fields, portrait or landscape; panels across every face of that type with the system size; a face where nothing fits said and tinted.

Use it for

Editing several chosen items at once, mixed values said.
Rules by type with a drawing that follows them and a count.

Not for

Equipment placement and circuits (electrical-design).
Design checks before a permit (plan-readiness).

Anatomy

faces: title, the roof's panels and kW, how many chosen; roof plan: each face with its ridge, its panels, name, pitch and bearing, panel count (lines as room allows), chosen ones outlined in ink, a face where none fit tinted; face chips; pitch, azimuth and material for the chosen faces as words opening their editors, Mixed with the values
rules: roof type; how many panels fit on the face shown, or none; the face drawn along its slope with the ridge, setback dashed and measured, and panels; edge setback, ridge setback, spacing as words opening their fields, orientation; panels on every face of that type and the size

States

none chosen
mixed values
one value for all
no panels fit

Keyboard

Tab to the face chips and Space to choose
Arrow keys step the pitch, azimuth and rules

Props

Prop	Type	Default	Description
`defaultFaces` (required)	`RoofFace[]`	—
`roofTypes` (required)	`RoofType[]`	—
`panel` (required)	`{ w: number; h: number; watts: number; }`	—	The panel's size in feet and its watts.
`defaultSelected`	`string[]`	—
`defaultRulesFor`	`string`	—	The roof type whose rules open first; the chosen faces' own when they share one.
`onFacesChange`	`((f: RoofFace[]) => void)`	—
`onRulesChange`	`((t: RoofType[]) => void)`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.
`photo`	`{ src: string; alt: string; }`	—	A photo of the house (a drone's view), shown beside the plan and opened large on a press.

Built from

Import

import { RoofLayout } from "@beamline/roof-layout";

Get it

Roof layout is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Roof layoutComplete system · $49

The roof of a solar design.

Editing three faces

The Okafor house's south-facing faces chosen together: their pitch, azimuth and material differ, so each says Mixed with the values until one is set for all three.

0 × 0full

Mounting rules for the porch

The porch's standing-seam roof has its own rules; turned to portrait, no panel fits its short slope.