✨ feat: add drag nod

src/components/Containers/FlowContainer.tsx

@@ -2,24 +2,27 @@ import { NODE_IDENTIFIER, NodeContainer } from '@/components'
 import { useAppStore } from '@/store'
 import { Connection } from '@reactflow/core/dist/esm/types'
 import { Edge } from '@reactflow/core/dist/esm/types/edges'
-import React, { useCallback, useRef } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 import ReactFlow, { Background, BackgroundVariant, Controls } from 'reactflow'
 import 'reactflow/dist/style.css'
 import { shallow } from 'zustand/shallow'
 
 const nodeTypes = { [NODE_IDENTIFIER]: NodeContainer }
 
 const FlowContainer: React.FC = () => {
+  const reactFlowWrapper = useRef(null)
   const edgeUpdateSuccessful = useRef(true)
+  const [reactFlowInstance, setReactFlowInstance] = useState(null)
 
-  const { nodes, edges, onNodesChange, onEdgesChange, onConnect, onInit } = useAppStore(
+  const { nodes, edges, onNodesChange, onEdgesChange, onConnect, onInit, onAddNode } = useAppStore(
     (st) => ({
       nodes: st.nodes,
       edges: st.edges,
       onNodesChange: st.onNodesChange,
       onEdgesChange: st.onEdgesChange,
       onConnect: st.onConnect,
       onInit: st.onInit,
+      onAddNode: st.onAddNode,
     }),
     shallow
   )
@@ -51,8 +54,34 @@ const FlowContainer: React.FC = () => {
     edgeUpdateSuccessful.current = true
   }, [])
 
+  const onDragOver = useCallback((event: any) => {
+    event.preventDefault()
+    event.dataTransfer.dropEffect = 'move'
+  }, [])
+
+  const onDrop = useCallback(
+    (event: any) => {
+      event.preventDefault()
+      // @ts-ignore
+      const reactFlowBounds = reactFlowWrapper.current.getBoundingClientRect()
+      const widget = JSON.parse(event.dataTransfer.getData('application/reactflow'))
+      if (!widget) return
+      // @ts-ignore
+      const position = reactFlowInstance.project({
+        x: event.clientX - reactFlowBounds.left,
+        y: event.clientY - reactFlowBounds.top,
+      })
+      onAddNode({
+        widget,
+        position,
+      })
+    },
+    [reactFlowInstance]
+  )
+
   return (
     <ReactFlow
+      ref={reactFlowWrapper}
       nodes={nodes}
       edges={edges}
       fitView
@@ -66,7 +95,10 @@ const FlowContainer: React.FC = () => {
       onEdgeUpdateStart={onEdgeUpdateStart}
       onEdgeUpdateEnd={onEdgeUpdateEnd}
       onConnect={onConnect}
-      onInit={() => {
+      onDrop={onDrop}
+      onDragOver={onDragOver}
+      onInit={(e: any) => {
+        setReactFlowInstance(e)
         void onInit()
       }}
     >

src/components/ControlPanelComponent/NodePickerGroup.tsx

@@ -23,8 +23,16 @@ const NodePickerGroup: React.FC<NodePickerGroupProps> = ({ cat, data, onAddNode,
     <CollapseTitle title={startCase(cat)} key={cat} expand={expand} onExpandChange={setExpand}>
       <Space wrap>
         {data.map((i) => (
-          <Button key={i.name} onClick={() => onAddNode({ widget: i })}>
-            <span className="align-middle px-0.5">{startCase(i.name)}</span>
+          <Button
+            key={i.name}
+            onClick={() => onAddNode({ widget: i })}
+            draggable
+            onDragStart={(event) => {
+              event.dataTransfer.setData('application/reactflow', JSON.stringify(i))
+              event.dataTransfer.effectAllowed = 'move'
+            }}
+          >
+            {startCase(i.name)}
           </Button>
         ))}
       </Space>