orgchart 3.2.0 → 3.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -1
- package/demo/drag-drop-hybrid-chart.html +81 -0
- package/demo/drag-drop.html +1 -0
- package/demo/index.html +2 -0
- package/demo/isHybrid.html +71 -0
- package/demo/vertical-level.html +17 -16
- package/dist/css/jquery.orgchart.css +2 -19
- package/dist/css/jquery.orgchart.min.css +1 -1
- package/dist/js/jquery.orgchart.js +58 -36
- package/dist/js/jquery.orgchart.min.js +1 -1
- package/dist/js/jquery.orgchart.min.js.map +1 -1
- package/gulpfile.js +2 -1
- package/package.json +3 -2
- package/src/css/jquery.orgchart.css +2 -19
- package/src/js/jquery.orgchart.js +58 -36
- package/test/integration/init-tests.js +4 -4
package/README.md
CHANGED
|
@@ -135,7 +135,21 @@ No problem. With the help of ES6 Template literals, we can customize the any com
|
|
|
135
135
|
|
|
136
136
|
- [I want to position node in specific level. How can i do that ?](https://dabeng.github.io/OrgChart/level-offset.html)
|
|
137
137
|
|
|
138
|
-
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
You need the solution based on new datasource structure with **levelOffset data prop** + callback createNode() + CSS custom properties(variables)
|
|
141
|
+
|
|
142
|
+
- [I want a orgchart with nodes of different widths](https://dabeng.github.io/OrgChart/nodes-of-different-widths.html)
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
|
|
146
|
+
- [I want to drag&drop in the hybrid chart](https://dabeng.github.io/OrgChart/drag-drop-hybrid-chart.html)
|
|
147
|
+
|
|
148
|
+
- [ I only want specific children of a certain branch of the chart to be displayed as vertical. Is it possible to set VerticalLevel by data?](https://dabeng.github.io/OrgChart/isHybrid.html)
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
**isVertical data property** is designed for your use case. Once a node has a "isVertical" prop with truthy value, its descendant nodes will be arranged vertically.
|
|
139
153
|
|
|
140
154
|
### how to start up demos locally
|
|
141
155
|
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Organization Chart Plugin</title>
|
|
6
|
+
<link rel="icon" href="img/logo.png">
|
|
7
|
+
<link rel="stylesheet" href="css/jquery.orgchart.css">
|
|
8
|
+
<link rel="stylesheet" href="css/style.css">
|
|
9
|
+
<style type="text/css">
|
|
10
|
+
#chart-container { height: 600px; }
|
|
11
|
+
.orgchart { background: #fff; }
|
|
12
|
+
</style>
|
|
13
|
+
</head>
|
|
14
|
+
<body>
|
|
15
|
+
<div id="chart-container"></div>
|
|
16
|
+
|
|
17
|
+
<script type="text/javascript" src="js/jquery.min.js"></script>
|
|
18
|
+
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
|
|
19
|
+
<script type="text/javascript" src="js/json-digger.js"></script>
|
|
20
|
+
<script type="text/javascript">
|
|
21
|
+
$(function() {
|
|
22
|
+
|
|
23
|
+
var datascource = {
|
|
24
|
+
'id': '1',
|
|
25
|
+
'name': 'Lao Lao',
|
|
26
|
+
'title': 'general manager',
|
|
27
|
+
'children': [
|
|
28
|
+
{ 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' },
|
|
29
|
+
{ 'id': '3', 'name': 'Su Miao', 'title': 'department manager',
|
|
30
|
+
'children': [
|
|
31
|
+
{ 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' },
|
|
32
|
+
{ 'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer',
|
|
33
|
+
'children': [
|
|
34
|
+
{ 'id': '6', 'name': 'Pang Pang', 'title': 'engineer' },
|
|
35
|
+
{ 'id': '7', 'name': 'Dan Dan', 'title': 'UE engineer' ,
|
|
36
|
+
'children': [
|
|
37
|
+
{ 'id': '8', 'name': 'Er Dan', 'title': 'engineer' },
|
|
38
|
+
{ 'id': '9', 'name': 'San Dan', 'title': 'engineer',
|
|
39
|
+
'children': [
|
|
40
|
+
{ 'id': '10', 'name': 'Si Dan', 'title': 'intern' },
|
|
41
|
+
{ 'id': '11', 'name': 'Wu Dan', 'title': 'intern' }
|
|
42
|
+
]
|
|
43
|
+
}
|
|
44
|
+
]}
|
|
45
|
+
]
|
|
46
|
+
}
|
|
47
|
+
]
|
|
48
|
+
},
|
|
49
|
+
{ 'id': '12', 'name': 'Hong Miao', 'title': 'department manager' },
|
|
50
|
+
{ 'id': '13', 'name': 'Chun Miao', 'title': 'department manager',
|
|
51
|
+
'children': [
|
|
52
|
+
{ 'id': '14', 'name': 'Bing Qin', 'title': 'senior engineer' },
|
|
53
|
+
{ 'id': '15', 'name': 'Yue Yue', 'title': 'senior engineer',
|
|
54
|
+
'children': [
|
|
55
|
+
{ 'id': '16', 'name': 'Er Yue', 'title': 'engineer' },
|
|
56
|
+
{ 'id': '17', 'name': 'San Yue', 'title': 'UE engineer' }
|
|
57
|
+
]
|
|
58
|
+
}
|
|
59
|
+
]
|
|
60
|
+
}
|
|
61
|
+
]
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
var oc = $('#chart-container').orgchart({
|
|
65
|
+
'data' : datascource,
|
|
66
|
+
'nodeContent': 'title',
|
|
67
|
+
'draggable': true,
|
|
68
|
+
'verticalLevel': 3
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
oc.$chart.on('nodedrop.orgchart', function(event, extraParams) {
|
|
72
|
+
console.log('draggedNode:' + extraParams.draggedNode.children('.title').text()
|
|
73
|
+
+ ', dragZone:' + extraParams.dragZone.children('.title').text()
|
|
74
|
+
+ ', dropZone:' + extraParams.dropZone.children('.title').text()
|
|
75
|
+
);
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
});
|
|
79
|
+
</script>
|
|
80
|
+
</body>
|
|
81
|
+
</html>
|
package/demo/drag-drop.html
CHANGED
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
|
|
17
17
|
<script type="text/javascript" src="js/jquery.min.js"></script>
|
|
18
18
|
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
|
|
19
|
+
<script type="text/javascript" src="js/json-digger.js"></script>
|
|
19
20
|
<script type="text/javascript">
|
|
20
21
|
$(function() {
|
|
21
22
|
|
package/demo/index.html
CHANGED
|
@@ -143,6 +143,8 @@
|
|
|
143
143
|
<li><a href="get-related-nodes.html" target="_blank">Highlight related nodes</a></li>
|
|
144
144
|
<li><a href="level-offset.html" target="_blank">position node in specific level</a></li>
|
|
145
145
|
<li><a href="nodes-of-different-widths.html" target="_blank">nodes of different widths</a></li>
|
|
146
|
+
<li><a href="drag-drop-hybrid-chart.html" target="_blank">drag&drop in hybrid chart</a></li>
|
|
147
|
+
<li><a href="isHybrid.html" target="_blank">create hybrid chart with isHybrid</a></li>
|
|
146
148
|
</ol>
|
|
147
149
|
</section>
|
|
148
150
|
</body>
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Organization Chart Plugin</title>
|
|
6
|
+
<link rel="icon" href="img/logo.png">
|
|
7
|
+
<link rel="stylesheet" href="css/jquery.orgchart.css">
|
|
8
|
+
<link rel="stylesheet" href="css/style.css">
|
|
9
|
+
<style type="text/css">
|
|
10
|
+
#chart-container { height: 620px; }
|
|
11
|
+
.orgchart { padding-bottom: 20px; }
|
|
12
|
+
</style>
|
|
13
|
+
</head>
|
|
14
|
+
<body>
|
|
15
|
+
<div id="chart-container"></div>
|
|
16
|
+
|
|
17
|
+
<script type="text/javascript" src="js/jquery.min.js"></script>
|
|
18
|
+
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
|
|
19
|
+
<script type="text/javascript">
|
|
20
|
+
$(function() {
|
|
21
|
+
|
|
22
|
+
var datascource = {
|
|
23
|
+
'id': '1',
|
|
24
|
+
'name': 'Lao Lao',
|
|
25
|
+
'title': 'general manager',
|
|
26
|
+
'children': [
|
|
27
|
+
{ 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' },
|
|
28
|
+
{ 'id': '3', 'name': 'Su Miao', 'title': 'department manager',
|
|
29
|
+
'children': [
|
|
30
|
+
{ 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' },
|
|
31
|
+
{ 'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer',
|
|
32
|
+
'children': [
|
|
33
|
+
{ 'id': '6', 'name': 'Pang Pang', 'title': 'engineer' },
|
|
34
|
+
{ 'id': '7', 'name': 'Dan Dan', 'title': 'UE engineer' ,
|
|
35
|
+
'children': [
|
|
36
|
+
{ 'id': '8', 'name': 'Er Dan', 'title': 'engineer' },
|
|
37
|
+
{ 'id': '9', 'name': 'San Dan', 'title': 'engineer',
|
|
38
|
+
'children': [
|
|
39
|
+
{ 'id': '10', 'name': 'Si Dan', 'title': 'intern' },
|
|
40
|
+
{ 'id': '11', 'name': 'Wu Dan', 'title': 'intern' }
|
|
41
|
+
]
|
|
42
|
+
}
|
|
43
|
+
]}
|
|
44
|
+
]
|
|
45
|
+
}
|
|
46
|
+
]
|
|
47
|
+
},
|
|
48
|
+
{ 'id': '13', 'name': 'Chun Miao', 'title': 'department manager', 'isHybrid': true,
|
|
49
|
+
'children': [
|
|
50
|
+
{ 'id': '14', 'name': 'Bing Qin', 'title': 'senior engineer' },
|
|
51
|
+
{ 'id': '15', 'name': 'Yue Yue', 'title': 'senior engineer',
|
|
52
|
+
'children': [
|
|
53
|
+
{ 'id': '16', 'name': 'Er Yue', 'title': 'engineer' },
|
|
54
|
+
{ 'id': '17', 'name': 'San Yue', 'title': 'UE engineer' }
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
]
|
|
58
|
+
}
|
|
59
|
+
]
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
$('#chart-container').orgchart({
|
|
63
|
+
'data' : datascource,
|
|
64
|
+
'nodeContent': 'title',
|
|
65
|
+
'verticalLevel': 5
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
});
|
|
69
|
+
</script>
|
|
70
|
+
</body>
|
|
71
|
+
</html>
|
package/demo/vertical-level.html
CHANGED
|
@@ -20,23 +20,24 @@
|
|
|
20
20
|
$(function() {
|
|
21
21
|
|
|
22
22
|
var datascource = {
|
|
23
|
+
'id': '1',
|
|
23
24
|
'name': 'Lao Lao',
|
|
24
25
|
'title': 'general manager',
|
|
25
26
|
'children': [
|
|
26
|
-
{ 'name': 'Bo Miao', 'title': 'department manager' },
|
|
27
|
-
{ 'name': 'Su Miao', 'title': 'department manager',
|
|
27
|
+
{ 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' },
|
|
28
|
+
{ 'id': '3', 'name': 'Su Miao', 'title': 'department manager',
|
|
28
29
|
'children': [
|
|
29
|
-
{ 'name': 'Tie Hua', 'title': 'senior engineer' },
|
|
30
|
-
{ 'name': 'Hei Hei', 'title': 'senior engineer',
|
|
30
|
+
{ 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' },
|
|
31
|
+
{ 'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer',
|
|
31
32
|
'children': [
|
|
32
|
-
{ 'name': 'Pang Pang', 'title': 'engineer' },
|
|
33
|
-
{ 'name': 'Dan Dan', 'title': 'UE engineer' ,
|
|
33
|
+
{ 'id': '6', 'name': 'Pang Pang', 'title': 'engineer' },
|
|
34
|
+
{ 'id': '7', 'name': 'Dan Dan', 'title': 'UE engineer' ,
|
|
34
35
|
'children': [
|
|
35
|
-
{ 'name': 'Er Dan', 'title': 'engineer' },
|
|
36
|
-
{ 'name': 'San Dan', 'title': 'engineer',
|
|
36
|
+
{ 'id': '8', 'name': 'Er Dan', 'title': 'engineer' },
|
|
37
|
+
{ 'id': '9', 'name': 'San Dan', 'title': 'engineer',
|
|
37
38
|
'children': [
|
|
38
|
-
{ 'name': 'Si Dan', 'title': 'intern' },
|
|
39
|
-
{ 'name': 'Wu Dan', 'title': 'intern' }
|
|
39
|
+
{ 'id': '10', 'name': 'Si Dan', 'title': 'intern' },
|
|
40
|
+
{ 'id': '11', 'name': 'Wu Dan', 'title': 'intern' }
|
|
40
41
|
]
|
|
41
42
|
}
|
|
42
43
|
]}
|
|
@@ -44,14 +45,14 @@
|
|
|
44
45
|
}
|
|
45
46
|
]
|
|
46
47
|
},
|
|
47
|
-
{ 'name': 'Hong Miao', 'title': 'department manager' },
|
|
48
|
-
{ 'name': 'Chun Miao', 'title': 'department manager',
|
|
48
|
+
{ 'id': '12', 'name': 'Hong Miao', 'title': 'department manager' },
|
|
49
|
+
{ 'id': '13', 'name': 'Chun Miao', 'title': 'department manager',
|
|
49
50
|
'children': [
|
|
50
|
-
{ 'name': 'Bing Qin', 'title': 'senior engineer' },
|
|
51
|
-
{ 'name': 'Yue Yue', 'title': 'senior engineer',
|
|
51
|
+
{ 'id': '14', 'name': 'Bing Qin', 'title': 'senior engineer' },
|
|
52
|
+
{ 'id': '15', 'name': 'Yue Yue', 'title': 'senior engineer',
|
|
52
53
|
'children': [
|
|
53
|
-
{ 'name': 'Er Yue', 'title': 'engineer' },
|
|
54
|
-
{ 'name': 'San Yue', 'title': 'UE engineer' }
|
|
54
|
+
{ 'id': '16', 'name': 'Er Yue', 'title': 'engineer' },
|
|
55
|
+
{ 'id': '17', 'name': 'San Yue', 'title': 'UE engineer' }
|
|
55
56
|
]
|
|
56
57
|
}
|
|
57
58
|
]
|
|
@@ -460,17 +460,9 @@
|
|
|
460
460
|
}
|
|
461
461
|
|
|
462
462
|
/* styles for vertical nodes */
|
|
463
|
-
.orgchart .hierarchy.hybrid > .node {
|
|
464
|
-
margin-bottom: 0;
|
|
465
|
-
}
|
|
466
|
-
|
|
467
|
-
.orgchart .hierarchy.hybrid > .node::after {
|
|
468
|
-
content: none;
|
|
469
|
-
}
|
|
470
463
|
|
|
471
464
|
.orgchart .nodes.vertical {
|
|
472
465
|
display: block;
|
|
473
|
-
margin: 0;
|
|
474
466
|
padding-left: 18px;
|
|
475
467
|
}
|
|
476
468
|
|
|
@@ -491,19 +483,10 @@
|
|
|
491
483
|
content: none;
|
|
492
484
|
}
|
|
493
485
|
|
|
494
|
-
.orgchart .nodes.vertical::before {
|
|
495
|
-
content: '';
|
|
496
|
-
display: inline-block;
|
|
497
|
-
position: relative;
|
|
498
|
-
height: 14px;
|
|
499
|
-
width: 2px;
|
|
500
|
-
left: -9px;
|
|
501
|
-
background-color: rgba(217, 83, 79, 0.8);
|
|
502
|
-
}
|
|
503
486
|
.orgchart .nodes.vertical > .hierarchy:first-child::before {
|
|
504
487
|
box-sizing: border-box;
|
|
505
|
-
top: -
|
|
506
|
-
height:
|
|
488
|
+
top: -11px;
|
|
489
|
+
height: 35px;
|
|
507
490
|
width: calc(50% - 2px);
|
|
508
491
|
border-width: 2px 0 0 2px;
|
|
509
492
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.orgchart{box-sizing:border-box;display:inline-block;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:linear-gradient(90deg,rgba(200,0,0,.15) 10%,rgba(0,0,0,0) 10%),linear-gradient(rgba(200,0,0,.15) 10%,rgba(0,0,0,0) 10%);background-size:10px 10px;border:1px dashed transparent;padding:20px 20px 0 20px}.orgchart .hidden,.orgchart~.hidden{display:none!important}.orgchart.b2t{transform:rotate(180deg)}.orgchart.l2r{position:absolute;transform:rotate(-90deg) rotateY(180deg);transform-origin:left top;text-align:center}.orgchart.r2l{position:absolute;transform:rotate(90deg);transform-origin:left top;text-align:center}.orgchart~.mask{position:absolute;top:0;right:0;bottom:0;left:0;z-index:999;text-align:center;background-color:rgba(0,0,0,.3)}.orgchart~.mask .spinner{position:absolute;top:calc(50% - 50px);left:calc(50% - 50px)}.orgchart>.spinner::before,.orgchart~.mask .spinner::before{width:100px;height:100px;border-width:10px;border-radius:50px;border-top-color:rgba(68,157,68,.8);border-bottom-color:rgba(68,157,68,.8);border-left-color:rgba(68,157,68,.8)}.orgchart .nodes{display:flex;list-style:none;padding-left:0;margin:0}.orgchart .hierarchy{position:relative}.orgchart .hierarchy::before{content:"";position:absolute;top:-11px;left:0;width:100%;border-top:2px solid rgba(217,83,79,.8);box-sizing:border-box}.orgchart .hierarchy.isSiblingsCollapsed.left-sibs::before,.orgchart .hierarchy:first-child::before{left:calc(50% - 1px);width:calc(50% + 1px)}.orgchart .hierarchy.isSiblingsCollapsed.right-sibs::before,.orgchart .hierarchy:last-child::before{width:calc(50% + 1px)}.orgchart .hierarchy:not(.hidden):only-child::before{width:2px}.orgchart .isAncestorsCollapsed:only-child::before,.orgchart .isAncestorsCollapsed>.node::before,.orgchart .isChildrenCollapsed>.node:not(:only-child)::after,.orgchart .isCollapsedDescendant::before,.orgchart .isCollapsedDescendant>.node::after,.orgchart .isCollapsedDescendant>.node::before,.orgchart .isCollapsedSibling .hierarchy::before,.orgchart .isCollapsedSibling::before,.orgchart .isSiblingsCollapsed.left-sibs.right-sibs::before,.orgchart .isSiblingsCollapsed.left-sibs:last-child:before,.orgchart .isSiblingsCollapsed.right-sibs:first-child:before,.orgchart .isSiblingsCollapsed:not(.left-sibs):not(.right-sibs)::before,.orgchart>.nodes>.hierarchy::before{content:none}.orgchart .node:not(:only-child)::after{content:"";position:absolute;bottom:-11px;left:calc(50% - 1px);width:2px;height:9px;background-color:rgba(217,83,79,.8)}.orgchart ul li .node.allowedDrop{border-color:rgba(68,157,68,.9)}.orgchart ul li .node.currentDropTarget{background-color:rgba(68,157,68,.9)}.orgchart ul li .node.selected{background-color:rgba(238,217,54,.5)}.orgchart ul li .node:hover{background-color:rgba(238,217,54,.5)}.orgchart>ul>li>ul li>.node::before{content:"";position:absolute;top:var(--top,-11px);left:calc(50% - 1px);width:2px;height:var(--height,9px);background-color:rgba(217,83,79,.8)}.orgchart>ul>li>ul li.isSiblingsCollapsed>.node::before{top:var(--top-cross-point,-13px);height:var(--height-cross-point,11px)}.orgchart .node{box-sizing:border-box;display:inline-block;position:relative;margin:0 0 20px 0;padding:3px;border:2px dashed transparent;text-align:center}.orgchart.l2r .node,.orgchart.r2l .node{width:50px;height:140px}.orgchart .node:hover{background-color:rgba(238,217,54,.5);transition:.5s;cursor:default;z-index:20}.orgchart .node.focused{background-color:rgba(238,217,54,.5)}.orgchart .ghost-node{position:fixed;left:-10000px;top:-10000px}.orgchart .ghost-node rect{fill:#fff;stroke:#bf0000}.orgchart .node.allowedDrop{border-color:rgba(68,157,68,.9)}.orgchart .node>.spinner{position:absolute;top:calc(50% - 1rem);left:calc(50% - 1rem)}.orgchart .node>.spinner::before{width:2rem;height:2rem;border-width:.2rem;border-radius:1rem;border-top-color:rgba(68,157,68,.8);border-bottom-color:rgba(68,157,68,.8);border-left-color:rgba(68,157,68,.8)}.orgchart .node .title{box-sizing:border-box;padding:2px;width:130px;text-align:center;font-size:.75rem;font-weight:700;height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(217,83,79,.8);color:#fff;border-radius:4px 4px 0 0}.orgchart.b2t .node .title{transform:rotate(-180deg);transform-origin:center bottom}.orgchart.l2r .node .title{transform:rotate(-90deg) translate(-45px,-45px) rotateY(180deg);transform-origin:bottom center}.orgchart.r2l .node .title{transform:rotate(-90deg) translate(-45px,-45px);transform-origin:bottom center}.orgchart .node .title .symbol{float:left;margin-top:12px;margin-left:2px}.orgchart .node .title .symbol::before{background-color:#fff;border-color:rgba(217,83,79,.8)}.orgchart .node .title .symbol::after{background-color:#fff}.orgchart .node .content{box-sizing:border-box;padding:2px;height:20px;font-size:.625rem;border:1px solid rgba(217,83,79,.8);border-radius:0 0 4px 4px;text-align:center;background-color:#fff;color:#333;text-overflow:ellipsis;white-space:nowrap}.orgchart.b2t .node .content{transform:rotate(180deg);transform-origin:center top}.orgchart.l2r .node .content{transform:rotate(-90deg) translate(-45px,-45px) rotateY(180deg);transform-origin:top center;width:130px}.orgchart.r2l .node .content{transform:rotate(-90deg) translate(-45px,-45px);transform-origin:top center;width:130px}.orgchart .node .edge{position:absolute;cursor:default;transition:.2s}.orgchart .node .edge::before{border-color:rgba(68,157,68,.5)}.orgchart.noncollapsable .node .edge{display:none}.orgchart .node .edge:hover{cursor:pointer}.orgchart .edge:hover::before{border-color:#449d44}.orgchart .node .verticalEdge{width:calc(100% - 6px);width:-webkit-calc(100% - 6px);width:-moz-calc(100% - 6px);height:10px;left:3px}.orgchart .node .verticalEdge::before{position:absolute;left:calc(50% - .3125rem)}.orgchart .node .topEdge{top:-2px}.orgchart .node .topEdge.oci-chevron-up::before{top:2px}.orgchart .node .topEdge.oci-chevron-down::before{bottom:3px}.orgchart .node .bottomEdge{bottom:-2px}.orgchart .node .bottomEdge.oci-chevron-up::before{bottom:-3px}.orgchart .node .bottomEdge.oci-chevron-down::before{bottom:1px}.orgchart .node .horizontalEdge{width:10px;height:calc(100% - 6px);height:-webkit-calc(100% - 6px);height:-moz-calc(100% - 6px);top:3px}.orgchart .node .rightEdge{right:-2px}.orgchart .node .leftEdge{left:-2px}.orgchart .node .horizontalEdge::before{position:absolute;top:calc(50% - .3125rem)}.orgchart .node .rightEdge.oci-chevron-left::before{right:-3px}.orgchart .node .rightEdge.oci-chevron-right::before{right:1px}.orgchart .node .leftEdge.oci-chevron-right::before{left:-3px}.orgchart .node .leftEdge.oci-chevron-left::before{left:1px}.orgchart .node .toggleBtn{position:absolute;left:5px;bottom:-2px;width:1rem;height:1rem}.orgchart .node .toggleBtn::before{background-color:rgba(68,157,68,.6)}.orgchart .node .toggleBtn:hover::before{background-color:#449d44}.oc-export-btn{margin-left:.5rem;padding:.5rem 1rem}.orgchart .node{transition:transform .3s,opacity .3s}.orgchart .slide-down{opacity:0;transform:translateY(40px)}.orgchart.l2r .node.slide-down,.orgchart.r2l .node.slide-down{transform:translateY(130px)}.orgchart .slide-up{opacity:0;transform:translateY(-40px)}.orgchart.l2r .node.slide-up,.orgchart.r2l .node.slide-up{transform:translateY(-130px)}.orgchart .slide-right{opacity:0;transform:translateX(130px)}.orgchart.l2r .node.slide-right,.orgchart.r2l .node.slide-right{transform:translateX(40px)}.orgchart .slide-left{opacity:0;transform:translateX(-130px)}.orgchart.l2r .node.slide-left,.orgchart.r2l .node.slide-left{transform:translateX(-40px)}.orgchart .hierarchy.hybrid>.node{margin-bottom:0}.orgchart .hierarchy.hybrid>.node::after{content:none}.orgchart .nodes.vertical{display:block;margin:0;padding-left:18px}.orgchart .nodes.vertical .nodes{list-style:none;display:block;margin:0;padding-left:18px;text-align:left}.orgchart .nodes.vertical .node{margin-bottom:0}.orgchart .nodes.vertical .node::after,.orgchart .nodes.vertical .node::before{content:none}.orgchart .nodes.vertical::before{content:'';display:inline-block;position:relative;height:14px;width:2px;left:-9px;background-color:rgba(217,83,79,.8)}.orgchart .nodes.vertical>.hierarchy:first-child::before{box-sizing:border-box;top:-4px;height:30px;width:calc(50% - 2px);border-width:2px 0 0 2px}.orgchart .nodes.vertical .hierarchy{position:relative;text-align:left}.orgchart .nodes.vertical .hierarchy::after,.orgchart .nodes.vertical .hierarchy::before{box-sizing:border-box;content:'';position:absolute;left:-6px;border-color:rgba(217,83,79,.8);border-style:solid;border-width:0 0 2px 2px}.orgchart .nodes.vertical .hierarchy::before{top:-4px;height:30px;width:11px}.orgchart .nodes.vertical .hierarchy::after{top:1px;height:100%}.orgchart .nodes.vertical .hierarchy:first-child::after{box-sizing:border-box;top:24px;width:11px;border-width:2px 0 0 2px}.orgchart .nodes.vertical .hierarchy:last-child::after{box-sizing:border-box;border-width:2px 0 0}.oci{display:inline-block;position:relative;font-style:normal;font-family:Arial}.oci-chevron-up::before{content:"";display:inline-block;box-sizing:border-box;vertical-align:text-bottom;width:.625rem;height:.625rem;border-width:0 .2rem .2rem 0;border-style:solid;border-color:#000;background:0 0;transform:rotate(-135deg)}.oci-chevron-right::before{content:"";display:inline-block;box-sizing:border-box;width:.625rem;height:.625rem;border-width:0 .2rem .2rem 0;border-style:solid;border-color:#000;background:0 0;transform:rotate(-45deg)}.oci-chevron-down::before{content:"";display:inline-block;box-sizing:border-box;width:.625rem;height:.625rem;border-width:0 .2rem .2rem 0;border-style:solid;border-color:#000;background:0 0;transform:rotate(45deg)}.oci-chevron-left::before{content:"";display:inline-block;box-sizing:border-box;width:.625rem;height:.625rem;border-width:0 .2rem .2rem 0;border-style:solid;border-color:#000;background:0 0;transform:rotate(135deg)}.oci-leader::before{position:absolute;content:"";display:inline-block;width:.4rem;height:.4rem;border-radius:.2rem;background:#000;top:-.75rem;left:.1rem}.oci-leader::after{position:absolute;content:"";display:inline-block;width:.875rem;height:.375rem;border-radius:.25rem .25rem 0 0;background:#000;top:-.3rem;left:-.125rem}.oci-plus-square::before{content:"+";display:inline-block;vertical-align:text-bottom;text-align:center;width:1rem;height:1rem;background-color:#000;color:#fff}.oci-plus-circle::before{content:"+";display:inline-block;vertical-align:text-bottom;text-align:center;width:1rem;height:1rem;border-radius:.5rem;background-color:#000;color:#fff}.oci-minus-square::before{content:"−";display:inline-block;vertical-align:text-bottom;text-align:center;width:1rem;height:1rem;background-color:#000;color:#fff}.oci-minus-circle::before{content:"−";display:inline-block;vertical-align:text-bottom;text-align:center;width:1rem;height:1rem;border-radius:.5rem;background-color:#000;color:#fff}.oci-arrow-circle-up::before{content:"▲";display:inline-block;text-align:center;vertical-align:text-bottom;width:1rem;height:1rem;border-radius:.5rem;background-color:#000;color:#fff;font-size:.875rem}.oci-arrow-circle-down::before{content:"▼";text-align:center;display:inline-block;vertical-align:text-bottom;width:1rem;height:1rem;border-radius:.5rem;background-color:#000;color:#fff;font-size:.875rem}.oci-info-circle::before{content:"i";display:inline-block;vertical-align:text-bottom;width:1rem;height:1rem;border-radius:.5rem;background-color:#000;color:#fff;text-align:center;font-weight:700}.oci-spinner::before{content:"";vertical-align:text-bottom;display:inline-block;box-sizing:border-box;width:1rem;height:1rem;border:.1rem solid #000;border-right-color:transparent;border-radius:.625rem;animation:oci-infinite-spinning .75s linear infinite}@keyframes oci-infinite-spinning{from{transform:rotate(0)}to{transform:rotate(360deg)}}
|
|
1
|
+
.orgchart{box-sizing:border-box;display:inline-block;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:linear-gradient(90deg,rgba(200,0,0,.15) 10%,rgba(0,0,0,0) 10%),linear-gradient(rgba(200,0,0,.15) 10%,rgba(0,0,0,0) 10%);background-size:10px 10px;border:1px dashed transparent;padding:20px 20px 0 20px}.orgchart .hidden,.orgchart~.hidden{display:none!important}.orgchart.b2t{transform:rotate(180deg)}.orgchart.l2r{position:absolute;transform:rotate(-90deg) rotateY(180deg);transform-origin:left top;text-align:center}.orgchart.r2l{position:absolute;transform:rotate(90deg);transform-origin:left top;text-align:center}.orgchart~.mask{position:absolute;top:0;right:0;bottom:0;left:0;z-index:999;text-align:center;background-color:rgba(0,0,0,.3)}.orgchart~.mask .spinner{position:absolute;top:calc(50% - 50px);left:calc(50% - 50px)}.orgchart>.spinner::before,.orgchart~.mask .spinner::before{width:100px;height:100px;border-width:10px;border-radius:50px;border-top-color:rgba(68,157,68,.8);border-bottom-color:rgba(68,157,68,.8);border-left-color:rgba(68,157,68,.8)}.orgchart .nodes{display:flex;list-style:none;padding-left:0;margin:0}.orgchart .hierarchy{position:relative}.orgchart .hierarchy::before{content:"";position:absolute;top:-11px;left:0;width:100%;border-top:2px solid rgba(217,83,79,.8);box-sizing:border-box}.orgchart .hierarchy.isSiblingsCollapsed.left-sibs::before,.orgchart .hierarchy:first-child::before{left:calc(50% - 1px);width:calc(50% + 1px)}.orgchart .hierarchy.isSiblingsCollapsed.right-sibs::before,.orgchart .hierarchy:last-child::before{width:calc(50% + 1px)}.orgchart .hierarchy:not(.hidden):only-child::before{width:2px}.orgchart .isAncestorsCollapsed:only-child::before,.orgchart .isAncestorsCollapsed>.node::before,.orgchart .isChildrenCollapsed>.node:not(:only-child)::after,.orgchart .isCollapsedDescendant::before,.orgchart .isCollapsedDescendant>.node::after,.orgchart .isCollapsedDescendant>.node::before,.orgchart .isCollapsedSibling .hierarchy::before,.orgchart .isCollapsedSibling::before,.orgchart .isSiblingsCollapsed.left-sibs.right-sibs::before,.orgchart .isSiblingsCollapsed.left-sibs:last-child:before,.orgchart .isSiblingsCollapsed.right-sibs:first-child:before,.orgchart .isSiblingsCollapsed:not(.left-sibs):not(.right-sibs)::before,.orgchart>.nodes>.hierarchy::before{content:none}.orgchart .node:not(:only-child)::after{content:"";position:absolute;bottom:-11px;left:calc(50% - 1px);width:2px;height:9px;background-color:rgba(217,83,79,.8)}.orgchart ul li .node.allowedDrop{border-color:rgba(68,157,68,.9)}.orgchart ul li .node.currentDropTarget{background-color:rgba(68,157,68,.9)}.orgchart ul li .node.selected{background-color:rgba(238,217,54,.5)}.orgchart ul li .node:hover{background-color:rgba(238,217,54,.5)}.orgchart>ul>li>ul li>.node::before{content:"";position:absolute;top:var(--top,-11px);left:calc(50% - 1px);width:2px;height:var(--height,9px);background-color:rgba(217,83,79,.8)}.orgchart>ul>li>ul li.isSiblingsCollapsed>.node::before{top:var(--top-cross-point,-13px);height:var(--height-cross-point,11px)}.orgchart .node{box-sizing:border-box;display:inline-block;position:relative;margin:0 0 20px 0;padding:3px;border:2px dashed transparent;text-align:center}.orgchart.l2r .node,.orgchart.r2l .node{width:50px;height:140px}.orgchart .node:hover{background-color:rgba(238,217,54,.5);transition:.5s;cursor:default;z-index:20}.orgchart .node.focused{background-color:rgba(238,217,54,.5)}.orgchart .ghost-node{position:fixed;left:-10000px;top:-10000px}.orgchart .ghost-node rect{fill:#fff;stroke:#bf0000}.orgchart .node.allowedDrop{border-color:rgba(68,157,68,.9)}.orgchart .node>.spinner{position:absolute;top:calc(50% - 1rem);left:calc(50% - 1rem)}.orgchart .node>.spinner::before{width:2rem;height:2rem;border-width:.2rem;border-radius:1rem;border-top-color:rgba(68,157,68,.8);border-bottom-color:rgba(68,157,68,.8);border-left-color:rgba(68,157,68,.8)}.orgchart .node .title{box-sizing:border-box;padding:2px;width:130px;text-align:center;font-size:.75rem;font-weight:700;height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(217,83,79,.8);color:#fff;border-radius:4px 4px 0 0}.orgchart.b2t .node .title{transform:rotate(-180deg);transform-origin:center bottom}.orgchart.l2r .node .title{transform:rotate(-90deg) translate(-45px,-45px) rotateY(180deg);transform-origin:bottom center}.orgchart.r2l .node .title{transform:rotate(-90deg) translate(-45px,-45px);transform-origin:bottom center}.orgchart .node .title .symbol{float:left;margin-top:12px;margin-left:2px}.orgchart .node .title .symbol::before{background-color:#fff;border-color:rgba(217,83,79,.8)}.orgchart .node .title .symbol::after{background-color:#fff}.orgchart .node .content{box-sizing:border-box;padding:2px;height:20px;font-size:.625rem;border:1px solid rgba(217,83,79,.8);border-radius:0 0 4px 4px;text-align:center;background-color:#fff;color:#333;text-overflow:ellipsis;white-space:nowrap}.orgchart.b2t .node .content{transform:rotate(180deg);transform-origin:center top}.orgchart.l2r .node .content{transform:rotate(-90deg) translate(-45px,-45px) rotateY(180deg);transform-origin:top center;width:130px}.orgchart.r2l .node .content{transform:rotate(-90deg) translate(-45px,-45px);transform-origin:top center;width:130px}.orgchart .node .edge{position:absolute;cursor:default;transition:.2s}.orgchart .node .edge::before{border-color:rgba(68,157,68,.5)}.orgchart.noncollapsable .node .edge{display:none}.orgchart .node .edge:hover{cursor:pointer}.orgchart .edge:hover::before{border-color:#449d44}.orgchart .node .verticalEdge{width:calc(100% - 6px);width:-webkit-calc(100% - 6px);width:-moz-calc(100% - 6px);height:10px;left:3px}.orgchart .node .verticalEdge::before{position:absolute;left:calc(50% - .3125rem)}.orgchart .node .topEdge{top:-2px}.orgchart .node .topEdge.oci-chevron-up::before{top:2px}.orgchart .node .topEdge.oci-chevron-down::before{bottom:3px}.orgchart .node .bottomEdge{bottom:-2px}.orgchart .node .bottomEdge.oci-chevron-up::before{bottom:-3px}.orgchart .node .bottomEdge.oci-chevron-down::before{bottom:1px}.orgchart .node .horizontalEdge{width:10px;height:calc(100% - 6px);height:-webkit-calc(100% - 6px);height:-moz-calc(100% - 6px);top:3px}.orgchart .node .rightEdge{right:-2px}.orgchart .node .leftEdge{left:-2px}.orgchart .node .horizontalEdge::before{position:absolute;top:calc(50% - .3125rem)}.orgchart .node .rightEdge.oci-chevron-left::before{right:-3px}.orgchart .node .rightEdge.oci-chevron-right::before{right:1px}.orgchart .node .leftEdge.oci-chevron-right::before{left:-3px}.orgchart .node .leftEdge.oci-chevron-left::before{left:1px}.orgchart .node .toggleBtn{position:absolute;left:5px;bottom:-2px;width:1rem;height:1rem}.orgchart .node .toggleBtn::before{background-color:rgba(68,157,68,.6)}.orgchart .node .toggleBtn:hover::before{background-color:#449d44}.oc-export-btn{margin-left:.5rem;padding:.5rem 1rem}.orgchart .node{transition:transform .3s,opacity .3s}.orgchart .slide-down{opacity:0;transform:translateY(40px)}.orgchart.l2r .node.slide-down,.orgchart.r2l .node.slide-down{transform:translateY(130px)}.orgchart .slide-up{opacity:0;transform:translateY(-40px)}.orgchart.l2r .node.slide-up,.orgchart.r2l .node.slide-up{transform:translateY(-130px)}.orgchart .slide-right{opacity:0;transform:translateX(130px)}.orgchart.l2r .node.slide-right,.orgchart.r2l .node.slide-right{transform:translateX(40px)}.orgchart .slide-left{opacity:0;transform:translateX(-130px)}.orgchart.l2r .node.slide-left,.orgchart.r2l .node.slide-left{transform:translateX(-40px)}.orgchart .nodes.vertical{display:block;padding-left:18px}.orgchart .nodes.vertical .nodes{list-style:none;display:block;margin:0;padding-left:18px;text-align:left}.orgchart .nodes.vertical .node{margin-bottom:0}.orgchart .nodes.vertical .node::after,.orgchart .nodes.vertical .node::before{content:none}.orgchart .nodes.vertical>.hierarchy:first-child::before{box-sizing:border-box;top:-11px;height:35px;width:calc(50% - 2px);border-width:2px 0 0 2px}.orgchart .nodes.vertical .hierarchy{position:relative;text-align:left}.orgchart .nodes.vertical .hierarchy::after,.orgchart .nodes.vertical .hierarchy::before{box-sizing:border-box;content:'';position:absolute;left:-6px;border-color:rgba(217,83,79,.8);border-style:solid;border-width:0 0 2px 2px}.orgchart .nodes.vertical .hierarchy::before{top:-4px;height:30px;width:11px}.orgchart .nodes.vertical .hierarchy::after{top:1px;height:100%}.orgchart .nodes.vertical .hierarchy:first-child::after{box-sizing:border-box;top:24px;width:11px;border-width:2px 0 0 2px}.orgchart .nodes.vertical .hierarchy:last-child::after{box-sizing:border-box;border-width:2px 0 0}.oci{display:inline-block;position:relative;font-style:normal;font-family:Arial}.oci-chevron-up::before{content:"";display:inline-block;box-sizing:border-box;vertical-align:text-bottom;width:.625rem;height:.625rem;border-width:0 .2rem .2rem 0;border-style:solid;border-color:#000;background:0 0;transform:rotate(-135deg)}.oci-chevron-right::before{content:"";display:inline-block;box-sizing:border-box;width:.625rem;height:.625rem;border-width:0 .2rem .2rem 0;border-style:solid;border-color:#000;background:0 0;transform:rotate(-45deg)}.oci-chevron-down::before{content:"";display:inline-block;box-sizing:border-box;width:.625rem;height:.625rem;border-width:0 .2rem .2rem 0;border-style:solid;border-color:#000;background:0 0;transform:rotate(45deg)}.oci-chevron-left::before{content:"";display:inline-block;box-sizing:border-box;width:.625rem;height:.625rem;border-width:0 .2rem .2rem 0;border-style:solid;border-color:#000;background:0 0;transform:rotate(135deg)}.oci-leader::before{position:absolute;content:"";display:inline-block;width:.4rem;height:.4rem;border-radius:.2rem;background:#000;top:-.75rem;left:.1rem}.oci-leader::after{position:absolute;content:"";display:inline-block;width:.875rem;height:.375rem;border-radius:.25rem .25rem 0 0;background:#000;top:-.3rem;left:-.125rem}.oci-plus-square::before{content:"+";display:inline-block;vertical-align:text-bottom;text-align:center;width:1rem;height:1rem;background-color:#000;color:#fff}.oci-plus-circle::before{content:"+";display:inline-block;vertical-align:text-bottom;text-align:center;width:1rem;height:1rem;border-radius:.5rem;background-color:#000;color:#fff}.oci-minus-square::before{content:"−";display:inline-block;vertical-align:text-bottom;text-align:center;width:1rem;height:1rem;background-color:#000;color:#fff}.oci-minus-circle::before{content:"−";display:inline-block;vertical-align:text-bottom;text-align:center;width:1rem;height:1rem;border-radius:.5rem;background-color:#000;color:#fff}.oci-arrow-circle-up::before{content:"▲";display:inline-block;text-align:center;vertical-align:text-bottom;width:1rem;height:1rem;border-radius:.5rem;background-color:#000;color:#fff;font-size:.875rem}.oci-arrow-circle-down::before{content:"▼";text-align:center;display:inline-block;vertical-align:text-bottom;width:1rem;height:1rem;border-radius:.5rem;background-color:#000;color:#fff;font-size:.875rem}.oci-info-circle::before{content:"i";display:inline-block;vertical-align:text-bottom;width:1rem;height:1rem;border-radius:.5rem;background-color:#000;color:#fff;text-align:center;font-weight:700}.oci-spinner::before{content:"";vertical-align:text-bottom;display:inline-block;box-sizing:border-box;width:1rem;height:1rem;border:.1rem solid #000;border-right-color:transparent;border-radius:.625rem;animation:oci-infinite-spinning .75s linear infinite}@keyframes oci-infinite-spinning{from{transform:rotate(0)}to{transform:rotate(360deg)}}
|
|
@@ -373,6 +373,9 @@
|
|
|
373
373
|
data.relationship = flags + (data.children && data.children.length > 0 ? 1 : 0);
|
|
374
374
|
if (data.children) {
|
|
375
375
|
data.children.forEach(function(item) {
|
|
376
|
+
if (data.isHybrid || data.isVertical) {
|
|
377
|
+
item.isVertical = true;
|
|
378
|
+
}
|
|
376
379
|
that.attachRel(item, '1' + (data.children.length > 1 ? 1 : 0));
|
|
377
380
|
});
|
|
378
381
|
}
|
|
@@ -1093,7 +1096,8 @@
|
|
|
1093
1096
|
this.$chart.find('.allowedDrop').removeClass('allowedDrop');
|
|
1094
1097
|
},
|
|
1095
1098
|
// when user drops the node, it will be removed from original parent node and be added to new parent node
|
|
1096
|
-
dropHandler: function (event) {
|
|
1099
|
+
dropHandler: async function (event) {
|
|
1100
|
+
var that = this;
|
|
1097
1101
|
var $dropZone = $(event.delegateTarget);
|
|
1098
1102
|
var $dragged = this.$chart.data('dragged');
|
|
1099
1103
|
|
|
@@ -1115,33 +1119,51 @@
|
|
|
1115
1119
|
if (dropEvent.isDefaultPrevented()) {
|
|
1116
1120
|
return;
|
|
1117
1121
|
}
|
|
1118
|
-
//
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1122
|
+
// special process for hybrid chart
|
|
1123
|
+
var datasource = this.$chart.data('options').data;
|
|
1124
|
+
var digger = new JSONDigger(datasource, this.$chart.data('options').nodeId, 'children');
|
|
1125
|
+
const hybridNode = digger.findOneNode({ 'isHybrid': true });
|
|
1126
|
+
if (this.$chart.data('options').verticalLevel > 1 || hybridNode) {
|
|
1127
|
+
var draggedNode = digger.findNodeById($dragged.data('nodeData').id);
|
|
1128
|
+
var copy = Object.assign({}, draggedNode);
|
|
1129
|
+
digger.removeNode(draggedNode.id);
|
|
1130
|
+
var dropNode = digger.findNodeById($dropZone.data('nodeData').id);
|
|
1131
|
+
if (dropNode.children) {
|
|
1132
|
+
dropNode.children.push(copy);
|
|
1133
|
+
} else {
|
|
1134
|
+
dropNode.children = [copy];
|
|
1125
1135
|
}
|
|
1136
|
+
that.init({ 'data': datasource });
|
|
1126
1137
|
} else {
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1138
|
+
// The folowing code snippets are used to process horizontal chart
|
|
1139
|
+
// firstly, deal with the hierarchy of drop zone
|
|
1140
|
+
if (!$dropZone.siblings('.nodes').length) { // if the drop zone is a leaf node
|
|
1141
|
+
$dropZone.append('<i class="edge verticalEdge bottomEdge oci"></i>')
|
|
1142
|
+
.after('<ul class="nodes"></ul>')
|
|
1143
|
+
.siblings('.nodes').append($dragged.find('.horizontalEdge').remove().end().closest('.hierarchy'));
|
|
1144
|
+
if ($dropZone.children('.title').length) {
|
|
1145
|
+
$dropZone.children('.title').prepend('<i class="oci '+ this.$chart.data('options').parentNodeSymbol + ' symbol"></i>');
|
|
1146
|
+
}
|
|
1147
|
+
} else {
|
|
1148
|
+
var horizontalEdges = '<i class="edge horizontalEdge rightEdge oci"></i><i class="edge horizontalEdge leftEdge oci"></i>';
|
|
1149
|
+
if (!$dragged.find('.horizontalEdge').length) {
|
|
1150
|
+
$dragged.append(horizontalEdges);
|
|
1151
|
+
}
|
|
1152
|
+
$dropZone.siblings('.nodes').append($dragged.closest('.hierarchy'));
|
|
1153
|
+
var $dropSibs = $dragged.closest('.hierarchy').siblings().find('.node:first');
|
|
1154
|
+
if ($dropSibs.length === 1) {
|
|
1155
|
+
$dropSibs.append(horizontalEdges);
|
|
1156
|
+
}
|
|
1130
1157
|
}
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1158
|
+
// secondly, deal with the hierarchy of dragged node
|
|
1159
|
+
if ($dragZone.siblings('.nodes').children('.hierarchy').length === 1) { // if there is only one sibling node left
|
|
1160
|
+
$dragZone.siblings('.nodes').children('.hierarchy').find('.node:first')
|
|
1161
|
+
.find('.horizontalEdge').remove();
|
|
1162
|
+
} else if ($dragZone.siblings('.nodes').children('.hierarchy').length === 0) {
|
|
1163
|
+
$dragZone.find('.bottomEdge, .symbol').remove()
|
|
1164
|
+
.end().siblings('.nodes').remove();
|
|
1135
1165
|
}
|
|
1136
1166
|
}
|
|
1137
|
-
// secondly, deal with the hierarchy of dragged node
|
|
1138
|
-
if ($dragZone.siblings('.nodes').children('.hierarchy').length === 1) { // if there is only one sibling node left
|
|
1139
|
-
$dragZone.siblings('.nodes').children('.hierarchy').find('.node:first')
|
|
1140
|
-
.find('.horizontalEdge').remove();
|
|
1141
|
-
} else if ($dragZone.siblings('.nodes').children('.hierarchy').length === 0) {
|
|
1142
|
-
$dragZone.find('.bottomEdge, .symbol').remove()
|
|
1143
|
-
.end().siblings('.nodes').remove();
|
|
1144
|
-
}
|
|
1145
1167
|
},
|
|
1146
1168
|
//
|
|
1147
1169
|
touchstartHandler: function (event) {
|
|
@@ -1324,11 +1346,16 @@
|
|
|
1324
1346
|
$nodeDiv.data('nodeData', nodeData);
|
|
1325
1347
|
// append 4 direction arrows or expand/collapse buttons
|
|
1326
1348
|
var flags = data.relationship || '';
|
|
1327
|
-
if (opts.verticalLevel && level >= opts.verticalLevel) {
|
|
1328
|
-
if (
|
|
1349
|
+
if ((opts.verticalLevel && level >= opts.verticalLevel) || data.isVertical) {
|
|
1350
|
+
if (Number(flags.substr(2,1))) {
|
|
1329
1351
|
$nodeDiv.append('<i class="toggleBtn oci"></i>')
|
|
1330
1352
|
.children('.title').prepend('<i class="oci '+ opts.parentNodeSymbol + ' symbol"></i>');
|
|
1331
1353
|
}
|
|
1354
|
+
} else if (data.isHybrid) {
|
|
1355
|
+
if (Number(flags.substr(2,1))) {
|
|
1356
|
+
$nodeDiv.append('<i class="edge verticalEdge bottomEdge oci"></i>')
|
|
1357
|
+
.children('.title').prepend('<i class="oci '+ opts.parentNodeSymbol + ' symbol"></i>');
|
|
1358
|
+
}
|
|
1332
1359
|
} else {
|
|
1333
1360
|
if (Number(flags.substr(0,1))) {
|
|
1334
1361
|
$nodeDiv.append('<i class="edge verticalEdge topEdge oci"></i>');
|
|
@@ -1375,25 +1402,20 @@
|
|
|
1375
1402
|
}
|
|
1376
1403
|
// Construct the node
|
|
1377
1404
|
if (Object.keys(data).length > 2) {
|
|
1378
|
-
|
|
1379
|
-
if (opts.verticalLevel && level >= opts.verticalLevel) {
|
|
1380
|
-
$appendTo.append($nodeDiv);
|
|
1381
|
-
} else {
|
|
1382
|
-
$appendTo.append($nodeDiv);
|
|
1383
|
-
}
|
|
1405
|
+
$appendTo.append(this.createNode(data));
|
|
1384
1406
|
}
|
|
1385
1407
|
// Construct the "inferior nodes"
|
|
1386
1408
|
if (data.children && data.children.length) {
|
|
1387
1409
|
var isHidden = level + 1 > opts.visibleLevel || (data.collapsed !== undefined && data.collapsed);
|
|
1388
|
-
var isVerticalLayer = opts.verticalLevel && (level + 1) >= opts.verticalLevel;
|
|
1389
1410
|
var $nodesLayer;
|
|
1390
|
-
if (
|
|
1411
|
+
if ((opts.verticalLevel && (level + 1) >= opts.verticalLevel) || data.isHybrid) {
|
|
1391
1412
|
$nodesLayer = $('<ul class="nodes">');
|
|
1392
|
-
if (isHidden && level + 1 >= opts.verticalLevel) {
|
|
1413
|
+
if (isHidden && (opts.verticalLevel && (level + 1) >= opts.verticalLevel)) {
|
|
1393
1414
|
$nodesLayer.addClass('hidden');
|
|
1394
1415
|
}
|
|
1395
|
-
if (level + 1 === opts.verticalLevel)
|
|
1396
|
-
|
|
1416
|
+
if (((opts.verticalLevel && level + 1 === opts.verticalLevel) || data.isHybrid)
|
|
1417
|
+
&& !$appendTo.closest('.vertical').length) {
|
|
1418
|
+
$appendTo.append($nodesLayer.addClass('vertical'));
|
|
1397
1419
|
} else {
|
|
1398
1420
|
$appendTo.append($nodesLayer);
|
|
1399
1421
|
}
|