Overleaf/services/web/frontend/js/ide/pdfng/directives/pdfViewer.js

import _ from 'lodash'
/* eslint-disable
    node/handle-callback-err,
    max-len,
    new-cap,
    no-return-assign,
    no-sequences,
    no-unused-vars,
*/
// TODO: This file was created by bulk-decaffeinate.
// Fix any style issues and re-enable lint.
/*
 * decaffeinate suggestions:
 * DS101: Remove unnecessary use of Array.from
 * DS102: Remove unnecessary code created because of implicit returns
 * DS103: Rewrite code to no longer use __guard__
 * DS104: Avoid inline assignments
 * DS207: Consider shorter variations of null checks
 * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
 */
import App from '../../../base'
import { captureMessage } from '../../../infrastructure/error-reporter'
import pdfTextLayer from './pdfTextLayer'
import pdfAnnotations from './pdfAnnotations'
import pdfHighlights from './pdfHighlights'
import pdfRenderer from './pdfRenderer'
import pdfPage from './pdfPage'
import pdfSpinner from './pdfSpinner'
App.controller('pdfViewerController', function(
  $scope,
  $q,
  $timeout,
  PDFRenderer,
  $element,
  pdfHighlights,
  pdfSpinner
) {
  this.load = function() {
    // $scope.pages = []

    // Ensure previous document is torn down before loading the next one (to
    // prevent race conditions)
    const documentTearDown =
      $scope.document != null ? $scope.document.destroy() : Promise.resolve()

    return documentTearDown.then(() => {
      $scope.loadCount = $scope.loadCount != null ? $scope.loadCount + 1 : 1
      // TODO need a proper url manipulation library to add to query string
      let url = $scope.pdfSrc
      // add 'pdfng=true' to show that we are using the angular pdfjs viewer
      const queryStringExists = /\?/.test(url)
      url = url + (!queryStringExists ? '?' : '&') + 'pdfng=true'
      // for isolated compiles, load the pdf on-demand because nobody will overwrite it
      const onDemandLoading = true
      $scope.document = new PDFRenderer(url, {
        scale: 1,
        disableAutoFetch: onDemandLoading ? true : undefined,
        navigateFn(ref) {
          // this function captures clicks on the annotation links
          $scope.navigateTo = ref
          return $scope.$apply()
        },
        progressCallback(progress) {
          return $scope.$emit('progress', progress)
        },
        loadedCallback() {
          return $scope.$emit('loaded')
        },
        errorCallback(error) {
          // MissingPDFException is "expected" as the pdf file can be on a
          // CLSI server that has been cycled out.
          // Currently, there is NO error handling to handle this situation,
          // but we plan to add this in the future
          // (https://github.com/overleaf/issues/issues/2985) and this error
          // is causing noise in Sentry so ignore it
          if (!error || error.name !== 'MissingPDFException') {
            captureMessage(`pdfng error ${error}`)
          }
          return $scope.$emit('pdf:error', error)
        },
        pageSizeChangeCallback(pageNum, deltaH) {
          return $scope.$broadcast('pdf:page:size-change', pageNum, deltaH)
        }
      })

      // we will have all the main information needed to start display
      // after the following promise is resolved
      $scope.loaded = $q
        .all({
          numPages: $scope.document.getNumPages(),
          // get size of first page as default @ scale 1
          pdfViewport: $scope.document.getPdfViewport(1, 1)
        })
        .then(function(result) {
          $scope.pdfViewport = result.pdfViewport
          $scope.pdfPageSize = [
            result.pdfViewport.height,
            result.pdfViewport.width
          ]
          // console.log 'resolved q.all, page size is', result
          $scope.$emit('loaded')
          return ($scope.numPages = result.numPages)
        })
        .catch(function(error) {
          $scope.$emit('pdf:error', error)
          return $q.reject(error)
        })

      return $scope.loaded
    })
  }

  this.setScale = (scale, containerHeight, containerWidth) =>
    $scope.loaded
      .then(function() {
        let numScale
        if (scale == null) {
          scale = {}
        }
        if (containerHeight === 0 || containerWidth === 0) {
          numScale = 1
        } else if (scale.scaleMode === 'scale_mode_fit_width') {
          // TODO make this dynamic
          numScale = (containerWidth - 40) / $scope.pdfPageSize[1]
        } else if (scale.scaleMode === 'scale_mode_fit_height') {
          // TODO magic numbers for jquery ui layout
          numScale = (containerHeight - 20) / $scope.pdfPageSize[0]
        } else if (scale.scaleMode === 'scale_mode_value') {
          numScale = scale.scale
        } else if (scale.scaleMode === 'scale_mode_auto') {
          // TODO
        } else {
          scale.scaleMode = 'scale_mode_fit_width'
          numScale = (containerWidth - 40) / $scope.pdfPageSize[1]
        }
        // TODO
        $scope.scale.scale = numScale
        $scope.document.setScale(numScale)
        return ($scope.defaultPageSize = [
          numScale * $scope.pdfPageSize[0],
          numScale * $scope.pdfPageSize[1]
        ])
      })
      // console.log 'in setScale result', $scope.scale.scale, $scope.defaultPageSize
      .catch(function(error) {
        $scope.$emit('pdf:error', error)
        return $q.reject(error)
      })

  this.redraw = function(position) {
    // console.log 'in redraw'
    // console.log 'reseting pages array for', $scope.numPages
    $scope.pages = __range__(0, $scope.numPages - 1, true).map(i => ({
      pageNum: i + 1
    }))
    if (position != null && position.page != null) {
      // console.log 'position is', position.page, position.offset
      // console.log 'setting current page', position.page
      let pagenum = position.page
      if (pagenum > $scope.numPages - 1) {
        pagenum = $scope.numPages - 1
      }
      $scope.pages[pagenum].current = true
      return ($scope.pages[pagenum].position = position)
    }
  }

  this.zoomIn = function() {
    // console.log 'zoom in'
    const newScale = $scope.scale.scale * 1.2
    return ($scope.forceScale = {
      scaleMode: 'scale_mode_value',
      scale: newScale
    })
  }

  this.zoomOut = function() {
    // console.log 'zoom out'
    const newScale = $scope.scale.scale / 1.2
    return ($scope.forceScale = {
      scaleMode: 'scale_mode_value',
      scale: newScale
    })
  }

  this.fitWidth = () =>
    // console.log 'fit width'
    ($scope.forceScale = { scaleMode: 'scale_mode_fit_width' })

  this.fitHeight = () =>
    // console.log 'fit height'
    ($scope.forceScale = { scaleMode: 'scale_mode_fit_height' })

  this.checkPosition = () =>
    // console.log 'check position'
    ($scope.forceCheck = ($scope.forceCheck || 0) + 1)

  this.showRandomHighlights = () =>
    // console.log 'show highlights'
    ($scope.highlights = [
      {
        page: 3,
        h: 100,
        v: 100,
        height: 30,
        width: 200
      }
    ])

  // we work with (pagenumber, % of height down page from top)
  // pdfListView works with (pagenumber, vertical position up page from
  // bottom measured in pts)

  this.getPdfPosition = function() {
    // console.log 'in getPdfPosition'
    let canvasOffset, pdfOffset, viewport
    let topPageIdx = 0
    let topPage = $scope.pages[0]
    // find first visible page
    const visible = $scope.pages.some(function(page, i) {
      if (page.visible) {
        let ref
        return ([topPageIdx, topPage] = Array.from((ref = [i, page]))), ref
      }
    })
    if (visible && topPage.element != null) {
      // console.log 'found it', topPageIdx
    } else {
      // console.log 'CANNOT FIND TOP PAGE'
      return
    }

    // console.log 'top page is', topPage.pageNum, topPage.elemTop, topPage.elemBottom, topPage
    const { top } = topPage.element.offset()
    const bottom = top + topPage.element.innerHeight()
    const viewportTop = $element.offset().top
    const viewportBottom = viewportTop + $element.height()
    const topVisible = top >= viewportTop && top < viewportBottom
    const someContentVisible = top < viewportTop && bottom > viewportTop
    // console.log 'in PdfListView', top, topVisible, someContentVisible, viewportTop
    if (topVisible) {
      canvasOffset = 0
    } else if (someContentVisible) {
      canvasOffset = viewportTop - top
    } else {
      canvasOffset = null
    }
    // console.log 'pdfListview position = ', canvasOffset
    // instead of using promise, check if size is known and revert to
    // default otherwise
    // console.log 'looking up viewport', topPage.viewport, $scope.pdfViewport
    if (topPage.viewport) {
      ;({ viewport } = topPage)
      pdfOffset = viewport.convertToPdfPoint(0, canvasOffset)
    } else {
      // console.log 'WARNING: had to default to global page size'
      viewport = $scope.pdfViewport
      const scaledOffset = canvasOffset / $scope.scale.scale
      pdfOffset = viewport.convertToPdfPoint(0, scaledOffset)
    }
    // console.log 'converted to offset = ', pdfOffset
    const newPosition = {
      page: topPageIdx,
      offset: { top: pdfOffset[1], left: 0 },
      pageSize: { height: viewport.viewBox[3], width: viewport.viewBox[2] }
    }
    return newPosition
  }

  this.computeOffset = function(page, position) {
    // console.log 'computing offset for', page, position
    const { element } = page
    // console.log 'element =', $(element), 'parent =', $(element).parent()
    const t1 = __guard__($(element).offset(), x => x.top)
    const t2 = __guard__(
      $(element)
        .parent()
        .offset(),
      x1 => x1.top
    )
    if (!(t1 != null && t2 != null)) {
      return $q((resolve, reject) => reject('elements destroyed'))
    }
    const pageTop =
      $(element).offset().top -
      $(element)
        .parent()
        .offset().top
    // console.log('top of page scroll is', pageTop, 'vs', page.elemTop)
    // console.log('inner height is', $(element).innerHeight())
    const currentScroll = $(element)
      .parent()
      .scrollTop()
    const { offset } = position
    // convert offset to pixels
    return $scope.document
      .getPdfViewport(page.pageNum)
      .then(function(viewport) {
        page.viewport = viewport
        const pageOffset = viewport.convertToViewportPoint(
          offset.left,
          offset.top
        )
        // if the passed-in position doesn't have the page height/width add them now
        if (position.pageSize == null) {
          position.pageSize = {
            height: viewport.viewBox[3],
            width: viewport.viewBox[2]
          }
        }
        // console.log 'addition offset =', pageOffset
        // console.log 'total', pageTop + pageOffset[1]
        return Math.round(pageTop + pageOffset[1] + currentScroll)
      }) // # 10 is margin
  }

  this.setPdfPosition = function(page, position) {
    // console.log 'required pdf Position is', position
    return this.computeOffset(page, position).then(function(offset) {
      return $scope.$apply(() => {
        $scope.pleaseScrollTo = offset
        $scope.position = position
      })
    })
  }
  return this
})

export default App.directive('pdfViewer', ($q, $timeout, pdfSpinner) => ({
  controller: 'pdfViewerController',
  controllerAs: 'ctrl',
  scope: {
    pdfSrc: '=',
    highlights: '=',
    position: '=',
    scale: '=',
    pleaseJumpTo: '='
  },
  template: `\
<div data-pdf-page class='pdf-page-container page-container' ng-repeat='page in pages'></div>\
`,
  link(scope, element, attrs, ctrl) {
    // console.log 'in pdfViewer element is', element
    // console.log 'attrs', attrs
    const spinner = new pdfSpinner()
    let layoutReady = $q.defer()
    layoutReady.notify('waiting for layout')
    layoutReady.promise.then(function() {})
    // console.log 'layoutReady was resolved'

    const renderVisiblePages = function() {
      const visiblePages = getVisiblePages()
      const pages = getExtraPages(visiblePages)
      return scope.document.renderPages(pages)
    }

    var getVisiblePages = function() {
      const top = element[0].scrollTop
      const bottom = top + element[0].clientHeight
      const visiblePages = _.filter(scope.pages, function(page) {
        if (page.element == null) {
          return false
        }
        const pageElement = page.element[0]
        const pageTop = pageElement.offsetTop
        const pageBottom = pageTop + pageElement.clientHeight
        page.visible = pageTop < bottom && pageBottom > top
        return page.visible
      })
      return visiblePages
    }

    var getExtraPages = function(visiblePages) {
      const extra = []
      if (visiblePages.length > 0) {
        const firstVisiblePage = visiblePages[0].pageNum
        const firstVisiblePageIdx = firstVisiblePage - 1
        const len = visiblePages.length
        const lastVisiblePage = visiblePages[len - 1].pageNum
        const lastVisiblePageIdx = lastVisiblePage - 1
        // first page after
        if (lastVisiblePageIdx + 1 < scope.pages.length) {
          extra.push(scope.pages[lastVisiblePageIdx + 1])
        }
        // page before
        if (firstVisiblePageIdx > 0) {
          extra.push(scope.pages[firstVisiblePageIdx - 1])
        }
        // second page after
        if (lastVisiblePageIdx + 2 < scope.pages.length) {
          extra.push(scope.pages[lastVisiblePageIdx + 2])
        }
      }
      return visiblePages.concat(extra)
    }

    let rescaleTimer = null
    const queueRescale = function(scale) {
      // console.log 'call to queueRescale'
      if (rescaleTimer != null || layoutTimer != null || elementTimer != null) {
        return
      }
      // console.log 'adding to rescale queue'
      return (rescaleTimer = setTimeout(function() {
        doRescale(scale)
        return (rescaleTimer = null)
      }, 0))
    }

    let spinnerTimer = null
    var doRescale = function(scale) {
      // console.log 'doRescale', scale
      if (scale == null) {
        return
      }
      const origposition = angular.copy(scope.position)
      // console.log 'origposition', origposition

      if (spinnerTimer == null) {
        spinnerTimer = setTimeout(function() {
          spinner.add(element)
          return (spinnerTimer = null)
        }, 100)
      }
      return layoutReady.promise.then(function(parentSize) {
        const [h, w] = Array.from(parentSize)
        // console.log 'in promise', h, w
        return ctrl
          .setScale(scale, h, w)
          .then(() =>
            // console.log 'in setscale then', scale, h, w
            scope.$evalAsync(function() {
              if (spinnerTimer) {
                clearTimeout(spinnerTimer)
              } else {
                spinner.remove(element)
              }
              // stop displaying the text layer
              element.removeClass('pdfjs-viewer-show-text')
              ctrl.redraw(origposition)
              $timeout(renderVisiblePages)
              return (scope.loadSuccess = true)
            })
          )
          .catch(error => scope.$emit('pdf:error', error))
      })
    }

    var elementTimer = null
    var updateLayout = function() {
      // if element is zero-sized keep checking until it is ready
      // console.log 'checking element ready', element.height(), element.width()
      if (element.height() === 0 || element.width() === 0) {
        if (elementTimer != null) {
          return
        }
        return (elementTimer = setTimeout(function() {
          elementTimer = null
          return updateLayout()
        }, 1000))
      } else {
        scope.parentSize = [element.innerHeight(), element.innerWidth()]
        // console.log 'resolving layoutReady with', scope.parentSize
        return $timeout(function() {
          layoutReady.resolve(scope.parentSize)
          return scope.$emit('flash-controls')
        })
      }
    }

    var layoutTimer = null
    const queueLayout = function() {
      // console.log 'call to queue layout'
      if (layoutTimer != null) {
        return
      }
      // console.log 'added to queue layoyt'
      layoutReady = $q.defer()
      return (layoutTimer = setTimeout(function() {
        // console.log 'calling update layout'
        updateLayout()
        // console.log 'setting layout timer to null'
        return (layoutTimer = null)
      }, 0))
    }

    queueLayout()

    // scope.$on 'layout:pdf:view', (e, args) ->
    //	console.log 'pdf view change', element, e, args
    //	queueLayout()

    scope.$on('layout:main:resize', () =>
      // console.log 'GOT LAYOUT-MAIN-RESIZE EVENT'
      queueLayout()
    )

    scope.$on('layout:pdf:resize', () =>
      // FIXME we get this event twice
      // also we need to start a new layout when we get it
      // console.log 'GOT LAYOUT-PDF-RESIZE EVENT'
      queueLayout()
    )

    scope.$on('pdf:error', function(event, error) {
      if (error.name === 'RenderingCancelledException') {
        return
      }
      // check if too many retries or file is missing
      const message = (error != null ? error.message : undefined) || error
      if (
        scope.loadCount > 3 ||
        /^Missing PDF/i.test(message) ||
        /^loading/i.test(message)
      ) {
        scope.$emit('pdf:error:display')
        return
      }
      if (scope.loadSuccess) {
        return ctrl
          .load()
          .then(
            () =>
              // trigger a redraw
              (scope.scale = angular.copy(scope.scale))
          )
          .catch(error => scope.$emit('pdf:error:display'))
      } else {
        scope.$emit('pdf:error:display')
      }
    })

    scope.$on('pdf:page:size-change', function(event, pageNum, delta) {
      // console.log 'page size change event', pageNum, delta
      const origposition = angular.copy(scope.position)
      // console.log 'orig position', JSON.stringify(origposition)
      if (
        origposition != null &&
        pageNum - 1 < origposition.page &&
        delta !== 0
      ) {
        const currentScrollTop = element.scrollTop()
        // console.log 'adjusting scroll from', currentScrollTop, 'by', delta
        scope.adjustingScroll = true
        return element.scrollTop(currentScrollTop + delta)
      }
    })

    element.on('mousedown', function(e) {
      // We're checking that the event target isn't the directive root element
      // to make sure that the click was within a PDF page - no point in showing
      // the text layer when the click is outside.
      // If the user clicks a PDF page, the mousedown target will be the canvas
      // element (or the text layer one). Alternatively, if the event target is
      // the root element, we can assume that the user has clicked either the
      // grey background area or the scrollbars.
      if (e.target !== element[0] && !_hasSelection()) {
        element.addClass('pdfjs-viewer-show-text')
        return _setMouseUpHandler()
      }
    })

    let mouseUpHandler = null // keep track of the handler to avoid adding multiple times

    var _setMouseUpHandler = function() {
      if (mouseUpHandler == null) {
        return (mouseUpHandler = $(document.body).one(
          'mouseup',
          _handleSelectionMouseUp
        ))
      }
    }

    var _handleSelectionMouseUp = function() {
      mouseUpHandler = null // reset handler, has now fired
      window.setTimeout(function() {
        const removedClass = _removeClassIfNoSelection()
        // if we still have a selection we need to keep the handler going
        if (!removedClass) {
          return _setMouseUpHandler()
        }
      }, 10)
      return true
    }

    var _removeClassIfNoSelection = function() {
      if (_hasSelection()) {
        return false // didn't remove the text layer
      } else {
        element.removeClass('pdfjs-viewer-show-text')
        return true
      }
    }

    var _hasSelection = function() {
      const selection =
        typeof window.getSelection === 'function'
          ? window.getSelection()
          : undefined
      // check the selection collapsed state in preference to
      // using selection.toString() as the latter is "" when
      // the selection is hidden (e.g. while viewing logs)
      return (
        selection != null &&
        _isSelectionWithinPDF(selection) &&
        !selection.isCollapsed
      )
    }

    var _isSelectionWithinPDF = function(selection) {
      if (selection.rangeCount === 0) {
        return false
      }
      const selectionAncestorNode = selection.getRangeAt(0)
        .commonAncestorContainer
      return (
        element.find(selectionAncestorNode).length > 0 ||
        element.is(selectionAncestorNode)
      )
    }

    element.on('scroll', function() {
      // console.log 'scroll event', element.scrollTop(), 'adjusting?', scope.adjustingScroll
      // scope.scrollPosition = element.scrollTop()
      if (scope.adjustingScroll) {
        renderVisiblePages()
        scope.adjustingScroll = false
        return
      }
      if (scope.scrollHandlerTimeout) {
        clearTimeout(scope.scrollHandlerTimeout)
      }
      return (scope.scrollHandlerTimeout = setTimeout(scrollHandler, 25))
    })

    var scrollHandler = function() {
      renderVisiblePages()
      const newPosition = ctrl.getPdfPosition()
      if (newPosition != null) {
        scope.position = newPosition
      }
      return (scope.scrollHandlerTimeout = null)
    }

    scope.$watch('pdfSrc', function(newVal, oldVal) {
      // console.log 'loading pdf', newVal, oldVal
      if (newVal == null) {
        return
      }
      scope.loadCount = 0 // new pdf, so reset load count
      scope.loadSuccess = false
      return ctrl
        .load()
        .then(
          () =>
            // trigger a redraw
            (scope.scale = angular.copy(scope.scale))
        )
        .catch(error => scope.$emit('pdf:error', error))
    })

    scope.$watch('scale', function(newVal, oldVal) {
      // no need to set scale when initialising, done in pdfSrc
      if (newVal === oldVal) {
        return
      }
      // console.log 'XXX calling Setscale in scale watch'
      return queueRescale(newVal)
    })

    scope.$watch('forceScale', function(newVal, oldVal) {
      // console.log 'got change in numscale watcher', newVal, oldVal
      if (newVal == null) {
        return
      }
      return queueRescale(newVal)
    })

    //				scope.$watch 'position', (newVal, oldVal) ->
    //					console.log 'got change in position watcher', newVal, oldVal

    scope.$watch('forceCheck', function(newVal, oldVal) {
      // console.log 'forceCheck', newVal, oldVal
      if (newVal == null) {
        return
      }
      scope.adjustingScroll = true // temporarily disable scroll
      return queueRescale(scope.scale)
    })

    scope.$watch(
      'parentSize',
      function(newVal, oldVal) {
        // console.log 'XXX in parentSize watch', newVal, oldVal
        // if newVal == oldVal
        // 	console.log 'returning because old and new are the same'
        // 	return
        // return unless oldVal?
        // console.log 'XXX calling setScale in parentSize watcher'
        if (newVal == null) {
          return
        }
        return queueRescale(scope.scale)
      },
      true
    )

    // scope.$watch 'elementWidth', (newVal, oldVal) ->
    // 	console.log '*** watch INTERVAL element width is', newVal, oldVal

    scope.$watch('pleaseScrollTo', function(newVal, oldVal) {
      // console.log 'got request to ScrollTo', newVal, 'oldVal', oldVal
      if (newVal == null) {
        return
      }
      scope.adjustingScroll = true // temporarily disable scroll
      // handler while we reposition
      $(element).scrollTop(newVal)
      return (scope.pleaseScrollTo = undefined)
    })

    scope.$watch('pleaseJumpTo', function(newPosition, oldPosition) {
      // console.log 'in pleaseJumpTo', newPosition, oldPosition
      if (newPosition == null) {
        return
      }
      return ctrl.setPdfPosition(scope.pages[newPosition.page - 1], newPosition)
    })

    scope.$watch('navigateTo', function(newVal, oldVal) {
      if (newVal == null) {
        return
      }
      // console.log 'got request to navigate to', newVal, 'oldVal', oldVal
      scope.navigateTo = undefined
      // console.log 'navigate to', newVal
      // console.log 'look up page num'
      return scope.document.getDestination(newVal.dest).then(r =>
        // console.log 'need to go to', r
        // console.log 'page ref is', r[0]
        scope.document.getPageIndex(r[0]).then(function(pidx) {
          // console.log 'page num is', pidx
          const page = scope.pages[pidx]
          return scope.document
            .getPdfViewport(page.pageNum)
            .then(function(viewport) {
              // console.log 'got viewport', viewport
              const coords = viewport.convertToViewportPoint(r[2], r[3])
              // console.log	'viewport position', coords
              // console.log 'r is', r, 'r[1]', r[1], 'r[1].name', r[1].name
              if (r[1].name === 'XYZ') {
                // console.log 'XYZ:', r[2], r[3]
                const newPosition = {
                  page: pidx,
                  offset: { top: r[3], left: r[2] }
                }
                return ctrl.setPdfPosition(scope.pages[pidx], newPosition)
              }
            })
        })
      )
    }) // XXX?

    scope.$watch('highlights', function(areas) {
      // console.log 'got HIGHLIGHTS in pdfViewer', areas
      if (areas == null) {
        return
      }
      // console.log 'areas are', areas
      const highlights = Array.from(areas || []).map(area => ({
        page: area.page - 1,
        highlight: {
          left: area.h,
          top: area.v,
          height: area.height,
          width: area.width
        }
      }))
      // console.log 'highlights', highlights

      if (!highlights.length) {
        return
      }

      scope.$broadcast('pdf:highlights', areas)

      const first = highlights[0]

      // switching between split and full pdf views can cause
      // highlights to appear before rendering
      if (!scope.pages) {
        return // ignore highlight scroll if still rendering
      }

      const pageNum =
        scope.pages[first.page] != null
          ? scope.pages[first.page].pageNum
          : undefined

      if (pageNum == null) {
        return // ignore highlight scroll if page not found
      }

      // use a visual offset of 72pt to match the offset in PdfController syncToCode
      return scope.document.getPdfViewport(pageNum).then(function(viewport) {
        const position = {
          page: first.page,
          offset: {
            left: first.highlight.left,
            top:
              viewport.viewBox[3] -
              first.highlight.top +
              first.highlight.height +
              72
          }
        }
        return ctrl.setPdfPosition(scope.pages[first.page], position)
      })
    })

    return scope.$on('$destroy', function() {
      // console.log 'handle pdfng directive destroy'
      if (elementTimer != null) {
        clearTimeout(elementTimer)
      }
      if (layoutTimer != null) {
        clearTimeout(layoutTimer)
      }
      if (rescaleTimer != null) {
        clearTimeout(rescaleTimer)
      }
      if (spinnerTimer != null) {
        return clearTimeout(spinnerTimer)
      }
    })
  }
}))

function __range__(left, right, inclusive) {
  let range = []
  let ascending = left < right
  let end = !inclusive ? right : ascending ? right + 1 : right - 1
  for (let i = left; ascending ? i < end : i > end; ascending ? i++ : i--) {
    range.push(i)
  }
  return range
}
function __guard__(value, transform) {
  return typeof value !== 'undefined' && value !== null
    ? transform(value)
    : undefined
}