[fix] Minimap interactions (#2012)
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:
parent
f3cecf5c55
commit
6b19d70a9e
1 changed files with 26 additions and 16 deletions
|
@ -7,6 +7,7 @@ import {
|
||||||
getPointerInfo,
|
getPointerInfo,
|
||||||
intersectPolygonPolygon,
|
intersectPolygonPolygon,
|
||||||
normalizeWheel,
|
normalizeWheel,
|
||||||
|
releasePointerCapture,
|
||||||
setPointerCapture,
|
setPointerCapture,
|
||||||
useComputed,
|
useComputed,
|
||||||
useEditor,
|
useEditor,
|
||||||
|
@ -70,7 +71,8 @@ export function Minimap({ shapeFill, selectFill, viewportFill }: MinimapProps) {
|
||||||
|
|
||||||
const onPointerDown = React.useCallback(
|
const onPointerDown = React.useCallback(
|
||||||
(e: React.PointerEvent<HTMLCanvasElement>) => {
|
(e: React.PointerEvent<HTMLCanvasElement>) => {
|
||||||
setPointerCapture(e.currentTarget, e)
|
const elm = e.currentTarget
|
||||||
|
setPointerCapture(elm, e)
|
||||||
if (!editor.currentPageShapeIds.size) return
|
if (!editor.currentPageShapeIds.size) return
|
||||||
|
|
||||||
rPointing.current = true
|
rPointing.current = true
|
||||||
|
@ -83,27 +85,40 @@ export function Minimap({ shapeFill, selectFill, viewportFill }: MinimapProps) {
|
||||||
|
|
||||||
const _vpPageBounds = editor.viewportPageBounds
|
const _vpPageBounds = editor.viewportPageBounds
|
||||||
|
|
||||||
minimap.originPagePoint.setTo(clampedPoint)
|
|
||||||
minimap.originPageCenter.setTo(_vpPageBounds.center)
|
|
||||||
|
|
||||||
minimap.isInViewport = _vpPageBounds.containsPoint(clampedPoint)
|
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 })
|
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]
|
[editor, minimap]
|
||||||
)
|
)
|
||||||
|
|
||||||
const onPointerMove = React.useCallback(
|
const onPointerMove = React.useCallback(
|
||||||
(e: React.PointerEvent<HTMLCanvasElement>) => {
|
(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) {
|
if (minimap.isInViewport) {
|
||||||
const delta = point.clone().sub(minimap.originPagePoint).add(minimap.originPageCenter)
|
const delta = minimap.originPagePoint.clone().sub(minimap.originPageCenter)
|
||||||
const center = Vec2d.Add(minimap.originPageCenter, delta)
|
editor.centerOnPoint(Vec2d.Sub(point, delta))
|
||||||
editor.centerOnPoint(center)
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -128,10 +143,6 @@ export function Minimap({ shapeFill, selectFill, viewportFill }: MinimapProps) {
|
||||||
[editor, minimap]
|
[editor, minimap]
|
||||||
)
|
)
|
||||||
|
|
||||||
const onPointerUp = React.useCallback((_e: React.PointerEvent<HTMLCanvasElement>) => {
|
|
||||||
rPointing.current = false
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const onWheel = React.useCallback(
|
const onWheel = React.useCallback(
|
||||||
(e: React.WheelEvent<HTMLCanvasElement>) => {
|
(e: React.WheelEvent<HTMLCanvasElement>) => {
|
||||||
const offset = normalizeWheel(e)
|
const offset = normalizeWheel(e)
|
||||||
|
@ -179,7 +190,7 @@ export function Minimap({ shapeFill, selectFill, viewportFill }: MinimapProps) {
|
||||||
currentPageBounds: commonBoundsOfAllShapesOnCurrentPage,
|
currentPageBounds: commonBoundsOfAllShapesOnCurrentPage,
|
||||||
} = editor
|
} = editor
|
||||||
|
|
||||||
const _dpr = devicePixelRatio.value
|
const _dpr = devicePixelRatio.value // dereference
|
||||||
|
|
||||||
minimap.contentPageBounds = commonBoundsOfAllShapesOnCurrentPage
|
minimap.contentPageBounds = commonBoundsOfAllShapesOnCurrentPage
|
||||||
? Box2d.Expand(commonBoundsOfAllShapesOnCurrentPage, viewportPageBounds)
|
? Box2d.Expand(commonBoundsOfAllShapesOnCurrentPage, viewportPageBounds)
|
||||||
|
@ -226,7 +237,6 @@ export function Minimap({ shapeFill, selectFill, viewportFill }: MinimapProps) {
|
||||||
onDoubleClick={onDoubleClick}
|
onDoubleClick={onDoubleClick}
|
||||||
onPointerMove={onPointerMove}
|
onPointerMove={onPointerMove}
|
||||||
onPointerDown={onPointerDown}
|
onPointerDown={onPointerDown}
|
||||||
onPointerUp={onPointerUp}
|
|
||||||
onWheel={onWheel}
|
onWheel={onWheel}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue