alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #330 from wbkd/develop

Browse Source 
Develop
This commit is contained in:
Moritz
2020-07-13 18:03:48 +02:00
committed by GitHub
parent 7a17b88417 152acbe70a
commit 78c667659c
32 changed files with 2063 additions and 1508 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+13 -6
View File
@@ -69,6 +69,10 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
- `onElementsRemove(elements: Elements)`: element remove callback
- `onNodeDragStart(node: Node)`: node drag start callback
- `onNodeDragStop(node: Node)`: node drag stop callback
- `onNodeMouseEnter(evt: MouseEvent, node: Node)`: node mouse enter callback
- `onNodeMouseMove(evt: MouseEvent, node: Node)`: node mouse move callback
- `onNodeMouseLeave(evt: MouseEvent, node: Node)`: node mouse leave callback
- `onNodeContextMenu(evt: MouseEvent, node: Node)`: node context menu callback
- `onConnect({ source, target })`: connect callback
- `onLoad(reactFlowInstance)`: editor load callback
- `onMove()`: move callback
@@ -77,14 +81,16 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
- `edgeTypes`: object with [edge types](#edge-types--custom-edges)
- `style`: css properties
- `className`: additional class name
- `connectionLineType`: connection line type = `straight` or `bezier`
- `connectionLineType`: connection line type = `default` (bezier), `straight`, `step`, `smoothstep`
- `connectionLineStyle`: connection style as svg attributes
- `deleteKeyCode`: default: `8` (delete)
- `selectionKeyCode`: default: `16` (shift)
- `snapToGrid`: default: `false`
- `snapGrid`: [x, y] array - default: `[16, 16]`
- `onlyRenderVisibleNodes`: default: `true`
- `isInteractive`: default: `true`. If the graph is not interactive you can't drag any nodes
- `nodesDraggable`: default: `true`
- `nodesConnectable`: default: `true`
- `elementsSelectable`: default: `true`
- `selectNodesOnDrag`: default: `true`
- `minZoom`: default: `0.5`
- `maxZoom`: default: `2`
@@ -223,7 +229,7 @@ You can find an example of how to implement a custom node with multiple handles
# Edges
React Flow comes with three [edge types](#edge-types--custom-edges) (`straight`, `default`, `step`). As the names indicate, the edges differ in the representation. The default type is a bezier edge. You create edges by adding them to your `elements` array of the `ReactFlow` component.
React Flow comes with three [edge types](#edge-types--custom-edges) (`default`, `straight`, `step`, `smoothstep`). As the names indicate, the edges differ in the representation. The default type is a bezier edge. You create edges by adding them to your `elements` array of the `ReactFlow` component.
Edge example: `{ id: 'e1-2', type: 'straight', source: '1', target: '2', animated: true, label: 'edge label' }`
@@ -246,13 +252,14 @@ You can find an example with lots of different edges in the [edges example](http
### Edge Types & Custom Edges
The basic edge types are `straight`, `default` and `step`. The default `edgeTypes` object looks like this:
The basic edge types are `default` (bezier), `straight`, `step` and `smoothedge`. The default `edgeTypes` object looks like this:
```javascript
{
default: BezierEdge,
straight: StraightEdge,
step: StepEdge
step: StepEdge,
smoothstep: SmoothStepEdge
}
```
@@ -506,7 +513,7 @@ You can find all examples in the [example](example) folder or check out the live
- [provider](https://react-flow.netlify.app/provider)
- [edges](https://react-flow.netlify.app/edges)
- [empty](https://react-flow.netlify.app/empty)
- [inactive](https://react-flow.netlify.app/inactive)
- [interaction](https://react-flow.netlify.app/interaction)
- [provider](https://react-flow.netlify.app/provider)
# Development
cypress/integration/flow/inactive.spec.js
+17 -5
View File
@@ -1,6 +1,6 @@
describe('Inactive Graph Rendering', () => {
describe('Interaction Graph Rendering', () => {
it('renders a graph', () => {
cy.visit('/inactive');
cy.visit('/interaction');
cy.get('.react-flow__renderer');
cy.get('.react-flow__node').should('have.length', 4);
@@ -20,12 +20,24 @@ describe('Inactive Graph Rendering', () => {
it('tries to do a selection', () => {
cy.get('body').type('{shift}', { release: false }).get('.react-flow__selectionpane').should('not.exist');
cy.get('body').type('{shift}', { release: true });
});
it('toggles interactive mode', () => {
cy.get('.react-flow__interactive').click();
it('toggles draggable mode', () => {
cy.get('.react-flow__draggable').click();
});
it('drags a node', () => {
const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
cy.drag('.react-flow__node:first', { x: 325, y: 100 }).then(($el) => {
const styleAfterDrag = $el.css('transform');
expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
});
});
it('toggles selectable mode', () => {
cy.get('.react-flow__selectable').click();
});
it('selects a node by click', () => {
example/src/CustomNode/index.js
+34 -27
View File
@@ -4,9 +4,9 @@ import ReactFlow, { isEdge, removeElements, addEdge, MiniMap, Controls } from 'r
import ColorSelectorNode from './ColorSelectorNode';
const onNodeDragStop = node => console.log('drag stop', node);
const onElementClick = element => console.log('click', element);
const onLoad = reactFlowInstance => console.log('graph loaded:', reactFlowInstance);
const onNodeDragStop = (node) => console.log('drag stop', node);
const onElementClick = (element) => console.log('click', element);
const onLoad = (reactFlowInstance) => console.log('graph loaded:', reactFlowInstance);
const initBgColor = '#f0e742';
@@ -16,39 +16,47 @@ const CustomNodeFlow = () => {
useEffect(() => {
const onChange = (evt) => {
setElements(els => els.map(e => {
if (isEdge(e) || e.id !== '2') {
return e;
}
const color = evt.target.value;
setBgColor(color);
return {
...e,
data: {
...e.data,
color
setElements((els) =>
els.map((e) => {
if (isEdge(e) || e.id !== '2') {
return e;
}
};
}));
const color = evt.target.value;
setBgColor(color);
return {
...e,
data: {
...e.data,
color,
},
};
})
);
};
setElements([
{ id: '1', type: 'input', data: { label: 'An input node' }, position: { x: 0, y: 50 }, sourcePosition: 'right' },
{ id: '2', type: 'selectorNode', data: { onChange: onChange, color: initBgColor }, style: { border: '1px solid #777', padding: 10 }, position: { x: 250, y: 50 } },
{
id: '2',
type: 'selectorNode',
data: { onChange: onChange, color: initBgColor },
style: { border: '1px solid #777', padding: 10 },
position: { x: 250, y: 50 },
},
{ id: '3', type: 'output', data: { label: 'Output A' }, position: { x: 550, y: 25 }, targetPosition: 'left' },
{ id: '4', type: 'output', data: { label: 'Output B' }, position: { x: 550, y: 100 }, targetPosition: 'left' },
{ id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
{ id: 'e2a-3', source: '2__a', target: '3', animated: true, style: { stroke: '#fff' } },
{ id: 'e2b-4', source: '2__b', target: '4', animated: true, style: { stroke: '#fff' } },
])
]);
}, []);
const onElementsRemove = (elementsToRemove) => setElements(els => removeElements(elementsToRemove, els));
const onConnect = (params) => setElements(els => addEdge(params, els));
const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
const onConnect = (params) => setElements((els) => addEdge(params, els));
return (
<ReactFlow
@@ -63,12 +71,11 @@ const CustomNodeFlow = () => {
selectorNode: ColorSelectorNode,
}}
connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
connectionLineType="bezier"
snapToGrid={true}
snapGrid={[16, 16]}
>
<MiniMap
nodeColor={n => {
nodeColor={(n) => {
if (n.type === 'input') return 'blue';
if (n.type === 'selectorNode') return bgColor;
if (n.type === 'output') return 'green';
@@ -77,6 +84,6 @@ const CustomNodeFlow = () => {
<Controls />
</ReactFlow>
);
}
};
export default CustomNodeFlow;
export default CustomNodeFlow;
example/src/Edges/index.js
+17 -9
View File
@@ -4,13 +4,14 @@ import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } fro
import CustomEdge from './CustomEdge';
const onNodeDragStop = node => console.log('drag stop', node);
const onElementClick = element => console.log('click', element);
const onLoad = reactFlowInstance => reactFlowInstance.fitView();
const onNodeDragStop = (node) => console.log('drag stop', node);
const onElementClick = (element) => console.log('click', element);
const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
const initialElements = [
{ id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
{ id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } },
{ id: '3', data: { label: 'Node 3' }, position: { x: 250, y: 200 } },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 300 } },
{ id: '3a', data: { label: 'Node 3a' }, position: { x: 150, y: 300 } },
@@ -19,20 +20,27 @@ const initialElements = [
{ id: '7', type: 'output', data: { label: 'Output 7' }, position: { x: 250, y: 550 } },
{ id: '8', type: 'output', data: { label: 'Output 8' }, position: { x: 525, y: 600 } },
{ id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)' },
{ id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', label: 'smoothstep edge' },
{ id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
{ id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
{ id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } },
{ id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: 'red' } },
{ id: 'e5-6', source: '5', target: '6', label: 'styled label', labelStyle: { fill: 'red', fontWeight: 700 } },
{ id: 'e5-7', source: '5', target: '7', label: 'label with styled bg', labelBgStyle: { fill: '#eee', fillOpacity: 0.7 } },
{
id: 'e5-7',
source: '5',
target: '7',
label: 'label with styled bg',
labelBgStyle: { fill: '#eee', fillOpacity: 0.7 },
},
{ id: 'e5-8', source: '5', target: '8', type: 'custom', label: 'custom edge' },
];
const EdgesFlow = () => {
const [elements, setElements] = useState(initialElements);
const onElementsRemove = (elementsToRemove) => setElements(els => removeElements(elementsToRemove, els));
const onConnect = (params) => setElements(els => addEdge(params, els));
const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
const onConnect = (params) => setElements((els) => addEdge(params, els));
return (
<ReactFlow
@@ -45,7 +53,7 @@ const EdgesFlow = () => {
onLoad={onLoad}
snapToGrid={true}
edgeTypes={{
custom: CustomEdge
custom: CustomEdge,
}}
>
<MiniMap />
@@ -53,6 +61,6 @@ const EdgesFlow = () => {
<Background />
</ReactFlow>
);
}
};
export default EdgesFlow;
export default EdgesFlow;
example/src/Horizontal/index.js
+41 -24
View File
@@ -2,10 +2,25 @@ import React, { useState } from 'react';
import ReactFlow, { removeElements, addEdge } from 'react-flow-renderer';
const onLoad = reactFlowInstance => reactFlowInstance.fitView();
const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
const onNodeMouseEnter = (evt, node) => console.log('mouse enter:', node);
const onNodeMouseMove = (evt, node) => console.log('mouse move:', node);
const onNodeMouseLeave = (evt, node) => console.log('mouse leave:', node);
const onNodeContextMenu = (evt, node) => {
evt.preventDefault();
console.log('context menu:', node);
};
const initialElements = [
{ id: '1', sourcePosition: 'right', type: 'input', className: 'dark-node', data: { label: 'Input' }, position: { x: 0, y: 80 } },
{
id: '1',
sourcePosition: 'right',
type: 'input',
className: 'dark-node',
data: { label: 'Input' },
position: { x: 0, y: 80 },
},
{ id: '2', sourcePosition: 'right', targetPosition: 'left', data: { label: 'A Node' }, position: { x: 250, y: 0 } },
{ id: '3', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 3' }, position: { x: 250, y: 160 } },
{ id: '4', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 4' }, position: { x: 500, y: 0 } },
@@ -14,29 +29,30 @@ const initialElements = [
{ id: '7', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 7' }, position: { x: 750, y: 50 } },
{ id: '8', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 8' }, position: { x: 750, y: 300 } },
{ id: 'e1-2', source: '1', target: '2', animated: true, },
{ id: 'e1-3', source: '1', target: '3', animated: true, },
{ id: 'e1-4', source: '2', target: '4', label: 'edge label' },
{ id: 'e3-5', source: '3', target: '5', animated: true },
{ id: 'e3-6', source: '3', target: '6', animated: true },
{ id: 'e5-7', source: '5', target: '7', animated: true },
{ id: 'e6-8', source: '6', target: '8', animated: true },
{ id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
{ id: 'e1-3', source: '1', type: 'smoothstep', target: '3', animated: true },
{ id: 'e1-4', source: '2', type: 'smoothstep', target: '4', label: 'edge label' },
{ id: 'e3-5', source: '3', type: 'smoothstep', target: '5', animated: true },
{ id: 'e3-6', source: '3', type: 'smoothstep', target: '6', animated: true },
{ id: 'e5-7', source: '5', type: 'smoothstep', target: '7', animated: true },
{ id: 'e6-8', source: '6', type: 'smoothstep', target: '8', animated: true },
];
const HorizontalFlow = () => {
const [elements, setElements] = useState(initialElements);
const onElementsRemove = (elementsToRemove) =>
setElements(els => removeElements(elementsToRemove, els));
const onConnect = (params) => setElements(els => addEdge(params, els));
const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
const onConnect = (params) => setElements((els) => addEdge(params, els));
const changeClassName = () => {
setElements(elms => elms.map(el => {
if (el.type === 'input') {
el.className = el.className ? '' : 'dark-node';
}
setElements((elms) =>
elms.map((el) => {
if (el.type === 'input') {
el.className = el.className ? '' : 'dark-node';
}
return {...el};
}))
}
return { ...el };
})
);
};
return (
<ReactFlow
@@ -45,15 +61,16 @@ const HorizontalFlow = () => {
onConnect={onConnect}
onLoad={onLoad}
selectNodesOnDrag={false}
onNodeMouseEnter={onNodeMouseEnter}
onNodeMouseMove={onNodeMouseMove}
onNodeMouseLeave={onNodeMouseLeave}
onNodeContextMenu={onNodeContextMenu}
>
<button
onClick={changeClassName}
style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}
>
<button onClick={changeClassName} style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}>
change class name
</button>
</ReactFlow>
);
}
};
export default HorizontalFlow;
example/src/Inactive/index.js
-45
View File
@@ -1,45 +0,0 @@
import React, { useState } from 'react';
import ReactFlow, { MiniMap, Controls } from 'react-flow-renderer';
const initialElements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
];
const InactiveFlow = () => {
const [isInteractive, setIsInteractive] = useState(false);
const onToggleInteractive = (evt) => {
setIsInteractive(evt.target.checked);
};
return (
<ReactFlow
elements={initialElements}
isInteractive={isInteractive}
>
<MiniMap />
<Controls />
<div
style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}
>
<label>
interactive
<input
type="checkbox"
checked={isInteractive}
onChange={onToggleInteractive}
className="react-flow__interactive"
/>
</label>
</div>
</ReactFlow>
);
}
export default InactiveFlow;
example/src/Interaction/index.js
+75
View File
@@ -0,0 +1,75 @@
import React, { useState } from 'react';
import ReactFlow, { addEdge, MiniMap, Controls } from 'react-flow-renderer';
const initialElements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
];
const InteractionFlow = () => {
const [elements, setElements] = useState(initialElements);
const onConnect = (params) => setElements((els) => addEdge(params, els));
const [isSelectable, setIsSelectable] = useState(false);
const [isDraggable, setIsDraggable] = useState(false);
const [isConnectable, setIsConnectable] = useState(false);
return (
<ReactFlow
elements={elements}
elementsSelectable={isSelectable}
nodesConnectable={isConnectable}
nodesDraggable={isDraggable}
onConnect={onConnect}
>
<MiniMap />
<Controls />
<div style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}>
<div>
<label htmlFor="draggable">
draggable
<input
id="draggable"
type="checkbox"
checked={isDraggable}
onChange={(evt) => setIsDraggable(evt.target.checked)}
className="react-flow__draggable"
/>
</label>
</div>
<div>
<label htmlFor="connectable">
connectable
<input
id="connectable"
type="checkbox"
checked={isConnectable}
onChange={(evt) => setIsConnectable(evt.target.checked)}
className="react-flow__connectable"
/>
</label>
</div>
<div>
<label htmlFor="selectable">
selectable
<input
id="selectable"
type="checkbox"
checked={isSelectable}
onChange={(evt) => setIsSelectable(evt.target.checked)}
className="react-flow__selectable"
/>
</label>
</div>
</div>
</ReactFlow>
);
};
export default InteractionFlow;
example/src/Overview/index.js
+94 -29
View File
@@ -2,49 +2,118 @@ import React, { useState } from 'react';
import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } from 'react-flow-renderer';
const onNodeDragStart = node => console.log('drag start', node);
const onNodeDragStop = node => console.log('drag stop', node);
const onElementClick = element => console.log('click', element);
const onSelectionChange = elements => console.log('selection change', elements);
const onNodeDragStart = (node) => console.log('drag start', node);
const onNodeDragStop = (node) => console.log('drag stop', node);
const onElementClick = (element) => console.log('click', element);
const onSelectionChange = (elements) => console.log('selection change', elements);
const onLoad = (reactFlowInstance) => {
console.log('graph loaded:', reactFlowInstance);
reactFlowInstance.fitView();
};
const initialElements = [
{ id: '1', type: 'input', data: { label: <>Welcome to <strong>React Flow!</strong></> }, position: { x: 250, y: 0 } },
{ id: '2', data: { label: <>This is a <strong>default node</strong></> }, position: { x: 100, y: 100 } },
{
id: '3', data: { label: <>This one has a <strong>custom style</strong></> }, position: { x: 400, y: 100 },
id: '1',
type: 'input',
data: {
label: (
<>
Welcome to <strong>React Flow!</strong>
</>
),
},
position: { x: 250, y: 0 },
},
{
id: '2',
data: {
label: (
<>
This is a <strong>default node</strong>
</>
),
},
position: { x: 100, y: 100 },
},
{
id: '3',
data: {
label: (
<>
This one has a <strong>custom style</strong>
</>
),
},
position: { x: 400, y: 100 },
style: { background: '#eee', color: '#222', border: '1px solid #bbb', width: 180 },
},
{
id: '4', position: { x: 250, y: 200 },
data: { label: <>You can find the docs on <a href="https://github.com/wbkd/react-flow" target="_blank" rel="noopener noreferrer">Github</a></> }
id: '4',
position: { x: 250, y: 200 },
data: {
label: (
<>
You can find the docs on{' '}
<a href="https://github.com/wbkd/react-flow" target="_blank" rel="noopener noreferrer">
Github
</a>
</>
),
},
},
{
id: '5',
data: {
label: (
<>
Or check out the other <strong>examples</strong>
</>
),
},
position: { x: 250, y: 300 },
},
{
id: '6',
type: 'output',
data: {
label: (
<>
An <strong>output node</strong>
</>
),
},
position: { x: 100, y: 480 },
},
{ id: '5', data: { label: <>Or check out the other <strong>examples</strong></> }, position: { x: 250, y: 300 } },
{ id: '6', type: 'output', data: { label: <>An <strong>output node</strong></> }, position: { x: 100, y: 450 } },
{ id: '7', type: 'output', data: { label: 'Another output node' }, position: { x: 400, y: 450 } },
{ id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
{ id: 'e1-3', source: '1', target: '3' },
{ id: 'e3-4', source: '3', target: '4', animated: true, label: 'animated edge' },
{ id: 'e4-5', source: '4', target: '5', },
{ id: 'e5-6', source: '5', target: '6', },
{ id: 'e5-7', source: '5', target: '7', type: 'step', label: 'a step edge', labelStyle: { fill: 'red', fontWeight: 700 } },
{ id: 'e4-5', source: '4', target: '5' },
{ id: 'e5-6', source: '5', target: '6', type: 'smoothstep', label: 'smooth step edge' },
{
id: 'e5-7',
source: '5',
target: '7',
type: 'step',
label: 'a step edge',
labelStyle: { fill: 'red', fontWeight: 700 },
},
];
const OverviewFlow = () => {
const [elements, setElements] = useState(initialElements);
const addRandomNode = () => {
setElements(els => els.concat({
id: (els.length + 1).toString(),
data: { label: 'Added node' },
position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }
}));
setElements((els) =>
els.concat({
id: (els.length + 1).toString(),
data: { label: 'Added node' },
position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight },
})
);
};
const onElementsRemove = (elementsToRemove) => setElements(els => removeElements(elementsToRemove, els));
const onConnect = (params) => setElements(els => addEdge(params, els));
const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
const onConnect = (params) => setElements((els) => addEdge(params, els));
return (
<ReactFlow
@@ -58,12 +127,11 @@ const OverviewFlow = () => {
style={{ width: '100%', height: '100%' }}
onLoad={onLoad}
connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
connectionLineType="bezier"
snapToGrid={true}
snapGrid={[16, 16]}
>
<MiniMap
nodeColor={n => {
nodeColor={(n) => {
if (n.type === 'input') return 'blue';
if (n.type === 'output') return 'green';
if (n.type === 'default') return 'red';
@@ -72,10 +140,7 @@ const OverviewFlow = () => {
}}
/>
<Controls />
<Background
color="#888"
gap={16}
/>
<Background color="#888" gap={16} />
<button
type="button"
@@ -87,6 +152,6 @@ const OverviewFlow = () => {
</button>
</ReactFlow>
);
}
};
export default OverviewFlow;
export default OverviewFlow;
example/src/index.js
+4 -3
View File
@@ -6,7 +6,7 @@ import Overview from './Overview';
import Basic from './Basic';
import CustomNode from './CustomNode';
import Stress from './Stress';
import Inactive from './Inactive';
import Interaction from './Interaction';
import Empty from './Empty';
import Edges from './Edges';
import Validation from './Validation';
@@ -60,8 +60,9 @@ const routes = [
component: Empty,
},
{
path: '/inactive',
component: Inactive,
path: '/interaction',
component: Interaction,
label: 'Interaction',
},
];
package-lock.json
Generated
+1214 -1256
View File
File diff suppressed because it is too large Load Diff
package.json
+13 -13
View File
@@ -27,44 +27,44 @@
"classnames": "^2.2.6",
"d3-selection": "^1.4.1",
"d3-zoom": "^1.8.3",
"easy-peasy": "^3.3.0",
"easy-peasy": "^3.3.1",
"fast-deep-equal": "^3.1.3",
"react-draggable": "^4.4.3",
"resize-observer": "^1.0.0"
},
"devDependencies": {
"@babel/core": "^7.10.2",
"@babel/preset-env": "^7.10.2",
"@babel/preset-react": "^7.10.1",
"@babel/core": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@svgr/rollup": "^5.4.0",
"@types/classnames": "^2.2.10",
"@types/d3": "^5.7.2",
"@types/react": "^16.9.36",
"@types/react": "^16.9.43",
"@types/react-dom": "^16.9.8",
"autoprefixer": "^9.8.0",
"autoprefixer": "^9.8.5",
"babel-loader": "^8.1.0",
"babel-preset-react-app": "^9.1.2",
"cypress": "^4.8.0",
"postcss-nested": "^4.2.1",
"cypress": "^4.10.0",
"postcss-nested": "^4.2.3",
"prettier": "2.0.5",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"release-it": "^13.6.3",
"rollup": "^2.16.1",
"release-it": "^13.6.5",
"rollup": "^2.21.0",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-livereload": "^1.3.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.2",
"rollup-plugin-peer-deps-external": "^2.2.3",
"rollup-plugin-postcss": "^3.1.2",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^6.1.0",
"rollup-plugin-typescript2": "^0.27.1",
"rollup-plugin-uglify": "^6.0.4",
"start-server-and-test": "^1.11.0",
"typescript": "^3.9.5"
"start-server-and-test": "^1.11.2",
"typescript": "^3.9.6"
},
"peerDependencies": {
"react": "^16.13.1"
src/additional-components/Controls/index.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ const Controls = ({ style, showZoom = true, showFitView = true, showInteractive
const zoomIn = useStoreActions((actions) => actions.zoomIn);
const zoomOut = useStoreActions((actions) => actions.zoomOut);
const isInteractive = useStoreState((s) => s.isInteractive);
const isInteractive = useStoreState((s) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable);
const mapClasses = classnames('react-flow__controls', className);
return (
src/components/ConnectionLine/index.tsx
+44 -12
View File
@@ -1,6 +1,9 @@
import React, { useEffect, useState, CSSProperties } from 'react';
import cx from 'classnames';
import { getBezierPath } from '../Edges/BezierEdge';
import { getStepPath } from '../Edges/StepEdge';
import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
import { ElementId, Node, Transform, HandleElement, Position, ConnectionLineType, HandleType } from '../../types';
interface ConnectionLineProps {
@@ -11,7 +14,7 @@ interface ConnectionLineProps {
connectionLineType: ConnectionLineType;
nodes: Node[];
transform: Transform;
isInteractive: boolean;
isConnectable: boolean;
connectionLineStyle?: CSSProperties;
className?: string;
}
@@ -26,7 +29,7 @@ export default ({
nodes = [],
className,
transform,
isInteractive,
isConnectable,
}: ConnectionLineProps) => {
const [sourceNode, setSourceNode] = useState<Node | null>(null);
const hasHandleId = connectionNodeId.includes('__');
@@ -39,7 +42,7 @@ export default ({
setSourceNode(nextSourceNode);
}, []);
if (!sourceNode || !isInteractive) {
if (!sourceNode || !isConnectable) {
return null;
}
@@ -57,17 +60,46 @@ export default ({
const targetY = (connectionPositionY - transform[1]) * (1 / transform[2]);
let dAttr: string = '';
const xOffset = Math.abs(targetX - sourceX) / 2;
const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
const yOffset = Math.abs(targetY - sourceY) / 2;
const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
const isRightOrLeft = sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right;
const targetPosition = isRightOrLeft ? Position.Left : Position.Top;
if (connectionLineType === ConnectionLineType.Bezier) {
if (sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right) {
const xOffset = Math.abs(targetX - sourceX) / 2;
const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
dAttr = `M${sourceX},${sourceY} C${centerX},${sourceY} ${centerX},${targetY} ${targetX},${targetY}`;
} else {
const yOffset = Math.abs(targetY - sourceY) / 2;
const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
}
dAttr = getBezierPath({
centerX,
centerY,
sourceX,
sourceY,
sourcePosition: sourceHandle?.position,
targetX,
targetY,
targetPosition,
});
} else if (connectionLineType === ConnectionLineType.Step) {
dAttr = getStepPath({
centerY,
sourceX,
sourceY,
targetX,
targetY,
});
} else if (connectionLineType === ConnectionLineType.SmoothStep) {
dAttr = getSmoothStepPath({
xOffset,
yOffset,
centerX,
centerY,
sourceX,
sourceY,
sourcePosition: sourceHandle?.position,
targetX,
targetY,
targetPosition,
});
} else {
dAttr = `M${sourceX},${sourceY} ${targetX},${targetY}`;
}
src/components/Edges/BezierEdge.tsx
+47 -12
View File
@@ -3,6 +3,42 @@ import React, { memo } from 'react';
import EdgeText from './EdgeText';
import { EdgeBezierProps, Position } from '../../types';
interface GetBezierPathParams {
centerX: number;
centerY: number;
sourceX: number;
sourceY: number;
sourcePosition?: Position;
targetX: number;
targetY: number;
targetPosition?: Position;
}
export function getBezierPath({
centerX,
centerY,
sourceX,
sourceY,
sourcePosition = Position.Bottom,
targetX,
targetY,
targetPosition = Position.Top,
}: GetBezierPathParams): string {
let path = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
const leftAndRight = [Position.Left, Position.Right];
if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
path = `M${sourceX},${sourceY} C${centerX},${sourceY} ${centerX},${targetY} ${targetX},${targetY}`;
} else if (leftAndRight.includes(targetPosition)) {
path = `M${sourceX},${sourceY} C${sourceX},${targetY} ${sourceX},${targetY} ${targetX},${targetY}`;
} else if (leftAndRight.includes(sourcePosition)) {
path = `M${sourceX},${sourceY} C${targetX},${sourceY} ${targetX},${sourceY} ${targetX},${targetY}`;
}
return path;
}
export default memo(
({
sourceX,
@@ -23,17 +59,16 @@ export default memo(
const xOffset = Math.abs(targetX - sourceX) / 2;
const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
let dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
const leftAndRight = [Position.Left, Position.Right];
if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
dAttr = `M${sourceX},${sourceY} C${centerX},${sourceY} ${centerX},${targetY} ${targetX},${targetY}`;
} else if (leftAndRight.includes(targetPosition)) {
dAttr = `M${sourceX},${sourceY} C${sourceX},${targetY} ${sourceX},${targetY} ${targetX},${targetY}`;
} else if (leftAndRight.includes(sourcePosition)) {
dAttr = `M${sourceX},${sourceY} C${targetX},${sourceY} ${targetX},${sourceY} ${targetX},${targetY}`;
}
const path = getBezierPath({
centerX,
centerY,
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
});
const text = label ? (
<EdgeText
@@ -48,7 +83,7 @@ export default memo(
return (
<>
<path style={style} d={dAttr} className="react-flow__edge-path" />
<path style={style} d={path} className="react-flow__edge-path" />
{text}
</>
);
src/components/Edges/SmoothStepEdge.tsx
+179
View File
@@ -0,0 +1,179 @@
import React, { memo } from 'react';
import EdgeText from './EdgeText';
import { EdgeBezierProps, Position } from '../../types';
// These are some helper methods for drawing the round corners
// The name indicates the direction of the path. "bottomLeftCorner" goes
// from bottom to the left and "leftBottomCorner" goes from left to the bottom.
// We have to consider the direction of the paths because of the animated lines.
const bottomLeftCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX},${cornerY - cornerSize}Q ${cornerX},${cornerY} ${cornerX + cornerSize},${cornerY}`;
const leftBottomCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX + cornerSize},${cornerY}Q ${cornerX},${cornerY} ${cornerX},${cornerY - cornerSize}`;
const bottomRightCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX},${cornerY - cornerSize}Q ${cornerX},${cornerY} ${cornerX - cornerSize},${cornerY}`;
const rightBottomCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX - cornerSize},${cornerY}Q ${cornerX},${cornerY} ${cornerX},${cornerY - cornerSize}`;
const leftTopCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX + cornerSize},${cornerY}Q ${cornerX},${cornerY} ${cornerX},${cornerY + cornerSize}`;
const topLeftCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX},${cornerY + cornerSize}Q ${cornerX},${cornerY} ${cornerX + cornerSize},${cornerY}`;
const topRightCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX},${cornerY + cornerSize}Q ${cornerX},${cornerY} ${cornerX - cornerSize},${cornerY}`;
const rightTopCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX - cornerSize},${cornerY}Q ${cornerX},${cornerY} ${cornerX},${cornerY + cornerSize}`;
interface GetSmoothStepPathParams {
xOffset: number;
yOffset: number;
centerX: number;
centerY: number;
sourceX: number;
sourceY: number;
sourcePosition?: Position;
targetX: number;
targetY: number;
targetPosition?: Position;
}
export function getSmoothStepPath({
xOffset,
yOffset,
centerX,
centerY,
sourceX,
sourceY,
sourcePosition = Position.Bottom,
targetX,
targetY,
targetPosition = Position.Top,
}: GetSmoothStepPathParams): string {
const cornerWidth = Math.min(5, Math.abs(targetX - sourceX));
const cornerHeight = Math.min(5, Math.abs(targetY - sourceY));
const cornerSize = Math.min(cornerWidth, cornerHeight, xOffset, yOffset);
const leftAndRight = [Position.Left, Position.Right];
let firstCornerPath = null;
let secondCornerPath = null;
// default case: source and target positions are top or bottom
if (sourceX < targetX) {
firstCornerPath =
sourceY < targetY ? bottomLeftCorner(sourceX, centerY, cornerSize) : topLeftCorner(sourceX, centerY, cornerSize);
secondCornerPath =
sourceY < targetY
? rightTopCorner(targetX, centerY, cornerSize)
: rightBottomCorner(targetX, centerY, cornerSize);
} else if (sourceX > targetX) {
firstCornerPath =
sourceY < targetY
? bottomRightCorner(sourceX, centerY, cornerSize)
: topRightCorner(sourceX, centerY, cornerSize);
secondCornerPath =
sourceY < targetY ? leftTopCorner(targetX, centerY, cornerSize) : leftBottomCorner(targetX, centerY, cornerSize);
}
if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
if (sourceX < targetX) {
firstCornerPath =
sourceY < targetY
? rightTopCorner(centerX, sourceY, cornerSize)
: rightBottomCorner(centerX, sourceY, cornerSize);
secondCornerPath =
sourceY < targetY
? bottomLeftCorner(centerX, targetY, cornerSize)
: topLeftCorner(centerX, targetY, cornerSize);
}
} else if (leftAndRight.includes(sourcePosition) && !leftAndRight.includes(targetPosition)) {
if (sourceX < targetX) {
firstCornerPath =
sourceY < targetY
? rightTopCorner(targetX, sourceY, cornerSize)
: rightBottomCorner(targetX, sourceY, cornerSize);
} else if (sourceX > targetX) {
firstCornerPath =
sourceY < targetY
? bottomRightCorner(sourceX, targetY, cornerSize)
: topRightCorner(sourceX, targetY, cornerSize);
}
secondCornerPath = '';
} else if (!leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
if (sourceX < targetX) {
firstCornerPath =
sourceY < targetY
? bottomLeftCorner(sourceX, targetY, cornerSize)
: topLeftCorner(sourceX, targetY, cornerSize);
} else if (sourceX > targetX) {
firstCornerPath =
sourceY < targetY
? bottomRightCorner(sourceX, targetY, cornerSize)
: topRightCorner(sourceX, targetY, cornerSize);
}
secondCornerPath = '';
}
return `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`;
}
export default memo(
({
sourceX,
sourceY,
targetX,
targetY,
label,
labelStyle,
labelShowBg,
labelBgStyle,
style,
sourcePosition = Position.Bottom,
targetPosition = Position.Top,
}: EdgeBezierProps) => {
const yOffset = Math.abs(targetY - sourceY) / 2;
const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
const xOffset = Math.abs(targetX - sourceX) / 2;
const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
const path = getSmoothStepPath({
xOffset,
yOffset,
centerX,
centerY,
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
});
const text = label ? (
<EdgeText
x={centerX}
y={centerY}
label={label}
labelStyle={labelStyle}
labelShowBg={labelShowBg}
labelBgStyle={labelBgStyle}
/>
) : null;
return (
<>
<path style={style} className="react-flow__edge-path" d={path} />
{text}
</>
);
}
);
src/components/Edges/StepEdge.tsx
+15 -5
View File
@@ -3,6 +3,18 @@ import React, { memo } from 'react';
import EdgeText from './EdgeText';
import { EdgeProps } from '../../types';
interface GetStepPathParams {
centerY: number;
sourceX: number;
sourceY: number;
targetX: number;
targetY: number;
}
export function getStepPath({ centerY, sourceX, sourceY, targetX, targetY }: GetStepPathParams): string {
return `M ${sourceX},${sourceY}L ${sourceX},${centerY}L ${targetX},${centerY}L ${targetX},${targetY}`;
}
export default memo(
({ sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, style }: EdgeProps) => {
const yOffset = Math.abs(targetY - sourceY) / 2;
@@ -11,6 +23,8 @@ export default memo(
const xOffset = Math.abs(targetX - sourceX) / 2;
const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
const path = getStepPath({ centerY, sourceX, sourceY, targetX, targetY });
const text = label ? (
<EdgeText
x={centerX}
@@ -24,11 +38,7 @@ export default memo(
return (
<>
<path
style={style}
className="react-flow__edge-path"
d={`M ${sourceX},${sourceY}L ${sourceX},${centerY}L ${targetX},${centerY}L ${targetX},${targetY}`}
/>
<path style={style} className="react-flow__edge-path" d={path} />
{text}
</>
);
src/components/Edges/wrapEdge.tsx
+4 -4
View File
@@ -17,7 +17,7 @@ interface EdgeWrapperProps {
onClick?: (edge: Edge) => void;
animated?: boolean;
selected: boolean;
isInteractive: boolean;
elementsSelectable: boolean;
}
export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
@@ -30,7 +30,7 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
animated,
selected,
onClick,
isInteractive,
elementsSelectable,
label,
labelStyle,
labelShowBg,
@@ -41,10 +41,10 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
const setSelectedElements = useStoreActions((a) => a.setSelectedElements);
const edgeClasses = cx('react-flow__edge', `react-flow__edge-${type}`, className, { selected, animated });
const edgeGroupStyle: CSSProperties = {
pointerEvents: isInteractive ? 'all' : 'none',
pointerEvents: elementsSelectable ? 'all' : 'none',
};
const onEdgeClick = (): void => {
if (!isInteractive) {
if (!elementsSelectable) {
return;
}
src/components/Handle/index.tsx
+5 -2
View File
@@ -1,4 +1,5 @@
import React, { memo, useContext } from 'react';
import classnames from 'classnames';
import { useStoreActions, useStoreState } from '../../store/hooks';
import BaseHandle from './BaseHandle';
@@ -12,6 +13,7 @@ const Handle = memo(
position = Position.Top,
onConnect = () => {},
isValidConnection = () => true,
isConnectable = true,
style,
className,
id,
@@ -24,9 +26,12 @@ const Handle = memo(
onConnectAction(params);
onConnect(params);
};
const handleClasses = classnames(className, { connectable: isConnectable });
return (
<BaseHandle
className={handleClasses}
id={id}
nodeId={nodeId}
setPosition={setPosition}
setConnectionNodeId={setConnectionNodeId}
@@ -35,8 +40,6 @@ const Handle = memo(
position={position}
isValidConnection={isValidConnection}
style={style}
className={className}
id={id}
/>
);
}
src/components/Nodes/DefaultNode.tsx
+9 -7
View File
@@ -3,13 +3,15 @@ import React, { memo } from 'react';
import Handle from '../../components/Handle';
import { NodeProps, Position } from '../../types';
const DefaultNode = memo(({ data, targetPosition = Position.Top, sourcePosition = Position.Bottom }: NodeProps) => (
<>
<Handle type="target" position={targetPosition} />
{data.label}
<Handle type="source" position={sourcePosition} />
</>
));
const DefaultNode = memo(
({ data, isConnectable, targetPosition = Position.Top, sourcePosition = Position.Bottom }: NodeProps) => (
<>
<Handle type="target" position={targetPosition} isConnectable={isConnectable} />
{data.label}
<Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
</>
)
);
DefaultNode.displayName = 'DefaultNode';
src/components/Nodes/InputNode.tsx
+2 -2
View File
@@ -3,10 +3,10 @@ import React, { memo } from 'react';
import Handle from '../../components/Handle';
import { NodeProps, Position } from '../../types';
const InputNode = memo(({ data, sourcePosition = Position.Bottom }: NodeProps) => (
const InputNode = memo(({ data, isConnectable, sourcePosition = Position.Bottom }: NodeProps) => (
<>
{data.label}
<Handle type="source" position={sourcePosition} />
<Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
</>
));
src/components/Nodes/OutputNode.tsx
+2 -2
View File
@@ -3,9 +3,9 @@ import React, { memo } from 'react';
import Handle from '../../components/Handle';
import { NodeProps, Position } from '../../types';
const OutputNode = memo(({ data, targetPosition = Position.Top }: NodeProps) => (
const OutputNode = memo(({ data, isConnectable, targetPosition = Position.Top }: NodeProps) => (
<>
<Handle type="target" position={targetPosition} />
<Handle type="target" position={targetPosition} isConnectable={isConnectable} />
{data.label}
</>
));
src/components/Nodes/wrapNode.tsx
+85 -9
View File
@@ -1,4 +1,14 @@
import React, { useEffect, useRef, useState, memo, ComponentType, CSSProperties } from 'react';
import React, {
useEffect,
useRef,
useState,
memo,
ComponentType,
CSSProperties,
useMemo,
MouseEvent,
useCallback,
} from 'react';
import { DraggableCore } from 'react-draggable';
import cx from 'classnames';
import { ResizeObserver } from 'resize-observer';
@@ -17,6 +27,8 @@ import {
NodePosUpdate,
} from '../../types';
import { noop } from '../../utils';
const getMouseEvent = (evt: MouseEvent | TouchEvent) =>
typeof TouchEvent !== 'undefined' && evt instanceof TouchEvent ? evt.touches[0] : (evt as MouseEvent);
@@ -26,6 +38,7 @@ interface OnDragStartParams {
type: string;
data: any;
selectNodesOnDrag: boolean;
isSelectable: boolean;
setOffset: (pos: XYPosition) => void;
transform: Transform;
position: XYPosition;
@@ -44,6 +57,7 @@ const onStart = ({
transform,
position,
setSelectedElements,
isSelectable,
}: OnDragStartParams): false | void => {
const startEvt = getMouseEvent(evt);
@@ -62,7 +76,7 @@ const onStart = ({
onNodeDragStart(node);
}
if (selectNodesOnDrag) {
if (selectNodesOnDrag && isSelectable) {
setSelectedElements({ id, type } as Node);
}
};
@@ -102,6 +116,7 @@ interface OnDragStopParams {
position: XYPosition;
data: any;
selectNodesOnDrag: boolean;
isSelectable: boolean;
setSelectedElements: (elms: Elements | Node | Edge) => void;
onNodeDragStop?: (node: Node) => void;
onClick?: (node: Node) => void;
@@ -115,6 +130,7 @@ const onStop = ({
isDragging,
setDragging,
selectNodesOnDrag,
isSelectable,
onNodeDragStop,
onClick,
setSelectedElements,
@@ -125,8 +141,7 @@ const onStop = ({
position,
data,
} as Node;
if (!isDragging) {
if (!isDragging && isSelectable) {
if (!selectNodesOnDrag) {
setSelectedElements({ id, type } as Node);
}
@@ -154,11 +169,17 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
yPos,
selected,
onClick,
onMouseEnter,
onMouseMove,
onMouseLeave,
onContextMenu,
onNodeDragStart,
onNodeDragStop,
style,
className,
isInteractive,
isDraggable,
isSelectable,
isConnectable,
selectNodesOnDrag,
sourcePosition,
targetPosition,
@@ -171,12 +192,55 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
const [offset, setOffset] = useState({ x: 0, y: 0 });
const [isDragging, setDragging] = useState(false);
const position = { x: xPos, y: yPos };
const nodeClasses = cx('react-flow__node', `react-flow__node-${type}`, className, { selected });
const nodeClasses = cx('react-flow__node', `react-flow__node-${type}`, className, {
selected,
selectable: isSelectable,
});
const node = { id, type, position, data };
const onMouseEnterHandler = useMemo(() => {
if (!onMouseEnter || isDragging) {
return noop;
}
return (evt: MouseEvent) => onMouseEnter(evt, node);
}, [onMouseEnter, isDragging]);
const onMouseMoveHandler = useMemo(() => {
if (!onMouseMove || isDragging) {
return noop;
}
return (evt: MouseEvent) => onMouseMove(evt, node);
}, [onMouseMove, isDragging]);
const onMouseLeaveHandler = useMemo(() => {
if (!onMouseLeave || isDragging) {
return noop;
}
return (evt: MouseEvent) => onMouseLeave(evt, node);
}, [onMouseLeave, isDragging]);
const onContextMenuHandler = useMemo(() => {
if (!onContextMenu) {
return noop;
}
return (evt: MouseEvent) => onContextMenu(evt, node);
}, [onContextMenu]);
const onSelectNodeHandler = useCallback(() => {
if (!isDraggable && isSelectable) {
setSelectedElements({ id, type } as Node);
}
return noop;
}, [isSelectable, isDraggable, id, type]);
const nodeStyle: CSSProperties = {
zIndex: selected ? 10 : 3,
transform: `translate(${xPos}px,${yPos}px)`,
pointerEvents: isInteractive ? 'all' : 'none',
pointerEvents: isSelectable || isDraggable ? 'all' : 'none',
...style,
};
@@ -208,6 +272,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
onStart({
evt: evt as MouseEvent,
selectNodesOnDrag,
isSelectable,
onNodeDragStart,
id,
type,
@@ -223,6 +288,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
onStop({
onNodeDragStop,
selectNodesOnDrag,
isSelectable,
onClick,
isDragging,
setDragging,
@@ -234,16 +300,26 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
})
}
scale={transform[2]}
disabled={!isInteractive}
disabled={!isDraggable}
cancel=".nodrag"
>
<div className={nodeClasses} ref={nodeElement} style={nodeStyle}>
<div
className={nodeClasses}
ref={nodeElement}
style={nodeStyle}
onMouseEnter={onMouseEnterHandler}
onMouseMove={onMouseMoveHandler}
onMouseLeave={onMouseLeaveHandler}
onContextMenu={onContextMenuHandler}
onClick={onSelectNodeHandler}
>
<Provider value={id}>
<NodeComponent
id={id}
data={data}
type={type}
selected={selected}
isConnectable={isConnectable}
sourcePosition={sourcePosition}
targetPosition={targetPosition}
/>
src/components/UserSelection/index.tsx
+3 -3
View File
@@ -8,7 +8,6 @@ import { useStoreActions, useStoreState } from '../../store/hooks';
import { XYPosition } from '../../types';
type UserSelectionProps = {
isInteractive: boolean;
selectionKeyPressed: boolean;
};
@@ -45,8 +44,9 @@ const SelectionRect = () => {
);
};
export default memo(({ isInteractive, selectionKeyPressed }: UserSelectionProps) => {
export default memo(({ selectionKeyPressed }: UserSelectionProps) => {
const selectionActive = useStoreState((s) => s.selectionActive);
const elementsSelectable = useStoreState((s) => s.elementsSelectable);
const setUserSelection = useStoreActions((a) => a.setUserSelection);
const updateUserSelection = useStoreActions((a) => a.updateUserSelection);
@@ -59,7 +59,7 @@ export default memo(({ isInteractive, selectionKeyPressed }: UserSelectionProps)
}
}, [selectionKeyPressed]);
if (!isInteractive || !renderUserSelectionPane) {
if (!elementsSelectable || !renderUserSelectionPane) {
return null;
}
src/container/EdgeRenderer/index.tsx
+6 -5
View File
@@ -118,7 +118,7 @@ function renderEdge(
props: EdgeRendererProps,
nodes: Node[],
selectedElements: Elements | null,
isInteractive: boolean
elementsSelectable: boolean
) {
const [sourceId, sourceHandleId] = edge.source.split('__');
const [targetId, targetHandleId] = edge.target.split('__');
@@ -181,7 +181,7 @@ function renderEdge(
targetY={targetY}
sourcePosition={sourcePosition}
targetPosition={targetPosition}
isInteractive={isInteractive}
elementsSelectable={elementsSelectable}
/>
);
}
@@ -194,7 +194,8 @@ const EdgeRenderer = memo((props: EdgeRendererProps) => {
const connectionHandleType = useStoreState((s) => s.connectionHandleType);
const connectionPosition = useStoreState((s) => s.connectionPosition);
const selectedElements = useStoreState((s) => s.selectedElements);
const isInteractive = useStoreState((s) => s.isInteractive);
const nodesConnectable = useStoreState((s) => s.nodesConnectable);
const elementsSelectable = useStoreState((s) => s.elementsSelectable);
const { width, height, connectionLineStyle, connectionLineType } = props;
@@ -208,7 +209,7 @@ const EdgeRenderer = memo((props: EdgeRendererProps) => {
return (
<svg width={width} height={height} className="react-flow__edges">
<g transform={transformStyle}>
{edges.map((e: Edge) => renderEdge(e, props, nodes, selectedElements, isInteractive))}
{edges.map((e: Edge) => renderEdge(e, props, nodes, selectedElements, elementsSelectable))}
{renderConnectionLine && (
<ConnectionLine
nodes={nodes}
@@ -219,7 +220,7 @@ const EdgeRenderer = memo((props: EdgeRendererProps) => {
transform={[tX, tY, tScale]}
connectionLineStyle={connectionLineStyle}
connectionLineType={connectionLineType}
isInteractive={isInteractive}
isConnectable={nodesConnectable}
/>
)}
</g>
src/container/EdgeRenderer/utils.ts
+2
View File
@@ -3,6 +3,7 @@ import { ComponentType } from 'react';
import StraightEdge from '../../components/Edges/StraightEdge';
import BezierEdge from '../../components/Edges/BezierEdge';
import StepEdge from '../../components/Edges/StepEdge';
import SmoothStepEdge from '../../components/Edges/SmoothStepEdge';
import wrapEdge from '../../components/Edges/wrapEdge';
import { EdgeTypesType, EdgeCompProps } from '../../types';
@@ -12,6 +13,7 @@ export function createEdgeTypes(edgeTypes: EdgeTypesType): EdgeTypesType {
default: wrapEdge((edgeTypes.default || BezierEdge) as ComponentType<EdgeCompProps>),
straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType<EdgeCompProps>),
step: wrapEdge((edgeTypes.step || StepEdge) as ComponentType<EdgeCompProps>),
smoothstep: wrapEdge((edgeTypes.step || SmoothStepEdge) as ComponentType<EdgeCompProps>),
};
const wrappedTypes = {} as EdgeTypesType;
src/container/GraphView/index.tsx
+34 -10
View File
@@ -1,5 +1,4 @@
import React, { useEffect, useRef, memo, CSSProperties } from 'react';
import classnames from 'classnames';
import React, { useEffect, useRef, memo, CSSProperties, MouseEvent } from 'react';
import { ResizeObserver } from 'resize-observer';
import { useStoreState, useStoreActions } from '../../store/hooks';
@@ -28,6 +27,10 @@ export interface GraphViewProps {
elements: Elements;
onElementClick?: (element: Node | Edge) => void;
onElementsRemove?: (elements: Elements) => void;
onNodeMouseEnter?: (evt: MouseEvent, node: Node) => void;
onNodeMouseMove?: (evt: MouseEvent, node: Node) => void;
onNodeMouseLeave?: (evt: MouseEvent, node: Node) => void;
onNodeContextMenu?: (evt: MouseEvent, node: Node) => void;
onNodeDragStart?: (node: Node) => void;
onNodeDragStop?: (node: Node) => void;
onConnect?: (connection: Connection | Edge) => void;
@@ -42,7 +45,9 @@ export interface GraphViewProps {
snapToGrid: boolean;
snapGrid: [number, number];
onlyRenderVisibleNodes: boolean;
isInteractive: boolean;
nodesDraggable: boolean;
nodesConnectable: boolean;
elementsSelectable: boolean;
selectNodesOnDrag: boolean;
minZoom: number;
maxZoom: number;
@@ -56,6 +61,10 @@ const GraphView = memo(
onMove,
onLoad,
onElementClick,
onNodeMouseEnter,
onNodeMouseMove,
onNodeMouseLeave,
onNodeContextMenu,
onNodeDragStart,
onNodeDragStop,
connectionLineType,
@@ -68,7 +77,9 @@ const GraphView = memo(
snapToGrid,
snapGrid,
onlyRenderVisibleNodes,
isInteractive,
nodesDraggable,
nodesConnectable,
elementsSelectable,
selectNodesOnDrag,
minZoom,
maxZoom,
@@ -84,14 +95,15 @@ const GraphView = memo(
const setNodesSelection = useStoreActions((actions) => actions.setNodesSelection);
const setOnConnect = useStoreActions((a) => a.setOnConnect);
const setSnapGrid = useStoreActions((actions) => actions.setSnapGrid);
const setInteractive = useStoreActions((actions) => actions.setInteractive);
const setNodesDraggable = useStoreActions((actions) => actions.setNodesDraggable);
const setNodesConnectable = useStoreActions((actions) => actions.setNodesConnectable);
const setElementsSelectable = useStoreActions((actions) => actions.setElementsSelectable);
const updateTransform = useStoreActions((actions) => actions.updateTransform);
const setMinMaxZoom = useStoreActions((actions) => actions.setMinMaxZoom);
const fitView = useStoreActions((actions) => actions.fitView);
const zoom = useStoreActions((actions) => actions.zoom);
const selectionKeyPressed = useKeyPress(selectionKeyCode);
const rendererClasses = classnames('react-flow__renderer', { 'is-interactive': isInteractive });
const onZoomPaneClick = () => setNodesSelection({ isActive: false });
@@ -161,8 +173,16 @@ const GraphView = memo(
}, [snapToGrid]);
useEffect(() => {
setInteractive(isInteractive);
}, [isInteractive]);
setNodesDraggable(nodesDraggable);
}, [nodesDraggable]);
useEffect(() => {
setNodesConnectable(nodesConnectable);
}, [nodesConnectable]);
useEffect(() => {
setElementsSelectable(elementsSelectable);
}, [elementsSelectable]);
useEffect(() => {
setMinMaxZoom({ minZoom, maxZoom });
@@ -172,10 +192,14 @@ const GraphView = memo(
useElementUpdater(elements);
return (
<div className={rendererClasses} ref={rendererNode}>
<div className="react-flow__renderer" ref={rendererNode}>
<NodeRenderer
nodeTypes={nodeTypes}
onElementClick={onElementClick}
onNodeMouseEnter={onNodeMouseEnter}
onNodeMouseMove={onNodeMouseMove}
onNodeMouseLeave={onNodeMouseLeave}
onNodeContextMenu={onNodeContextMenu}
onNodeDragStop={onNodeDragStop}
onNodeDragStart={onNodeDragStart}
onlyRenderVisibleNodes={onlyRenderVisibleNodes}
@@ -189,7 +213,7 @@ const GraphView = memo(
connectionLineType={connectionLineType}
connectionLineStyle={connectionLineStyle}
/>
<UserSelection selectionKeyPressed={selectionKeyPressed} isInteractive={isInteractive} />
<UserSelection selectionKeyPressed={selectionKeyPressed} />
{nodesSelectionActive && <NodesSelection />}
<div className="react-flow__zoompane" onClick={onZoomPaneClick} ref={zoomPane} />
</div>
src/container/NodeRenderer/index.tsx
+22 -5
View File
@@ -1,4 +1,4 @@
import React, { memo, ComponentType } from 'react';
import React, { memo, ComponentType, MouseEvent } from 'react';
import { useStoreState } from '../../store/hooks';
import { getNodesInside } from '../../utils/graph';
@@ -8,6 +8,10 @@ interface NodeRendererProps {
nodeTypes: NodeTypesType;
selectNodesOnDrag: boolean;
onElementClick?: (element: Node | Edge) => void;
onNodeMouseEnter?: (evt: MouseEvent, node: Node) => void;
onNodeMouseMove?: (evt: MouseEvent, node: Node) => void;
onNodeMouseLeave?: (evt: MouseEvent, node: Node) => void;
onNodeContextMenu?: (evt: MouseEvent, node: Node) => void;
onNodeDragStart?: (node: Node) => void;
onNodeDragStop?: (node: Node) => void;
onlyRenderVisibleNodes?: boolean;
@@ -18,7 +22,9 @@ function renderNode(
props: NodeRendererProps,
transform: Transform,
selectedElements: Elements | null,
isInteractive: boolean
nodesDraggable: boolean,
nodesConnectable: boolean,
elementsSelectable: boolean
) {
const nodeType = node.type || 'default';
const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
@@ -37,13 +43,19 @@ function renderNode(
xPos={node.__rf.position.x}
yPos={node.__rf.position.y}
onClick={props.onElementClick}
onMouseEnter={props.onNodeMouseEnter}
onMouseMove={props.onNodeMouseMove}
onMouseLeave={props.onNodeMouseLeave}
onContextMenu={props.onNodeContextMenu}
onNodeDragStart={props.onNodeDragStart}
onNodeDragStop={props.onNodeDragStop}
transform={transform}
selected={isSelected}
style={node.style}
className={node.className}
isInteractive={isInteractive}
isDraggable={nodesDraggable}
isSelectable={elementsSelectable}
isConnectable={nodesConnectable}
sourcePosition={node.sourcePosition}
targetPosition={node.targetPosition}
selectNodesOnDrag={props.selectNodesOnDrag}
@@ -57,7 +69,10 @@ const NodeRenderer = memo(({ onlyRenderVisibleNodes = true, ...props }: NodeRend
const selectedElements = useStoreState((s) => s.selectedElements);
const width = useStoreState((s) => s.width);
const height = useStoreState((s) => s.height);
const isInteractive = useStoreState((s) => s.isInteractive);
const nodesDraggable = useStoreState((s) => s.nodesDraggable);
const nodesConnectable = useStoreState((s) => s.nodesConnectable);
const elementsSelectable = useStoreState((s) => s.elementsSelectable);
const [tX, tY, tScale] = transform;
const transformStyle = {
transform: `translate(${tX}px,${tY}px) scale(${tScale})`,
@@ -69,7 +84,9 @@ const NodeRenderer = memo(({ onlyRenderVisibleNodes = true, ...props }: NodeRend
return (
<div className="react-flow__nodes" style={transformStyle}>
{renderNodes.map((node) => renderNode(node, props, transform, selectedElements, isInteractive))}
{renderNodes.map((node) =>
renderNode(node, props, transform, selectedElements, nodesDraggable, nodesConnectable, elementsSelectable)
)}
</div>
);
});
src/container/ReactFlow/index.tsx
+27 -5
View File
@@ -1,4 +1,4 @@
import React, { useMemo, CSSProperties, HTMLAttributes } from 'react';
import React, { useMemo, CSSProperties, HTMLAttributes, MouseEvent } from 'react';
import cx from 'classnames';
const nodeEnv: string = process.env.NODE_ENV as string;
@@ -17,6 +17,7 @@ import SelectionListener from '../../components/SelectionListener';
import BezierEdge from '../../components/Edges/BezierEdge';
import StraightEdge from '../../components/Edges/StraightEdge';
import StepEdge from '../../components/Edges/StepEdge';
import SmoothStepEdge from '../../components/Edges/SmoothStepEdge';
import { createEdgeTypes } from '../EdgeRenderer/utils';
import Wrapper from './Wrapper';
import {
@@ -36,6 +37,10 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
elements: Elements;
onElementClick?: (element: Node | Edge) => void;
onElementsRemove?: (elements: Elements) => void;
onNodeMouseEnter?: (evt: MouseEvent, node: Node) => void;
onNodeMouseMove?: (evt: MouseEvent, node: Node) => void;
onNodeMouseLeave?: (evt: MouseEvent, node: Node) => void;
onNodeContextMenu?: (evt: MouseEvent, node: Node) => void;
onNodeDragStart?: (node: Node) => void;
onNodeDragStop?: (node: Node) => void;
onConnect?: (connection: Edge | Connection) => void;
@@ -51,7 +56,9 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
snapToGrid: boolean;
snapGrid: [number, number];
onlyRenderVisibleNodes: boolean;
isInteractive: boolean;
nodesDraggable: boolean;
nodesConnectable: boolean;
elementsSelectable: boolean;
selectNodesOnDrag: boolean;
minZoom: number;
maxZoom: number;
@@ -70,6 +77,10 @@ const ReactFlow = ({
onMove,
onElementsRemove,
onConnect,
onNodeMouseEnter,
onNodeMouseMove,
onNodeMouseLeave,
onNodeContextMenu,
onNodeDragStart,
onNodeDragStop,
onSelectionChange,
@@ -80,7 +91,9 @@ const ReactFlow = ({
snapToGrid,
snapGrid,
onlyRenderVisibleNodes,
isInteractive,
nodesDraggable,
nodesConnectable,
elementsSelectable,
selectNodesOnDrag,
minZoom,
maxZoom,
@@ -96,6 +109,10 @@ const ReactFlow = ({
onLoad={onLoad}
onMove={onMove}
onElementClick={onElementClick}
onNodeMouseEnter={onNodeMouseEnter}
onNodeMouseMove={onNodeMouseMove}
onNodeMouseLeave={onNodeMouseLeave}
onNodeContextMenu={onNodeContextMenu}
onNodeDragStart={onNodeDragStart}
onNodeDragStop={onNodeDragStop}
nodeTypes={nodeTypesParsed}
@@ -110,7 +127,9 @@ const ReactFlow = ({
snapToGrid={snapToGrid}
snapGrid={snapGrid}
onlyRenderVisibleNodes={onlyRenderVisibleNodes}
isInteractive={isInteractive}
nodesDraggable={nodesDraggable}
nodesConnectable={nodesConnectable}
elementsSelectable={elementsSelectable}
selectNodesOnDrag={selectNodesOnDrag}
minZoom={minZoom}
maxZoom={maxZoom}
@@ -135,6 +154,7 @@ ReactFlow.defaultProps = {
default: BezierEdge,
straight: StraightEdge,
step: StepEdge,
smoothstep: SmoothStepEdge,
},
connectionLineType: ConnectionLineType.Bezier,
deleteKeyCode: 8,
@@ -142,7 +162,9 @@ ReactFlow.defaultProps = {
snapToGrid: false,
snapGrid: [16, 16],
onlyRenderVisibleNodes: true,
isInteractive: true,
nodesDraggable: true,
nodesConnectable: true,
elementsSelectable: true,
selectNodesOnDrag: true,
minZoom: 0.5,
maxZoom: 2,
src/store/index.ts
+24 -3
View File
@@ -79,7 +79,9 @@ export interface StoreModel {
snapToGrid: boolean;
snapGrid: [number, number];
isInteractive: boolean;
nodesDraggable: boolean;
nodesConnectable: boolean;
elementsSelectable: boolean;
reactFlowVersion: string;
@@ -116,6 +118,9 @@ export interface StoreModel {
setConnectionNodeId: Action<StoreModel, SetConnectionId>;
setInteractive: Action<StoreModel, boolean>;
setNodesDraggable: Action<StoreModel, boolean>;
setNodesConnectable: Action<StoreModel, boolean>;
setElementsSelectable: Action<StoreModel, boolean>;
setUserSelection: Action<StoreModel, XYPosition>;
updateUserSelection: Action<StoreModel, XYPosition>;
@@ -162,7 +167,9 @@ export const storeModel: StoreModel = {
snapGrid: [16, 16],
snapToGrid: false,
isInteractive: true,
nodesDraggable: true,
nodesConnectable: true,
elementsSelectable: true,
reactFlowVersion: typeof __REACT_FLOW_VERSION__ !== 'undefined' ? __REACT_FLOW_VERSION__ : '-',
@@ -373,7 +380,21 @@ export const storeModel: StoreModel = {
}),
setInteractive: action((state, isInteractive) => {
state.isInteractive = isInteractive;
state.nodesDraggable = isInteractive;
state.nodesConnectable = isInteractive;
state.elementsSelectable = isInteractive;
}),
setNodesDraggable: action((state, nodesDraggable) => {
state.nodesDraggable = nodesDraggable;
}),
setNodesConnectable: action((state, nodesConnectable) => {
state.nodesConnectable = nodesConnectable;
}),
setElementsSelectable: action((state, elementsSelectable) => {
state.elementsSelectable = elementsSelectable;
}),
fitView: action((state, payload = { padding: 0.1 }) => {
src/style.css
+10 -1
View File
@@ -112,7 +112,11 @@
font-size: 12px;
color: #222;
text-align: center;
}
.react-flow__node-default.selectable,
.react-flow__node-input.selectable,
.react-flow__node-output.selectable {
&.selected,
&.selected:hover {
box-shadow: 0 0 0 2px #555;
@@ -158,7 +162,12 @@
width: 10px;
height: 8px;
background: rgba(255, 255, 255, 0.4);
cursor: crosshair;
pointer-events: none;
&.connectable {
pointer-events: all;
cursor: crosshair;
}
}
.react-flow__handle-bottom {
src/types/index.ts
+18 -3
View File
@@ -1,4 +1,4 @@
import { CSSProperties } from 'react';
import { CSSProperties, MouseEvent } from 'react';
export type ElementId = string;
@@ -94,6 +94,7 @@ export interface NodeProps {
type: string;
data: any;
selected: boolean;
isConnectable: boolean;
targetPosition?: Position;
sourcePosition?: Position;
}
@@ -102,6 +103,7 @@ export interface NodeComponentProps {
id: ElementId;
type: string;
data: any;
isConnectable: boolean;
selected?: boolean;
transform?: Transform;
xPos?: number;
@@ -109,6 +111,10 @@ export interface NodeComponentProps {
targetPosition?: Position;
sourcePosition?: Position;
onClick?: (node: Node) => void;
onMouseEnter?: (node: Node) => void;
onMouseMove?: (node: Node) => void;
onMouseLeave?: (node: Node) => void;
onContextMenu?: (node: Node) => void;
onNodeDragStart?: (node: Node) => void;
onNodeDragStop?: (node: Node) => void;
style?: CSSProperties;
@@ -122,9 +128,15 @@ export interface WrapNodeProps {
transform: Transform;
xPos: number;
yPos: number;
isInteractive: boolean;
isSelectable: boolean;
isDraggable: boolean;
isConnectable: boolean;
selectNodesOnDrag: boolean;
onClick?: (node: Node) => void;
onMouseEnter?: (evt: MouseEvent, node: Node) => void;
onMouseMove?: (evt: MouseEvent, node: Node) => void;
onMouseLeave?: (evt: MouseEvent, node: Node) => void;
onContextMenu?: (evt: MouseEvent, node: Node) => void;
onNodeDragStart?: (node: Node) => void;
onNodeDragStop?: (node: Node) => void;
style?: CSSProperties;
@@ -155,8 +167,10 @@ export interface Connection {
}
export enum ConnectionLineType {
Bezier = 'bezier',
Bezier = 'default',
Straight = 'straight',
Step = 'step',
SmoothStep = 'smoothstep',
}
export type OnConnectFunc = (connection: Connection) => void;
@@ -174,6 +188,7 @@ export interface HandleElement extends XYPosition, Dimensions {
export interface HandleProps {
type: HandleType;
position: Position;
isConnectable?: boolean;
onConnect?: OnConnectFunc;
isValidConnection?: (connection: Connection) => boolean;
id?: string;
src/utils/index.ts
+2
View File
@@ -1,6 +1,8 @@
import { DraggableEvent } from 'react-draggable';
import { MouseEvent as ReactMouseEvent } from 'react';
export const noop = () => {};
export const isInputDOMNode = (e: ReactMouseEvent | DraggableEvent | KeyboardEvent) => {
const target = e.target as HTMLElement;
return e && target && ['INPUT', 'SELECT', 'TEXTAREA', 'BUTTON'].includes(target.nodeName);