jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Edited dragOver drop effect on dropping file, printed file dropped over the pane

Browse source
This commit is contained in:
Lucas Oliveira 2023-06-30 11:19:50 -03:00
commit 052155bc6a
2 changed files with 53 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file

@ -219,20 +219,27 @@ export default function Page({ flow }: { flow: FlowType }) {
const onDragOver = useCallback((event: React.DragEvent) => { const onDragOver = useCallback((event: React.DragEvent) => {
event.preventDefault(); event.preventDefault();
console.log(event.dataTransfer.types);
if (event.dataTransfer.types.some((t) => t === "nodedata")) {
event.dataTransfer.dropEffect = "move"; event.dataTransfer.dropEffect = "move";
} else {
event.dataTransfer.dropEffect = "copy";
}
}, []); }, []);
const onDrop = useCallback( const onDrop = useCallback(
(event: React.DragEvent) => { (event: React.DragEvent) => {
event.preventDefault(); event.preventDefault();
if (event.dataTransfer.types.some((t) => t === "nodedata")) {
takeSnapshot(); takeSnapshot();
// Get the current bounds of the ReactFlow wrapper element // Get the current bounds of the ReactFlow wrapper element
const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect(); const reactflowBounds =
reactFlowWrapper.current.getBoundingClientRect();
// Extract the data from the drag event and parse it as a JSON object // Extract the data from the drag event and parse it as a JSON object
let data: { type: string; node?: APIClassType } = JSON.parse( let data: { type: string; node?: APIClassType } = JSON.parse(
event.dataTransfer.getData("json") event.dataTransfer.getData("nodedata")
); );
// If data type is not "chatInput" or if there are no "chatInputNode" nodes present in the ReactFlow instance, create a new node // If data type is not "chatInput" or if there are no "chatInputNode" nodes present in the ReactFlow instance, create a new node
@ -275,6 +282,9 @@ export default function Page({ flow }: { flow: FlowType }) {
// Add the new node to the list of nodes in state // Add the new node to the list of nodes in state
} }
setNodes((nds) => nds.concat(newNode)); setNodes((nds) => nds.concat(newNode));
} else if (event.dataTransfer.types.some((t) => t === "Files")) {
console.log(event.dataTransfer.files.item(0));
}
}, },
// Specify dependencies for useCallback // Specify dependencies for useCallback
[getNodeId, reactFlowInstance, setErrorData, setNodes, takeSnapshot] [getNodeId, reactFlowInstance, setErrorData, setNodes, takeSnapshot]

2
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -40,7 +40,7 @@ export default function ExtraSidebar() {
crt.classList.add("cursor-grabbing"); crt.classList.add("cursor-grabbing");
document.body.appendChild(crt); document.body.appendChild(crt);
event.dataTransfer.setDragImage(crt, 0, 0); event.dataTransfer.setDragImage(crt, 0, 0);
event.dataTransfer.setData("json", JSON.stringify(data)); event.dataTransfer.setData("nodedata", JSON.stringify(data));
} }
function handleSearchInput(e: string) { function handleSearchInput(e: string) {