Edge Overlap Visualization

Physical Edge Overlap Visualization

When two surfaces meet, the material applied to one may physically wrap or overhang onto the other — think of cladding at an outside corner, tiles at a wall/floor junction, or a worktop with a built-up edge. The planner captures this through edge rules and renders the overlap on the canvas with a clearly visible semi-transparent band so you can see exactly where the doubled coverage lies.

Feature line from the README: ↔️ Physical edge overlap with semi-transparent visualization.

Edge rules

Every edge of every surface has an editable Edge Rule that controls how the placement engine treats that boundary. The rule type can be:

Type	Behaviour
Hard stop	Material is clipped sharply at the edge.
Soft boundary	Material is clipped, but the edge is not enforced as a cut line.
Physical overlap	The donor surface's material is allowed to extend past the edge by maxOverlapMm — used for outside corners and overhangs.
Connected overlap	A connection-aware version of physical overlap; the partner edge (on the other surface) becomes the receiver.

Additional fields:

• maxOverlapMm — maximum overhang in millimetres.
• overlapOpacity — alpha used when rendering the overlap band on the canvas (typically 0.3–0.5).
• connectedSurfaceId / connectedEdgeIndex — links the rule to the receiver edge for connected overlap.
• applyThicknessCompensation + customThicknessAllowanceMm — optional extra allowance for the material's thickness so a wrap of thick material still meets at a clean corner.

How overlap is rendered

The ConnectionVisualizer and the material layout layer cooperate:

1. Connections show coloured chevrons on the participating edges (one colour per connection type: outside corner, inside corner, flat continuation, butt joint, custom).
2. For every edge rule with physicalOverlap or connectedOverlap, the layout layer extends the donor material's polygon past the edge.
3. That extension is drawn with the configured overlapOpacity, so the doubled coverage looks visually distinct from the regular material.
4. The cut list records pieces that include an overlap in the Overlap column (Yes / —) and notes any thickness compensation.

Editing edge rules

Edge rules can be edited in two places:

• Surface Properties — selecting an edge of a surface (via the Cut tool or the Connection tool) exposes the rule for that edge.
• Connection Properties — when a connection is selected, the associated rule is editable inline together with the connection's type, wrap direction and visibility.

All edits go through edgeRuleCommands and participate fully in undo/redo.

Tips

• For aesthetics, the chevron and overlap colours are designed to remain legible at all zoom levels because Konva's strokeScaleEnabled is disabled — they keep the same on-screen weight regardless of viewport scale.
• If you want to inspect just the overlap regions, hide other shapes via the layer toggles or zoom in around the connection — the semi-transparent band makes the overlapping pieces glow even on a busy canvas.

Where this lives in the codebase

• Schema — src/types/edgeRule.ts
• Commands — src/domain/commands/builtin/edgeRuleCommands.ts
• Connection visualisation — src/features/surfaces/ConnectionVisualizer.tsx
• Layout layer — src/features/materialLayout/MaterialLayoutLayer.tsx
• Computation — src/domain/materialLayout/buildMaterialLayout.ts, optimizeMaterialLayout.ts

Related pages

• Surfaces, Openings and Connections
• Auto-generated Cut Lists and Layouts
• Placement Patterns