1

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.

tripleee
  • 175,061
  • 34
  • 275
  • 318
BackSlashHaine
  • 119
  • 8

1 Answers1

1

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",
                        })
                      }
                    })
              }
            })
BackSlashHaine
  • 119
  • 8