@tekkare/romulus 0.1.230 → 0.1.232

package/dist/runtime/components/PdfViewer.vue

@@ -1,294 +0,0 @@
-<!--
-  RmPdfViewer - un PDF affiche dans la page, avec une recherche dans son texte.
-
-  Un PDF pose dans une `<iframe>` passe par le lecteur du navigateur : la page
-  n'a aucune prise dessus, et quand le fichier vient d'un autre domaine elle
-  ne peut meme pas lire son texte. Pour un compte rendu de deux cents pages,
-  la seule recherche possible etait Ctrl+F, que personne ne pense a faire dans
-  un tiroir, et qui ne savait rien des termes deja tapes dans la page.
-
-  Ici le rendu passe par pdf.js : les pages sont dessinees a la demande, une
-  couche de texte se pose dessus, et la barre en tete cherche dans ce texte
-  (surlignage de toutes les occurrences, compteur, precedent / suivant).
-
-  `query` sert de terme de depart, pour ouvrir le document directement sur
-  les passages qui l'ont fait remonter dans une liste de resultats. Une liste
-  cherche chaque terme separement ; une chaine, et tout ce que l'utilisateur
-  tape ensuite, cherche une expression. La recherche ignore la casse et les
-  accents, comme `RmTextHighlight`.
-
-  Le fichier est lu par `fetch` : il doit venir de la meme origine ou d'un
-  serveur qui autorise CORS. Une app qui affiche des documents tiers les fait
-  passer par son propre proxy. Si le fichier ne se lit pas (pas un PDF, CORS,
-  404), le composant emet `error` : a l'appelant de retomber sur une
-  `<iframe>`, qui sait au moins afficher une page HTML.
-
-  pdf.js (~1 Mo avec son worker) n'est charge qu'au montage du composant.
--->
-<script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
-
-const props = withDefaults(defineProps<{
-  /** Adresse du PDF, lue par `fetch`. */
-  src: string
-  /** Terme(s) cherche(s) a l'ouverture. Une liste cherche chaque terme. */
-  query?: string | readonly string[] | null
-  lang?: 'fr' | 'en'
-}>(), {
-  query: null,
-  lang: 'fr',
-})
-
-const emit = defineEmits<{ error: [error: unknown] }>()
-
-const WORDS = {
-  fr: {
-    search: 'Rechercher dans le document',
-    previous: 'Occurrence précédente',
-    next: 'Occurrence suivante',
-    none: 'Aucun résultat',
-    loading: 'Chargement du document…',
-    failed: 'Le document ne s’affiche pas.',
-    count: (current: number, total: number) => `${current} sur ${total}`,
-  },
-  en: {
-    search: 'Search in document',
-    previous: 'Previous match',
-    next: 'Next match',
-    none: 'No match',
-    loading: 'Loading document…',
-    failed: 'The document cannot be displayed.',
-    count: (current: number, total: number) => `${current} of ${total}`,
-  },
-} as const
-
-const words = computed(() => WORDS[props.lang])
-
-const scroller = ref<HTMLDivElement | null>(null)
-const input = ref<HTMLInputElement | null>(null)
-
-const status = ref<'loading' | 'ready' | 'failed'>('loading')
-/** Ce qui est dans le champ. */
-const text = ref('')
-/**
- * Les termes de `query` tant que le champ n'a pas ete retouche : une liste
- * affichee « a b » ne doit pas se chercher comme l'expression « a b ».
- */
-const terms = shallowRef<string[] | null>(null)
-const matches = ref({ current: 0, total: 0 })
-const pending = ref(false)
-
-// Objets pdf.js : hors de la reactivite, Vue n'a rien a y suivre.
-let eventBus: any = null
-let viewer: any = null
-let loadingTask: any = null
-let resizeObserver: ResizeObserver | null = null
-
-function seed() {
-  const q = props.query
-  if (Array.isArray(q)) {
-    const list = q.map(x => String(x).trim()).filter(Boolean)
-    terms.value = list.length > 1 ? list : null
-    text.value = list.join(' ')
-  }
-  else {
-    terms.value = null
-    text.value = String(q ?? '').trim()
-  }
-}
-
-/** Ce que pdf.js cherche : la liste de depart, ou l'expression tapee. */
-const searched = computed<string | string[]>(() => terms.value ?? text.value.trim())
-const hasQuery = computed(() => (Array.isArray(searched.value) ? searched.value.length > 0 : searched.value !== ''))
-
-function find(type: '' | 'again' = '', findPrevious = false) {
-  if (!eventBus) return
-  eventBus.dispatch('find', {
-    source: null,
-    type,
-    query: searched.value,
-    caseSensitive: false,
-    entireWord: false,
-    highlightAll: true,
-    findPrevious,
-    matchDiacritics: false,
-  })
-}
-
-function onInput(event: Event) {
-  text.value = (event.target as HTMLInputElement).value
-  terms.value = null
-  find()
-}
-
-function step(previous: boolean) {
-  if (hasQuery.value) find('again', previous)
-}
-
-function onKeydown(event: KeyboardEvent) {
-  if (event.key !== 'Enter') return
-  event.preventDefault()
-  step(event.shiftKey)
-}
-
-/** Ctrl/Cmd+F dans le lecteur va au champ plutot qu'a la recherche de la page. */
-function onRootKeydown(event: KeyboardEvent) {
-  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'f') {
-    event.preventDefault()
-    input.value?.focus()
-    input.value?.select()
-  }
-}
-
-const countLabel = computed(() => {
-  if (status.value !== 'ready' || !hasQuery.value || pending.value) return ''
-  return matches.value.total
-    ? words.value.count(matches.value.current, matches.value.total)
-    : words.value.none
-})
-
-async function load() {
-  destroy()
-  status.value = 'loading'
-  matches.value = { current: 0, total: 0 }
-  seed()
-  await nextTick()
-  const container = scroller.value
-  if (!container || !props.src) return
-
-  try {
-    const pdfjs: any = await import('pdfjs-dist')
-    // Le visualiseur lit la bibliotheque sur `globalThis` : elle doit etre la
-    // avant son import.
-    ;(globalThis as any).pdfjsLib ??= pdfjs
-    const [{ default: workerSrc }, viewerLib] = await Promise.all([
-      // @ts-ignore import d URL, resolu par Vite cote app
-      import('pdfjs-dist/build/pdf.worker.min.mjs?url'),
-      import('pdfjs-dist/web/pdf_viewer.mjs'),
-      // @ts-ignore feuille de style, resolue par Vite cote app
-      import('pdfjs-dist/web/pdf_viewer.css'),
-    ])
-    pdfjs.GlobalWorkerOptions.workerSrc ||= workerSrc
-
-    const { EventBus, PDFLinkService, PDFFindController, PDFViewer } = viewerLib as any
-    eventBus = new EventBus()
-    const linkService = new PDFLinkService({ eventBus })
-    const findController = new PDFFindController({ eventBus, linkService })
-    viewer = new PDFViewer({
-      container,
-      eventBus,
-      linkService,
-      findController,
-      removePageBorders: true,
-    })
-    linkService.setViewer(viewer)
-
-    eventBus.on('pagesinit', () => {
-      viewer.currentScaleValue = 'page-width'
-      if (hasQuery.value) find()
-    })
-    eventBus.on('updatefindcontrolstate', (e: any) => {
-      pending.value = e.state === 3
-      matches.value = e.matchesCount
-    })
-    eventBus.on('updatefindmatchescount', (e: any) => {
-      matches.value = e.matchesCount
-    })
-
-    loadingTask = pdfjs.getDocument({ url: props.src })
-    const pdf = await loadingTask.promise
-    viewer.setDocument(pdf)
-    linkService.setDocument(pdf)
-    status.value = 'ready'
-
-    resizeObserver = new ResizeObserver(() => {
-      if (viewer?.pagesCount) viewer.currentScaleValue = 'page-width'
-    })
-    resizeObserver.observe(container)
-  }
-  catch (error) {
-    // Une annulation (fermeture pendant le chargement) n'est pas une erreur.
-    if ((error as any)?.name === 'AbortException') return
-    status.value = 'failed'
-    emit('error', error)
-  }
-}
-
-function destroy() {
-  resizeObserver?.disconnect()
-  resizeObserver = null
-  loadingTask?.destroy()
-  loadingTask = null
-  viewer?.cleanup?.()
-  viewer = null
-  eventBus = null
-  if (scroller.value) {
-    const inner = scroller.value.firstElementChild
-    if (inner) inner.innerHTML = ''
-  }
-}
-
-watch(() => props.src, load)
-watch(() => props.query, () => {
-  seed()
-  find()
-})
-onMounted(load)
-onBeforeUnmount(destroy)
-</script>
-
-<template>
-  <div class="rm-pdf-viewer" @keydown="onRootKeydown">
-    <div class="rm-pdf-viewer__bar" role="search">
-      <label class="rm-pdf-viewer__field">
-        <RmIcon name="MagnifyingGlass" :size="14" color="var(--text-muted)" />
-        <input
-          ref="input"
-          class="rm-pdf-viewer__input"
-          type="search"
-          :value="text"
-          :placeholder="words.search"
-          :aria-label="words.search"
-          :disabled="status !== 'ready'"
-          @input="onInput"
-          @keydown="onKeydown"
-        >
-      </label>
-      <span class="rm-pdf-viewer__count" aria-live="polite">{{ countLabel }}</span>
-      <RmButton
-        ghost
-        icon-only
-        size="sm"
-        prefix-icon="CaretUp"
-        :aria-label="words.previous"
-        :title="words.previous"
-        :disabled="!matches.total"
-        @click="step(true)"
-      />
-      <RmButton
-        ghost
-        icon-only
-        size="sm"
-        prefix-icon="CaretDown"
-        :aria-label="words.next"
-        :title="words.next"
-        :disabled="!matches.total"
-        @click="step(false)"
-      />
-    </div>
-
-    <div class="rm-pdf-viewer__frame">
-      <!-- pdf.js exige un conteneur positionne en absolu qui defile, et un
-           enfant `.pdfViewer` ou il pose les pages. -->
-      <div ref="scroller" class="rm-pdf-viewer__scroller">
-        <div class="pdfViewer" />
-      </div>
-      <p v-if="status === 'loading'" class="rm-pdf-viewer__state">{{ words.loading }}</p>
-      <p v-else-if="status === 'failed'" class="rm-pdf-viewer__state">{{ words.failed }}</p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.rm-pdf-viewer{display:flex;flex-direction:column;gap:var(--space-8);height:100%;min-height:60vh}.rm-pdf-viewer__bar{align-items:center;display:flex;gap:var(--space-4)}.rm-pdf-viewer__field{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);display:flex;flex:1;gap:var(--space-8);height:32px;max-width:420px;min-width:0;padding:0 var(--space-12)}.rm-pdf-viewer__field:focus-within{border-color:var(--color-secondary);box-shadow:var(--shadow-focus)}.rm-pdf-viewer__input{background:none;border:none;color:var(--text-primary);flex:1;font-family:var(--font-sans);font-size:var(--font-13);min-width:0;outline:none}.rm-pdf-viewer__input::-moz-placeholder{color:var(--text-muted)}.rm-pdf-viewer__input::placeholder{color:var(--text-muted)}.rm-pdf-viewer__count{color:var(--text-secondary);font-size:var(--font-12);font-variant-numeric:tabular-nums;margin-left:var(--space-8);min-width:80px}.rm-pdf-viewer__frame{background:var(--bg-surface-2);border-radius:var(--radius-8,8px);flex:1;min-height:0;position:relative}.rm-pdf-viewer__scroller{inset:0;overflow:auto;position:absolute;--highlight-bg-color:color-mix(in srgb,var(--color-primary) 30%,transparent);--highlight-selected-bg-color:color-mix(in srgb,var(--color-primary) 65%,transparent)}.rm-pdf-viewer__scroller :deep(.pdfViewer .page){box-shadow:0 2px 8px rgba(var(--shadow-rgb),12%);margin:var(--space-12) auto}.rm-pdf-viewer__state{color:var(--text-secondary);display:grid;font-size:var(--font-13);inset:0;margin:0;place-items:center;position:absolute}
-</style>