diff --git a/src/components/nodes/EaseCurveNode.tsx b/src/components/nodes/EaseCurveNode.tsx index 19d11a0b..0c048db1 100644 --- a/src/components/nodes/EaseCurveNode.tsx +++ b/src/components/nodes/EaseCurveNode.tsx @@ -1,7 +1,7 @@ "use client"; import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; -import { Handle, Position, NodeProps, Node } from "@xyflow/react"; +import { Handle, Position, NodeProps, Node, useReactFlow } from "@xyflow/react"; import { BaseNode } from "./BaseNode"; import { useCommentNavigation } from "@/hooks/useCommentNavigation"; import { useWorkflowStore } from "@/store/workflowStore"; @@ -44,19 +44,33 @@ export function EaseCurveNode({ id, data, selected }: NodeProps state.isRunning); const edges = useWorkflowStore((state) => state.edges); const removeEdge = useWorkflowStore((state) => state.removeEdge); + const { setNodes } = useReactFlow(); const [activeTab, setActiveTab] = useState<"editor" | "video">("editor"); const [showPresets, setShowPresets] = useState(false); const presetsRef = useRef(null); + // Auto-resize node height when switching tabs + const EDITOR_HEIGHT = 480; + const VIDEO_HEIGHT = 320; + const switchTab = useCallback((tab: "editor" | "video") => { + setActiveTab(tab); + const height = tab === "editor" ? EDITOR_HEIGHT : VIDEO_HEIGHT; + setNodes((nodes) => + nodes.map((n) => + n.id === id ? { ...n, style: { ...n.style, height } } : n + ) + ); + }, [id, setNodes]); + // Auto-switch to Video tab when processing completes const prevOutputRef = useRef(nodeData.outputVideo); useEffect(() => { if (!prevOutputRef.current && nodeData.outputVideo) { - setActiveTab("video"); + switchTab("video"); } prevOutputRef.current = nodeData.outputVideo; - }, [nodeData.outputVideo]); + }, [nodeData.outputVideo, switchTab]); // Check encoder support on mount useEffect(() => { @@ -145,6 +159,13 @@ export function EaseCurveNode({ id, data, selected }: NodeProps { + if (isInherited) { + switchTab("video"); + } + }, [isInherited, switchTab]); + const handleBreakInheritance = useCallback(() => { if (inheritedEdge) { removeEdge(inheritedEdge.id); @@ -202,7 +223,7 @@ export function EaseCurveNode({ id, data, selected }: NodeProps - {/* Ease In (target, left, 75%) */} + {/* Settings In (target, left, 75%) */} - Ease In + Settings - {/* Ease Out (source, right, 75%) */} + {/* Settings Out (source, right, 75%) */} - Ease Out + Settings ); @@ -315,7 +336,7 @@ export function EaseCurveNode({ id, data, selected }: NodeProps {renderHandles()} @@ -328,7 +349,7 @@ export function EaseCurveNode({ id, data, selected }: NodeProps setActiveTab("editor")} + onClick={() => switchTab("editor")} > Editor @@ -338,7 +359,7 @@ export function EaseCurveNode({ id, data, selected }: NodeProps setActiveTab("video")} + onClick={() => switchTab("video")} > Video