[SOLVED] Reorder Pages Event in PDFTron

Reorder Pages Event in PDFTron

I am working on Reorder Pages in Panel > Thumbnails View. PDFTron provide functionality so i can drag and re-arrange/reorder the pages. Then using that event i will upload the new PDF on server. But i am not able to find the correct event which will trigger only when user perform reorder in thumbnail control.

As of now i am using pageNumberUpdated event but it trigger when user scroll to PDF in PDFVeiwer.

WebViewer({
    licenseKey: 'KEY',
    path: './public/webviewer',
    css: './css/pdftron-custom.css'
}, document.getElementById('pdfEditor') as HTMLElement).then(async(instance: WebViewerInstance) => {
    webViewerInstance = instance;
    
    webViewerInstance.docViewer.on('pageNumberUpdated', async() => {
         // OTHER STUFF
    });
});

PDFTron Link: https://www.pdftron.com/documentation/web/guides/manipulation/thumbnails-controls/#reordering-pages

So basically which event i should use which will trigger when user drag and drop thumbnail to move a page?

Solution

You can use the layoutChanged event on the DocumentViewer. For example:

//instantiate the viewer as usual 
const { docViewer } = instance;
docViewer.on('layoutChanged', () => console.log('PAGES UPDATED'))

This event gets triggered when changes in the thumbnail panel occur. https://www.pdftron.com/api/web/CoreControls.DocumentViewer.html#event:layoutChanged__anchor