Allow horizontal pages

[dajack05]

I'm still pretty new to pdfrx, so I might just be missing something, but is there a way to lay pages out horizontally?

If not, that would be a nice feature to have.

[espresso3389]

Basically, PdfViewerParams.layoutPages function is to layout pages with custom logic. But it still lacks of page caching control and not fully working so far.

[TarasBounty]

@espresso3389 could you provide sample please? I also trying to move from your previous package pdf_render and there I did via documentBuilder and PdfPageView:

   Widget _previewBuilder(BuildContext context, PdfDocument? pdfDocument, int pageCount) 
        {
        return LayoutBuilder(
         builder: (context, constraints) => ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: pageCount,
        itemBuilder: (context, index) => Container(
          child: PdfPageView(
            pdfDocument: pdfDocument,
            pageNumber: index + 1,
          ),
        ),
      ),
    );
  }

[espresso3389]

@TarasBounty

The following code is the simplest layoutPages function that realizes horizontal layout with 0.3.6:

PdfViewer.uri(
  Uri.parse('https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf'),
  controller: controller,
  displayParams: PdfViewerParams(
    layoutPages: (pages, templatePage, params) {
      final height = pages.where((p) => p != null).fold(
              templatePage.height,
              (prev, page) => max(prev, page!.height)) +
          params.margin * 2;
      final pageLayouts = <Rect>[];
      double x = params.margin;
      for (var page in pages) {
        page ??= templatePage; // in case the page is not loaded yet
        pageLayouts.add(
          Rect.fromLTWH(
            x,
            (height - page.height) / 2, // center vertically
            page.width,
            page.height,
          ),
        );
        x += page.width + params.margin;
      }
      return PdfPageLayout(
        pageLayouts: pageLayouts,
        documentSize: Size(x, height),
      );
    },
  ),
),

If you use the older plugin version, there're small breaking changes on the API.

[TarasBounty]

@espresso3389 How I can change size of pages? I need to do small pages with height 60 and width 30 for example

[espresso3389]

@TarasBounty
Basically, the actual page size is calculated from PdfViewer's size. So the solution is just wrap PdfViewer with SizedBox to controll the PdfViewer's height.

By default, the margin is 8 pixel. So height should be 60+8*2.
For the page widths, because they're calculated from the original page aspect ratio, it's not controllable in the case.
And, it seems you don't want user to change the zoom ratio, explicitly disable scaleEnabled there:

SizedBox(
  height: 60+8*2,
  child: PdfViewer.uri(...),
  params: PdfViewerParams(
    scaleEnabled: false,
  ),
),

[TarasBounty]

@espresso3389 I just want to say that I already used SizedBox(height:60,...) with my sample and it renders like that (one page takes full width and I can scroll in any direction to see other pages or scroll down to see curent page):

I've tried cope and paste your sample above but it not showing pdf file it's just emptu box with 60 height. Maybe a problem with PdfViewer.uri()?
Is it works on your side?

[espresso3389]

On README.md on 0.4.2 illustrates how to do horizontal layout.

But for your purpose, I just introduced PdfViewerParams.enableRealSizeRendering. You had better set it to false to improve the performance.

[espresso3389]

0.4.2 also has breaking changes and some "key" features, so the final code will be like:

SizedBox(
  height: 100,
  child: PdfViewer.uri(
    Uri.parse(
        'https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf'),
    controller: controller,
    // IMPORTANT: fit thumbnails into the SizedBox's view
    anchor: PdfPageAnchor.all,
    displayParams: PdfViewerParams(
      // disable scale changes by user
      scaleEnabled: false,
      // disable high resolution rendering (because we just use thumbnails)
      enableRealSizeRendering: false,
      // code to display pages horizontally
      layoutPages: (pages, params) {
        final height = pages.fold(
                0.0, (prev, page) => max(prev, page.height)) +
            params.margin * 2;
        final pageLayouts = <Rect>[];
        double x = params.margin;
        for (var page in pages) {
          pageLayouts.add(
            Rect.fromLTWH(
              x,
              (height - page.height) / 2, // center vertically
              page.width,
              page.height,
            ),
          );
          x += page.width + params.margin;
        }
        return PdfPageLayout(
          pageLayouts: pageLayouts,
          documentSize: Size(x, height),
        );
      },
    ),
  ),
),

[TarasBounty]

0.4.2 also has breaking changes and some "key" features, so the final code will be like:

SizedBox(
  height: 100,
  child: PdfViewer.uri(
    Uri.parse(
        'https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf'),
    controller: controller,
    // IMPORTANT: fit thumbnails into the SizedBox's view
    anchor: PdfPageAnchor.all,
    displayParams: PdfViewerParams(
      // disable scale changes by user
      scaleEnabled: false,
      // disable high resolution rendering (because we just use thumbnails)
      enableRealSizeRendering: false,
      // code to display pages horizontally
      layoutPages: (pages, params) {
        final height = pages.fold(
                0.0, (prev, page) => max(prev, page.height)) +
            params.margin * 2;
        final pageLayouts = <Rect>[];
        double x = params.margin;
        for (var page in pages) {
          pageLayouts.add(
            Rect.fromLTWH(
              x,
              (height - page.height) / 2, // center vertically
              page.width,
              page.height,
            ),
          );
          x += page.width + params.margin;
        }
        return PdfPageLayout(
          pageLayouts: pageLayouts,
          documentSize: Size(x, height),
        );
      },
    ),
  ),
),

Thank you so much!

[TarasBounty]

@espresso3389 One more point: Is it possible to align items to the left side?
Cause if a document has only one-two pages it is centered:

[TarasBounty]

@espresso3389 One more point: Is it possible to align items to the left side? Cause if a document has only one-two pages it is centered:

@espresso3389

[espresso3389]

Ah, sorry, I'm forget the centering issue and reopen the issue anyway.
I'm thinking how to do that...

[espresso3389]

@TarasBounty for the centering issue, I created another issue #32.