I'm struggling with pspdfkit for creating and displaying my annotations properly. I would like to create my annotation like this:
instance.addEventListener("annotations.create", createdAnnotations => {
const annotation = createdAnnotations
const serializedObject = toSerializableObject(annotation)
const annotationsJson = JSON.stringify(serializedObject)
console.log("clean", JSON.parse(annotationsJson))
dispatch(createPdfNote(annotationsJson, documentID))
.then(
err => {
if (!err) {
setSnackContent({
severity: "success",
message: "Annotation successfully created",
})
}
})
})
But at the creation the annotation is missing the type of the annotation.
How could I retrieve it and be able to use toSerializeObject
to be able to create JSON that I can re-create after?
That's the JSON the instance.addEventListener created for me:
action: null
additionalActions: null
backgroundColor: null
blendMode: "normal"
boundingBox: Object { left: 308, top: 118, width: 82, … }
createdAt: "2021-06-28T07:58:36.255Z"
creatorName: null
customData: null
hidden: false
id: "01F98T156YNAP5N28MAKKQJ2Y4"
isCommentThreadRoot: false
isDrawnNaturally: false
isSignature: false
lineWidth: 5
lines: Array [ (12) […] ]
name: "01F98T156YNAP5N28MAKKQJ2Y4"
noPrint: false
noRotate: false
noView: false
noZoom: false
note: null
opacity: 1
pageIndex: 0
pdfObjectId: null
strokeColor: Object { r: 34, g: 147, b: 251 }
updatedAt: "2021-06-28T07:58:37.181Z"
Unfortunately I have to pass the pspdfkit function toSerializeObject, fromSerializeObject
to be able to create and get annotations displayed, but they give me the error unsupported type
when I create them and unsupported type change
when I try to re-create them, just using JSON.parse / JSON.stringify doesn't do the trick and it won't let me use instance.create
to render created annotations to the DOM when a user has closed the viewer and re-opened it again.
So, the documentation is garbage, not gonna lie... The method is actually a function, the array retrieved is an object etc etc.
The answer for how to get what I was looking for is:
instance.addEventListener("annotations.create", createdNote => {
const note = createdNote.get(0)
const serializedObjectNote = toSerializableObject(note)
const noteJson = JSON.stringify(serializedObjectNote)
if (!isLoadingNotes.current) {
dispatch(createPdfNote(noteJson, documentID))
.then(
err => {
if (!err) {
setSnackContent({
severity: "success",
message: "Annotation successfully created",
})
}
})
}
})