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

* refactor(step/smoothstep-edge): better default routing
* chore(edges): pass options
* chore(exports): add BaseEdge

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;

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}

examples/nextjs/pages/Undirectional/index.tsx

@@ -80,7 +80,7 @@ const initialEdges: Edge[] = [
     target: '01',
     sourceHandle: 'left',
     targetHandle: 'bottom',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-1b',
@@ -88,7 +88,7 @@ const initialEdges: Edge[] = [
     target: '01',
     sourceHandle: 'top',
     targetHandle: 'right',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-2a',
@@ -96,7 +96,7 @@ const initialEdges: Edge[] = [
     target: '02',
     sourceHandle: 'top',
     targetHandle: 'left',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-2b',
@@ -104,7 +104,7 @@ const initialEdges: Edge[] = [
     target: '02',
     sourceHandle: 'right',
     targetHandle: 'bottom',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-3a',
@@ -112,7 +112,7 @@ const initialEdges: Edge[] = [
     target: '03',
     sourceHandle: 'right',
     targetHandle: 'top',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-3b',
@@ -120,7 +120,7 @@ const initialEdges: Edge[] = [
     target: '03',
     sourceHandle: 'bottom',
     targetHandle: 'left',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-4a',
@@ -128,7 +128,7 @@ const initialEdges: Edge[] = [
     target: '04',
     sourceHandle: 'bottom',
     targetHandle: 'right',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-4b',
@@ -136,7 +136,7 @@ const initialEdges: Edge[] = [
     target: '04',
     sourceHandle: 'left',
     targetHandle: 'top',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-10',
@@ -144,7 +144,7 @@ const initialEdges: Edge[] = [
     target: '10',
     sourceHandle: 'top',
     targetHandle: 'bottom',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-20',
@@ -152,7 +152,7 @@ const initialEdges: Edge[] = [
     target: '20',
     sourceHandle: 'right',
     targetHandle: 'left',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-30',
@@ -160,7 +160,7 @@ const initialEdges: Edge[] = [
     target: '30',
     sourceHandle: 'bottom',
     targetHandle: 'top',
-    type: 'default',
+    type: 'smoothstep',
   },
   {
     id: 'e0-40',
@@ -168,7 +168,7 @@ const initialEdges: Edge[] = [
     target: '40',
     sourceHandle: 'left',
     targetHandle: 'right',
-    type: 'default',
+    type: 'smoothstep',
   },
 ];
 

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;