feat(nodes): add selection

src/GraphView/index.js

@@ -6,17 +6,28 @@ import ReactSizeMe from 'react-sizeme';
 import { GraphContext } from '../GraphContext';
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
+import Selection from '../Selection';
 import { updateTransform, updateSize, initD3, fitView } from '../state/actions';
+import { useKeyPress } from '../hooks';
+
+const d3ZoomInstance = d3Zoom.zoom().scaleExtent([0.5, 2])
 
 const GraphView = (props) => {
-  const zoomNode = useRef(null);
+  const zoomPane = useRef(null);
   const graphContext = useContext(GraphContext);
+  const shiftPressed = useKeyPress('Shift');
 
   useEffect(() => {
-    const zoom = d3Zoom.zoom()
-      .scaleExtent([0.5, 2])
-      .on('zoom', () => {
-        if (event.sourceEvent && event.sourceEvent.target !== zoomNode.current) {
+    const selection = select(zoomPane.current).call(d3ZoomInstance);
+    graphContext.dispatch(initD3({ zoom: d3ZoomInstance, selection }));
+  }, []);
+
+  useEffect(() => {
+    if (shiftPressed) {
+      d3ZoomInstance.on('zoom', null);
+    } else {
+      d3ZoomInstance.on('zoom', () => {
+        if (event.sourceEvent && event.sourceEvent.target !== zoomPane.current) {
           return false;
         }
 
@@ -25,10 +36,17 @@ const GraphView = (props) => {
         props.onMove();
       });
 
-    const selection = select(zoomNode.current).call(zoom);
+      if (graphContext.state.d3Selection) {
+        // we need to restore the graph transform otherwise d3 zoom transform and graph transform are not synced
+        const graphTransform = d3Zoom.zoomIdentity
+            .translate(graphContext.state.transform[0], graphContext.state.transform[1])
+            .scale(graphContext.state.transform[2]);
 
-    graphContext.dispatch(initD3({ zoom, selection }));
-  }, []);
+        graphContext.state.d3Selection.call(graphContext.state.d3Zoom.transform, graphTransform);
+      }
+    }
+
+  }, [shiftPressed]);
 
   useEffect(
     () => graphContext.dispatch(updateSize(props.size)),
@@ -50,13 +68,17 @@ const GraphView = (props) => {
       nodes: graphContext.state.nodes,
       edges: graphContext.state.edges,
     });
-  })
+  });
 
   return (
     <div className="react-graph__renderer">
       <NodeRenderer nodeTypes={props.nodeTypes} />
       <EdgeRenderer width={graphContext.state.width} height={graphContext.state.height} />
-      <div className="react-graph__zoomnode" ref={zoomNode} />
+      {shiftPressed && <Selection />}
+      <div
+        className="react-graph__zoompane"
+        ref={zoomPane}
+      />
     </div>
   );
 };