From 4ab04a43790f45e47ded214d86817b5b9a941132 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 18 Jul 2019 11:14:11 +0200
Subject: [PATCH] feat(selection): selected nodes rect

---
 src/GraphView/index.js |  2 +-
 src/Selection/index.js |  2 +-
 src/state/index.js     | 12 +++++++++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/GraphView/index.js b/src/GraphView/index.js
index 32a8edc2..5db21b83 100644
--- a/src/GraphView/index.js
+++ b/src/GraphView/index.js
@@ -74,7 +74,7 @@ const GraphView = (props) => {
     <div className="react-graph__renderer">
       <NodeRenderer nodeTypes={props.nodeTypes} />
       <EdgeRenderer width={graphContext.state.width} height={graphContext.state.height} />
-      {shiftPressed && <Selection />}
+      {(shiftPressed || graphContext.state.selectedNodeIds.length) && <Selection />}
       <div
         className="react-graph__zoompane"
         ref={zoomPane}
diff --git a/src/Selection/index.js b/src/Selection/index.js
index 81794caf..10dd8945 100644
--- a/src/Selection/index.js
+++ b/src/Selection/index.js
@@ -88,7 +88,7 @@ export default () => {
       className="react-graph__selectionpane"
       ref={selectionPane}
     >
-      {selectionRect.draw && (
+      {(rect.draw || rect.fixed) && (
         <div
           className="react-graph__selection"
           style={{
diff --git a/src/state/index.js b/src/state/index.js
index debfcd07..8855f1d4 100644
--- a/src/state/index.js
+++ b/src/state/index.js
@@ -78,7 +78,17 @@ export const reducer = (state, action) => {
       const selectedNodesBbox = getBoundingBox(selectedNodes);
       const selectedNodeIds = selectedNodes.map(n => n.data.id);
 
-      return { ...state, ...action.payload, selectedNodeIds, selectedNodesBbox };
+      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;
+
+      bboxPos.x -= 5;
+      bboxPos.y -= 5;
+
+      return { ...state, ...action.payload, selectedNodeIds, selectedNodesBbox: { ...bboxPos, width: bboxWidth, height: bboxHeight } };
     }
     case SET_NODES:
     case SET_EDGES: