From 7a126050cf9ecf9306cab2a971bb9672069bbdc8 Mon Sep 17 00:00:00 2001 From: TekH Date: Wed, 30 Sep 2026 15:18:25 +0200 Subject: [PATCH] Add migration plan for SenderPdfImageEditor toolbar Introduce a detailed migration plan to design and integrate a reusable toolbar component for the `SenderPdfImageEditor` in the `EnvelopeGenerator.Server` project. The toolbar will support page navigation, zoom in/out, PDF download, and print functionality while preserving existing signature add/remove/drag-drop behavior. The plan includes: - Creation of a new `SenderPdfImageEditorToolbar` component. - Updates to `.razor`, `.css`, and `.js` files. - A non-regression strategy with incremental feature additions and manual black-box testing after each stage. The migration is divided into five stages: 1. Visual toolbar skeleton. 2. Page navigation. 3. Zoom in/out with mouse override. 4. Download original PDF bytes. 5. Print output. Approval gates are defined to ensure functionality is implemented correctly and regressions are avoided. --- SENDER_PDF_TOOLBAR_PLAN_EN.md | 83 +++++++++++++++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 SENDER_PDF_TOOLBAR_PLAN_EN.md 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.