EnvelopeGenerator/SENDER_PDF_TOOLBAR_PLAN_EN.md

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.

Notes

• Toolbar visual polish is pending (icon sizing/balance/spacing fine-tuning).