mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-04 07:00:23 +00:00
720de8cc8a
The third PR for managing display of widgets on subgraph nodes. This is the one that actually makes the functionality usable and user visible. Adds - A right-side modal for configuring which widgets are promoted, accessed by right click or selection toolbar - This menu allows for re-arranging widget order by dragging and dropping. - Indicators inside the subgraph for which widgets have been promoted. - Context menu options for promoting or demoting widget inside of a subgraph. <img width="767" height="694" alt="image" src="https://github.com/user-attachments/assets/4f78645d-7b26-48ba-8c49-78f4807e89e8" /> <img width="784" height="435" alt="image" src="https://github.com/user-attachments/assets/7005c730-a732-481e-befb-57019a8a31a7" /> Known issues - Some preview widgets are not added to a node until a draw operation occurs. The code does not yet have a way of determining which nodes should have draw operations forced to facilitate initial widget creation. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5826-Add-UI-code-for-configuring-subgraphNode-widgets-27c6d73d36508146accbf395e5bcd36a) by [Unito](https://www.unito.io)
49 lines
1.1 KiB
Vue
49 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import Button from 'primevue/button'
|
|
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
const props = defineProps<{
|
|
nodeTitle: string
|
|
widgetName: string
|
|
isShown?: boolean
|
|
isDraggable?: boolean
|
|
}>()
|
|
defineEmits<{
|
|
(e: 'toggleVisibility'): void
|
|
}>()
|
|
|
|
function classes() {
|
|
return cn(
|
|
'flex py-1 pr-4 pl-0 break-all rounded items-center gap-1',
|
|
'bg-pure-white dark-theme:bg-charcoal-800',
|
|
props.isDraggable
|
|
? 'drag-handle cursor-grab [.is-draggable]:cursor-grabbing'
|
|
: ''
|
|
)
|
|
}
|
|
</script>
|
|
<template>
|
|
<div :class="classes()">
|
|
<div
|
|
:class="
|
|
cn(
|
|
'size-4 pointer-events-none',
|
|
isDraggable ? 'icon-[lucide--grip-vertical]' : ''
|
|
)
|
|
"
|
|
/>
|
|
<div class="flex-1 pointer-events-none">
|
|
<div class="text-slate-100 text-[10px]">{{ nodeTitle }}</div>
|
|
<div class="text-xs">{{ widgetName }}</div>
|
|
</div>
|
|
<Button
|
|
size="small"
|
|
text
|
|
:icon="isDraggable ? 'icon-[lucide--eye]' : 'icon-[lucide--eye-off]'"
|
|
severity="secondary"
|
|
@click.stop="$emit('toggleVisibility')"
|
|
/>
|
|
</div>
|
|
</template>
|