PSPDFKit Unable to identify Annotation type received

22 views Asked by At

I have this Javascript event listener for Create, Update and Delete Annotation

instance.addEventListener(
 "annotations.update",
 function (updatedAnnotations) {
 console.log("Annotations got updated", updatedAnnotations.toJS());
 saveComment(updatedAnnotations.toJS(), 'ANNOTATION_UPDATED');
}
);
                    
instance.addEventListener(
"annotations.create",
function (createdAnnotations) {
console.log("New annotations got created", createdAnnotations.toJS());
saveComment(createdAnnotations.toJS(), 'ANNOTATION_CREATED');
}
);

instance.addEventListener(
"annotations.delete",
function (deletedAnnotations) {
console.log("Annotations got deleted", deletedAnnotations.toJS());
saveComment(deletedAnnotations.toJS(), 'ANNOTATION_DELETED');
}
);

This code is already working fine and I can receive this kind of response

enter image description here

I'm storing this json response into my database so that I can pull it and populate on my pdf viewer.

However, my problem is this json response doesn't have annotation type if the annotation is shape or text.

Because almost all annotations have same json parameters.

How do you populate it on PDF Viewer if there's no annotation type?

currently these are the ways on how to populate

1. Text

                    // Text
                    instance.applyOperations([
                        {
                            type: "applyInstantJson",
                            instantJson: {
                            annotations: [
                                {
                                    startPoint: [565.5350036621094,355.20000000000005],
                                    endPoint: [563.9350036621095,103.2],
                                    bbox: [104.44183492834031, 363.7603665647975, 103.0162271870599, 20.786306660845568],
                                    blendMode: "normal",
                                    createdAt: "1970-01-01T00:00:00Z",
                                    id: "01HQXJGR814V852JBHG8AP0Q25",
                                    name: "01HQXJGR814V852JBHG8AP0Q25",
                                    opacity: 1,
                                    pageIndex: 3,
                                    strokeColor: "#2293FB",
                                    strokeWidth: 5,
                                    type: "pspdfkit/text",
                                    updatedAt: "1970-01-01T00:00:00Z",
                                    horizontalAlign: "left",
                                    text:"RAGNAROK",
                                    verticalAlign: "top",
                                    fontSize: 18,
                                    font:"Helvetica",
                                    v: 1
                                }
                            ],
                            format: "https://pspdfkit.com/instant-json/v1"
                            }
                        }
                    ]);

                    // Callout
                    instance.applyOperations([
                        {
                            type: "applyInstantJson",
                            instantJson: {
                            annotations: [
                                {
                                    bbox: [487.1350036621095, 288.6400329589844, 104.01250000000128, 106.4],
                                    blendMode: "normal",
                                    createdAt: "1970-01-01T00:00:00Z",
                                    id: "01HQXJGR814V852JBHG8AP0Q25",
                                    name: "01HQXJGR814V852JBHG8AP0Q25",
                                    opacity: 1,
                                    pageIndex: 3,
                                    strokeWidth: 5,
                                    type: "pspdfkit/text",
                                    updatedAt: "1970-01-01T00:00:00Z",
                                    horizontalAlign: "left",
                                    text:"RAGNAROK",
                                    verticalAlign: "top",
                                    fontSize: 18,
                                    font:"Helvetica",
                                    borderStyle: "solid",
                                    borderColor:"#000",
                                    callout: {
                                        cap: "openArrow",
                                        end: [563.3412536621107, 318.24003295898444],
                                        innerRectInset: [48.40000000000127, 0, 0, 76],
                                        knee: [543.5350036621094, 338.6400329589844],
                                        start: [493.53500366210943,388.6400329589844]
                                    },
                                    v: 1
                                }
                            ],
                            format: "https://pspdfkit.com/instant-json/v1"
                            }
                        }
                    ]);

and this is Shape "SQUARE"

                   instance.applyOperations([
                            {
                                type: "applyInstantJson",
                                instantJson: {
                                annotations: [
                                    {
                                        bbox: [131.9350036621094, 12.000054931640648, 408.00000000000006, 223.2],
                                        blendMode: "normal",
                                        createdAt: "1970-01-01T00:00:00Z",
                                        id: "01HQYBYHF2KTD1CMZ8Y4QA4YFF",
                                        name: "01HQYBYHF2KTD1CMZ8Y4QA4YFF",
                                        opacity: 1,
                                        pageIndex: 3,
                                        type: "pspdfkit/shape/rectangle",
                                        updatedAt: "1970-01-01T00:00:00Z",
                                        strokeColor: "#2293FB",
                                        creatorName: "{{auth()->user()->name}}",
                                        rotation:0,
                                        strokeWidth:5,
                                        v: 2
                                    }
                                ],
                                format: "https://pspdfkit.com/instant-json/v1"
                                }
                            }
                    ]);
0

There are 0 answers