Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-30 19:21:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: node hover previews overlapping with sidebar (#6232)

Browse Source 
Fixes https://github.com/Comfy-Org/ComfyUI_frontend/issues/6130 -- node
previews are not positioned in correct location after
https://github.com/Comfy-Org/ComfyUI_frontend/pull/5980

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6232-fix-node-hover-previews-overlapping-with-sidebar-2956d73d365081b2a470f7fb399fda99)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
This commit is contained in:
Christian Byrne
2025-10-23 13:11:08 -07:00
committed by GitHub
parent 4e5eba6c54
commit 56a6ad5660
1 changed files with 13 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
View File

@@ -59,7 +59,7 @@
<teleport v-if="isHovered" to="#node-library-node-preview-container"> <teleport v-if="isHovered" to="#node-library-node-preview-container">
<div class="node-lib-node-preview" :style="nodePreviewStyle"> <div class="node-lib-node-preview" :style="nodePreviewStyle">
<NodePreview ref="previewRef" :node-def="nodeDef" /> <NodePreview :node-def="nodeDef" />
</div> </div>
</teleport> </teleport>
</div> </div>
@@ -132,11 +132,12 @@ function deleteBlueprint() {
void useSubgraphStore().deleteBlueprint(props.node.data.name) void useSubgraphStore().deleteBlueprint(props.node.data.name)
} }
const previewRef = ref<InstanceType<typeof NodePreview> | null>(null)
const nodePreviewStyle = ref<CSSProperties>({ const nodePreviewStyle = ref<CSSProperties>({
position: 'absolute', position: 'fixed',
top: '0px', top: '0px',
left: '0px' left: '0px',
pointerEvents: 'none',
zIndex: 1001
}) })
const handleNodeHover = async () => { const handleNodeHover = async () => {
@@ -144,19 +145,15 @@ const handleNodeHover = async () => {
if (!hoverTarget) return if (!hoverTarget) return
const targetRect = hoverTarget.getBoundingClientRect() const targetRect = hoverTarget.getBoundingClientRect()
const margin = 40
const previewHeight = previewRef.value?.$el.offsetHeight || 0 nodePreviewStyle.value.top = `${targetRect.top}px`
const availableSpaceBelow = window.innerHeight - targetRect.bottom nodePreviewStyle.value.left =
sidebarLocation.value === 'left'
nodePreviewStyle.value.top = ? `${targetRect.right + margin}px`
previewHeight > availableSpaceBelow : `${targetRect.left - margin}px`
? `${Math.max(0, targetRect.top - (previewHeight - availableSpaceBelow) - 20)}px` nodePreviewStyle.value.transform =
: `${targetRect.top - 40}px` sidebarLocation.value === 'right' ? 'translateX(-100%)' : undefined
if (sidebarLocation.value === 'left') {
nodePreviewStyle.value.left = `${targetRect.right}px`
} else {
nodePreviewStyle.value.left = `${targetRect.left - 400}px`
}
} }
const container = ref<HTMLElement | null>(null) const container = ref<HTMLElement | null>(null)