improve drag

src/components/graph/FunctionNode.tsx

@@ -8,8 +8,8 @@ import {
     BaseNode,
     BaseNodeContent,
     BaseNodeFooter,
-    BaseNodeHeader,
-    BaseNodeHeaderTitle,
+    BaseNodeFooterText,
+    BaseNodeHeaderRow,
 } from './BaseNode'
 import { InputHandle, OutputHandle } from './NodeHandles'
 import { Code2 } from 'lucide-react'
@@ -17,7 +17,8 @@ import { Code2 } from 'lucide-react'
 type Props = {
     id: string
     data: { body?: string }
-    style?: React.CSSProperties
+    width?: number
+    height?: number
 }
 
 const DEFAULT_BODY = `// args[0], args[1], ... are the variable values (in order)
@@ -55,13 +56,14 @@ export const FunctionNode = memo(function FunctionNode({ id, data, width, height
 
     const extensions = useMemo(() => [javascript()], [])
     const [editorHeight, editorContainerRef] = useResizeHeight(120)
+    const dimensions =
+        width != null && height != null && width > 0 && height > 0
+            ? { width, height }
+            : undefined
 
     return (
-        <BaseNode className="min-w-72 min-h-[260px]" style={width != null && height != null && width > 0 && height > 0 ? { width, height } : undefined} resizable nodeId={id} handles={<><InputHandle id="in" /><OutputHandle id="out" /></>}>
-            <BaseNodeHeader className="border-b">
-                <Code2 className="size-4" />
-                <BaseNodeHeaderTitle>{id}</BaseNodeHeaderTitle>
-            </BaseNodeHeader>
+        <BaseNode className="min-w-72 min-h-[260px]" dimensions={dimensions} resizable nodeId={id} handles={<><InputHandle id="in" /><OutputHandle id="out" /></>}>
+            <BaseNodeHeaderRow icon={<Code2 className="size-4" />} title={id} />
 
             <BaseNodeContent>
                 <p className="shrink-0 text-[10px] text-muted-foreground mb-1">
@@ -81,9 +83,7 @@ export const FunctionNode = memo(function FunctionNode({ id, data, width, height
             </BaseNodeContent>
 
             <BaseNodeFooter>
-                <div className="w-full text-xs text-muted-foreground">
-                    Body: {storedBody ? `${storedBody.length} chars` : 'none'}
-                </div>
+                <BaseNodeFooterText>Body: {storedBody ? `${storedBody.length} chars` : 'none'}</BaseNodeFooterText>
             </BaseNodeFooter>
         </BaseNode>
     )