Drag and Drop - React Flow
}
solid
#ededed
;
--xy-node-boxshadow-default : 0 px 3.54 px 4.55 px 0 px #00000005 , 0 px 3.54 px 4.55 px 0 px #0000000d , 0 px 0.51 px 1.01 px 0 px #0000001a ;
--xy-node-border-radius-default : 8 px ;
--xy-handle-background-color-default : #ffffff ;
--xy-handle-border-color-default : #aaaaaa ;
--xy-edge-label-color-default : #505050 ;
--xy-node-background-color-default : #ffffff ;
--xy-theme-panel-bg : #ffffff ;
--xy-theme-panel-text : #111827 ;
--xy-theme-resize-handle-bg : #ffffff ;
--xy-theme-focus-border : #d9d9d9 ;
--xy-theme-muted-bg : #f3f4f6 ;
--xy-theme-subtle-border : #d1d5db ;
}
.react-flow.dark {
--xy-background-color : #101012 ;
--xy-node-background-color-default : #1a1b1e ;
--xy-node-border-default : 1 px solid #303238 ;
--xy-handle-background-color-default : #141519 ;
--xy-handle-border-color-default : #5a5d66 ;
--xy-edge-label-color-default : #e6e7ea ;
--xy-theme-hover : #7a7d86 ;
--xy-theme-edge-hover : #f3f4f6 ;
--xy-theme-panel-bg : #141519 ;
--xy-theme-panel-text : #f3f4f6 ;
--xy-theme-resize-handle-bg : #141519 ;
--xy-theme-focus-border : #5f6470 ;
--xy-theme-muted-bg : #24262c ;
--xy-theme-subtle-border : #3f434c ;
--xy-node-boxshadow-default : none ;
--xy-theme-color-focus : #4b4e57 ;
--color-background : #1a1b1e ;
--color-hover-bg : #24262c ;
--color-disabled : #8b9099 ;
}
.react-flow {
background-color : var ( --xy-background-color );
}
/* Customizing Default Theming */
.react-flow__node {
box-shadow : var ( --xy-node-boxshadow-default );
border-radius : var ( --xy-node-border-radius-default );
background-color : var ( --xy-node-background-color-default );
display : flex ;
justify-content : center ;
align-items : center ;
text-align : center ;
=>
void
;
interface DnDContextType {
// If a node is being dragged.
isDragging : boolean ;
setIsDragging : Dispatch < SetStateAction < boolean >>;
// The action to be performed when something is dropped on the flow.
dropAction : OnDropAction | null ;
setDropAction : Dispatch < SetStateAction < OnDropAction | null >>;
padding : 10 px ;
}
const DnDContext = createContext < DnDContextType | null >( null );
// The DnDProvider is used to provide the context for the DnD functionality.
// This allows you to wrap your `ReactFlow` component instance in the `DnDProvider`,
// so you do not need to register any callback in `App.tsx`.
// You can just use the `useDnD` hook in your components that need to start dragging a new node into the flow.
// In our case, it will be the `Sidebar` component.
font-size : 12 px ;
flex-direction : column ;
border : var ( --xy-node-border-default );
color : var ( --xy-node-color , var ( --xy-node-color-default ));
}
.react-flow__node.selectable:focus {
export function DnDProvider ({ children } : { children : React . ReactNode }) {
box-shadow : 0 px 0 px 0 px 4 px var ( --xy-theme-color-focus );
const [ isDragging , setIsDragging ] = useState ( false );
border-color : var ( --xy-theme-focus-border );
}
.react-flow__node.selectable:focus:active {
box-shadow : var ( --xy-node-boxshadow-default );
}
.react-flow__node.selectable:hover ,
.react-flow__node.draggable:hover {
border-color : var ( --xy-theme-hover );
}
.react-flow__node.selectable.selected {
const [ dropAction , setDropAction ] = useState < OnDropAction | null >( null );
border-color : var ( --xy-theme-selected );
box-shadow : var ( --xy-node-boxshadow-default );
}
.react-flow__node-group {
background-color : rgba ( 207 , 182 , 255 , 0.4 );
border-color : #9e86ed ;
}
.react-flow.dark .react-flow__node-group {
return (
< DnDContext.Provider
value = {{
isDragging,
setIsDragging,
dropAction,
// This is a workaround to ensure that the drop action is not treated as a lazy function.
setDropAction : ( action ) => setDropAction (() => action),
}}
>
{children}
</ DnDContext.Provider >
);
}
export default DnDContext;
background-color : rgba ( 123 , 107 , 148 , 0.22 );
border-color : #7b6b94 ;
}
.react-flow__edge.selectable:hover .react-flow__edge-path ,
.react-flow__edge.selectable.selected .react-flow__edge-path {
stroke : var ( --xy-theme-edge-hover );
}
.react-flow__handle {
export const useDnD = () => {
const { screenToFlowPosition } = useReactFlow ();
const context = useContext (DnDContext);
if ( ! context) {
throw new Error ( 'useDnD must be used within a DnDProvider' );
}
background-color : var ( --xy-handle-background-color-default );
}
.react-flow__handle.connectionindicator:hover {
const { isDragging , setIsDragging , setDropAction , dropAction } = context;
// This callback will be returned by the `useDnD` hook, and can be used in your UI,
// when you want to start dragging a node into the flow.
// For example, this is used in the `Sidebar` component.
const onDragStart = useCallback (
pointer-events : all ;
border-color : var ( --xy-theme-edge-hover );
background-color : var ( --xy-handle-background-color-default );
}
.react-flow__handle.connectionindicator:focus ,
.react-flow__handle.connectingfrom ,
.react-flow__handle.connectingto {
border-color : var ( --xy-theme-edge-hover );
}
.react-flow__node-resizer {
( event : React . PointerEvent < HTMLDivElement >, onDrop : OnDropAction ) => {
border-radius : 0 ;
border : none ;
}
.react-flow__resize-control.handle {
background-color : var ( --xy-theme-resize-handle-bg );
border-color : #9e86ed ;
border-radius : 0 ;
width : 5 px ;
height : 5 px ;
}
event. preventDefault ();
(event.target as HTMLElement ). setPointerCapture (event.pointerId);
setIsDragging ( true );
setDropAction (onDrop);
},
[setIsDragging, setDropAction],
);
const onDragEnd = useCallback (
( event : PointerEvent ) => {
if ( ! isDragging) {
/*
Custom Example CSS - This CSS is to improve the example experience.
setIsDragging ( false );
return ;
}
(event.target as HTMLElement ). releasePointerCapture (event.pointerId);
// Use elementFromPoint to get the actual element under the pointer
const elementUnderPointer = document. elementFromPoint (event.clientX, event.clientY);
const isDroppingOnFlow = elementUnderPointer?. closest ( '.react-flow' );
event. preventDefault ();
// Only allow dropping on the flow area
You can remove it if you want to use the default styles.
New Theme Classes:
.xy-theme__button - Styles for buttons.
.xy-theme__input - Styles for text inputs.
.xy-theme__checkbox - Styles for checkboxes.
.xy-theme__select - Styles for dropdown selects.
.xy-theme__label - Styles for labels.
Use these classes to apply consistent theming across your components.
*/
:root {
--color-primary : #ff0073 ;
--color-background : #fefefe ;
--color-hover-bg : #f6f6f6 ;
--color-disabled : #76797e ;
}
if (isDroppingOnFlow) {
.xy-theme__button-group {
const flowPosition = screenToFlowPosition ({ x: event.clientX, y: event.clientY });
dropAction ?.({ position: flowPosition });
}
setIsDragging ( false );
},
[screenToFlowPosition, setIsDragging, dropAction],
);
// Add global touch event listeners
useEffect (() => {
if ( ! isDragging) return ;
document. addEventListener ( 'pointerup' , onDragEnd);
display : flex ;
align-items : center ;
. xy-theme __ button :first-child {
border-radius: 100 px 0 0 100 px ;
}
.xy-theme__button:last-child {
border-radius : 0 100 px 100 px 0 ;
margin : 0 ;
return () => {
document. removeEventListener ( 'pointerup' , onDragEnd);
};
}, [onDragEnd, isDragging]);
return {
isDragging,
onDragStart,
};
};
export const useDnDPosition = () => {
}
}
/* Custom Button Styling */
.xy-theme__button {
display : inline-flex ;
align-items : center ;
justify-content : center ;
height : 2.5 rem ;
padding : 0 1 rem ;
border-radius : 100 px ;
const [ position , setPosition ] = useState < XYPosition | undefined >( undefined );
border : 1 px solid var ( --color-primary );
background-color : var ( --color-background );
color : var ( --color-primary );
transition :
background-color 0.2 s ease ,
border-color 0.2 s ease ;
// By default, the pointer move event sets the position of the dragged element in the context.
// This will be used to display the `DragGhost` component.
const onDrag = useCallback (( event : PointerEvent ) => {
event. preventDefault ();
setPosition ({ x: event.clientX, y: event.clientY });
}, []);
useEffect (() => {
document. addEventListener ( 'pointermove' , onDrag);
return () => {
box-shadow : var ( --xy-node-boxshadow-default );
document. removeEventListener ( 'pointermove' , onDrag);
};
}, [onDrag]);
return { position };
};
cursor : pointer ;
}
.xy-theme__button.active {
background-color : var ( --color-primary );
color : white ;
border-color : var ( --color-primary );
}
.xy-theme__button.active:hover ,
.xy-theme__button.active:active {
background-color : var ( --color-primary );
opacity : 0.9 ;
}
.xy-theme__button:hover {
background-color : var ( --xy-controls-button-background-color-hover-default );
}
.xy-theme__button:active {
background-color : var ( --color-hover-bg );
}
.xy-theme__button:disabled {
color : var ( --color-disabled );
opacity : 0.8 ;
cursor : not-allowed ;
border : 1 px solid var ( --color-disabled );
}
.xy-theme__button > span {
margin-right : 0.2 rem ;
}
/* Add gap between adjacent buttons */
.xy-theme__button + .xy-theme__button {
margin-left : 0.3 rem ;
}
/* Example Input Styling */
.xy-theme__input {
padding : 0.5 rem 0.75 rem ;
border : 1 px solid var ( --color-primary );
border-radius : 7 px ;
background-color : var ( --color-background );
transition :
background-color 0.2 s ease ,
border-color 0.2 s ease ;
font-size : 1 rem ;
color : var ( --xy-theme-panel-text );
}
.xy-theme__input:focus {
outline : none ;
border-color : var ( --color-primary );
box-shadow : 0 0 0 2 px rgba ( 255 , 0 , 115 , 0.3 );
}
/* Specific Checkbox Styling */
.xy-theme__checkbox {
appearance : none ;
-webkit-appearance : none ;
width : 1.25 rem ;
height : 1.25 rem ;
border-radius : 7 px ;
border : 2 px solid var ( --color-primary );
background-color : var ( --color-background );
transition :
background-color 0.2 s ease ,
border-color 0.2 s ease ;
cursor : pointer ;
display : inline-block ;
vertical-align : middle ;
margin-right : 0.5 rem ;
}
.xy-theme__checkbox:checked {
background-color : var ( --color-primary );
border-color : var ( --color-primary );
}
.xy-theme__checkbox:focus {
outline : none ;
box-shadow : 0 0 0 2 px rgba ( 255 , 0 , 115 , 0.3 );
}
/* Dropdown Styling */
.xy-theme__select {
padding : 0.5 rem 0.75 rem ;
border : 1 px solid var ( --color-primary );
border-radius : 50 px ;
background-color : var ( --color-background );
transition :
background-color 0.2 s ease ,
border-color 0.2 s ease ;
font-size : 1 rem ;
color : var ( --xy-theme-panel-text );
margin-right : 0.5 rem ;
box-shadow : var ( --xy-node-boxshadow-default );
}
.xy-theme__select:focus {
outline : none ;
border-color : var ( --color-primary );
box-shadow : 0 0 0 2 px rgba ( 255 , 0 , 115 , 0.3 );
}
.xy-theme__label {
margin-top : 10 px ;
margin-bottom : 3 px ;
display : inline-block ;
color : var ( --xy-theme-panel-text );
}