Feature/v2/watermark (#4215)

Add watermark feature Auto scroll on review --------- Co-authored-by: Connor Yoh <[email protected]>
2026-07-16 19:33:11 +02:00 · 2025-08-19 10:31:44 +01:00
parent acbebd67a3
commit c1b7911518
24 changed files with 1410 additions and 78 deletions
@@ -0,0 +1,83 @@
+import React from "react";
+import { Stack, Checkbox, Group } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AddWatermarkParameters } from "../../../hooks/tools/addWatermark/useAddWatermarkParameters";
+import NumberInputWithUnit from "../shared/NumberInputWithUnit";
+
+interface WatermarkFormattingProps {
+  parameters: AddWatermarkParameters;
+  onParameterChange: (key: keyof AddWatermarkParameters, value: any) => void;
+  disabled?: boolean;
+}
+
+const WatermarkFormatting = ({ parameters, onParameterChange, disabled = false }: WatermarkFormattingProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      {/* Size - single row */}
+      <NumberInputWithUnit
+        label={t('watermark.settings.size', 'Size')}
+        value={parameters.fontSize}
+        onChange={(value) => onParameterChange('fontSize', typeof value === 'number' ? value : 12)}
+        unit={parameters.watermarkType === 'text' ? 'pt' : 'px'}
+        min={1}
+        disabled={disabled}
+      />
+
+      {/* Position & Appearance - 2 per row */}
+      <Group grow align="flex-start">
+        <NumberInputWithUnit
+          label={t('watermark.settings.rotation', 'Rotation')}
+          value={parameters.rotation}
+          onChange={(value) => onParameterChange('rotation', typeof value === 'number' ? value : 0)}
+          unit="°"
+          min={-360}
+          max={360}
+          disabled={disabled}
+        />
+        <NumberInputWithUnit
+          label={t('watermark.settings.opacity', 'Opacity')}
+          value={parameters.opacity}
+          onChange={(value) => onParameterChange('opacity', typeof value === 'number' ? value : 50)}
+          unit="%"
+          min={0}
+          max={100}
+          disabled={disabled}
+        />
+      </Group>
+
+      {/* Spacing - 2 per row */}
+      <Group grow align="flex-start">
+        <NumberInputWithUnit
+          label={t('watermark.settings.spacing.horizontal', 'Horizontal Spacing')}
+          value={parameters.widthSpacer}
+          onChange={(value) => onParameterChange('widthSpacer', typeof value === 'number' ? value : 50)}
+          unit="px"
+          min={0}
+          max={200}
+          disabled={disabled}
+        />
+        <NumberInputWithUnit
+          label={t('watermark.settings.spacing.vertical', 'Vertical Spacing')}
+          value={parameters.heightSpacer}
+          onChange={(value) => onParameterChange('heightSpacer', typeof value === 'number' ? value : 50)}
+          unit="px"
+          min={0}
+          max={200}
+          disabled={disabled}
+        />
+      </Group>
+
+      {/* Advanced Options */}
+      <Checkbox
+        label={t('watermark.settings.convertToImage', 'Flatten PDF pages to images')}
+        checked={parameters.convertPDFToImage}
+        onChange={(event) => onParameterChange('convertPDFToImage', event.currentTarget.checked)}
+        disabled={disabled}
+      />
+    </Stack>
+  );
+};
+
+export default WatermarkFormatting;