#3 - tracking of the search matches but the scrolling is not perfect yet

addon/components/pdf-js.js

@@ -17,8 +17,37 @@ const {
   run
 } = Ember
 
+function scrollToMatch (pdfViewer, match) {
+  let { pageIdx, matchIdx } = match
+  let page = pdfViewer.getPageView(pageIdx)
+  let { textLayer } = page
+  if (!textLayer) {
+    Ember.Logger.debug(`page ${pageIdx} not ready`)
+    page.div.scrollIntoView()
+    run.later(() => {
+      Ember.Logger.debug('re-running scrollToMatch')
+      scrollToMatch(pdfViewer, match)
+    }, 50)
+  } else {
+    Ember.Logger.debug('ready to scroll right to the match')
+    if (!textLayer.textContent) {
+      Ember.Logger.debug('textLayer.textContent ', textLayer.textContent)
+      Ember.Logger.debug('page->', page)
+      run.later(() => {
+        Ember.Logger.debug('re-running scrollToMatch')
+        scrollToMatch(pdfViewer, match)
+      }, 50)
+    } else {
+      let [{ begin: { divIdx } }] = textLayer.convertMatches([matchIdx], [1])
+      textLayer.textDivs[divIdx].scrollIntoView()
+      // debugger
+    }
+  }
+}
+
 export default Component.extend({
   layout,
+  classNames: [ 'pdf-js' ],
   // Service
   pdfJs: injectService('pdf-js'),
   pdfLib: reads('pdfJs.PDFJS'),
@@ -36,13 +65,21 @@ export default Component.extend({
   pdfFindController: undefined,
   pdfPage: undefined,
   pdfTotalPages: undefined,
+  currentMatch: undefined,
+  currentMatchIdx: undefined,
+  matchTotal: undefined,
+
+  // privates
+  _topMargin: 10,
+  _container: undefined,
 
   // components
   toolbarComponent: 'pdf-js-toolbar',
 
   // initialization
   didInsertElement () {
     let [container] = this.element.getElementsByClassName('pdfViewerContainer')
+    this.set('_container', container)
     let pdfLinkService = new PDFLinkService()
     this.set('pdfLinkService', pdfLinkService)
     let pdfViewer = new PDFViewer({
@@ -60,6 +97,8 @@ export default Component.extend({
       pdfViewer
     })
     this.set('pdfFindController', pdfFindController)
+    Ember.Logger.debug('pdfFindController -> ', pdfFindController)
+    Ember.Logger.debug('pdfViewer -> ', pdfViewer)
     pdfViewer.setFindController(pdfFindController)
     pdfViewer.currentScaleValue = 'page-fit'
 
@@ -72,6 +111,30 @@ export default Component.extend({
       })
     })
 
+    pdfFindController.onUpdateResultsCount = function (total) {
+      run(function () {
+        self.set('matchTotal', total)
+      })
+    }
+    pdfFindController.onUpdateState = function (state, previous, total) {
+      run(function () {
+        if (state !== 0 && state !== 2) { // 0 <=> search found something ; 2 <=> wrapped
+          return
+        }
+        let { pageIdx, matchIdx } = pdfFindController.selected
+        if (matchIdx !== -1 || pageIdx !== -1) {
+          let { pageMatches } = pdfFindController
+          let idx = matchIdx + 1
+          for (let i = 0; i < pageIdx; i++) {
+            idx += pageMatches[i].length
+          }
+          let match = pdfFindController.pageMatches[pageIdx][matchIdx]
+          self.set('currentMatch', match)
+          self.set('currentMatchIdx', idx)
+        }
+      })
+    }
+
     if (this.get('pdf')) {
       this.send('load')
     }
@@ -92,7 +155,6 @@ export default Component.extend({
       }
 
       loadingTask = loadingTask.then((pdfDocument) => {
-        Ember.Logger.debug('pdfDocument loaded -> ', pdfDocument)
         this.set('pdfDocument', pdfDocument)
         let viewer = this.get('pdfViewer')
         viewer.setDocument(pdfDocument)
@@ -116,6 +178,26 @@ export default Component.extend({
         phraseSearch
       })
     },
+    changeSearchResult (changeDirection) {
+      let pdfFindController = this.get('pdfFindController')
+      if (!pdfFindController.state) {
+        return // there is no search going on so let's ignore that call
+      }
+      switch (changeDirection) {
+        case 'prev':
+          pdfFindController.state.findPrevious = true
+          pdfFindController.nextMatch()
+          break
+        case 'next':
+          pdfFindController.state.findPrevious = false
+          pdfFindController.nextMatch()
+          break
+        default:
+          return
+      }
+      let container = this.get('_container')
+      let divMatchPromise = scrollToMatch(this.get('pdfViewer'), pdfFindController.selected)
+    },
     changePage (changePage) {
       let pdfLinkService = this.get('pdfLinkService')
       switch (changePage) {
@@ -129,6 +211,8 @@ export default Component.extend({
           // regular change of page:
           pdfLinkService.page = changePage
       }
+      let pdfViewer = this.get('pdfViewer')
+      pdfViewer.getPageView(pdfLinkService.page - 1).div.scrollIntoView()
     },
     zoom () {
       throw 'not implemented yet'

addon/templates/components/pdf-js.hbs

@@ -1,11 +1,15 @@
 
 {{component toolbarComponent
   changePage=(action 'changePage')
+  changeSearchResult=(action 'changeSearchResult')
   search=(action 'search')
   zoom=(action 'zoom')
   page=pdfPage
   pageTotal=pdfTotalPages
   class="ember-pdf-js toolbar"
+  currentMatch=currentMatch
+  currentMatchIdx=currentMatchIdx
+  matchTotal=matchTotal
 }}
 <div class="pdfViewerContainer">
   <div class="pdfViewer">