import { useRef } from 'react';
import { PDFAtelier, type PDFAtelierRef } from '@innosoft/pdf-atelier-react';

export default function SignatureExample() {
  const pdfRef = useRef<PDFAtelierRef>(null);

  const addSignatureStamp = async () => {
    await pdfRef.current?.insertImage('/signature.png', {
      x: 450,
      y: 100,
      width: 80,
      height: 40,
      resizable: false,
      draggable: false,
      deletable: false,
      rotatable: false,
    });
  };

  const addApproveBadge = async () => {
    await pdfRef.current?.insertImage(
      '/approved.png',
      {
        x: 500,
        y: 700,
        width: 60,
        height: 60,
        resizable: false,
        draggable: true,
        deletable: true,
        rotatable: false,
      },
      1,
    );
  };

  return (
    <>
      <button onClick={addSignatureStamp}>Add Signature</button>
      <button onClick={addApproveBadge}>Add Approval Badge</button>
      <PDFAtelier
        ref={pdfRef}
        src="/contract.pdf"
        license="My License"
        showImage={true}
      />
    </>
  );
}

import { Component, ViewChild } from '@angular/core';
import {
  PdfAtelierWrapper,
  type InsertImageOptions,
} from '@innosoft/pdf-atelier-angular';

@Component({
  standalone: true,
  selector: 'app-logo-stamper',
  imports: [PdfAtelierWrapper],
  template: `
    <button (click)="addCompanyLogo()">Add Company Logo</button>
    <button (click)="addWatermark()">Add Watermark</button>
    <pdf-atelier-wrapper
      [src]="'/document.pdf'"
      [license]="'My License'"
      [showImage]="true"
    ></pdf-atelier-wrapper>
  `,
})
export class LogoStamperComponent {
  @ViewChild(PdfAtelierWrapper) pdfAtelier!: PdfAtelierWrapper;

  async addCompanyLogo() {
    const logoOptions: InsertImageOptions = {
      x: 40,
      y: 750,
      width: 100,
      height: 50,
      resizable: false,
      draggable: false,
      deletable: false,
      rotatable: false,
    };
    await this.pdfAtelier.insertImage('/logo.png', logoOptions);
  }

  async addWatermark() {
    const watermarkOptions: InsertImageOptions = {
      x: 200,
      y: 400,
      width: 250,
      height: 100,
      resizable: true,
      draggable: true,
      deletable: true,
      rotatable: true,
    };
    await this.pdfAtelier.insertImage('/watermark.png', watermarkOptions);
  }
}

<script setup lang="ts">
import { ref } from 'vue';
import PdfAtelierWrapper, {
  type InsertImageOptions,
} from '@innosoft/pdf-atelier-vue';

interface PdfAtelierExposed {
  insertImage(
    src: string,
    options?: InsertImageOptions,
    pageNumber?: number,
  ): Promise<void>;
}

const pdfRef = ref<PdfAtelierExposed | null>(null);
const logoUrl = ref('/logo.png');
const imageX = ref(40);
const imageY = ref(750);

const insertCustomImage = async () => {
  const options: InsertImageOptions = {
    x: imageX.value,
    y: imageY.value,
    width: 100,
    height: 50,
    resizable: true,
    draggable: true,
    deletable: true,
    rotatable: true,
  };
  await pdfRef.value?.insertImage(logoUrl.value, options);
};
</script>

<template>
  <div>
    <input v-model="logoUrl" placeholder="Image URL" />
    <input v-model.number="imageX" type="number" placeholder="X position" />
    <input v-model.number="imageY" type="number" placeholder="Y position" />
    <button @click="insertCustomImage">Insert Image</button>

    <PdfAtelierWrapper
      ref="pdfRef"
      :src="'/document.pdf'"
      :license="'My License'"
      :showImage="true"
    />
  </div>
</template>