Skip to content

Commit

Permalink
prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bentlybro
Bentlybro committed Oct 15, 2024
1 parent a6feb54 commit f819ca4
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 99 deletions.
6 changes: 3 additions & 3 deletions autogpt_platform/frontend/src/components/Flow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ import RunnerUIWrapper, {
import PrimaryActionBar from "@/components/PrimaryActionButton";
import { useToast } from "@/components/ui/use-toast";
import { forceLoad } from "@sentry/nextjs";
import { useCopyPaste } from '../hooks/useCopyPaste';
import { useCopyPaste } from "../hooks/useCopyPaste";

// This is for the history, this is the minimum distance a block must move before it is logged
// It helps to prevent spamming the history with small movements especially when pressing on a input in a block
Expand Down Expand Up @@ -475,7 +475,7 @@ const FlowEditor: React.FC<{

handleCopyPaste(event);
},
[isAnyModalOpen, handleCopyPaste]
[isAnyModalOpen, handleCopyPaste],
);

useEffect(() => {
Expand Down Expand Up @@ -587,4 +587,4 @@ const WrappedFlowEditor: typeof FlowEditor = (props) => (
</ReactFlowProvider>
);

export default WrappedFlowEditor;
export default WrappedFlowEditor;
201 changes: 105 additions & 96 deletions autogpt_platform/frontend/src/hooks/useCopyPaste.ts
View file
Original file line number Diff line number Diff line change
@@ -1,113 +1,122 @@
import { useCallback } from 'react';
import { Node, Edge, useReactFlow, useViewport } from '@xyflow/react';
import { useCallback } from "react";
import { Node, Edge, useReactFlow, useViewport } from "@xyflow/react";

export function useCopyPaste(getNextNodeId: () => string) {
const { setNodes, addEdges, getNodes, getEdges } = useReactFlow();
const { x, y, zoom } = useViewport();

const handleCopyPaste = useCallback((event: KeyboardEvent) => {
if (event.ctrlKey || event.metaKey) {
if (event.key === "c" || event.key === "C") {
const selectedNodes = getNodes().filter(node => node.selected);
const selectedEdges = getEdges().filter(edge => edge.selected);

const copiedData = {
nodes: selectedNodes.map(node => ({
...node,
data: {
...node.data,
connections: [],
},
})),
edges: selectedEdges,
};

localStorage.setItem('copiedFlowData', JSON.stringify(copiedData));
}
if (event.key === "v" || event.key === "V") {
const copiedDataString = localStorage.getItem('copiedFlowData');
if (copiedDataString) {
const copiedData = JSON.parse(copiedDataString);
const oldToNewIdMap: Record<string, string> = {};

const viewportCenter = {
x: (window.innerWidth / 2 - x) / zoom,
y: (window.innerHeight / 2 - y) / zoom,
};

let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
copiedData.nodes.forEach((node: Node) => {
minX = Math.min(minX, node.position.x);
minY = Math.min(minY, node.position.y);
maxX = Math.max(maxX, node.position.x);
maxY = Math.max(maxY, node.position.y);
});
const handleCopyPaste = useCallback(
(event: KeyboardEvent) => {
if (event.ctrlKey || event.metaKey) {
if (event.key === "c" || event.key === "C") {
const selectedNodes = getNodes().filter((node) => node.selected);
const selectedEdges = getEdges().filter((edge) => edge.selected);

const offsetX = viewportCenter.x - (minX + maxX) / 2;
const offsetY = viewportCenter.y - (minY + maxY) / 2;

const pastedNodes = copiedData.nodes.map((node: Node) => {
const newNodeId = getNextNodeId();
oldToNewIdMap[node.id] = newNodeId;
return {
const copiedData = {
nodes: selectedNodes.map((node) => ({
...node,
id: newNodeId,
position: {
x: node.position.x + offsetX,
y: node.position.y + offsetY,
},
data: {
...node.data,
status: undefined,
executionResults: undefined,
connections: [],
},
})),
edges: selectedEdges,
};

localStorage.setItem("copiedFlowData", JSON.stringify(copiedData));
}
if (event.key === "v" || event.key === "V") {
const copiedDataString = localStorage.getItem("copiedFlowData");
if (copiedDataString) {
const copiedData = JSON.parse(copiedDataString);
const oldToNewIdMap: Record<string, string> = {};

const viewportCenter = {
x: (window.innerWidth / 2 - x) / zoom,
y: (window.innerHeight / 2 - y) / zoom,
};
});

const pastedEdges = copiedData.edges.map((edge: Edge) => {
const newSourceId = oldToNewIdMap[edge.source] ?? edge.source;
const newTargetId = oldToNewIdMap[edge.target] ?? edge.target;
return {
...edge,
id: `${newSourceId}_${edge.sourceHandle}_${newTargetId}_${edge.targetHandle}_${Date.now()}`,
source: newSourceId,
target: newTargetId,
};
});

setNodes((existingNodes) => [
...existingNodes.map((node) => ({ ...node, selected: false })),
...pastedNodes,
]);
addEdges(pastedEdges);

setNodes((nodes) => {
return nodes.map((node) => {
if (oldToNewIdMap[node.id]) {
const nodeConnections = pastedEdges
.filter((edge) => edge.source === node.id || edge.target === node.id)
.map((edge) => ({
edge_id: edge.id,
source: edge.source,
target: edge.target,
sourceHandle: edge.sourceHandle,
targetHandle: edge.targetHandle,
}));
return {
...node,
data: {
...node.data,
connections: nodeConnections,
},
};
}
return node;

let minX = Infinity,
minY = Infinity,
maxX = -Infinity,
maxY = -Infinity;
copiedData.nodes.forEach((node: Node) => {
minX = Math.min(minX, node.position.x);
minY = Math.min(minY, node.position.y);
maxX = Math.max(maxX, node.position.x);
maxY = Math.max(maxY, node.position.y);
});

const offsetX = viewportCenter.x - (minX + maxX) / 2;
const offsetY = viewportCenter.y - (minY + maxY) / 2;

const pastedNodes = copiedData.nodes.map((node: Node) => {
const newNodeId = getNextNodeId();
oldToNewIdMap[node.id] = newNodeId;
return {
...node,
id: newNodeId,
position: {
x: node.position.x + offsetX,
y: node.position.y + offsetY,
},
data: {
...node.data,
status: undefined,
executionResults: undefined,
},
};
});

const pastedEdges = copiedData.edges.map((edge: Edge) => {
const newSourceId = oldToNewIdMap[edge.source] ?? edge.source;
const newTargetId = oldToNewIdMap[edge.target] ?? edge.target;
return {
...edge,
id: `${newSourceId}_${edge.sourceHandle}_${newTargetId}_${edge.targetHandle}_${Date.now()}`,
source: newSourceId,
target: newTargetId,
};
});

setNodes((existingNodes) => [
...existingNodes.map((node) => ({ ...node, selected: false })),
...pastedNodes,
]);
addEdges(pastedEdges);

setNodes((nodes) => {
return nodes.map((node) => {
if (oldToNewIdMap[node.id]) {
const nodeConnections = pastedEdges
.filter(
(edge) =>
edge.source === node.id || edge.target === node.id,
)
.map((edge) => ({
edge_id: edge.id,
source: edge.source,
target: edge.target,
sourceHandle: edge.sourceHandle,
targetHandle: edge.targetHandle,
}));
return {
...node,
data: {
...node.data,
connections: nodeConnections,
},
};
}
return node;
});
});
});
}
}
}
}
}, [setNodes, addEdges, getNodes, getEdges, getNextNodeId, x, y, zoom]);
},
[setNodes, addEdges, getNodes, getEdges, getNextNodeId, x, y, zoom],
);

return handleCopyPaste;
}

0 comments on commit f819ca4

Please sign in to comment.