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, check out our demo.

Try for Free Launch Demo

In this guide, you’ll implement an inspector for shape annotations that has the option to change the color of the stroke. You’ll use NutrientViewer.Container#annotationTooltipCallback to add a tooltip that’s visible when selecting any shape annotation:

let instance;


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.

0:00
0:00

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