bentopdf/src/js/logic/add-watermark.ts

import { showLoader, hideLoader, showAlert } from '../ui.js';
import {
  downloadFile,
  readFileAsArrayBuffer,
  hexToRgb,
} from '../utils/helpers.js';
import { state } from '../state.js';

import {
  PDFDocument as PDFLibDocument,
  rgb,
  degrees,
  StandardFonts,
} from 'pdf-lib';

export function setupWatermarkUI() {
  const watermarkTypeRadios = document.querySelectorAll(
    'input[name="watermark-type"]'
  );
  const textOptions = document.getElementById('text-watermark-options');
  const imageOptions = document.getElementById('image-watermark-options');

  watermarkTypeRadios.forEach((radio) => {
    radio.addEventListener('change', (e) => {
      // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'EventTarg... Remove this comment to see the full error message
      if (e.target.value === 'text') {
        textOptions.classList.remove('hidden');
        imageOptions.classList.add('hidden');
      } else {
        textOptions.classList.add('hidden');
        imageOptions.classList.remove('hidden');
      }
    });
  });

  const opacitySliderText = document.getElementById('opacity-text');
  const opacityValueText = document.getElementById('opacity-value-text');
  const angleSliderText = document.getElementById('angle-text');
  const angleValueText = document.getElementById('angle-value-text');

  // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
  opacitySliderText.addEventListener(
    'input',
    () => (opacityValueText.textContent = opacitySliderText.value)
  );
  // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
  angleSliderText.addEventListener(
    'input',
    () => (angleValueText.textContent = angleSliderText.value)
  );

  const opacitySliderImage = document.getElementById('opacity-image');
  const opacityValueImage = document.getElementById('opacity-value-image');
  const angleSliderImage = document.getElementById('angle-image');
  const angleValueImage = document.getElementById('angle-value-image');

  // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
  opacitySliderImage.addEventListener(
    'input',
    () => (opacityValueImage.textContent = opacitySliderImage.value)
  );
  // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
  angleSliderImage.addEventListener(
    'input',
    () => (angleValueImage.textContent = angleSliderImage.value)
  );
}

export async function addWatermark() {
  // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'Element'.
  const watermarkType = document.querySelector(
    'input[name="watermark-type"]:checked'
  ).value;

  showLoader('Adding watermark...');

  try {
    const pages = state.pdfDoc.getPages();
    let watermarkAsset = null;

    if (watermarkType === 'text') {
      watermarkAsset = await state.pdfDoc.embedFont(StandardFonts.Helvetica);
    } else {
      // 'image'
      // @ts-expect-error TS(2339) FIXME: Property 'files' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
      const imageFile = document.getElementById('image-watermark-input')
        .files[0];
      if (!imageFile)
        throw new Error('Please select an image file for the watermark.');

      const imageBytes = await readFileAsArrayBuffer(imageFile);
      if (imageFile.type === 'image/png') {
        watermarkAsset = await state.pdfDoc.embedPng(imageBytes);
      } else if (imageFile.type === 'image/jpeg') {
        watermarkAsset = await state.pdfDoc.embedJpg(imageBytes);
      } else {
        throw new Error(
          'Unsupported Image. Please use a PNG or JPG for the watermark.'
        );
      }
    }

    for (const page of pages) {
      const { width, height } = page.getSize();

      if (watermarkType === 'text') {
        // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
        const text = document.getElementById('watermark-text').value;
        if (!text.trim())
          throw new Error('Please enter text for the watermark.');

        // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
        const fontSize =
          parseInt(document.getElementById('font-size').value) || 72;
        // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
        const angle =
          parseInt(document.getElementById('angle-text').value) || 0;
        // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
        const opacity =
          parseFloat(document.getElementById('opacity-text').value) || 0.3;
        // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
        const colorHex = document.getElementById('text-color').value;
        const textColor = hexToRgb(colorHex);
        const textWidth = watermarkAsset.widthOfTextAtSize(text, fontSize);

        page.drawText(text, {
          x: (width - textWidth) / 2,
          y: height / 2,
          font: watermarkAsset,
          size: fontSize,
          color: rgb(textColor.r, textColor.g, textColor.b),
          opacity: opacity,
          rotate: degrees(angle),
        });
      } else {
        // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
        const angle =
          parseInt(document.getElementById('angle-image').value) || 0;
        // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
        const opacity =
          parseFloat(document.getElementById('opacity-image').value) || 0.3;

        const scale = 0.5;
        const imgWidth = watermarkAsset.width * scale;
        const imgHeight = watermarkAsset.height * scale;

        page.drawImage(watermarkAsset, {
          x: (width - imgWidth) / 2,
          y: (height - imgHeight) / 2,
          width: imgWidth,
          height: imgHeight,
          opacity: opacity,
          rotate: degrees(angle),
        });
      }
    }

    const newPdfBytes = await state.pdfDoc.save();
    downloadFile(
      new Blob([newPdfBytes], { type: 'application/pdf' }),
      'watermarked.pdf'
    );
  } catch (e) {
    console.error(e);
    showAlert(
      'Error',
      e.message || 'Could not add the watermark. Please check your inputs.'
    );
  } finally {
    hideLoader();
  }
}