refactor(connectionline): separate edge renderer and connectionline

examples/vite-app/src/examples/Basic/index.tsx

@@ -48,8 +48,6 @@ const initialEdges: Edge[] = [
   { id: 'e1-3', source: '1', target: '3' },
 ];
 
-const nodeOrigin: NodeOrigin = [0.5, 0.5];
-
 const defaultEdgeOptions = {};
 
 const BasicFlow = () => {
@@ -96,7 +94,6 @@ const BasicFlow = () => {
       selectNodesOnDrag={false}
       elevateEdgesOnSelect
       elevateNodesOnSelect={false}
-      // nodeOrigin={nodeOrigin}
     >
       <Background variant={BackgroundVariant.Dots} />
       <MiniMap />

examples/vite-app/src/examples/CustomConnectionLine/ConnectionLine.tsx

@@ -1,9 +1,8 @@
-import React, { FC } from 'react';
 import { ConnectionLineComponentProps } from 'reactflow';
 
-const ConnectionLine: FC<ConnectionLineComponentProps> = ({ fromX, fromY, toX, toY }) => {
+function ConnectionLine({ fromX, fromY, toX, toY }: ConnectionLineComponentProps) {
   return (
-    <g>
+    <>
       <path
         fill="none"
         stroke="#222"
@@ -12,8 +11,8 @@ const ConnectionLine: FC<ConnectionLineComponentProps> = ({ fromX, fromY, toX, t
         d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
       />
       <circle cx={toX} cy={toY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
-    </g>
+    </>
   );
-};
+}
 
 export default ConnectionLine;

examples/vite-app/src/examples/Switch/index.tsx

@@ -1,5 +1,5 @@
 import { MouseEvent, useCallback } from 'react';
-import ReactFlow, { addEdge, Node, Connection, Edge, useNodesState, useEdgesState, NodeOrigin } from 'reactflow';
+import ReactFlow, { addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
@@ -100,7 +100,6 @@ const BasicFlow = () => {
       onNodeClick={onNodeClick}
       onConnect={onConnect}
       onNodeDragStop={onNodeDragStop}
-      disableKeyboardA11y
       onNodeDrag={onNodeDrag}
     >
       <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>

examples/vite-app/src/examples/Undirectional/index.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, useCallback } from 'react';
+import { MouseEvent, useCallback } from 'react';
 import ReactFlow, {
   useReactFlow,
   NodeTypes,
@@ -184,6 +184,7 @@ const UpdateNodeInternalsFlow = () => {
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
   const onConnect = (params: Edge | Connection) => setEdges((els) => addEdge(params, els));
+
   const { project } = useReactFlow();
   const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
     setEdges((els) => updateEdge(oldEdge, newConnection, els));