Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-27 01:39:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Minor: change adjustMenuPosition style to single side anchor and scale proportionally elsewhere (#1567)

Browse Source
This commit is contained in:
Yoland Yan
2024-11-16 08:47:54 -08:00
committed by GitHub
parent 6842eb05de
commit 22fdfd7f0b
1 changed files with 31 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/actionbar/ComfyActionbar.vue
View File

@@ -125,30 +125,45 @@ const adjustMenuPosition = () => {
const menuWidth = panelRef.value.offsetWidth const menuWidth = panelRef.value.offsetWidth
const menuHeight = panelRef.value.offsetHeight const menuHeight = panelRef.value.offsetHeight
// Calculate the distance from each edge // Calculate distances to all edges
const distanceLeft = lastDragState.value.x
const distanceRight = const distanceRight =
lastDragState.value.windowWidth - (lastDragState.value.x + menuWidth) lastDragState.value.windowWidth - (lastDragState.value.x + menuWidth)
const distanceTop = lastDragState.value.y
const distanceBottom = const distanceBottom =
lastDragState.value.windowHeight - (lastDragState.value.y + menuHeight) lastDragState.value.windowHeight - (lastDragState.value.y + menuHeight)
// Determine if the menu is closer to right/bottom or left/top // Find the smallest distance to determine which edge to anchor to
const anchorRight = distanceRight < lastDragState.value.x const distances = [
const anchorBottom = distanceBottom < lastDragState.value.y { edge: 'left', distance: distanceLeft },
{ edge: 'right', distance: distanceRight },
{ edge: 'top', distance: distanceTop },
{ edge: 'bottom', distance: distanceBottom }
]
const closestEdge = distances.reduce((min, curr) =>
curr.distance < min.distance ? curr : min
)
// Calculate new position // Calculate vertical position as a percentage of screen height
if (anchorRight) { const verticalRatio =
x.value = lastDragState.value.y / lastDragState.value.windowHeight
screenWidth - (lastDragState.value.windowWidth - lastDragState.value.x) const horizontalRatio =
} else { lastDragState.value.x / lastDragState.value.windowWidth
x.value = lastDragState.value.x
}
if (anchorBottom) { // Apply positioning based on closest edge
y.value = if (closestEdge.edge === 'left') {
screenHeight - x.value = closestEdge.distance // Maintain exact distance from left
(lastDragState.value.windowHeight - lastDragState.value.y) y.value = verticalRatio * screenHeight
} else if (closestEdge.edge === 'right') {
x.value = screenWidth - menuWidth - closestEdge.distance // Maintain exact distance from right
y.value = verticalRatio * screenHeight
} else if (closestEdge.edge === 'top') {
x.value = horizontalRatio * screenWidth
y.value = closestEdge.distance // Maintain exact distance from top
} else { } else {
y.value = lastDragState.value.y // bottom
x.value = horizontalRatio * screenWidth
y.value = screenHeight - menuHeight - closestEdge.distance // Maintain exact distance from bottom
} }
// Ensure the menu stays within the screen bounds // Ensure the menu stays within the screen bounds