From a095715e5f27fa59c3606f49c73efd1747381766 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Sat, 1 Aug 2020 12:13:51 +0200
Subject: [PATCH] refactor(paneClick): rename onZoomPaneClick tp onPaneClick

---
 README.md                         |  2 +-
 example/src/Interaction/index.js  |  4 ++--
 src/container/GraphView/index.tsx | 10 +++++-----
 src/container/ReactFlow/index.tsx |  6 +++---
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index ee0ee812..e2ca976a 100644
--- a/README.md
+++ b/README.md
@@ -93,7 +93,7 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
 - `onMoveStart()`: called when user starts panning or zooming
 - `onMoveEnd()`: called when user ends panning or zooming
 - `onSelectionChange(elements: Elements)`: called when user selects one or multiple elements
-- `onZoomPaneClick()`: called when user clicks directly on the canvas
+- `onPaneClick()`: called when user clicks directly on the canvas
 
 #### Interaction
 - `nodesDraggable`: default: `true`. This applies to all nodes. You can also change the behavior of a specific node with the `draggable` node option.
diff --git a/example/src/Interaction/index.js b/example/src/Interaction/index.js
index 54dd1882..96d8d734 100644
--- a/example/src/Interaction/index.js
+++ b/example/src/Interaction/index.js
@@ -14,7 +14,7 @@ const initialElements = [
 const onNodeDragStart = (node) => console.log('drag start', node);
 const onNodeDragStop = (node) => console.log('drag stop', node);
 const onElementClick = (element) => console.log('click', element);
-const onZoomPaneClick = () => console.log('onZoomPaneClick');
+const onPaneClick = () => console.log('onPaneClick');
 
 const InteractionFlow = () => {
   const [elements, setElements] = useState(initialElements);
@@ -41,7 +41,7 @@ const InteractionFlow = () => {
       onNodeDragStart={onNodeDragStart}
       onNodeDragStop={onNodeDragStop}
       paneMoveable={paneMoveable}
-      onZoomPaneClick={captureZoomClick ? onZoomPaneClick : undefined}
+      onPaneClick={captureZoomClick ? onPaneClick : undefined}
     >
       <MiniMap />
       <Controls />
diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index d252556d..1d598c71 100644
--- a/src/container/GraphView/index.tsx
+++ b/src/container/GraphView/index.tsx
@@ -39,7 +39,7 @@ export interface GraphViewProps {
   onMove?: (flowTransform?: FlowTransform) => void;
   onMoveStart?: (flowTransform?: FlowTransform) => void;
   onMoveEnd?: (flowTransform?: FlowTransform) => void;
-  onZoomPaneClick?: () => void;
+  onPaneClick?: () => void;
   selectionKeyCode: number;
   nodeTypes: NodeTypesType;
   edgeTypes: EdgeTypesType;
@@ -101,7 +101,7 @@ const GraphView = ({
   zoomOnScroll,
   zoomOnDoubleClick,
   paneMoveable,
-  onZoomPaneClick,
+  onPaneClick,
 }: GraphViewProps) => {
   const zoomPane = useRef<HTMLDivElement>(null);
   const rendererNode = useRef<HTMLDivElement>(null);
@@ -123,8 +123,8 @@ const GraphView = ({
 
   const selectionKeyPressed = useKeyPress(selectionKeyCode);
 
-  const handleZoomPaneClick = () => {
-    onZoomPaneClick?.();
+  const onZoomPaneClick = () => {
+    onPaneClick?.();
     setNodesSelection({ isActive: false });
   };
 
@@ -259,7 +259,7 @@ const GraphView = ({
       />
       <UserSelection selectionKeyPressed={selectionKeyPressed} />
       {nodesSelectionActive && <NodesSelection />}
-      <div className="react-flow__zoompane" onClick={handleZoomPaneClick} ref={zoomPane} />
+      <div className="react-flow__zoompane" onClick={onZoomPaneClick} ref={zoomPane} />
     </div>
   );
 };
diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx
index 8ff5384c..44882aa7 100644
--- a/src/container/ReactFlow/index.tsx
+++ b/src/container/ReactFlow/index.tsx
@@ -47,7 +47,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onMoveStart?: (flowTransform?: FlowTransform) => void;
   onMoveEnd?: (flowTransform?: FlowTransform) => void;
   onSelectionChange?: (elements: Elements | null) => void;
-  onZoomPaneClick?: () => void;
+  onPaneClick?: () => void;
   nodeTypes: NodeTypesType;
   edgeTypes: EdgeTypesType;
   connectionLineType: ConnectionLineType;
@@ -113,7 +113,7 @@ const ReactFlow = ({
   zoomOnScroll,
   zoomOnDoubleClick,
   paneMoveable,
-  onZoomPaneClick,
+  onPaneClick,
 }: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
@@ -159,7 +159,7 @@ const ReactFlow = ({
           zoomOnScroll={zoomOnScroll}
           zoomOnDoubleClick={zoomOnDoubleClick}
           paneMoveable={paneMoveable}
-          onZoomPaneClick={onZoomPaneClick}
+          onPaneClick={onPaneClick}
         />
         {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
         {children}