2024-02-09
New multi-connection line example! Quite a while back, a user opened a
asking us to add the ability to draw multiple connection lines to the library. We
don’t have any plans to add this to the library itself, but we hope this example
helps folks who need this functionality in their own apps. Check it out
.
Get Pro examples, prioritized bug reports, 1:1 support from the maintainers, and more with React Flow Pro New multi-connection line example! - 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 ;
padding : 10 px ;
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 {
box-shadow : 0 px 0 px 0 px 4 px var ( --xy-theme-color-focus );
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 {
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 {
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 {
background-color : var ( --xy-handle-background-color-default );
}
.react-flow__handle.connectionindicator:hover {
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 {
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 ;
}
/*
Custom Example CSS - This CSS is to improve the example experience.
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 ;
}
.xy-theme__button-group {
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 ;
}
}
/* 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 ;
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 ;
box-shadow : var ( --xy-node-boxshadow-default );
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 );
}
