diff --git a/src/platform/packages/private/kbn-reporting/public/share/shared/get_png_pdf_job_params.ts b/src/platform/packages/private/kbn-reporting/public/share/shared/get_png_pdf_job_params.ts index 966ba0f830862..f4e05ef822a51 100644 --- a/src/platform/packages/private/kbn-reporting/public/share/shared/get_png_pdf_job_params.ts +++ b/src/platform/packages/private/kbn-reporting/public/share/shared/get_png_pdf_job_params.ts @@ -11,14 +11,19 @@ import type { ReportParamsGetter, ReportParamsGetterOptions } from '../../types' import type { JobParamsProviderOptions } from '../share_context_menu'; const getBaseParams = (objectType: string) => { + const viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); + const el = document.querySelector('[data-shared-items-container]'); const { height, width } = el ? el.getBoundingClientRect() : { height: 768, width: 1024 }; - const dimensions = { height, width }; + return { objectType, layout: { id: 'preserve_layout' as 'preserve_layout' | 'print', - dimensions, + dimensions: { + height, + width: viewportWidth || width, + }, }, }; }; diff --git a/x-pack/platform/plugins/shared/screenshotting/server/browsers/chromium/driver.test.ts b/x-pack/platform/plugins/shared/screenshotting/server/browsers/chromium/driver.test.ts index ecb1cb3e2e439..14b26234796c5 100644 --- a/x-pack/platform/plugins/shared/screenshotting/server/browsers/chromium/driver.test.ts +++ b/x-pack/platform/plugins/shared/screenshotting/server/browsers/chromium/driver.test.ts @@ -58,6 +58,10 @@ describe('chromium driver', () => { }; }); + afterEach(() => { + jest.resetAllMocks(); + }); + it('return screenshot with preserve layout option', async () => { const driver = new HeadlessChromiumDriver( mockScreenshotModeSetup, @@ -105,4 +109,28 @@ describe('chromium driver', () => { `); expect(result).toEqual(Buffer.from(`you won't believe this one weird screenshot`, 'base64')); }); + + it('sets the PDF image size', async () => { + const driver = new HeadlessChromiumDriver( + mockScreenshotModeSetup, + mockConfig, + mockBasePath, + mockPage + ); + + const layout = new PreserveLayout({} as Size); + + const testSpy = jest.spyOn(layout, 'setPdfImageSize'); + + await driver.screenshot({ + elementPosition: { + boundingClientRect: { top: 200, left: 10, height: 10, width: 100 }, + scroll: { x: 100, y: 300 }, + }, + layout, + }); + + expect(testSpy).toHaveBeenCalledTimes(1); + expect(testSpy).toHaveBeenCalledWith({ height: 10, width: 100 }); + }); }); diff --git a/x-pack/platform/plugins/shared/screenshotting/server/browsers/chromium/driver.ts b/x-pack/platform/plugins/shared/screenshotting/server/browsers/chromium/driver.ts index 79983e439cf9a..8cdd4058b23ea 100644 --- a/x-pack/platform/plugins/shared/screenshotting/server/browsers/chromium/driver.ts +++ b/x-pack/platform/plugins/shared/screenshotting/server/browsers/chromium/driver.ts @@ -271,6 +271,11 @@ export class HeadlessChromiumDriver { const { boundingClientRect, scroll } = elementPosition; + layout.setPdfImageSize({ + height: boundingClientRect.height, + width: boundingClientRect.width, + }); + const screenshot = await this.page.screenshot({ clip: { x: boundingClientRect.left + scroll.x, diff --git a/x-pack/platform/plugins/shared/screenshotting/server/formats/pdf/pdf_maker/integration_tests/pdfmaker.test.ts b/x-pack/platform/plugins/shared/screenshotting/server/formats/pdf/pdf_maker/integration_tests/pdfmaker.test.ts index b94cf440d757f..1ab7db28f34da 100644 --- a/x-pack/platform/plugins/shared/screenshotting/server/formats/pdf/pdf_maker/integration_tests/pdfmaker.test.ts +++ b/x-pack/platform/plugins/shared/screenshotting/server/formats/pdf/pdf_maker/integration_tests/pdfmaker.test.ts @@ -28,6 +28,7 @@ describe('PdfMaker', () => { beforeEach(() => { layout = createMockLayout(); + layout.setPdfImageSize({ height: 100, width: 100 }); logger = loggingSystemMock.createLogger(); packageInfo = { branch: 'screenshot-test', diff --git a/x-pack/platform/plugins/shared/screenshotting/server/layouts/base_layout.ts b/x-pack/platform/plugins/shared/screenshotting/server/layouts/base_layout.ts index 52551ffdabb16..bd92c03af5e2e 100644 --- a/x-pack/platform/plugins/shared/screenshotting/server/layouts/base_layout.ts +++ b/x-pack/platform/plugins/shared/screenshotting/server/layouts/base_layout.ts @@ -16,7 +16,7 @@ export interface ViewZoomWidthHeight { export interface PdfImageSize { width: number; - height?: number; + height: number; } export interface PageSizeParams { @@ -40,6 +40,7 @@ export abstract class BaseLayout { } public abstract getPdfImageSize(): PdfImageSize; + public abstract setPdfImageSize({ height, width }: PdfImageSize): void; public abstract getPdfPageOrientation(): 'portrait' | 'landscape' | undefined; diff --git a/x-pack/platform/plugins/shared/screenshotting/server/layouts/canvas_layout.ts b/x-pack/platform/plugins/shared/screenshotting/server/layouts/canvas_layout.ts index c3fdd504cf81e..b1d4562fe59c9 100644 --- a/x-pack/platform/plugins/shared/screenshotting/server/layouts/canvas_layout.ts +++ b/x-pack/platform/plugins/shared/screenshotting/server/layouts/canvas_layout.ts @@ -8,6 +8,7 @@ import type { LayoutSelectorDictionary, Size } from '../../common/layout'; import { DEFAULT_SELECTORS } from '.'; import type { Layout } from '.'; +import type { PdfImageSize } from './base_layout'; import { BaseLayout } from './base_layout'; // FIXME - should use zoom from capture config @@ -25,6 +26,7 @@ export class CanvasLayout extends BaseLayout implements Layout { public readonly width: number; private readonly scaledHeight: number; private readonly scaledWidth: number; + private imageSize: PdfImageSize = { height: 0, width: 0 }; public hasHeader: boolean = false; public hasFooter: boolean = false; @@ -65,11 +67,12 @@ export class CanvasLayout extends BaseLayout implements Layout { }; } + public setPdfImageSize({ height, width }: PdfImageSize): void { + this.imageSize = { height, width }; + } + public getPdfImageSize() { - return { - height: this.height, - width: this.width, - }; + return this.imageSize; } public getPdfPageSize(): Size { diff --git a/x-pack/platform/plugins/shared/screenshotting/server/layouts/create_layout.test.ts b/x-pack/platform/plugins/shared/screenshotting/server/layouts/create_layout.test.ts index 4c660ef8cad46..d55def96a7273 100644 --- a/x-pack/platform/plugins/shared/screenshotting/server/layouts/create_layout.test.ts +++ b/x-pack/platform/plugins/shared/screenshotting/server/layouts/create_layout.test.ts @@ -21,6 +21,10 @@ describe('Create Layout', () => { "hasHeader": true, "height": 16, "id": "preserve_layout", + "imageSize": Object { + "height": 0, + "width": 0, + }, "scaledHeight": 32, "scaledWidth": 32, "selectors": Object { @@ -78,6 +82,10 @@ describe('Create Layout', () => { "hasHeader": false, "height": 18, "id": "canvas", + "imageSize": Object { + "height": 0, + "width": 0, + }, "scaledHeight": 36, "scaledWidth": 36, "selectors": Object { diff --git a/x-pack/platform/plugins/shared/screenshotting/server/layouts/preserve_layout.test.ts b/x-pack/platform/plugins/shared/screenshotting/server/layouts/preserve_layout.test.ts index 03dbadd006a0f..01e1bbdfa5220 100644 --- a/x-pack/platform/plugins/shared/screenshotting/server/layouts/preserve_layout.test.ts +++ b/x-pack/platform/plugins/shared/screenshotting/server/layouts/preserve_layout.test.ts @@ -10,6 +10,8 @@ import { PreserveLayout } from './preserve_layout'; it('preserve layout uses default layout selectors', () => { const testPreserveLayout = new PreserveLayout({ width: 16, height: 16 }); + testPreserveLayout.setPdfImageSize({ height: 16, width: 16 }); + expect(testPreserveLayout.getCssOverridesPath()).toMatch(`layouts/preserve_layout.css`); expect(testPreserveLayout.getBrowserViewport()).toMatchObject({ height: 32, width: 32 }); expect(testPreserveLayout.getBrowserZoom()).toBe(2); diff --git a/x-pack/platform/plugins/shared/screenshotting/server/layouts/preserve_layout.ts b/x-pack/platform/plugins/shared/screenshotting/server/layouts/preserve_layout.ts index b56177484f7e5..79bf7d0f9b852 100644 --- a/x-pack/platform/plugins/shared/screenshotting/server/layouts/preserve_layout.ts +++ b/x-pack/platform/plugins/shared/screenshotting/server/layouts/preserve_layout.ts @@ -10,7 +10,7 @@ import type { LayoutSelectorDictionary, Size } from '../../common/layout'; import { DEFAULT_SELECTORS } from '.'; import type { Layout } from '.'; import { BaseLayout } from './base_layout'; -import type { PageSizeParams } from './base_layout'; +import type { PageSizeParams, PdfImageSize } from './base_layout'; // We use a zoom of two to bump up the resolution of the screenshot a bit. const ZOOM: number = 2; @@ -21,6 +21,7 @@ export class PreserveLayout extends BaseLayout implements Layout { public readonly width: number; private readonly scaledHeight: number; private readonly scaledWidth: number; + private imageSize: PdfImageSize = { height: 0, width: 0 }; constructor(size: Size, selectors?: Partial) { super('preserve_layout'); @@ -56,11 +57,12 @@ export class PreserveLayout extends BaseLayout implements Layout { }; } + public setPdfImageSize({ height, width }: PdfImageSize): void { + this.imageSize = { height, width }; + } + public getPdfImageSize() { - return { - height: this.height, - width: this.width, - }; + return this.imageSize; } public getPdfPageOrientation() { @@ -70,13 +72,16 @@ export class PreserveLayout extends BaseLayout implements Layout { public getPdfPageSize(pageSizeParams: PageSizeParams): CustomPageSize { return { height: - this.height + + this.imageSize.height + pageSizeParams.pageMarginTop + pageSizeParams.pageMarginBottom + pageSizeParams.tableBorderWidth * 2 + pageSizeParams.headingHeight + pageSizeParams.subheadingHeight, - width: this.width + pageSizeParams.pageMarginWidth * 2 + pageSizeParams.tableBorderWidth * 2, + width: + this.imageSize.width + + pageSizeParams.pageMarginWidth * 2 + + pageSizeParams.tableBorderWidth * 2, }; } } diff --git a/x-pack/platform/plugins/shared/screenshotting/server/layouts/print_layout.ts b/x-pack/platform/plugins/shared/screenshotting/server/layouts/print_layout.ts index cfb2acc6e8007..a6ff58e1a9ab1 100644 --- a/x-pack/platform/plugins/shared/screenshotting/server/layouts/print_layout.ts +++ b/x-pack/platform/plugins/shared/screenshotting/server/layouts/print_layout.ts @@ -10,6 +10,7 @@ import type { Layout } from '.'; import { DEFAULT_SELECTORS } from '.'; import type { LayoutParams, LayoutSelectorDictionary } from '../../common/layout'; import { DEFAULT_VIEWPORT } from '../browsers'; +import type { PdfImageSize } from './base_layout'; import { BaseLayout } from './base_layout'; export const getPrintLayoutSelectors: () => LayoutSelectorDictionary = () => ({ @@ -51,9 +52,12 @@ export class PrintLayout extends BaseLayout implements Layout { public getPdfImageSize() { return { width: 500, - }; + } as PdfImageSize; } + // Image size is not used in print layout + setPdfImageSize({ height, width }: PdfImageSize): void {} + public getPdfPageOrientation(): PageOrientation { return 'portrait'; } diff --git a/x-pack/platform/test/functional/apps/maps/group3/reports/baseline/geo_map_report.png b/x-pack/platform/test/functional/apps/maps/group3/reports/baseline/geo_map_report.png index dd659de56b8e5..d7ee9710d88ed 100644 Binary files a/x-pack/platform/test/functional/apps/maps/group3/reports/baseline/geo_map_report.png and b/x-pack/platform/test/functional/apps/maps/group3/reports/baseline/geo_map_report.png differ