Advanced diff nudge tool logic

Technical Support WebViewer
1

WebViewer Version: 11.2.0
Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? NA
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? No
Is your issue related to annotations? No

Please give a brief summary of your issue:

Hello, I am referencing the code behind the Advanced Diff demo tool here:
Demo tool: https://sdk.apryse.com/samples/web/samples/advanced/diff/
Code: https://sdk.apryse.com/samples/web/samples/advanced/diff/diff.js

In the function ‘onNudgeToolPressed’, we see the use of ‘compareDocs.translate(string, number, number)’ that allows a user to nudge the diff-document in the middle/overlay viewer in the direction we specify. I would like to implement a similar tool in my app, but am not finding the above methods or an up-to-date code sample.

I am loading my document as a Core.PDFNet.PDFDoc, but I could also use a Core.Document if needed. However, I haven’t been successful in translating, rotating, or scaling my document so far. Could you point me in the right direction? I am using Angular 22 with TypeScript

How I am creating the original diff document, before any nudging happens:

async createOverlayDocument(
    overlayInstance: WebViewerInstance,
    primaryDocument: OverlayDocument,
    secondaryDocument: OverlayDocument
  ): Promise<Core.PDFNet.PDFDoc> {
    const { PDFNet } = instance.Core

    const newDoc1 = await overlayInstance.Core.createDocument(primaryDocument.downloadUrl)
    const doc1 = await newDoc1.getPDFDoc()

    const newDoc2 = await overlayInstance.Core.createDocument(secondaryDocument.downloadUrl)
    const doc2 = await newDoc2.getPDFDoc()

    const arr1 = []
    const itr1 = await doc1.getPageIterator(1)
    for (; await itr1.hasNext(); itr1.next()) {
      const page = await itr1.current()
      arr1.push(page)
    }
    const doc1Pages = arr1

    const arr2 = []
    const itr2 = await doc2.getPageIterator(1)
    for (; await itr2.hasNext(); itr2.next()) {
      const page = await itr2.current()
      arr2.push(page)
    }
    const doc2Pages = arr2

    const newDoc = await instance.Core.PDFNet.PDFDoc.create()
    newDoc.lock()

    const biggestLength = Math.max(doc1Pages.length, doc2Pages.length)

    for (let i = 0; i < biggestLength; i++) {
      let page1 = doc1Pages[i] as InstanceType<typeof PDFNet.Page> | undefined
      let page2 = doc2Pages[i] as InstanceType<typeof PDFNet.Page> | undefined

      if (page1 == null) {
        page1 = await doc1.pageCreate()
      }
      if (page2 == null) {
        page2 = await doc2.pageCreate()
      }

      await newDoc.appendVisualDiff(page1, page2)
    }

    newDoc.unlock()

    return newDoc
}
1 Like
2

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


It seems like you’re trying to implement a feature similar to the nudge tool in the Advanced Diff demo, using the Apryse WebViewer’s PDFNet API to manipulate PDF documents. Your goal is to translate, rotate, or scale documents within an Angular application using TypeScript. Let’s break it down:

Some things you can try:

  • Ensure you’re using the correct PDFNet methods for document manipulation. The translate, rotate, and scale functions are typically used on pages or annotations rather than whole documents.

  • To translate a page, use the page.getSDFObj().putMatrix('Matrix', PDFNet.Matrix2D.createTranslation(tx, ty)) where tx and ty are your translation values.

  • For rotation, you might use page.setRotation(PDFNet.Page.Rotate.e_90) for example, to rotate the page by 90 degrees.

  • Scaling can be more complex, as it involves transforming the page’s content. You can adjust the page’s matrix using page.getSDFObj().putMatrix('Matrix', PDFNet.Matrix2D.createScale(sx, sy)) where sx and sy are scale factors.

  • Consider creating a wrapper function that applies these transformations to each page of your document.



Here are some resources that might help you:


Hopefully, this helps you solve your problem while you wait for a human to get back to you.

1 Like
3

Hello Makoa,

Thank you for contacting WebViewer Forums.

The nudge tool from the Diff sample is a custom implementation. There is not much implementation help that can be addressed regarding the use of this tool. However, here is a soft breakdown of the function:

  1. Grab the middle panel by calling instance.Core.documentViewer.getDocument();
  2. Depending on the button press, save the direction nudgeDirection
  3. Translate the overlay document based on direction inputted

Regards,
Luke

1 Like