From 2d1d0448389996af7bd654073d4debcfc01830d8 Mon Sep 17 00:00:00 2001
From: RUiNtheExtinct <deepkarma001@gmail.com>
Date: Sun, 28 Dec 2025 13:19:28 +0530
Subject: [PATCH 1/3] fix: restore bypass/mute visual effect on preview images

When a node is bypassed or muted, the preview images inside it now show
a visual effect (50% opacity + grayscale) to indicate the inactive state.

This was working in frontend 1.33.5 but regressed in newer versions because
the preview components (ImagePreview, LivePreview, VideoPreview) were not
receiving the bypass/mute state from the parent LGraphNode.

Changes:
- Pass inactive prop from LGraphNode to NodeContent and LivePreview
- Add inactive prop to NodeContent and pass to ImagePreview/VideoPreview
- Apply opacity-50 grayscale classes when inactive in all preview components

Fixes #7773
---
 src/renderer/extensions/vueNodes/VideoPreview.vue     | 10 +++++++++-
 .../extensions/vueNodes/components/ImagePreview.vue   |  7 ++++++-
 .../extensions/vueNodes/components/LGraphNode.vue     | 11 +++++++++--
 .../extensions/vueNodes/components/LivePreview.vue    |  7 ++++++-
 .../extensions/vueNodes/components/NodeContent.vue    |  4 ++++
 5 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/VideoPreview.vue b/src/renderer/extensions/vueNodes/VideoPreview.vue
index 06f72d6bf9..1f6af6d694 100644
--- a/src/renderer/extensions/vueNodes/VideoPreview.vue
+++ b/src/renderer/extensions/vueNodes/VideoPreview.vue
@@ -42,7 +42,13 @@
       <video
         v-if="!videoError"
         :src="currentVideoUrl"
-        :class="cn('block size-full object-contain', showLoader && 'invisible')"
+        :class="
+          cn(
+            'block size-full object-contain',
+            showLoader && 'invisible',
+            props.inactive && 'opacity-50 grayscale'
+          )
+        "
         controls
         loop
         playsinline
@@ -126,6 +132,8 @@ interface VideoPreviewProps {
   readonly imageUrls: readonly string[] // Named imageUrls for consistency with parent components
   /** Optional node ID for context-aware actions */
   readonly nodeId?: string
+  /** Whether the node is bypassed or muted */
+  readonly inactive?: boolean
 }
 
 const props = defineProps<VideoPreviewProps>()
diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
index 538a5a5d34..e4ced2f74c 100644
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -43,7 +43,10 @@
         ref="currentImageEl"
         :src="currentImageUrl"
         :alt="imageAltText"
-        class="block size-full object-contain pointer-events-none"
+        :class="[
+          'block size-full object-contain pointer-events-none',
+          { 'opacity-50 grayscale': props.inactive }
+        ]"
         @load="handleImageLoad"
         @error="handleImageError"
       />
@@ -134,6 +137,8 @@ interface ImagePreviewProps {
   readonly imageUrls: readonly string[]
   /** Optional node ID for context-aware actions */
   readonly nodeId?: string
+  /** Whether the node is bypassed or muted */
+  readonly inactive?: boolean
 }
 
 const props = defineProps<ImagePreviewProps>()
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 9de9672602..8a3f850c95 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -113,11 +113,18 @@
         <NodeWidgets v-if="nodeData.widgets?.length" :node-data="nodeData" />
 
         <div v-if="hasCustomContent" class="min-h-0 flex-1 flex">
-          <NodeContent :node-data="nodeData" :media="nodeMedia" />
+          <NodeContent
+            :node-data="nodeData"
+            :media="nodeMedia"
+            :inactive="bypassed || muted"
+          />
         </div>
         <!-- Live mid-execution preview images -->
         <div v-if="shouldShowPreviewImg" class="min-h-0 flex-1 px-4">
-          <LivePreview :image-url="latestPreviewUrl || null" />
+          <LivePreview
+            :image-url="latestPreviewUrl || null"
+            :inactive="bypassed || muted"
+          />
         </div>
       </div>
     </template>
diff --git a/src/renderer/extensions/vueNodes/components/LivePreview.vue b/src/renderer/extensions/vueNodes/components/LivePreview.vue
index a4b090b19d..8d9081484b 100644
--- a/src/renderer/extensions/vueNodes/components/LivePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/LivePreview.vue
@@ -18,7 +18,10 @@
         v-else
         :src="imageUrl"
         :alt="$t('g.liveSamplingPreview')"
-        class="pointer-events-none h-full w-full object-contain object-center"
+        :class="[
+          'pointer-events-none h-full w-full object-contain object-center',
+          { 'opacity-50 grayscale': props.inactive }
+        ]"
         @load="handleImageLoad"
         @error="handleImageError"
       />
@@ -41,6 +44,8 @@ import { ref, watch } from 'vue'
 interface LivePreviewProps {
   /** Image URL to display */
   imageUrl: string | null
+  /** Whether the node is bypassed or muted */
+  inactive?: boolean
 }
 
 const props = defineProps<LivePreviewProps>()
diff --git a/src/renderer/extensions/vueNodes/components/NodeContent.vue b/src/renderer/extensions/vueNodes/components/NodeContent.vue
index ed92251454..a68a13d9fc 100644
--- a/src/renderer/extensions/vueNodes/components/NodeContent.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeContent.vue
@@ -9,12 +9,14 @@
         v-if="hasMedia && media?.type === 'video'"
         :image-urls="media.urls"
         :node-id="nodeId"
+        :inactive="props.inactive"
         class="mt-2"
       />
       <ImagePreview
         v-else-if="hasMedia && media?.type === 'image'"
         :image-urls="media.urls"
         :node-id="nodeId"
+        :inactive="props.inactive"
         class="mt-2"
       />
     </slot>
@@ -37,6 +39,8 @@ interface NodeContentProps {
     type: 'image' | 'video'
     urls: string[]
   }
+  /** Whether the node is bypassed or muted */
+  inactive?: boolean
 }
 
 const props = defineProps<NodeContentProps>()

From 7b45ad06f5e361096b46c696ef13c0e9131b2802 Mon Sep 17 00:00:00 2001
From: RUiNtheExtinct <deepkarma001@gmail.com>
Date: Sun, 28 Dec 2025 13:47:31 +0530
Subject: [PATCH 2/3] refactor: use cn() utility for class binding in preview
 components

Replace Vue array syntax with cn() utility for consistent Tailwind
class merging as per project guidelines.
---
 .../extensions/vueNodes/components/ImagePreview.vue   | 10 ++++++----
 .../extensions/vueNodes/components/LivePreview.vue    | 11 +++++++----
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
index e4ced2f74c..726d9775b4 100644
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -43,10 +43,11 @@
         ref="currentImageEl"
         :src="currentImageUrl"
         :alt="imageAltText"
-        :class="[
-          'block size-full object-contain pointer-events-none',
-          { 'opacity-50 grayscale': props.inactive }
-        ]"
+        :class="
+          cn('block size-full object-contain pointer-events-none', {
+            'opacity-50 grayscale': props.inactive
+          })
+        "
         @load="handleImageLoad"
         @error="handleImageError"
       />
@@ -131,6 +132,7 @@ import { downloadFile } from '@/base/common/downloadUtil'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
+import { cn } from '@/utils/tailwindUtil'
 
 interface ImagePreviewProps {
   /** Array of image URLs to display */
diff --git a/src/renderer/extensions/vueNodes/components/LivePreview.vue b/src/renderer/extensions/vueNodes/components/LivePreview.vue
index 8d9081484b..de76c7a9e3 100644
--- a/src/renderer/extensions/vueNodes/components/LivePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/LivePreview.vue
@@ -18,10 +18,11 @@
         v-else
         :src="imageUrl"
         :alt="$t('g.liveSamplingPreview')"
-        :class="[
-          'pointer-events-none h-full w-full object-contain object-center',
-          { 'opacity-50 grayscale': props.inactive }
-        ]"
+        :class="
+          cn('pointer-events-none h-full w-full object-contain object-center', {
+            'opacity-50 grayscale': props.inactive
+          })
+        "
         @load="handleImageLoad"
         @error="handleImageError"
       />
@@ -41,6 +42,8 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
+import { cn } from '@/utils/tailwindUtil'
+
 interface LivePreviewProps {
   /** Image URL to display */
   imageUrl: string | null

From e9aba7b322561f0c476d8deac21cfbed5c3a797c Mon Sep 17 00:00:00 2001
From: RUiNtheExtinct <deepkarma001@gmail.com>
Date: Mon, 29 Dec 2025 23:16:07 +0530
Subject: [PATCH 3/3] style(VideoPreview): use object syntax in cn() for
 consistency

---
 src/renderer/extensions/vueNodes/VideoPreview.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/VideoPreview.vue b/src/renderer/extensions/vueNodes/VideoPreview.vue
index 1f6af6d694..34a4d3ab76 100644
--- a/src/renderer/extensions/vueNodes/VideoPreview.vue
+++ b/src/renderer/extensions/vueNodes/VideoPreview.vue
@@ -43,11 +43,10 @@
         v-if="!videoError"
         :src="currentVideoUrl"
         :class="
-          cn(
-            'block size-full object-contain',
-            showLoader && 'invisible',
-            props.inactive && 'opacity-50 grayscale'
-          )
+          cn('block size-full object-contain', {
+            invisible: showLoader,
+            'opacity-50 grayscale': props.inactive
+          })
         "
         controls
         loop