Style: Remove currently non-functional collapsed slots (#6264)
## Summary Address request to remove confusing hover behavior in the collapsed state ## Review Focus Confirmed with Alex that it's okay to remove these now and add them back with the implementation instead of leaving them as decorative elements. Also fixes a bug where the slots _all_ revealed when a node was hovered. ## Screenshots (if applicable) <img width="769" height="376" alt="image" src="https://github.com/user-attachments/assets/ec0037af-fd2e-4855-b0e4-f994f9ef9a0b" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6264-Style-Remove-currently-non-functional-collapsed-slots-2976d73d36508191914def8889491e8e) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 97 KiB |
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
@@ -9,7 +9,7 @@
|
|||||||
:class="
|
:class="
|
||||||
cn(
|
cn(
|
||||||
'bg-node-component-surface',
|
'bg-node-component-surface',
|
||||||
'lg-node absolute rounded-2xl touch-none flex flex-col group',
|
'lg-node absolute rounded-2xl touch-none flex flex-col',
|
||||||
'border-1 border-solid border-node-component-border',
|
'border-1 border-solid border-node-component-border',
|
||||||
// hover (only when node should handle events)
|
// hover (only when node should handle events)
|
||||||
shouldHandleNodePointerEvents &&
|
shouldHandleNodePointerEvents &&
|
||||||
@@ -44,10 +44,6 @@
|
|||||||
@contextmenu="handleContextMenu"
|
@contextmenu="handleContextMenu"
|
||||||
>
|
>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<template v-if="isCollapsed">
|
|
||||||
<SlotConnectionDot multi class="absolute left-0 -translate-x-1/2" />
|
|
||||||
<SlotConnectionDot multi class="absolute right-0 translate-x-1/2" />
|
|
||||||
</template>
|
|
||||||
<NodeHeader
|
<NodeHeader
|
||||||
:node-data="nodeData"
|
:node-data="nodeData"
|
||||||
:collapsed="isCollapsed"
|
:collapsed="isCollapsed"
|
||||||
@@ -160,7 +156,6 @@ import NodeContent from './NodeContent.vue'
|
|||||||
import NodeHeader from './NodeHeader.vue'
|
import NodeHeader from './NodeHeader.vue'
|
||||||
import NodeSlots from './NodeSlots.vue'
|
import NodeSlots from './NodeSlots.vue'
|
||||||
import NodeWidgets from './NodeWidgets.vue'
|
import NodeWidgets from './NodeWidgets.vue'
|
||||||
import SlotConnectionDot from './SlotConnectionDot.vue'
|
|
||||||
|
|
||||||
// Extended props for main node component
|
// Extended props for main node component
|
||||||
interface LGraphNodeProps {
|
interface LGraphNodeProps {
|
||||||
|
|||||||
@@ -31,9 +31,9 @@ defineExpose({
|
|||||||
cn(
|
cn(
|
||||||
'bg-slate-300 rounded-full',
|
'bg-slate-300 rounded-full',
|
||||||
'transition-all duration-150',
|
'transition-all duration-150',
|
||||||
'cursor-crosshair',
|
|
||||||
'border border-solid border-node-component-slot-dot-outline',
|
'border border-solid border-node-component-slot-dot-outline',
|
||||||
'group-hover/slot:[--node-component-slot-dot-outline-opacity-mult:5] group-hover/slot:scale-125',
|
!multi &&
|
||||||
|
'cursor-crosshair group-hover/slot:[--node-component-slot-dot-outline-opacity-mult:5] group-hover/slot:scale-125',
|
||||||
multi ? 'w-3 h-6' : 'size-3'
|
multi ? 'w-3 h-6' : 'size-3'
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
|
|||||||