From b95883a358d8422367d8ba6477cdf3d07e358e80 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 3 Oct 2019 23:23:10 +0200 Subject: [PATCH] fix(test): selection --- cypress/integration/flow/basic.spec.js | 18 +++++++++++------- src/GlobalKeyHandler/index.js | 8 ++++---- src/GraphView/index.js | 4 ++-- src/ReactGraph/index.js | 10 +++++----- src/hooks/useKeyPress.js | 11 ++++++----- 5 files changed, 28 insertions(+), 23 deletions(-) diff --git a/cypress/integration/flow/basic.spec.js b/cypress/integration/flow/basic.spec.js index 08fa1f26..7ac6c357 100644 --- a/cypress/integration/flow/basic.spec.js +++ b/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', () => { - // @FIX: why is there no selection__pane visible? - // https://docs.cypress.io/api/commands/type.html#Do-a-shift-click + it('selects all nodes', () => { 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') diff --git a/src/GlobalKeyHandler/index.js b/src/GlobalKeyHandler/index.js index 666cbcad..3d12e9fb 100644 --- a/src/GlobalKeyHandler/index.js +++ b/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; }); diff --git a/src/GraphView/index.js b/src/GraphView/index.js index fd95e9dc..1e3f1d88 100644 --- a/src/GraphView/index.js +++ b/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); diff --git a/src/ReactGraph/index.js b/src/ReactGraph/index.js index 15c54a50..acc83e7c 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, 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} /> {children} @@ -78,8 +78,8 @@ ReactGraph.defaultProps = { }, connectionLineType: 'bezier', connectionLineStyle: {}, - deleteKey: 'Backspace', - selectionKey: 'Shift' + deleteKeyCode: 8, + selectionKeyCode: 16 }; export default ReactGraph; diff --git a/src/hooks/useKeyPress.js b/src/hooks/useKeyPress.js index 22739b8f..32a563ad 100644 --- a/src/hooks/useKeyPress.js +++ b/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); } };