fix(test): selection

cypress/integration/flow/basic.spec.js

@@ -20,17 +20,21 @@ describe('Basic Flow Rendering', () => {
     cy.get('.react-graph__node:first').should('not.have.class', 'selected');
   });
 
-  it('select all nodes', () => {
+  it('selects all nodes', () => {
-    // @FIX: why is there no selection__pane visible?
-    // https://docs.cypress.io/api/commands/type.html#Do-a-shift-click
     cy.get('body')
-      .type('{shift}', { release: false })
+      .type('{Shift}', { release: false })
       .get('.react-graph__selectionpane')
       .trigger('mousedown', 'topLeft', { which: 1, force: true })
       .trigger('mousemove', 'bottomRight', { which: 1 })
-      .trigger('mouseup', 'bottomRight', { force: true });
+      .trigger('mouseup', 'bottomRight', { force: true })
+      .get('.react-graph__node')
+      .should('have.class', 'selected')
+      .get('.react-graph__nodesselection-rect');
+  });
 
-    cy.get('.react-graph__node').should('have.class', 'selected');
+  it('remove selection', () => {
+    cy.get('.react-graph__renderer').click('bottomRight');
+    cy.get('.react-graph__nodesselection-rect').should('not.exist');
   });
 
   it('selects an edge', () => {
@@ -55,7 +59,7 @@ describe('Basic Flow Rendering', () => {
     cy.get('.react-graph__edge').should('have.length', 1);
   });
 
-  it('connect nodes', () => {
+  it('connects nodes', () => {
     cy.get('.react-graph__node')
       .contains('Node 3')
       .find('.react-graph__handle.source')

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',
+  deleteKeyCode: 8,
-  selectionKey: 'Shift'
+  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 }) {
+  function downHandler(evt) {
-    if (key === targetKey && !isInputNode(target)) {
+    console.log(keyCode, evt.keyCode);
+    if (evt.keyCode === keyCode && !isInputNode(evt.target)) {
       setKeyPressed(true);
     }
   }
 
-  const upHandler = ({ key, target }) => {
+  const upHandler = (evt) => {
-    if (key === targetKey && !isInputNode(target)) {
+    if (evt.keyCode === keyCode && !isInputNode(evt.target)) {
       setKeyPressed(false);
     }
   };