diff --git a/SENDER_PDF_TOOLBAR_PLAN_EN.md b/SENDER_PDF_TOOLBAR_PLAN_EN.md new file mode 100644 index 00000000..43f56aa2 --- /dev/null +++ b/SENDER_PDF_TOOLBAR_PLAN_EN.md @@ -0,0 +1,83 @@ +# Sender PDF Toolbar Migration Plan + +## Goal +Design and integrate a reusable toolbar component for `SenderPdfImageEditor` that matches the provided visual style and supports: +- page navigation +- zoom in/out (including overriding default mouse-based zoom behavior inside editor) +- PDF download as original bytes (not image) +- print output + +Critical rule: existing signature add/remove/drag-drop behavior must remain fully functional. + +## Scope and Files +Planned touch points: +1. `EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditorToolbar.razor` (new) +2. `EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditorToolbar.razor.cs` (optional, if code-behind needed) +3. `EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditor.razor` (compose toolbar + editor integration) +4. `EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/SenderEditorPage.razor` (pass PDF bytes/metadata/events to editor) +5. `EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css` (toolbar visual styles + responsive) +6. `EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/js/envelope-editor.js` (helper functions: scroll-to-page, wheel handling, download, print if needed) + +## Non-Regression Strategy +- Keep all existing signature event paths unchanged (`EditorClick`, `MoveField`, `RemoveField`). +- Introduce toolbar as a separate component with explicit parameters and callbacks. +- Add features incrementally; no behavior switch all at once. +- After each stage: run manual black-box checks focused on signatures and new feature. +- If any regression appears: rollback only the stage-local changes. + +## Stage Plan + +### Stage 1 - Visual Toolbar Skeleton (all buttons disabled) +- Build standalone `SenderPdfImageEditorToolbar` component. +- Recreate layout from reference image (three grouped blocks: page nav, zoom, print/download). +- Render in `SenderPdfImageEditor` above page canvas area. +- All controls disabled; only visual state and responsive behavior implemented. +- No functional binding yet. + +Acceptance: +- Toolbar appears and matches structure/spacing/icons closely. +- Signature add/remove/drag still works exactly as before. + +### Stage 2 - Page Navigation +- Add current page/total page model and callbacks. +- Implement first/prev/next/last navigation. +- Implement page number selector UI behavior. +- Navigate by scrolling/focusing target page container (`data-editor-page`) without changing signature logic. + +Acceptance: +- Navigation controls move to correct page boundaries. +- Signature interactions continue to work on all pages. + +### Stage 3 - Zoom In/Out + Mouse Override +- Introduce zoom state (e.g., 50%-300%, step-based). +- Wire `-` / `+` and percent display. +- Apply zoom in a way that preserves coordinate normalization for signature placement/drag. +- Override wheel behavior inside editor container (`@onwheel:preventDefault` + JS helper where needed). + +Acceptance: +- Zoom buttons work consistently. +- Mouse wheel behavior follows custom zoom logic. +- Signature placement and drag coordinates remain correct after zoom changes. + +### Stage 4 - Download Original PDF Bytes +- Expose download action from toolbar. +- Download source must be original PDF bytes (same content as uploaded/loaded document). +- Suggested filename from current editor state. + +Acceptance: +- Downloaded file opens as valid PDF. +- Not an image export; true PDF bytes. + +### Stage 5 - Print Output +- Add print action from toolbar. +- Print original PDF content using browser print flow (hidden iframe/object URL approach). +- Ensure action is isolated and does not mutate editor state. + +Acceptance: +- Print dialog opens with correct document. +- Existing editor/signature interactions remain intact before and after print. + +## Approval Gates +- Stop after each stage. +- Share what changed + exact black-box checklist. +- Wait for explicit approval before moving to next stage.