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

src/Selection/index.js

@@ -0,0 +1,62 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+export default () => {
+  const selectionPane = useRef(null);
+  const [rect, setRect] = useState({ x: 0, y: 0, width: 0, height: 0, draw: false });
+
+
+  useEffect(() => {
+    function onMouseDown(evt) {
+      setRect((r) => ({
+        ...r,
+        x: evt.clientX,
+        y: evt.clientY,
+        draw: true
+      }));
+    }
+
+    function onMouseMove(evt) {
+      setRect((r) => ({
+        ...r,
+        width: evt.clientX,
+        height: evt.clientY
+      }));
+    }
+
+    function onMouseUp() {
+      console.log('selection mouse up');
+    }
+
+    function removeAll() {
+      selectionPane.current.removeEventListener('mousedown', onMouseDown);
+      selectionPane.current.removeEventListener('mousemove', onMouseMove);
+      selectionPane.current.removeEventListener('mouseup', onMouseUp);
+    }
+
+    selectionPane.current.addEventListener('mousedown', onMouseDown);
+    selectionPane.current.addEventListener('mousemove', onMouseMove);
+    selectionPane.current.addEventListener('mouseup', onMouseUp);
+
+    return () => {
+      removeAll();
+    };
+  }, []);
+
+  return (
+    <div
+      className="react-graph__selectionpane"
+      ref={selectionPane}
+    >
+      {rect.draw && (
+        <div
+          className="react-graph__selection"
+          style={{
+            width: rect.width,
+            height: rect.height,
+            transform: `translate(${rect.x}px, ${rect.y}px)`
+          }}
+        />
+      )}
+    </div>
+  );
+}

src/hooks.js

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+
+export function useKeyPress(targetKey) {
+  const [keyPressed, setKeyPressed] = useState(false);
+
+  function downHandler({ key }) {
+    if (key === targetKey) {
+      setKeyPressed(true);
+    }
+  }
+
+  const upHandler = ({ key }) => {
+    if (key === targetKey) {
+      setKeyPressed(false);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('keydown', downHandler);
+    window.addEventListener('keyup', upHandler);
+    return () => {
+      window.removeEventListener('keydown', downHandler);
+      window.removeEventListener('keyup', upHandler);
+    };
+  }, []);
+
+  return keyPressed;
+}

src/state/index.js

@@ -1,4 +1,5 @@
 import { zoomIdentity } from 'd3-zoom';
+
 import { getBoundingBox } from '../graph-utils';
 
 export const SET_EDGES = 'SET_EDGES';
@@ -56,9 +57,9 @@ export const reducer = (state, action) => {
       const boundsCenterX = bounds.x + (bounds.width / 2);
       const boundsCenterY = bounds.y + (bounds.height / 2);
       const translate = [(state.width / 2) - (boundsCenterX * k), (state.height / 2) - (boundsCenterY * k)];
-      const initialTransform = zoomIdentity.translate(translate[0], translate[1]).scale(k);
+      const fittedTransform = zoomIdentity.translate(translate[0], translate[1]).scale(k);
 
-      state.d3Selection.call(state.d3Zoom.transform, initialTransform);
+      state.d3Selection.call(state.d3Zoom.transform, fittedTransform);
 
       return state;
     }

src/style.css

@@ -11,12 +11,30 @@
   position: absolute;
 }
 
-.react-graph__zoomnode {
+.react-graph__zoompane {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
+  z-index: 2;
+}
+
+.react-graph__selectionpane {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+}
+
+.react-graph__selection {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgba(0,0,0,0.1);
+  border: 1px solid #222;
 }
 
 .react-graph__edges {
@@ -51,7 +69,7 @@
   transform-origin: 0 0;
 }
 
-.react-graph__nodewrap:hover {
+.react-graph__nodewrap:hover > * {
   box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
 }