Facing issue with custom annotation

[Mudassar Ali]

Hi,

I am using PDFTron library and implement in our project. I am having issue with custom annotation. I am able to populate custom annotation in left panel and it works fine when i click on it, it render correctly on pdf view page with url, But when i saved the pdf through pdftron toolbar and refresh the page then custom annotation populate but without url attach to it. I used PDFTron 6 version.

---

Ciklum refers to one or more of Ciklum Group LTD. and its subsidiaries and affiliates each of which is a legally separate entity. Ciklum Pakistan (Private) Limited is a private limited company registered in Pakistan under registration number 0071404, with its registered address at One Express Way Plaza, 2nd Floor, Gulberg Green Entrance - Islamabad Expressway, Islamabad, Pakistan.

The contents of this e-mail (including any attachments) are confidential and may be legally privileged. If you are not the intended recipient of this e-mail, please notify the sender immediately and then delete it (including any attachments) from all your systems. Any unauthorised use, reproduction, distribution, disclosure and/or modification of this message and/or its contents are strictly prohibited. We cannot guarantee that this e-mail is secure or error-free. Ciklum cannot be held liable for any loss or damage caused by software viruses or resulting from any use of or reliance on this email by anyone, other than the intended addressee to the extent agreed in a contract for the matter to which this email relates (if any). Messages sent to and from Ciklum may be monitored; by replying to this e-mail you give your consent to such monitoring. Notice: we do not accept service by e-mail of court proceedings, other processes or formal notices of any kind without specific prior written agreement. This email does not constitute a binding offer or acceptance for Ciklum unless so set forth in a separate document.

[Zhijie Zhang]

Hi,

Thanks for reaching out!

We would like to clarify a few things to help you further:

> when i saved the pdf through pdftron toolbar and refresh the page

Are you loading the saved pdf after the page is refreshed? If not, is the saved PDF related to page refreshing?

> without url attach to it

Could you clarify what you mean by the URL attach to it? Could you show us the code and how your custom annotation is supposed to look like?

Thanks,

Zhijie Zhang

Software Developer

PDFTron Systems Inc.

[Mudassar Ali]

HI

Are you loading the saved pdf after the page is refreshed? If not, is the saved PDF related to page refreshing?

Yes after saving pdf and refreshing the page link doesnt work either in pdf or on PDFTron viewer.

Could you clarify what you mean by the URL attach to it? Could you show us the code and how your custom annotation is supposed to look like?

We are adding links to annotation programmatically in our custom annotation and works fine when save before reloading page. Below is the code snippet we are using to create a custom annotation.

onClick: function (originalEvent, element, docViewer, annotations, fileInfo) {
    if (!element.dataset.wpcode.length) return;
    var annotManager = docViewer.getAnnotationManager();
    var stampAnnot = new annotations.StampAnnotation();
    var svgWidth = element.querySelector('#wpReferenceLabel').clientWidth / 3;
    var pdfCoords = pdfUtils.calculateDropInCoordinatesByCustomLeftPanelClick(originalEvent, docViewer, {width: svgWidth, height: 55});
    var dropIn = pdfCoords.y * docViewer.getZoom();
    var stamp = pdfUtils.initCustomStamp(
        annotManager.getCurrentUser(),
        docViewer.getCurrentPage(),
        svgWidth,
        55,
        "wpReference",
        { uri: element.dataset.wplink, ref: element.dataset.wpref, code: element.dataset.wpcode, ypos: dropIn, xpos: pdfCoords.x },
        stampAnnot
    );
    if (pdfUtils.isEdge()) {
        pdfUtils.getCreateStampImageData('wp', element.dataset.wpcode, svgWidth, [], function(img) {
            var imagedata = 'data:image/png;base64,' + decodeURIComponent(img.imagedata);
            pdfUtils.redrawLeftPanelStampImage(imagedata, img.size.width, img.size.height, dropIn, stamp, annotManager);
        });
    } else {
        var svgContent = pdfUtils.createSVGForLeftPanelStamp('wp', svgWidth, 55, fileInfo, element);
        setTimeout(pdfUtils.convertSVG2PNG64('workpaperStampCanvas', 'data:image/svg+xml;utf-8,' + svgContent, 100, 55, function (s) {
            pdfUtils.redrawLeftPanelStampImage(s, pdfCoords, dropIn, stamp, annotManager);
        }), 0);
    }
}

What approach we can use to make it work when it becomes part of PDF?

www.Ciklum.com	Mudassar Ali Software Architect Ciklum 2nd Floor One Expressway Plaza, Main Expressway, Gulberg Interchange, Islamabad, Pakistan - 44000

--
You received this message because you are subscribed to a topic in the Google Groups "PDFTron WebViewer" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/pdfnet-webviewer/myfaYfTnW3Q/unsubscribe.
To unsubscribe from this group and all its topics, send an email to pdfnet-webview...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pdfnet-webviewer/bd75e43f-e944-4c81-84d0-114ef8363090n%40googlegroups.com.

[Armando Bollain]

Hi Mudassar, 

Thanks for sharing that code snippet. 

I see that you add the URI as part of an object when you create your custom annotation, which you are probably attaching to the stamp. This property is not part of the PDF spec, so thats why it is getting lost when you refresh or try to open the document in another reader.

One approach we can suggest, and the one we use in WebViewer, is to create a Link annotation, and then group the Link annotation and your Custom annotation together.

The following code shows how we create a Link annotation and add a URI:
https://github.com/PDFTron/webviewer-ui/blob/7.3/src/components/LinkModal/LinkModal.js#L134

https://github.com/PDFTron/webviewer-ui/blob/7.3/src/components/LinkModal/LinkModal.js#L48

Here is the API to associate Links with annotations:
https://www.pdftron.com/api/web/Annotations.Annotation.html#associateLink__anchor

Let me know if you have any questions about this approach, I am happy to help.

Best Regards,

Armando Bollain

Software Developer

PDFTron Systems, Inc.

www.pdftron.com

CONFIDENTIALITY NOTICE: This message (and any attachment to it) is intended only for the use of the individual or entity to which it is addressed in the header, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. Any reproduction, distribution, modification or use of the contents of this message (and any attachment to it) by any individual or entity other than the intended recipient is prohibited. If you have received this communication in error, please notify us immediately and delete the original.

Check your ticket status - https://support.pdftron.com/helpdesk/tickets/20161

[Mudassar Ali]

Thank you for your help, we are able to add link to our annotation. But one thing missing how we can add url to this link, so when the user click on the link user goes to URL. We have tried

Actions.URI.

var link = new annotations.Link();
        link.PageNumber = docViewer.getCurrentPage();
        link.StrokeColor = new annotations.Color(0, 165, 228);
        link.StrokeStyle = 'underline';
        link.StrokeThickness = 2;
        link.Author = annotManager.getCurrentUser();
        link.Subject = 'Link';
        link.X = pdfCoords.x;
        link.Y = dropIn-30;
        link.Width = svgWidth+30;
        link.Height = 2;


        var linkHref = new Actions.URI({
                                uri: 'https://www.pdftron.com',
                            });
        link.addAction(
            'U',
            linkHref
        );


But we are getting this error "Uncaught ReferenceError: Actions is not defined".

www.Ciklum.com	Mudassar Ali Software Architect Ciklum 2nd Floor One Expressway Plaza, Main Expressway, Gulberg Interchange, Islamabad, Pakistan - 44000

On Sat, Feb 27, 2021 at 4:43 AM PDFTron WebViewer <pdfnet-w...@googlegroups.com> wrote:

.

 

, PDFTron WebViewer Forum <pdfnet-w...@googlegroups.com> wrote:

You received this message because you are subscribed to the Google Groups "PDFTron WebViewer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pdfnet-webview...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pdfnet-webviewer/CAAc%3DBc6ioMU%3DPn15nB_CyYpMxcmp4UD%3DrVAOJN9BZw9HRmNjrQ%40mail.gmail.com.

20161:789536

--
You received this message because you are subscribed to a topic in the Google Groups "PDFTron WebViewer" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/pdfnet-webviewer/myfaYfTnW3Q/unsubscribe.
To unsubscribe from this group and all its topics, send an email to pdfnet-webview...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pdfnet-webviewer/603987b03671_24f2b0239f11e4810926780.sidekiq-frequent-fd-poduseast1-main3-blue-79744bb4-pnltz%40email.freshdesk.com.

[Armando Bollain]

Hi Mudassar,

It looks like you are simply missing the definition of "Actions". You can get that from your instance as follows:

Webviewer({

initialDoc: hashFile,

path: '/lib',

}, document.getElementById('viewer')).then(instance => {

 const { Actions }  = instance;  /// Actions is in the instance

});

Best Regards,

Armando Bollain

Software Developer

PDFTron Systems, Inc.

www.pdftron.com

CONFIDENTIALITY NOTICE: This message (and any attachment to it) is intended only for the use of the individual or entity to which it is addressed in the header, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. Any reproduction, distribution, modification or use of the contents of this message (and any attachment to it) by any individual or entity other than the intended recipient is prohibited. If you have received this communication in error, please notify us immediately and delete the original.

[Mudassar Ali]

Thank you, we are getting closer. We are able to add link and its working fine. But we are facing two issues:

 
1- We are attaching the link to custom annotations.StampAnnotation, but issue is link is not rendered until we refresh the page. Our annotations.StampAnnotation renders perfectly.
2- When we drag the annotations StampAnnotation, link does move with StampAnnotation.


Below is the code

     var link = new annotations.Link();
        link.PageNumber = docViewer.getCurrentPage();
        link.StrokeColor = new annotations.Color(0, 165, 228);
        link.StrokeStyle = 'underline';
        link.StrokeThickness = 2;
        link.Author = annotManager.getCurrentUser();
        link.Subject = 'Link';

        link.X = originalEvent.pageX;
        link.Y = originalEvent.pageY;
        link.Width = 100;
        link.Height = 5;

 

        console.log(pdfCoords, originalEvent    , dropIn);

 

        var linkHref = new currentPDFTronInstance.Actions.URI({

            uri: 'https://www.pdftron.com',
        });
        link.addAction(
            'U',
            linkHref
        );

 

        var stampAnnot = new annotations.StampAnnotation();

 

        stampAnnot.associateLink([link.Id]);

 

        annotManager.updateAnnotation(link);
        annotManager.addAnnotation(link);

        annotManager.redrawAnnotation(link);

www.Ciklum.com	Mudassar Ali Software Architect Ciklum 2nd Floor One Expressway Plaza, Main Expressway, Gulberg Interchange, Islamabad, Pakistan - 44000

To view this discussion on the web visit https://groups.google.com/d/msgid/pdfnet-webviewer/0487c1db-74da-4ea0-a79d-2cb70360e301n%40googlegroups.com.

[Armando Bollain]

Hey Mudassar, 

The links are a special case of annotation, and you need to do a hard redraw of the page to get them to show after you add them to the annotation manager.

You would need to do:

https://www.pdftron.com/api/web/CoreControls.AnnotationManager.html#drawAnnotations__anchor

annotationManager.drawAnnotations(pageThatHasYourLink, null, true) // The third parameter is for a hard redraw.

For your second question, do you mean the link does move, or does not move?

If it does not move, have you made sure you have associated them? If you have and still have the issue please send me the whole code with stamp + link and I will have a look at my end.

Best Regards,

Armando Bollain

Software Developer

PDFTron Systems, Inc.

www.pdftron.com

CONFIDENTIALITY NOTICE: This message (and any attachment to it) is intended only for the use of the individual or entity to which it is addressed in the header, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. Any reproduction, distribution, modification or use of the contents of this message (and any attachment to it) by any individual or entity other than the intended recipient is prohibited. If you have received this communication in error, please notify us immediately and delete the original.

[Mudassar Ali]

Hi

we are adding a stamp annotation and attaching a link to that stamp annotation. That works perfectly fine.

Following is the code:

var stampAnnot = new annotations.StampAnnotation();

var link = new annotations.Link();

var linkHref = new currentPDFTronInstance.Actions.URI({

            uri: element.dataset.wplink,

      });
      link.addAction(
            'U',
            linkHref
      );

stampAnnot.associateLink([link.Id]);
annotManager.updateAnnotation(link);
annotManager.addAnnotation(link);
annotManager.redrawAnnotation(link);

annotManager.drawAnnotations(docViewer.getCurrentPage(), null, true);

Now we facing an issue on adding the annotation, on adding, we are getting two xmls. One for stamp annotation and other link annotation. But after dragging we get a single annotation with link annotation as child.

How we can add link annotation to stamp Annotation as child on adding, just like on dragging.

Attached are the two XMLS on adding and other on dragging.

www.Ciklum.com	Mudassar Ali Software Architect Ciklum 2nd Floor One Expressway Plaza, Main Expressway, Gulberg Interchange, Islamabad, Pakistan - 44000

To view this discussion on the web visit https://groups.google.com/d/msgid/pdfnet-webviewer/65763944-fb00-4b20-9f96-aeb32002909en%40googlegroups.com.

[Armando Bollain]

Hello, 

The behaviour you are seeing is what is expected. A link annotation is separate from the stamp annotation, and are simply linked together when you call associateLink. I am not sure quite what you mean by child annotation, but if you are referring to the following, it is simply how we link the two internally:

<trn-custom-data bytes="{&quot;trn-link-id&quot;:[&quot;471713f4-40a1-b0cf-40b3-8c013c0f614d&quot;]}"/>

This links the ID of the Link Annotation to your Stamp Annotation. The link annotation still exists as XFDF and you can verify by exporting the XFDF of the document.

It seems to me that you are doing things correctly. 

Best Regards,

Armando Bollain

Software Developer

PDFTron Systems, Inc.

www.pdftron.com

CONFIDENTIALITY NOTICE: This message (and any attachment to it) is intended only for the use of the individual or entity to which it is addressed in the header, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. Any reproduction, distribution, modification or use of the contents of this message (and any attachment to it) by any individual or entity other than the intended recipient is prohibited. If you have received this communication in error, please notify us immediately and delete the original.

[Mudassar Ali]

Hi

What we mean by child annotation is, if you look into the addTimeXML, you will not find any tag related to the link. In add tag only one annotation that is stamp.  But in case of afterDragXML in modify tag there are two tags one for link and other for stamp. We want to generate same xml in case of addition as well.

Why we want this is because on adding new annotation with link stamp it is not linked, so on clicking it does nothing, only link below is clickable reason is both has separate XMLs.  But on dragging the new XML has both in it, by which stamp become clickable

www.Ciklum.com	Mudassar Ali Software Architect Ciklum 2nd Floor One Expressway Plaza, Main Expressway, Gulberg Interchange, Islamabad, Pakistan - 44000

To view this discussion on the web visit https://groups.google.com/d/msgid/pdfnet-webviewer/edd1d81e-2eb7-4b47-aa47-c98b63a8e5b2n%40googlegroups.com.

[Armando Bollain]

Hi Mudassar, 

I am still not sure I follow what you are seeing, but I wrote some code to verify the sample works as expected (this is in 7.3):

  // Add listener to verify link and stamp are added at the same time
  annotManager.on('annotationChanged', (annotations, action, info) => {
    if (action == 'add' && !info.imported) {
      console.log({ annotations })
    }
  })
 
  // Add stamp and link on doc loaded
  docViewer.on('documentLoaded', () => {
    const x = 200;
    const y = 200;
    const width = 200;
    const height = 100;
    const url = 'www.google.com'
    const pageNumber = 1;
 
    var stampAnnot = new Annotations.StampAnnotation();
    stampAnnot.setX(x);
    stampAnnot.setY(y);
    stampAnnot.Icon = 'Approved';
    stampAnnot.Width = width;
    stampAnnot.Height = height;
    stampAnnot.PageNumber = pageNumber;
   
    // Create Link Annotation
    const link = new Annotations.Link();
    link.PageNumber = pageNumber;
    link.StrokeColor = new Annotations.Color(0, 165, 228);

    link.StrokeStyle = 'underline';
    link.StrokeThickness = 2;

    link.Subject = 'Link';
    link.setX(x);
    link.setY(y);
    link.Width = width;
    link.Height = height;
 
 
    // Create action
    const action = new Actions.URI({ uri: url });
 
    // Add action to link
    link.addAction('U', action);
 
    // Add stamp and link to annotationManager
    annotManager.addAnnotations([stampAnnot, link])
 
    stampAnnot.associateLink([link.Id]);
 
    annotManager.drawAnnotations(pageNumber, null, true);
  })

When I open a doc, I see my stamp added and the stamp is a clickable link. When I drag it, it moves the link along with it. In my console, I see both the stamp and the annotation being added at the same time.

Can you verify this works on your end?

Best Regards,

Armando Bollain

Software Developer

PDFTron Systems, Inc.

www.pdftron.com

CONFIDENTIALITY NOTICE: This message (and any attachment to it) is intended only for the use of the individual or entity to which it is addressed in the header, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. Any reproduction, distribution, modification or use of the contents of this message (and any attachment to it) by any individual or entity other than the intended recipient is prohibited. If you have received this communication in error, please notify us immediately and delete the original.

[Mudassar Ali]

Hi

I have attached a video to demonstrate our issue. We are doing the same way as shared in code snippet above.

Basically, if you see after adding the custom annotation is not clickable but the line under it is clickable. In another case after dragging and save both are clickable. If we look at the XML generated in first case there are two xml. But after dragging and save both link and annotation are combine in one XML.

I hope its more understandable now. Let me know if it's not. Thanks

Secondly i had posted this reply in email thread 6 day ago it seems its not recorded here.

Link to view is shared through google drive

Link to video

https://drive.google.com/file/d/1ekgCQKNTK-s798i3X0Yw2SES75X8ks7E/view?usp=drive_web

[Armando Bollain]

Mudassar, 

We have now closed the google groups and this conversation has been moved to our new Discourse:
https://community.pdftron.com/t/facing-issue-with-custom-annotation/3673/10

Can you please move the thread there? I will review the additional info you have provided and will update on that thread.

Thanks

Best Regards,

Armando Bollain

Software Developer

PDFTron Systems, Inc.

www.pdftron.com

CONFIDENTIALITY NOTICE: This message (and any attachment to it) is intended only for the use of the individual or entity to which it is addressed in the header, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. Any reproduction, distribution, modification or use of the contents of this message (and any attachment to it) by any individual or entity other than the intended recipient is prohibited. If you have received this communication in error, please notify us immediately and delete the original.