From 5cd9377bbab3626263f5affdeb2e88b9ff9a7248 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: Thu, 25 Dec 2025 02:27:53 +0100 Subject: [PATCH] [V2] feat(flatten): add optional rendering DPI parameter to settings in flatten (#5276) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Description of Changes This pull request adds support for specifying a custom rendering DPI for PDF flattening, allowing users to control the output sharpness and file size. The changes update the UI to include a new DPI input (when appropriate), extend parameter handling, and ensure the DPI value is passed to the backend if provided. **User interface enhancements:** * Added a `NumberInput` field in `FlattenSettings.tsx` for users to specify the rendering DPI, shown only when "Flatten only forms" is not selected. The input includes label, help text, placeholder, and value constraints. * Updated the English locale file to add translation strings for the rendering DPI input label, help text, and placeholder. **Parameter and data handling:** * Extended the `FlattenParameters` interface and default parameters to include an optional `renderDpi` property. * Modified the form data builder in `useFlattenOperation.ts` to append the `renderDpi` value to the request if specified. * Imported `NumberInput` from the Mantine UI library to support the new DPI input field in the settings component. image --- ## Checklist ### General - [X] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [X] 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) - [X] I have performed a self-review of my own code - [X] 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) - [X] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [X] 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 Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com> --- frontend/public/locales/en-GB/translation.toml | 5 +++++ .../components/tools/flatten/FlattenSettings.tsx | 16 +++++++++++++++- .../hooks/tools/flatten/useFlattenOperation.ts | 3 +++ .../hooks/tools/flatten/useFlattenParameters.ts | 2 ++ 4 files changed, 25 insertions(+), 1 deletion(-) diff --git a/frontend/public/locales/en-GB/translation.toml b/frontend/public/locales/en-GB/translation.toml index a69ed9cdf..3b7797f9e 100644 --- a/frontend/public/locales/en-GB/translation.toml +++ b/frontend/public/locales/en-GB/translation.toml @@ -2389,6 +2389,11 @@ note = "Flattening removes interactive elements from the PDF, making them non-ed label = "Flatten only forms" desc = "Only flatten form fields, leaving other interactive elements intact" +[flatten.renderDpi] +label = "Rendering DPI (optional, recommended 150 DPI)" +help = "Leave blank to use the system default. Higher DPI sharpens output but increases processing time and file size." +placeholder = "e.g. 150" + [flatten.results] title = "Flatten Results" diff --git a/frontend/src/core/components/tools/flatten/FlattenSettings.tsx b/frontend/src/core/components/tools/flatten/FlattenSettings.tsx index ae8b1ecf5..b8e97f8ef 100644 --- a/frontend/src/core/components/tools/flatten/FlattenSettings.tsx +++ b/frontend/src/core/components/tools/flatten/FlattenSettings.tsx @@ -1,4 +1,4 @@ -import { Stack, Text, Checkbox } from "@mantine/core"; +import { Stack, Text, Checkbox, NumberInput } from "@mantine/core"; import { useTranslation } from "react-i18next"; import { FlattenParameters } from "@app/hooks/tools/flatten/useFlattenParameters"; @@ -28,6 +28,20 @@ const FlattenSettings = ({ parameters, onParameterChange, disabled = false }: Fl } /> + + {!parameters.flattenOnlyForms && ( + onParameterChange('renderDpi', value != null && value !== '' ? Number(value) : undefined)} + disabled={disabled} + min={72} + max={2400} + step={50} + /> + )} ); }; diff --git a/frontend/src/core/hooks/tools/flatten/useFlattenOperation.ts b/frontend/src/core/hooks/tools/flatten/useFlattenOperation.ts index f36b9d078..49b83a0bb 100644 --- a/frontend/src/core/hooks/tools/flatten/useFlattenOperation.ts +++ b/frontend/src/core/hooks/tools/flatten/useFlattenOperation.ts @@ -8,6 +8,9 @@ export const buildFlattenFormData = (parameters: FlattenParameters, file: File): const formData = new FormData(); formData.append('fileInput', file); formData.append('flattenOnlyForms', parameters.flattenOnlyForms.toString()); + if (parameters.renderDpi != null) { + formData.append('renderDpi', parameters.renderDpi.toString()); + } return formData; }; diff --git a/frontend/src/core/hooks/tools/flatten/useFlattenParameters.ts b/frontend/src/core/hooks/tools/flatten/useFlattenParameters.ts index af47ab3e1..3a383d674 100644 --- a/frontend/src/core/hooks/tools/flatten/useFlattenParameters.ts +++ b/frontend/src/core/hooks/tools/flatten/useFlattenParameters.ts @@ -3,10 +3,12 @@ import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/u export interface FlattenParameters extends BaseParameters { flattenOnlyForms: boolean; + renderDpi?: number; } export const defaultParameters: FlattenParameters = { flattenOnlyForms: false, + renderDpi: undefined, }; export type FlattenParametersHook = BaseParametersHook;