resize

src/components/graph/FunctionNode.tsx

@@ -2,6 +2,7 @@ import React, { memo, useCallback, useContext, useEffect, useMemo, useRef, useSt
 import CodeMirror from '@uiw/react-codemirror'
 import { javascript } from '@codemirror/lang-javascript'
 import FlowContext from '../../lib/flowContext'
+import { useResizeHeight } from '../../hooks/useResizeHeight'
 import { useTheme } from '../../lib/themeContext'
 import {
     BaseNode,
@@ -16,13 +17,14 @@ import { Code2 } from 'lucide-react'
 type Props = {
     id: string
     data: { body?: string }
+    style?: React.CSSProperties
 }
 
 const DEFAULT_BODY = `// args[0], args[1], ... are the variable values (in order)
 return args[0];
 `
 
-export const FunctionNode = memo(function FunctionNode({ id, data }: Props) {
+export const FunctionNode = memo(function FunctionNode({ id, data, width, height }: Props) {
     const [value, setValue] = useState<string>(data?.body ?? DEFAULT_BODY)
     const { theme } = useTheme()
     const ctx = useContext(FlowContext)
@@ -52,22 +54,23 @@ export const FunctionNode = memo(function FunctionNode({ id, data }: Props) {
     const storedBody = ctx?.nodes?.find((n: any) => n.id === id)?.data?.body ?? ''
 
     const extensions = useMemo(() => [javascript()], [])
+    const [editorHeight, editorContainerRef] = useResizeHeight(120)
 
     return (
-        <BaseNode className="w-72">
+        <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>
 
             <BaseNodeContent>
-                <p className="text-[10px] text-muted-foreground mb-1">
+                <p className="shrink-0 text-[10px] text-muted-foreground mb-1">
                     Call in config: <code className="rounded bg-muted px-0.5">$&#123;{id}(var1, var2)&#125;</code>
                 </p>
-                <div style={{ height: 120 }} className="w-full nodrag nopan overflow-hidden rounded border border-input">
+                <div ref={editorContainerRef} className="min-h-0 flex-1 w-full nodrag nopan overflow-hidden rounded border border-input">
                     <CodeMirror
                         value={value}
-                        height="120px"
+                        height={`${editorHeight}px`}
                         theme={theme}
                         extensions={extensions}
                         onChange={onChange}
@@ -82,9 +85,6 @@ export const FunctionNode = memo(function FunctionNode({ id, data }: Props) {
                     Body: {storedBody ? `${storedBody.length} chars` : 'none'}
                 </div>
             </BaseNodeFooter>
-
-            <InputHandle id="in" />
-            <OutputHandle id="out" />
         </BaseNode>
     )
 })