feat(nodesselection): zoom- and scalable nodes selection

dist/ReactGraph.js

@@ -29797,6 +29797,7 @@
   var FIT_VIEW = 'FIT_VIEW';
   var UPDATE_SELECTION = 'UPDATE_SELECTION';
   var SET_SELECTION = 'SET_SELECTION';
+  var SET_NODES_SELECTION = 'SET_NODES_SELECTION';
   var initialState = {
     width: 0,
     height: 0,
@@ -29813,6 +29814,7 @@
     d3Zoom: null,
     d3Selection: null,
     d3Initialised: false,
+    nodesSelectionActive: false,
     selectionActive: false,
     selection: {}
   };
@@ -29861,24 +29863,34 @@
       case UPDATE_SELECTION:
         {
           var selectedNodes = getNodesInside(state.nodes, action.payload.selection, state.transform);
-          var selectedNodesBbox = getBoundingBox(selectedNodes);
           var selectedNodeIds = selectedNodes.map(function (n) {
             return n.data.id;
           });
-          var 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)
-          };
-          var bboxWidth = selectedNodesBbox.width * state.transform[2] + 10;
-          var bboxHeight = selectedNodesBbox.height * state.transform[2] + 10;
-          bboxPos.x -= 5;
-          bboxPos.y -= 5;
           return _objectSpread2({}, state, {}, action.payload, {
-            selectedNodeIds: selectedNodeIds,
+            selectedNodeIds: selectedNodeIds
-            selectedNodesBbox: _objectSpread2({}, bboxPos, {
+          });
-              width: bboxWidth,
+        }
-              height: bboxHeight
+
-            })
+      case SET_NODES_SELECTION:
+        {
+          if (!action.payload.nodesSelectionActive) {
+            return _objectSpread2({}, state, {
+              nodesSelectionActive: false,
+              selectedNodeIds: []
+            });
+          }
+
+          var _selectedNodes = getNodesInside(state.nodes, action.payload.selection, state.transform);
+
+          var selectedNodesBbox = getBoundingBox(_selectedNodes); // 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 _objectSpread2({}, state, {}, action.payload, {
+            selectedNodesBbox: selectedNodesBbox
           });
         }
 
@@ -29968,6 +29980,17 @@
       }
     };
   };
+  var setNodesSelection = function setNodesSelection(_ref2) {
+    var isActive = _ref2.isActive,
+        selection = _ref2.selection;
+    return {
+      type: SET_NODES_SELECTION,
+      payload: {
+        nodesSelectionActive: isActive,
+        selection: selection
+      }
+    };
+  };
   var updateSelection = function updateSelection(selection) {
     return {
       type: UPDATE_SELECTION,
@@ -30163,8 +30186,7 @@
     y: 0,
     width: 0,
     height: 0,
-    draw: false,
+    draw: false
-    fixed: false
   };
 
   function getMousePosition(evt) {
@@ -30184,8 +30206,7 @@
         setRect = _useState2[1];
 
     var _useContext = React.useContext(GraphContext),
-        dispatch = _useContext.dispatch,
+        dispatch = _useContext.dispatch;
-        state = _useContext.state;
 
     React.useEffect(function () {
       function onMouseDown(evt) {
@@ -30204,14 +30225,14 @@
 
       function onMouseMove(evt) {
         setRect(function (r) {
-          var mousePos = getMousePosition(evt);
-          var negativeX = mousePos.x < r.startX;
-          var negativeY = mousePos.y < r.startY;
-
           if (!r.draw) {
             return r;
           }
 
+          var mousePos = getMousePosition(evt);
+          var negativeX = mousePos.x < r.startX;
+          var negativeY = mousePos.y < r.startY;
+
           var nextRect = _objectSpread2({}, r, {
             x: negativeX ? mousePos.x : r.x,
             y: negativeY ? mousePos.y : r.y,
@@ -30230,7 +30251,11 @@
             fixed: true
           });
 
-          dispatch(updateSelection(nextRect));
+          dispatch(setNodesSelection({
+            isActive: true,
+            selection: nextRect
+          }));
+          dispatch(setSelection(false));
           return nextRect;
         });
       }
@@ -30244,17 +30269,40 @@
         selectionPane.current.removeEventListener('mouseup', onMouseUp);
       };
     }, []);
-    var selectionRect = rect.fixed ? state.selectedNodesBbox : rect;
-    console.log(selectionRect);
     return React__default.createElement("div", {
       className: "react-graph__selectionpane",
       ref: selectionPane
     }, (rect.draw || rect.fixed) && React__default.createElement("div", {
       className: "react-graph__selection",
       style: {
-        width: selectionRect.width,
+        width: rect.width,
-        height: selectionRect.height,
+        height: rect.height,
-        transform: "translate(".concat(selectionRect.x, "px, ").concat(selectionRect.y, "px)")
+        transform: "translate(".concat(rect.x, "px, ").concat(rect.y, "px)")
+      }
+    }));
+  });
+
+  var NodesSelection = (function () {
+    var graphContext = React.useContext(GraphContext);
+    var state = graphContext.state,
+        dispatch = graphContext.dispatch;
+    return React__default.createElement("div", {
+      className: "react-graph__nodesselection",
+      style: {
+        transform: "translate(".concat(state.transform[0], "px,").concat(state.transform[1], "px) scale(").concat(state.transform[2], ")")
+      },
+      onClick: function onClick() {
+        return dispatch(setNodesSelection({
+          isActive: false
+        }));
+      }
+    }, React__default.createElement("div", {
+      className: "react-graph__nodesselection-rect",
+      style: {
+        width: state.selectedNodesBbox.width,
+        height: state.selectedNodesBbox.height,
+        top: state.selectedNodesBbox.y,
+        left: state.selectedNodesBbox.x
       }
     }));
   });
@@ -30352,7 +30400,7 @@
     }), React__default.createElement(EdgeRenderer, {
       width: graphContext.state.width,
       height: graphContext.state.height
-    }), shiftPressed && React__default.createElement(UserSelection, null), React__default.createElement("div", {
+    }), shiftPressed && React__default.createElement(UserSelection, null), graphContext.state.nodesSelectionActive && React__default.createElement(NodesSelection, null), React__default.createElement("div", {
       className: "react-graph__zoompane",
       ref: zoomPane
     }));
@@ -32824,7 +32872,7 @@
     }
   }
 
-  var css = ".react-graph {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.react-graph__renderer {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.react-graph__zoompane {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n}\n\n.react-graph__selectionpane {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n}\n\n.react-graph__selection {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background: rgba(0, 89, 220, 0.08);\n  border: 1px dotted rgba(0, 89, 220, 0.8);\n}\n\n.react-graph__edges {\n  pointer-events: none;\n}\n\n.react-graph__edge {\n  fill: none;\n  stroke: #333;\n  stroke-width: 2;\n}\n\n.react-graph__nodes {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  z-index: 2;\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n\n.react-graph__node {\n  position: absolute;\n  color: #222;\n  font-family: sans-serif;\n  font-size: 12px;\n  text-align: center;\n  cursor: -webkit-grab;\n  cursor: grab;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n}\n\n.react-graph__node:hover > * {\n  box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n}\n\n.react-graph__node.selected > * {\n  box-shadow: 0 0 0 2px #000;\n}\n\n.react-graph__handle {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  transform: translate(-50%, -50%);\n  background: #222;\n  left: 50%;\n  border-radius: 50%;\n}";
+  var css = ".react-graph {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.react-graph__renderer {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.react-graph__zoompane {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n}\n\n.react-graph__selectionpane {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n}\n\n.react-graph__selection {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background: rgba(0, 89, 220, 0.08);\n  border: 1px dotted rgba(0, 89, 220, 0.8);\n}\n\n.react-graph__edges {\n  pointer-events: none;\n}\n\n.react-graph__edge {\n  fill: none;\n  stroke: #333;\n  stroke-width: 2;\n}\n\n.react-graph__nodes {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  z-index: 2;\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n\n.react-graph__node {\n  position: absolute;\n  color: #222;\n  font-family: sans-serif;\n  font-size: 12px;\n  text-align: center;\n  cursor: -webkit-grab;\n  cursor: grab;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n}\n\n.react-graph__node:hover > * {\n  box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n}\n\n.react-graph__node.selected > * {\n  box-shadow: 0 0 0 2px #000;\n}\n\n.react-graph__handle {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  transform: translate(-50%, -50%);\n  background: #222;\n  left: 50%;\n  border-radius: 50%;\n}\n\n.react-graph__nodesselection {\n  z-index: 3;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  transform-origin: left top;\n  pointer-events: none;\n}\n\n.react-graph__nodesselection-rect {\n  position: absolute;\n  background: rgba(0, 89, 220, 0.08);\n  border: 1px dotted rgba(0, 89, 220, 0.8);\n}";
   styleInject(css);
 
   var ReactGraph =

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,
+  draw: false
-  fixed: 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,
+            width: rect.width,
-            height: selectionRect.height,
+            height: rect.height,
-            transform: `translate(${selectionRect.x}px, ${selectionRect.y}px)`
+            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 = {
+      return { ...state, ...action.payload, selectedNodeIds };
-        x: ((selectedNodesBbox.x * state.transform[2]) + (state.transform[0] * (1 / 1.0))),
+    }
-        y: ((selectedNodesBbox.y * state.transform[2]) + (state.transform[1] * (1 / 1.0)))
+    case SET_NODES_SELECTION: {
-      };
+      if (!action.payload.nodesSelectionActive) {
-      let bboxWidth = (selectedNodesBbox.width * state.transform[2]) + 10;
+        return { ...state, nodesSelectionActive: false, selectedNodeIds: [] };
-      let bboxHeight = (selectedNodesBbox.height * state.transform[2]) + 10;
+      }
+      const selectedNodes = getNodesInside(state.nodes, action.payload.selection, state.transform);
+      const selectedNodesBbox = getBoundingBox(selectedNodes);
 
-      bboxPos.x -= 5;
+      // const bboxPos = {
-      bboxPos.y -= 5;
+      //   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);
 }