PDF is not panning with widgets propageted by pageOverlaysBuilder

[DrejerisLiudas]

On mobile devices, when widgets are added to pageOverlaysBuilder, if I tap on added widget and start panning, it's not working. If pan starting on PDF page itself, everything works.

pageOverlaysBuilder: (
    BuildContext context,
    Rect pageRect,
    PdfRx.PdfPage page,
  ) {
    final Rect? viewport = _viewerController?.visibleRect;
    final List<Rect>? pages =
        _viewerController?.layout.pageLayouts;

    if (viewport == null ||
        pages == null ||
        !pages[page.pageNumber - 1].overlaps(viewport)) {
      return const [];
    }

    final inputs = _inputsByPage[page.pageNumber] ?? const [];

    return _buildPdfInputItems(
      inputs,
      pageRect.width,
      pageRect.height,
    );
  },

List<Widget> _buildPdfInputItems(
    List<DocumentInput> inputs,
    double pageWidth,
    double pageHeight,
  ) {
    List<Widget> result = [];

    for (var input in inputs) {
      if (widget.signDate != null) {
        Widget? inputView = _buildSingleInputItem(
          input,
          pageWidth,
          pageHeight,
          widget.signDate!,
        );

        if (inputView != null) {
          result.add(inputView);
        }
      }
    }

    return result;
  }

Widget? _buildSingleInputItem(
    DocumentInput item,
    double renderPageWidth,
    double renderedPageHeight,
    DateTime signDate,
  ) {
    int originalDocWidth = item.signature.pageSize.x;
    int originalDocHeight = item.signature.pageSize.y;
    int originalTopLeftX = item.signature.topLeft.x;
    int originalTopLeftY = item.signature.topLeft.y;
    int originalBottomRightX = item.signature.bottomRight.x;
    int originalBottomRightY = item.signature.bottomRight.y;
    item.proportionX = renderPageWidth / originalDocWidth;
    item.proportionY = renderedPageHeight / originalDocHeight;
    double left = (originalTopLeftX * item.proportionX);
    double top = (originalTopLeftY * item.proportionY);
    double actualWidth =
        ((originalBottomRightX - originalTopLeftX) * item.proportionX);
    double actualHeight =
        ((originalBottomRightY - originalTopLeftY) * item.proportionY);

    DocumentInputWidget documentInput = DocumentInputFactory.makeDocumentInput(
      documentInput: item,
      actualHeight: actualHeight,
      actualWidth: actualWidth,
      screenWidth: renderPageWidth,
      inputUpdateListener: this,
      signDate: signDate,
      biometricValidation: widget.biometricValidation,
    );

    return Positioned(
      left: left,
      top: top,
      child: Container(
        key: Key(item.signature.name),
        alignment: Alignment.center,
        width: actualWidth,
        height: actualHeight,
        child: documentInput,
      ),
    );
  }

[espresso3389]

Typically, such widgets eats touch events because they handles such events.

Adding IgnorePointer or such (that explicitly implements hitTest) will prevent the widget from handling touch events though it may make the widget completely useless...

[DrejerisLiudas]

@espresso3389 Maybe i can somehow use only tap event on the overlay widgets and pass others to viewer?

[espresso3389]

Implemented the library-side solution as PdfOverlayInteractionRegion in commit f03b53e.

The main idea is that overlay widgets should stay pointer-transparent, so they do not compete with PdfViewer in Flutter's gesture arena. PdfViewer keeps owning pan, pinch zoom, wheel zoom, text selection, and link handling. After the viewer classifies a discrete gesture, it dispatches tap-like interactions to registered overlay regions.

Supported interactions for now are:

• tap
• double tap
• long press
• secondary tap

Each callback returns true when it handled the interaction, or false to let lower overlay regions, links, or the viewer handle it. This is also used internally now: link handling no longer needs the previous full-view GestureDetector tap hack, and it is routed through the same overlay interaction mechanism.

Intended usage is to wrap page or viewer overlays from pageOverlaysBuilder / viewerOverlayBuilder with PdfOverlayInteractionRegion when the overlay needs these discrete gestures but should still allow normal viewer panning and zooming over it.

A simple page overlay example:

PdfViewer.uri(
  uri,
  params: PdfViewerParams(
    pageOverlaysBuilder: (context, pageRect, page) => [
      Positioned(
        left: 24,
        top: 24,
        child: PdfOverlayInteractionRegion(
          onTap: (details) {
            debugPrint('Tapped overlay on page ${page.pageNumber}');
            return true; // handled by the overlay
          },
          onLongPress: (details) {
            debugPrint('Long pressed overlay on page ${page.pageNumber}');
            return true;
          },
          child: DecoratedBox(
            decoration: BoxDecoration(color: Colors.yellowAccent),
            child: Padding(
              padding: EdgeInsets.all(8),
              child: Text('Overlay'),
            ),
          ),
        ),
      ),
    ],
  ),
);

The overlay can be tapped/long-pressed, while dragging or pinching over the same visual area still goes to the viewer.

[espresso3389]

The update for this issue has been released in pdfrx v2.4.0.

PdfOverlayInteractionRegion is now available for tap-like interactions on page/viewer overlays without blocking viewer pan, zoom, text selection, or link handling.

Written by Codex