Fix an issue with minimap. (#3621)
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.
This commit is contained in:
parent
e03328faf3
commit
029116fefd
2 changed files with 7 additions and 3 deletions
|
@ -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>) => {
|
||||
|
|
|
@ -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()
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue