diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index f7f919259..6ebcde7b0 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -6,16 +6,16 @@
v-else
:node-data="nodeData"
:readonly="readonly"
- :container-classes="presentation.containerBaseClasses.value"
+ :container-classes="containerClasses"
:container-style="containerStyle"
- :is-collapsed="presentation.isCollapsed.value"
- :separator-classes="presentation.separatorClasses"
- :progress-classes="presentation.progressClasses"
- :progress-bar-classes="presentation.progressBarClasses.value"
- :show-progress="presentation.showProgress.value"
+ :is-collapsed="isCollapsed"
+ :separator-classes="separatorClasses"
+ :progress-classes="progressClasses"
+ :progress-bar-classes="progressBarClasses"
+ :show-progress="showProgress"
:progress-value="progress"
- :progress-style="presentation.progressStyle.value"
- :progress-bar-style="presentation.progressBarStyle.value"
+ :progress-style="progressStyle"
+ :progress-bar-style="progressBarStyle"
:has-custom-content="hasCustomContent"
:image-urls="nodeImageUrls"
:show-preview-image="shouldShowPreviewImg"
@@ -44,7 +44,6 @@ import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteracti
import { TransformStateKey } from '@/renderer/core/layout/injectionKeys'
import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
import { useNodePointerInteractions } from '@/renderer/extensions/vueNodes/composables/useNodePointerInteractions'
-import { useNodePresentation } from '@/renderer/extensions/vueNodes/composables/useNodePresentation'
import { useVueElementTracking } from '@/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking'
import { useNodeExecutionState } from '@/renderer/extensions/vueNodes/execution/useNodeExecutionState'
import { useNodeLayout } from '@/renderer/extensions/vueNodes/layout/useNodeLayout'
@@ -56,6 +55,7 @@ import {
getLocatorIdFromNodeData,
getNodeByLocatorId
} from '@/utils/graphTraversalUtil'
+import { cn } from '@/utils/tailwindUtil'
import NodeBaseTemplate from './NodeBaseTemplate.vue'
@@ -138,20 +138,83 @@ onMounted(() => {
}
})
-// Use the new presentation composable
-const presentation = useNodePresentation(() => nodeData, {
- readonly,
- isPreview: false,
- isSelected,
- executing,
- progress,
- hasExecutionError,
- hasAnyError,
- bypassed,
- isDragging,
- shouldHandleNodePointerEvents
+// Collapsed state
+const isCollapsed = computed(() => nodeData.flags?.collapsed ?? false)
+
+// Show progress when executing with defined progress
+const showProgress = computed(() => {
+ return !!(executing.value && progress.value !== undefined)
})
+// Progress styles
+const progressStyle = computed(() => {
+ if (!showProgress.value || !progress.value) return undefined
+ return { width: `${Math.min(progress.value * 100, 100)}%` }
+})
+
+const progressBarStyle = progressStyle
+
+// Border class based on state
+const borderClass = computed(() => {
+ if (hasAnyError.value) {
+ return 'border-error'
+ }
+ if (executing.value) {
+ return 'border-blue-500'
+ }
+ return undefined
+})
+
+// Outline class based on selection and state
+const outlineClass = computed(() => {
+ if (!isSelected.value) {
+ return undefined
+ }
+ if (hasAnyError.value) {
+ return 'outline-error'
+ }
+ if (executing.value) {
+ return 'outline-blue-500'
+ }
+ return 'outline-black dark-theme:outline-white'
+})
+
+// Container classes
+const containerClasses = computed(() => {
+ return cn(
+ 'bg-white dark-theme:bg-charcoal-800',
+ 'lg-node absolute rounded-2xl',
+ 'border border-solid border-sand-100 dark-theme:border-charcoal-600',
+ // hover (only when node should handle events)
+ shouldHandleNodePointerEvents.value &&
+ 'hover:ring-7 ring-gray-500/50 dark-theme:ring-gray-500/20',
+ 'outline-transparent -outline-offset-2 outline-2',
+ borderClass.value,
+ outlineClass.value,
+ {
+ 'animate-pulse': executing.value,
+ 'opacity-50 before:rounded-2xl before:pointer-events-none before:absolute before:bg-bypass/60 before:inset-0':
+ bypassed.value,
+ 'will-change-transform': isDragging.value
+ },
+ shouldHandleNodePointerEvents.value
+ ? 'pointer-events-auto'
+ : 'pointer-events-none'
+ )
+})
+
+const progressBarClasses = computed(() => {
+ return cn(
+ 'absolute inset-x-4 -bottom-[1px] translate-y-1/2 rounded-full',
+ progressClasses
+ )
+})
+
+// Static classes
+const separatorClasses =
+ 'bg-sand-100 dark-theme:bg-charcoal-600 h-px mx-0 w-full lod-toggle'
+const progressClasses = 'h-2 bg-primary-500 transition-all duration-300'
+
// Container style combining position and drag styles
const containerStyle = computed(() => [
{
@@ -170,13 +233,13 @@ const hasCustomContent = computed(() => {
const { latestPreviewUrl, shouldShowPreviewImg } = useNodePreviewState(
() => nodeData.id,
{
- isCollapsed: presentation.isCollapsed
+ isCollapsed
}
)
// Event handlers
const handleCollapse = () => {
- handleNodeCollapse(nodeData.id, !presentation.isCollapsed.value)
+ handleNodeCollapse(nodeData.id, !isCollapsed.value)
}
const handleHeaderTitleUpdate = (newTitle: string) => {
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
index dd060de61..03dbeffd1 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
@@ -3,9 +3,9 @@
@@ -16,7 +16,6 @@
import { computed } from 'vue'
import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
-import { useNodePresentation } from '@/renderer/extensions/vueNodes/composables/useNodePresentation'
import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
import { useWidgetStore } from '@/stores/widgetStore'
@@ -77,9 +76,9 @@ const nodeData = computed(() => {
}
})
-// Use the presentation composable with preview mode
-const presentation = useNodePresentation(() => nodeData.value, {
- readonly: true,
- isPreview: true
-})
+// Static classes for preview mode
+const containerClasses =
+ 'bg-white dark-theme:bg-charcoal-800 lg-node absolute rounded-2xl border border-solid border-sand-100 dark-theme:border-charcoal-600 outline-transparent -outline-offset-2 outline-2 pointer-events-none'
+const separatorClasses =
+ 'bg-sand-100 dark-theme:bg-charcoal-600 h-px mx-0 w-full'
diff --git a/src/renderer/extensions/vueNodes/composables/useNodePresentation.ts b/src/renderer/extensions/vueNodes/composables/useNodePresentation.ts
deleted file mode 100644
index 607285d08..000000000
--- a/src/renderer/extensions/vueNodes/composables/useNodePresentation.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-import { type ComputedRef, type Ref, computed, unref } from 'vue'
-
-import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
-import { cn } from '@/utils/tailwindUtil'
-
-interface NodePresentationOptions {
- readonly?: boolean
- isPreview?: boolean
- scale?: number
- // Interactive node state
- isSelected?: ComputedRef
- executing?: ComputedRef
- progress?: ComputedRef
- hasExecutionError?: ComputedRef
- hasAnyError?: ComputedRef
- bypassed?: ComputedRef
- isDragging?: ComputedRef | Ref
- shouldHandleNodePointerEvents?: ComputedRef
-}
-
-interface NodePresentationState {
- // Classes
- containerBaseClasses: ComputedRef
- separatorClasses: string
- progressClasses: string
- // Computed states
- isCollapsed: ComputedRef
- showProgress: ComputedRef
- progressStyle: ComputedRef<{ width: string } | undefined>
- progressBarStyle: ComputedRef<{ width: string } | undefined>
- progressBarClasses: ComputedRef
- borderClass: ComputedRef
- outlineClass: ComputedRef
-}
-
-export function useNodePresentation(
- nodeData: () => VueNodeData | undefined,
- options: NodePresentationOptions = {}
-): NodePresentationState {
- const {
- isPreview = false,
- isSelected,
- executing,
- progress,
- hasAnyError,
- bypassed,
- isDragging,
- shouldHandleNodePointerEvents
- } = options
-
- // Collapsed state
- const isCollapsed = computed(() => nodeData()?.flags?.collapsed ?? false)
-
- // Show progress when executing with defined progress
- const showProgress = computed(() => {
- if (isPreview) return false
- return !!(executing?.value && progress?.value !== undefined)
- })
-
- // Progress styles
- const progressStyle = computed(() => {
- if (!showProgress.value || !progress?.value) return undefined
- return { width: `${Math.min(progress.value * 100, 100)}%` }
- })
-
- const progressBarStyle = progressStyle
-
- // Border class based on state
- const borderClass = computed(() => {
- if (isPreview) return undefined
- if (hasAnyError?.value) {
- return 'border-error'
- }
- if (executing?.value) {
- return 'border-blue-500'
- }
- return undefined
- })
-
- // Outline class based on selection and state
- const outlineClass = computed(() => {
- if (isPreview) return undefined
- if (!isSelected?.value) {
- return undefined
- }
- if (hasAnyError?.value) {
- return 'outline-error'
- }
- if (executing?.value) {
- return 'outline-blue-500'
- }
- return 'outline-black dark-theme:outline-white'
- })
-
- // Container base classes (without dynamic state classes)
- const containerBaseClasses = computed(() => {
- if (isPreview) {
- return cn(
- 'bg-white dark-theme:bg-charcoal-800',
- 'lg-node absolute rounded-2xl',
- 'border border-solid border-sand-100 dark-theme:border-charcoal-600',
- 'outline-transparent -outline-offset-2 outline-2',
- 'pointer-events-none'
- )
- }
-
- return cn(
- 'bg-white dark-theme:bg-charcoal-800',
- 'lg-node absolute rounded-2xl',
- 'border border-solid border-sand-100 dark-theme:border-charcoal-600',
- // hover (only when node should handle events)
- shouldHandleNodePointerEvents?.value &&
- 'hover:ring-7 ring-gray-500/50 dark-theme:ring-gray-500/20',
- 'outline-transparent -outline-offset-2 outline-2',
- borderClass.value,
- outlineClass.value,
- {
- 'animate-pulse': executing?.value,
- 'opacity-50 before:rounded-2xl before:pointer-events-none before:absolute before:bg-bypass/60 before:inset-0':
- bypassed?.value,
- 'will-change-transform': unref(isDragging)
- },
- shouldHandleNodePointerEvents?.value
- ? 'pointer-events-auto'
- : 'pointer-events-none'
- )
- })
-
- const progressBarClasses = computed(() => {
- return cn(
- 'absolute inset-x-4 -bottom-[1px] translate-y-1/2 rounded-full',
- progressClasses
- )
- })
-
- // Static classes
- const separatorClasses =
- 'bg-sand-100 dark-theme:bg-charcoal-600 h-px mx-0 w-full lod-toggle'
- const progressClasses = 'h-2 bg-primary-500 transition-all duration-300'
-
- return {
- containerBaseClasses,
- separatorClasses,
- progressClasses,
- isCollapsed,
- showProgress,
- progressStyle,
- progressBarStyle,
- progressBarClasses,
- borderClass,
- outlineClass
- }
-}