PDF anchoring to unrendered pages

h/static/scripts/annotator/anchoring/pdf.coffee

@@ -20,8 +20,8 @@ getNodeTextLayer = (node) ->
   return node.getElementsByClassName('textLayer')[0]
 
 
-getPageTextLayer = (pageIndex) ->
-  return PDFViewerApplication.pdfViewer.pages[pageIndex].textLayer
+getPage = (pageIndex) ->
+  return PDFViewerApplication.pdfViewer.pages[pageIndex]
 
 
 getPageTextContent = (pageIndex) ->
@@ -112,14 +112,27 @@ exports.anchor = (selectors) ->
     promise = promise.catch ->
       findPage(position.start)
       .then(({index, offset}) ->
-        textLayer = getPageTextLayer(index)
+        page = getPage(index)
+        if page.textLayer?.renderingDone
+          root = page.textLayer.textLayerDiv
           start = position.start - offset
           end = position.end - offset
-        root = textLayer.textLayerDiv
           Promise.resolve(TextPositionAnchor.fromSelector({start, end}, {root}))
           .then((a) -> Promise.resolve(a.toRange({root})))
-      )
           .then(assertQuote)
+        else
+          el = page.el
+          placeholder = el.getElementsByClassName('annotator-placeholder')[0]
+          unless placeholder?
+            placeholder = document.createElement('span')
+            placeholder.classList.add('annotator-placeholder')
+            placeholder.textContent = 'Loading annotations…'
+            page.el.appendChild(placeholder)
+          range = document.createRange()
+          range.setStartBefore(placeholder)
+          range.setEndAfter(placeholder)
+          return range
+      )
 
   return promise
 

h/static/scripts/annotator/guest.coffee

@@ -206,9 +206,7 @@ module.exports = class Guest extends Annotator
 
   deleteAnnotation: (annotation) ->
     for info in @anchored when info.annotation is annotation
-      for h in info.highlights when h.parentNode?
-        child = h.childNodes[0]
-        $(h).replaceWith(h.childNodes)
+      highlighter.removeHighlights(info.highlights)
 
     @anchored = (a for a in @anchored when a.annotation isnt annotation)
     @unanchored = (a for a in @unanchored when a.annotation isnt annotation)

h/static/scripts/annotator/highlighter.coffee

@@ -22,3 +22,9 @@ exports.highlightRange = (normedRange, cssClass='annotator-hl') ->
 
   nodes = $(normedRange.textNodes()).filter((i) -> not white.test @nodeValue)
   r = nodes.wrap(hl).parent().show().toArray()
+
+
+exports.removeHighlights = (highlights) ->
+  for h in highlights when h.parentNode?
+    child = h.childNodes[0]
+    $(h).replaceWith(h.childNodes)

h/static/scripts/annotator/plugin/pdf.coffee

@@ -2,6 +2,8 @@ raf = require('raf')
 Promise = require('es6-promise').Promise
 Annotator = require('annotator')
 
+highlighter = require('../highlighter')
+
 
 class PDF extends Annotator.Plugin
   documentPromise: null
@@ -46,8 +48,7 @@ class PDF extends Annotator.Plugin
       return {title, link}
 
   onpagerendered: (event) =>
-    annotator = @annotator
-    unanchored = @annotator.unanchored
+    annotator = {anchored, unanchored} = @annotator
     page = PDFViewerApplication.pdfViewer.pages[event.detail.pageNumber - 1]
 
     waitForTextLayer = ->
@@ -56,6 +57,28 @@ class PDF extends Annotator.Plugin
 
     reanchor = ->
       unanchored = unanchored.splice(0, unanchored.length)
+
+      placeholder = page.el.getElementsByClassName('annotator-placeholder')[0]
+      if placeholder?
+        unchanged = []
+        for info in anchored
+          attempt = false
+
+          for hl in info.highlights
+            if placeholder.contains(hl)
+              attempt = true
+              break
+
+          if attempt
+            highlighter.removeHighlights(info.highlights)
+            delete info.highlights
+            unanchored.push(info)
+          else
+            unchanged.push(info)
+
+        anchored.splice(0, anchored.length, unchanged...)
+        page.el.removeChild(placeholder)
+
       for obj in unanchored
         annotator.setupAnnotation(obj.annotation)
 

h/static/styles/annotator/inject.scss

@@ -131,6 +131,10 @@ $base-font-size: 14px;
   @include transition(none !important);
 }
 
+.annotator-placeholder {
+  position: absolute;
+}
+
 
 //CONTROLBAR STUFF////////////////////////////////
 .annotator-frame .annotator-toolbar {