mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-27 10:14:06 +00:00
[refactor] convert watch to computed pattern - addresses @DrJKL's structure comment
Replaced ref + watch pattern with computed for displayTitle, providing cleaner reactive behavior and eliminating the need for manual sync logic.
This commit is contained in:
@@ -36,7 +36,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onErrorCaptured, ref, watch } from 'vue'
|
||||
import { computed, onErrorCaptured, ref } from 'vue'
|
||||
|
||||
import EditableText from '@/components/common/EditableText.vue'
|
||||
import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
|
||||
@@ -74,26 +74,18 @@ const isEditing = ref(false)
|
||||
|
||||
const nodeInfo = computed(() => props.nodeData || props.node)
|
||||
|
||||
const EMPTY_STRING = ''
|
||||
const DEFAULT_TITLE = 'Untitled'
|
||||
|
||||
const resolveTitle = (info: LGraphNode | VueNodeData | undefined) => {
|
||||
const title = (info?.title ?? '').trim()
|
||||
const title = (info?.title ?? EMPTY_STRING).trim()
|
||||
if (title.length > 0) return title
|
||||
const type = (info?.type ?? '').trim()
|
||||
return type.length > 0 ? type : 'Untitled'
|
||||
const type = (info?.type ?? EMPTY_STRING).trim()
|
||||
return type.length > 0 ? type : DEFAULT_TITLE
|
||||
}
|
||||
|
||||
// Local state for title to provide immediate feedback
|
||||
const displayTitle = ref(resolveTitle(nodeInfo.value))
|
||||
|
||||
// Watch for external changes to the node title or type
|
||||
watch(
|
||||
() => [nodeInfo.value?.title, nodeInfo.value?.type] as const,
|
||||
() => {
|
||||
const next = resolveTitle(nodeInfo.value)
|
||||
if (next !== displayTitle.value) {
|
||||
displayTitle.value = next
|
||||
}
|
||||
}
|
||||
)
|
||||
// Computed title that provides reactive updates
|
||||
const displayTitle = computed(() => resolveTitle(nodeInfo.value))
|
||||
|
||||
// Event handlers
|
||||
const handleCollapse = () => {
|
||||
@@ -117,7 +109,5 @@ const handleTitleEdit = (newTitle: string) => {
|
||||
|
||||
const handleTitleCancel = () => {
|
||||
isEditing.value = false
|
||||
// Reset displayTitle to the current node title
|
||||
displayTitle.value = nodeInfo.value?.title || 'Untitled'
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user