diff --git a/packages/tldraw/src/lib/ui/components/Minimap/DefaultMinimap.tsx b/packages/tldraw/src/lib/ui/components/Minimap/DefaultMinimap.tsx index 56f39f861..0095f3d08 100644 --- a/packages/tldraw/src/lib/ui/components/Minimap/DefaultMinimap.tsx +++ b/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(null!) const rPointing = React.useRef(false) @@ -22,7 +24,7 @@ export function DefaultMinimap() { const minimapRef = React.useRef() 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]) diff --git a/packages/tldraw/src/lib/ui/components/Minimap/MinimapManager.ts b/packages/tldraw/src/lib/ui/components/Minimap/MinimapManager.ts index 31db9ebae..8c3c19798 100644 --- a/packages/tldraw/src/lib/ui/components/Minimap/MinimapManager.ts +++ b/packages/tldraw/src/lib/ui/components/Minimap/MinimapManager.ts @@ -21,7 +21,8 @@ export class MinimapManager { shapeGeometryCache: ComputedCache 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() }