feat(renderer): change layer order, allow zoom on nodes and user selection

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>
   );
 };

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]);
 };

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 {