[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:
bymyself
2025-09-13 21:59:09 -07:00
parent 93d0109ea5
commit fed177eaf4

View File

@@ -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>