ok

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

@@ -129,7 +129,7 @@ export function DefaultMinimap() {
 				editor.centerOnPoint(point)
 			}
 
-			const pagePoint = minimapRef.current.getPagePoint(e.clientX, e.clientY)
+			const pagePoint = minimapRef.current.getMinimapPagePoint(e.clientX, e.clientY)
 
 			const screenPoint = editor.pageToScreen(pagePoint)
 

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

@@ -133,12 +133,18 @@ export class MinimapManager {
 		return box
 	}
 
+	@computed getZoom() {
+		const cpb = this.getCanvasPageBounds()
+		const vp = this.editor.getViewportPageBounds()
+		return cpb.width / vp.width
+	}
+
 	@computed getCanvasPageBoundsArray() {
 		const { x, y, w, h } = this.getCanvasPageBounds()
 		return new Float32Array([x, y, w, h])
 	}
 
-	getPagePoint = (clientX: number, clientY: number) => {
+	getMinimapPagePoint = (clientX: number, clientY: number) => {
 		const canvasPageBounds = this.getCanvasPageBounds()
 		const canvasScreenBounds = this.getCanvasScreenBounds()
 
@@ -166,7 +172,7 @@ export class MinimapManager {
 		const { editor } = this
 		const viewportPageBounds = editor.getViewportPageBounds()
 
-		let { x: px, y: py } = this.getPagePoint(x, y)
+		let { x: px, y: py } = this.getMinimapPagePoint(x, y)
 
 		if (clampToBounds) {
 			const shapesPageBounds = this.editor.getCurrentPageBounds() ?? new Box()
@@ -267,6 +273,7 @@ export class MinimapManager {
 
 		this.drawShapes(this.gl.unselectedShapes, unselectedShapeOffset, colors.shapeFill)
 		this.drawShapes(this.gl.selectedShapes, selectedShapeOffset, colors.selectFill)
+
 		this.drawViewport()
 		this.drawCollaborators()
 	}
@@ -279,8 +286,7 @@ export class MinimapManager {
 
 	private drawViewport() {
 		const viewport = this.editor.getViewportPageBounds()
-		const zoom = this.getCanvasPageBounds().width / this.getCanvasScreenBounds().width
-		const len = roundedRectangle(this.gl.viewport.vertices, viewport, 4 * zoom)
+		const len = roundedRectangle(this.gl.viewport.vertices, viewport, 4 * this.getZoom())
 
 		this.gl.prepareTriangles(this.gl.viewport, len)
 		this.gl.setFillColor(this.colors.viewportFill)
@@ -291,8 +297,6 @@ export class MinimapManager {
 		const collaborators = this.editor.getCollaboratorsOnCurrentPage()
 		if (!collaborators.length) return
 
-		const zoom = this.getCanvasPageBounds().width / this.getCanvasScreenBounds().width
-
 		// just draw a little circle for each collaborator
 		const numSegmentsPerCircle = 20
 		const dataSizePerCircle = numSegmentsPerCircle * 6
@@ -305,6 +309,7 @@ export class MinimapManager {
 
 		const vertices = this.gl.collaborators.vertices
 		let offset = 0
+		const zoom = this.getZoom()
 		for (const { cursor } of collaborators) {
 			pie(vertices, {
 				center: Vec.From(cursor),