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.

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

@@ -1,5 +1,5 @@
-import { useEditor } from '@tldraw/editor'
+import { useEditor, useQuickReactor } from '@tldraw/editor'
-import { useEffect, useState } from 'react'
+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(() => {
+	useQuickReactor(
-		let showBackToContentPrev = false
+		'toggle showback to content',
-
+		() => {
-		const interval = setInterval(() => {
+			const showBackToContentPrev = rIsShowing.current
-			const renderingShapes = editor.getRenderingShapes()
+			const shapeIds = editor.getCurrentPageShapeIds()
-			const renderingBounds = editor.getRenderingBounds()
+			let showBackToContentNow = false
-
+			if (shapeIds.size) {
-			// Rendering shapes includes all the shapes in the current page.
+				showBackToContentNow = shapeIds.size === editor.getCulledShapes().size
-			// 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
 
 			if (showBackToContentPrev !== showBackToContentNow) {
 				setShowBackToContent(showBackToContentNow)
-				showBackToContentPrev = showBackToContentNow
+				rIsShowing.current = showBackToContentNow
 			}
-		}, 1000)
+		},
-
+		[editor]
-		return () => {
+	)
-			clearInterval(interval)
-		}
-	}, [editor])
 
 	if (!showBackToContent) return null