Merge remote-tracking branch 'origin/main' into vue-nodes-migration

2026-04-22 23:39:45 +00:00 · 2025-09-04 13:52:26 -07:00
parent 6a3c075df1 58313ea05b
commit 2a64f538f3
440 changed files with 16610 additions and 5629 deletions
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -130,10 +130,10 @@ import { useNodeBadge } from '@/composables/node/useNodeBadge'
 import { useCanvasDrop } from '@/composables/useCanvasDrop'
 import { useContextMenuTranslation } from '@/composables/useContextMenuTranslation'
 import { useCopy } from '@/composables/useCopy'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
 import { useLitegraphSettings } from '@/composables/useLitegraphSettings'
 import { usePaste } from '@/composables/usePaste'
+import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import { useWorkflowAutoSave } from '@/composables/useWorkflowAutoSave'
 import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
 import { CORE_SETTINGS } from '@/constants/coreSettings'
@@ -194,8 +194,8 @@ const selectionToolboxEnabled = computed(() =>

 const minimapEnabled = computed(() => settingStore.get('Comfy.Minimap.Visible'))

-// Feature flags
-const { shouldRenderVueNodes, isDevModeEnabled } = useFeatureFlags()
+// Feature flags (Vue-related)
+const { shouldRenderVueNodes, isDevModeEnabled } = useVueFeatureFlags()

 // TransformPane enabled when Vue nodes are enabled OR debug override
 const debugOverrideVueNodes = ref(false)
@@ -761,7 +761,7 @@ onMounted(async () => {
  useCopy()
  usePaste()
  useWorkflowAutoSave()
-  useFeatureFlags() // This will automatically sync Vue nodes flag with LiteGraph
+  useVueFeatureFlags() // Automatically syncs Vue nodes flag with LiteGraph

  comfyApp.vueAppReady = true

--- a/src/components/graph/GraphCanvasMenu.vue
+++ b/src/components/graph/GraphCanvasMenu.vue
@@ -5,7 +5,7 @@
    <!-- Backdrop -->
    <div
      v-if="hasActivePopup"
-      class="fixed inset-0 z-[1200]"
+      class="fixed inset-0 z-1200"
      @click="hideModal"
    ></div>

@@ -52,7 +52,7 @@
        icon="pi pi-expand"
        :aria-label="fitViewTooltip"
        :style="stringifiedMinimapStyles.buttonStyles"
-        class="hover:dark-theme:!bg-[#444444] hover:!bg-[#E7E6E6]"
+        class="dark-theme:hover:bg-[#444444]! hover:bg-[#E7E6E6]!"
        @click="() => commandStore.execute('Comfy.Canvas.FitView')"
      >
        <template #icon>
@@ -205,27 +205,27 @@ const focusCommandText = computed(() =>
 // Computed properties for button classes and states
 const selectButtonClass = computed(() =>
  isCanvasUnlocked.value
-    ? 'dark-theme:[&:not(:active)]:!bg-[#262729] [&:not(:active)]:!bg-[#E7E6E6]'
+    ? 'not-active:dark-theme:bg-[#262729]! not-active:bg-[#E7E6E6]!'
    : ''
 )

 const handButtonClass = computed(() =>
  isCanvasReadOnly.value
-    ? 'dark-theme:[&:not(:active)]:!bg-[#262729] [&:not(:active)]:!bg-[#E7E6E6]'
+    ? 'not-active:dark-theme:bg-[#262729]! not-active:bg-[#E7E6E6]!'
    : ''
 )

 const zoomButtonClass = computed(() => [
-  '!w-16',
+  'w-16!',
  isModalVisible.value
-    ? 'dark-theme:[&:not(:active)]:!bg-[#262729] [&:not(:active)]:!bg-[#E7E6E6]'
+    ? 'not-active:dark-theme:bg-[#262729]! not-active:bg-[#E7E6E6]!'
    : '',
-  'hover:dark-theme:!bg-[#262729] hover:!bg-[#E7E6E6]'
+  'dark-theme:hover:bg-[#262729]! hover:bg-[#E7E6E6]!'
 ])

 const focusButtonClass = computed(() => ({
-  'hover:dark-theme:!bg-[#262729] hover:!bg-[#E7E6E6]': true,
-  'dark-theme:[&:not(:active)]:!bg-[#262729] [&:not(:active)]:!bg-[#E7E6E6]':
+  'dark-theme:hover:bg-[#262729]! hover:bg-[#E7E6E6]!': true,
+  'not-active:dark-theme:bg-[#262729]! not-active:bg-[#E7E6E6]!':
    workspaceStore.focusMode
 }))

@@ -254,9 +254,9 @@ const linkVisibilityAriaLabel = computed(() =>
 )
 const linkVisibleClass = computed(() => [
  linkHidden.value
-    ? 'dark-theme:[&:not(:active)]:!bg-[#262729] [&:not(:active)]:!bg-[#E7E6E6]'
+    ? 'not-active:dark-theme:bg-[#262729]! not-active:bg-[#E7E6E6]!'
    : '',
-  'hover:dark-theme:!bg-[#262729] hover:!bg-[#E7E6E6]'
+  'dark-theme:hover:bg-[#262729]! hover:bg-[#E7E6E6]!'
 ])

 onMounted(() => {
--- a/src/components/graph/MiniMap.vue
+++ b/src/components/graph/MiniMap.vue
@@ -2,7 +2,7 @@
  <div
    v-if="visible && initialized"
    ref="minimapRef"
-    class="minimap-main-container flex absolute bottom-[66px] right-2 md:right-11 z-[1000]"
+    class="minimap-main-container flex absolute bottom-[66px] right-2 md:right-11 z-1000"
  >
    <MiniMapPanel
      v-if="showOptionsPanel"
--- a/src/components/graph/modals/ZoomControlsModal.vue
+++ b/src/components/graph/modals/ZoomControlsModal.vue
@@ -1,7 +1,7 @@
 <template>
  <div
    v-if="visible"
-    class="w-[250px] absolute flex justify-center right-2 md:right-11 z-[1300] bottom-[66px] !bg-inherit !border-0"
+    class="w-[250px] absolute flex justify-center right-2 md:right-11 z-1300 bottom-[66px] bg-inherit! border-0!"
  >
    <div
      class="bg-white dark-theme:bg-[#2b2b2b] border border-gray-200 dark-theme:border-gray-700 rounded-lg shadow-lg p-4 w-4/5"
@@ -15,7 +15,7 @@
          :pt="{
            root: {
              class:
-                'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:!bg-transparent focus:!bg-transparent active:!bg-transparent'
+                'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:bg-transparent! focus:bg-transparent! active:bg-transparent!'
            },
            label: {
              class: 'flex flex-col items-start w-full'
@@ -41,7 +41,7 @@
          :pt="{
            root: {
              class:
-                'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:!bg-transparent focus:!bg-transparent active:!bg-transparent'
+                'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:bg-transparent! focus:bg-transparent! active:bg-transparent!'
            },
            label: {
              class: 'flex flex-col items-start w-full'
@@ -67,7 +67,7 @@
          :pt="{
            root: {
              class:
-                'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:!bg-transparent focus:!bg-transparent active:!bg-transparent'
+                'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:bg-transparent! focus:bg-transparent! active:bg-transparent!'
            },
            label: {
              class: 'flex flex-col items-start w-full'
@@ -92,7 +92,7 @@
          :pt="{
            root: {
              class:
-                'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:!bg-transparent focus:!bg-transparent active:!bg-transparent'
+                'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:bg-transparent! focus:bg-transparent! active:bg-transparent!'
            },
            label: {
              class: 'flex flex-col items-start w-full'
@@ -122,7 +122,7 @@
            :show-buttons="false"
            :use-grouping="false"
            :unstyled="true"
-            input-class="flex-1 bg-transparent border-none outline-none text-sm shadow-none my-0 "
+            input-class="flex-1 bg-transparent border-none outline-hidden text-sm shadow-none my-0 "
            fluid
            @input="applyZoom"
            @keyup.enter="applyZoom"
--- a/src/components/graph/selectionToolbox/ColorPickerButton.vue
+++ b/src/components/graph/selectionToolbox/ColorPickerButton.vue
@@ -152,6 +152,8 @@ watch(
 </script>

 <style scoped>
+@reference '../../../assets/css/style.css';
+
 .color-picker-container {
  transform: translateX(-50%);
 }
--- a/src/components/graph/widgets/ChatHistoryWidget.vue
+++ b/src/components/graph/widgets/ChatHistoryWidget.vue
@@ -26,8 +26,8 @@
            "
            text
            rounded
-            class="!p-1 !h-4 !w-4 text-gray-400 hover:text-gray-600 dark-theme:hover:text-gray-200 transition"
-            pt:icon:class="!text-xs"
+            class="p-1! h-4! w-4! text-gray-400 hover:text-gray-600 hover:dark-theme:text-gray-200 transition"
+            pt:icon:class="text-xs!"
            :icon="editIndex === i ? 'pi pi-times' : 'pi pi-pencil'"
            :aria-label="
              editIndex === i ? $t('chatHistory.cancelEdit') : $t('g.edit')
--- a/src/components/graph/widgets/DomWidget.vue
+++ b/src/components/graph/widgets/DomWidget.vue
@@ -189,6 +189,8 @@ watch(
 </script>

 <style scoped>
+@reference '../../../assets/css/style.css';
+
 .dom-widget > * {
  @apply h-full w-full;
 }
--- a/src/components/graph/widgets/TextPreviewWidget.vue
+++ b/src/components/graph/widgets/TextPreviewWidget.vue
@@ -5,7 +5,7 @@
    <div class="flex items-center gap-2">
      <div class="flex-1 break-all flex items-center gap-2">
        <span v-html="formattedText"></span>
-        <Skeleton v-if="isParentNodeExecuting" class="!flex-1 !h-4" />
+        <Skeleton v-if="isParentNodeExecuting" class="flex-1! h-4!" />
      </div>
    </div>
  </div>
--- a/src/components/graph/widgets/chatHistory/CopyButton.vue
+++ b/src/components/graph/widgets/chatHistory/CopyButton.vue
@@ -5,8 +5,8 @@
    "
    text
    rounded
-    class="!p-1 !h-4 !w-6 text-gray-400 hover:text-gray-600 dark-theme:hover:text-gray-200 transition"
-    pt:icon:class="!text-xs"
+    class="p-1! h-4! w-6! text-gray-400 hover:text-gray-600 hover:dark-theme:text-gray-200 transition"
+    pt:icon:class="text-xs!"
    :icon="copied ? 'pi pi-check' : 'pi pi-copy'"
    :aria-label="
      copied ? $t('chatHistory.copiedTooltip') : $t('chatHistory.copyTooltip')