Refactor monitor dragging

[adroitwhiz]

Resolves

• Resolves Monitor text can wrap depending on where the monitor loads in #5782
• Resolves Small stage mode causes some problems interacting with monitors #2367
• Resolves Monitors can't be positioned past halfway right (or halfway down) when stage is in small display mode #2949
• Resolves Monitor label text is a different color in a local instance of GUI than in the website #5797

Proposed Changes

This PR reimplements the dragging behavior previously done in react-draggable, but takes stage scale into account.

It also changes the monitors to always position themselves using CSS transforms and never setting the top or left position--those will affect text wrapping while CSS transforms will not, resulting in wrapping differences between monitors positioned with top/left and monitors positioned with a CSS transform. This is what led to #5782.

Also, it explicitly defines a text color for monitor labels-- this text color style was previously missing, and it caused monitor labels to appear differently-colored on a standalone GUI instance than the main website.

Reason for Changes

These changes resolve the bugs linked above.

I'm including them all in one PR to make bug hunts easier

Test Coverage

Tested manually

Browser Coverage

Check the OS/browser combinations tested (At least 2)

Linux

• Chrome
• Firefox

Mac

• Chrome
• Firefox
• Safari

Windows

• Chrome
• Firefox
• Edge

Chromebook

• Chrome

iPad

• Safari

Android Tablet

• Chrome

[adroitwhiz]

Will it cause any performance issues to re-render this component for every frame we're dragging?

[adroitwhiz]

Going to take another look at this to see if I can stop the inner monitor component from rerendering once per drag event

[rschamp]

@adroitwhiz Would you want to keep working on this? We're thinking about closing it unless you think all the issues are resolved.

[adroitwhiz]

It's basically done--the only issue is that the monitor component re-renders once per drag event (which I believe is at most once per frame). I'll rebase this, see if I can fix that, and update you on this by next Monday.

[adroitwhiz]

The re-rendering once per drag event happens because the monitor's coordinates are now stored as part of the component state, and dragging monitors updates those coordinates immediately. I don't think there's a clean way to stop it from happening--the monitor's coordinates should be part of its state.

I think it's perfectly fine to re-render the monitor once per frame whilst dragging--a Scratch project which changes a monitor value once per tick does basically the same thing anyway (albeit at 30 FPS).