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
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"
}
}
]);
