Make minimap display sharp rectangles. (#3434)

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
This commit is contained in:
Steve Ruiz 2024-04-10 13:53:11 +01:00 committed by GitHub
parent ae6ecf35b1
commit 2cc8f44f83
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -6,6 +6,7 @@ import {
TLShapeId, TLShapeId,
Vec, Vec,
clamp, clamp,
throttle,
uniqueId, uniqueId,
} from '@tldraw/editor' } from '@tldraw/editor'
@ -181,7 +182,7 @@ export class MinimapManager {
} }
} }
render = () => { render = throttle(() => {
const { cvs, pageBounds } = this const { cvs, pageBounds } = this
this.updateCanvasPageBounds() this.updateCanvasPageBounds()
@ -189,7 +190,7 @@ export class MinimapManager {
this this
const { width: cw, height: ch } = canvasScreenBounds const { width: cw, height: ch } = canvasScreenBounds
const selectedShapeIds = editor.getSelectedShapeIds() const selectedShapeIds = new Set(editor.getSelectedShapeIds())
const viewportPageBounds = editor.getViewportPageBounds() const viewportPageBounds = editor.getViewportPageBounds()
if (!cvs || !pageBounds) { if (!cvs || !pageBounds) {
@ -215,16 +216,6 @@ export class MinimapManager {
ctx.scale(sx, sy) ctx.scale(sx, sy)
ctx.translate(-contentPageBounds.minX, -contentPageBounds.minY) 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 // shapes
const shapesPath = new Path2D() const shapesPath = new Path2D()
const selectedPath = new Path2D() const selectedPath = new Path2D()
@ -237,14 +228,11 @@ export class MinimapManager {
let pb: Box & { id: TLShapeId } let pb: Box & { id: TLShapeId }
for (let i = 0, n = pageBounds.length; i < n; i++) { for (let i = 0, n = pageBounds.length; i < n; i++) {
pb = pageBounds[i] pb = pageBounds[i]
MinimapManager.roundedRect( ;(selectedShapeIds.has(pb.id) ? selectedPath : shapesPath).rect(
selectedShapeIds.includes(pb.id) ? selectedPath : shapesPath,
pb.minX, pb.minX,
pb.minY, pb.minY,
pb.width, pb.width,
pb.height, pb.height
clamp(rx, ax, pb.width / bx),
clamp(ry, ay, pb.height / by)
) )
} }
@ -351,7 +339,7 @@ export class MinimapManager {
ctx.strokeRect(minX + 1 / sx, minY + 1 / sy, width - 2 / sx, height - 2 / sy) ctx.strokeRect(minX + 1 / sx, minY + 1 / sy, width - 2 / sx, height - 2 / sy)
} }
} }
} }, 32)
static roundedRect( static roundedRect(
ctx: CanvasRenderingContext2D | Path2D, ctx: CanvasRenderingContext2D | Path2D,