How to avoid 'annotationChanged' event while importing existing annotations on initial webviewer load?

Technical Support WebViewer
, , ,
1

WebViewer Version: 8.3.3

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? Yes
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? Yes
Is your issue related to annotations? Yes

Please give a brief summary of your issue:
(Think of this as an email subject)

How to avoid ‘annotationChanged’ event while importing existing annotations on initial webviewer load?

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

  • Importing existing annotations on initial load, triggers ‘annotationChanged’ event - How to avoid that?
  • we need ‘annotationChanged’ event only when user manually adds annotations in the UI

Example Code:

import React, {useRef, useEffect} from 'react';
import Webviewer from '@pdftron/webviewer';

const annotations = '<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="3" /><fields /><annots><ink page="0" rect="113.500,565.740,283.880,726.400" color="#E44234" flags="print" name="2bff29d1-78d4-f812-1b82-0e4f12eadac7" title="Guest" subject="Free Hand" date="D:20220106170222-08\'00\'" creationdate="D:20220106170220-08\'00\'"><inklist><gesture>114.5,611.64;114.5,610.9;116.74,609.4;117.49,606.41;119.74,602.66;121.98,598.17;124.23,593.6800000000001;127.22,588.45;127.22,586.2;129.47,582.46;130.96,577.97;132.46,574.23;133.96,571.98;134.71,571.23;135.45,568.99;136.2,568.24;</gesture></inklist></ink></annots><pages><defmtx matrix="1,0,0,-1,0,792" /></pages></xfdf>';
const initialDoc = process.env.PUBLIC_URL + "/test4.pdf";

function App() {
    const viewerDiv = useRef<HTMLDivElement>(null);

    useEffect(() => {
        Webviewer({
            path: "lib",
            initialDoc
        }, viewerDiv.current as HTMLDivElement).then(instance => {
            const {documentViewer, annotationManager} = instance.Core;
            documentViewer.addEventListener('documentLoaded', async (event) => {
                console.log('documentLoaded:', event)
                await annotationManager.importAnnotations(annotations);
                // importing existing annotations on initial load, triggering 'annotationChanged' event - How to avoid that?
            });
            annotationManager.addEventListener('annotationChanged', async (event) => {
                console.log('annotationChanged:', event);
            });
        });
    }, []);

    return (
        <div className="App">
            <div className="webviewer" ref={viewerDiv} style={{height: '100vh'}}></div>
        </div>
    );
}

export default App;

Please provide a link to a minimal sample where the issue is reproducible:

2

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

3

Hi,

Unfortunately, the annotationChanged event is unavoidable. However, the AnnotationChangedInfoObject(PDFTron WebViewer Class: AnnotationManager) will be passed to the callback function as a parameter in the annotationChanged event. You could be able to identify if the annotation change is the result of importing annotations using importAnnotations.

1 Like
4

annotationChanged event to track changes to annotations such as adding, removing, updating, or modifying annotations. When this event is triggered, how can i obtain the XFDF string that represents the current state of the annotations. only that particular annotation xfdf so i can see it in my console
this is my current code can you help me to get it

annotationManager.addEventListener(
          "annotationChanged",
          async (annotations, action, { imported }) => {
            if (imported) {
              return;
            }
            try {
              // Export annotations to XFDF format using `exportAnnotations`
              const xfdf = await annotationManager.exportAnnotations();
              console.log("xfdf Current", xfdf);
            } catch (error) {
              console.error("Error in annotationChanged event:", error);
            }
          }
        );
      });