orgchart 3.4.0 → 3.6.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 +21 -1
- package/demo/drag-drop.html +1 -0
- package/demo/export-chart-with-pictures.html +89 -0
- package/demo/index.html +2 -0
- package/demo/isHybrid.html +71 -0
- package/dist/css/jquery.orgchart.css +2 -19
- package/dist/css/jquery.orgchart.min.css +1 -1
- package/dist/js/jquery.orgchart.js +56 -55
- 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 +2 -2
- package/src/css/jquery.orgchart.css +2 -19
- package/src/js/jquery.orgchart.js +56 -55
- package/test/integration/init-tests.js +4 -4
package/README.md
CHANGED
|
@@ -87,6 +87,12 @@ Here, we need the help from [html2canvas](https://github.com/niklasvh/html2canva
|
|
|
87
87
|
|
|
88
88
|
(3) Besides, if you wanna export a pdf format or your orgchart includes picture, you have to introduce [jspdf](https://github.com/MrRio/jsPDF) and set "exportFileextension" option to "pdf".
|
|
89
89
|
|
|
90
|
+
- [I wanna export the orgchart with nodes containing pictures](https://dabeng.github.io/OrgChart/export-chart-with-pictures.html)
|
|
91
|
+
|
|
92
|
+
You need to set crossorigin to anonymous for your img tags.
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
|
|
90
96
|
- [I wanna itegrate organization chart with geographic information](https://dabeng.github.io/OrgChart/integrate-map.html)
|
|
91
97
|
|
|
92
98
|
Here, we fall back on [OpenLayers](https://github.com/openlayers/ol3). It's the most aewsome open-source js library for Web GIS you sholdn't miss.
|
|
@@ -135,7 +141,21 @@ No problem. With the help of ES6 Template literals, we can customize the any com
|
|
|
135
141
|
|
|
136
142
|
- [I want to position node in specific level. How can i do that ?](https://dabeng.github.io/OrgChart/level-offset.html)
|
|
137
143
|
|
|
138
|
-
|
|
144
|
+
|
|
145
|
+
|
|
146
|
+
You need the solution based on new datasource structure with **levelOffset data prop** + callback createNode() + CSS custom properties(variables)
|
|
147
|
+
|
|
148
|
+
- [I want a orgchart with nodes of different widths](https://dabeng.github.io/OrgChart/nodes-of-different-widths.html)
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
- [I want to drag&drop in the hybrid chart](https://dabeng.github.io/OrgChart/drag-drop-hybrid-chart.html)
|
|
153
|
+
|
|
154
|
+
- [ 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)
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
**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
159
|
|
|
140
160
|
### how to start up demos locally
|
|
141
161
|
|
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
|
|
|
@@ -0,0 +1,89 @@
|
|
|
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 {
|
|
11
|
+
height: 550px;
|
|
12
|
+
}
|
|
13
|
+
.orgchart .node .title {
|
|
14
|
+
height: unset;
|
|
15
|
+
text-align: left;
|
|
16
|
+
line-height: 40px;
|
|
17
|
+
width: 150px;
|
|
18
|
+
}
|
|
19
|
+
.orgchart .node .content {
|
|
20
|
+
text-align: left;
|
|
21
|
+
padding: 5px;
|
|
22
|
+
}
|
|
23
|
+
.orgchart .node .content .symbol {
|
|
24
|
+
color: #aaa;
|
|
25
|
+
margin-right: 20px;
|
|
26
|
+
}
|
|
27
|
+
.oci-leader::before, .oci-leader::after {
|
|
28
|
+
background-color: rgba(217, 83, 79, 0.8);
|
|
29
|
+
}
|
|
30
|
+
.orgchart .node .avatar {
|
|
31
|
+
width: 60px;
|
|
32
|
+
height: 60px;
|
|
33
|
+
border-radius: 30px;
|
|
34
|
+
float: left;
|
|
35
|
+
margin: 5px;
|
|
36
|
+
}
|
|
37
|
+
</style>
|
|
38
|
+
</head>
|
|
39
|
+
<body>
|
|
40
|
+
<div id="chart-container"></div>
|
|
41
|
+
|
|
42
|
+
<script type="text/javascript" src="js/jquery.min.js"></script>
|
|
43
|
+
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
|
|
44
|
+
<script type="text/javascript" src="js/html2canvas.min.js"></script>
|
|
45
|
+
<script type="text/javascript">
|
|
46
|
+
$(function() {
|
|
47
|
+
|
|
48
|
+
var datascource = {
|
|
49
|
+
'id': '1',
|
|
50
|
+
'name': 'Lao Lao',
|
|
51
|
+
'title': 'general manager',
|
|
52
|
+
'children': [
|
|
53
|
+
{ 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' },
|
|
54
|
+
{ 'id': '3', 'name': 'Su Miao', 'title': 'department manager',
|
|
55
|
+
'children': [
|
|
56
|
+
{ 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' },
|
|
57
|
+
{ 'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer',
|
|
58
|
+
'children': [
|
|
59
|
+
{ 'id': '6', 'name': 'Pang Pang', 'title': 'engineer' },
|
|
60
|
+
{ 'id': '7', 'name': 'Xiang Xiang', 'title': 'UE engineer' }
|
|
61
|
+
]
|
|
62
|
+
}
|
|
63
|
+
]
|
|
64
|
+
},
|
|
65
|
+
{ 'id': '8', 'name': 'Yu Jie', 'title': 'department manager' },
|
|
66
|
+
{ 'id': '9', 'name': 'Yu Li', 'title': 'department manager' },
|
|
67
|
+
{ 'id': '10', 'name': 'Hong Miao', 'title': 'department manager' },
|
|
68
|
+
{ 'id': '11', 'name': 'Yu Wei', 'title': 'department manager' },
|
|
69
|
+
{ 'id': '12', 'name': 'Chun Miao', 'title': 'department manager' },
|
|
70
|
+
{ 'id': '13', 'name': 'Yu Tie', 'title': 'department manager' }
|
|
71
|
+
]
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
$('#chart-container').orgchart({
|
|
75
|
+
'exportButton': true,
|
|
76
|
+
'exportFilename': 'MyOrgChart',
|
|
77
|
+
'data' : datascource,
|
|
78
|
+
'nodeContent': 'title',
|
|
79
|
+
'nodeID': 'id',
|
|
80
|
+
'createNode': function($node, data) {
|
|
81
|
+
$node.find('.title').append(`<img class="avatar" src="https://dabeng.github.io/OrgChart/img/avatar/${data.id}.jpg" crossorigin="anonymous" />`);
|
|
82
|
+
$node.find('.content').prepend($node.find('.symbol'));
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
});
|
|
87
|
+
</script>
|
|
88
|
+
</body>
|
|
89
|
+
</html>
|
package/demo/index.html
CHANGED
|
@@ -124,6 +124,7 @@
|
|
|
124
124
|
<li><a href="edit-chart.html" target="_blank">edit chart</a></li>
|
|
125
125
|
<li><a href="edit-hybrid-chart.html" target="_blank">edit hybrid chart</a></li>
|
|
126
126
|
<li><a href="export-chart.html" target="_blank">export chart as a picture</a></li>
|
|
127
|
+
<li><a href="export-chart-with-pictures.html" target="_blank">export chart with pictures</a></li>
|
|
127
128
|
<li><a href="export-chart-pdf.html" target="_blank">export chart as a PDF</a></li>
|
|
128
129
|
<li><a href="filter-node.html" target="_blank">filter node</a></li>
|
|
129
130
|
<li><a href="get-hierarchy.html" target="_blank">getHierarchy() method</a></li>
|
|
@@ -144,6 +145,7 @@
|
|
|
144
145
|
<li><a href="level-offset.html" target="_blank">position node in specific level</a></li>
|
|
145
146
|
<li><a href="nodes-of-different-widths.html" target="_blank">nodes of different widths</a></li>
|
|
146
147
|
<li><a href="drag-drop-hybrid-chart.html" target="_blank">drag&drop in hybrid chart</a></li>
|
|
148
|
+
<li><a href="isHybrid.html" target="_blank">create hybrid chart with isHybrid</a></li>
|
|
147
149
|
</ol>
|
|
148
150
|
</section>
|
|
149
151
|
</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>
|
|
@@ -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,7 @@
|
|
|
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) {
|
|
1097
1100
|
var that = this;
|
|
1098
1101
|
var $dropZone = $(event.delegateTarget);
|
|
1099
1102
|
var $dragged = this.$chart.data('dragged');
|
|
@@ -1117,52 +1120,50 @@
|
|
|
1117
1120
|
return;
|
|
1118
1121
|
}
|
|
1119
1122
|
// special process for hybrid chart
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
that.init({ 'data': datasource });
|
|
1133
|
-
});
|
|
1134
|
-
});
|
|
1135
|
-
});
|
|
1136
|
-
} else {
|
|
1137
|
-
// The folowing code snippets are used to process horizontal chart
|
|
1138
|
-
// firstly, deal with the hierarchy of drop zone
|
|
1139
|
-
if (!$dropZone.siblings('.nodes').length) { // if the drop zone is a leaf node
|
|
1140
|
-
$dropZone.append('<i class="edge verticalEdge bottomEdge oci"></i>')
|
|
1141
|
-
.after('<ul class="nodes"></ul>')
|
|
1142
|
-
.siblings('.nodes').append($dragged.find('.horizontalEdge').remove().end().closest('.hierarchy'));
|
|
1143
|
-
if ($dropZone.children('.title').length) {
|
|
1144
|
-
$dropZone.children('.title').prepend('<i class="oci '+ this.$chart.data('options').parentNodeSymbol + ' symbol"></i>');
|
|
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];
|
|
1145
1135
|
}
|
|
1136
|
+
that.init({ 'data': datasource });
|
|
1146
1137
|
} else {
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
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
|
+
}
|
|
1150
1157
|
}
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
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();
|
|
1155
1165
|
}
|
|
1156
1166
|
}
|
|
1157
|
-
// secondly, deal with the hierarchy of dragged node
|
|
1158
|
-
if ($dragZone.siblings('.nodes').children('.hierarchy').length === 1) { // if there is only one sibling node left
|
|
1159
|
-
$dragZone.siblings('.nodes').children('.hierarchy').find('.node:first')
|
|
1160
|
-
.find('.horizontalEdge').remove();
|
|
1161
|
-
} else if ($dragZone.siblings('.nodes').children('.hierarchy').length === 0) {
|
|
1162
|
-
$dragZone.find('.bottomEdge, .symbol').remove()
|
|
1163
|
-
.end().siblings('.nodes').remove();
|
|
1164
|
-
}
|
|
1165
|
-
}
|
|
1166
1167
|
},
|
|
1167
1168
|
//
|
|
1168
1169
|
touchstartHandler: function (event) {
|
|
@@ -1345,11 +1346,16 @@
|
|
|
1345
1346
|
$nodeDiv.data('nodeData', nodeData);
|
|
1346
1347
|
// append 4 direction arrows or expand/collapse buttons
|
|
1347
1348
|
var flags = data.relationship || '';
|
|
1348
|
-
if (opts.verticalLevel && level >= opts.verticalLevel) {
|
|
1349
|
-
if (
|
|
1349
|
+
if ((opts.verticalLevel && level >= opts.verticalLevel) || data.isVertical) {
|
|
1350
|
+
if (Number(flags.substr(2,1))) {
|
|
1350
1351
|
$nodeDiv.append('<i class="toggleBtn oci"></i>')
|
|
1351
1352
|
.children('.title').prepend('<i class="oci '+ opts.parentNodeSymbol + ' symbol"></i>');
|
|
1352
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
|
+
}
|
|
1353
1359
|
} else {
|
|
1354
1360
|
if (Number(flags.substr(0,1))) {
|
|
1355
1361
|
$nodeDiv.append('<i class="edge verticalEdge topEdge oci"></i>');
|
|
@@ -1396,25 +1402,20 @@
|
|
|
1396
1402
|
}
|
|
1397
1403
|
// Construct the node
|
|
1398
1404
|
if (Object.keys(data).length > 2) {
|
|
1399
|
-
|
|
1400
|
-
if (opts.verticalLevel && level >= opts.verticalLevel) {
|
|
1401
|
-
$appendTo.append($nodeDiv);
|
|
1402
|
-
} else {
|
|
1403
|
-
$appendTo.append($nodeDiv);
|
|
1404
|
-
}
|
|
1405
|
+
$appendTo.append(this.createNode(data));
|
|
1405
1406
|
}
|
|
1406
1407
|
// Construct the "inferior nodes"
|
|
1407
1408
|
if (data.children && data.children.length) {
|
|
1408
1409
|
var isHidden = level + 1 > opts.visibleLevel || (data.collapsed !== undefined && data.collapsed);
|
|
1409
|
-
var isVerticalLayer = opts.verticalLevel && (level + 1) >= opts.verticalLevel;
|
|
1410
1410
|
var $nodesLayer;
|
|
1411
|
-
if (
|
|
1411
|
+
if ((opts.verticalLevel && (level + 1) >= opts.verticalLevel) || data.isHybrid) {
|
|
1412
1412
|
$nodesLayer = $('<ul class="nodes">');
|
|
1413
|
-
if (isHidden && level + 1 >= opts.verticalLevel) {
|
|
1413
|
+
if (isHidden && (opts.verticalLevel && (level + 1) >= opts.verticalLevel)) {
|
|
1414
1414
|
$nodesLayer.addClass('hidden');
|
|
1415
1415
|
}
|
|
1416
|
-
if (level + 1 === opts.verticalLevel)
|
|
1417
|
-
|
|
1416
|
+
if (((opts.verticalLevel && level + 1 === opts.verticalLevel) || data.isHybrid)
|
|
1417
|
+
&& !$appendTo.closest('.vertical').length) {
|
|
1418
|
+
$appendTo.append($nodesLayer.addClass('vertical'));
|
|
1418
1419
|
} else {
|
|
1419
1420
|
$appendTo.append($nodesLayer);
|
|
1420
1421
|
}
|