orgchart 3.7.0 → 3.8.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 +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 +71 -13
- 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 +1 -1
- package/src/css/jquery.orgchart.css +189 -0
- package/src/js/jquery.orgchart.js +71 -13
- package/test/visual-regression/zoom/__image_snapshots__/__diff_output__/test-js-orgchart-visual-regression-tests-zoomin-correctly-1-snap-diff.png +0 -0
- package/test/visual-regression/zoom/__image_snapshots__/__diff_output__/test-js-orgchart-visual-regression-tests-zoomout-correctly-1-snap-diff.png +0 -0
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
|
});
|
|
@@ -954,6 +978,19 @@
|
|
|
954
978
|
}
|
|
955
979
|
}
|
|
956
980
|
},
|
|
981
|
+
// show the compact node's children in the compact mode
|
|
982
|
+
backToCompactHandler: function (event) {
|
|
983
|
+
$(event.delegateTarget).removeClass('looseMode')
|
|
984
|
+
.children('.backToCompactSymbol').addClass('hidden').end()
|
|
985
|
+
.children('.backToLooseSymbol').removeClass('hidden');
|
|
986
|
+
},
|
|
987
|
+
// show the compact node's children in the loose mode
|
|
988
|
+
backToLooseHandler: function (event) {
|
|
989
|
+
$(event.delegateTarget)
|
|
990
|
+
.addClass('looseMode')
|
|
991
|
+
.children('.backToLooseSymbol').addClass('hidden').end()
|
|
992
|
+
.children('.backToCompactSymbol').removeClass('hidden');
|
|
993
|
+
},
|
|
957
994
|
//
|
|
958
995
|
expandVNodesEnd: function (event) {
|
|
959
996
|
event.data.vNodes.removeClass('sliding');
|
|
@@ -1137,7 +1174,7 @@
|
|
|
1137
1174
|
// special process for hybrid chart
|
|
1138
1175
|
var datasource = this.$chart.data('options').data;
|
|
1139
1176
|
var digger = new JSONDigger(datasource, this.$chart.data('options').nodeId, 'children');
|
|
1140
|
-
const hybridNode = digger.findOneNode({ '
|
|
1177
|
+
const hybridNode = digger.findOneNode({ 'hybrid': true });
|
|
1141
1178
|
if (this.$chart.data('options').verticalLevel > 1 || hybridNode) {
|
|
1142
1179
|
var draggedNode = digger.findNodeById($dragged.data('nodeData').id);
|
|
1143
1180
|
var copy = Object.assign({}, draggedNode);
|
|
@@ -1359,18 +1396,29 @@
|
|
|
1359
1396
|
var nodeData = $.extend({}, data);
|
|
1360
1397
|
delete nodeData.children;
|
|
1361
1398
|
$nodeDiv.data('nodeData', nodeData);
|
|
1362
|
-
// append 4 direction arrows or expand/collapse buttons
|
|
1399
|
+
// append 4 direction arrows or expand/collapse buttons or reset buttons
|
|
1363
1400
|
var flags = data.relationship || '';
|
|
1364
|
-
if ((opts.verticalLevel && level >= opts.verticalLevel) || data.
|
|
1401
|
+
if ((opts.verticalLevel && level >= opts.verticalLevel) || data.vertical) {
|
|
1365
1402
|
if (Number(flags.substr(2,1))) {
|
|
1366
1403
|
$nodeDiv.append(`<i class="toggleBtn ${opts.icons.theme}"></i>`)
|
|
1367
1404
|
.children('.title').prepend(`<i class="${opts.icons.theme} ${opts.icons.parentNode} parentNodeSymbol"></i>`);
|
|
1368
1405
|
}
|
|
1369
|
-
} else if (data.
|
|
1406
|
+
} else if (data.hybrid) {
|
|
1370
1407
|
if (Number(flags.substr(2,1))) {
|
|
1371
1408
|
$nodeDiv.append(`<i class="edge verticalEdge bottomEdge ${opts.icons.theme}"></i>`)
|
|
1372
1409
|
.children('.title').prepend(`<i class="${opts.icons.theme} ${opts.icons.parentNode} parentNodeSymbol"></i>`);
|
|
1373
1410
|
}
|
|
1411
|
+
} else if (data.compact) {
|
|
1412
|
+
$nodeDiv.css('grid-template-columns', `repeat(${Math.floor(Math.sqrt(data.children.length + 1))}, auto)`);
|
|
1413
|
+
if (Number(flags.substr(2,1))) {
|
|
1414
|
+
$nodeDiv.append(`
|
|
1415
|
+
<i class="${opts.icons.theme} ${opts.icons.backToCompact} backToCompactSymbol hidden"></i>
|
|
1416
|
+
<i class="${opts.icons.theme} ${opts.icons.backToLoose} backToLooseSymbol"></i>
|
|
1417
|
+
`)
|
|
1418
|
+
.children('.title').prepend(`<i class="${opts.icons.theme} ${opts.icons.parentNode} parentNodeSymbol"></i>`);
|
|
1419
|
+
}
|
|
1420
|
+
} else if (data.associatedCompact) {
|
|
1421
|
+
|
|
1374
1422
|
} else {
|
|
1375
1423
|
if (Number(flags.substr(0,1))) {
|
|
1376
1424
|
$nodeDiv.append(`<i class="edge verticalEdge topEdge ${opts.icons.theme}"></i>`);
|
|
@@ -1390,6 +1438,8 @@
|
|
|
1390
1438
|
$nodeDiv.on('click', '.bottomEdge', this.bottomEdgeClickHandler.bind(this));
|
|
1391
1439
|
$nodeDiv.on('click', '.leftEdge, .rightEdge', this.hEdgeClickHandler.bind(this));
|
|
1392
1440
|
$nodeDiv.on('click', '.toggleBtn', this.toggleVNodes.bind(this));
|
|
1441
|
+
$nodeDiv.on('click', '> .backToCompactSymbol',this.backToCompactHandler.bind(this));
|
|
1442
|
+
$nodeDiv.on('click', '> .backToLooseSymbol',this.backToLooseHandler.bind(this));
|
|
1393
1443
|
|
|
1394
1444
|
if (opts.draggable) {
|
|
1395
1445
|
this.bindDragDrop($nodeDiv);
|
|
@@ -1409,6 +1459,7 @@
|
|
|
1409
1459
|
var that = this;
|
|
1410
1460
|
var opts = this.options;
|
|
1411
1461
|
var level = 0;
|
|
1462
|
+
var $nodeDiv;
|
|
1412
1463
|
if (data.level) {
|
|
1413
1464
|
level = data.level;
|
|
1414
1465
|
} else {
|
|
@@ -1416,23 +1467,26 @@
|
|
|
1416
1467
|
}
|
|
1417
1468
|
// Construct the node
|
|
1418
1469
|
if (Object.keys(data).length > 2) {
|
|
1419
|
-
$
|
|
1470
|
+
$nodeDiv = this.createNode(data);
|
|
1471
|
+
$appendTo.append($nodeDiv);
|
|
1420
1472
|
}
|
|
1421
1473
|
// Construct the "inferior nodes"
|
|
1422
1474
|
if (data.children && data.children.length) {
|
|
1423
1475
|
var isHidden = level + 1 > opts.visibleLevel || (data.collapsed !== undefined && data.collapsed);
|
|
1424
1476
|
var $nodesLayer;
|
|
1425
|
-
if ((opts.verticalLevel && (level + 1) >= opts.verticalLevel) || data.
|
|
1477
|
+
if ((opts.verticalLevel && (level + 1) >= opts.verticalLevel) || data.hybrid) {
|
|
1426
1478
|
$nodesLayer = $('<ul class="nodes">');
|
|
1427
1479
|
if (isHidden && (opts.verticalLevel && (level + 1) >= opts.verticalLevel)) {
|
|
1428
1480
|
$nodesLayer.addClass('hidden');
|
|
1429
1481
|
}
|
|
1430
|
-
if (((opts.verticalLevel && level + 1 === opts.verticalLevel) || data.
|
|
1482
|
+
if (((opts.verticalLevel && level + 1 === opts.verticalLevel) || data.hybrid)
|
|
1431
1483
|
&& !$appendTo.closest('.vertical').length) {
|
|
1432
1484
|
$appendTo.append($nodesLayer.addClass('vertical'));
|
|
1433
1485
|
} else {
|
|
1434
1486
|
$appendTo.append($nodesLayer);
|
|
1435
1487
|
}
|
|
1488
|
+
} else if (data.compact) {
|
|
1489
|
+
$nodeDiv.addClass('compact');
|
|
1436
1490
|
} else {
|
|
1437
1491
|
$nodesLayer = $('<ul class="nodes' + (isHidden ? ' hidden' : '') + '">');
|
|
1438
1492
|
if (Object.keys(data).length === 2) {
|
|
@@ -1446,10 +1500,14 @@
|
|
|
1446
1500
|
}
|
|
1447
1501
|
// recurse through children nodes
|
|
1448
1502
|
$.each(data.children, function () {
|
|
1449
|
-
var $nodeCell = $('<li class="hierarchy">');
|
|
1450
|
-
$nodesLayer.append($nodeCell);
|
|
1451
1503
|
this.level = level + 1;
|
|
1452
|
-
|
|
1504
|
+
if (data.compact) {
|
|
1505
|
+
that.buildHierarchy($nodeDiv, this);
|
|
1506
|
+
} else {
|
|
1507
|
+
var $nodeCell = $('<li class="hierarchy">');
|
|
1508
|
+
$nodesLayer.append($nodeCell);
|
|
1509
|
+
that.buildHierarchy($nodeCell, this);
|
|
1510
|
+
}
|
|
1453
1511
|
});
|
|
1454
1512
|
}
|
|
1455
1513
|
},
|