Watermark

1import { Text as PDFText, StyleSheet, View } from '@react-pdf/renderer';
2import type { Style } from '@react-pdf/types';
3import { usePdfxTheme, useSafeMemo } from '../lib/pdfx-theme-context';
4type PdfxTheme = ReturnType<typeof usePdfxTheme>;
5 
6export type WatermarkPosition =
7  | 'center'
8  | 'top-left'
9  | 'top-right'
10  | 'bottom-left'
11  | 'bottom-right';
12 
13/**
14 * Diagonal watermark overlaid across the full page using absolute positioning.
15 * Props - `text` | `opacity` | `fontSize` | `color` | `angle` | `position` | `fixed` | `style`
16 * @see {@link PdfWatermarkProps}
17 */
18export interface PdfWatermarkProps {
19  /** Custom styles to merge with component defaults */
20  style?: Style;
21  text: string;
22  opacity?: number;
23  fontSize?: number;
24  color?: string;
25  angle?: number;
26  position?: WatermarkPosition;
27  /**
28   * @default true
29   */
30  fixed?: boolean;
31  children?: never;
32}
33 
34const THEME_COLOR_KEYS = ['foreground','muted','mutedForeground','primary','primaryForeground','accent','destructive','success','warning','info'] as const;
35function resolveColor(value: string, colors: Record<string, string>): string {
36  return THEME_COLOR_KEYS.includes(value as (typeof THEME_COLOR_KEYS)[number]) ? colors[value] : value;
37}
38function createWatermarkStyles(t: PdfxTheme) {
39  const { fontWeights } = t.primitives;
40  // Use page margins as corner insets so watermark position adapts to the active theme.
41  const { marginTop, marginBottom, marginLeft, marginRight } = t.spacing.page;
42  return StyleSheet.create({
43    container: {
44      position: 'absolute',
45      top: 0,
46      left: 0,
47      right: 0,
48      bottom: 0,
49      justifyContent: 'center',
50      alignItems: 'center',
51      zIndex: -1,
52      pointerEvents: 'none',
53    },
54    text: {
55      fontFamily: t.typography.heading.fontFamily,
56      fontWeight: fontWeights.bold,
57      textTransform: 'uppercase',
58      letterSpacing: 4,
59    },
60    positionCenter: { justifyContent: 'center', alignItems: 'center' },
61    positionTopLeft: {
62      justifyContent: 'flex-start',
63      alignItems: 'flex-start',
64      paddingTop: marginTop,
65      paddingLeft: marginLeft,
66    },
67    positionTopRight: {
68      justifyContent: 'flex-start',
69      alignItems: 'flex-end',
70      paddingTop: marginTop,
71      paddingRight: marginRight,
72    },
73    positionBottomLeft: {
74      justifyContent: 'flex-end',
75      alignItems: 'flex-start',
76      paddingBottom: marginBottom,
77      paddingLeft: marginLeft,
78    },
79    positionBottomRight: {
80// … truncated