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.

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.