feat(edges): add label props

example/src/Basic/index.js

@@ -11,7 +11,7 @@ const initialElements = [
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
   { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
   { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
-  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-2', source: '1', target: '2', animated: true, label: 'edge text' },
   { id: 'e1-3', source: '1', target: '3' },
 ];
 

example/src/Edges/index.js

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+
+import ReactFlow, { removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
+
+const onNodeDragStop = node => console.log('drag stop', node);
+const onElementClick = element => console.log('click', element);
+const onLoad = (graph) => {
+  graph.fitView();
+};
+
+const initialElements = [
+  { id: '1', type: 'input', data: { label: 'Input Node 1' }, position: { x: 250, y: 0 } },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 250, y: 200 } },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 300 } },
+  { id: '5', data: { label: 'Node 5' }, position: { x: 450, y: 400 } },
+  { id: '6', type: 'output', data: { label: 'Output Node 5' }, position: { x: 250, y: 550 } },
+  { id: '7', type: 'output', data: { label: 'Output Node 6' }, position: { x: 550, y: 550 } },
+  { id: 'e1-2', source: '1', target: '2', label: 'bezier edge', labelBgStyle: { fillOpacity: 0.75 } },
+  { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
+  { id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
+  { id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: 'red' } },
+  { id: 'e5-6', source: '5', target: '6', label: 'styled label', labelStyle: { fill: 'red', fontWeight: 700 } },
+  { id: 'e5-7', source: '5', target: '7', label: 'label with styled bg', labelBgStyle: { fill: '#eee', fillOpacity: 0.7 } },
+
+]
+
+const EdgesFlow = () => {
+  const [elements, setElements] = useState(initialElements);
+
+  const onElementsRemove = (elementsToRemove) => setElements(els => removeElements(elementsToRemove, els));
+  const onConnect = (params) => setElements(els => addEdge(params, els));
+
+  return (
+    <ReactFlow
+      elements={elements}
+      onElementClick={onElementClick}
+      onElementsRemove={onElementsRemove}
+      onConnect={onConnect}
+      onNodeDragStop={onNodeDragStop}
+      style={{ width: '100%', height: '100%' }}
+      onLoad={onLoad}
+      snapToGrid={true}
+    >
+      <MiniMap />
+      <Controls />
+    </ReactFlow>
+  );
+}
+
+export default EdgesFlow;

example/src/Rich/index.js

@@ -18,13 +18,13 @@ const initialElements = [
     sourcePosition: 'right'
   },
   { id: '4', data: { label: 'Node 4' }, position: { x: 500, y: 200 }, targetPosition: 'left' },
-  { id: '5', type: 'output', data: { label: 'Output Node 5'}, position: { x: 300, y: 300 } },
+  { id: '5', type: 'output', data: { label: 'Output Node 5' }, position: { x: 300, y: 300 } },
   { id: '6', type: 'output', data: { label: 'Output Node 6' }, position: { x: 600, y: 400 } },
-  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-2', source: '1', target: '2', animated: true, label: 'edge text', labelBgStyle: { fillOpacity: 0.75 } },
   { id: 'e2-3', source: '2', target: '3', animated: true },
   { id: 'e3-4', source: '3', target: '4', animated: true },
   { id: 'e3-5', source: '4', target: '5', animated: true, type: 'step' },
-  { id: 'e5-6b', source: '4', target: '6', type: 'step'  },
+  { id: 'e5-6b', source: '4', target: '6', type: 'step', label: 'styled label', labelStyle: { fill: 'red', fontWeight: 700 } },
 ]
 
 const RichGraph = () => {

example/src/index.js

@@ -8,6 +8,7 @@ import CustomNode from './CustomNode';
 import Stress from './Stress';
 import Inactive from './Inactive';
 import Empty from './Empty';
+import Edges from './Edges';
 
 import './index.css';
 
@@ -27,10 +28,14 @@ const routes = [{
   path: '/stress',
   component: Stress,
   label: 'Stress'
+}, {
+  path: '/edges',
+  component: Edges,
+  label: 'Edges'
 }, {
   path: '/empty',
   component: Empty
-},{
+}, {
   path: '/inactive',
   component: Inactive
 }];