[#2641] Fix sluggish console movement on dragging, in mobile view of browser window

[lakshz]

Fixes #2641

Before and after comparison
Screencast from 22-12-23 10:49:21 AM IST.webm

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

[welcome]

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already.

[lakshz]

@lindapaiste Could you please review this PR?

[lindapaiste]

I love the idea of managing the overlay in the PreviewFrame. Now that you are doing that for mobile you can do it for desktop too!

Delete these lines which render the overlay:

p5.js-web-editor/client/modules/IDE/pages/IDEView.jsx

Lines 196 to 199 in 56f137c

	<div
	className="preview-frame-overlay"
	style={{ display: isOverlayVisible ? 'block' : 'none' }}
	/>

And pass down the isOverlayVisible prop here:

p5.js-web-editor/client/modules/IDE/pages/IDEView.jsx

Line 205 in 56f137c

<PreviewFrame cmController={cmRef.current} />

Also this is unrelated but while we're making changes here, we can delete these lines which are a relic of some legacy code that don't do anything (it's <div>{true}</div>). We're handling the accessible output in the EmbedFrame.

p5.js-web-editor/client/modules/IDE/pages/IDEView.jsx

Lines 200 to 204 in 56f137c

	<div>
	{((preferences.textOutput || preferences.gridOutput) &&
	ide.isPlaying) ||
	ide.isAccessibleOutputPlaying}
	</div>

[lakshz]

I love the idea of managing the overlay in the PreviewFrame. Now that you are doing that for mobile you can do it for desktop too!

Delete these lines which render the overlay:

p5.js-web-editor/client/modules/IDE/pages/IDEView.jsx

Lines 196 to 199 in 56f137c

	<div
	className="preview-frame-overlay"
	style={{ display: isOverlayVisible ? 'block' : 'none' }}
	/>

And pass down the isOverlayVisible prop here:

p5.js-web-editor/client/modules/IDE/pages/IDEView.jsx

Line 205 in 56f137c

<PreviewFrame cmController={cmRef.current} />

Also this is unrelated but while we're making changes here, we can delete these lines which are a relic of some legacy code that don't do anything (it's <div>{true}</div>). We're handling the accessible output in the EmbedFrame.

p5.js-web-editor/client/modules/IDE/pages/IDEView.jsx

Lines 200 to 204 in 56f137c

	<div>
	{((preferences.textOutput || preferences.gridOutput) &&
	ide.isPlaying) ||
	ide.isAccessibleOutputPlaying}
	</div>

@lindapaiste Got it. Changes done.