From c8b7678ff030fc31a8ccb407c79197828fbfd4ec Mon Sep 17 00:00:00 2001
From: Jamie Li <jamie.li@ridewithvia.com>
Date: Wed, 12 Apr 2023 16:43:15 -0700
Subject: [PATCH] Add the ability to screenshot a part of the screen

---
 README.md                                                 | 3 +++
 packages/storycap/src/node/capturing-browser.ts           | 1 +
 packages/storycap/src/shared/screenshot-options-helper.ts | 1 +
 packages/storycap/src/shared/types.ts                     | 1 +
 4 files changed, 6 insertions(+)

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 `<img>` 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 {