From 06f1a804797b652b267eec616c5fe9cdc41dfe91 Mon Sep 17 00:00:00 2001 From: JakeSchroeder Date: Tue, 23 Sep 2025 18:58:40 -0700 Subject: [PATCH] refactor: remove unneeded usePresentation.ts --- .../vueNodes/components/LGraphNode.vue | 109 ++++++++++--- .../vueNodes/components/LGraphNodePreview.vue | 15 +- .../composables/useNodePresentation.ts | 153 ------------------ 3 files changed, 93 insertions(+), 184 deletions(-) delete mode 100644 src/renderer/extensions/vueNodes/composables/useNodePresentation.ts 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 - } -}