@nodeject/ui-components
Version:
UI library for non-trivial components
64 lines (63 loc) • 3.06 kB
JavaScript
/**
* Draws the SVG edges of each node.
*/
import * as React from 'react';
import styles from './Edge.module.less';
import { isOrgStyle } from '../Graph';
import { isDomNodeRendered, getNodeDom } from '../node-container';
import { getClassAndIdNames } from '../../helpers';
export var Edge = function (props) {
var path;
// prettier-ignore
if (isOrgStyle(props.parentLayoutStyle)) { // WBS style
var xDistance = props.xSource - props.xTarget;
if (xDistance > 4) {
path = 'M' + Math.round(props.xSource) + ' ' + Math.round(props.ySource) + ' V' + (Math.round(props.yTarget) + (Math.round(props.ySource) - Math.round(props.yTarget)) / 2 + 4) + 'a4,4 0 0 0 -4,-4' + ' H' + Math.round(props.xTarget) + ' V' + Math.round(props.yTarget);
}
else if (xDistance >= -20 && xDistance <= 20) {
path = 'M' + Math.round(props.xSource) + ' ' + Math.round(props.ySource) + ' V' + (Math.round(props.yTarget) + (Math.round(props.ySource) - Math.round(props.yTarget)) / 2) + ' H' + Math.round(props.xTarget) + ' V' + Math.round(props.yTarget);
}
else {
path = 'M' + Math.round(props.xSource) + ' ' + Math.round(props.ySource) + ' V' + (Math.round(props.yTarget) + (Math.round(props.ySource) - Math.round(props.yTarget)) / 2 + 4) + 'a4,4 0 0 1 4,-4' + ' H' + Math.round(props.xTarget) + ' V' + Math.round(props.yTarget);
}
}
else { // List style
path = 'M' + Math.round(props.xSource) + ' ' + Math.round(props.ySource) + ' H' + (Math.round(props.xTarget) + 5) + 'a4,4 0 0 1 -4,-4' + ' V' + Math.round(props.yTarget);
}
return (React.createElement("svg", { className: styles.edge, style: { overflow: 'visible' } },
React.createElement("path", { d: path })));
};
export var getEdgeConnectorsCoordinates = function (nodeId, nodeParentId, isParentNodeOrgStyle, nodeStyle) {
var childDOM = getNodeDom(getClassAndIdNames(nodeStyle, nodeId).idName);
var parentDOM = nodeParentId !== '' &&
getNodeDom(getClassAndIdNames(nodeStyle, nodeParentId).idName);
if (nodeParentId !== '' && parentDOM && isDomNodeRendered(childDOM)) {
var parentBox = parentDOM.getBoundingClientRect();
var childBox = childDOM.getBoundingClientRect();
if (isParentNodeOrgStyle) {
return {
xSource: childBox.width / 2,
ySource: 0,
xTarget: parentBox.left - childBox.left + parentBox.width / 2,
yTarget: parentBox.bottom - childBox.top
};
}
else {
// List style
return {
xSource: 0,
ySource: childBox.height / 2,
xTarget: ((parentBox.left - childBox.left) * 2) / 3,
yTarget: parentBox.bottom - childBox.top
};
}
}
else {
return {
xSource: 0,
ySource: 0,
xTarget: 0,
yTarget: 0
};
}
};