refactor: use arcs instead of bezier curves for cleaner connectors
diff --git a/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js b/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js
index 0823ec7..ba811be 100644
--- a/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js
+++ b/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js
@@ -277,15 +277,53 @@
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 @@
path.setAttribute("marker-start", "url(#arrowstart-collapsed)");
path.setAttribute("marker-end", "url(#arrowhead-collapsed)");
}
-
- $('#connectors').append(path);
}
set_selected_node(node) {
diff --git a/erpnext/public/scss/hierarchy_chart.scss b/erpnext/public/scss/hierarchy_chart.scss
index 16b8792..16137fd 100644
--- a/erpnext/public/scss/hierarchy_chart.scss
+++ b/erpnext/public/scss/hierarchy_chart.scss
@@ -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 {