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

refactor(connectionline): handle horizontal flows correctly closes #253

Browse Source
This commit is contained in:
moklick
2020-05-28 11:30:05 +02:00
parent a555df0458
commit 11a3605c1b
1 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ConnectionLine/index.tsx
+10 -4
View File
@@ -1,7 +1,7 @@
import React, { useEffect, useState, CSSProperties } from 'react'; import React, { useEffect, useState, CSSProperties } from 'react';
import cx from 'classnames'; import cx from 'classnames';
import { ElementId, Node, Transform, HandleElement } from '../../types'; import { ElementId, Node, Transform, HandleElement, Position } from '../../types';
interface ConnectionLineProps { interface ConnectionLineProps {
connectionSourceId: ElementId; connectionSourceId: ElementId;
@@ -61,9 +61,15 @@ export default ({
let dAttr: string = ''; let dAttr: string = '';
if (connectionLineType === 'bezier') { if (connectionLineType === 'bezier') {
const yOffset = Math.abs(targetY - sourceY) / 2; if (sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right) {
const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset; const xOffset = Math.abs(targetX - sourceX) / 2;
dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`; 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}`;
}
} else { } else {
dAttr = `M${sourceX},${sourceY} ${targetX},${targetY}`; dAttr = `M${sourceX},${sourceY} ${targetX},${targetY}`;
} }