mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-28 18:54:09 +00:00
7e51bc45f9
- LGraphNode: Main container with transform-based positioning - NodeHeader: Collapsible title bar with dynamic coloring - NodeSlots: Input/output connection visualization - NodeWidgets: Integration with existing widget system - NodeContent: Extensibility placeholder - Error boundaries and performance optimizations (v-memo, CSS containment)
34 lines
859 B
Vue
34 lines
859 B
Vue
<template>
|
||
<div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
|
||
⚠️ Node Content Error
|
||
</div>
|
||
<div v-else class="lg-node-content">
|
||
<!-- Default slot for custom content -->
|
||
<slot>
|
||
<!-- This component serves as a placeholder for future extensibility -->
|
||
<!-- Currently all node content is rendered through the widget system -->
|
||
</slot>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import type { LGraphNode } from '@comfyorg/litegraph'
|
||
import { onErrorCaptured, ref } from 'vue'
|
||
|
||
interface NodeContentProps {
|
||
node: LGraphNode
|
||
readonly?: boolean
|
||
}
|
||
|
||
defineProps<NodeContentProps>()
|
||
|
||
// Error boundary implementation
|
||
const renderError = ref<string | null>(null)
|
||
|
||
onErrorCaptured((error) => {
|
||
renderError.value = error.message
|
||
console.error('Vue node content error:', error)
|
||
return false
|
||
})
|
||
</script>
|