refactor(editor): split text outline update into its own reactor (tldraw#8833)

In order to keep the camera position reactor focused on positioning the
HTML layer, this PR moves the text outline / LOD logic into a dedicated
`set text outline` quick reactor. The new reactor reads
`editor.getEfficientZoomLevel()` and only updates the
`--tl-text-outline` CSS custom property when the LOD bucket changes,
instead of recomputing the check on every camera tick alongside the
layer transform.

The `allowTextOutline` ref is renamed to `canUpdateTextOutline` to
better describe what the flag does — it gates future updates after
Safari's one-shot opt-out.

### Change type

- [x] `improvement`

### Test plan

1. Open the examples app and pan/zoom the canvas; text shapes should
still toggle outlines when crossing the `textShadowLod` threshold.
2. Open the examples app in Safari and verify that text outlines remain
disabled.

- [ ] Unit tests
- [ ] End to end tests

### Release notes

- Internal refactor: split text outline updates into their own reactor
on the canvas.

### Code changes

| Section   | LOC change |
| --------- | ---------- |
| Core code | +34 / -26  |

Author: steveruizok

packages/editor/src/lib/components/default-components/DefaultCanvas.tsx

@@ -63,44 +63,52 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 		[editor]
 	)
 
-	const rMemoizedStuff = useRef({ lodDisableTextOutline: false, allowTextOutline: true })
+	const rMemoizedStuff = useRef({ lodDisableTextOutline: false, canUpdateTextOutline: true })
+
+	useQuickReactor(
+		'set text outline',
+		function setTextOutline() {
+			if (rMemoizedStuff.current.canUpdateTextOutline) {
+				if (tlenv.isSafari) {
+					// We don't allow text outlines on safari for performance reasons
+					container.style.setProperty('--tl-text-outline', 'none')
+					rMemoizedStuff.current.canUpdateTextOutline = false // will prevent this check in the future
+				} else {
+					const efficientZoom = editor.getEfficientZoomLevel()
+					// If we're zoomed way out, and have this option enabled, then we hide text outline
+					const lodDisableTextOutline = efficientZoom < editor.options.textShadowLod
+					// Skip the style update if the property is the same as it was before
+					if (lodDisableTextOutline !== rMemoizedStuff.current.lodDisableTextOutline) {
+						container.style.setProperty(
+							'--tl-text-outline',
+							lodDisableTextOutline ? 'none' : `var(--tl-text-outline-reference)`
+						)
+					}
+					rMemoizedStuff.current.lodDisableTextOutline = lodDisableTextOutline
+				}
+			}
+		},
+		[editor, container]
+	)
 
 	useQuickReactor(
 		'position layers',
 		function positionLayersWhenCameraMoves() {
 			const { x, y, z } = editor.getCamera()
 
-			// This should only run once on first load
-			if (rMemoizedStuff.current.allowTextOutline && tlenv.isSafari) {
-				container.style.setProperty('--tl-text-outline', 'none')
-				rMemoizedStuff.current.allowTextOutline = false
-			}
-
-			// And this should only run if we're not in Safari;
-			// If we're below the lod distance for text shadows, turn them off
-			if (
-				rMemoizedStuff.current.allowTextOutline &&
-				z < editor.options.textShadowLod !== rMemoizedStuff.current.lodDisableTextOutline
-			) {
-				const lodDisableTextOutline = z < editor.options.textShadowLod
-				container.style.setProperty(
-					'--tl-text-outline',
-					lodDisableTextOutline ? 'none' : `var(--tl-text-outline-reference)`
-				)
-				rMemoizedStuff.current.lodDisableTextOutline = lodDisableTextOutline
-			}
-
 			// Because the html container has a width/height of 1px, we
 			// need to create a small offset when zoomed to ensure that
 			// the html container and svg container are lined up exactly.
 			const offset =
 				z >= 1 ? modulate(z, [1, 8], [0.125, 0.5], true) : modulate(z, [0.1, 1], [-2, 0.125], true)
 
-			const transform = `scale(${toDomPrecision(z)}) translate(${toDomPrecision(
-				x + offset
-			)}px,${toDomPrecision(y + offset)}px)`
-
-			setStyleProperty(rHtmlLayer.current, 'transform', transform)
+			setStyleProperty(
+				rHtmlLayer.current,
+				'transform',
+				`scale(${toDomPrecision(z)}) translate(${toDomPrecision(
+					x + offset
+				)}px,${toDomPrecision(y + offset)}px)`
+			)
 		},
 		[editor, container]
 	)