orgchart 3.7.0 → 3.8.1
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 +39 -3
- package/demo/custom-icons.html +1 -1
- package/demo/data-prop-compact.html +82 -0
- package/demo/{isHybrid.html → data-prop-hybrid.html} +1 -1
- package/demo/index.html +2 -1
- package/dist/css/jquery.orgchart.css +189 -0
- package/dist/css/jquery.orgchart.min.css +1 -1
- package/dist/js/jquery.orgchart.js +80 -14
- package/dist/js/jquery.orgchart.min.js +4 -1
- package/dist/js/jquery.orgchart.min.js.map +1 -1
- package/gulpfile.js +1 -1
- package/package.json +2 -2
- package/src/css/jquery.orgchart.css +189 -0
- package/src/js/jquery.orgchart.js +80 -14
package/README.md
CHANGED
|
@@ -151,14 +151,20 @@ You need the solution based on new datasource structure with **levelOffset data
|
|
|
151
151
|
|
|
152
152
|
- [I want to drag&drop in the hybrid chart](https://dabeng.github.io/OrgChart/drag-drop-hybrid-chart.html)
|
|
153
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/
|
|
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/data-prop-hybrid.html)
|
|
155
155
|
|
|
156
|
-
|
|
157
157
|
|
|
158
|
-
**
|
|
158
|
+
**hybrid data property** is designed for your use case. Once node data includes a "hybrid" prop with truthy value, its descendant nodes will be arranged vertically.
|
|
159
159
|
|
|
160
160
|
- [I want to replace built-in icons with Font Awesome icons](https://dabeng.github.io/OrgChart/custom-icons.html)
|
|
161
161
|
|
|
162
|
+
- [ I want to alternate layout if children is too many](https://dabeng.github.io/OrgChart/data-prop-compact.html)
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
**compact data property** is designed for your use case. Once node data includes a "compact" prop with truthy value, itself and its descendant nodes will be arranged with compact mode.
|
|
167
|
+
|
|
162
168
|
### how to start up demos locally
|
|
163
169
|
|
|
164
170
|
- you have to install node.js v6+ because our unit tests are based on jsdom v11
|
|
@@ -206,6 +212,29 @@ var oc = $('#chartContainerId').orgchart(options);
|
|
|
206
212
|
};
|
|
207
213
|
```
|
|
208
214
|
|
|
215
|
+
### Data Props
|
|
216
|
+
<table>
|
|
217
|
+
<thead>
|
|
218
|
+
<tr>
|
|
219
|
+
<th>Name</th>
|
|
220
|
+
<th>Type</th>
|
|
221
|
+
<th>Description</th>
|
|
222
|
+
</tr>
|
|
223
|
+
</thead>
|
|
224
|
+
<tbody>
|
|
225
|
+
<tr>
|
|
226
|
+
<td>hybrid</td>
|
|
227
|
+
<td>truthy value</td>
|
|
228
|
+
<td>nodes will be arranged vertically if this property is set to true</td>
|
|
229
|
+
</tr>
|
|
230
|
+
<tr>
|
|
231
|
+
<td>compact</td>
|
|
232
|
+
<td>truthy value</td>
|
|
233
|
+
<td>node will be rendered with compact mode if this property is set to true</td>
|
|
234
|
+
</tr>
|
|
235
|
+
</tbody>
|
|
236
|
+
</table>
|
|
237
|
+
|
|
209
238
|
### Options
|
|
210
239
|
<table>
|
|
211
240
|
<thead>
|
|
@@ -408,6 +437,13 @@ var oc = $('#chartContainerId').orgchart(options);
|
|
|
408
437
|
</pre>
|
|
409
438
|
</td>
|
|
410
439
|
</tr>
|
|
440
|
+
<tr>
|
|
441
|
+
<td>compact</td>
|
|
442
|
+
<td>function</td>
|
|
443
|
+
<td>no</td>
|
|
444
|
+
<td></td>
|
|
445
|
+
<td>This callback is used to determine current node is wether rendered with compact mode. The node's data is passed in as a parameter. <b>Note:</b>The option "compact" has a higher priority than data prop "compact".</td>
|
|
446
|
+
</tr>
|
|
411
447
|
</tbody>
|
|
412
448
|
</table>
|
|
413
449
|
|
package/demo/custom-icons.html
CHANGED
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
}
|
|
111
111
|
]
|
|
112
112
|
},
|
|
113
|
-
{ 'id': '13', 'name': 'Chun Miao', 'title': 'department manager', '
|
|
113
|
+
{ 'id': '13', 'name': 'Chun Miao', 'title': 'department manager', 'hybrid': true,
|
|
114
114
|
'children': [
|
|
115
115
|
{ 'id': '14', 'name': 'Bing Qin', 'title': 'senior engineer' },
|
|
116
116
|
{ 'id': '15', 'name': 'Yue Yue', 'title': 'senior engineer',
|
|
@@ -0,0 +1,82 @@
|
|
|
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: 500px;
|
|
12
|
+
}
|
|
13
|
+
.orgchart {
|
|
14
|
+
background: unset;
|
|
15
|
+
}
|
|
16
|
+
</style>
|
|
17
|
+
</head>
|
|
18
|
+
<body>
|
|
19
|
+
<div id="chart-container"></div>
|
|
20
|
+
|
|
21
|
+
<script type="text/javascript" src="js/jquery.min.js"></script>
|
|
22
|
+
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
|
|
23
|
+
<script type="text/javascript" src="js/json-digger.js"></script>
|
|
24
|
+
<script type="text/javascript">
|
|
25
|
+
$(function() {
|
|
26
|
+
|
|
27
|
+
var datasource = {
|
|
28
|
+
'name': 'Lao Lao',
|
|
29
|
+
'title': 'general manager',
|
|
30
|
+
'children': [
|
|
31
|
+
{ 'name': 'Bo Miao', 'title': 'department manager', 'compact': true,
|
|
32
|
+
'children': [
|
|
33
|
+
{ 'name': 'Fei Xuan', 'title': 'engineer' },
|
|
34
|
+
{ 'name': 'Er Xuan', 'title': 'engineer' },
|
|
35
|
+
{ 'name': 'San Xuan', 'title': 'engineer' },
|
|
36
|
+
{ 'name': 'Si Xuan', 'title': 'engineer', 'compact': true,
|
|
37
|
+
'children': [
|
|
38
|
+
{ 'name': 'Feng Shou', 'title': 'engineer' },
|
|
39
|
+
{ 'name': 'Er Shou', 'title': 'engineer' },
|
|
40
|
+
{ 'name': 'San Shou', 'title': 'engineer' },
|
|
41
|
+
{ 'name': 'Si Shou', 'title': 'engineer' }
|
|
42
|
+
]
|
|
43
|
+
},
|
|
44
|
+
{ 'name': 'Wu Xuan', 'title': 'engineer' }
|
|
45
|
+
]
|
|
46
|
+
},
|
|
47
|
+
{ 'name': 'Su Miao', 'title': 'department manager',
|
|
48
|
+
'children': [
|
|
49
|
+
{ 'name': 'Tie Hua', 'title': 'senior engineer' },
|
|
50
|
+
{ 'name': 'Hei Hei', 'title': 'senior engineer',
|
|
51
|
+
'children': [
|
|
52
|
+
{ 'name': 'Dan Dan', 'title': 'engineer' },
|
|
53
|
+
{ 'name': 'Er Dan', 'title': 'engineer' },
|
|
54
|
+
{ 'name': 'San Dan', 'title': 'engineer' },
|
|
55
|
+
{ 'name': 'Si Dan', 'title': 'engineer' },
|
|
56
|
+
{ 'name': 'Wu Dan', 'title': 'engineer' },
|
|
57
|
+
{ 'name': 'Liu Dan', 'title': 'engineer' },
|
|
58
|
+
{ 'name': 'Qi Dan', 'title': 'engineer' },
|
|
59
|
+
{ 'name': 'Ba Dan', 'title': 'engineer' },
|
|
60
|
+
{ 'name': 'Jiu Dan', 'title': 'engineer' },
|
|
61
|
+
{ 'name': 'Shi Dan', 'title': 'engineer' }
|
|
62
|
+
]
|
|
63
|
+
},
|
|
64
|
+
{ 'name': 'Pang Pang', 'title': 'senior engineer' }
|
|
65
|
+
]
|
|
66
|
+
},
|
|
67
|
+
{ 'name': 'Hong Miao', 'title': 'department manager' }
|
|
68
|
+
]
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
$('#chart-container').orgchart({
|
|
72
|
+
'data' : datasource,
|
|
73
|
+
'nodeContent': 'title',
|
|
74
|
+
'compact': function(data) {
|
|
75
|
+
return data?.children?.length >=10;
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
});
|
|
80
|
+
</script>
|
|
81
|
+
</body>
|
|
82
|
+
</html>
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
}
|
|
46
46
|
]
|
|
47
47
|
},
|
|
48
|
-
{ 'id': '13', 'name': 'Chun Miao', 'title': 'department manager', '
|
|
48
|
+
{ 'id': '13', 'name': 'Chun Miao', 'title': 'department manager', 'hybrid': true,
|
|
49
49
|
'children': [
|
|
50
50
|
{ 'id': '14', 'name': 'Bing Qin', 'title': 'senior engineer' },
|
|
51
51
|
{ 'id': '15', 'name': 'Yue Yue', 'title': 'senior engineer',
|
package/demo/index.html
CHANGED
|
@@ -145,8 +145,9 @@
|
|
|
145
145
|
<li><a href="level-offset.html" target="_blank">position node in specific level</a></li>
|
|
146
146
|
<li><a href="nodes-of-different-widths.html" target="_blank">nodes of different widths</a></li>
|
|
147
147
|
<li><a href="drag-drop-hybrid-chart.html" target="_blank">drag&drop in hybrid chart</a></li>
|
|
148
|
-
<li><a href="
|
|
148
|
+
<li><a href="data-prop-hybrid.html" target="_blank">create hybrid chart with data prop "hybrid"</a></li>
|
|
149
149
|
<li><a href="custom-icons.html" target="_blank">use fontawesome icons instead of built-in icons</a></li>
|
|
150
|
+
<li><a href="data-prop-compact.html" target="_blank">layout for children which is too many</a></li>
|
|
150
151
|
</ol>
|
|
151
152
|
</section>
|
|
152
153
|
</body>
|
|
@@ -273,6 +273,7 @@
|
|
|
273
273
|
|
|
274
274
|
.orgchart .node .content {
|
|
275
275
|
box-sizing: border-box;
|
|
276
|
+
width: 130px;
|
|
276
277
|
height: 20px;
|
|
277
278
|
line-height: 20px;
|
|
278
279
|
font-size: 10px;
|
|
@@ -533,6 +534,157 @@
|
|
|
533
534
|
border-width: 2px 0 0 0;
|
|
534
535
|
}
|
|
535
536
|
|
|
537
|
+
/* styles for compact nodes */
|
|
538
|
+
.orgchart .hierarchy > .node.compact {
|
|
539
|
+
position: static;
|
|
540
|
+
display: grid;
|
|
541
|
+
width: 140px;
|
|
542
|
+
height: 50px;
|
|
543
|
+
overflow: hidden;
|
|
544
|
+
background-color: #eee;
|
|
545
|
+
}
|
|
546
|
+
|
|
547
|
+
.orgchart .node.compact.even,
|
|
548
|
+
.orgchart .node.compact.even:hover {
|
|
549
|
+
background-color: #eee;
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
.orgchart .node.compact.odd,
|
|
553
|
+
.orgchart .node.compact.odd:hover {
|
|
554
|
+
background-color: #fff;
|
|
555
|
+
}
|
|
556
|
+
|
|
557
|
+
.orgchart .node.compact.even > .node:hover,
|
|
558
|
+
.orgchart .node.compact.even > .node.focused,
|
|
559
|
+
.orgchart .node.compact.even > .node.selected {
|
|
560
|
+
background-color: #fff;
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
.orgchart .node.compact.odd > .node:hover,
|
|
564
|
+
.orgchart .node.compact.odd > .node.focused,
|
|
565
|
+
.orgchart .node.compact.odd > .node.selected {
|
|
566
|
+
background-color: #eee;
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
.orgchart .hierarchy > .node.compact.looseMode {
|
|
570
|
+
display: grid;
|
|
571
|
+
width: unset;
|
|
572
|
+
height: unset;
|
|
573
|
+
overflow: unset;
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
.orgchart .hierarchy > .node.compact::before {
|
|
577
|
+
top: var(--top-cross-point, -10px);
|
|
578
|
+
}
|
|
579
|
+
|
|
580
|
+
.orgchart .node.compact > .node.compact {
|
|
581
|
+
position: relative;
|
|
582
|
+
display: grid;
|
|
583
|
+
width: 140px;
|
|
584
|
+
height: 50px;
|
|
585
|
+
overflow: hidden;
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
.orgchart .node.compact .node.compact.looseMode {
|
|
589
|
+
width: unset;
|
|
590
|
+
height: unset;
|
|
591
|
+
overflow: unset;
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
.orgchart .hierarchy > .node.compact > .content {
|
|
595
|
+
position: absolute;
|
|
596
|
+
top: 25px;
|
|
597
|
+
left: 5px;
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
.orgchart .hierarchy > .node.compact.looseMode > .title {
|
|
601
|
+
margin-top: 5px;
|
|
602
|
+
margin-left: 5px;
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
.orgchart .hierarchy > .node.compact.looseMode > .content {
|
|
606
|
+
top: 30px;
|
|
607
|
+
left: 10px;
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
.orgchart .node.compact > .node.compact.looseMode > .title {
|
|
611
|
+
margin-top: 5px;
|
|
612
|
+
margin-left: 5px;
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
.orgchart .node.compact > .node.compact > .content {
|
|
616
|
+
position: absolute;
|
|
617
|
+
top: 23px;
|
|
618
|
+
left: 3px;
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
.orgchart .node.compact > .node.compact.looseMode > .content {
|
|
622
|
+
top: 28px;
|
|
623
|
+
left: 8px;
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
.orgchart .node.compact .node {
|
|
627
|
+
margin-bottom: 0;
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
.orgchart .node.compact .node:not(:only-child)::after {
|
|
631
|
+
content: unset;
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
.orgchart .backToCompactSymbol, .orgchart .backToLooseSymbol {
|
|
635
|
+
cursor: pointer;
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
.orgchart .hierarchy > .node.compact > .backToCompactSymbol {
|
|
639
|
+
position: absolute;
|
|
640
|
+
top: 5px;
|
|
641
|
+
left: 5px;
|
|
642
|
+
}
|
|
643
|
+
|
|
644
|
+
.orgchart .hierarchy > .node.compact.looseMode > .backToCompactSymbol {
|
|
645
|
+
top: 10px;
|
|
646
|
+
left: 10px;
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
.orgchart .node.compact > .node.compact.looseMode > .backToCompactSymbol {
|
|
650
|
+
top: 8px;
|
|
651
|
+
left: 8px;
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
.orgchart .node.compact > .node.compact > .backToCompactSymbol {
|
|
655
|
+
position: absolute;
|
|
656
|
+
top: 3px;
|
|
657
|
+
left: 3px;
|
|
658
|
+
}
|
|
659
|
+
|
|
660
|
+
.orgchart .hierarchy > .node.compact > .backToLooseSymbol {
|
|
661
|
+
position: absolute;
|
|
662
|
+
top: 25px;
|
|
663
|
+
right: 5px;
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
.orgchart .node.compact > .node.compact > .backToLooseSymbol {
|
|
667
|
+
position: absolute;
|
|
668
|
+
top: 23px;
|
|
669
|
+
right: 3px;
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
.orgchart .node.compact .backToCompactSymbol::before {
|
|
673
|
+
border-top-color: rgba(68, 157, 68, 0.6);
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
.orgchart .node.compact .backToLooseSymbol::before {
|
|
677
|
+
border-bottom-color: rgba(68, 157, 68, 0.6);
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
.orgchart .node.compact .backToCompactSymbol:hover::before {
|
|
681
|
+
border-top-color: #449d44;
|
|
682
|
+
}
|
|
683
|
+
|
|
684
|
+
.orgchart .node.compact .backToLooseSymbol:hover::before {
|
|
685
|
+
border-bottom-color: #449d44;
|
|
686
|
+
}
|
|
687
|
+
|
|
536
688
|
/* custom icons for orgchart */
|
|
537
689
|
.oci {
|
|
538
690
|
display: inline-block;
|
|
@@ -600,6 +752,43 @@
|
|
|
600
752
|
border-bottom: unset;
|
|
601
753
|
}
|
|
602
754
|
|
|
755
|
+
.oci-corner-top-left::before {
|
|
756
|
+
content: "";
|
|
757
|
+
display: inline-block;
|
|
758
|
+
border-top: 20px solid #000;
|
|
759
|
+
border-right: 20px solid transparent;
|
|
760
|
+
}
|
|
761
|
+
|
|
762
|
+
.oci-corner-top-right::before {
|
|
763
|
+
content: "";
|
|
764
|
+
display: inline-block;
|
|
765
|
+
box-sizing: border-box;
|
|
766
|
+
width: 0;
|
|
767
|
+
height: 0;
|
|
768
|
+
border-top: 20px solid #000;
|
|
769
|
+
border-left: 20px solid transparent;
|
|
770
|
+
}
|
|
771
|
+
|
|
772
|
+
.oci-corner-bottom-right::before {
|
|
773
|
+
content: "";
|
|
774
|
+
display: inline-block;
|
|
775
|
+
box-sizing: border-box;
|
|
776
|
+
width: 0;
|
|
777
|
+
height: 0;
|
|
778
|
+
border-bottom: 20px solid #000;
|
|
779
|
+
border-left: 20px solid transparent;
|
|
780
|
+
}
|
|
781
|
+
|
|
782
|
+
.oci-corner-bottom-left::before {
|
|
783
|
+
content: "";
|
|
784
|
+
display: inline-block;
|
|
785
|
+
box-sizing: border-box;
|
|
786
|
+
width: 0;
|
|
787
|
+
height: 0;
|
|
788
|
+
border-bottom: 20px solid #000;
|
|
789
|
+
border-right: 20px solid transparent;
|
|
790
|
+
}
|
|
791
|
+
|
|
603
792
|
.oci-plus-square::before {
|
|
604
793
|
content: "﹢";
|
|
605
794
|
display: inline-block;
|
|
@@ -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(to top,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%),linear-gradient(to right,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%),linear-gradient(to bottom,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%),linear-gradient(to left,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%);background-size:10px 10px;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:-12px;left:calc(50% - 1px);width:2px;height:10px;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,-12px);left:calc(50% - 1px);width:2px;height:var(--height,10px);background-color:rgba(217,83,79,.8)}.orgchart>ul>li>ul li.isSiblingsCollapsed>.node::before{top:var(--top-cross-point,-12px);height:var(--height-cross-point,10px)}.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;width:130px;text-align:center;font-size:12px;font-weight:700;height:20px;line-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 .parentNodeSymbol{float:left}.orgchart .node .title .parentNodeSymbol::before{color:#fff}.orgchart .node .title .parentNodeSymbol::after{background-color:#fff}.orgchart .node .content{box-sizing:border-box;height:20px;line-height:20px;font-size:10px;border:1px solid rgba(217,83,79,.8);border-width:0 1px 1px 1px;border-radius:0 0 .25rem .25rem;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);height:10px;left:3px}.orgchart .node .verticalEdge::before{position:absolute;left:calc(50% - 5px)}.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);top:3px}.orgchart .node .rightEdge{right:-2px}.orgchart .node .leftEdge{left:-2px}.orgchart .node .horizontalEdge::before{position:absolute;top:calc(50% - 5px)}.orgchart .node .leftEdge.oci-chevron-right::before{left:-3px}.orgchart .node .leftEdge.oci-chevron-left::before{left:1px}.orgchart .node .rightEdge.oci-chevron-left::before{right:-3px}.orgchart .node .rightEdge.oci-chevron-right::before{right:1px}.orgchart .node .toggleBtn{position:absolute;left:-2px;bottom:-2px;width:16px;height:16px}.orgchart .node .toggleBtn::before{background-color:rgba(68,157,68,.6);position:absolute;left:0;bottom:0}.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:10px}.orgchart .nodes.vertical .nodes{list-style:none;display:block;margin:0;padding-left:10px;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{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:0;height:26px;width:11px}.orgchart .nodes.vertical .hierarchy::after{bottom:0;height:calc(100% - 24px)}.orgchart .nodes.vertical .hierarchy:last-child::after{border-width:2px 0 0 0}.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:first-child::after{box-sizing:border-box;top:24px;width:11px;border-width:2px 0 0 2px}.orgchart .nodes.vertical>.hierarchy:first-child:last-child::after{border-width:2px 0 0 0}.oci{display:inline-block;position:relative;font-style:normal;font-family:Arial}.oci-menu::before{content:"≡";display:inline-block;width:1rem;height:1rem;text-align:center;line-height:1rem;color:#000;font-size:1rem}.oci-chevron-up::before{content:"";box-sizing:border-box;width:10px;height:10px;display:inline-block;border:3px solid #000;transform:rotate(45deg);border-right:unset;border-bottom:unset}.oci-chevron-down::before{content:"";box-sizing:border-box;width:10px;height:10px;display:inline-block;border:3px solid #000;transform:rotate(45deg);border-top:unset;border-left:unset}.oci-chevron-left::before{content:"";box-sizing:border-box;width:10px;height:10px;display:inline-block;border:3px solid #000;transform:rotate(45deg);border-top:unset;border-right:unset}.oci-chevron-right::before{content:"";box-sizing:border-box;width:10px;height:10px;display:inline-block;border:3px solid #000;transform:rotate(45deg);border-left:unset;border-bottom:unset}.oci-plus-square::before{content:"﹢";display:inline-block;width:16px;height:16px;text-align:center;line-height:16px;background-color:#000;color:#fff;font-weight:700}.oci-minus-square::before{content:"﹣";display:inline-block;width:16px;height:16px;text-align:center;line-height:16px;background-color:#000;color:#fff;font-weight:700}.oci-arrow-square-up::before{content:"⬆";display:inline-block;width:1rem;height:1rem;text-align:center;line-height:1rem;background-color:#000;color:#fff;font-weight:700}.oci-arrow-square-down::before{content:"⬇";display:inline-block;width:1rem;height:1rem;text-align:center;line-height:1rem;background-color:#000;color:#fff;font-weight:700}.oci-info-circle::before{content:"i";display:inline-block;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(to top,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%),linear-gradient(to right,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%),linear-gradient(to bottom,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%),linear-gradient(to left,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%);background-size:10px 10px;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:-12px;left:calc(50% - 1px);width:2px;height:10px;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,-12px);left:calc(50% - 1px);width:2px;height:var(--height,10px);background-color:rgba(217,83,79,.8)}.orgchart>ul>li>ul li.isSiblingsCollapsed>.node::before{top:var(--top-cross-point,-12px);height:var(--height-cross-point,10px)}.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;width:130px;text-align:center;font-size:12px;font-weight:700;height:20px;line-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 .parentNodeSymbol{float:left}.orgchart .node .title .parentNodeSymbol::before{color:#fff}.orgchart .node .title .parentNodeSymbol::after{background-color:#fff}.orgchart .node .content{box-sizing:border-box;width:130px;height:20px;line-height:20px;font-size:10px;border:1px solid rgba(217,83,79,.8);border-width:0 1px 1px 1px;border-radius:0 0 .25rem .25rem;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);height:10px;left:3px}.orgchart .node .verticalEdge::before{position:absolute;left:calc(50% - 5px)}.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);top:3px}.orgchart .node .rightEdge{right:-2px}.orgchart .node .leftEdge{left:-2px}.orgchart .node .horizontalEdge::before{position:absolute;top:calc(50% - 5px)}.orgchart .node .leftEdge.oci-chevron-right::before{left:-3px}.orgchart .node .leftEdge.oci-chevron-left::before{left:1px}.orgchart .node .rightEdge.oci-chevron-left::before{right:-3px}.orgchart .node .rightEdge.oci-chevron-right::before{right:1px}.orgchart .node .toggleBtn{position:absolute;left:-2px;bottom:-2px;width:16px;height:16px}.orgchart .node .toggleBtn::before{background-color:rgba(68,157,68,.6);position:absolute;left:0;bottom:0}.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:10px}.orgchart .nodes.vertical .nodes{list-style:none;display:block;margin:0;padding-left:10px;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{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:0;height:26px;width:11px}.orgchart .nodes.vertical .hierarchy::after{bottom:0;height:calc(100% - 24px)}.orgchart .nodes.vertical .hierarchy:last-child::after{border-width:2px 0 0 0}.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:first-child::after{box-sizing:border-box;top:24px;width:11px;border-width:2px 0 0 2px}.orgchart .nodes.vertical>.hierarchy:first-child:last-child::after{border-width:2px 0 0 0}.orgchart .hierarchy>.node.compact{position:static;display:grid;width:140px;height:50px;overflow:hidden;background-color:#eee}.orgchart .node.compact.even,.orgchart .node.compact.even:hover{background-color:#eee}.orgchart .node.compact.odd,.orgchart .node.compact.odd:hover{background-color:#fff}.orgchart .node.compact.even>.node.focused,.orgchart .node.compact.even>.node.selected,.orgchart .node.compact.even>.node:hover{background-color:#fff}.orgchart .node.compact.odd>.node.focused,.orgchart .node.compact.odd>.node.selected,.orgchart .node.compact.odd>.node:hover{background-color:#eee}.orgchart .hierarchy>.node.compact.looseMode{display:grid;width:unset;height:unset;overflow:unset}.orgchart .hierarchy>.node.compact::before{top:var(--top-cross-point,-10px)}.orgchart .node.compact>.node.compact{position:relative;display:grid;width:140px;height:50px;overflow:hidden}.orgchart .node.compact .node.compact.looseMode{width:unset;height:unset;overflow:unset}.orgchart .hierarchy>.node.compact>.content{position:absolute;top:25px;left:5px}.orgchart .hierarchy>.node.compact.looseMode>.title{margin-top:5px;margin-left:5px}.orgchart .hierarchy>.node.compact.looseMode>.content{top:30px;left:10px}.orgchart .node.compact>.node.compact.looseMode>.title{margin-top:5px;margin-left:5px}.orgchart .node.compact>.node.compact>.content{position:absolute;top:23px;left:3px}.orgchart .node.compact>.node.compact.looseMode>.content{top:28px;left:8px}.orgchart .node.compact .node{margin-bottom:0}.orgchart .node.compact .node:not(:only-child)::after{content:unset}.orgchart .backToCompactSymbol,.orgchart .backToLooseSymbol{cursor:pointer}.orgchart .hierarchy>.node.compact>.backToCompactSymbol{position:absolute;top:5px;left:5px}.orgchart .hierarchy>.node.compact.looseMode>.backToCompactSymbol{top:10px;left:10px}.orgchart .node.compact>.node.compact.looseMode>.backToCompactSymbol{top:8px;left:8px}.orgchart .node.compact>.node.compact>.backToCompactSymbol{position:absolute;top:3px;left:3px}.orgchart .hierarchy>.node.compact>.backToLooseSymbol{position:absolute;top:25px;right:5px}.orgchart .node.compact>.node.compact>.backToLooseSymbol{position:absolute;top:23px;right:3px}.orgchart .node.compact .backToCompactSymbol::before{border-top-color:rgba(68,157,68,.6)}.orgchart .node.compact .backToLooseSymbol::before{border-bottom-color:rgba(68,157,68,.6)}.orgchart .node.compact .backToCompactSymbol:hover::before{border-top-color:#449d44}.orgchart .node.compact .backToLooseSymbol:hover::before{border-bottom-color:#449d44}.oci{display:inline-block;position:relative;font-style:normal;font-family:Arial}.oci-menu::before{content:"≡";display:inline-block;width:1rem;height:1rem;text-align:center;line-height:1rem;color:#000;font-size:1rem}.oci-chevron-up::before{content:"";box-sizing:border-box;width:10px;height:10px;display:inline-block;border:3px solid #000;transform:rotate(45deg);border-right:unset;border-bottom:unset}.oci-chevron-down::before{content:"";box-sizing:border-box;width:10px;height:10px;display:inline-block;border:3px solid #000;transform:rotate(45deg);border-top:unset;border-left:unset}.oci-chevron-left::before{content:"";box-sizing:border-box;width:10px;height:10px;display:inline-block;border:3px solid #000;transform:rotate(45deg);border-top:unset;border-right:unset}.oci-chevron-right::before{content:"";box-sizing:border-box;width:10px;height:10px;display:inline-block;border:3px solid #000;transform:rotate(45deg);border-left:unset;border-bottom:unset}.oci-corner-top-left::before{content:"";display:inline-block;border-top:20px solid #000;border-right:20px solid transparent}.oci-corner-top-right::before{content:"";display:inline-block;box-sizing:border-box;width:0;height:0;border-top:20px solid #000;border-left:20px solid transparent}.oci-corner-bottom-right::before{content:"";display:inline-block;box-sizing:border-box;width:0;height:0;border-bottom:20px solid #000;border-left:20px solid transparent}.oci-corner-bottom-left::before{content:"";display:inline-block;box-sizing:border-box;width:0;height:0;border-bottom:20px solid #000;border-right:20px solid transparent}.oci-plus-square::before{content:"﹢";display:inline-block;width:16px;height:16px;text-align:center;line-height:16px;background-color:#000;color:#fff;font-weight:700}.oci-minus-square::before{content:"﹣";display:inline-block;width:16px;height:16px;text-align:center;line-height:16px;background-color:#000;color:#fff;font-weight:700}.oci-arrow-square-up::before{content:"⬆";display:inline-block;width:1rem;height:1rem;text-align:center;line-height:1rem;background-color:#000;color:#fff;font-weight:700}.oci-arrow-square-down::before{content:"⬇";display:inline-block;width:1rem;height:1rem;text-align:center;line-height:1rem;background-color:#000;color:#fff;font-weight:700}.oci-info-circle::before{content:"i";display:inline-block;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)}}
|
|
@@ -28,6 +28,8 @@
|
|
|
28
28
|
'collapseToDown': 'oci-chevron-down',
|
|
29
29
|
'collapseToLeft': 'oci-chevron-left',
|
|
30
30
|
'expandToRight': 'oci-chevron-right',
|
|
31
|
+
'backToCompact': 'oci-corner-top-left',
|
|
32
|
+
'backToLoose': 'oci-corner-bottom-right',
|
|
31
33
|
'collapsed': 'oci-plus-square',
|
|
32
34
|
'expanded': 'oci-minus-square',
|
|
33
35
|
'spinner': 'oci-spinner'
|
|
@@ -113,6 +115,20 @@
|
|
|
113
115
|
|
|
114
116
|
return this;
|
|
115
117
|
},
|
|
118
|
+
handleCompactNodes: function () {
|
|
119
|
+
// caculate the compact nodes' level which is used to add different styles
|
|
120
|
+
this.$chart.find('.node.compact')
|
|
121
|
+
.each((index, node) => {
|
|
122
|
+
$(node).addClass($(node).parents('.compact').length % 2 === 0 ? 'even' : 'odd');
|
|
123
|
+
}); // the following code snippets is used to add direction arrows for the most top compact node, however the styles is not adjusted correctly
|
|
124
|
+
// .filter((index, node) => !$(node).parent().is('.compact'))
|
|
125
|
+
// .each((index, node) => {
|
|
126
|
+
// $(node).append(`<i class="edge verticalEdge topEdge ${this.options.icons.theme}"></i>`);
|
|
127
|
+
// if (this.getSiblings($(node)).length) {
|
|
128
|
+
// $(node).append(`<i class="edge horizontalEdge rightEdge ${this.options.icons.theme}"></i><i class="edge horizontalEdge leftEdge ${this.options.icons.theme}"></i>`);
|
|
129
|
+
// }
|
|
130
|
+
// });
|
|
131
|
+
},
|
|
116
132
|
//
|
|
117
133
|
triggerInitEvent: function () {
|
|
118
134
|
var that = this;
|
|
@@ -122,6 +138,7 @@
|
|
|
122
138
|
for (var i = 0; i < mutations.length; i++) {
|
|
123
139
|
for (var j = 0; j < mutations[i].addedNodes.length; j++) {
|
|
124
140
|
if (mutations[i].addedNodes[j].classList.contains('orgchart')) {
|
|
141
|
+
that.handleCompactNodes();
|
|
125
142
|
if (that.options.initCompleted && typeof that.options.initCompleted === 'function') {
|
|
126
143
|
that.options.initCompleted(that.$chart);
|
|
127
144
|
}
|
|
@@ -377,14 +394,21 @@
|
|
|
377
394
|
});
|
|
378
395
|
return subObj;
|
|
379
396
|
},
|
|
380
|
-
//
|
|
397
|
+
// process datasource and add necessary information
|
|
381
398
|
attachRel: function (data, flags) {
|
|
382
399
|
var that = this;
|
|
383
400
|
data.relationship = flags + (data.children && data.children.length > 0 ? 1 : 0);
|
|
401
|
+
if (this.options?.compact?.constructor === Function && this.options.compact(data)) {
|
|
402
|
+
data.compact = true;
|
|
403
|
+
}
|
|
384
404
|
if (data.children) {
|
|
385
405
|
data.children.forEach(function(item) {
|
|
386
|
-
if (data.
|
|
387
|
-
item.
|
|
406
|
+
if (data.hybrid || data.vertical) { // identify all the descendant nodes except the root node of hybrid structure
|
|
407
|
+
item.vertical = true;
|
|
408
|
+
} else if (data.compact && item.children) { // identify all the compact ancestor nodes
|
|
409
|
+
item.compact = true;
|
|
410
|
+
} else if (data.compact && !item.children) { // identify all the compact descendant nodes
|
|
411
|
+
item.associatedCompact = true;
|
|
388
412
|
}
|
|
389
413
|
that.attachRel(item, '1' + (data.children.length > 1 ? 1 : 0));
|
|
390
414
|
});
|
|
@@ -610,13 +634,21 @@
|
|
|
610
634
|
},
|
|
611
635
|
//
|
|
612
636
|
hideSiblingsEnd: function (event) {
|
|
637
|
+
var that = this;
|
|
613
638
|
var $node = event.data.node;
|
|
614
639
|
var $nodeContainer = event.data.nodeContainer;
|
|
615
640
|
var direction = event.data.direction;
|
|
616
641
|
var $siblings = direction ? (direction === 'left' ? $nodeContainer.prevAll(':not(.hidden)') : $nodeContainer.nextAll(':not(.hidden)')) : $nodeContainer.siblings();
|
|
617
642
|
event.data.animatedNodes.removeClass('sliding');
|
|
618
643
|
$siblings.find('.node:gt(0)').filter(this.isVisibleNode.bind(this))
|
|
619
|
-
.removeClass('slide-left slide-right')
|
|
644
|
+
.removeClass('slide-left slide-right')
|
|
645
|
+
.addClass(function() {
|
|
646
|
+
if (that.options.compact) {
|
|
647
|
+
return '';
|
|
648
|
+
} else {
|
|
649
|
+
return 'slide-up';
|
|
650
|
+
}
|
|
651
|
+
});
|
|
620
652
|
$siblings.find('.nodes, .vertical').addClass('hidden')
|
|
621
653
|
.end().addClass('hidden');
|
|
622
654
|
|
|
@@ -954,6 +986,19 @@
|
|
|
954
986
|
}
|
|
955
987
|
}
|
|
956
988
|
},
|
|
989
|
+
// show the compact node's children in the compact mode
|
|
990
|
+
backToCompactHandler: function (event) {
|
|
991
|
+
$(event.delegateTarget).removeClass('looseMode')
|
|
992
|
+
.children('.backToCompactSymbol').addClass('hidden').end()
|
|
993
|
+
.children('.backToLooseSymbol').removeClass('hidden');
|
|
994
|
+
},
|
|
995
|
+
// show the compact node's children in the loose mode
|
|
996
|
+
backToLooseHandler: function (event) {
|
|
997
|
+
$(event.delegateTarget)
|
|
998
|
+
.addClass('looseMode')
|
|
999
|
+
.children('.backToLooseSymbol').addClass('hidden').end()
|
|
1000
|
+
.children('.backToCompactSymbol').removeClass('hidden');
|
|
1001
|
+
},
|
|
957
1002
|
//
|
|
958
1003
|
expandVNodesEnd: function (event) {
|
|
959
1004
|
event.data.vNodes.removeClass('sliding');
|
|
@@ -1137,7 +1182,7 @@
|
|
|
1137
1182
|
// special process for hybrid chart
|
|
1138
1183
|
var datasource = this.$chart.data('options').data;
|
|
1139
1184
|
var digger = new JSONDigger(datasource, this.$chart.data('options').nodeId, 'children');
|
|
1140
|
-
const hybridNode = digger.findOneNode({ '
|
|
1185
|
+
const hybridNode = digger.findOneNode({ 'hybrid': true });
|
|
1141
1186
|
if (this.$chart.data('options').verticalLevel > 1 || hybridNode) {
|
|
1142
1187
|
var draggedNode = digger.findNodeById($dragged.data('nodeData').id);
|
|
1143
1188
|
var copy = Object.assign({}, draggedNode);
|
|
@@ -1359,18 +1404,29 @@
|
|
|
1359
1404
|
var nodeData = $.extend({}, data);
|
|
1360
1405
|
delete nodeData.children;
|
|
1361
1406
|
$nodeDiv.data('nodeData', nodeData);
|
|
1362
|
-
// append 4 direction arrows or expand/collapse buttons
|
|
1407
|
+
// append 4 direction arrows or expand/collapse buttons or reset buttons
|
|
1363
1408
|
var flags = data.relationship || '';
|
|
1364
|
-
if ((opts.verticalLevel && level >= opts.verticalLevel) || data.
|
|
1409
|
+
if ((opts.verticalLevel && level >= opts.verticalLevel) || data.vertical) {
|
|
1365
1410
|
if (Number(flags.substr(2,1))) {
|
|
1366
1411
|
$nodeDiv.append(`<i class="toggleBtn ${opts.icons.theme}"></i>`)
|
|
1367
1412
|
.children('.title').prepend(`<i class="${opts.icons.theme} ${opts.icons.parentNode} parentNodeSymbol"></i>`);
|
|
1368
1413
|
}
|
|
1369
|
-
} else if (data.
|
|
1414
|
+
} else if (data.hybrid) {
|
|
1370
1415
|
if (Number(flags.substr(2,1))) {
|
|
1371
1416
|
$nodeDiv.append(`<i class="edge verticalEdge bottomEdge ${opts.icons.theme}"></i>`)
|
|
1372
1417
|
.children('.title').prepend(`<i class="${opts.icons.theme} ${opts.icons.parentNode} parentNodeSymbol"></i>`);
|
|
1373
1418
|
}
|
|
1419
|
+
} else if (data.compact) {
|
|
1420
|
+
$nodeDiv.css('grid-template-columns', `repeat(${Math.floor(Math.sqrt(data.children.length + 1))}, auto)`);
|
|
1421
|
+
if (Number(flags.substr(2,1))) {
|
|
1422
|
+
$nodeDiv.append(`
|
|
1423
|
+
<i class="${opts.icons.theme} ${opts.icons.backToCompact} backToCompactSymbol hidden"></i>
|
|
1424
|
+
<i class="${opts.icons.theme} ${opts.icons.backToLoose} backToLooseSymbol"></i>
|
|
1425
|
+
`)
|
|
1426
|
+
.children('.title').prepend(`<i class="${opts.icons.theme} ${opts.icons.parentNode} parentNodeSymbol"></i>`);
|
|
1427
|
+
}
|
|
1428
|
+
} else if (data.associatedCompact) {
|
|
1429
|
+
|
|
1374
1430
|
} else {
|
|
1375
1431
|
if (Number(flags.substr(0,1))) {
|
|
1376
1432
|
$nodeDiv.append(`<i class="edge verticalEdge topEdge ${opts.icons.theme}"></i>`);
|
|
@@ -1390,6 +1446,8 @@
|
|
|
1390
1446
|
$nodeDiv.on('click', '.bottomEdge', this.bottomEdgeClickHandler.bind(this));
|
|
1391
1447
|
$nodeDiv.on('click', '.leftEdge, .rightEdge', this.hEdgeClickHandler.bind(this));
|
|
1392
1448
|
$nodeDiv.on('click', '.toggleBtn', this.toggleVNodes.bind(this));
|
|
1449
|
+
$nodeDiv.on('click', '> .backToCompactSymbol',this.backToCompactHandler.bind(this));
|
|
1450
|
+
$nodeDiv.on('click', '> .backToLooseSymbol',this.backToLooseHandler.bind(this));
|
|
1393
1451
|
|
|
1394
1452
|
if (opts.draggable) {
|
|
1395
1453
|
this.bindDragDrop($nodeDiv);
|
|
@@ -1409,6 +1467,7 @@
|
|
|
1409
1467
|
var that = this;
|
|
1410
1468
|
var opts = this.options;
|
|
1411
1469
|
var level = 0;
|
|
1470
|
+
var $nodeDiv;
|
|
1412
1471
|
if (data.level) {
|
|
1413
1472
|
level = data.level;
|
|
1414
1473
|
} else {
|
|
@@ -1416,23 +1475,26 @@
|
|
|
1416
1475
|
}
|
|
1417
1476
|
// Construct the node
|
|
1418
1477
|
if (Object.keys(data).length > 2) {
|
|
1419
|
-
$
|
|
1478
|
+
$nodeDiv = this.createNode(data);
|
|
1479
|
+
$appendTo.append($nodeDiv);
|
|
1420
1480
|
}
|
|
1421
1481
|
// Construct the "inferior nodes"
|
|
1422
1482
|
if (data.children && data.children.length) {
|
|
1423
1483
|
var isHidden = level + 1 > opts.visibleLevel || (data.collapsed !== undefined && data.collapsed);
|
|
1424
1484
|
var $nodesLayer;
|
|
1425
|
-
if ((opts.verticalLevel && (level + 1) >= opts.verticalLevel) || data.
|
|
1485
|
+
if ((opts.verticalLevel && (level + 1) >= opts.verticalLevel) || data.hybrid) {
|
|
1426
1486
|
$nodesLayer = $('<ul class="nodes">');
|
|
1427
1487
|
if (isHidden && (opts.verticalLevel && (level + 1) >= opts.verticalLevel)) {
|
|
1428
1488
|
$nodesLayer.addClass('hidden');
|
|
1429
1489
|
}
|
|
1430
|
-
if (((opts.verticalLevel && level + 1 === opts.verticalLevel) || data.
|
|
1490
|
+
if (((opts.verticalLevel && level + 1 === opts.verticalLevel) || data.hybrid)
|
|
1431
1491
|
&& !$appendTo.closest('.vertical').length) {
|
|
1432
1492
|
$appendTo.append($nodesLayer.addClass('vertical'));
|
|
1433
1493
|
} else {
|
|
1434
1494
|
$appendTo.append($nodesLayer);
|
|
1435
1495
|
}
|
|
1496
|
+
} else if (data.compact) {
|
|
1497
|
+
$nodeDiv.addClass('compact');
|
|
1436
1498
|
} else {
|
|
1437
1499
|
$nodesLayer = $('<ul class="nodes' + (isHidden ? ' hidden' : '') + '">');
|
|
1438
1500
|
if (Object.keys(data).length === 2) {
|
|
@@ -1446,10 +1508,14 @@
|
|
|
1446
1508
|
}
|
|
1447
1509
|
// recurse through children nodes
|
|
1448
1510
|
$.each(data.children, function () {
|
|
1449
|
-
var $nodeCell = $('<li class="hierarchy">');
|
|
1450
|
-
$nodesLayer.append($nodeCell);
|
|
1451
1511
|
this.level = level + 1;
|
|
1452
|
-
|
|
1512
|
+
if (data.compact) {
|
|
1513
|
+
that.buildHierarchy($nodeDiv, this);
|
|
1514
|
+
} else {
|
|
1515
|
+
var $nodeCell = $('<li class="hierarchy">');
|
|
1516
|
+
$nodesLayer.append($nodeCell);
|
|
1517
|
+
that.buildHierarchy($nodeCell, this);
|
|
1518
|
+
}
|
|
1453
1519
|
});
|
|
1454
1520
|
}
|
|
1455
1521
|
},
|