Files
TimeTracker/docs/PDF_LAYOUT_EDITOR.md
T
Dries Peeters 2ed3bd6a88 feat(pdf-designer): multi-select, text alignment, guides, layers (#619)
Add multi-select with Shift/Ctrl toggles and marquee selection on the invoice
and quote PDF template editors, plus a shared transformer, group nudge with
snap-aware arrow keys, multi copy/paste/duplicate, align-to-page or
align-to-selection, horizontal/vertical distribute, and Ctrl/Cmd+G group /
Ctrl/Cmd+Shift+G ungroup.

Expose horizontal (left/center/right/justify) and vertical (top/middle/bottom)
text controls in the properties panel; export verticalAlign, group_id,
locked, and hidden in template JSON where set. Skip hidden elements in
ReportLab rendering; draw justified text on canvas via Paragraph; honor
verticalAlign when a text box height is present.

Introduce app/static/js/pdf_editor helpers (loaded with dynamic import from
the templates), pdf_editor.css, a layers panel with visibility and lock toggles,
smart-guide snapping, and optional ruler chrome. Document behaviour and manual
QA in docs/PDF_LAYOUT_EDITOR.md; add tests/test_pdf_template_schema.py for
optional template fields.

Closes #619.
2026-05-13 19:49:38 +02:00

1.9 KiB

PDF layout designer (invoice & quote)

Modules (static)

Pure helpers live under app/static/js/pdf_editor/:

  • helpers.mjs — union selection bounds, smart-guide snap math, distribute horizontal/vertical
  • align.mjs, guides.mjs, selection.mjs, core.mjs — thin re-exports for discoverability

The Konva editor itself stays in Jinja templates (pdf_layout.html, quote_pdf_layout.html) because it embeds {% raw %} / {{ … }} for invoice/quote variables. Templates load helpers via import() (see async function initializePDFEditor).

Issue #619 features

  • Multi-select: Shift/Ctrl/Cmd-click toggles; drag a marquee on the page background; transformer supports multiple nodes; arrow keys move all selected (snap-to-grid aware when enabled).
  • Text alignment: Properties panel segmented controls for horizontal (left/center/right/justify) and vertical (top/middle/bottom) alignment.
  • Align toolbar: With one element selected, aligns to the page; with two or more, aligns to the selection bounding box. Distribute buttons require three or more elements.
  • Ctrl/Cmd+G groups selection into a user-group; Ctrl/Cmd+Shift+G ungroups.
  • Layers panel: eye (hidden in export), lock (non-selectable), row click to select.
  • Smart guides and rulers toggles in the top toolbar.

Manual QA checklist

  1. Invoice designer /admin/pdf-layout: multi-select, move, copy/paste multiple, distribute, group/ungroup, text align + vertical align, save, reload, preview PDF.
  2. Quote designer /admin/quote-pdf-layout: same smoke test.
  3. Hidden element: toggle eye off → save → preview: element absent from PDF.
  4. Locked element: cannot select on canvas; unlock from layers panel.
  5. Justify + long paragraph: preview renders without crashing.

?editor=v2

Historically discussed as a feature flag; the editor always loads the modular helpers path—no separate legacy bundle is kept in-tree.