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,
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,