diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue index 5021de982..d0daa83b1 100644 --- a/src/components/actionbar/ComfyActionbar.vue +++ b/src/components/actionbar/ComfyActionbar.vue @@ -125,30 +125,45 @@ const adjustMenuPosition = () => { const menuWidth = panelRef.value.offsetWidth const menuHeight = panelRef.value.offsetHeight - // Calculate the distance from each edge + // Calculate distances to all edges + const distanceLeft = lastDragState.value.x const distanceRight = lastDragState.value.windowWidth - (lastDragState.value.x + menuWidth) + const distanceTop = lastDragState.value.y const distanceBottom = lastDragState.value.windowHeight - (lastDragState.value.y + menuHeight) - // Determine if the menu is closer to right/bottom or left/top - const anchorRight = distanceRight < lastDragState.value.x - const anchorBottom = distanceBottom < lastDragState.value.y + // Find the smallest distance to determine which edge to anchor to + const distances = [ + { 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 - if (anchorRight) { - x.value = - screenWidth - (lastDragState.value.windowWidth - lastDragState.value.x) - } else { - x.value = lastDragState.value.x - } + // Calculate vertical position as a percentage of screen height + const verticalRatio = + lastDragState.value.y / lastDragState.value.windowHeight + const horizontalRatio = + lastDragState.value.x / lastDragState.value.windowWidth - if (anchorBottom) { - y.value = - screenHeight - - (lastDragState.value.windowHeight - lastDragState.value.y) + // Apply positioning based on closest edge + if (closestEdge.edge === 'left') { + x.value = closestEdge.distance // Maintain exact distance from left + 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 { - 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