Customizing the Annotation Inspector in Our Viewer

You can customize the PSPDFKit SDK to show an annotation inspector in a popup whenever you select an annotation. If you want to see an example, please head over to our demo.

Try for Free <a class=“pE pL pJ pV”href=“https://pspdfkit.com/demo/annotations-inspector” target=”_blank”>Launch Demo

To keep this guide easy to follow, we’ll implement an inspector for shape annotations that has the option to change the color of the stroke. We’ll use PSPDFKit.Container#annotationTooltipCallback to add a tooltip that’s visible when selecting any shape annotation:

PSPDFKit.load({
    ...defaultConfiguration,
    styleSheets: ["./style.css"],
    annotationTooltipCallback: (annotation) => {
      if (annotation instanceof PSPDFKit.Annotations.ShapeAnnotation) {
        const label = instance.contentDocument.createElement("label");

        label.setAttribute("htmlFor", "stroke");
        label.classList.add("stroke-color-label");
        label.innerHTML = "<span>Stroke Color</span>";

        const input = instance.contentDocument.createElement("input");

        input.setAttribute("value", annotation.strokeColor.toHex());
        input.setAttribute("type", "color");
        input.setAttribute("id", "stroke");
        label.appendChild(input);

        input.type = "color";
        input.addEventListener("change", (e) => {
          const _ann = annotation.set(
            "strokeColor",
            new PSPDFKit.Color(hexToRgb(e.target.value))
          );

          instance.update(_ann);
        });

        const toolItem = {
          type: "custom",
          node: label,
          onPress: function () {
            console.log(annotation);
          },
        };

        return [toolItem];
      } else {
        return [];
      }
    },
    initialViewState: new PSPDFKit.ViewState({
      enableAnnotationToolbar: false,
    }),
  }).then((_instance) => {
    instance = _instance;

    return instance;
  });
}

function hexToRgb(hex) {
  const numberPart = hex.split("#")[1];
  const number = parseInt(numberPart, 16);

  return {
    r: (number >> 16) & 255,
    g: (number >> 8) & 255,
    b: number & 255,
  };
}

.stroke-color-label {
	color: white;
	display: flex;
	width: 200px;
	justify-content: space-between;
	padding: 10px;
	border-radius: 3px;
}

The code above will result in the following:

Similarly, you can add other elements that control the different properties of the annotation.