From 2cc8f44f836609b01b8f999ff88dad9b2303818b Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Wed, 10 Apr 2024 13:53:11 +0100
Subject: [PATCH] Make minimap display sharp rectangles. (#3434)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The minimap now uses faster sharp rectangles for shapes.

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `improvement` — Improving existing features

### Release Notes

- Improve
---
 .../ui/components/Minimap/MinimapManager.ts   | 24 +++++--------------
 1 file changed, 6 insertions(+), 18 deletions(-)

diff --git a/packages/tldraw/src/lib/ui/components/Minimap/MinimapManager.ts b/packages/tldraw/src/lib/ui/components/Minimap/MinimapManager.ts
index 993030791..0b5dd9cf0 100644
--- a/packages/tldraw/src/lib/ui/components/Minimap/MinimapManager.ts
+++ b/packages/tldraw/src/lib/ui/components/Minimap/MinimapManager.ts
@@ -6,6 +6,7 @@ import {
 	TLShapeId,
 	Vec,
 	clamp,
+	throttle,
 	uniqueId,
 } from '@tldraw/editor'
 
@@ -181,7 +182,7 @@ export class MinimapManager {
 		}
 	}
 
-	render = () => {
+	render = throttle(() => {
 		const { cvs, pageBounds } = this
 		this.updateCanvasPageBounds()
 
@@ -189,7 +190,7 @@ export class MinimapManager {
 			this
 		const { width: cw, height: ch } = canvasScreenBounds
 
-		const selectedShapeIds = editor.getSelectedShapeIds()
+		const selectedShapeIds = new Set(editor.getSelectedShapeIds())
 		const viewportPageBounds = editor.getViewportPageBounds()
 
 		if (!cvs || !pageBounds) {
@@ -215,16 +216,6 @@ export class MinimapManager {
 		ctx.scale(sx, sy)
 		ctx.translate(-contentPageBounds.minX, -contentPageBounds.minY)
 
-		// Default radius for rounded rects
-		const rx = 8 / sx
-		const ry = 8 / sx
-		// Min radius
-		const ax = 1 / sx
-		const ay = 1 / sx
-		// Max radius factor
-		const bx = rx / 4
-		const by = ry / 4
-
 		// shapes
 		const shapesPath = new Path2D()
 		const selectedPath = new Path2D()
@@ -237,14 +228,11 @@ export class MinimapManager {
 		let pb: Box & { id: TLShapeId }
 		for (let i = 0, n = pageBounds.length; i < n; i++) {
 			pb = pageBounds[i]
-			MinimapManager.roundedRect(
-				selectedShapeIds.includes(pb.id) ? selectedPath : shapesPath,
+			;(selectedShapeIds.has(pb.id) ? selectedPath : shapesPath).rect(
 				pb.minX,
 				pb.minY,
 				pb.width,
-				pb.height,
-				clamp(rx, ax, pb.width / bx),
-				clamp(ry, ay, pb.height / by)
+				pb.height
 			)
 		}
 
@@ -351,7 +339,7 @@ export class MinimapManager {
 				ctx.strokeRect(minX + 1 / sx, minY + 1 / sy, width - 2 / sx, height - 2 / sy)
 			}
 		}
-	}
+	}, 32)
 
 	static roundedRect(
 		ctx: CanvasRenderingContext2D | Path2D,