chore(examples): undirectional

example/src/Undirectional/CustomNode.tsx

@@ -4,10 +4,10 @@ import { Handle, Position, NodeProps } from 'react-flow-renderer';
 
 const nodeStyles: CSSProperties = { padding: '10px 15px', border: '1px solid #ddd' };
 
-const CustomNode: FC<NodeProps> = () => {
+const CustomNode: FC<NodeProps> = ({ id }) => {
   return (
     <div style={nodeStyles}>
-      <div>node</div>
+      <div>node {id}</div>
       <Handle type="source" id="left" position={Position.Left} />
       <Handle type="source" id="right" position={Position.Right} />
       <Handle type="source" id="top" position={Position.Top} />

example/src/Undirectional/index.tsx

@@ -12,30 +12,163 @@ import ReactFlow, {
   ConnectionLineType,
   ConnectionMode,
   updateEdge,
+  ArrowHeadType,
 } from 'react-flow-renderer';
 import CustomNode from './CustomNode';
 
 const initialElements: Elements = [
   {
-    id: '1',
+    id: '00',
     type: 'custom',
-    position: { x: 150, y: 100 },
+    position: { x: 300, y: 250 },
   },
   {
-    id: '2',
+    id: '01',
     type: 'custom',
-    position: { x: 300, y: 100 },
+    position: { x: 100, y: 50 },
   },
   {
-    id: '3',
+    id: '02',
     type: 'custom',
-    position: { x: 450, y: 100 },
+    position: { x: 500, y: 50 },
   },
   {
-    id: 'e1-2',
-    source: '2',
-    target: '3',
+    id: '03',
+    type: 'custom',
+    position: { x: 500, y: 500 },
+  },
+  {
+    id: '04',
+    type: 'custom',
+    position: { x: 100, y: 500 },
+  },
+  {
+    id: '10',
+    type: 'custom',
+    position: { x: 300, y: 5 },
+  },
+  {
+    id: '20',
+    type: 'custom',
+    position: { x: 600, y: 250 },
+  },
+  {
+    id: '30',
+    type: 'custom',
+    position: { x: 300, y: 600 },
+  },
+  {
+    id: '40',
+    type: 'custom',
+    position: { x: 5, y: 250 },
+  },
+  {
+    id: 'e0-1a',
+    source: '00',
+    target: '01',
+    sourceHandle: 'left',
+    targetHandle: 'bottom',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-1b',
+    source: '00',
+    target: '01',
+    sourceHandle: 'top',
+    targetHandle: 'right',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-2a',
+    source: '00',
+    target: '02',
+    sourceHandle: 'top',
+    targetHandle: 'left',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-2b',
+    source: '00',
+    target: '02',
     sourceHandle: 'right',
+    targetHandle: 'bottom',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-3a',
+    source: '00',
+    target: '03',
+    sourceHandle: 'right',
+    targetHandle: 'top',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-3b',
+    source: '00',
+    target: '03',
+    sourceHandle: 'bottom',
+    targetHandle: 'left',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-4a',
+    source: '00',
+    target: '04',
+    sourceHandle: 'bottom',
+    targetHandle: 'right',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-4b',
+    source: '00',
+    target: '04',
+    sourceHandle: 'left',
+    targetHandle: 'top',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-10',
+    source: '00',
+    target: '10',
+    sourceHandle: 'top',
+    targetHandle: 'bottom',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-20',
+    source: '00',
+    target: '20',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-30',
+    source: '00',
+    target: '30',
+    sourceHandle: 'bottom',
+    targetHandle: 'top',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
+  },
+  {
+    id: 'e0-40',
+    source: '00',
+    target: '40',
+    sourceHandle: 'left',
+    targetHandle: 'right',
+    type: 'smoothstep',
+    arrowHeadType: ArrowHeadType.Arrow,
   },
 ];