From aa3c5db769fed31c0a47db7920ee5a98d1d424fd Mon Sep 17 00:00:00 2001 From: Zamil Majdy Date: Thu, 14 Nov 2024 00:49:37 +0700 Subject: [PATCH 1/3] fix(frontend): Fix client-side validation for Agent Executor Block --- .../frontend/src/components/Flow.tsx | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/autogpt_platform/frontend/src/components/Flow.tsx b/autogpt_platform/frontend/src/components/Flow.tsx index e545e1f83a20..909a7ac5bddb 100644 --- a/autogpt_platform/frontend/src/components/Flow.tsx +++ b/autogpt_platform/frontend/src/components/Flow.tsx @@ -410,6 +410,31 @@ const FlowEditor: React.FC<{ const { x, y, zoom } = useViewport(); + // Set the initial view port to center the canvas. + useEffect(() => { + if (nodes.length <= 0 || x !== 0 || y !== 0) { + return; + } + const topLeft = { x: Infinity, y: Infinity }; + const bottomRight = { x: -Infinity, y: -Infinity }; + nodes.forEach((node) => { + const { x, y } = node.position; + topLeft.x = Math.min(topLeft.x, x); + topLeft.y = Math.min(topLeft.y, y); + bottomRight.x = Math.max(bottomRight.x, x + 100); + bottomRight.y = Math.max(bottomRight.y, y + 100); + }); + + const centerX = (topLeft.x + bottomRight.x) / 2; + const centerY = (topLeft.y + bottomRight.y) / 2; + + setViewport({ + x: -centerX + window.innerWidth / 2, + y: -centerY + window.innerHeight / 2, + zoom: 0.8, + }); + }, [nodes, setViewport, x, y]); + const addNode = useCallback( (blockId: string, nodeType: string, hardcodedValues: any = {}) => { const nodeSchema = availableNodes.find((node) => node.id === blockId); From f705139ea27223f405ea3d1024dfcb4ae1237112 Mon Sep 17 00:00:00 2001 From: Zamil Majdy Date: Thu, 14 Nov 2024 10:04:36 +0700 Subject: [PATCH 2/3] Fix zoom scale calculation --- .../frontend/src/components/Flow.tsx | 30 +++++++++++-------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/autogpt_platform/frontend/src/components/Flow.tsx b/autogpt_platform/frontend/src/components/Flow.tsx index 909a7ac5bddb..b81db072f613 100644 --- a/autogpt_platform/frontend/src/components/Flow.tsx +++ b/autogpt_platform/frontend/src/components/Flow.tsx @@ -415,23 +415,27 @@ const FlowEditor: React.FC<{ if (nodes.length <= 0 || x !== 0 || y !== 0) { return; } + const topLeft = { x: Infinity, y: Infinity }; const bottomRight = { x: -Infinity, y: -Infinity }; + nodes.forEach((node) => { const { x, y } = node.position; topLeft.x = Math.min(topLeft.x, x); topLeft.y = Math.min(topLeft.y, y); - bottomRight.x = Math.max(bottomRight.x, x + 100); - bottomRight.y = Math.max(bottomRight.y, y + 100); + // Rough estimate of the width and height of the node: 500x400. + bottomRight.x = Math.max(bottomRight.x, x + 500); + bottomRight.y = Math.max(bottomRight.y, y + 400); }); const centerX = (topLeft.x + bottomRight.x) / 2; const centerY = (topLeft.y + bottomRight.y) / 2; + const zoom = 0.8; setViewport({ - x: -centerX + window.innerWidth / 2, - y: -centerY + window.innerHeight / 2, - zoom: 0.8, + x: window.innerWidth / 2 - centerX * zoom, + y: window.innerHeight / 2 - centerY * zoom, + zoom: zoom, }); }, [nodes, setViewport, x, y]); @@ -459,14 +463,14 @@ const FlowEditor: React.FC<{ ? // we will get all the dimension of nodes, then store findNewlyAddedBlockCoordinates( nodeDimensions, - (nodeSchema.uiType == BlockUIType.NOTE ? 300 : 500) / zoom, - 60 / zoom, - zoom, + nodeSchema.uiType == BlockUIType.NOTE ? 300 : 500, + 60, + 1.0, ) : // we will get all the dimension of nodes, then store { - x: (window.innerWidth / 2 - x) / zoom, - y: (window.innerHeight / 2 - y) / zoom, + x: window.innerWidth / 2 - x, + y: window.innerHeight / 2 - y, }; const newNode: CustomNode = { @@ -496,8 +500,9 @@ const FlowEditor: React.FC<{ setViewport( { - x: -viewportCoordinates.x * zoom + window.innerWidth / 2, - y: -viewportCoordinates.y * zoom + window.innerHeight / 2 - 100, + x: -viewportCoordinates.x * 0.8 + window.innerWidth / 2, + // Rough estimate of the height of the node is 400px. + y: -viewportCoordinates.y * 0.8 + (window.innerHeight - 400) / 2, zoom: 0.8, }, { duration: 500 }, @@ -520,7 +525,6 @@ const FlowEditor: React.FC<{ clearNodesStatusAndOutput, x, y, - zoom, ], ); From 27dbd041cbdc214f42bab3575e97e0aaaae12ae7 Mon Sep 17 00:00:00 2001 From: Zamil Majdy Date: Thu, 14 Nov 2024 10:08:24 +0700 Subject: [PATCH 3/3] Fix zoom scale calculation --- autogpt_platform/frontend/src/components/Flow.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/autogpt_platform/frontend/src/components/Flow.tsx b/autogpt_platform/frontend/src/components/Flow.tsx index b81db072f613..2fff9e467450 100644 --- a/autogpt_platform/frontend/src/components/Flow.tsx +++ b/autogpt_platform/frontend/src/components/Flow.tsx @@ -500,8 +500,9 @@ const FlowEditor: React.FC<{ setViewport( { - x: -viewportCoordinates.x * 0.8 + window.innerWidth / 2, - // Rough estimate of the height of the node is 400px. + // Rough estimate of the dimension of the node is: 500x400px. + // Though we skip shifting the X, considering the block menu side-bar. + x: -viewportCoordinates.x * 0.8 + (window.innerWidth - 0.0) / 2, y: -viewportCoordinates.y * 0.8 + (window.innerHeight - 400) / 2, zoom: 0.8, },