Make programmatically added annotations visible in browser

[Excubitor]

is there currently a way to make annotations manually added to the annotationstorage visible in the pdfjs viewer?

I can’t quite grasp how to reinitialize the page so that annotation in the storage gets rendered on screen.

[calixteman]

The storage is just used to add the new properties which will be used when the pdf is printed/saved.
Originally it has been designed for forms, for example, to add a value entered by a user in a field, and then when the pdf is printed/saved the new value must be taken into account.
After it has been extended to support adding new annotations: the storage contains some serialized elements which can be deserialized (for example when on copy/paste we serialize/deserialize the annotation); for example you can have a look on:
https://github.com/mozilla/pdf.js/blob/master/src/display/editor/stamp.js#L515-L594

[lasseborly]

Yeah you need to handle that yourself. I'm just iterating through all inputs, textareas etc. and updating the value that way, so that it's the same as in the annotationstorage.

[Osiris-Team]

@calixteman I am trying to store annotations into localStorage so that I can keep them between site reloads, how would I do that?

[lasseborly]

There is no functionality for that built in. You need to manage that yourself and manually re-populate the input, textareas and whatnot.

I am just gonna share my full implementation of this for others too see. Try to look past the specificities.
I do not have time to make an easier to digest example.

/** @type {boolean} */
const userId = JSON.parse(document.getElementById("user-id").textContent);

/**
 * @typedef {Object} Character
 * @property {number} id
 * @property {string} character_name
 * @property {string} character_sheet
 * @property {Object} fields
 * @property {number} user
 */

/** @type {Character} */
const character = JSON.parse(document.getElementById("character").textContent);

/**
 * Most editing should only be enabled if the user looking
 * at the character is the one who owns it.
 */
const userOwned = character.user === userId;

// PDFViewerApplication.pdfDocument.annotationStorage
let storage;

/**
 * We need to make sure that we do not load the field values before
 * all pages have finsihed loading their annotation editor layers (inputs etc.)
 */
let editorLayersLoaded = 0;

/**
 * We store the id but need to get the DOM node from time to time.
 * @param {string} id
 * @returns
 */
function getFieldNode(id) {
  return document.querySelector(`[data-element-id="${id}"]`);
}

function setFields(fields) {
  for (const field in fields) {
    id = fields[field].id;
    node = getFieldNode(id);
    value = fields[field].value;

    if (node.type !== "checkbox") {
      node.value = value;
      storage.setValue(id, { value: value });
    }
    if (node.type === "checkbox") {
      node.checked = Boolean(value);
      storage.setValue(id, { value: Boolean(value) });
    }
  }
}

document.addEventListener("webviewerloaded", () => {
  PDFViewerApplicationOptions.set("disablePreferences", true);
  PDFViewerApplicationOptions.set("enableScripting", false);
  PDFViewerApplicationOptions.set("isEvalSupported", false);

  PDFViewerApplicationOptions.set(
    "defaultUrl",
    `/static/sheets/${character.character_sheet}.pdf`
  );

  PDFViewerApplication.initializedPromise.then(() => {
    PDFViewerApplication.eventBus.on("metadataloaded", () => {
      PDFViewerApplication.setTitle(character.character_name);

      // Sets the name of the downloaded file
      const slug = location.pathname
        .split("/")
        .filter((path) => path)
        .slice(-1)[0];
      PDFViewerApplication._contentDispositionFilename = `${slug}.pdf`;
    });

    PDFViewerApplication.eventBus.on(
      "annotationeditorlayerrendered",
      async () => {
        editorLayersLoaded += 1;
        if (editorLayersLoaded !== PDFViewerApplication.pagesCount) return;

        storage = PDFViewerApplication.pdfDocument.annotationStorage;
        setFields(character.fields);
        const field_objects =
          await PDFViewerApplication.pdfDocument.getFieldObjects();

        const fields_nodes = Object.values(field_objects).map((field) => {
          const node = getFieldNode(field[0].id);
          return node;
        });

        if (userOwned) {
          for (const node of fields_nodes) {
            if (node.value) {
              node.classList.add("annotation-layer-field__modified");
            }

            node.addEventListener("input", (event) => {
              if (event.target.value) {
                event.target.classList.add("annotation-layer-field__modified");
              } else {
                /**
                 * Keep the highlight for fields that aren't modified since it makes the
                 * fields easier to find.
                 */
                event.target.classList.remove(
                  "annotation-layer-field__modified"
                );
              }
            });

            node.setAttribute(
              "hx-post",
              `/update-character-field/${character.id}/`
            );
            if (node.type !== "checkbox") {
              node.setAttribute("hx-trigger", "keyup changed delay:250ms");
            }
            htmx.process(node);
          }
        } else {
          /**
           * If the user isn't the one who own's the character we do not want to
           * allow them to edit the fields. This is also checked in the BE to make
           * sure that the fields can't actually be changed.
           */
          for (const field of fields_nodes) {
            //there might be an official way of disabling this
            field.disabled = true;
            field.classList.add("annotation-layer-field__disabled");
          }
        }
      }
    );
  });
});

[Osiris-Team]

Thanks a lot will give it a try!

[Excubitor]

Trying to get it to work, but not making it so far.

[lasseborly]

Could you share the code you have @Excubitor ?

[Excubitor]

Not really a javascript guy. I'm trying to be able to reload annotations in a maui web view that loads the pdfjs official viewer. I can save and restore annotationstorage from the database (JSON.stringify/JSON.parse). I know I need to re-populate the inputs. I don't need to check the user. I allready know it is the correct user.

I have tried to use your code but haven't figured out what I should use for character and fields. I have a loaded a pdf and the restored data in the annotationstorage.

[Osiris-Team]

@lasseborly having the same issue, is there a way this can be turned into more like an API that provides an interface to add/remove/list/update annotations?

[Osiris-Team]

Im also not sure if this works with the latest version, especially PDFViewerApplication.eventBus.on( "annotationeditorlayerrendered", doesnt seem to trigger when a new annotation is added (or even at all).

And PDFViewerApplication.pdfDocument.getFieldObjects() seems to return nothing.

The closest thing I found is listing the editor types: pdfjsLib.AnnotationEditorLayer.#editorTypes.forEach((k,v)=>{console.log(k); console.log(v);})

[Osiris-Team]

@Excubitor Update: Found a way to programmatically add fields/editors/annotations (however you want to call them):
https://github.com/Osiris-Team/pdf.js-utils

TODO for motivated people: make add function support drawings and images.

Tested on: PDF 110dd61fd57444010b1ab5ff38782f0f [1.4 pdfeTeX-1.21a / TeX] (PDF.js: 4.1.378 [a208d6b])

[Osiris-Team]

see https://github.com/Osiris-Team/pdf.js-utils

[a-gss]

Well as I understand it, you're polling each 100ms the annotationEditorLayer, while I trigger on its creation. This always works instantly, except for the two pages that are loaded at startup:

• the page 1
• the last-time-you-left-the-pdf page
  ...and they sometime/sometime not trigger the "annotationEditorLayerRendered" event, thus not loading the highlights.

[a-gss]

also, you're working around PDF.js, while I directly modify its source code to add some setters/getters and change some functions. So i can't really make a PR on your repo...

[Osiris-Team]

Ah I understand, when will this fix be available in the main repo?

[a-gss]

Im not a PDF.js dev 🤣
I just modified the source code of PDF.js according to my project needs