fix(test): selection

src/GlobalKeyHandler/index.js

@@ -4,13 +4,13 @@ import { useStoreState, useStoreActions } from 'easy-peasy';
 import useKeyPress from '../hooks/useKeyPress';
 import { isEdge, getConnectedEdges } from '../graph-utils';
 
-export default memo(({ deleteKey, onElementsRemove }) => {
+export default memo(({ deleteKeyCode, onElementsRemove }) => {
   const state = useStoreState(s => ({ selectedElements: s.selectedElements, edges: s.edges }))
   const setNodesSelection = useStoreActions(a => a.setNodesSelection);
-  const removePressed = useKeyPress(deleteKey);
+  const deleteKeyPressed = useKeyPress(deleteKeyCode);
 
   useEffect(() => {
-    if (removePressed && state.selectedElements.length) {
+    if (deleteKeyPressed && state.selectedElements.length) {
       let elementsToRemove = state.selectedElements;
 
       // we also want to remove the edges if only one node is selected
@@ -22,7 +22,7 @@ export default memo(({ deleteKey, onElementsRemove }) => {
       onElementsRemove(elementsToRemove);
       setNodesSelection({ isActive: false });
     }
-  }, [removePressed])
+  }, [deleteKeyPressed])
 
   return null;
 });

src/GraphView/index.js

@@ -13,7 +13,7 @@ import { fitView, zoomIn, zoomOut } from '../graph-utils';
 const GraphView = memo(({
   nodeTypes, edgeTypes, onMove, onLoad,
   onElementClick, onNodeDragStop, connectionLineType, connectionLineStyle,
-  selectionKey
+  selectionKeyCode
 }) => {
   const zoomPane = useRef();
   const rendererNode = useRef();
@@ -28,7 +28,7 @@ const GraphView = memo(({
   const updateSize = useStoreActions(actions => actions.updateSize);
   const setNodesSelection = useStoreActions(actions => actions.setNodesSelection);
 
-  const selectionKeyPressed = useKeyPress(selectionKey);
+  const selectionKeyPressed = useKeyPress(selectionKeyCode);
   const updateDimensions = () => {
     const size = getDimensions(rendererNode.current);
     updateSize(size);

src/ReactGraph/index.js

@@ -27,7 +27,7 @@ const ReactGraph = ({
   style, onElementClick, elements, children,
   nodeTypes, edgeTypes, onLoad, onMove, onElementsRemove,
   onConnect, onNodeDragStop, connectionLineType, connectionLineStyle,
-  deleteKey, selectionKey
+  deleteKeyCode, selectionKeyCode
 }) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
@@ -45,11 +45,11 @@ const ReactGraph = ({
           edgeTypes={edgeTypesParsed}
           connectionLineType={connectionLineType}
           connectionLineStyle={connectionLineStyle}
-          selectionKey={selectionKey}
+          selectionKeyCode={selectionKeyCode}
         />
         <GlobalKeyHandler
           onElementsRemove={onElementsRemove}
-          deleteKey={deleteKey}
+          deleteKeyCode={deleteKeyCode}
         />
         {children}
       </StoreProvider>
@@ -78,8 +78,8 @@ ReactGraph.defaultProps = {
   },
   connectionLineType: 'bezier',
   connectionLineStyle: {},
-  deleteKey: 'Backspace',
-  selectionKey: 'Shift'
+  deleteKeyCode: 8,
+  selectionKeyCode: 16
 };
 
 export default ReactGraph;

src/hooks/useKeyPress.js

@@ -2,17 +2,18 @@ import { useState, useEffect } from 'react';
 
 import { isInputNode } from '../utils';
 
-export default function useKeyPress(targetKey) {
+export default function useKeyPress(keyCode) {
   const [keyPressed, setKeyPressed] = useState(false);
 
-  function downHandler({ key, target }) {
-    if (key === targetKey && !isInputNode(target)) {
+  function downHandler(evt) {
+    console.log(keyCode, evt.keyCode);
+    if (evt.keyCode === keyCode && !isInputNode(evt.target)) {
       setKeyPressed(true);
     }
   }
 
-  const upHandler = ({ key, target }) => {
-    if (key === targetKey && !isInputNode(target)) {
+  const upHandler = (evt) => {
+    if (evt.keyCode === keyCode && !isInputNode(evt.target)) {
       setKeyPressed(false);
     }
   };