Shiloh/brotherton-erpnext
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: use arcs instead of bezier curves for cleaner connectors

Browse Source
This commit is contained in:
Rucha Mahabal 2021-06-30 01:46:10 +05:30
parent e179cd9841
commit 4e7cda6e65
2 changed files with 46 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js
View File

@ -277,15 +277,53 @@ erpnext.HierarchyChart = class {
y: child_node.offsetTop + child_node.offsetHeight / 2
};
let connector =
"M" +
(pos_parent_right.x) + "," + (pos_parent_right.y) + " " +
"C" +
(pos_parent_right.x + 100) + "," + (pos_parent_right.y) + " " +
(pos_child_left.x - 100) + "," + (pos_child_left.y) + " " +
(pos_child_left.x) + "," + (pos_child_left.y);
let connector = this.get_connector(pos_parent_right, pos_child_left);
path.setAttribute("d", connector);
this.set_path_attributes(path, parent_id, child_id);
$('#connectors').append(path);
}
get_connector(pos_parent_right, pos_child_left) {
if (pos_parent_right.y === pos_child_left.y) {
// don't add arcs if it's a straight line
return "M" +
(pos_parent_right.x) + "," + (pos_parent_right.y) + " " +
"L"+
(pos_child_left.x) + "," + (pos_child_left.y);
} else {
let arc_1 = "";
let arc_2 = "";
let offset = 0;
if (pos_parent_right.y > pos_child_left.y) {
// if child is above parent on Y axis 1st arc is anticlocwise
// second arc is clockwise
arc_1 = "a10,10 1 0 0 10,-10 ";
arc_2 = "a10,10 0 0 1 10,-10 ";
offset = 10;
} else {
// if child is below parent on Y axis 1st arc is clockwise
// second arc is anticlockwise
arc_1 = "a10,10 0 0 1 10,10 ";
arc_2 = "a10,10 1 0 0 10,10 ";
offset = -10;
}
return "M" + (pos_parent_right.x) + "," + (pos_parent_right.y) + " " +
"L" +
(pos_parent_right.x + 40) + "," + (pos_parent_right.y) + " " +
arc_1 +
"L" +
(pos_parent_right.x + 50) + "," + (pos_child_left.y + offset) + " " +
arc_2 +
"L"+
(pos_child_left.x) + "," + (pos_child_left.y);
}
}
set_path_attributes(path, parent_id, child_id) {
path.setAttribute("data-parent", parent_id);
path.setAttribute("data-child", child_id);
@ -298,8 +336,6 @@ erpnext.HierarchyChart = class {
path.setAttribute("marker-start", "url(#arrowstart-collapsed)");
path.setAttribute("marker-end", "url(#arrowhead-collapsed)");
}
$('#connectors').append(path);
}
set_selected_node(node) {

2
erpnext/public/scss/hierarchy_chart.scss
View File

@ -48,7 +48,6 @@
border-radius: 0.5rem;
padding: 0.75rem;
width: 18rem;
height: 5rem;
.btn-edit-node {
display: flex;
@ -195,6 +194,7 @@
.level {
margin-right: 8px;
align-items: flex-start;
}
#arrows {