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

fix(bezieredge): correctly connect diagonally nodes closes #256

Browse Source
This commit is contained in:
moklick
2020-05-30 20:26:55 +02:00
parent c620d0f40c
commit 0558ff86c4
2 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
example/src/Horizontal/index.js
View File

@@ -9,11 +9,20 @@ const onLoad = (graph) => {
const initialElements = [
{ 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: 'Another node' }, position: { x: 250, y: 160 } },
{ id: '4', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 4' }, position: { x: 500, y: 80 } },
{ 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 } },
{ id: '5', sourcePosition: 'top', targetPosition: 'bottom', data: { label: 'Node 5' }, position: { x: 500, y: 100 } },
{ id: '6', sourcePosition: 'bottom', targetPosition: 'top', data: { label: 'Node 6' }, position: { x: 500, y: 230 } },
{ 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: '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 },
];
const HorizontalFlow = () => {

5
src/components/Edges/BezierEdge.tsx
View File

@@ -26,10 +26,13 @@ export default memo(
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(sourcePosition) || leftAndRight.includes(targetPosition)) {
} 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 text = label ? (