mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-22 13:32:11 +00:00
9cc09cd46c
- Adds functions to SubgraphHelper to perform widget promotion by standard user means - Right Click -> Promote - Properties Panel - Adds new slot fixture code that works with simple `locator.dragTo` operations. - Adds multiple subgraph tests with a focus on historically difficult operations. - Fixes a bug where the litegraph `node.selected` state would not be unset when switching graphs. This made it so 'Selecting a node -> leaving subgraph -> re-enter subgraph -> right click on node' would fail to select the node because it is marked as already selected. ┆Issue is synchronized with this [Notion page](https://app.notion.com/p/PR-11806-Add-helper-functions-for-widget-promotion-3536d73d365081f58dd9cd730c1a91a9) by [Unito](https://www.unito.io) --------- Co-authored-by: Alexander Brown <drjkl@comfy.org>
72 lines
1.6 KiB
Vue
72 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
import { cn } from '@comfyorg/tailwind-utils'
|
|
import type { ClassValue } from '@comfyorg/tailwind-utils'
|
|
|
|
const {
|
|
nodeTitle,
|
|
widgetName,
|
|
isDraggable = false,
|
|
isPhysical = false,
|
|
class: className
|
|
} = defineProps<{
|
|
nodeTitle: string
|
|
widgetName: string
|
|
isDraggable?: boolean
|
|
isPhysical?: boolean
|
|
class?: ClassValue
|
|
}>()
|
|
defineEmits<{
|
|
(e: 'toggleVisibility'): void
|
|
}>()
|
|
|
|
const icon = computed(() =>
|
|
isPhysical
|
|
? 'icon-[lucide--link]'
|
|
: isDraggable
|
|
? 'icon-[lucide--eye]'
|
|
: 'icon-[lucide--eye-off]'
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="
|
|
cn(
|
|
'flex items-center gap-1 rounded-sm px-2 py-1 break-all',
|
|
'bg-node-component-surface',
|
|
isDraggable && 'ring-accent-background hover:ring-1',
|
|
className
|
|
)
|
|
"
|
|
data-testid="subgraph-widget-item"
|
|
>
|
|
<div class="pointer-events-none flex-1">
|
|
<div
|
|
class="line-clamp-1 text-xs text-text-secondary"
|
|
data-testid="subgraph-widget-node-name"
|
|
>
|
|
{{ nodeTitle }}
|
|
</div>
|
|
<div class="line-clamp-1 text-sm/8" data-testid="subgraph-widget-label">
|
|
{{ widgetName }}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="muted-textonly"
|
|
size="sm"
|
|
data-testid="subgraph-widget-toggle"
|
|
:disabled="isPhysical"
|
|
@click.stop="$emit('toggleVisibility')"
|
|
>
|
|
<i :class="icon" :data-testid="isPhysical ? 'icon-link' : 'icon-eye'" />
|
|
</Button>
|
|
<div
|
|
v-if="isDraggable"
|
|
class="pointer-events-none icon-[lucide--grip-vertical] size-4"
|
|
/>
|
|
</div>
|
|
</template>
|