PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

[fix] Minimap interactions (#2012)

Browse source 
This PR improves the dragging interactions on the minimap.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Click and drag the minimap.
2. Click outside of the viewport bounds.
3. Click inside of the viewport bounds.
This commit is contained in:
Steve Ruiz 2023-10-03 19:08:58 +01:00 • committed by GitHub
parent f3cecf5c55
commit 6b19d70a9e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

42
packages/tldraw/src/lib/ui/components/NavigationZone/Minimap.tsx
View file

@ -7,6 +7,7 @@ import {
getPointerInfo,
intersectPolygonPolygon,
normalizeWheel,
releasePointerCapture,
setPointerCapture,
useComputed,
useEditor,
@ -70,7 +71,8 @@ export function Minimap({ shapeFill, selectFill, viewportFill }: MinimapProps) {
const onPointerDown = React.useCallback(
(e: React.PointerEvent<HTMLCanvasElement>) => {
setPointerCapture(e.currentTarget, e)
const elm = e.currentTarget
setPointerCapture(elm, e)
if (!editor.currentPageShapeIds.size) return
rPointing.current = true
@ -83,27 +85,40 @@ export function Minimap({ shapeFill, selectFill, viewportFill }: MinimapProps) {
const _vpPageBounds = editor.viewportPageBounds
minimap.originPagePoint.setTo(clampedPoint)
minimap.originPageCenter.setTo(_vpPageBounds.center)
minimap.isInViewport = _vpPageBounds.containsPoint(clampedPoint)
if (!minimap.isInViewport) {
if (minimap.isInViewport) {
minimap.originPagePoint.setTo(clampedPoint)
minimap.originPageCenter.setTo(_vpPageBounds.center)
} else {
const delta = Vec2d.Sub(_vpPageBounds.center, _vpPageBounds.point)
const pagePoint = Vec2d.Add(point, delta)
minimap.originPagePoint.setTo(pagePoint)
minimap.originPageCenter.setTo(point)
editor.centerOnPoint(point, { duration: ANIMATION_MEDIUM_MS })
}
function release(e: PointerEvent) {
if (elm) {
releasePointerCapture(elm, e)
}
rPointing.current = false
document.body.removeEventListener('pointerup', release)
}
document.body.addEventListener('pointerup', release)
},
[editor, minimap]
)
const onPointerMove = React.useCallback(
(e: React.PointerEvent<HTMLCanvasElement>) => {
if (rPointing.current) {
const point = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, e.shiftKey, true)
const point = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, e.shiftKey, true)
if (rPointing.current) {
if (minimap.isInViewport) {
const delta = point.clone().sub(minimap.originPagePoint).add(minimap.originPageCenter)
const center = Vec2d.Add(minimap.originPageCenter, delta)
editor.centerOnPoint(center)
const delta = minimap.originPagePoint.clone().sub(minimap.originPageCenter)
editor.centerOnPoint(Vec2d.Sub(point, delta))
return
}
@ -128,10 +143,6 @@ export function Minimap({ shapeFill, selectFill, viewportFill }: MinimapProps) {
[editor, minimap]
)
const onPointerUp = React.useCallback((_e: React.PointerEvent<HTMLCanvasElement>) => {
rPointing.current = false
}, [])
const onWheel = React.useCallback(
(e: React.WheelEvent<HTMLCanvasElement>) => {
const offset = normalizeWheel(e)
@ -179,7 +190,7 @@ export function Minimap({ shapeFill, selectFill, viewportFill }: MinimapProps) {
currentPageBounds: commonBoundsOfAllShapesOnCurrentPage,
} = editor
const _dpr = devicePixelRatio.value
const _dpr = devicePixelRatio.value // dereference
minimap.contentPageBounds = commonBoundsOfAllShapesOnCurrentPage
? Box2d.Expand(commonBoundsOfAllShapesOnCurrentPage, viewportPageBounds)
@ -226,7 +237,6 @@ export function Minimap({ shapeFill, selectFill, viewportFill }: MinimapProps) {
onDoubleClick={onDoubleClick}
onPointerMove={onPointerMove}
onPointerDown={onPointerDown}
onPointerUp={onPointerUp}
onWheel={onWheel}
/>
</div>