mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-04 21:22:07 +00:00
00fa9b691b
## Summary Fixes the case where a value is updated in the graph but the result doesn't reflect on the widget representation on the relevant node. ## Changes - **What**: Uses vanilla Vue utilities instead of a special utility - **What**: Fewer places where state could be desynced. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6741-Fix-WIP-Simplify-the-widget-state-logic-2af6d73d36508160b729db50608a2ea9) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
115 lines
3.2 KiB
Vue
115 lines
3.2 KiB
Vue
<template>
|
|
<WidgetSelectDropdown
|
|
v-if="isDropdownUIWidget"
|
|
v-bind="props"
|
|
v-model="modelValue"
|
|
:asset-kind="assetKind"
|
|
:allow-upload="allowUpload"
|
|
:upload-folder="uploadFolder"
|
|
:is-asset-mode="isAssetMode"
|
|
:default-layout-mode="defaultLayoutMode"
|
|
/>
|
|
<WidgetSelectDefault v-else v-model="modelValue" :widget />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
import { assetService } from '@/platform/assets/services/assetService'
|
|
import { isCloud } from '@/platform/distribution/types'
|
|
import { useSettingStore } from '@/platform/settings/settingStore'
|
|
import WidgetSelectDefault from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue'
|
|
import WidgetSelectDropdown from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue'
|
|
import type { LayoutMode } from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
|
|
import type { ResultItemType } from '@/schemas/apiSchema'
|
|
import { isComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
|
|
import type { ComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
|
|
import type { SimplifiedWidget } from '@/types/simplifiedWidget'
|
|
import type { AssetKind } from '@/types/widgetTypes'
|
|
|
|
const props = defineProps<{
|
|
widget: SimplifiedWidget<string | undefined>
|
|
nodeType?: string
|
|
}>()
|
|
|
|
const modelValue = defineModel<string | undefined>()
|
|
|
|
const comboSpec = computed<ComboInputSpec | undefined>(() => {
|
|
if (props.widget.spec && isComboInputSpec(props.widget.spec)) {
|
|
return props.widget.spec
|
|
}
|
|
return undefined
|
|
})
|
|
|
|
const specDescriptor = computed<{
|
|
kind: AssetKind
|
|
allowUpload: boolean
|
|
folder: ResultItemType | undefined
|
|
}>(() => {
|
|
const spec = comboSpec.value
|
|
if (!spec) {
|
|
return {
|
|
kind: 'unknown',
|
|
allowUpload: false,
|
|
folder: undefined
|
|
}
|
|
}
|
|
|
|
const {
|
|
image_upload,
|
|
animated_image_upload,
|
|
video_upload,
|
|
image_folder,
|
|
audio_upload
|
|
} = spec
|
|
|
|
let kind: AssetKind = 'unknown'
|
|
if (video_upload) {
|
|
kind = 'video'
|
|
} else if (image_upload || animated_image_upload) {
|
|
kind = 'image'
|
|
} else if (audio_upload) {
|
|
kind = 'audio'
|
|
}
|
|
// TODO: add support for models (checkpoints, VAE, LoRAs, etc.) -- get widgetType from spec
|
|
|
|
const allowUpload =
|
|
image_upload === true ||
|
|
animated_image_upload === true ||
|
|
video_upload === true ||
|
|
audio_upload === true
|
|
return {
|
|
kind,
|
|
allowUpload,
|
|
folder: image_folder
|
|
}
|
|
})
|
|
|
|
const isAssetMode = computed(() => {
|
|
if (isCloud) {
|
|
const settingStore = useSettingStore()
|
|
const isUsingAssetAPI = settingStore.get('Comfy.Assets.UseAssetAPI')
|
|
const isEligible = assetService.isAssetBrowserEligible(
|
|
props.nodeType,
|
|
props.widget.name
|
|
)
|
|
|
|
return isUsingAssetAPI && isEligible
|
|
}
|
|
|
|
return false
|
|
})
|
|
|
|
const assetKind = computed(() => specDescriptor.value.kind)
|
|
const isDropdownUIWidget = computed(
|
|
() => isAssetMode.value || assetKind.value !== 'unknown'
|
|
)
|
|
const allowUpload = computed(() => specDescriptor.value.allowUpload)
|
|
const uploadFolder = computed<ResultItemType>(() => {
|
|
return specDescriptor.value.folder ?? 'input'
|
|
})
|
|
const defaultLayoutMode = computed<LayoutMode>(() => {
|
|
return isAssetMode.value ? 'list' : 'grid'
|
|
})
|
|
</script>
|