diff --git a/src/components/nodes/GenerateImageNode.tsx b/src/components/nodes/GenerateImageNode.tsx index 7f0b3413..9d097c42 100644 --- a/src/components/nodes/GenerateImageNode.tsx +++ b/src/components/nodes/GenerateImageNode.tsx @@ -1,7 +1,7 @@ "use client"; import { useCallback, useState, useEffect, useMemo } from "react"; -import { Handle, Position, NodeProps, Node } from "@xyflow/react"; +import { Handle, Position, NodeProps, Node, useReactFlow } from "@xyflow/react"; import { BaseNode } from "./BaseNode"; import { ModelParameters } from "./ModelParameters"; import { useWorkflowStore, saveNanoBananaDefaults } from "@/store/workflowStore"; @@ -210,6 +210,26 @@ export function GenerateImageNode({ id, data, selected }: NodeProps { + // Each parameter row is ~24px, plus some padding + const parameterHeight = expanded ? Math.max(parameterCount * 28 + 16, 60) : 0; + const baseHeight = 300; // Default node height + const newHeight = baseHeight + parameterHeight; + + setNodes((nodes) => + nodes.map((node) => + node.id === id + ? { ...node, style: { ...node.style, height: newHeight } } + : node + ) + ); + }, + [id, setNodes] + ); + const handleClearImage = useCallback(() => { updateNodeData(id, { outputImage: null, status: "idle", error: null }); }, [id, updateNodeData]); @@ -538,6 +558,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps )} diff --git a/src/components/nodes/GenerateVideoNode.tsx b/src/components/nodes/GenerateVideoNode.tsx index 3ba4ae36..d40d496f 100644 --- a/src/components/nodes/GenerateVideoNode.tsx +++ b/src/components/nodes/GenerateVideoNode.tsx @@ -1,7 +1,7 @@ "use client"; import { useCallback, useState, useEffect, useMemo } from "react"; -import { Handle, Position, NodeProps, Node } from "@xyflow/react"; +import { Handle, Position, NodeProps, Node, useReactFlow } from "@xyflow/react"; import { BaseNode } from "./BaseNode"; import { ModelParameters } from "./ModelParameters"; import { useWorkflowStore } from "@/store/workflowStore"; @@ -122,6 +122,26 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps { + // Each parameter row is ~24px, plus some padding + const parameterHeight = expanded ? Math.max(parameterCount * 28 + 16, 60) : 0; + const baseHeight = 300; // Default node height + const newHeight = baseHeight + parameterHeight; + + setNodes((nodes) => + nodes.map((node) => + node.id === id + ? { ...node, style: { ...node.style, height: newHeight } } + : node + ) + ); + }, + [id, setNodes] + ); + const regenerateNode = useWorkflowStore((state) => state.regenerateNode); const isRunning = useWorkflowStore((state) => state.isRunning); @@ -304,6 +324,7 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps )} diff --git a/src/components/nodes/ModelParameters.tsx b/src/components/nodes/ModelParameters.tsx index fe35d30d..763b63e8 100644 --- a/src/components/nodes/ModelParameters.tsx +++ b/src/components/nodes/ModelParameters.tsx @@ -10,6 +10,7 @@ interface ModelParametersProps { provider: ProviderType; parameters: Record; onParametersChange: (parameters: Record) => void; + onExpandChange?: (expanded: boolean, parameterCount: number) => void; } /** @@ -22,6 +23,7 @@ export function ModelParameters({ provider, parameters, onParametersChange, + onExpandChange, }: ModelParametersProps) { const [schema, setSchema] = useState([]); const [isLoading, setIsLoading] = useState(false); @@ -105,7 +107,11 @@ export function ModelParameters({
{/* Collapsible header */}