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

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

  const clearSelection = () => {
    pdfRef.current?.deselectAll();
  };

  return (
    <>
      <button onClick={clearSelection}>Deselect All Annotations</button>
      <PDFAtelier
        ref={pdfRef}
        src="/document.pdf"
        license="My License"
        showSelect={true}
        showDelete={true}
      />
    </>
  );
}

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

@Component({
  standalone: true,
  selector: 'app-selection-control',
  imports: [PdfAtelierWrapper],
  template: `
    <button (click)="deselectAll()">Clear Selection</button>
    <pdf-atelier-wrapper
      [src]="'/document.pdf'"
      [license]="'My License'"
      [showSelect]="true"
    ></pdf-atelier-wrapper>
  `,
})
export class SelectionControlComponent {
  @ViewChild(PdfAtelierWrapper) pdfAtelier!: PdfAtelierWrapper;

  deselectAll() {
    this.pdfAtelier.deselectAll();
  }
}

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

interface PdfAtelierExposed {
  deselectAll(): void;
}

const pdfRef = ref<PdfAtelierExposed | null>(null);

const clearSelection = () => {
  pdfRef.value?.deselectAll();
};
</script>

<template>
  <div>
    <button @click="clearSelection">Deselect All</button>
    <PdfAtelierWrapper
      ref="pdfRef"
      :src="'/document.pdf'"
      :license="'My License'"
      :showSelect="true"
    />
  </div>
</template>