fix: node shape not reactive in vueNodes mode (#7302)

## Summary

add node shape support in vueNodes

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7144

## Screenshots (if applicable)


https://github.com/user-attachments/assets/df8a4fa6-5686-435d-a814-4fe3990f7e69

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7302-fix-node-shape-not-reactive-in-vueNodes-mode-2c56d73d3650811c9ef5e4fe49c94f55)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

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

@@ -11,7 +11,8 @@
         'bg-component-node-background lg-node absolute pb-1',
 
         'contain-style contain-layout min-w-[225px] min-h-(--node-height) w-(--node-width)',
-        'rounded-2xl touch-none flex flex-col',
+        shapeClass,
+        'touch-none flex flex-col',
         'border-1 border-solid border-component-node-border',
         // hover (only when node should handle events)
         shouldHandleNodePointerEvents &&
@@ -21,9 +22,9 @@
         outlineClass,
         cursorClass,
         {
-          'before:rounded-2xl before:pointer-events-none before:absolute before:bg-bypass/60 before:inset-0':
+          [`${beforeShapeClass} before:pointer-events-none before:absolute before:bg-bypass/60 before:inset-0`]:
             bypassed,
-          'before:rounded-2xl before:pointer-events-none before:absolute before:inset-0':
+          [`${beforeShapeClass} before:pointer-events-none before:absolute before:inset-0`]:
             muted,
           'ring-4 ring-primary-500 bg-primary-500/10': isDraggingOver
         },
@@ -140,7 +141,8 @@ import { st } from '@/i18n'
 import {
   LGraphCanvas,
   LGraphEventMode,
-  LiteGraph
+  LiteGraph,
+  RenderShape
 } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
@@ -383,6 +385,28 @@ const cursorClass = computed(() => {
   )
 })
 
+const shapeClass = computed(() => {
+  switch (nodeData.shape) {
+    case RenderShape.BOX:
+      return 'rounded-none'
+    case RenderShape.CARD:
+      return 'rounded-tl-2xl rounded-br-2xl rounded-tr-none rounded-bl-none'
+    default:
+      return 'rounded-2xl'
+  }
+})
+
+const beforeShapeClass = computed(() => {
+  switch (nodeData.shape) {
+    case RenderShape.BOX:
+      return 'before:rounded-none'
+    case RenderShape.CARD:
+      return 'before:rounded-tl-2xl before:rounded-br-2xl before:rounded-tr-none before:rounded-bl-none'
+    default:
+      return 'before:rounded-2xl'
+  }
+})
+
 // Event handlers
 const handleCollapse = () => {
   handleNodeCollapse(nodeData.id, !isCollapsed.value)

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

@@ -6,9 +6,9 @@
     v-else
     :class="
       cn(
-        'lg-node-header py-2 pl-2 pr-3 text-sm rounded-t-2xl w-full min-w-0',
+        'lg-node-header py-2 pl-2 pr-3 text-sm w-full min-w-0',
         'text-node-component-header bg-node-component-header-surface',
-        collapsed && 'rounded-2xl'
+        headerShapeClass
       )
     "
     :style="headerStyle"
@@ -109,7 +109,7 @@ import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { st } from '@/i18n'
-import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
+import { LGraphEventMode, RenderShape } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import NodeBadge from '@/renderer/extensions/vueNodes/components/NodeBadge.vue'
 import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
@@ -216,6 +216,28 @@ const nodeBadges = computed<NodeBadgeProps[]>(() =>
 )
 const isPinned = computed(() => Boolean(nodeData?.flags?.pinned))
 const isApiNode = computed(() => Boolean(nodeData?.apiNode))
+
+const headerShapeClass = computed(() => {
+  if (collapsed) {
+    switch (nodeData?.shape) {
+      case RenderShape.BOX:
+        return 'rounded-none'
+      case RenderShape.CARD:
+        return 'rounded-tl-2xl rounded-br-2xl rounded-tr-none rounded-bl-none'
+      default:
+        return 'rounded-2xl'
+    }
+  }
+  switch (nodeData?.shape) {
+    case RenderShape.BOX:
+      return 'rounded-t-none'
+    case RenderShape.CARD:
+      return 'rounded-tl-2xl rounded-tr-none'
+    default:
+      return 'rounded-t-2xl'
+  }
+})
+
 // Subgraph detection
 const isSubgraphNode = computed(() => {
   if (!nodeData?.id) return false