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

feat(handles): validate connection

Browse Source
This commit is contained in:
moklick
2019-10-07 19:56:47 +02:00
parent 0e67f5fefa
commit ae1bb70882
7 changed files with 89 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
examples/advanced.html
View File

@@ -19,6 +19,12 @@
left: 10px;
z-index: 4;
}
.react-flow__handle.connecting {
background: orange;
}
.react-flow__handle.valid {
background: green;
}
</style>
</head>
<body>

7
examples/advanced/scripts/InputNode.js
View File

@@ -9,6 +9,11 @@ export default({ data, styles }) => (
<Handle type="target" position="left" style={{ background: '#999' }} />
<div>{data.input}</div>
<input onChange={(e) => data.onChange(e.target.value, data)} />
<Handle type="source" position="right" style={{ background: '#999' }} />
<Handle
type="source"
position="right"
style={{ background: '#999' }}
isValidConnection={connection => +connection.target % 2 === 0}
/>
</div>
);

6
examples/advanced/scripts/SpecialNode.js
View File

@@ -26,7 +26,11 @@ export default ({ data, styles }) => {
<option value="2">2</option>
<option value="3">3</option>
</select>
<Handle type="source" position="bottom" style={{ left: 10, background: '#999' }} />
<Handle
type="source"
position="bottom"
style={{ left: 10, background: '#999' }}
/>
</div>
);
};

75
src/components/Handle/BaseHandle.js
View File

@@ -1,8 +1,9 @@
import React, { memo } from 'react';
import cx from 'classnames';
function onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarget }) {
function onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarget, isValidConnection }) {
const containerBounds = document.querySelector('.react-flow').getBoundingClientRect();
let recentHoveredHandle = null;
setPosition({
x: evt.clientX - containerBounds.x,
@@ -10,24 +11,71 @@ function onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarg
});
setSourceId(nodeId);
// checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }
function checkElementBelowIsValid(evt) {
const elementBelow = document.elementFromPoint(evt.clientX, evt.clientY);
const result = {
elementBelow,
isValid: false,
connection: null,
isHoveringHandle: false
};
if (elementBelow && (elementBelow.classList.contains('target') || elementBelow.classList.contains('source'))) {
let connection = null;
if (isTarget) {
const sourceId = elementBelow.getAttribute('data-nodeid');
connection = { source: sourceId, target: nodeId };
} else {
const targetId = elementBelow.getAttribute('data-nodeid');
connection = { source: nodeId, target: targetId };
}
const isValid = isValidConnection(connection);
result.connection = connection;
result.isValid = isValid;
result.isHoveringHandle = true;
}
return result;
}
function onMouseMove(evt) {
setPosition({
x: evt.clientX - containerBounds.x,
y: evt.clientY - containerBounds.y,
});
const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(evt);
if (!isHoveringHandle) {
if (recentHoveredHandle) {
recentHoveredHandle.classList.remove('valid');
recentHoveredHandle.classList.remove('connecting');
}
return false;
}
const isOwnHandle = connection.source === connection.target;
if (!isOwnHandle) {
recentHoveredHandle = elementBelow;
elementBelow.classList.add('connecting');
elementBelow.classList.toggle('valid', isValid);
}
}
function onMouseUp(evt) {
const elementBelow = document.elementFromPoint(evt.clientX, evt.clientY);
const { connection, isValid } = checkElementBelowIsValid(evt);
if (elementBelow && (elementBelow.classList.contains('target') || elementBelow.classList.contains('source'))) {
if (isTarget) {
const sourceId = elementBelow.getAttribute('data-nodeid');
onConnect({ source: sourceId, target: nodeId });
} else {
const targetId = elementBelow.getAttribute('data-nodeid');
onConnect({ source: nodeId, target: targetId });
}
if (isValid) {
onConnect(connection);
}
if (recentHoveredHandle) {
recentHoveredHandle.classList.remove('valid');
}
setSourceId(null);
@@ -42,7 +90,7 @@ function onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarg
const BaseHandle = memo(({
type, nodeId, onConnect, position,
setSourceId, setPosition, className,
id = false, ...rest
id = false, isValidConnection, ...rest
}) => {
const isTarget = type === 'target';
const handleClasses = cx(
@@ -59,7 +107,10 @@ const BaseHandle = memo(({
data-nodeid={nodeIdWithHandleId}
data-handlepos={position}
className={handleClasses}
onMouseDown={evt => onMouseDown(evt, { nodeId: nodeIdWithHandleId, setSourceId, setPosition, onConnect, isTarget })}
onMouseDown={evt => onMouseDown(evt, {
nodeId: nodeIdWithHandleId, setSourceId, setPosition,
onConnect, isTarget, isValidConnection
})}
{...rest}
/>
);

6
src/components/Handle/index.js
View File

@@ -33,13 +33,15 @@ Handle.displayName = 'Handle';
Handle.propTypes = {
type: PropTypes.oneOf(['source', 'target']),
position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
onConnect: PropTypes.func
onConnect: PropTypes.func,
isValidConnection: PropTypes.func
};
Handle.defaultProps = {
type: 'source',
position: 'top',
onConnect: () => {}
onConnect: () => {},
isValidConnection: () => true
};
export default Handle;

8
src/container/Editor/index.js → src/container/ReactFlow/index.js
View File

@@ -21,7 +21,7 @@ import store from '../../store';
import '../../style.css';
const Editor = ({
const ReactFlow = ({
style, onElementClick, elements, children,
nodeTypes, edgeTypes, onLoad, onMove,
onElementsRemove, onConnect, onNodeDragStop, connectionLineType,
@@ -54,9 +54,9 @@ const Editor = ({
);
};
Editor.displayName = 'Editor';
ReactFlow.displayName = 'ReactFlow';
Editor.defaultProps = {
ReactFlow.defaultProps = {
onElementClick: () => {},
onElementsRemove: () => {},
onNodeDragStop: () => {},
@@ -79,4 +79,4 @@ Editor.defaultProps = {
selectionKeyCode: 16
};
export default Editor;
export default ReactFlow;

2
src/index.js
View File

@@ -1,4 +1,4 @@
import ReactFlow from './container/Editor';
import ReactFlow from './container/ReactFlow';
export default ReactFlow;