Merge branch 'main' into desmos-embed

packages/tldraw/src/lib/ui/components/Minimap/DefaultMinimap.tsx

@@ -6,6 +6,7 @@ import {
 	normalizeWheel,
 	releasePointerCapture,
 	setPointerCapture,
+	useContainer,
 	useEditor,
 	useIsDarkMode,
 } from '@tldraw/editor'
@@ -15,6 +16,7 @@ import { MinimapManager } from './MinimapManager'
 /** @public */
 export function DefaultMinimap() {
 	const editor = useEditor()
+	const container = useContainer()
 
 	const rCanvas = React.useRef<HTMLCanvasElement>(null!)
 	const rPointing = React.useRef(false)
@@ -22,10 +24,10 @@ export function DefaultMinimap() {
 	const minimapRef = React.useRef<MinimapManager>()
 
 	React.useEffect(() => {
-		const minimap = new MinimapManager(editor, rCanvas.current)
+		const minimap = new MinimapManager(editor, rCanvas.current, container)
 		minimapRef.current = minimap
 		return minimapRef.current.close
-	}, [editor])
+	}, [editor, container])
 
 	const onDoubleClick = React.useCallback(
 		(e: React.MouseEvent<HTMLCanvasElement>) => {

packages/tldraw/src/lib/ui/components/Minimap/MinimapManager.ts

@@ -21,7 +21,8 @@ export class MinimapManager {
 	shapeGeometryCache: ComputedCache<Float32Array | null, TLShape>
 	constructor(
 		public editor: Editor,
-		public readonly elem: HTMLCanvasElement
+		public readonly elem: HTMLCanvasElement,
+		public readonly container: HTMLElement
 	) {
 		this.gl = setupWebGl(elem)
 		this.shapeGeometryCache = editor.store.createComputedCache('webgl-geometry', (r: TLShape) => {
@@ -94,6 +95,7 @@ export class MinimapManager {
 			this.canvasBoundingClientRect.set(rect)
 		})
 		observer.observe(this.elem)
+		observer.observe(this.container)
 		return () => observer.disconnect()
 	}