diff --git a/README.md b/README.md index 2a712901b..b0a78690a 100644 --- a/README.md +++ b/README.md @@ -246,6 +246,7 @@ interface ScreenshotOptions { waitImages?: boolean; // default true omitBackground?: boolean; // default false captureBeyondViewport?: boolean; // default true + clip?: { x: number; y: number; width: number; height: number } | null; // default null } ``` @@ -262,6 +263,7 @@ interface ScreenshotOptions { - `waitImages`: Deprecated. Use `waitAssets`. If set true, Storycap waits until `` in the story are loaded. - `omitBackground`: If set true, Storycap omits the background of the page allowing for transparent screenshots. Note the storybook theme will need to be transparent as well. - `captureBeyondViewport`: If set true, Storycap captures screenshot beyond the viewport. See also [Puppeteer API docs](https://github.com/puppeteer/puppeteer/blob/v13.1.3/docs/api.md#pagescreenshotoptions). +- `clip`: If set, Storycap captures only the portion of the screen bounded by x/y/width/height. ### type `Variants` @@ -283,6 +285,7 @@ type Variants = { waitImages?: boolean; omitBackground?: boolean; captureBeyondViewport?: boolean; + clip?: { x: number; y: number; width: number; height: number } | null; }; }; ``` diff --git a/packages/storycap/src/node/capturing-browser.ts b/packages/storycap/src/node/capturing-browser.ts index 2a3757083..3a91a2b78 100644 --- a/packages/storycap/src/node/capturing-browser.ts +++ b/packages/storycap/src/node/capturing-browser.ts @@ -418,6 +418,7 @@ export class CapturingBrowser extends StoryPreviewBrowser { fullPage: emittedScreenshotOptions.fullPage, omitBackground: emittedScreenshotOptions.omitBackground, captureBeyondViewport: emittedScreenshotOptions.captureBeyondViewport, + clip: emittedScreenshotOptions.clip ?? undefined, }); let buffer: Buffer | null = null; diff --git a/packages/storycap/src/shared/screenshot-options-helper.ts b/packages/storycap/src/shared/screenshot-options-helper.ts index 63360d27a..8996b0499 100644 --- a/packages/storycap/src/shared/screenshot-options-helper.ts +++ b/packages/storycap/src/shared/screenshot-options-helper.ts @@ -12,6 +12,7 @@ const defaultScreenshotOptions = { variants: {}, omitBackground: false, captureBeyondViewport: true, + clip: null, } as const; /** diff --git a/packages/storycap/src/shared/types.ts b/packages/storycap/src/shared/types.ts index 450a0dd94..85d23bb08 100644 --- a/packages/storycap/src/shared/types.ts +++ b/packages/storycap/src/shared/types.ts @@ -24,6 +24,7 @@ export interface ScreenshotOptionFragments { skip?: boolean; omitBackground?: boolean; captureBeyondViewport?: boolean; + clip?: { x: number; y: number; width: number; height: number } | null; } export interface ScreenshotOptionFragmentsForVariant extends ScreenshotOptionFragments {