Refactor: Better routing for smoothstep and step edge (#2407)

* refactor(step/smoothstep-edge): better default routing * chore(edges): pass options * chore(exports): add BaseEdge
2022-09-07 17:40:18 +02:00
parent 5c16415e19
commit 7a96817114
15 changed files with 344 additions and 123 deletions
@@ -0,0 +1,132 @@
+import React from 'react';
+import ReactFlow, { Node, Edge, Position, MarkerType } from 'reactflow';
+
+const nodes: Node[] = [
+  // LTR
+  {
+    id: '1',
+    position: { x: 50, y: -100 },
+    data: { label: 'Source' },
+    sourcePosition: Position.Right,
+    targetPosition: Position.Right,
+    style: { background: 'rgba(255,255,255,0.5)' },
+  },
+  {
+    id: '2',
+    position: { x: -100, y: 0 },
+    data: { label: 'Target' },
+    sourcePosition: Position.Left,
+    targetPosition: Position.Left,
+    style: { background: 'rgba(255,255,255,0.5)' },
+  },
+  // Right Right
+  {
+    id: '3',
+    position: { x: -100, y: 250 },
+    data: { label: 'Source' },
+    sourcePosition: Position.Right,
+    targetPosition: Position.Right,
+    style: { background: 'rgba(255,255,255,0.5)' },
+  },
+  {
+    id: '4',
+    position: { x: 50, y: 150 },
+    data: { label: 'Target' },
+    sourcePosition: Position.Right,
+    targetPosition: Position.Right,
+    style: { background: 'rgba(255,255,255,0.5)' },
+  },
+  // Right Top
+  {
+    id: '5',
+    position: { x: -100, y: 450 },
+    data: { label: 'Source' },
+    sourcePosition: Position.Right,
+    targetPosition: Position.Right,
+    style: { background: 'rgba(255,255,255,0.5)' },
+  },
+  {
+    id: '6',
+    position: { x: 100, y: 400 },
+    data: { label: 'Target' },
+    sourcePosition: Position.Top,
+    targetPosition: Position.Top,
+    style: { background: 'rgba(255,255,255,0.5)' },
+  },
+  // Right Bottom
+  {
+    id: '7',
+    position: { x: 100, y: 700 },
+    data: { label: 'Source' },
+    sourcePosition: Position.Right,
+    targetPosition: Position.Right,
+    style: { background: 'rgba(255,255,255,0.5)' },
+  },
+  {
+    id: '8',
+    position: { x: -100, y: 600 },
+    data: { label: 'Target' },
+    sourcePosition: Position.Bottom,
+    targetPosition: Position.Bottom,
+    style: { background: 'rgba(255,255,255,0.5)' },
+  },
+];
+
+const edges: Edge[] = [
+  {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+    type: 'smoothstep',
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+    },
+    options: {
+      offset: 30,
+    },
+  },
+  {
+    id: 'e3-4',
+    source: '3',
+    target: '4',
+    type: 'smoothstep',
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+    },
+    options: {
+      borderRadius: 2,
+    },
+  },
+
+  {
+    id: 'e4-5',
+    source: '5',
+    target: '6',
+    type: 'smoothstep',
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+    },
+  },
+
+  {
+    id: 'e7-8',
+    source: '7',
+    target: '8',
+    type: 'smoothstep',
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+    },
+  },
+];
+
+const defaultEdgeOptions = {
+  style: {
+    strokeWidth: 2,
+  },
+};
+
+const SimpleEdge = () => {
+  return <ReactFlow defaultNodes={nodes} defaultEdges={edges} fitView defaultEdgeOptions={defaultEdgeOptions} />;
+};
+
+export default SimpleEdge;