Cut Lists and Layouts

Auto-generated Cut Lists and Layouts

Once every surface has a material and a placement pattern, the planner can compute the full material layout: every individual piece, its size, its rotation, the cut lines required to produce it, and the resulting amount of waste. The cut list and layout statistics are derived from that single source of truth.

Feature line from the README: 🪚 Auto-generated cut lists, cutting diagrams, and waste reports.

How layouts are produced

Each surface with materialId and placementPatternId produces one MaterialLayout describing:

• The tessellation of material.unitWidth × material.unitHeight pieces using the pattern.
• The clipped polygon for each piece (so pieces around openings or surface edges carry exact cut outlines).
• A per-piece status (full, cut, waste) and a deterministic piece code.
• A settings snapshot so the layout can detect when the material, pattern or edge rules have changed.

Two entry points exist:

1. Live preview — every time the project state changes, generateLayoutsForProject produces a non-optimised layout used to render the canvas and the Layouts panel. This keeps the canvas in lock-step with the project, even before optimisation is run.
2. Optimised layout — pressing Generate material layout in the editor toolbar (or Optimize all in the Layouts panel) calls runOptimizer in a Web Worker. The worker runs the placement engine with the priorities configured per pattern and returns optimised layouts that are persisted in project.materialLayouts.

The Layouts panel automatically distinguishes the two states — each row is labelled Optimized HH:MM:SS or Live preview.

The Layouts panel

Located in the bottom panel of the editor:

Column	Meaning
Surface	Surface name.
Material	Coloured swatch + material name.
Pattern	Active placement pattern.
Pieces	Total piece count produced by the layout.
Full	Number of full, uncut unit pieces.
Cut	Number of pieces that needed cutting.
Purchased	Total purchased material area required (in m² / cm² / mm² depending on size).
Waste	Waste percentage relative to purchased area.
Status	"Optimized" with a timestamp or "Live preview".

Click Optimize all to regenerate every layout via the worker. Existing layouts are atomically replaced through setMaterialLayoutsCommand, which means the regeneration is undoable.

The cut list

The Cut List tab in the bottom panel shows every piece grouped by:

• Cut code (A1, A2 …), with +N summarising additional identical codes.
• Surface, material and overall size (width × height in mm).
• Quantity, thickness, whether overlap is included, and any notes (waste, oversized, undersized…).

Blade thickness (kerf)

The cut list takes the project's blade kerf into account when listing piece dimensions. The kerf is editable directly above the table; the input accepts both . and , as decimal separators. Changes go through changeProjectSettingsCommand, so the kerf is undoable just like everything else.

Cutting diagrams

For every persisted layout, the engine builds a cutting diagram that shows how to slice each purchased panel into individual pieces. The diagram drives the per-page material output in the PDF Export:

• Each purchased panel is rendered to its own page.
• Pieces are labelled with the cut code shown in the cut list.
• Joints, overlap regions and waste pieces are colour-coded for the cutter.

Waste and statistics

computeLayoutStats (used both in the panel and in the PDF) produces:

• totalPieceCount, fullUnitCount, cutPieceCount
• coveredAreaMm2, purchasedMaterialAreaMm2, wasteAreaMm2
• wastePercent and a per-material breakdown so the project-level ProjectStatsPanel can list "X m² needed, Y % waste" for every material in the project.

Where this lives in the codebase

• Live preview & optimised generation — src/domain/materialLayout/generateLayoutsForProject.ts, optimizeMaterialLayout.ts, scoreMaterialLayout.ts
• Worker plumbing — src/workers/materialLayoutOptimizerClient.ts, materialLayoutOptimizerWorker.ts
• Cut list — src/domain/materialLayout/materialCutList.ts, src/features/materialLayout/MaterialCutListTable.tsx
• Cutting diagrams — src/domain/materialLayout/cuttingDiagram.ts
• Stats — src/domain/materialLayout/layoutStats.ts, src/features/materialLayout/ProjectStatsPanel.tsx
• Layout list UI — src/features/materialLayout/LayoutsListPanel.tsx
• Canvas rendering — src/features/materialLayout/MaterialLayoutLayer.tsx

Related pages

• Placement Patterns
• Material Library
• PDF Export
• Edge Overlap Visualization