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>
);
};