From d89be58e541190d395c46a717e3a9ee6fcb7519d Mon Sep 17 00:00:00 2001
From: Eugene Samonenko <esamonenko@agilevision.io>
Date: Wed, 3 Mar 2021 13:10:33 +0200
Subject: [PATCH] feat(edgeUpdater): add edgeUpdaterRadius prop

---
 package.json                         | 2 +-
 src/components/Edges/wrapEdge.tsx    | 3 +++
 src/container/EdgeRenderer/index.tsx | 2 ++
 src/container/GraphView/index.tsx    | 8 +++++---
 src/container/ReactFlow/index.tsx    | 3 +++
 src/types/index.ts                   | 1 +
 6 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 8293a9b4..3b09f948 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx
index 0185f298..4fbda394 100644
--- a/src/components/Edges/wrapEdge.tsx
+++ b/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>
         )}
diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx
index fcfb3698..f8469d61 100644
--- a/src/container/EdgeRenderer/index.tsx
+++ b/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}
     />
   );
 };
diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index c9dbe149..2355a1be 100644
--- a/src/container/GraphView/index.tsx
+++ b/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>
   );
diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx
index 108b7273..f1ed85df 100644
--- a/src/container/ReactFlow/index.tsx
+++ b/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} />}
diff --git a/src/types/index.ts b/src/types/index.ts
index 7ec79fe1..616abe80 100644
--- a/src/types/index.ts
+++ b/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> {