Are realtime annotations based on a documentId?

139 views
Skip to first unread message

Christian Gruber

unread,
Jun 19, 2017, 5:00:51 PM6/19/17
to PDFTron WebViewer
Hi,

I have integrated realtime collaboration (https://www.pdftron.com/webviewer/demo/samples/realtime-collaboration/main.js) into our application and it works fine except one thing: When a new document is loaded, the same annotations get loaded from firebase db and put into the document. It seems as there is no check regarding a documentId? 

I can also not find a reference to the documentId in the annotations. So I can't filter the annotation at the client. 

Not posting my code because I haven't modified the example at all. The only difference is that I load new documents via webViewer.loadDocument(url, {documentId: id); and not through the constructor.

Christian

Justin Jung

unread,
Jun 20, 2017, 7:01:15 PM6/20/17
to PDFTron WebViewer on behalf of Christian Gruber
Hello,

That is correct. The sample (server.js to be specific) is always opening the same document with same document id, so the api calls are not doing any checks for document id.

If you are using Firebase, you could structure your database as follows:

documents: {
  docId1: {
    annotId1: {

    },
    annotId2: {

    },
    ...
  },
  docId2: {

  },
  ...
},
authors: {
  ...


Justin Jung
Software Developer
PDFTron Systems Inc.

Christian Gruber

unread,
Jun 27, 2017, 12:51:44 PM6/27/17
to PDFTron WebViewer
Isn't the entire sample quite useless then? Who works with one document only? 

I try to modify the existing example and will post my solution then.

Justin Jung

unread,
Jun 27, 2017, 3:11:07 PM6/27/17
to PDFTron WebViewer on behalf of Christian Gruber
The scope of the sample was to show the principles of realtime annotation syncing per annotation basis.
It would be awesome if you could share your solution!

Christian Gruber

unread,
Jun 29, 2017, 11:43:49 AM6/29/17
to PDFTron WebViewer
My solution looks as following (incomplete, only to show my approach): 

$viewerElement.bind('documentLoaded', function (event) {

   
var changedEvent = new CustomEvent('webviewer-document-changed', {detail: {docId: self.webViewer.getInstance().docId}});
   window
.document.dispatchEvent(changedEvent);
         
   
[...]
}

Whenever the document changes, I dispatch an event to server.js.

self.documentRef = {};

function documentChanged(e) {
   
self.documentRef = firebase.database().ref(uniqueName + '/documents/').child(e.detail.docId);
}

window.document.addEventListener('webviewer-document-changed', documentChanged);

This code part listens to the event and changes the firebase reference to one specific document.  Note that the member name changed from documentsRef to documentRef. documentRef therefore listens only to firebase events based on the ID of the document. 

Please feel free to ask or suggest improvements. 


Justin Jung

unread,
Jun 29, 2017, 3:13:44 PM6/29/17
to PDFTron WebViewer on behalf of Christian Gruber
Thanks for sharing! We will consider integrating it in a future release.
Reply all
Reply to author
Forward
0 new messages