From 029116fefd264643e91f9d8db2af94c01d6bc7c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Fri, 26 Apr 2024 10:50:08 +0200
Subject: [PATCH] Fix an issue with minimap. (#3621)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes an issue where minimap would sometimes completely bug out. The
problem was when you resized the window height. We only had resize
observer for the minimap's canvas element, but we were missing the
observer for the window / container. This caused an issue with
[calculating the minimap page
point](https://github.com/tldraw/tldraw/blob/mitja%2Ffix-minimap-when-resizing-window/packages/tldraw/src/lib/ui/components/Minimap/MinimapManager.ts#L153)
via `getMinimapPagePoint`. They y coordinate would get incorrectly
calculated.

Before


https://github.com/tldraw/tldraw/assets/2523721/ecf4c860-0aa2-46ac-8b90-964bff7f04b3

After


https://github.com/tldraw/tldraw/assets/2523721/38047877-7657-45cf-89b1-31ac0c47228c



Resolves https://github.com/tldraw/tldraw/issues/3589

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


### Test Plan

1. Insert some shapes.
2. Now open dev panel below or change the height of the window.
3. Use the minimap. It should no longer bug out.

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

### Release Notes

- Fixes an issue with the minimap bugging out after you change the
window's height.
---
 .../tldraw/src/lib/ui/components/Minimap/DefaultMinimap.tsx | 6 ++++--
 .../tldraw/src/lib/ui/components/Minimap/MinimapManager.ts  | 4 +++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/tldraw/src/lib/ui/components/Minimap/DefaultMinimap.tsx b/packages/tldraw/src/lib/ui/components/Minimap/DefaultMinimap.tsx
index 56f39f861..ca9da3629 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<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>) => {
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<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()
 	}