TekH
7a126050cf
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.
84 lines
3.9 KiB
Markdown
84 lines
3.9 KiB
Markdown
# 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.
|