feat(feedback): Implement highlighting and hiding controls for screenshots

[ryan953]

Editing	In Sentry

I should write that there are like 3 separate systems inside the ScreenshotEditor component, all working with the same data and helpers really, but each easy to spot and understand on their own.
The end-goal is to have the correct thing rendered into outputBuffer (which is an argument to the component, but it's used for outputting data) and also render into the foreground and background.

1. The first is the useLayoutEffect and useEffect calls. These basically depend on the screenshot prop & drawCommands state. When those change we're basically re-sizing and re-rendering into our canvases.
2. The second system is all the stuff inside of handleMouseDown. We call getBoundingClientRect and use offsetX/offsetY for a consistent frame if reference when doing mouse coordinates. From in here we don't update any react state until onMouseUp happens, so the re-rendering onMouseMove is really fast to execute, and really easy to understand.
3. The last system to look at is is the drawCommands stuff and scaleFactor. All the drawCommands in state/memory are using an x/y coordinate system based on the size of the original screenshot. So when we call paintForeground it's really easy. But when we want to add <div> elements to the page we have to scale the sizes. This helps with window resize, and helps to consolidate when/where we convert from one x/y coordinate system to another.

The resulting feedbacks are in the correct dpi, and have boxes draw using the same DPI.

Case	Img
No boxes drawn ever
Drew some, then removed them
Some boxes

Related to #15424
Iteration on top of develop...ryan953/feedback-highlight-mask-ref
Fixes getsentry/sentry#69786

[github-actions]

size-limit report 📦

Path	Size	% Change	Change
@sentry/browser	23.2 KB	-	-
@sentry/browser - with treeshaking flags	23.02 KB	-	-
@sentry/browser (incl. Tracing)	36.83 KB	-	-
@sentry/browser (incl. Tracing, Replay)	73.99 KB	-	-
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags	67.39 KB	-	-
@sentry/browser (incl. Tracing, Replay with Canvas)	78.66 KB	-	-
@sentry/browser (incl. Tracing, Replay, Feedback)	90.48 KB	-0.81%	-755 B 🔽
@sentry/browser (incl. Feedback)	39.58 KB	-1.85%	-761 B 🔽
@sentry/browser (incl. sendFeedback)	27.81 KB	-0.05%	-14 B 🔽
@sentry/browser (incl. FeedbackAsync)	32.59 KB	-0.1%	-32 B 🔽
@sentry/react	25 KB	-	-
@sentry/react (incl. Tracing)	38.75 KB	-	-
@sentry/vue	27.41 KB	-	-
@sentry/vue (incl. Tracing)	38.55 KB	-	-
@sentry/svelte	23.23 KB	-	-
CDN Bundle	24.44 KB	-	-
CDN Bundle (incl. Tracing)	36.85 KB	-	-
CDN Bundle (incl. Tracing, Replay)	71.87 KB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback)	77.06 KB	-0.02%	-12 B 🔽
CDN Bundle - uncompressed	71.24 KB	-	-
CDN Bundle (incl. Tracing) - uncompressed	108.94 KB	-	-
CDN Bundle (incl. Tracing, Replay) - uncompressed	220.23 KB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed	232.77 KB	-0.02%	-33 B 🔽
@sentry/nextjs (client)	40.06 KB	-	-
@sentry/sveltekit (client)	37.26 KB	-	-
@sentry/node	142.89 KB	-	-
@sentry/node - without tracing	96.08 KB	-0.01%	-1 B 🔽
@sentry/aws-serverless	120.43 KB	-	-

View base workflow run

[billyvg]

haven't tested it but code seems reasonable