Updated `envelope-viewer.css` to enhance the layout and responsiveness of the PDF toolbar:
- Adjusted padding, gap, width, and alignment for better usability.
- Improved zoom section and slider styles for flexibility and consistency.
Enhanced `pdf-viewer.js` to handle concurrent rendering tasks:
- Added checks to prevent overlapping render tasks on the same canvas.
- Implemented error handling for rendering operations to ensure stability.
These changes improve the user experience and robustness of the PDF viewer.
Added `image-rendering` properties and opacity transitions to `.pdf-canvas` for smoother visual effects during rendering. Introduced a `.pdf-canvas.rendering` class to indicate rendering state.
Enhanced `renderPage` method to support HiDPI displays by scaling the viewport based on device pixel ratio (up to 2) and setting both internal resolution and CSS display size for better rendering quality. Enabled high-quality rendering with `imageSmoothingEnabled` and `imageSmoothingQuality`.
Updated scroll container reference to `.pdf-canvas-wrapper` for proper alignment. Added logic to manage the `rendering` class during and after rendering, including error handling to ensure UI consistency. These changes improve both functionality and aesthetics of the PDF viewer.
Enhanced thumbnail rendering in `envelope-viewer.css` by adding `image-rendering` properties for better visual quality.
Updated `pdf-viewer.js` to support high-quality rendering with HiDPI support:
- Replaced fixed scale with dynamic scaling using `devicePixelRatio` (capped at 2x) and a base scale of 0.75.
- Adjusted canvas resolution to match scaled viewport dimensions.
- Removed inline canvas styles to delegate display size to CSS.
- Retained high-quality rendering settings for the canvas context.
These changes improve visual fidelity while maintaining performance.
Updated the `.pdf-thumbnail__canvas` CSS class to replace
`max-width`, `max-height`, and `display: block` with `width`,
`height`, `object-fit: contain`, and `object-position: center`.
These changes ensure the canvas fully occupies its container,
scales proportionally without cropping, and centers the content
for better visual consistency and usability.
Introduced a resizable splitter for the PDF thumbnail sidebar, allowing users to dynamically adjust its width. Added `_thumbnailWidth` property with min/max constraints and implemented mouse event handlers (`OnSplitterMouseDown`, `OnSplitterMouseMove`, `OnSplitterMouseUp`) to manage resizing.
Integrated JavaScript interop to attach/detach resize event listeners and save user preferences to `localStorage`. Updated `pdf-viewer.js` to handle resizing state and cleanup. Styled the splitter in `envelope-viewer.css` with hover/active states and ensured smooth interaction.
Persisted thumbnail width across sessions and added error handling for `localStorage`. Enhanced user experience with intuitive resizing and improved UI flexibility.
Removed the header section of the PDF thumbnail sidebar, including the title and close button, to streamline the UI. Updated Razor logic to control sidebar visibility directly, eliminating the need for `.pdf-thumbnails--visible`. Deleted associated CSS styles for the removed elements. Retained scrolling and padding styles for the thumbnail content.
Refactor the PDF thumbnail sidebar to use Razor logic for dynamic visibility control, removing reliance on CSS-based toggling. Updated the `pdf-thumbnails` layout to use `relative` positioning and improved its integration with the viewer structure. Introduced a new `pdf-canvas-wrapper` for better styling, scrolling, and alignment of the main PDF canvas.
Enhanced responsiveness by adjusting `pdf-thumbnails`, `pdf-thumbnails__content`, and `pdf-toolbar` styles for smaller screens. Deprecated the `pdf-thumbnails--visible` class and removed redundant CSS properties to simplify the codebase. Updated the `pdf-frame` layout to use a column-based flexbox for better alignment.
These changes improve maintainability, responsiveness, and the overall user experience of the `EnvelopeViewer` component.
Introduced a PDF thumbnail sidebar in `EnvelopeViewer.razor` to enhance navigation between pages. Added a toggle button to show/hide the sidebar and implemented dynamic thumbnail rendering for all pages.
Updated `envelope-viewer.css` with styles for the sidebar, including hover/active states, transitions, and mobile responsiveness.
Enhanced `pdf-viewer.js` with a `renderThumbnail` method to render page previews on canvas elements. Added error handling for non-critical thumbnail rendering issues.
Improved user experience by providing an intuitive way to preview and navigate PDF pages.
The PDF toolbar in `EnvelopeViewer.razor` has been redesigned to improve usability and functionality. Key changes include:
- Added buttons for page navigation, zooming, and preset zoom levels.
- Introduced a zoom slider and page input field for direct control.
- Added "Fit to Width" and "Set Zoom to 100%" features.
- Updated `ZoomIn` and `ZoomOut` methods with boundary checks.
- Added new methods: `SetZoom`, `OnZoomSliderChanged`, `OnPageInputChanged`, and `FitToWidth`.
Styling updates in `envelope-viewer.css` include a modernized toolbar design with rounded corners, shadows, and responsive layouts for smaller screens.
`pdf-viewer.js` was updated with `setScale` and `fitToWidth` methods to support the new functionality. These changes enhance the interactivity, flexibility, and user experience of the PDF viewer.
Updated `.pdf-viewer-container` to vertically center content by changing `align-items` to `center`. Adjusted `.pdf-frame` dimensions to use dynamic height and width, added a maximum width, and centered text alignment. Introduced rounded corners to the gradient bar with a `border-radius`. Changed `.pdf-canvas` to `inline-block` display with `vertical-align: top`. Further refined `.pdf-frame` layout with slightly different height and width calculations.
Moved inline styles from `EnvelopeViewer.razor` to a new external
CSS file `envelope-viewer.css` for better maintainability and
separation of concerns. Added external JavaScript dependencies
(`pdf.js` and `pdf-viewer.js`) to enable PDF rendering.
Fixed encoding issues in error messages and improved the layout
structure with responsive design rules. Enhanced readability and
usability by organizing styles and ensuring proper localization
support.
