diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 14880a2db..6f26ee697 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -41,7 +41,7 @@ const TabsContextInitialValue: TabsContextType = {
getNodeId: () => "",
paste: (
selection: { nodes: any; edges: any },
- position: { x: number; y: number }
+ position: { x: number; y: number; paneX?: number; paneY?: number }
) => {},
};
@@ -221,7 +221,10 @@ export function TabsProvider({ children }: { children: ReactNode }) {
* @param flow Optional flow to add.
*/
- function paste(selectionInstance, position) {
+ function paste(
+ selectionInstance,
+ position: { x: number; y: number; paneX?: number; paneY?: number }
+ ) {
let minimumX = Infinity;
let minimumY = Infinity;
let idsMap = {};
@@ -236,7 +239,9 @@ export function TabsProvider({ children }: { children: ReactNode }) {
}
});
- const insidePosition = reactFlowInstance.project(position);
+ const insidePosition = position.paneX
+ ? { x: position.paneX + position.x, y: position.paneY + position.y }
+ : reactFlowInstance.project({ x: position.x, y: position.y });
selectionInstance.nodes.forEach((n) => {
// Generate a unique node ID
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 529a98b33..f30de16f7 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -7,6 +7,7 @@ import {
PencilSquareIcon,
DocumentDuplicateIcon,
DocumentPlusIcon,
+ Square2StackIcon,
} from "@heroicons/react/24/outline";
import { classNames } from "../../../../utils";
import { Fragment } from "react";
@@ -15,7 +16,7 @@ import { TabsContext } from "../../../../contexts/tabsContext";
import { useReactFlow } from "reactflow";
const NodeToolbarComponent = (props) => {
- const { setLastCopiedSelection } = useContext(TabsContext);
+ const { setLastCopiedSelection, paste } = useContext(TabsContext);
const reactFlowInstance = useReactFlow();
return (
<>
@@ -78,7 +79,7 @@ const NodeToolbarComponent = (props) => {
});
}}
>
-