[Question] How does it work with reactflow?

[neo896]

trafficstars

Hi, I would like to know how to drag and drop a node from a tree into a reactflow scene to become a node of reactflow. Thanks!

[lukasbach]

Hi @neo896! I guess your problem consists of two parts, figuring out when the user starts dragging, and figuring out what is being dragged. The drop event and whatever comes after would be part of your project to handle.

RCT supports customizing the render logic for all components. To detect the drag start, you could customize the renderItem prop to use a custom item renderer. There are some docs here on that: https://rct.lukasbach.com/docs/guides/rendering. Use a custom onDragStart prop in your custom button element, but also make sure to also call whatever comes as prop from context.interactiveElementProps, like that:

<button 
  {...context.itemContainerWithoutChildrenProps} 
  {...context.interactiveElementProps}
  onDragStart={e => {
    context.interactiveElementProps.onDragStart(e);
    // your implementation
  }}
>

You can also hook into this logic with Interaction providers instead, see https://rct.lukasbach.com/docs/guides/interaction-modes#custom-interaction-modes

To figure out what is being dragged, you can use refs (https://rct.lukasbach.com/docs/guides/refs/) to get a tree environment reference, and then use ref.dragAndDropContext.draggingItems. https://rct.lukasbach.com/docs/api/interfaces/DragAndDropContextProps#draggingitems