Annotations grouping / ungrouping

Technical Support
1

Which product are you using?

PDF.js Express Plus
PDF.js Express Version 8.7.0

Detailed description of issue

  • when group annotations, some of them disappear
  • when ungroup annotations, all annotations disappear

Expected behaviour

  • should save annotations properly when group and ungroup

Does your issue happen with every document, or just one?
Every document

Link to document
{Provide a link to the document in question if possible}

Code snippet

  • I currently save the annotations to the database, using action cable to have the realtime collaboration.
  • Sometimes the grouping work, but almost of the time it doesnt work like the video I put above.

My question is how can I detect the grouping/upgrouping event, and which is the proper way to handle them?

3

Hello tristan,

How, and when are you saving the annotations to the database?
It could be the timing is off and not saving the correct annotations.

Thank you,
Tyler

4

Hi @tgordon, thank you.
My code looks like

annotationManager.addEventListener(
  "annotationChanged",
  (annotations, type, { imported }) => {
    annotations.forEach((annotation) => {
      annotationManager.exportAnnotationCommand().then((xfdf) => {
          if (type === "add") {
          // Call the API to save the annotation to the database with xfdf
          } else if (type === "modify") {
          // Call the API to update the annotation to the database with xfdf
          } else if (type === "delete") {
          // Call the API to delete the annotation to the database with xfdf
          }
      })
    })
  })
5

Hello tristan,

I would suggest instead just using:

annotationManager.addEventListener(
  "annotationChanged",
  (annotations, type, { imported }) => {
    annotations.forEach((annotation) => {
      annotationManager.exportAnnotationCommand().then((xfdf) => {
          // Call the API to save the annotation to the database with xfdf
      })
    })
  })

Since annotations in command form already have the add/delete/modify commands and when merged with the API it will add/delete/modify based on those commands.

Best regards,
Tyler

6

@tgordon but even I do not call API to save it to the database, I just want to see the xfdf through console.log, its not correct.

When I do the group, from 2 annotations => 1 annotation with xfdf data and 1 empty xfdf.
When I do the ungroup, I can not make it back to 2 annotations like before I group.

Currently, each annotation I save it in a separate record in the database.
Im following this doc, but the my tech stack is Rails, Actioncable, Posgresql: Client Setup for Collaborating with PDF.js Express | Documentation

I want to know how can I detect the event is group, or ungroup => I can merge and unmerge the xfdf.
Thank you

7

Hello tristan,

When I do the group, from 2 annotations => 1 annotation with xfdf data and 1 empty xfdf.

Can you provide the XFDF from the operation?

Best regards,
Tyler

8

Separated:

First XFDF

<?xml version="1.0" encoding="UTF-8" ?>
<xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">
<fields />
<add><square page="0" rect="92.940,448.780,221.020,531.530" color="#00CC63" flags="print" name="b4632233-1991-70be-a0ed-5fe5a968afb1" title="7" subject="Rectangle" date="D:20230925143830+07'00'" interior-color="#E2A1E6" creationdate="D:20230925143829+07'00'"/></add>
<modify />
<delete />
</xfdf>

Second XFDF

<?xml version="1.0" encoding="UTF-8" ?>
<xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">
<fields />
<add><square page="0" rect="321.900,439.720,461.320,536.060" color="#00CC63" flags="print" name="3f860c93-45df-4a71-d1c3-8be411875e5a" title="7" subject="Rectangle" date="D:20230925143855+07'00'" interior-color="#E2A1E6" creationdate="D:20230925143854+07'00'"/></add>
<modify />
<delete />
</xfdf>

After group

First XFDF

<?xml version="1.0" encoding="UTF-8" ?>
<xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">
<fields />
<add />
<modify><square page="0" rect="92.940,448.780,221.020,531.530" color="#00CC63" flags="print" inreplyto="3f860c93-45df-4a71-d1c3-8be411875e5a" replyType="group" name="b4632233-1991-70be-a0ed-5fe5a968afb1" title="7" subject="Rectangle" date="D:20230925143911+07'00'" interior-color="#E2A1E6" creationdate="D:20230925143829+07'00'"/></modify>
<delete />
</xfdf>

Second XFDF

<?xml version="1.0" encoding="UTF-8" ?>
<xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">
<fields />
<add />
<modify />
<delete />
</xfdf>
9

Note: we are trying to save each annotation as each row in the database and want it to work in real-time collaboration.

If I use exportAnnotations instead of exportAnnotationCommand
I got the following
Before group

<?xml version="1.0" encoding="UTF-8" ?>
<xfdf
	xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">
	<annots>
		<square page="0" rect="156.420,595.000,232.360,650.540" color="#00CC63" flags="print" name="8488d4a4-e433-0cfb-7a1e-f61185db200d" title="7" subject="Rectangle" date="D:20230925171711+07'00'" interior-color="#E2A1E6" creationdate="D:20230925171710+07'00'"/>
	</annots>
</xfdf>

<?xml version="1.0" encoding="UTF-8" ?>
<xfdf
	xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">
	<annots>
		<square page="0" rect="283.360,599.530,378.570,657.340" color="#00CC63" flags="print" name="f44e3dbf-c204-eaf9-58b8-bd3583aaca26" title="7" subject="Rectangle" date="D:20230925171744+07'00'" interior-color="#E2A1E6" creationdate="D:20230925171743+07'00'"/>
	</annots>
</xfdf>

After group

<?xml version="1.0" encoding="UTF-8" ?>
<xfdf
	xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">
	<annots>
		<square page="0" rect="283.360,599.530,378.570,657.340" color="#00CC63" flags="print" name="f44e3dbf-c204-eaf9-58b8-bd3583aaca26" title="7" subject="Rectangle" date="D:20230925171744+07'00'" interior-color="#E2A1E6" creationdate="D:20230925171743+07'00'"/>
	</annots>
</xfdf>

<?xml version="1.0" encoding="UTF-8" ?>
<xfdf
	xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">
	<annots>
		<square page="0" rect="156.420,595.000,232.360,650.540" color="#00CC63" flags="print" inreplyto="f44e3dbf-c204-eaf9-58b8-bd3583aaca26" replyType="group" name="8488d4a4-e433-0cfb-7a1e-f61185db200d" title="7" subject="Rectangle" date="D:20230925171822+07'00'" interior-color="#E2A1E6" creationdate="D:20230925171710+07'00'"/>
	</annots>
</xfdf>