How to create a draggable node when click on a button in react flow - typescript?

Question

i am working on react flow using typescript, for react flow i am using ractflow and react-flow-renderer packages. In the start i have one node and a button, what i want is: when i click on the button => create a new node. i was able to create a new node when i click on the button, but my problem is: i can not drag my nodes or join them together: this is my code:

/* -------------------------------------------------------------------------- */
/*                                  Libraries                                 */
/* -------------------------------------------------------------------------- */
import React, { useCallback, useState, useRef } from "react";
import ReactFlow from "react-flow-renderer";

/* -------------------------------------------------------------------------- */
/*                               Implementation                               */
/* -------------------------------------------------------------------------- */
const initialElements = [
  {
    id: "1",
    type: "input",
    data: { label: "Input Node" },
    position: { x: 100, y: 0 },
  },
];

/* -------------------------------------------------------------------------- */
/*                                  Function                                  */
/* -------------------------------------------------------------------------- */
export default function Flow() {
  const [els, setEls] = useState(initialElements);
  const yPos = useRef(0);

  const addNode = useCallback(() => {
    yPos.current += 80;
    setEls((els: any) => {
      console.log(els);
      return [
        ...els,
        {
          id: Math.random(),
          position: { x: 100, y: yPos.current },
          data: { label: "new node" },
          style: {
            backgroundColor: "#00fff0",
            visibility: "visible",
          },
        },
      ];
    });
  }, []);

  const addEdge = useCallback(({ source, target }: any) => {
    setEls((els: any) => {
      console.log(source, target);
      return [
        ...els,
        {
          id: Math.random(),
          source,
          target,
        },
      ];
    });
  }, []);

  return (
    <div>
      {/* React Flow */}
      <div style={{ height: 300 }}>
        <ReactFlow nodes={els} nodesDraggable={true} nodesConnectable={true} />
      </div>

      {/* if this button will be clicked a new node should be created */}
      <button onClick={addNode} className="p-2 m-2 rounded-md bg-[#00fff0]">
        Add
      </button>
    </div>
  );
}

and this is what i got so far:

anyone can help how i can make the nodes draggable and able to join them together? Thanx in advance

score 0 · Answer 1 · answered Nov 29 '22 at 13:53

Your code does not apply drag events to your state (els). Refer to https://reactflow.dev/docs/getting-started/adding-interactivity/

Basically, you're missing change handler:

import ReactFlow, { applyNodeChanges } from 'reactflow';

...

  const onNodesChange = useCallback(
    (changes) => setEls((els) => applyNodeChanges(changes, els)),
    []
  );

  <ReactFlow nodes={els} onNodesChange={onNodesChange} ... />

How to create a draggable node when click on a button in react flow - typescript?

1 Answers1