diora-web/static/js/app/58-pdf.js

'use strict';

// ---------------------------------------------------------------------------
// The PDF reader: one document, shown either scrolling (every page has its
// place, only those near the view are drawn) or page by page, cropped to the
// page's text (66-pdf-paginated.js). Whichever, a page is drawn only through
// _pdfDraw: one drawing at a time per canvas, sharp at the device's pixel
// ratio but never larger than PDF_MAX_PIXELS.
// ---------------------------------------------------------------------------

// pdf.js's own viewer caps a canvas at this many pixels: beyond it phones run out of memory.
const PDF_MAX_PIXELS = 16777216;

// One pdf.js worker for every document (the reader, covers, uploads): starting one takes a
// moment — on an e-reader a long one.
let _pdfWorker = null;

function _pdfSharedWorker() {
  if (!_pdfWorker && typeof pdfjsLib !== 'undefined' && pdfjsLib.PDFWorker) {
    try { _pdfWorker = new pdfjsLib.PDFWorker(); } catch (e) { _pdfWorker = null; }
  }
  return _pdfWorker;
}

/** pdf.js's loading task for [bytes] (a Uint8Array), on the shared worker. */
function _pdfLoad(bytes) {
  const worker = _pdfSharedWorker();
  return pdfjsLib.getDocument(worker ? {data: bytes, worker} : {data: bytes});
}

/**
 * The page (from 1) a destination leads to — a named one or an explicit array, whose page is
 * a reference or, in some files, a plain index. 0 when it leads nowhere.
 */
async function _pdfDestPage(pdf, dest) {
  try {
    if (typeof dest === 'string') dest = await pdf.getDestination(dest);
    if (!dest || dest[0] == null) return 0;
    return (typeof dest[0] === 'number' ? dest[0] : await pdf.getPageIndex(dest[0])) + 1;
  } catch (e) {
    return 0;
  }
}

// The table of contents: all entries resolved at once (one after the other cost a round trip
// to the worker each).
async function _parsePdfOutline(pdf, items, depth) {
  depth = depth || 0;
  const parts = await Promise.all(items.map(async item => {
    let href = '';
    if (item.dest) {
      const n = await _pdfDestPage(pdf, item.dest);
      if (n) href = `#pdf-page-${n}`;
    }
    const kids = item.items && item.items.length ? await _parsePdfOutline(pdf, item.items, depth + 1) : [];
    return [{label: item.title || '(untitled)', href, depth}].concat(kids);
  }));
  return [].concat.apply([], parts);
}

// The document being loaded (pdf.js loading task), so opening can be cancelled.
let _pdfLoadingTask = null;
// The open document's pages and how they are drawn (renderPdf; stopped on the next one).
let _pdfView = null;
// Backwards name: the reader stops "the lazy drawing" when a book closes.
let _pdfLazy = null;

// The open document's text, page by page (pdf.js text content): for the text layer, the
// search and the crop to the text box. Kept for the document, not for one layout of it.
let _pdfTexts = null;

function _pdfPageText(pdf, num) {
  if (!_pdfTexts || _pdfTexts.pdf !== pdf) _pdfTexts = {pdf, pages: new Map()};
  let p = _pdfTexts.pages.get(num);
  if (!p) {
    p = pdf.getPage(num).then(page => page.getTextContent()).catch(() => ({items: [], styles: {}}));
    _pdfTexts.pages.set(num, p);
  }
  return p;
}

/**
 * A page's text as one string, lower case, for searching — with where each item (each span of
 * the text layer, in order) starts in it. Lines ending inside it get a space.
 */
function _pdfPageString(tc) {
  if (tc._diora) return tc._diora;
  let str = '';
  const starts = [];
  for (const item of tc.items) {
    starts.push(str.length);
    str += item.str || '';
    if (item.hasEOL) str += ' ';
  }
  tc._diora = {str: str.toLowerCase(), starts};
  return tc._diora;
}

// Internal links followed, the pages they were followed from (the back button).
let _pdfBackStack = [];

/** The document is gone (another one, or the reader closed): what belonged to it goes too. */
function _pdfForgetDoc() {
  _pdfTexts = null;
  _pdfBackStack = [];
  _pdfShowBack();
  if (typeof _pdfSearchStop === 'function') _pdfSearchStop();
}

async function _pdfFollowDest(dest) {
  const pdf = currentPdfDoc;
  if (!pdf) return;
  const n = await _pdfDestPage(pdf, dest);
  if (!n || pdf !== currentPdfDoc) return;
  const contentEl = $('reader-content');
  const from = readerSettings.pdfPaginated || !contentEl ? pdfCurrentPage : _pdfTopPage(contentEl);
  if (n === from) return;
  _pdfBackStack.push(from);
  pdfGoToPage(n);
  _pdfShowBack();
}

/** The button back to where the last link was followed from (gone when there's none). */
function _pdfShowBack() {
  let btn = document.getElementById('pdf-back-btn');
  const from = _pdfBackStack[_pdfBackStack.length - 1];
  if (!from) {
    if (btn) btn.remove();
    return;
  }
  if (!btn) {
    const overlay = $('reader-overlay');
    if (!overlay) return;
    btn = document.createElement('button');
    btn.id = 'pdf-back-btn';
    btn.type = 'button';
    btn.className = 'btn btn-sm pdf-back-btn';
    btn.addEventListener('click', ev => {
      ev.stopPropagation();
      const page = _pdfBackStack.pop();
      if (page) pdfGoToPage(page);
      _pdfShowBack();
    });
    overlay.appendChild(btn);
  }
  btn.textContent = `← Zurück zu S. ${from}`;
}

/** A page's text layer and links taken off (another scale, or the page let go). */
function _pdfDropLayers(e) {
  if (e.textTask) { try { e.textTask.cancel(); } catch (err) {} }
  e.textTask = null;
  e.textDivs = null;
  e.textInfo = null;
  e.marked = null;
  e.inner.querySelectorAll('.pdf-text-layer, .pdf-link-layer').forEach(el => el.remove());
}

/**
 * Over a drawn page: its text (transparent, to select and copy, and where the search marks
 * go) and its links. After the pixels, so a turn isn't held up by them.
 */
async function _pdfLayers(e, page, viewport, token) {
  const pdf = currentPdfDoc;
  if (!pdf) return;
  let annots = [];
  try { annots = await page.getAnnotations({intent: 'display'}); } catch (err) {}
  if (e.token !== token) return;
  _pdfLinks(e, viewport, annots);
  if (typeof pdfjsLib.renderTextLayer !== 'function') return;
  const text = await _pdfPageText(pdf, e.num);
  if (e.token !== token || !text.items.length) return;
  const layer = document.createElement('div');
  layer.className = 'pdf-text-layer';
  layer.style.setProperty('--scale-factor', viewport.scale);
  e.inner.appendChild(layer);
  const divs = [];
  const task = pdfjsLib.renderTextLayer({textContentSource: text, container: layer, viewport, textDivs: divs});
  e.textTask = task;
  try {
    await task.promise;
  } catch (err) {
    return;
  }
  if (e.token !== token || e.textTask !== task) return;
  e.textTask = null;
  e.textDivs = divs;
  e.textInfo = {items: text.items, string: _pdfPageString(text)};
  if (typeof _pdfSearchMarkPage === 'function') _pdfSearchMarkPage(e);
}

// Links: ones into the document go there (and back, _pdfShowBack); web addresses open outside.
function _pdfLinks(e, viewport, annots) {
  const links = annots.filter(a => a.subtype === 'Link' && (a.url || a.dest));
  if (!links.length) return;
  const layer = document.createElement('div');
  layer.className = 'pdf-link-layer';
  for (const a of links) {
    const r = viewport.convertToViewportRectangle(a.rect);
    const link = document.createElement('a');
    link.className = 'pdf-link';
    link.style.left = Math.min(r[0], r[2]) + 'px';
    link.style.top = Math.min(r[1], r[3]) + 'px';
    link.style.width = Math.abs(r[2] - r[0]) + 'px';
    link.style.height = Math.abs(r[3] - r[1]) + 'px';
    if (a.url) {
      link.href = a.url;
      link.target = '_blank';
      link.rel = 'noopener noreferrer';
      link.title = a.url;
    } else {
      const dest = a.dest;
      link.href = '#';
      link.addEventListener('click', ev => {
        ev.preventDefault();
        ev.stopPropagation();
        _pdfFollowDest(dest);
      });
    }
    layer.appendChild(link);
  }
  e.inner.appendChild(layer);
}

function _pdfStopLazy() {
  const v = _pdfView;
  if (!v) return;
  v.stopped = true;
  if (v.observer) v.observer.disconnect();
  if (v.resize) v.resize.disconnect();
  clearTimeout(v.resizeTimer);
  v.entries.forEach(e => { e.token++; if (e.task) { try { e.task.cancel(); } catch (err) {} } });
  _pdfView = _pdfLazy = null;
}

/**
 * Draw page [page] of entry [e] at [cssScale] (CSS pixels per PDF point). Cancels a drawing
 * of the same canvas still under way (pdf.js refuses two at once) and waits for it to let go.
 * Returns false when a newer drawing (or letting go) came first.
 */
async function _pdfDraw(e, page, cssScale) {
  const token = ++e.token;
  _pdfDropLayers(e);
  const prev = e.task;
  if (prev) {
    try { prev.cancel(); } catch (err) {}
    try { await prev.promise; } catch (err) {}
    if (e.token !== token) return false;
  }
  const viewport = page.getViewport({scale: cssScale});
  let ratio = window.devicePixelRatio || 1;
  const area = viewport.width * viewport.height;
  if (area * ratio * ratio > PDF_MAX_PIXELS) ratio = Math.max(0.5, Math.sqrt(PDF_MAX_PIXELS / area));
  e.canvas.width = Math.round(viewport.width * ratio);
  e.canvas.height = Math.round(viewport.height * ratio);
  e.canvas.style.width = viewport.width + 'px';
  e.canvas.style.height = viewport.height + 'px';
  const task = page.render({
    canvasContext: e.canvas.getContext('2d'),
    viewport,
    transform: ratio !== 1 ? [ratio, 0, 0, ratio, 0, 0] : null,
  });
  e.task = task;
  try {
    await task.promise;
  } catch (err) {
    if (e.task === task) e.task = null;
    if (err && err.name !== 'RenderingCancelledException') console.warn('PDF page', e.num, err);
    return false;
  }
  if (e.task === task) e.task = null;
  if (e.token !== token) return false;
  e.drawn = cssScale;
  _pdfLayers(e, page, viewport, token).catch(err => console.warn('PDF page layers', e.num, err));
  return true;
}

/** Let a page's pixels go (its place stays) and pdf.js forget what it parsed of it. */
function _pdfLetGo(e, pdf) {
  e.token++;
  if (e.task) { try { e.task.cancel(); } catch (err) {} }
  _pdfDropLayers(e);
  e.drawn = 0;
  e.canvas.width = 0;
  e.canvas.height = 0;
  if (pdf) pdf.getPage(e.num).then(p => { if (!e.task) p.cleanup(); }, () => {});
}

/** The page shown at the top of the scrolling view (binary search, the pages are in order). */
function _pdfTopPage(contentEl) {
  const v = _pdfView;
  if (!v || !v.entries.length) return pdfCurrentPage || 1;
  const top = contentEl.getBoundingClientRect().top + 20;
  let lo = 0, hi = v.entries.length - 1;
  while (lo < hi) {
    const mid = (lo + hi) >> 1;
    if (v.entries[mid].wrapper.getBoundingClientRect().bottom > top) hi = mid; else lo = mid + 1;
  }
  return v.entries[lo].num;
}

// Every page gets its place at once (sized like the first page until it is drawn), but only the
// pages near the view are drawn; ones far away are let go again. A book of 1000 scanned pages
// opens as fast as one of ten, and doesn't hold 1000 canvases. Page by page (pdfPaginated),
// 66-pdf-paginated.js shows and draws the pages itself.
async function renderPdf(arrayBuffer, contentEl, scaleOverride, pivotPage) {
  const myGen = ++_pdfRenderGen;
  _pdfStopLazy();
  let pdf = currentPdfDoc;
  if (!pdf) {
    _pdfForgetDoc();
    _pdfLoadingTask = _pdfLoad(new Uint8Array(arrayBuffer.slice(0)));
    try {
      pdf = await _pdfLoadingTask.promise;
    } finally {
      _pdfLoadingTask = null;
    }
  }
  if (_pdfRenderGen !== myGen) return null;
  currentPdfDoc = pdf;

  let pdfTitle = '', pdfAuthor = '';
  try {
    const meta = await pdf.getMetadata();
    pdfTitle = meta.info?.Title?.trim() || '';
    pdfAuthor = meta.info?.Author?.trim() || '';
  } catch (e) {}

  let toc = [];
  try {
    const outline = await pdf.getOutline();
    if (outline && outline.length) toc = await _parsePdfOutline(pdf, outline);
  } catch (e) {}
  if (_pdfRenderGen !== myGen) return null;

  contentEl.innerHTML = '';

  const pdfVp = document.createElement('div');
  pdfVp.id = 'pdf-viewport';
  contentEl.appendChild(pdfVp);

  const containerWidth = readerSettings.pdfSpread
    ? contentEl.clientWidth - 32
    : Math.min(contentEl.clientWidth - 32, 900);
  const pageWidth = readerSettings.pdfSpread ? (containerWidth - 8) / 2 : containerWidth;
  const scaleFor = vp => (scaleOverride != null ? scaleOverride
    : Math.max(0.5, pageWidth / vp.width) * (readerSettings.pdfZoom / 100));

  // The first page's size stands for all until each is drawn (a scan's pages are alike).
  const first = await pdf.getPage(1);
  if (_pdfRenderGen !== myGen) return null;
  const firstVp = first.getViewport({scale: scaleFor(first.getViewport({scale: 1}))});

  const entries = [];
  let spreadContainer = null;
  for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
    const wrapper = document.createElement('div');
    wrapper.className = 'pdf-page-wrapper';
    wrapper.id = `pdf-page-${pageNum}`;
    const inner = document.createElement('div');
    inner.className = 'pdf-page-inner';
    const canvas = document.createElement('canvas');
    canvas.className = 'pdf-page';
    canvas.width = 0;
    canvas.height = 0;
    canvas.style.width = firstVp.width + 'px';
    canvas.style.height = firstVp.height + 'px';
    inner.appendChild(canvas);
    wrapper.appendChild(inner);
    if (!readerSettings.pdfSpread || readerSettings.pdfPaginated) {
      pdfVp.appendChild(wrapper);
    } else if (pageNum === 1) {
      wrapper.classList.add('pdf-spread-cover');
      pdfVp.appendChild(wrapper);
      spreadContainer = null;
    } else {
      if (pageNum % 2 === 0) {
        spreadContainer = document.createElement('div');
        spreadContainer.className = 'pdf-spread-wrapper';
        pdfVp.appendChild(spreadContainer);
      }
      if (spreadContainer) spreadContainer.appendChild(wrapper);
      else pdfVp.appendChild(wrapper);
    }
    entries.push({num: pageNum, wrapper, inner, canvas, drawn: 0, near: false, task: null, token: 0});
  }

  pdfTotalPages = pdf.numPages;
  const pivot = Math.max(1, Math.min(pdf.numPages, pivotPage || 1));

  const view = {pdf, contentEl, entries, gen: myGen, stopped: false, observer: null, resize: null,
                resizeTimer: 0, queue: new Set(), working: false, scaleFor, showToken: 0};
  _pdfView = _pdfLazy = view;
  const gone = () => view.stopped || _pdfRenderGen !== myGen;

  async function draw(e) {
    const page = await pdf.getPage(e.num);
    if (gone() || !e.near || readerSettings.pdfPaginated) return;
    await _pdfDraw(e, page, scaleFor(page.getViewport({scale: 1})));
  }

  // One page at a time, the nearest to the current one first.
  async function work() {
    if (view.working) return;
    view.working = true;
    try {
      while (!gone() && view.queue.size && !readerSettings.pdfPaginated) {
        const cur = _pdfTopPage(contentEl);
        const next = Array.from(view.queue).sort((a, b) => Math.abs(a.num - cur) - Math.abs(b.num - cur))[0];
        view.queue.delete(next);
        if (next.near && !next.drawn) await draw(next);
      }
    } finally {
      view.working = false;
    }
  }

  // Turning the device, a narrower window, the bars coming or going: laid out again at the same page.
  let lastW = contentEl.clientWidth, lastH = contentEl.clientHeight;
  if (typeof ResizeObserver === 'function') {
    view.resize = new ResizeObserver(() => {
      const w = contentEl.clientWidth, h = contentEl.clientHeight;
      if (!w || !h || (w === lastW && h === lastH)) return;
      const widthChanged = Math.abs(w - lastW) > 2;
      lastW = w;
      lastH = h;
      clearTimeout(view.resizeTimer);
      view.resizeTimer = setTimeout(() => {
        if (gone()) return;
        if (readerSettings.pdfPaginated) _pdfShowPage(pdfCurrentPage);
        else if (widthChanged) reRenderPdf(_pdfTopPage(contentEl));
      }, readerSettings.pdfPaginated ? 150 : 300);
    });
    view.resize.observe(contentEl);
  }

  if (readerSettings.pdfPaginated) {
    // Page by page: the pivot page cropped to its text, at once (66-pdf-paginated.js).
    pdfCurrentPage = pivot;
    await _pdfShowPage(pivot);
    if (gone()) return null;
    return {title: pdfTitle, author: pdfAuthor, toc, numPages: pdf.numPages};
  }

  if (pivot > 1) entries[pivot - 1].wrapper.scrollIntoView({block: 'start'});
  pdfCurrentPage = pivot;

  const byEl = new Map(entries.map(e => [e.wrapper, e]));
  if (typeof IntersectionObserver === 'function') {
    view.observer = new IntersectionObserver(items => {
      if (readerSettings.pdfPaginated) return;
      for (const it of items) {
        const e = byEl.get(it.target);
        if (!e) continue;
        e.near = it.isIntersecting;
        if (e.near) { if (!e.drawn) view.queue.add(e); }
        else { view.queue.delete(e); if (e.drawn || e.task) _pdfLetGo(e, pdf); }
      }
      work();
    }, {root: contentEl, rootMargin: '150% 0px'});
    entries.forEach(e => view.observer.observe(e.wrapper));
  } else {
    // Very old WebViews: every page, from the pivot on (as before).
    entries.forEach(e => { e.near = true; view.queue.add(e); });
    work();
  }

  // The book shows as soon as the page it opens at is drawn.
  const pe = entries[pivot - 1];
  pe.near = true;
  if (!pe.drawn) await draw(pe);
  if (gone()) return null;
  return {title: pdfTitle, author: pdfAuthor, toc, numPages: pdf.numPages};
}