refactor: remove unneeded usePresentation.ts

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) => {

src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue

@@ -3,9 +3,9 @@
     <NodeBaseTemplate
       :node-data="nodeData"
       :readonly="true"
-      :container-classes="presentation.containerBaseClasses.value"
+      :container-classes="containerClasses"
       :is-collapsed="false"
-      :separator-classes="presentation.separatorClasses"
+      :separator-classes="separatorClasses"
       :has-custom-content="false"
       :image-urls="[]"
     />
@@ -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<VueNodeData>(() => {
   }
 })
 
-// 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'
 </script>

src/renderer/extensions/vueNodes/composables/useNodePresentation.ts

@@ -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<boolean>
-  executing?: ComputedRef<boolean>
-  progress?: ComputedRef<number | undefined>
-  hasExecutionError?: ComputedRef<boolean>
-  hasAnyError?: ComputedRef<boolean>
-  bypassed?: ComputedRef<boolean>
-  isDragging?: ComputedRef<boolean> | Ref<boolean>
-  shouldHandleNodePointerEvents?: ComputedRef<boolean>
-}
-
-interface NodePresentationState {
-  // Classes
-  containerBaseClasses: ComputedRef<string>
-  separatorClasses: string
-  progressClasses: string
-  // Computed states
-  isCollapsed: ComputedRef<boolean>
-  showProgress: ComputedRef<boolean>
-  progressStyle: ComputedRef<{ width: string } | undefined>
-  progressBarStyle: ComputedRef<{ width: string } | undefined>
-  progressBarClasses: ComputedRef<string>
-  borderClass: ComputedRef<string | undefined>
-  outlineClass: ComputedRef<string | undefined>
-}
-
-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
-  }
-}