Customize PDF annotation tooltips using JavaScript

1
import PSPDFKit from "@nutrient-sdk/viewer";
2

3
// Keep track of the current instance so that we
4
// can use it inside the annotation tooltip callback.
5
let instance = null;
6

7
export function load(defaultConfiguration) {
8
  return PSPDFKit.load({
9
    ...defaultConfiguration,
10
    annotationTooltipCallback: duplicateAnnotationTooltipCallback,
11
  }).then((_instance) => {
12
    instance = _instance;
13

14
    return instance;
15
  });
16
}
17

18
function duplicateAnnotationTooltipCallback(annotation) {
19
  // Duplicating does not make sense for a markup annotation
20
  if (annotation instanceof PSPDFKit.Annotations.MarkupAnnotation) {
21
    return [];
22
  }
23

24
  // This is the tooltip item that will be used.
25
  const duplicateItem = {
26
    type: "custom",
27
    title: "Duplicate",
28
    id: "tooltip-duplicate-annotation",
29
    className: "TooltipItem-Duplication",
30
    onPress: async () => {
31
      // For the new annotation, we will copy the current one but
32
      // translate the annotation for 50px so that our users see the
33
      // duplicated annotation.
34
      const offset = 50;
35
      const offsetTranslation = new PSPDFKit.Geometry.Point({
36
        x: offset,
37
        y: offset,
38
      });
39

40
      const newBoundingBox =
41
        annotation.boundingBox.translate(offsetTranslation);
42

43
      // To make duplication work, we also need to remove the ID
44
      // of the annotation.
45
      let duplicatedAnnotation = annotation
46
        .set("id", null)
47
        .set("boundingBox", newBoundingBox);
48

49
      // When it's an InkAnnotation, we not only need to move the bounding box
50
      // but also change the coordinates of the line. Since an ink annotation
51
      // could contain of multiple segments, we need go change each segment.
52
      // You can read more about the structure of InkAnnotations here:
53
      // https://www.nutrient.io/api/web/PSPDFKit.Annotations.InkAnnotation.html
54
      if (duplicatedAnnotation instanceof PSPDFKit.Annotations.InkAnnotation) {
55
        duplicatedAnnotation = duplicatedAnnotation.set(
56
          "lines",
57
          duplicatedAnnotation.lines.map((line) => {
58
            return line.map((point) => point.translate(offsetTranslation));
59
          })
60
        );
61
      }
62

63
      // For some shape annotations, we may not only need to move the bounding box
64
      // but also change the coordinates of the shape, defined by the `startPoint`
65
      // and `endPoint` properties for line, and `points` for polyline and
66
      // polygon annotations, as well as `cloudyBorderInset` for annotations
67
      // with a cloudy border set.
68
      // You can read more about the structure of shape annotations here:
69
      // https://www.nutrient.io/api/web/PSPDFKit.Annotations.LineAnnotation.html
70
      // https://www.nutrient.io/api/web/PSPDFKit.Annotations.PolylineAnnotation.html
71
      // https://www.nutrient.io/api/web/PSPDFKit.Annotations.PolygonAnnotation.html
72
      if (duplicatedAnnotation instanceof PSPDFKit.Annotations.LineAnnotation) {
73
        duplicatedAnnotation = duplicatedAnnotation
74
          .set(
75
            "startPoint",
76
            duplicatedAnnotation.startPoint.translate(offsetTranslation)
77
          )
78
          .set(
79
            "endPoint",
80
            duplicatedAnnotation.endPoint.translate(offsetTranslation)
81
          );
82
      }
83

84
      if (
85
        duplicatedAnnotation instanceof
86
          PSPDFKit.Annotations.PolygonAnnotation ||
87
        duplicatedAnnotation instanceof PSPDFKit.Annotations.PolylineAnnotation
88
      ) {
89
        duplicatedAnnotation = duplicatedAnnotation.set(
90
          "points",
91
          duplicatedAnnotation.points.map((point) =>
92
            point.translate(offsetTranslation)
93
          )
94
        );
95
      }
96

97
      // In the end, we just use `createAnnotation` on our
98
      // Nutrient Web SDK instance.
99
      await instance.create(duplicatedAnnotation);
100
    },
101
  };
102

103
  return [duplicateItem];
104
}