From 1810a12cf3c44692e2a08c78d9805e58aed74ff8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Sz=C3=BCcs?= <127139797+balazs-szucs@users.noreply.github.com> Date: Wed, 24 Dec 2025 23:31:41 +0100 Subject: [PATCH] feat(rotate): add keyboard shortcuts for rotating with arrow keys (#5294) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Description of Changes This pull request adds keyboard shortcut support to the `RotateSettings` component, allowing users to rotate using the left and right arrow keys. This improves accessibility and user experience when interacting with rotation controls. **Enhanced keyboard interaction:** * Added a `useEffect` hook to listen for `ArrowLeft` and `ArrowRight` key presses, triggering the `rotateAnticlockwise` and `rotateClockwise` methods on the `parameters` object, respectively. --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### Translations (if applicable) - [ ] I ran [`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details. Signed-off-by: Balázs Szücs --- .../components/tools/rotate/RotateSettings.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/frontend/src/core/components/tools/rotate/RotateSettings.tsx b/frontend/src/core/components/tools/rotate/RotateSettings.tsx index 2136817ff..9ac4748ae 100644 --- a/frontend/src/core/components/tools/rotate/RotateSettings.tsx +++ b/frontend/src/core/components/tools/rotate/RotateSettings.tsx @@ -31,6 +31,24 @@ const RotateSettings = ({ parameters, disabled = false }: RotateSettingsProps) = // Calculate current angle display const currentAngle = parameters.parameters.angle; + useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === 'ArrowLeft') { + event.preventDefault(); + parameters.rotateAnticlockwise(); + } else if (event.key === 'ArrowRight') { + event.preventDefault(); + parameters.rotateClockwise(); + } + }; + + window.addEventListener('keydown', handleKeyDown); + + return () => { + window.removeEventListener('keydown', handleKeyDown); + }; + }, [parameters]); + return ( {/* Thumbnail Preview Section */}