sugoidogo/modrinth
1
0
Fork 0
mirror of https://github.com/modrinth/code.git synced 2026-08-27 18:14:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: anchored teleport (#7027)

Browse Source 
* Fix anchored teleport

* pointless commit

Signed-off-by: Prospector <6166773+Prospector@users.noreply.github.com>

* undo

Signed-off-by: Prospector <6166773+Prospector@users.noreply.github.com>

* prepr

---------

Signed-off-by: Prospector <6166773+Prospector@users.noreply.github.com>
Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
This commit is contained in:
Arthur
2026-08-07 06:29:06 +00:00
committed by GitHub
co-authored by Prospector
parent f234b7a0ac
commit 9625740906
1 changed files with 14 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/utils/use-anchored-teleport.ts
+14 -20
View File
@@ -37,7 +37,8 @@ export function useAnchoredTeleport(
if (!isOpen.value || !trigger.value || !panel.value) return if (!isOpen.value || !trigger.value || !panel.value) return
const triggerRect = trigger.value.getBoundingClientRect() const triggerRect = trigger.value.getBoundingClientRect()
const panelRect = panel.value.getBoundingClientRect() const panelWidth = panel.value.offsetWidth
const panelHeight = panel.value.offsetHeight
const offset = distance.value const offset = distance.value
const alignsEnd = placement.value.endsWith('end') const alignsEnd = placement.value.endsWith('end')
const isHorizontal = placement.value.startsWith('right') || placement.value.startsWith('left') const isHorizontal = placement.value.startsWith('right') || placement.value.startsWith('left')
@@ -49,34 +50,27 @@ export function useAnchoredTeleport(
const spaceRight = window.innerWidth - triggerRect.right - viewportPadding const spaceRight = window.innerWidth - triggerRect.right - viewportPadding
const spaceLeft = triggerRect.left - viewportPadding const spaceLeft = triggerRect.left - viewportPadding
const opensRight = prefersRight const opensRight = prefersRight
? panelRect.width + offset <= spaceRight || spaceRight > spaceLeft ? panelWidth + offset <= spaceRight || spaceRight > spaceLeft
: panelRect.width + offset > spaceLeft && spaceRight > spaceLeft : panelWidth + offset > spaceLeft && spaceRight > spaceLeft
resolvedSide.value = opensRight ? 'right' : 'left' resolvedSide.value = opensRight ? 'right' : 'left'
idealTop = alignsEnd ? triggerRect.bottom - panelRect.height : triggerRect.top idealTop = alignsEnd ? triggerRect.bottom - panelHeight : triggerRect.top
idealLeft = opensRight idealLeft = opensRight ? triggerRect.right + offset : triggerRect.left - panelWidth - offset
? triggerRect.right + offset
: triggerRect.left - panelRect.width - offset
} else { } else {
const prefersTop = placement.value.startsWith('top') const prefersTop = placement.value.startsWith('top')
const spaceBelow = window.innerHeight - triggerRect.bottom - viewportPadding const spaceBelow = window.innerHeight - triggerRect.bottom - viewportPadding
const spaceAbove = triggerRect.top - viewportPadding const spaceAbove = triggerRect.top - viewportPadding
const opensAbove = prefersTop const opensAbove = prefersTop
? panelRect.height + offset <= spaceAbove || spaceAbove > spaceBelow ? panelHeight + offset <= spaceAbove || spaceAbove > spaceBelow
: panelRect.height + offset > spaceBelow && spaceAbove > spaceBelow : panelHeight + offset > spaceBelow && spaceAbove > spaceBelow
resolvedSide.value = opensAbove ? 'top' : 'bottom' resolvedSide.value = opensAbove ? 'top' : 'bottom'
idealTop = opensAbove idealTop = opensAbove ? triggerRect.top - panelHeight - offset : triggerRect.bottom + offset
? triggerRect.top - panelRect.height - offset idealLeft = alignsEnd ? triggerRect.right - panelWidth : triggerRect.left
: triggerRect.bottom + offset
idealLeft = alignsEnd ? triggerRect.right - panelRect.width : triggerRect.left
} }
const maxTop = Math.max( const maxTop = Math.max(viewportPadding, window.innerHeight - panelHeight - viewportPadding)
viewportPadding, const maxLeft = Math.max(viewportPadding, window.innerWidth - panelWidth - viewportPadding)
window.innerHeight - panelRect.height - viewportPadding,
)
const maxLeft = Math.max(viewportPadding, window.innerWidth - panelRect.width - viewportPadding)
const panelTop = Math.min(Math.max(idealTop, viewportPadding), maxTop) const panelTop = Math.min(Math.max(idealTop, viewportPadding), maxTop)
const panelLeft = Math.min(Math.max(idealLeft, viewportPadding), maxLeft) const panelLeft = Math.min(Math.max(idealLeft, viewportPadding), maxLeft)
@@ -89,13 +83,13 @@ export function useAnchoredTeleport(
? { ? {
top: `${Math.min( top: `${Math.min(
Math.max(triggerRect.top + triggerRect.height / 2 - panelTop, anchorPadding), Math.max(triggerRect.top + triggerRect.height / 2 - panelTop, anchorPadding),
Math.max(anchorPadding, panelRect.height - anchorPadding), Math.max(anchorPadding, panelHeight - anchorPadding),
)}px`, )}px`,
} }
: { : {
left: `${Math.min( left: `${Math.min(
Math.max(triggerRect.left + triggerRect.width / 2 - panelLeft, anchorPadding), Math.max(triggerRect.left + triggerRect.width / 2 - panelLeft, anchorPadding),
Math.max(anchorPadding, panelRect.width - anchorPadding), Math.max(anchorPadding, panelWidth - anchorPadding),
)}px`, )}px`,
} }
} }