PatioPlanner 2.0 rebuilds the entire editor. You can now put several surfaces on one drawing, navigate by touch, and choose from five new laying patterns.
The new canvas editor
The editor now runs on a canvas engine (Konva.js) instead of SVG.
Multiple surfaces on one drawing
Previously you could only plan a single polygon. In Version 2.0 you can place any number of surfaces on the same drawing, each with its own laying pattern, stone colour, and joint width.
Typical use case: main terrace in herringbone + garden path in running bond + seating area in Opus Romano, all on one drawing, with one shopping list.
Drawing polygons
- Point-by-point: Click to place vertices, see the ghost line to your cursor, close with double-click or click the first point.
- Rectangle mode: Two clicks for opposite corners done.
- Live preview: From three points onwards you see the shaded area with edge measurements.
Touch navigation for tablet and smartphone
- Pinch-to-zoom: Two fingers to zoom in and out just like Google Maps.
- Two-finger pan: Drag the viewport with two fingers.
- Trackpad scroll: On MacBook, scroll to pan, Ctrl+scroll to zoom.
Context menu via right-click
Right-click any polygon to:
- Change colour directly (8 preset colours)
- Duplicate (copy offset by 50 mm)
- Rotate 90°
- Delete
More editor improvements
- Zoom buttons + scroll-wheel zoom with percentage display
- Fit-to-view resets zoom and position
- Delete vertex by double-clicking a corner point
- Move polygon by dragging the active surface
- Responsive canvas: Adapts to window width
- Constant vertex size regardless of zoom level
New laying patterns
Opus Romano (12-stone bond)
Opus Romano is a common multi-format bond. It uses four stone formats in a 1200 × 1200 mm repeat with exactly 12 stones and no continuous cross joint.
| Format | Dimensions | Count per repeat |
|---|---|---|
| Small (A) | 200 × 200 mm | 4 pieces |
| Medium (B) | 400 × 200 mm | 2 pieces |
| Large (C) | 400 × 400 mm | 4 pieces |
| XL (D) | 600 × 400 mm | 2 pieces |
Many manufacturers offer exactly this mix as a pallet pack. PatioPlanner calculates the exact quantity per format.
Ashlar bond (4 formats)
The Ashlar bond uses the same four formats but in a more compact 1000 × 1000 mm repeat. Good for smaller areas that should still look varied.
Multi-format herringbone
A herringbone pattern with three different stone sizes (200×100, 200×200, 300×200). Stones meet at right angles like classic herringbone, but the size variation gives a more varied look.
Windmill (pinwheel)
Square stone in the centre surrounded by four rectangular stones, the classic windmill bond. Two stone formats.
Stretcher-soldier bond
Three alternating courses: stretcher (horizontal), offset with accent stones, and soldier (vertical). Two stone formats for a rhythmic joint pattern.
Shopping list: totals across all surfaces
The shopping list now sums across all polygons:
- Stones: Summarised per stone type (across all patterns)
- Sub-base: Total area of all polygons → one order for gravel + grit
- Edging stones: Total perimeter of all surfaces
- Joint filler: Calculated per polygon (different joint widths possible), then summed
Share and export
- Share link: Now encodes the complete scene (all polygons with styles)
- PNG export: With watermark, 2× resolution
- PDF/Print: A4 landscape, canvas scaled to page width, shopping list on next page
Under the hood
- Canvas engine: Konva.js 10.3 (canvas-based instead of SVG → better performance with many stones)
- Architecture: Normalised
$scenestore with entity model, reactive computed derivations - Performance: Memoized tiling calculation, single-shape rendering for thousands of stones
- Persistence: Automatic migration from old single-surface format
Try it now
Open the planner and draw your first multi-surface patio. Pick a different pattern for each surface; the shopping list totals everything.