Merge branch 'main' of github.com:wbkd/react-flow into main

package.json

@@ -17,7 +17,7 @@
     "start:testserver": "npm run build && npm run start:examples",
     "build:dev": "npm install && npm run build && cd example && npm install && npm run build",
     "dev:wait": "start-server-and-test start:testserver http-get://localhost:3000",
-    "test": "npm run dev:wait test:chrome",
+    "test": "BROWSER=none npm run dev:wait test:chrome",
     "test:chrome": "cypress run --browser chrome --headless",
     "test:firefox": "cypress run --browser firefox",
     "test:all": "npm run test:chrome && npm run test:firefox",

src/components/Edges/wrapEdge.tsx

@@ -39,6 +39,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     handleEdgeUpdate,
     onConnectEdge,
     onContextMenu,
+    edgeUpdaterRadius,
   }: WrapEdgeProps): JSX.Element | null => {
     const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements);
     const setConnectionNodeId = useStoreActions((actions) => actions.setConnectionNodeId);
@@ -151,6 +152,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
               position={sourcePosition}
               centerX={sourceX}
               centerY={sourceY}
+              radius={edgeUpdaterRadius}
             />
           </g>
         )}
@@ -189,6 +191,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
               position={targetPosition}
               centerX={targetX}
               centerY={targetY}
+              radius={edgeUpdaterRadius}
             />
           </g>
         )}

src/container/EdgeRenderer/index.tsx

@@ -30,6 +30,7 @@ interface EdgeRendererProps {
   onlyRenderVisibleElements: boolean;
   onEdgeUpdate?: OnEdgeUpdateFunc;
   onEdgeContextMenu?: (event: React.MouseEvent, element: Edge) => void;
+  edgeUpdaterRadius?: number;
 }
 
 interface EdgeWrapperProps {
@@ -165,6 +166,7 @@ const Edge = ({
       onConnectEdge={onConnectEdge}
       handleEdgeUpdate={typeof props.onEdgeUpdate !== 'undefined'}
       onContextMenu={props.onEdgeContextMenu}
+      edgeUpdaterRadius={props.edgeUpdaterRadius}
     />
   );
 };

src/container/GraphView/index.tsx

@@ -86,8 +86,9 @@ const GraphView = ({
   onPaneContextMenu,
   onEdgeUpdate,
   onEdgeContextMenu,
+  edgeUpdaterRadius,
 }: GraphViewProps) => {
-  const isInitialised = useRef<boolean>(false);
+  const isInitialized = useRef<boolean>(false);
   const setOnConnect = useStoreActions((actions) => actions.setOnConnect);
   const setOnConnectStart = useStoreActions((actions) => actions.setOnConnectStart);
   const setOnConnectStop = useStoreActions((actions) => actions.setOnConnectStop);
@@ -106,7 +107,7 @@ const GraphView = ({
   const { zoomIn, zoomOut, zoomTo, transform, fitView, initialized } = useZoomPanHelper();
 
   useEffect(() => {
-    if (!isInitialised.current && initialized) {
+    if (!isInitialized.current && initialized) {
       if (onLoad) {
         onLoad({
           fitView: (params = { padding: 0.1 }) => fitView(params),
@@ -120,7 +121,7 @@ const GraphView = ({
         });
       }
 
-      isInitialised.current = true;
+      isInitialized.current = true;
     }
   }, [onLoad, zoomIn, zoomOut, zoomTo, transform, fitView, initialized]);
 
@@ -264,6 +265,7 @@ const GraphView = ({
         onEdgeUpdate={onEdgeUpdate}
         onlyRenderVisibleElements={onlyRenderVisibleElements}
         onEdgeContextMenu={onEdgeContextMenu}
+        edgeUpdaterRadius={edgeUpdaterRadius}
       />
     </FlowRenderer>
   );

src/container/ReactFlow/index.tsx

@@ -110,6 +110,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   zoomOnDoubleClick?: boolean;
   onEdgeUpdate?: OnEdgeUpdateFunc;
   onEdgeContextMenu?: (event: MouseEvent, nodes: Edge) => void;
+  edgeUpdaterRadius?: number
 }
 
 const ReactFlow = ({
@@ -175,6 +176,7 @@ const ReactFlow = ({
   children,
   onEdgeUpdate,
   onEdgeContextMenu,
+  edgeUpdaterRadius = 10,
   ...rest
 }: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
@@ -243,6 +245,7 @@ const ReactFlow = ({
           onSelectionContextMenu={onSelectionContextMenu}
           onEdgeUpdate={onEdgeUpdate}
           onEdgeContextMenu={onEdgeContextMenu}
+          edgeUpdaterRadius={edgeUpdaterRadius}
         />
         <ElementUpdater elements={elements} />
         {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}

src/types/index.ts

@@ -126,6 +126,7 @@ export interface WrapEdgeProps<T = any> {
   handleEdgeUpdate: boolean;
   onConnectEdge: OnConnectFunc;
   onContextMenu: (event: React.MouseEvent, edge: Edge) => void;
+  edgeUpdaterRadius?: number;
 }
 
 export interface EdgeProps<T = any> {