Disable Resize of Annotations

Q: How do I disable resizing of certain annotation types?

A: Here’s how you would disable resizing of an ink signature:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
// Customize PSPDFKit.Options here

PSPDFKit.load({
  container: "#container",
  pdf: "./assets/example.pdf",
  licenseKey: ""
}).then(instance => {
  let isInkSignatureSelected = false;
  let draggingInkSignature = false;
  let resizingInkSignature = false;

  instance.addEventListener(
    "annotations.press",
    event => {
      isInkSignatureSelected =
        event.annotation instanceof PSPDFKit.Annotations.InkAnnotation &&
        event.annotation.isSignature;

      if (!isInkSignatureSelected) {
        draggingInkSignature = false;
        resizingInkSignature = false;
        return;
      }

      const { nativeEvent } = event;
      let target = nativeEvent.target;
      if (target.matches(".PSPDFKit-Resize-Anchor")) {
        // ".PSPDFKit-Resize-Anchor" is present on our internal resize handle
        resizingInkSignature = true;
        draggingInkSignature = false;
        instance.contentDocument.addEventListener(
          "pointerup",
          () => {
            resizingInkSignature = false;
          },
          { capture: true, once: true }
        );
      } else if (target.matches(".PSPDFKit-Selection-Outline-Border")) {
        // ".PSPDFKit-Selection-Outline-Border" is present on our internal drag handle
        draggingInkSignature = true;
        instance.contentDocument.addEventListener(
          "pointerup",
          () => {
            draggingInkSignature = false;
          },
          { capture: true, once: true }
        );
      } else {
        draggingInkSignature = false;
      }
    },
    true
  );

  instance.contentDocument.addEventListener(
    "pointermove",
    event => {
      if (resizingInkSignature) {
        // avoid running computation is not needed
        event.stopImmediatePropagation();
      } else {
        if (draggingInkSignature) {
          return;
        }
        let target = event.target;
        const annotation = instance.getSelectedAnnotation();
        const isInkSignatureSelected =
          annotation &&
          annotation instanceof PSPDFKit.Annotations.InkAnnotation;
        if (
          !draggingInkSignature &&
          isInkSignatureSelected &&
          target.matches(".PSPDFKit-Selection-Outline-Border")
        ) {
          draggingInkSignature = true;
          event.stopImmediatePropagation();
        }
      }
    },
    { capture: true }
  );
});