Improve back to content (#3532)

This PR improves the "back to content" behavior. Rather than using an
interval, we now add a "camera-stopped" event that triggers the check.

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `improvement` 

### Test Plan

1. Create some shapes, then move the camera to an empty part of the
canvas.
2. Check that the back to content button appears.
3. Ensure that the back to content button does not appear when the
canvas is empty.

apps/dotcom/src/components/IFrameProtector.tsx

@@ -114,7 +114,7 @@ export function IFrameProtector({
 			<div className="tldraw__editor tl-container">
 				<div className="iframe-warning__container">
 					<a className="iframe-warning__link" href={url} target="_blank">
-						{'Visit this page on tldraw.com '}
+						{'Visit this page on tldraw.com'}
 						<svg
 							width="15"
 							height="15"

packages/tldraw/src/lib/ui/components/HelperButtons/BackToContent.tsx

@@ -1,5 +1,5 @@
-import { useEditor } from '@tldraw/editor'
-import { useEffect, useState } from 'react'
+import { useEditor, useQuickReactor } from '@tldraw/editor'
+import { useRef, useState } from 'react'
 import { useActions } from '../../context/actions'
 import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
 
@@ -9,33 +9,25 @@ export function BackToContent() {
 	const actions = useActions()
 
 	const [showBackToContent, setShowBackToContent] = useState(false)
+	const rIsShowing = useRef(false)
 
-	useEffect(() => {
-		let showBackToContentPrev = false
-
-		const interval = setInterval(() => {
-			const renderingShapes = editor.getRenderingShapes()
-			const renderingBounds = editor.getRenderingBounds()
-
-			// Rendering shapes includes all the shapes in the current page.
-			// We have to filter them down to just the shapes that are inside the renderingBounds.
-			const visibleShapes = renderingShapes.filter((s) => {
-				const maskedPageBounds = editor.getShapeMaskedPageBounds(s.id)
-				return maskedPageBounds && renderingBounds.includes(maskedPageBounds)
-			})
-			const showBackToContentNow =
-				visibleShapes.length === 0 && editor.getCurrentPageShapes().length > 0
+	useQuickReactor(
+		'toggle showback to content',
+		() => {
+			const showBackToContentPrev = rIsShowing.current
+			const shapeIds = editor.getCurrentPageShapeIds()
+			let showBackToContentNow = false
+			if (shapeIds.size) {
+				showBackToContentNow = shapeIds.size === editor.getCulledShapes().size
+			}
 
 			if (showBackToContentPrev !== showBackToContentNow) {
 				setShowBackToContent(showBackToContentNow)
-				showBackToContentPrev = showBackToContentNow
+				rIsShowing.current = showBackToContentNow
 			}
-		}, 1000)
-
-		return () => {
-			clearInterval(interval)
-		}
-	}, [editor])
+		},
+		[editor]
+	)
 
 	if (!showBackToContent) return null