diff --git a/stepwise-studio/components/step-node.tsx b/stepwise-studio/components/step-node.tsx index d01d809..07c890d 100644 --- a/stepwise-studio/components/step-node.tsx +++ b/stepwise-studio/components/step-node.tsx @@ -337,42 +337,22 @@ const StepNode: React.FC> = (prop) => { useEffect(() => { if (stepNodeRef.current) { - // this usually means that the content of this node has changed - // so we want to automatically adjust the weight to present the content in a nicer way - // by setting the width to undefined, the prop.data.onResize will be invoked - // and the new width will be re-calculated when the node is re-rendered - // if ( - // height !== stepNodeRef.current.offsetHeight && - // width === stepNodeRef.current.offsetWidth && - // width !== undefined - // ) { - // console.log("Setting width to undefined"); - // prop.data.onResize( - // undefined, - // undefined, - // ); - - // return; - // } - - if ( - height !== stepNodeRef.current.offsetHeight || - width !== stepNodeRef.current.offsetWidth - ) { + if (width === undefined && stepNodeRef.current.offsetWidth) { + setWidth(stepNodeRef.current.offsetWidth); + setHeight(stepNodeRef.current.offsetHeight); + } else { prop.data.onResize( - stepNodeRef.current.offsetHeight ?? height, - width ?? stepNodeRef.current.offsetWidth, + stepNodeRef.current.offsetHeight, + stepNodeRef.current.offsetWidth, ); - - return; } } }, [ + width, + height, stepNodeRef.current, stepNodeRef.current?.offsetHeight, stepNodeRef.current?.offsetWidth, - width, - height, ]); return ( @@ -786,38 +766,4 @@ const StepNode: React.FC> = (prop) => { ); }; -const ResizableStepNode = React.forwardRef< - HTMLDivElement, - NodeProps ->((props, ref) => { - const [width, setWidth] = useState(props.data.width); - const [height, setHeight] = useState(props.data.height); - - useEffect(() => { - if (props.data.width && props.data.height) { - console.log( - "Setting width and height: ", - props.data.width, - props.data.height, - ); - setWidth(props.data.width); - setHeight(props.data.height); - } - }, [props.data.width, props.data.height]); - - return height && width ? ( -
- -
- ) : ( - - ); -}); - export { StepNode }; diff --git a/stepwise-studio/components/step-run-sidebar.tsx b/stepwise-studio/components/step-run-sidebar.tsx index ddee266..e9312ec 100644 --- a/stepwise-studio/components/step-run-sidebar.tsx +++ b/stepwise-studio/components/step-run-sidebar.tsx @@ -153,7 +153,7 @@ const StepRunSidebar: React.FC = () => { const { selectedStepRunHistory } = useStepRunHistoryStore(); const page = useChatSideBarStore((state) => state.page); return ( -
+
{page === "chat" && (
diff --git a/stepwise-studio/components/workflow.tsx b/stepwise-studio/components/workflow.tsx index a73532a..91afd04 100644 --- a/stepwise-studio/components/workflow.tsx +++ b/stepwise-studio/components/workflow.tsx @@ -94,7 +94,7 @@ const WorkflowInner: React.FC = (props) => { var position = workflow.stepPositions[stepNodeID]; var size = workflow.stepSizes[stepNodeID]; return { - id: `${workflow.name}-${step.name}`, + id: stepNodeID, type: "stepNode", position: position, ...(size ?? { width: 200, height: 100 }), // if size is not defined, use default size @@ -150,11 +150,12 @@ const WorkflowInner: React.FC = (props) => { }, onResize: (height, width) => { if (!selectedWorkflow) return selectedWorkflow; + const stepNodeID = `${workflow.name}-${step.name}`; setSelectedWorkflow({ ...selectedWorkflow, stepSizes: { ...selectedWorkflow.stepSizes, - [step.name]: + [stepNodeID]: height && width ? { height, width } : undefined,