Merge branch 'main' into desmos-embed

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

@@ -1,5 +1,6 @@
 import {
 	ANIMATION_MEDIUM_MS,
+	Box,
 	TLPointerEventInfo,
 	Vec,
 	getPointerInfo,
@@ -74,26 +75,33 @@ export function DefaultMinimap() {
 				false
 			)
 
-			const clampedPoint = minimapRef.current.minimapScreenPointToPagePoint(
-				e.clientX,
-				e.clientY,
-				false,
-				true
+			const _vpPageBounds = editor.getViewportPageBounds()
+			const commonBounds = minimapRef.current.getContentPageBounds()
+			const allowedBounds = new Box(
+				commonBounds.x - _vpPageBounds.width / 2,
+				commonBounds.y - _vpPageBounds.height / 2,
+				commonBounds.width + _vpPageBounds.width,
+				commonBounds.height + _vpPageBounds.height
 			)
 
-			const _vpPageBounds = editor.getViewportPageBounds()
-
-			minimapRef.current.isInViewport = _vpPageBounds.containsPoint(clampedPoint)
-
-			if (minimapRef.current.isInViewport) {
-				minimapRef.current.originPagePoint.setTo(clampedPoint)
-				minimapRef.current.originPageCenter.setTo(_vpPageBounds.center)
-			} else {
+			// If we clicked inside of the allowed area, but outside of the viewport
+			if (allowedBounds.containsPoint(point) && !_vpPageBounds.containsPoint(point)) {
+				minimapRef.current.isInViewport = _vpPageBounds.containsPoint(point)
 				const delta = Vec.Sub(_vpPageBounds.center, _vpPageBounds.point)
 				const pagePoint = Vec.Add(point, delta)
 				minimapRef.current.originPagePoint.setTo(pagePoint)
 				minimapRef.current.originPageCenter.setTo(point)
 				editor.centerOnPoint(point, { duration: ANIMATION_MEDIUM_MS })
+			} else {
+				const clampedPoint = minimapRef.current.minimapScreenPointToPagePoint(
+					e.clientX,
+					e.clientY,
+					false,
+					true
+				)
+				minimapRef.current.isInViewport = _vpPageBounds.containsPoint(clampedPoint)
+				minimapRef.current.originPagePoint.setTo(clampedPoint)
+				minimapRef.current.originPageCenter.setTo(_vpPageBounds.center)
 			}
 
 			function release(e: PointerEvent) {

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

@@ -170,13 +170,12 @@ export class MinimapManager {
 		clampToBounds = false
 	) => {
 		const { editor } = this
-		const viewportPageBounds = editor.getViewportPageBounds()
+		const vpPageBounds = editor.getViewportPageBounds()
 
 		let { x: px, y: py } = this.getMinimapPagePoint(x, y)
 
 		if (clampToBounds) {
 			const shapesPageBounds = this.editor.getCurrentPageBounds() ?? new Box()
-			const vpPageBounds = viewportPageBounds
 
 			const minX = shapesPageBounds.minX - vpPageBounds.width / 2
 			const maxX = shapesPageBounds.maxX + vpPageBounds.width / 2
@@ -188,22 +187,8 @@ export class MinimapManager {
 			const ly = Math.max(0, minY + vpPageBounds.height - py)
 			const ry = Math.max(0, -(maxY - vpPageBounds.height - py))
 
-			const ql = Math.max(0, lx - rx)
-			const qr = Math.max(0, rx - lx)
-			const qt = Math.max(0, ly - ry)
-			const qb = Math.max(0, ry - ly)
-
-			if (ql && ql > qr) {
-				px += ql / 2
-			} else if (qr) {
-				px -= qr / 2
-			}
-
-			if (qt && qt > qb) {
-				py += qt / 2
-			} else if (qb) {
-				py -= qb / 2
-			}
+			px += (lx - rx) / 2
+			py += (ly - ry) / 2
 
 			px = clamp(px, minX, maxX)
 			py = clamp(py, minY, maxY)