Customizing the annotation inspector in our viewer

You can customize the Nutrient 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 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 NutrientViewer.Container#annotationTooltipCallback to add a tooltip that’s visible when selecting any shape annotation:

NutrientViewer.load({
    ...defaultConfiguration,
    styleSheets: ["./style.css"],
    annotationTooltipCallback: (annotation) => {
      if (annotation instanceof NutrientViewer.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 NutrientViewer.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 NutrientViewer.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,
  };
}

The code above will result in the following:

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