Override Ink Signature dialog

Q: How can I override the Ink Signature default dialog?

A: You can intercept the ink signature workflow completely by preventing the default behaviour when pressing an annotation and using your own dialog. This example mimics the default behaviour and can be modified as needed:

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
PSPDFKit.load(configuration).then(instance => {
  function fitIn(size, containerSize) {
    const { width, height } = size;

    const widthRatio = containerSize.width / width;
    const heightRatio = containerSize.height / height;

    const ratio = Math.min(widthRatio, heightRatio);

    return {
      width: width * ratio,
      height: height * ratio
    };
  }

  let currentInkSignatureWidget;

  instance.addEventListener("annotations.press", event => {
    if (event.annotation instanceof PSPDFKit.Annotations.WidgetAnnotation) {
      currentInkSignatureWidget = event.annotation;
      event.preventDefault();
      instance.setViewState(viewState =>
        viewState.set("interactionMode", PSPDFKit.InteractionMode.INK_SIGNATURE)
      );
    }
  });

  instance.addEventListener("annotations.create", annotations => {
    const annotation = annotations.first();
    if (
      annotation instanceof PSPDFKit.Annotations.InkAnnotation &&
      annotation.isSignature
    ) {
      if (currentInkSignatureWidget) {
        const newSize = fitIn(
          {
            width: annotation.boundingBox.width,
            height: annotation.boundingBox.height
          },
          {
            width: currentInkSignatureWidget.boundingBox.width,
            height: currentInkSignatureWidget.boundingBox.height
          }
        );
        const resizeRatio = newSize.width / annotation.boundingBox.width;
        const newLeft =
          currentInkSignatureWidget.boundingBox.left +
          currentInkSignatureWidget.boundingBox.width / 2 -
          newSize.width / 2;
        const newTop =
          currentInkSignatureWidget.boundingBox.top +
          currentInkSignatureWidget.boundingBox.height / 2 -
          newSize.height / 2;
        const newLines = annotation.lines.map(line => {
          return line.map(point => {
            return new PSPDFKit.Geometry.DrawingPoint({
              x:
                newLeft + (point.x - annotation.boundingBox.left) * resizeRatio,
              y: newTop + (point.y - annotation.boundingBox.top) * resizeRatio
            });
          });
        });
        const newBoundingBox = new PSPDFKit.Geometry.Rect({
          left: newLeft,
          top: newTop,
          width: newSize.width,
          height: newSize.height
        });
        instance.updateAnnotation(
          annotation
            .set("boundingBox", newBoundingBox)
            .set("lines", newLines)
            .set("lineWidth", annotation.lineWidth * resizeRatio)
        );
        currentInkSignatureWidget = null;
      }
    }
  });
});

This has been tested with PSPDFKit for Web 2019.3.1.