Vue Node Body

src/components/graph/vueNodes/LGraphNode.vue

@@ -5,7 +5,7 @@
   <div
     v-else
     :class="[
-      'lg-node absolute border-2 rounded',
+      'lg-node absolute border-2 rounded-lg',
       'contain-layout contain-style contain-paint',
       selected ? 'border-blue-500 ring-2 ring-blue-300' : 'border-gray-600',
       executing ? 'animate-pulse' : '',

src/components/graph/vueNodes/NodeHeader.vue

@@ -4,40 +4,27 @@
   </div>
   <div
     v-else
-    class="lg-node-header flex items-center justify-between px-3 py-2 rounded-t cursor-move"
+    class="lg-node-header flex items-center justify-between p-2 rounded-t-lg cursor-move -mt-[30px]"
     :style="{
       backgroundColor: headerColor,
       color: textColor
     }"
     @dblclick="handleDoubleClick"
   >
+    <!-- Collapse/Expand Button -->
+    <button
+      v-if="!readonly"
+      class="bg-transparent border-transparent flex items-center"
+      title="Toggle collapse"
+      @click.stop="handleCollapse"
+    >
+      <i class="pi pi-chevron-down text-xs leading-none relative top-[1px]"></i>
+    </button>
+
     <!-- Node Title -->
     <span class="text-sm font-medium truncate flex-1">
       {{ nodeInfo?.title || 'Untitled' }}
     </span>
-
-    <!-- Node Controls -->
-    <div class="flex items-center gap-1 ml-2">
-      <!-- Collapse/Expand Button -->
-      <button
-        v-if="!readonly"
-        class="lg-node-header__control p-0.5 rounded hover:bg-white/20 dark-theme:hover:bg-black/20 transition-colors opacity-60 hover:opacity-100"
-        title="Toggle collapse"
-        @click.stop="handleCollapse"
-      >
-        <svg
-          class="w-3 h-3 transition-transform"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-        >
-          <polyline points="6 9 12 15 18 9"></polyline>
-        </svg>
-      </button>
-
-      <!-- Additional controls can be added here -->
-    </div>
   </div>
 </template>
 

src/locales/en/commands.json

@@ -231,19 +231,19 @@
     "label": "Toggle Focus Mode"
   },
   "Workspace_ToggleSidebarTab_model-library": {
-    "label": "Toggle Model Library Sidebar",
-    "tooltip": "Model Library"
+    "label": "sideToolbar.modelLibrary",
+    "tooltip": "sideToolbar.modelLibrary"
   },
   "Workspace_ToggleSidebarTab_node-library": {
-    "label": "Toggle Node Library Sidebar",
-    "tooltip": "Node Library"
+    "label": "sideToolbar.nodeLibrary",
+    "tooltip": "sideToolbar.nodeLibrary"
   },
   "Workspace_ToggleSidebarTab_queue": {
-    "label": "Toggle Queue Sidebar",
-    "tooltip": "Queue"
+    "label": "sideToolbar.queue",
+    "tooltip": "sideToolbar.queue"
   },
   "Workspace_ToggleSidebarTab_workflows": {
-    "label": "Toggle Workflows Sidebar",
-    "tooltip": "Workflows"
+    "label": "sideToolbar.workflows",
+    "tooltip": "sideToolbar.workflows"
   }
 }

src/locales/en/main.json

@@ -878,10 +878,10 @@
     "Toggle Terminal Bottom Panel": "Toggle Terminal Bottom Panel",
     "Toggle Logs Bottom Panel": "Toggle Logs Bottom Panel",
     "Toggle Focus Mode": "Toggle Focus Mode",
-    "Toggle Model Library Sidebar": "Toggle Model Library Sidebar",
-    "Toggle Node Library Sidebar": "Toggle Node Library Sidebar",
-    "Toggle Queue Sidebar": "Toggle Queue Sidebar",
-    "Toggle Workflows Sidebar": "Toggle Workflows Sidebar"
+    "sideToolbar_modelLibrary": "sideToolbar.modelLibrary",
+    "sideToolbar_nodeLibrary": "sideToolbar.nodeLibrary",
+    "sideToolbar_queue": "sideToolbar.queue",
+    "sideToolbar_workflows": "sideToolbar.workflows"
   },
   "desktopMenu": {
     "reinstall": "Reinstall",
@@ -939,7 +939,8 @@
     "Light": "Light",
     "User": "User",
     "Credits": "Credits",
-    "API Nodes": "API Nodes"
+    "API Nodes": "API Nodes",
+    "Vue Nodes": "Vue Nodes"
   },
   "serverConfigItems": {
     "listen": {

src/locales/en/settings.json

@@ -331,6 +331,14 @@
   "Comfy_Validation_Workflows": {
     "name": "Validate workflows"
   },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Enable Vue node rendering",
+    "tooltip": "Render nodes as Vue components instead of canvas elements. Experimental feature."
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "Enable Vue widgets",
+    "tooltip": "Render widgets as Vue components within Vue nodes."
+  },
   "Comfy_WidgetControlMode": {
     "name": "Widget control mode",
     "tooltip": "Controls when widget values are updated (randomize/increment/decrement), either before the prompt is queued or after.",

src/locales/es/main.json

@@ -775,20 +775,20 @@
     "Toggle Bottom Panel": "Alternar panel inferior",
     "Toggle Focus Mode": "Alternar modo de enfoque",
     "Toggle Logs Bottom Panel": "Alternar panel inferior de registros",
-    "Toggle Model Library Sidebar": "Alternar barra lateral de biblioteca de modelos",
-    "Toggle Node Library Sidebar": "Alternar barra lateral de biblioteca de nodos",
-    "Toggle Queue Sidebar": "Alternar barra lateral de cola",
     "Toggle Search Box": "Alternar caja de búsqueda",
     "Toggle Terminal Bottom Panel": "Alternar panel inferior de terminal",
     "Toggle Theme (Dark/Light)": "Alternar tema (Oscuro/Claro)",
-    "Toggle Workflows Sidebar": "Alternar barra lateral de flujos de trabajo",
     "Toggle the Custom Nodes Manager": "Alternar el Administrador de Nodos Personalizados",
     "Toggle the Custom Nodes Manager Progress Bar": "Alternar la Barra de Progreso del Administrador de Nodos Personalizados",
     "Undo": "Deshacer",
     "Ungroup selected group nodes": "Desagrupar nodos de grupo seleccionados",
     "Workflow": "Flujo de trabajo",
     "Zoom In": "Acercar",
-    "Zoom Out": "Alejar"
+    "Zoom Out": "Alejar",
+    "sideToolbar_modelLibrary": "sideToolbar.bibliotecaDeModelos",
+    "sideToolbar_nodeLibrary": "sideToolbar.bibliotecaDeNodos",
+    "sideToolbar_queue": "sideToolbar.cola",
+    "sideToolbar_workflows": "sideToolbar.flujosDeTrabajo"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "No mostrar esto de nuevo",
@@ -1103,6 +1103,7 @@
     "UV": "UV",
     "User": "Usuario",
     "Validation": "Validación",
+    "Vue Nodes": "Nodos Vue",
     "Window": "Ventana",
     "Workflow": "Flujo de Trabajo"
   },

src/locales/es/settings.json

@@ -331,6 +331,14 @@
   "Comfy_Validation_Workflows": {
     "name": "Validar flujos de trabajo"
   },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Habilitar renderizado de nodos Vue",
+    "tooltip": "Renderiza los nodos como componentes Vue en lugar de elementos canvas. Función experimental."
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "Habilitar widgets de Vue",
+    "tooltip": "Renderiza los widgets como componentes de Vue dentro de los nodos de Vue."
+  },
   "Comfy_WidgetControlMode": {
     "name": "Modo de control del widget",
     "options": {

src/locales/fr/main.json

@@ -775,20 +775,20 @@
     "Toggle Bottom Panel": "Basculer le panneau inférieur",
     "Toggle Focus Mode": "Basculer le mode focus",
     "Toggle Logs Bottom Panel": "Basculer le panneau inférieur des journaux",
-    "Toggle Model Library Sidebar": "Basculer la barre latérale de la bibliothèque de modèles",
-    "Toggle Node Library Sidebar": "Basculer la barre latérale de la bibliothèque de nœuds",
-    "Toggle Queue Sidebar": "Basculer la barre latérale de la file d'attente",
     "Toggle Search Box": "Basculer la boîte de recherche",
     "Toggle Terminal Bottom Panel": "Basculer le panneau inférieur du terminal",
     "Toggle Theme (Dark/Light)": "Basculer le thème (Sombre/Clair)",
-    "Toggle Workflows Sidebar": "Basculer la barre latérale des flux de travail",
     "Toggle the Custom Nodes Manager": "Basculer le gestionnaire de nœuds personnalisés",
     "Toggle the Custom Nodes Manager Progress Bar": "Basculer la barre de progression du gestionnaire de nœuds personnalisés",
     "Undo": "Annuler",
     "Ungroup selected group nodes": "Dégrouper les nœuds de groupe sélectionnés",
     "Workflow": "Flux de travail",
     "Zoom In": "Zoom avant",
-    "Zoom Out": "Zoom arrière"
+    "Zoom Out": "Zoom arrière",
+    "sideToolbar_modelLibrary": "Bibliothèque de modèles",
+    "sideToolbar_nodeLibrary": "Bibliothèque de nœuds",
+    "sideToolbar_queue": "File d'attente",
+    "sideToolbar_workflows": "Flux de travail"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "Ne plus afficher ce message",
@@ -1103,6 +1103,7 @@
     "UV": "UV",
     "User": "Utilisateur",
     "Validation": "Validation",
+    "Vue Nodes": "Nœuds Vue",
     "Window": "Fenêtre",
     "Workflow": "Flux de Travail"
   },

src/locales/fr/settings.json

@@ -331,6 +331,14 @@
   "Comfy_Validation_Workflows": {
     "name": "Valider les flux de travail"
   },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Activer le rendu des nœuds Vue",
+    "tooltip": "Rendre les nœuds comme composants Vue au lieu d’éléments canvas. Fonctionnalité expérimentale."
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "Activer les widgets Vue",
+    "tooltip": "Rendre les widgets comme composants Vue à l'intérieur des nœuds Vue."
+  },
   "Comfy_WidgetControlMode": {
     "name": "Mode de contrôle du widget",
     "options": {

src/locales/ja/main.json

@@ -775,20 +775,20 @@
     "Toggle Bottom Panel": "下部パネルの切り替え",
     "Toggle Focus Mode": "フォーカスモードの切り替え",
     "Toggle Logs Bottom Panel": "ログパネル下部を切り替え",
-    "Toggle Model Library Sidebar": "モデルライブラリサイドバーを切り替え",
-    "Toggle Node Library Sidebar": "ノードライブラリサイドバーを切り替え",
-    "Toggle Queue Sidebar": "キューサイドバーを切り替え",
     "Toggle Search Box": "検索ボックスの切り替え",
     "Toggle Terminal Bottom Panel": "ターミナルパネル下部を切り替え",
     "Toggle Theme (Dark/Light)": "テーマを切り替え（ダーク/ライト）",
-    "Toggle Workflows Sidebar": "ワークフローサイドバーを切り替え",
     "Toggle the Custom Nodes Manager": "カスタムノードマネージャーを切り替え",
     "Toggle the Custom Nodes Manager Progress Bar": "カスタムノードマネージャーの進行状況バーを切り替え",
     "Undo": "元に戻す",
     "Ungroup selected group nodes": "選択したグループノードのグループ解除",
     "Workflow": "ワークフロー",
     "Zoom In": "ズームイン",
-    "Zoom Out": "ズームアウト"
+    "Zoom Out": "ズームアウト",
+    "sideToolbar_modelLibrary": "モデルライブラリ",
+    "sideToolbar_nodeLibrary": "ノードライブラリ",
+    "sideToolbar_queue": "キュー",
+    "sideToolbar_workflows": "ワークフロー"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "再度表示しない",
@@ -1103,6 +1103,7 @@
     "UV": "UV",
     "User": "ユーザー",
     "Validation": "検証",
+    "Vue Nodes": "Vueノード",
     "Window": "ウィンドウ",
     "Workflow": "ワークフロー"
   },

src/locales/ja/settings.json

@@ -331,6 +331,14 @@
   "Comfy_Validation_Workflows": {
     "name": "ワークフローを検証"
   },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Vueノードレンダリングを有効化",
+    "tooltip": "ノードをキャンバス要素の代わりにVueコンポーネントとしてレンダリングします。実験的な機能です。"
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "Vueウィジェットを有効化",
+    "tooltip": "ウィジェットをVueノード内のVueコンポーネントとしてレンダリングします。"
+  },
   "Comfy_WidgetControlMode": {
     "name": "ウィジェット制御モード",
     "options": {

src/locales/ko/main.json

@@ -775,20 +775,20 @@
     "Toggle Bottom Panel": "하단 패널 전환",
     "Toggle Focus Mode": "포커스 모드 전환",
     "Toggle Logs Bottom Panel": "로그 하단 패널 전환",
-    "Toggle Model Library Sidebar": "모델 라이브러리 사이드바 전환",
-    "Toggle Node Library Sidebar": "노드 라이브러리 사이드바 전환",
-    "Toggle Queue Sidebar": "실행 대기열 사이드바 전환",
     "Toggle Search Box": "검색 상자 전환",
     "Toggle Terminal Bottom Panel": "터미널 하단 패널 전환",
     "Toggle Theme (Dark/Light)": "테마 전환 (어두운/밝은)",
-    "Toggle Workflows Sidebar": "워크플로 사이드바 전환",
     "Toggle the Custom Nodes Manager": "커스텀 노드 매니저 전환",
     "Toggle the Custom Nodes Manager Progress Bar": "커스텀 노드 매니저 진행률 표시줄 전환",
     "Undo": "실행 취소",
     "Ungroup selected group nodes": "선택한 그룹 노드 그룹 해제",
     "Workflow": "워크플로",
     "Zoom In": "확대",
-    "Zoom Out": "축소"
+    "Zoom Out": "축소",
+    "sideToolbar_modelLibrary": "sideToolbar.모델 라이브러리",
+    "sideToolbar_nodeLibrary": "sideToolbar.노드 라이브러리",
+    "sideToolbar_queue": "sideToolbar.대기열",
+    "sideToolbar_workflows": "sideToolbar.워크플로우"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "다시 보지 않기",
@@ -1103,6 +1103,7 @@
     "UV": "UV",
     "User": "사용자",
     "Validation": "검증",
+    "Vue Nodes": "Vue 노드",
     "Window": "창",
     "Workflow": "워크플로"
   },

src/locales/ko/settings.json

@@ -331,6 +331,14 @@
   "Comfy_Validation_Workflows": {
     "name": "워크플로 유효성 검사"
   },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Vue 노드 렌더링 활성화",
+    "tooltip": "노드를 캔버스 요소 대신 Vue 컴포넌트로 렌더링합니다. 실험적인 기능입니다."
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "Vue 위젯 활성화",
+    "tooltip": "Vue 노드 내에서 위젯을 Vue 컴포넌트로 렌더링합니다."
+  },
   "Comfy_WidgetControlMode": {
     "name": "위젯 제어 모드",
     "options": {

src/locales/ru/main.json

@@ -775,20 +775,20 @@
     "Toggle Bottom Panel": "Переключить нижнюю панель",
     "Toggle Focus Mode": "Переключить режим фокуса",
     "Toggle Logs Bottom Panel": "Переключение нижней панели журналов",
-    "Toggle Model Library Sidebar": "Переключение боковой панели библиотеки моделей",
-    "Toggle Node Library Sidebar": "Переключение боковой панели библиотеки нод",
-    "Toggle Queue Sidebar": "Переключение боковой панели очереди",
     "Toggle Search Box": "Переключить поисковую панель",
     "Toggle Terminal Bottom Panel": "Переключение нижней панели терминала",
     "Toggle Theme (Dark/Light)": "Переключение темы (Тёмная/Светлая)",
-    "Toggle Workflows Sidebar": "Переключение боковой панели рабочих процессов",
     "Toggle the Custom Nodes Manager": "Переключить менеджер пользовательских узлов",
     "Toggle the Custom Nodes Manager Progress Bar": "Переключить индикатор выполнения менеджера пользовательских узлов",
     "Undo": "Отменить",
     "Ungroup selected group nodes": "Разгруппировать выбранные групповые ноды",
     "Workflow": "Рабочий процесс",
     "Zoom In": "Увеличить",
-    "Zoom Out": "Уменьшить"
+    "Zoom Out": "Уменьшить",
+    "sideToolbar_modelLibrary": "sideToolbar.каталогМоделей",
+    "sideToolbar_nodeLibrary": "sideToolbar.каталогУзлов",
+    "sideToolbar_queue": "sideToolbar.очередь",
+    "sideToolbar_workflows": "sideToolbar.рабочиеПроцессы"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "Больше не показывать это",
@@ -1103,6 +1103,7 @@
     "UV": "UV",
     "User": "Пользователь",
     "Validation": "Валидация",
+    "Vue Nodes": "Vue Nodes",
     "Window": "Окно",
     "Workflow": "Рабочий процесс"
   },

src/locales/ru/settings.json

@@ -331,6 +331,14 @@
   "Comfy_Validation_Workflows": {
     "name": "Проверка рабочих процессов"
   },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Включить рендеринг узлов через Vue",
+    "tooltip": "Отображать узлы как компоненты Vue вместо элементов canvas. Экспериментальная функция."
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "Включить виджеты Vue",
+    "tooltip": "Отображать виджеты как компоненты Vue внутри узлов Vue."
+  },
   "Comfy_WidgetControlMode": {
     "name": "Режим управления виджетом",
     "options": {