feat(nodesselection): zoom- and scalable nodes selection

src/GraphView/index.js

@@ -7,10 +7,11 @@ import { GraphContext } from '../GraphContext';
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
 import UserSelection from '../UserSelection';
+import NodesSelection from '../NodesSelection';
 import { updateTransform, updateSize, initD3, fitView } from '../state/actions';
 import { useKeyPress } from '../hooks';
 
-const d3ZoomInstance = d3Zoom.zoom().scaleExtent([0.5, 2])
+const d3ZoomInstance = d3Zoom.zoom().scaleExtent([0.5, 2]);
 
 const GraphView = (props) => {
   const zoomPane = useRef(null);
@@ -75,6 +76,7 @@ const GraphView = (props) => {
       <NodeRenderer nodeTypes={props.nodeTypes} />
       <EdgeRenderer width={graphContext.state.width} height={graphContext.state.height} />
       {shiftPressed && <UserSelection />}
+      {graphContext.state.nodesSelectionActive && <NodesSelection />}
       <div
         className="react-graph__zoompane"
         ref={zoomPane}

src/NodesSelection/index.js

@@ -0,0 +1,29 @@
+import React, { useContext } from 'react';
+
+import { GraphContext } from '../GraphContext';
+import { setNodesSelection } from '../state/actions';
+
+export default () => {
+  const graphContext = useContext(GraphContext);
+  const { state, dispatch } = graphContext;
+
+  return (
+    <div
+      className="react-graph__nodesselection"
+      style={{
+        transform: `translate(${state.transform[0]}px,${state.transform[1]}px) scale(${state.transform[2]})`
+      }}
+      onClick={() => dispatch(setNodesSelection({ isActive: false }))}
+    >
+      <div
+        className="react-graph__nodesselection-rect"
+        style={{
+          width: state.selectedNodesBbox.width,
+          height: state.selectedNodesBbox.height,
+          top: state.selectedNodesBbox.y,
+          left: state.selectedNodesBbox.x
+        }}
+      />
+    </div>
+  );
+};

src/UserSelection/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState, useContext } from 'react';
 
 import { GraphContext } from '../GraphContext';
-import { updateSelection, setSelection } from '../state/actions';
+import { updateSelection, setSelection, setNodesSelection } from '../state/actions';
 
 const initialRect = {
   startX: 0,
@@ -10,8 +10,7 @@ const initialRect = {
   y: 0,
   width: 0,
   height: 0,
-  draw: false,
-  fixed: false
+  draw: false
 };
 
 function getMousePosition(evt) {
@@ -26,7 +25,7 @@ function getMousePosition(evt) {
 export default () => {
   const selectionPane = useRef(null);
   const [rect, setRect] = useState(initialRect);
-  const { dispatch, state } = useContext(GraphContext);
+  const { dispatch } = useContext(GraphContext);
 
   useEffect(() => {
     function onMouseDown(evt) {
@@ -46,15 +45,13 @@ export default () => {
 
     function onMouseMove(evt) {
       setRect((r) => {
-        const mousePos = getMousePosition(evt);
-
-        const negativeX = mousePos.x < r.startX;
-        const negativeY = mousePos.y < r.startY;
-
         if (!r.draw) {
           return r;
         }
 
+        const mousePos = getMousePosition(evt);
+        const negativeX = mousePos.x < r.startX;
+        const negativeY = mousePos.y < r.startY;
         const nextRect = {
           ...r,
           x: negativeX ? mousePos.x : r.x,
@@ -76,7 +73,8 @@ export default () => {
           fixed: true
         };
 
-        dispatch(updateSelection(nextRect));
+        dispatch(setNodesSelection({ isActive: true, selection: nextRect }));
+        dispatch(setSelection(false));
 
         return nextRect;
       });
@@ -93,9 +91,6 @@ export default () => {
     };
   }, []);
 
-  const selectionRect = rect.fixed ? state.selectedNodesBbox : rect;
-  console.log(selectionRect)
-
   return (
     <div
       className="react-graph__selectionpane"
@@ -105,9 +100,9 @@ export default () => {
         <div
           className="react-graph__selection"
           style={{
-            width: selectionRect.width,
-            height: selectionRect.height,
-            transform: `translate(${selectionRect.x}px, ${selectionRect.y}px)`
+            width: rect.width,
+            height: rect.height,
+            transform: `translate(${rect.x}px, ${rect.y}px)`
           }}
         />
       )}

src/state/actions.js

@@ -1,7 +1,7 @@
 import {
   UPDATE_TRANSFORM, UPDATE_SIZE, SET_NODES, SET_EDGES,
   UPDATE_NODE_DATA, UPDATE_NODE_POS, INIT_D3, FIT_VIEW,
-  UPDATE_SELECTION, SET_SELECTION
+  UPDATE_SELECTION, SET_SELECTION, SET_NODES_SELECTION
 } from './index';
 
 export const updateTransform = (transform) => {
@@ -61,6 +61,10 @@ export const setSelection = (isActive) => {
   return { type: SET_SELECTION, payload: { selectionActive: isActive } };
 };
 
+export const setNodesSelection = ({ isActive, selection }) => {
+  return { type: SET_NODES_SELECTION, payload: { nodesSelectionActive: isActive, selection } };
+};
+
 export const updateSelection = (selection) => {
   return {
     type: UPDATE_SELECTION,

src/state/index.js

@@ -12,6 +12,7 @@ export const INIT_D3 = 'INIT_D3';
 export const FIT_VIEW = 'FIT_VIEW';
 export const UPDATE_SELECTION = 'UPDATE_SELECTION';
 export const SET_SELECTION = 'SET_SELECTION';
+export const SET_NODES_SELECTION = 'SET_NODES_SELECTION';
 
 export const initialState = {
   width: 0,
@@ -26,6 +27,7 @@ export const initialState = {
   d3Selection: null,
   d3Initialised: false,
 
+  nodesSelectionActive: false,
   selectionActive: false,
   selection: {},
 };
@@ -75,20 +77,26 @@ export const reducer = (state, action) => {
     }
     case UPDATE_SELECTION: {
       const selectedNodes = getNodesInside(state.nodes, action.payload.selection, state.transform);
-      const selectedNodesBbox = getBoundingBox(selectedNodes);
       const selectedNodeIds = selectedNodes.map(n => n.data.id);
 
-      const bboxPos = {
-        x: ((selectedNodesBbox.x * state.transform[2]) + (state.transform[0] * (1 / 1.0))),
-        y: ((selectedNodesBbox.y * state.transform[2]) + (state.transform[1] * (1 / 1.0)))
-      };
-      let bboxWidth = (selectedNodesBbox.width * state.transform[2]) + 10;
-      let bboxHeight = (selectedNodesBbox.height * state.transform[2]) + 10;
+      return { ...state, ...action.payload, selectedNodeIds };
+    }
+    case SET_NODES_SELECTION: {
+      if (!action.payload.nodesSelectionActive) {
+        return { ...state, nodesSelectionActive: false, selectedNodeIds: [] };
+      }
+      const selectedNodes = getNodesInside(state.nodes, action.payload.selection, state.transform);
+      const selectedNodesBbox = getBoundingBox(selectedNodes);
 
-      bboxPos.x -= 5;
-      bboxPos.y -= 5;
+      // const bboxPos = {
+      //   left: ((selectedNodesBbox.x * state.transform[2]) + (state.transform[0] * (1 / 1.0))),
+      //   top: ((selectedNodesBbox.y * state.transform[2]) + (state.transform[1] * (1 / 1.0)))
+      // };
+      // let bboxWidth = (selectedNodesBbox.width * state.transform[2]) + 10;
+      // let bboxHeight = (selectedNodesBbox.height * state.transform[2]) + 10;
 
-      return { ...state, ...action.payload, selectedNodeIds, selectedNodesBbox: { ...bboxPos, width: bboxWidth, height: bboxHeight } };
+
+      return { ...state, ...action.payload, selectedNodesBbox };
     }
     case SET_NODES:
     case SET_EDGES:

src/style.css

@@ -84,4 +84,21 @@
   background: #222;
   left: 50%;
   border-radius: 50%;
+}
+
+.react-graph__nodesselection {
+  z-index: 3;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  transform-origin: left top;
+  pointer-events: none;
+}
+
+.react-graph__nodesselection-rect {
+  position: absolute;
+  background: rgba(0, 89, 220, 0.08);
+  border: 1px dotted rgba(0, 89, 220, 0.8);
 }