From 5dd8d6a8048bcbc250d2d30712ebc87017e2ce8a Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 3 Oct 2019 17:47:34 +0200
Subject: [PATCH] feat(editor): selectionKey as prop

---
 src/GraphView/index.js  | 6 +++---
 src/ReactGraph/index.js | 6 ++++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/GraphView/index.js b/src/GraphView/index.js
index 0b2789f2..346c5555 100644
--- a/src/GraphView/index.js
+++ b/src/GraphView/index.js
@@ -24,7 +24,7 @@ const GraphView = memo((props) => {
   const updateSize = useStoreActions(actions => actions.updateSize);
   const setNodesSelection = useStoreActions(actions => actions.setNodesSelection);
 
-  const shiftPressed = useKeyPress('Shift');
+  const selectionKeyPressed = useKeyPress(props.selectionKey);
   const updateDimensions = () => {
     const size = getDimensions(rendererNode.current);
     updateSize(size);
@@ -39,7 +39,7 @@ const GraphView = memo((props) => {
     };
   }, []);
 
-  useD3Zoom(zoomPane, props.onMove, shiftPressed);
+  useD3Zoom(zoomPane, props.onMove, selectionKeyPressed);
 
   useEffect(() => {
     if (state.d3Initialised) {
@@ -66,7 +66,7 @@ const GraphView = memo((props) => {
         connectionLineType={props.connectionLineType}
         connectionLineStyle={props.connectionLineStyle}
       />
-      {shiftPressed && <UserSelection />}
+      {selectionKeyPressed && <UserSelection />}
       {state.nodesSelectionActive && <NodesSelection />}
       <div
         className="react-graph__zoompane"
diff --git a/src/ReactGraph/index.js b/src/ReactGraph/index.js
index d07739ac..15c54a50 100644
--- a/src/ReactGraph/index.js
+++ b/src/ReactGraph/index.js
@@ -27,7 +27,7 @@ const ReactGraph = ({
   style, onElementClick, elements, children,
   nodeTypes, edgeTypes, onLoad, onMove, onElementsRemove,
   onConnect, onNodeDragStop, connectionLineType, connectionLineStyle,
-  deleteKey
+  deleteKey, selectionKey
 }) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
@@ -45,6 +45,7 @@ const ReactGraph = ({
           edgeTypes={edgeTypesParsed}
           connectionLineType={connectionLineType}
           connectionLineStyle={connectionLineStyle}
+          selectionKey={selectionKey}
         />
         <GlobalKeyHandler
           onElementsRemove={onElementsRemove}
@@ -77,7 +78,8 @@ ReactGraph.defaultProps = {
   },
   connectionLineType: 'bezier',
   connectionLineStyle: {},
-  deleteKey: 'Backspace'
+  deleteKey: 'Backspace',
+  selectionKey: 'Shift'
 };
 
 export default ReactGraph;