feat(editor): selectionKey as prop

xyflow · Oct 3, 2019 · 5dd8d6a · 5dd8d6a
1 parent 5ffe4f9
commit 5dd8d6a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git 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
@@ -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;