From 17b1ec9b7e193a582b62a0e5a0632173ab6f8754 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Fri, 17 Jan 2025 17:26:38 -0500
Subject: [PATCH 1/8] UF annotation: adds draw tool

---
 .../components/ScreenshotEditor.tsx           | 120 ++++++++++++++++--
 .../components/ScreenshotInput.css.ts         |   4 +
 2 files changed, 113 insertions(+), 11 deletions(-)

diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index ef33e1b611b0..cddb29b3129f 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -80,15 +80,17 @@ export function ScreenshotEditorFactory({
     const canvasContainerRef = hooks.useRef<HTMLDivElement>(null);
     const cropContainerRef = hooks.useRef<HTMLDivElement>(null);
     const croppingRef = hooks.useRef<HTMLCanvasElement>(null);
+    const annotatingRef = hooks.useRef<HTMLCanvasElement>(null);
     const [croppingRect, setCroppingRect] = hooks.useState<Box>({ startX: 0, startY: 0, endX: 0, endY: 0 });
     const [confirmCrop, setConfirmCrop] = hooks.useState(false);
     const [isResizing, setIsResizing] = hooks.useState(false);
+    const [isAnnotating, setIsAnnotating] = hooks.useState(false);
 
     hooks.useEffect(() => {
-      WINDOW.addEventListener('resize', resizeCropper, false);
+      WINDOW.addEventListener('resize', resize, false);
     }, []);
 
-    function resizeCropper(): void {
+    function resize(): void {
       const cropper = croppingRef.current;
       const imageDimensions = constructRect(getContainedSize(imageBuffer));
       if (cropper) {
@@ -102,13 +104,25 @@ export function ScreenshotEditorFactory({
         }
       }
 
-      const cropButton = cropContainerRef.current;
-      if (cropButton) {
-        cropButton.style.width = `${imageDimensions.width}px`;
-        cropButton.style.height = `${imageDimensions.height}px`;
+      const cropContainer = cropContainerRef.current;
+      if (cropContainer) {
+        cropContainer.style.width = `${imageDimensions.width}px`;
+        cropContainer.style.height = `${imageDimensions.height}px`;
       }
 
       setCroppingRect({ startX: 0, startY: 0, endX: imageDimensions.width, endY: imageDimensions.height });
+
+      const annotater = annotatingRef.current;
+      if (annotater) {
+        annotater.width = imageDimensions.width * DPI;
+        annotater.height = imageDimensions.height * DPI;
+        annotater.style.width = `${imageDimensions.width}px`;
+        annotater.style.height = `${imageDimensions.height}px`;
+        const ctx = annotater.getContext('2d');
+        if (ctx) {
+          ctx.scale(DPI, DPI);
+        }
+      }
     }
 
     hooks.useEffect(() => {
@@ -141,6 +155,7 @@ export function ScreenshotEditorFactory({
     }, [croppingRect]);
 
     function onGrabButton(e: Event, corner: string): void {
+      setIsAnnotating(false);
       setConfirmCrop(false);
       setIsResizing(true);
       const handleMouseMove = makeHandleMouseMove(corner);
@@ -247,7 +262,48 @@ export function ScreenshotEditorFactory({
       DOCUMENT.addEventListener('mouseup', handleMouseUp);
     }
 
-    function submit(): void {
+    function onAnnotateStart(e: MouseEvent): void {
+      if (!isAnnotating) return;
+
+      const handleMouseMove = (moveEvent: MouseEvent): void => {
+        console.log(moveEvent.clientX, moveEvent.clientY);
+        const annotateCanvas = annotatingRef.current;
+        if (annotateCanvas) {
+          const rect = annotateCanvas.getBoundingClientRect();
+
+          const x = moveEvent.clientX - rect.x;
+          const y = moveEvent.clientY - rect.y;
+
+          const ctx = annotateCanvas.getContext('2d');
+          if (ctx) {
+            ctx.lineTo(x, y);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(x, y);
+          }
+        }
+      };
+
+      const handleMouseUp = (): void => {
+        const ctx = annotatingRef.current?.getContext('2d');
+        // starts a new path so on next mouse down, the lines won't connect
+        if (ctx) {
+          ctx.beginPath();
+        }
+
+        // draws the annotation onto the image buffer
+        // TODO: move this to a better place
+        submitAnnotate();
+
+        DOCUMENT.removeEventListener('mousemove', handleMouseMove);
+        DOCUMENT.removeEventListener('mouseup', handleMouseUp);
+      };
+
+      DOCUMENT.addEventListener('mousemove', handleMouseMove);
+      DOCUMENT.addEventListener('mouseup', handleMouseUp);
+    }
+
+    function submitCrop(): void {
       const cutoutCanvas = DOCUMENT.createElement('canvas');
       const imageBox = constructRect(getContainedSize(imageBuffer));
       const croppingBox = constructRect(croppingRect);
@@ -277,7 +333,32 @@ export function ScreenshotEditorFactory({
         imageBuffer.style.width = `${croppingBox.width}px`;
         imageBuffer.style.height = `${croppingBox.height}px`;
         ctx.drawImage(cutoutCanvas, 0, 0);
-        resizeCropper();
+        resize();
+      }
+    }
+
+    function submitAnnotate(): void {
+      // draw the annotations onto the image (ie "squash" the canvases)
+      const imageCtx = imageBuffer.getContext('2d');
+      const annotateCanvas = annotatingRef.current;
+      if (imageCtx && annotateCanvas) {
+        imageCtx.drawImage(
+          annotateCanvas,
+          0,
+          0,
+          annotateCanvas.width,
+          annotateCanvas.height,
+          0,
+          0,
+          imageBuffer.width,
+          imageBuffer.height,
+        );
+
+        // clear the annotation canvas
+        const annotateCtx = annotateCanvas.getContext('2d');
+        if (annotateCtx) {
+          annotateCtx.clearRect(0, 0, annotateCanvas.width, annotateCanvas.height);
+        }
       }
     }
 
@@ -303,7 +384,7 @@ export function ScreenshotEditorFactory({
         (dialog.el as HTMLElement).style.display = 'block';
         const container = canvasContainerRef.current;
         container?.appendChild(imageBuffer);
-        resizeCropper();
+        resize();
       }, []),
       onError: hooks.useCallback(error => {
         (dialog.el as HTMLElement).style.display = 'block';
@@ -314,8 +395,20 @@ export function ScreenshotEditorFactory({
     return (
       <div class="editor">
         <style nonce={options.styleNonce} dangerouslySetInnerHTML={styles} />
+        <button
+          class="editor__pen-tool"
+          style={{ background: isAnnotating ? 'red' : 'white' }}
+          onClick={e => {
+            e.preventDefault();
+            setIsAnnotating(!isAnnotating);
+          }}
+        ></button>
         <div class="editor__canvas-container" ref={canvasContainerRef}>
-          <div class="editor__crop-container" style={{ position: 'absolute', zIndex: 1 }} ref={cropContainerRef}>
+          <div
+            class="editor__crop-container"
+            style={{ position: 'absolute', zIndex: isAnnotating ? 1 : 2 }}
+            ref={cropContainerRef}
+          >
             <canvas
               onMouseDown={onDragStart}
               style={{ position: 'absolute', cursor: confirmCrop ? 'move' : 'auto' }}
@@ -373,7 +466,7 @@ export function ScreenshotEditorFactory({
               <button
                 onClick={e => {
                   e.preventDefault();
-                  submit();
+                  submitCrop();
                   setConfirmCrop(false);
                 }}
                 class="btn btn--primary"
@@ -382,6 +475,11 @@ export function ScreenshotEditorFactory({
               </button>
             </div>
           </div>
+          <canvas
+            onMouseDown={onAnnotateStart}
+            style={{ position: 'absolute', zIndex: isAnnotating ? '2' : '1' }}
+            ref={annotatingRef}
+          ></canvas>
         </div>
       </div>
     );
diff --git a/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts b/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
index ae7eaefba86b..5c8a3b2d3a5b 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
+++ b/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
@@ -84,6 +84,10 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
   border-left: none;
   border-top: none;
 }
+.editor__pen-tool {
+  width: 30px;
+  height: 30px;
+}
 `;
 
   if (styleNonce) {

From d3b1c9f0781b4796732967bb1b281fb9faedfa5b Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Mon, 20 Jan 2025 12:21:58 -0500
Subject: [PATCH 2/8] adds experiment flag for annotations

---
 .../core/src/types-hoist/feedback/config.ts    |  9 +++++++++
 packages/feedback/src/core/integration.ts      |  3 +++
 .../screenshot/components/ScreenshotEditor.tsx | 18 ++++++++++--------
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/types-hoist/feedback/config.ts b/packages/core/src/types-hoist/feedback/config.ts
index 4ec846c7d98d..96ea3b604898 100644
--- a/packages/core/src/types-hoist/feedback/config.ts
+++ b/packages/core/src/types-hoist/feedback/config.ts
@@ -57,6 +57,15 @@ export interface FeedbackGeneralConfiguration {
     name: string;
   };
 
+  /**
+   * _experiments allows users to enable experimental or internal features.
+   * We don't consider such features as part of the public API and hence we don't guarantee semver for them.
+   * Experimental features can be added, changed or removed at any time.
+   *
+   * Default: undefined
+   */
+  _experiments: Partial<{annotations: boolean;}>
+
   /**
    * Set an object that will be merged sent as tags data with the event.
    */
diff --git a/packages/feedback/src/core/integration.ts b/packages/feedback/src/core/integration.ts
index e5f1092856f1..8b312b902258 100644
--- a/packages/feedback/src/core/integration.ts
+++ b/packages/feedback/src/core/integration.ts
@@ -84,6 +84,7 @@ export const buildFeedbackIntegration = ({
       email: 'email',
       name: 'username',
     },
+    _experiments = {},
     tags,
     styleNonce,
     scriptNonce,
@@ -158,6 +159,8 @@ export const buildFeedbackIntegration = ({
       onSubmitError,
       onSubmitSuccess,
       onFormSubmitted,
+
+      _experiments,
     };
 
     let _shadow: ShadowRoot | null = null;
diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index cddb29b3129f..280e6cad5cf7 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -395,14 +395,16 @@ export function ScreenshotEditorFactory({
     return (
       <div class="editor">
         <style nonce={options.styleNonce} dangerouslySetInnerHTML={styles} />
-        <button
-          class="editor__pen-tool"
-          style={{ background: isAnnotating ? 'red' : 'white' }}
-          onClick={e => {
-            e.preventDefault();
-            setIsAnnotating(!isAnnotating);
-          }}
-        ></button>
+        {options._experiments.annotations && (
+          <button
+            class="editor__pen-tool"
+            style={{ background: isAnnotating ? 'red' : 'white' }}
+            onClick={e => {
+              e.preventDefault();
+              setIsAnnotating(!isAnnotating);
+            }}
+          ></button>
+        )}
         <div class="editor__canvas-container" ref={canvasContainerRef}>
           <div
             class="editor__crop-container"

From e4d096ab20af3139c9149825e8dc26952875c8af Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Mon, 20 Jan 2025 13:49:56 -0500
Subject: [PATCH 3/8] PR comments

---
 .../components/ScreenshotEditor.tsx           | 62 +++++++++----------
 .../components/ScreenshotInput.css.ts         |  6 +-
 2 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index 280e6cad5cf7..5254809f28cf 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -88,21 +88,31 @@ export function ScreenshotEditorFactory({
 
     hooks.useEffect(() => {
       WINDOW.addEventListener('resize', resize, false);
+
+      // return () => {
+      //   WINDOW.removeEventListener('resize', resize, false);
+      // };
     }, []);
 
-    function resize(): void {
-      const cropper = croppingRef.current;
-      const imageDimensions = constructRect(getContainedSize(imageBuffer));
-      if (cropper) {
-        cropper.width = imageDimensions.width * DPI;
-        cropper.height = imageDimensions.height * DPI;
-        cropper.style.width = `${imageDimensions.width}px`;
-        cropper.style.height = `${imageDimensions.height}px`;
-        const ctx = cropper.getContext('2d');
+    function resizeCanvas(canvasRef: Hooks.Ref<HTMLCanvasElement>, imageDimensions: Rect): void {
+      const canvas = canvasRef.current;
+      if (canvas) {
+        canvas.width = imageDimensions.width * DPI;
+        canvas.height = imageDimensions.height * DPI;
+        canvas.style.width = `${imageDimensions.width}px`;
+        canvas.style.height = `${imageDimensions.height}px`;
+        const ctx = canvas.getContext('2d');
         if (ctx) {
           ctx.scale(DPI, DPI);
         }
       }
+    }
+
+    function resize(): void {
+      const imageDimensions = constructRect(getContainedSize(imageBuffer));
+
+      resizeCanvas(croppingRef, imageDimensions);
+      resizeCanvas(annotatingRef, imageDimensions);
 
       const cropContainer = cropContainerRef.current;
       if (cropContainer) {
@@ -111,18 +121,6 @@ export function ScreenshotEditorFactory({
       }
 
       setCroppingRect({ startX: 0, startY: 0, endX: imageDimensions.width, endY: imageDimensions.height });
-
-      const annotater = annotatingRef.current;
-      if (annotater) {
-        annotater.width = imageDimensions.width * DPI;
-        annotater.height = imageDimensions.height * DPI;
-        annotater.style.width = `${imageDimensions.width}px`;
-        annotater.style.height = `${imageDimensions.height}px`;
-        const ctx = annotater.getContext('2d');
-        if (ctx) {
-          ctx.scale(DPI, DPI);
-        }
-      }
     }
 
     hooks.useEffect(() => {
@@ -262,11 +260,10 @@ export function ScreenshotEditorFactory({
       DOCUMENT.addEventListener('mouseup', handleMouseUp);
     }
 
-    function onAnnotateStart(e: MouseEvent): void {
+    function onAnnotateStart(): void {
       if (!isAnnotating) return;
 
       const handleMouseMove = (moveEvent: MouseEvent): void => {
-        console.log(moveEvent.clientX, moveEvent.clientY);
         const annotateCanvas = annotatingRef.current;
         if (annotateCanvas) {
           const rect = annotateCanvas.getBoundingClientRect();
@@ -293,7 +290,7 @@ export function ScreenshotEditorFactory({
 
         // draws the annotation onto the image buffer
         // TODO: move this to a better place
-        submitAnnotate();
+        applyAnnotation();
 
         DOCUMENT.removeEventListener('mousemove', handleMouseMove);
         DOCUMENT.removeEventListener('mouseup', handleMouseUp);
@@ -303,7 +300,7 @@ export function ScreenshotEditorFactory({
       DOCUMENT.addEventListener('mouseup', handleMouseUp);
     }
 
-    function submitCrop(): void {
+    function applyCrop(): void {
       const cutoutCanvas = DOCUMENT.createElement('canvas');
       const imageBox = constructRect(getContainedSize(imageBuffer));
       const croppingBox = constructRect(croppingRect);
@@ -337,7 +334,7 @@ export function ScreenshotEditorFactory({
       }
     }
 
-    function submitAnnotate(): void {
+    function applyAnnotation(): void {
       // draw the annotations onto the image (ie "squash" the canvases)
       const imageCtx = imageBuffer.getContext('2d');
       const annotateCanvas = annotatingRef.current;
@@ -406,14 +403,10 @@ export function ScreenshotEditorFactory({
           ></button>
         )}
         <div class="editor__canvas-container" ref={canvasContainerRef}>
-          <div
-            class="editor__crop-container"
-            style={{ position: 'absolute', zIndex: isAnnotating ? 1 : 2 }}
-            ref={cropContainerRef}
-          >
+          <div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
             <canvas
               onMouseDown={onDragStart}
-              style={{ position: 'absolute', cursor: confirmCrop ? 'move' : 'auto' }}
+              style={{ cursor: confirmCrop ? 'move' : 'auto' }}
               ref={croppingRef}
             ></canvas>
             <CropCorner
@@ -468,7 +461,7 @@ export function ScreenshotEditorFactory({
               <button
                 onClick={e => {
                   e.preventDefault();
-                  submitCrop();
+                  applyCrop();
                   setConfirmCrop(false);
                 }}
                 class="btn btn--primary"
@@ -478,8 +471,9 @@ export function ScreenshotEditorFactory({
             </div>
           </div>
           <canvas
+            class="editor__annotation"
             onMouseDown={onAnnotateStart}
-            style={{ position: 'absolute', zIndex: isAnnotating ? '2' : '1' }}
+            style={{ zIndex: isAnnotating ? '2' : '1' }}
             ref={annotatingRef}
           ></canvas>
         </div>
diff --git a/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts b/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
index 5c8a3b2d3a5b..368a80eaf291 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
+++ b/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
@@ -44,7 +44,11 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 
 .editor__canvas-container canvas {
   object-fit: contain;
-  position: relative;
+  position: absolute;
+}
+
+.editor__crop-container {
+  position: absolute;
 }
 
 .editor__crop-btn-group {

From 88f3e424ef9fd94e2352a740178f50ae37a9f4a3 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Mon, 20 Jan 2025 15:44:27 -0500
Subject: [PATCH 4/8] remove listener and lint

---
 packages/core/src/types-hoist/feedback/config.ts            | 2 +-
 .../feedback/src/screenshot/components/ScreenshotEditor.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/types-hoist/feedback/config.ts b/packages/core/src/types-hoist/feedback/config.ts
index 96ea3b604898..4171f2ace941 100644
--- a/packages/core/src/types-hoist/feedback/config.ts
+++ b/packages/core/src/types-hoist/feedback/config.ts
@@ -64,7 +64,7 @@ export interface FeedbackGeneralConfiguration {
    *
    * Default: undefined
    */
-  _experiments: Partial<{annotations: boolean;}>
+  _experiments: Partial<{ annotations: boolean; }>
 
   /**
    * Set an object that will be merged sent as tags data with the event.
diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index 5254809f28cf..7cd3aa5f1747 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -89,9 +89,9 @@ export function ScreenshotEditorFactory({
     hooks.useEffect(() => {
       WINDOW.addEventListener('resize', resize, false);
 
-      // return () => {
-      //   WINDOW.removeEventListener('resize', resize, false);
-      // };
+      return () => {
+        WINDOW.removeEventListener('resize', resize, false);
+      };
     }, []);
 
     function resizeCanvas(canvasRef: Hooks.Ref<HTMLCanvasElement>, imageDimensions: Rect): void {

From d00efd78ebbcb4e90dae01cc0016c84d14de1701 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Tue, 21 Jan 2025 09:51:54 -0500
Subject: [PATCH 5/8] lint again

---
 packages/core/src/types-hoist/feedback/config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/types-hoist/feedback/config.ts b/packages/core/src/types-hoist/feedback/config.ts
index 4171f2ace941..d7b3d78995bb 100644
--- a/packages/core/src/types-hoist/feedback/config.ts
+++ b/packages/core/src/types-hoist/feedback/config.ts
@@ -64,7 +64,7 @@ export interface FeedbackGeneralConfiguration {
    *
    * Default: undefined
    */
-  _experiments: Partial<{ annotations: boolean; }>
+  _experiments: Partial<{ annotations: boolean }>;
 
   /**
    * Set an object that will be merged sent as tags data with the event.

From c4492d2f407178bfc4e4f81611f82befa18a62ca Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Tue, 21 Jan 2025 12:41:08 -0500
Subject: [PATCH 6/8] Update
 packages/feedback/src/screenshot/components/ScreenshotEditor.tsx

Co-authored-by: Ryan Albrecht <ryan.albrecht@sentry.io>
---
 .../feedback/src/screenshot/components/ScreenshotEditor.tsx   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index 7cd3aa5f1747..ebb487c55437 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -261,7 +261,9 @@ export function ScreenshotEditorFactory({
     }
 
     function onAnnotateStart(): void {
-      if (!isAnnotating) return;
+      if (!isAnnotating) {
+        return;
+      }
 
       const handleMouseMove = (moveEvent: MouseEvent): void => {
         const annotateCanvas = annotatingRef.current;

From fa65a20d124b2e13a913f59deedb00d345333386 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Tue, 21 Jan 2025 12:46:50 -0500
Subject: [PATCH 7/8] PR comments

---
 .../components/ScreenshotEditor.tsx           | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index ebb487c55437..1f90b31ecc8c 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -87,24 +87,26 @@ export function ScreenshotEditorFactory({
     const [isAnnotating, setIsAnnotating] = hooks.useState(false);
 
     hooks.useEffect(() => {
-      WINDOW.addEventListener('resize', resize, false);
+      WINDOW.addEventListener('resize', resize);
 
       return () => {
-        WINDOW.removeEventListener('resize', resize, false);
+        WINDOW.removeEventListener('resize', resize);
       };
     }, []);
 
     function resizeCanvas(canvasRef: Hooks.Ref<HTMLCanvasElement>, imageDimensions: Rect): void {
       const canvas = canvasRef.current;
-      if (canvas) {
-        canvas.width = imageDimensions.width * DPI;
-        canvas.height = imageDimensions.height * DPI;
-        canvas.style.width = `${imageDimensions.width}px`;
-        canvas.style.height = `${imageDimensions.height}px`;
-        const ctx = canvas.getContext('2d');
-        if (ctx) {
-          ctx.scale(DPI, DPI);
-        }
+      if (!canvas) {
+        return;
+      }
+
+      canvas.width = imageDimensions.width * DPI;
+      canvas.height = imageDimensions.height * DPI;
+      canvas.style.width = `${imageDimensions.width}px`;
+      canvas.style.height = `${imageDimensions.height}px`;
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        ctx.scale(DPI, DPI);
       }
     }
 

From 26d76010c0df4cd5f1f84ac1223875a1ee8fadcb Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Tue, 21 Jan 2025 13:38:39 -0500
Subject: [PATCH 8/8] feat(user feedback): Create pen tool button for uf
 annotations (#15102)

Adds a proper pen tool button. The icon for the button is from the
hackweek project
Unselected:
<img width="1192" alt="image"
src="https://github.com/user-attachments/assets/4d8ba719-ff93-4108-98a4-560296ef5890"
/>

Selected:
<img width="1192" alt="image"
src="https://github.com/user-attachments/assets/7bd24ef2-6877-47a3-bcf1-e871caa4f91b"
/>


Relates to https://github.com/getsentry/sentry-javascript/issues/15064
---
 .../src/screenshot/components/PenIcon.tsx     | 31 +++++++++++++++++++
 .../components/ScreenshotEditor.tsx           | 31 +++++++++++++------
 .../components/ScreenshotInput.css.ts         | 14 +++++++--
 3 files changed, 65 insertions(+), 11 deletions(-)
 create mode 100644 packages/feedback/src/screenshot/components/PenIcon.tsx

diff --git a/packages/feedback/src/screenshot/components/PenIcon.tsx b/packages/feedback/src/screenshot/components/PenIcon.tsx
new file mode 100644
index 000000000000..ec50862c1dd4
--- /dev/null
+++ b/packages/feedback/src/screenshot/components/PenIcon.tsx
@@ -0,0 +1,31 @@
+import type { VNode, h as hType } from 'preact';
+
+interface FactoryParams {
+  h: typeof hType;
+}
+
+export default function PenIconFactory({
+  h, // eslint-disable-line @typescript-eslint/no-unused-vars
+}: FactoryParams) {
+  return function PenIcon(): VNode {
+    return (
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M8.5 12L12 8.5L14 11L11 14L8.5 12Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12 8.5L11 3.5L2 2L3.5 11L8.5 12L12 8.5Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path d="M2 2L7.5 7.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    );
+  };
+}
diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index 1f90b31ecc8c..e242415c0903 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -6,6 +6,7 @@ import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-
 import type * as Hooks from 'preact/hooks';
 import { DOCUMENT, WINDOW } from '../../constants';
 import CropCornerFactory from './CropCorner';
+import PenIconFactory from './PenIcon';
 import { createScreenshotInputStyles } from './ScreenshotInput.css';
 import { useTakeScreenshotFactory } from './useTakeScreenshot';
 
@@ -72,10 +73,11 @@ export function ScreenshotEditorFactory({
   options,
 }: FactoryParams): ComponentType<Props> {
   const useTakeScreenshot = useTakeScreenshotFactory({ hooks });
+  const CropCorner = CropCornerFactory({ h });
+  const PenIcon = PenIconFactory({ h });
 
   return function ScreenshotEditor({ onError }: Props): VNode {
     const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles(options.styleNonce).innerText }), []);
-    const CropCorner = CropCornerFactory({ h });
 
     const canvasContainerRef = hooks.useRef<HTMLDivElement>(null);
     const cropContainerRef = hooks.useRef<HTMLDivElement>(null);
@@ -397,14 +399,25 @@ export function ScreenshotEditorFactory({
       <div class="editor">
         <style nonce={options.styleNonce} dangerouslySetInnerHTML={styles} />
         {options._experiments.annotations && (
-          <button
-            class="editor__pen-tool"
-            style={{ background: isAnnotating ? 'red' : 'white' }}
-            onClick={e => {
-              e.preventDefault();
-              setIsAnnotating(!isAnnotating);
-            }}
-          ></button>
+          <div class="editor__tool-container">
+            <button
+              class="editor__pen-tool"
+              style={{
+                background: isAnnotating
+                  ? 'var(--button-primary-background, var(--accent-background))'
+                  : 'var(--button-background, var(--background))',
+                color: isAnnotating
+                  ? 'var(--button-primary-foreground, var(--accent-foreground))'
+                  : 'var(--button-foreground, var(--foreground))',
+              }}
+              onClick={e => {
+                e.preventDefault();
+                setIsAnnotating(!isAnnotating);
+              }}
+            >
+              <PenIcon />
+            </button>
+          </div>
         )}
         <div class="editor__canvas-container" ref={canvasContainerRef}>
           <div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
diff --git a/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts b/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
index 368a80eaf291..5b439390d068 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
+++ b/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
@@ -15,6 +15,7 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
   padding-top: 65px;
   padding-bottom: 65px;
   flex-grow: 1;
+  position: relative;
 
   background-color: ${surface200};
   background-image: repeating-linear-gradient(
@@ -55,7 +56,7 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
   padding: 8px;
   gap: 8px;
   border-radius: var(--menu-border-radius, 6px);
-  background: var(--button-primary-background, var(--background));
+  background: var(--button-background, var(--background));
   width: 175px;
   position: absolute;
 }
@@ -88,9 +89,18 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
   border-left: none;
   border-top: none;
 }
+.editor__tool-container {
+  position: absolute;
+  padding: 10px 0px;
+  top: 0;
+}
 .editor__pen-tool {
-  width: 30px;
   height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: var(--button-border, var(--border));
+  border-radius: var(--button-border-radius, 6px);
 }
 `;