feat(selection): fixed selection

src/NodeRenderer/NodeTypes/wrapNode.js

@@ -16,7 +16,7 @@ export default NodeComponent => (props) => {
   const { position } = __rg;
   const { id } = data;
   const [ x, y, k ] = graphContext.state.transform;
-  const selected = graphContext.state.selectedNodes.includes(id);
+  const selected = graphContext.state.selectedNodeIds.includes(id);
   const nodeClasses = cx('react-graph__node', { selected });
 
   useEffect(() => {

src/Selection/index.js

@@ -10,13 +10,14 @@ const initialRect = {
   y: 0,
   width: 0,
   height: 0,
-  draw: false
+  draw: false,
+  fixed: false
 };
 
 export default () => {
   const selectionPane = useRef(null);
   const [rect, setRect] = useState(initialRect);
-  const { dispatch } = useContext(GraphContext);
+  const { dispatch, state } = useContext(GraphContext);
 
   useEffect(() => {
     function onMouseDown(evt) {
@@ -56,8 +57,16 @@ export default () => {
     }
 
     function onMouseUp() {
-      setRect(initialRect);
+      setRect((r) => {
-      dispatch(setSelection(false));
+        const nextRect = {
+          ...r,
+          fixed: true
+        };
+
+        dispatch(updateSelection(nextRect));
+
+        return nextRect;
+      });
     }
 
     selectionPane.current.addEventListener('mousedown', onMouseDown);
@@ -71,18 +80,21 @@ export default () => {
     };
   }, []);
 
+  const selectionRect = rect.fixed ? state.selectedNodesBbox : rect;
+  console.log(selectionRect)
+
   return (
     <div
       className="react-graph__selectionpane"
       ref={selectionPane}
     >
-      {rect.draw && (
+      {selectionRect.draw && (
         <div
           className="react-graph__selection"
           style={{
-            width: rect.width,
+            width: selectionRect.width,
-            height: rect.height,
+            height: selectionRect.height,
-            transform: `translate(${rect.x}px, ${rect.y}px)`
+            transform: `translate(${selectionRect.x}px, ${selectionRect.y}px)`
           }}
         />
       )}

src/state/index.js

@@ -19,14 +19,15 @@ export const initialState = {
   transform: [0, 0, 1],
   nodes: [],
   edges: [],
-  selectedNodes: [],
+  selectedNodeIds: [],
+  selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
 
   d3Zoom: null,
   d3Selection: null,
   d3Initialised: false,
 
   selectionActive: false,
-  selection: {}
+  selection: {},
 };
 
 export const reducer = (state, action) => {
@@ -73,8 +74,11 @@ export const reducer = (state, action) => {
       return state;
     }
     case UPDATE_SELECTION: {
-      const selectedNodes = getNodesInside(state.nodes, action.payload.selection, state.transform).map(n => n.data.id);
+      const selectedNodes = getNodesInside(state.nodes, action.payload.selection, state.transform);
-      return { ...state, ...action.payload, selectedNodes };
+      const selectedNodesBbox = getBoundingBox(selectedNodes);
+      const selectedNodeIds = selectedNodes.map(n => n.data.id);
+
+      return { ...state, ...action.payload, selectedNodeIds, selectedNodesBbox };
     }
     case SET_NODES:
     case SET_EDGES: