From e08edb2ce94142b48a982988f07a9a4c0debbc45 Mon Sep 17 00:00:00 2001
From: Mike Han <56001373+mhan83@users.noreply.github.com>
Date: Fri, 11 Oct 2024 13:57:43 -0600
Subject: [PATCH] fix: Don't draw orange border when re-rendering screenshot
 (#120)

* fix: Don't need to draw a border around the img

Not in the final designs

* fix: inadvertant effects

* The effect to draw the annotation was executing unnecessarily. Give the
effect a proper list of dependencies to prevent unnecessary calls.
* Properly cleanup event handler in the case the effect does run again.
---
 webview-ui/test-generation/src/Screenshot.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/webview-ui/test-generation/src/Screenshot.tsx b/webview-ui/test-generation/src/Screenshot.tsx
index 91229a5c..5c6d422d 100644
--- a/webview-ui/test-generation/src/Screenshot.tsx
+++ b/webview-ui/test-generation/src/Screenshot.tsx
@@ -25,14 +25,13 @@ export function Screenshot(props: ScreenshotProps) {
     if (!context) {
       return;
     }
+
     const img = new Image();
     img.src = src;
 
-    img.onload = () => {
+    const onload = () => {
       context.drawImage(img, 0, 0, imgWidth, imgHeight);
 
-      context.strokeRect(0, 0, imgWidth, imgHeight);
-
       if (annotation) {
         context.lineWidth = 3;
         context.rect(
@@ -46,6 +45,18 @@ export function Screenshot(props: ScreenshotProps) {
         context.stroke();
       }
     };
-  }, [ref, annotation, src, imgWidth, imgHeight]);
+    img.addEventListener('load', onload);
+
+    return () => img.removeEventListener('load', onload);
+  }, [
+    ref,
+    annotation.x,
+    annotation.y,
+    annotation.width,
+    annotation.height,
+    src,
+    imgWidth,
+    imgHeight,
+  ]);
   return <canvas ref={ref} width={imgWidth} height={imgHeight} />;
 }