resize

src/components/graph/ConfigNode.tsx

@@ -1,6 +1,7 @@
 import React, { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import CodeMirror from '@uiw/react-codemirror'
 import FlowContext from '../../lib/flowContext'
+import { useResizeHeight } from '../../hooks/useResizeHeight'
 import { plantumlLanguage } from '../../lib/plantumlLanguage'
 import { useTheme } from '../../lib/themeContext'
 import {
@@ -26,9 +27,11 @@ import { InputHandle, OutputHandle } from './NodeHandles'
 type Props = {
     id: string
     data: any
+    width?: number
+    height?: number
 }
 
-export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
+export const ConfigNode = memo(function ConfigNode({ id, data, width, height }: Props) {
     const [value, setValue] = useState<string>(data?.plantuml ?? '@startuml\n\n@enduml\n')
     const { theme } = useTheme()
     const ctx = useContext(FlowContext)
@@ -114,9 +117,10 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
     )
 
     const extensions = useMemo(() => [plantumlLanguage.extension], [])
+    const [editorHeight, editorContainerRef] = useResizeHeight(180)
 
     return (
-        <BaseNode className="w-80">
+        <BaseNode className="min-w-80 min-h-[280px]" style={width != null && height != null && width > 0 && height > 0 ? { width, height } : undefined} resizable nodeId={id} handles={<><InputHandle id="ain" /><OutputHandle id="out" /></>}>
             <BaseNodeHeader className="border-b">
                 <ScrollText className="size-4" />
                 <BaseNodeHeaderTitle>{id}.puml</BaseNodeHeaderTitle>
@@ -124,7 +128,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
 
             <BaseNodeContent>
                 {hasDependencies && (
-                    <div className="w-full">
+                    <div className="shrink-0 w-full">
                         <Menubar className="h-auto bg-none p-1 border-none shadow-none">
                             <MenubarMenu>
                                 <MenubarTrigger className="px-1.5 py-0 text-xs">
@@ -194,12 +198,12 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
                     </div>
                 )}
 
-                <div style={{ height: 180 }} 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
                         // @ts-expect-error ref is { view, state, editor }; package ref type not in our node_modules
                         ref={editorRef}
                         value={value}
-                        height="180px"
+                        height={`${editorHeight}px`}
                         theme={theme}
                         extensions={extensions}
                         onChange={onChange}
@@ -212,9 +216,6 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
             <BaseNodeFooter>
                 <div className="w-full text-xs text-muted-foreground">{storedPlantuml ? `${storedPlantuml.length} chars` : 'none'}</div>
             </BaseNodeFooter>
-
-            <InputHandle id="ain" />
-            <OutputHandle id="out" />
         </BaseNode>
     )
 })