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:
parent
ae6ecf35b1
commit
2cc8f44f83
1 changed files with 6 additions and 18 deletions
|
@ -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,
|
||||||
|
|
Loading…
Reference in a new issue