I am very new to react.js (and somewhat new to javascript) so apologies in advance.

I am looking at this example here:

https://reactflow.dev/examples/drag-and-drop/

I believe that matches up to the git repo here:

https://github.com/wbkd/react-flow/tree/main/example/src/DragNDrop

I would like to modify the code so instead of the text being "input", "default", "output", I would like it to be "alpha", "beta" "gamma".

I realize I should be able to set the label as shown in line 19 here:

https://github.com/wbkd/react-flow/blob/main/example/src/DragNDrop/index.tsx

However, in the onDragStart method shown here: https://github.com/wbkd/react-flow/blob/main/example/src/DragNDrop/Sidebar.tsx

They call a event.dataTransfer.setData('application/reactflow', nodeType); . I'm not quite sure how to change hat to set the "label".

Any help would be much appreciated, especially for a beginner in react. Thanks!

CodePudding user response：

You can take a look at this sandbox for live working example.

Names of the nodes can be changed in Sidebar.jsx component like:

import React from "react";

export default () => {
  const onDragStart = (event, nodeType, label) => {
    event.dataTransfer.setData("application/reactflow", nodeType);
    event.dataTransfer.setData("label", label);
    event.dataTransfer.effectAllowed = "move";
  };

  return (
    <aside>
      <div className="description">
        You can drag these nodes to the pane on the right.
      </div>
      <div
        className="dndnode input"
        onDragStart={(event) => onDragStart(event, "input", "alpha")}
        draggable
      >
        alpha
      </div>
      <div
        className="dndnode"
        onDragStart={(event) => onDragStart(event, "default", "beta")}
        draggable
      >
        beta
      </div>
      <div
        className="dndnode output"
        onDragStart={(event) => onDragStart(event, "output", "gamma")}
        draggable
      >
        gamma
      </div>
    </aside>
  );
};

and dragged label info in DndFlow.tsx component can be retrieved like:

import React, { useState, useRef } from "react";
import ReactFlow, {
  ReactFlowProvider,
  addEdge,
  removeElements,
  Controls
} from "react-flow-renderer";

import Sidebar from "./Sidebar";

import "./dnd.css";

const initialElements = [
  {
    id: "1",
    type: "input",
    data: { label: "alpha" },
    position: { x: 250, y: 5 }
  }
];

let id = 0;
const getId = () => `dndnode_${id  }`;

const DnDFlow = () => {
  const reactFlowWrapper = useRef(null);
  const [reactFlowInstance, setReactFlowInstance] = useState(null);
  const [elements, setElements] = useState(initialElements);
  const onConnect = (params) => setElements((els) => addEdge(params, els));
  const onElementsRemove = (elementsToRemove) =>
    setElements((els) => removeElements(elementsToRemove, els));

  const onLoad = (_reactFlowInstance) =>
    setReactFlowInstance(_reactFlowInstance);

  const onDragOver = (event) => {
    event.preventDefault();
    event.dataTransfer.dropEffect = "move";
  };

  const onDrop = (event) => {
    event.preventDefault();

    const reactFlowBounds = reactFlowWrapper.current.getBoundingClientRect();
    const type = event.dataTransfer.getData("application/reactflow");
    const label = event.dataTransfer.getData("label");

    const position = reactFlowInstance.project({
      x: event.clientX - reactFlowBounds.left,
      y: event.clientY - reactFlowBounds.top
    });
    const newNode = {
      id: getId(),
      type,
      position,
      data: { label: label }
    };

    setElements((es) => es.concat(newNode));
  };

  return (
    <div className="dndflow">
      <ReactFlowProvider>
        <div className="reactflow-wrapper" ref={reactFlowWrapper}>
          <ReactFlow
            elements={elements}
            onConnect={onConnect}
            onElementsRemove={onElementsRemove}
            onLoad={onLoad}
            onDrop={onDrop}
            onDragOver={onDragOver}
          >
            <Controls />
          </ReactFlow>
        </div>
        <Sidebar />
      </ReactFlowProvider>
    </div>
  );
};

export default DnDFlow;