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

* refactor(step/smoothstep-edge): better default routing * chore(edges): pass options * chore(exports): add BaseEdge
xyflow · Sep 7, 2022 · 7a96817 · 7a96817
1 parent 5c16415
commit 7a96817
Show file tree

Hide file tree

Showing 15 changed files with 344 additions and 123 deletions.
diff --git a/examples/nextjs/pages/EdgeRouting/index.tsx b/examples/nextjs/pages/EdgeRouting/index.tsx
@@ -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;
diff --git a/examples/nextjs/pages/EdgeTypes/index.tsx b/examples/nextjs/pages/EdgeTypes/index.tsx
@@ -41,7 +41,6 @@ const EdgeTypesFlow = () => {
       onInit={onInit}
       onConnect={onConnect}
       minZoom={0.2}
-      zoomOnScroll={false}
       selectionKeyCode="a+s"
       multiSelectionKeyCode={multiSelectionKeyCode}
       deleteKeyCode={deleteKeyCode}

diff --git a/examples/nextjs/pages/Undirectional/index.tsx b/examples/nextjs/pages/Undirectional/index.tsx
@@ -80,95 +80,95 @@ const initialEdges: Edge[] = [
     target: '01',
     sourceHandle: 'left',
     targetHandle: 'bottom',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-1b',
     source: '00',
     target: '01',
     sourceHandle: 'top',
     targetHandle: 'right',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-2a',
     source: '00',
     target: '02',
     sourceHandle: 'top',
     targetHandle: 'left',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-2b',
     source: '00',
     target: '02',
     sourceHandle: 'right',
     targetHandle: 'bottom',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-3a',
     source: '00',
     target: '03',
     sourceHandle: 'right',
     targetHandle: 'top',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-3b',
     source: '00',
     target: '03',
     sourceHandle: 'bottom',
     targetHandle: 'left',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-4a',
     source: '00',
     target: '04',
     sourceHandle: 'bottom',
     targetHandle: 'right',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-4b',
     source: '00',
     target: '04',
     sourceHandle: 'left',
     targetHandle: 'top',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-10',
     source: '00',
     target: '10',
     sourceHandle: 'top',
     targetHandle: 'bottom',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-20',
     source: '00',
     target: '20',
     sourceHandle: 'right',
     targetHandle: 'left',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-30',
     source: '00',
     target: '30',
     sourceHandle: 'bottom',
     targetHandle: 'top',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-40',
     source: '00',
     target: '40',
     sourceHandle: 'left',
     targetHandle: 'right',
-    type: 'default',
+    type: 'smoothstep',
   },
 ];
 

diff --git a/examples/nextjs/pages/_app.tsx b/examples/nextjs/pages/_app.tsx
@@ -1,5 +1,7 @@
-import React from 'react';
+import React, { ChangeEventHandler } from 'react';
 import { useRouter } from 'next/router';
+import { AppProps } from 'next/app';
+
 import '../styles/globals.css';
 
 // Unfortunately this doesn't work because preconsruct clears the dist folder and there is
@@ -18,6 +20,7 @@ const routes = [
   '/DefaultNodes',
   '/DragHandle',
   '/DragNDrop',
+  '/EdgeRouting',
   '/EdgeTypes',
   '/Edges',
   '/Empty',
@@ -45,10 +48,10 @@ const routes = [
   '/Validation',
 ];
 
-function MyApp({ Component, pageProps }) {
+function App({ Component, pageProps }: AppProps) {
   const router = useRouter();
 
-  const onRouteChange = (evt) => {
+  const onRouteChange: ChangeEventHandler<HTMLSelectElement> = (evt) => {
     router.push(evt.target.value);
   };
 
@@ -71,4 +74,4 @@ function MyApp({ Component, pageProps }) {
   );
 }
 
-export default MyApp;
+export default App;
diff --git a/packages/core/src/components/Edges/BezierEdge.tsx b/packages/core/src/components/Edges/BezierEdge.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { EdgeProps, Position } from '../../types';
+import { BezierEdgeProps, Position } from '../../types';
 import BaseEdge from './BaseEdge';
 
 export interface GetBezierPathParams {
@@ -143,16 +143,16 @@ const BezierEdge = memo(
     style,
     markerEnd,
     markerStart,
-    curvature,
-  }: EdgeProps) => {
+    options,
+  }: BezierEdgeProps) => {
     const params = {
       sourceX,
       sourceY,
       sourcePosition,
       targetX,
       targetY,
       targetPosition,
-      curvature,
+      curvature: options?.curvature,
     };
     const path = getBezierPath(params);
     const [centerX, centerY] = getBezierCenter(params);