Refactor jank offset

Author: benceruleanlu

src/components/graph/vueNodes/LGraphNode.vue

@@ -15,7 +15,7 @@
       lodCssClass
     ]"
     :style="{
-      transform: `translate(${position?.x ?? 0}px, ${position?.y ?? 0}px)`,
+      transform: `translate(${position?.x ?? 0}px, ${(position?.y ?? 0) - LiteGraph.NODE_TITLE_HEIGHT}px)`,
       width: size ? `${size.width}px` : '200px',
       height: size ? `${size.height}px` : 'auto',
       backgroundColor: '#353535'
@@ -81,6 +81,7 @@
 </template>
 
 <script setup lang="ts">
+import { LiteGraph } from '@comfyorg/litegraph'
 import { computed, onErrorCaptured, ref, toRef, watch } from 'vue'
 
 // Import the VueNodeData type

src/components/graph/vueNodes/NodeHeader.vue

@@ -7,8 +7,7 @@
     class="lg-node-header flex items-center justify-between p-2 rounded-t-lg cursor-move"
     :style="{
       backgroundColor: headerColor,
-      color: textColor,
-      marginTop: headerOffsetForLiteGraphAlignment
+      color: textColor
     }"
     @dblclick="handleDoubleClick"
   >
@@ -38,7 +37,6 @@
 
 <script setup lang="ts">
 import type { LGraphNode } from '@comfyorg/litegraph'
-import { LiteGraph } from '@comfyorg/litegraph'
 import { computed, onErrorCaptured, ref, watch } from 'vue'
 
 import EditableText from '@/components/common/EditableText.vue'
@@ -117,11 +115,6 @@ const textColor = computed(() => {
   return brightness > 128 ? '#000' : '#fff'
 })
 
-// Negative margin to align Vue node header with LiteGraph node positioning
-const headerOffsetForLiteGraphAlignment = computed(
-  () => `${-LiteGraph.NODE_TITLE_HEIGHT}px`
-)
-
 // Event handlers
 const handleCollapse = () => {
   emit('collapse')