Nigel
/
AutoGPT
1
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

feat(frontend): Center initial canvas (#8644) 

* fix(frontend): Fix client-side validation for Agent Executor Block

* Fix zoom scale calculation

* Fix zoom scale calculation
This commit is contained in:
Zamil Majdy 2024-11-14 16:15:30 +07:00 committed by GitHub
parent 98ab525e39
commit ce667f6287
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 38 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
autogpt_platform/frontend/src/components/Flow.tsx
View File

@ -410,6 +410,35 @@ 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);
// 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: window.innerWidth / 2 - centerX * zoom,
y: window.innerHeight / 2 - centerY * zoom,
zoom: zoom,
});
}, [nodes, setViewport, x, y]);
const addNode = useCallback(
(blockId: string, nodeType: string, hardcodedValues: any = {}) => {
const nodeSchema = availableNodes.find((node) => node.id === blockId);
@ -434,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 = {
@ -471,8 +500,10 @@ const FlowEditor: React.FC<{
setViewport(
{
x: -viewportCoordinates.x * zoom + window.innerWidth / 2,
y: -viewportCoordinates.y * zoom + window.innerHeight / 2 - 100,
// 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,
},
{ duration: 500 },
@ -495,7 +526,6 @@ const FlowEditor: React.FC<{
clearNodesStatusAndOutput,
x,
y,
zoom,
],
);