From 0373b53fc2ee00dbed1a0422ec3000b13c56a4a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christopher=20Mo=CC=88ller?= <chrtze@gmail.com>
Date: Tue, 6 Oct 2020 13:08:38 +0200
Subject: [PATCH] feat(renderer): change layer order, allow zoom on nodes and
 user selection

---
 example/src/Overview/index.js        |  6 ++++++
 src/container/FlowRenderer/index.tsx |  2 +-
 src/hooks/useD3Zoom.ts               | 16 ++++++++++++++--
 src/style.css                        | 10 +++++++---
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/example/src/Overview/index.js b/example/src/Overview/index.js
index d5703ead..1f1f230d 100644
--- a/example/src/Overview/index.js
+++ b/example/src/Overview/index.js
@@ -4,6 +4,9 @@ import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background, isNo
 
 const onNodeDragStart = (event, node) => console.log('drag start', node);
 const onNodeDragStop = (event, node) => console.log('drag stop', node);
+const onPaneClick = (event) => console.log('pane click', event);
+const onPaneScroll = (event) => console.log('pane scroll', event);
+const onPaneContextMenu = (event) => console.log('pane context menu', event);
 const onSelectionDrag = (event, nodes) => console.log('selection drag', nodes);
 const onSelectionDragStart = (event, nodes) => console.log('selection drag start', nodes);
 const onSelectionDragStop = (event, nodes) => console.log('selection drag stop', nodes);
@@ -125,6 +128,9 @@ const OverviewFlow = () => {
       onElementClick={onElementClick}
       onElementsRemove={onElementsRemove}
       onConnect={onConnect}
+      onPaneClick={onPaneClick}
+      onPaneScroll={onPaneScroll}
+      onPaneContextMenu={onPaneContextMenu}
       onNodeDragStart={onNodeDragStart}
       onNodeDragStop={onNodeDragStop}
       onSelectionDragStart={onSelectionDragStart}
diff --git a/src/container/FlowRenderer/index.tsx b/src/container/FlowRenderer/index.tsx
index cbc5615d..da3f8e1b 100644
--- a/src/container/FlowRenderer/index.tsx
+++ b/src/container/FlowRenderer/index.tsx
@@ -103,7 +103,7 @@ const FlowRenderer = ({
           onSelectionContextMenu={onSelectionContextMenu}
         />
       )}
-      <div className="react-flow__zoompane" onClick={onClick} onContextMenu={onContextMenu} onWheel={onWheel} />
+      <div className="react-flow__pane" onClick={onClick} onContextMenu={onContextMenu} onWheel={onWheel} />
     </div>
   );
 };
diff --git a/src/hooks/useD3Zoom.ts b/src/hooks/useD3Zoom.ts
index 4df1676e..48f15ffc 100644
--- a/src/hooks/useD3Zoom.ts
+++ b/src/hooks/useD3Zoom.ts
@@ -107,7 +107,19 @@ export default ({
   useEffect(() => {
     if (d3Zoom) {
       d3Zoom.filter((event: any) => {
-        console.log(event);
+        if (selectionKeyPressed) {
+          return false;
+        }
+
+        // only allow zoom on nodes
+        if (event.target.closest('.react-flow__node') && event.type !== 'wheel') {
+          return false;
+        }
+
+        // only allow zoom on user selection
+        if (event.target.closest('.react-flow__nodesselection') && event.type !== 'wheel') {
+          return false;
+        }
 
         if (!paneMoveable) {
           return false;
@@ -124,5 +136,5 @@ export default ({
         return !event.ctrlKey && !event.button;
       });
     }
-  }, [d3Zoom, zoomOnScroll, zoomOnDoubleClick, paneMoveable]);
+  }, [d3Zoom, zoomOnScroll, zoomOnDoubleClick, paneMoveable, selectionKeyPressed]);
 };
diff --git a/src/style.css b/src/style.css
index 00a965d2..ab251497 100644
--- a/src/style.css
+++ b/src/style.css
@@ -6,7 +6,7 @@
 }
 
 .react-flow__renderer,
-.react-flow__zoompane,
+.react-flow__pane,
 .react-flow__selectionpane {
   width: 100%;
   height: 100%;
@@ -15,12 +15,16 @@
   left: 0;
 }
 
-.react-flow__zoompane {
+.react-flow__pane {
   z-index: 1;
 }
 
+.react-flow__renderer {
+  z-index: 4;
+}
+
 .react-flow__selectionpane {
-  z-index: 2;
+  z-index: 5;
 }
 
 .react-flow__selection {