orgchart 4.0.1 → 6.0.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.
Files changed (77) hide show
  1. package/.github/workflows/publish.yml +32 -0
  2. package/README.md +205 -89
  3. package/README.zh-cn.md +221 -68
  4. package/README.zh-tw.md +221 -68
  5. package/bower.json +6 -9
  6. package/demo/10000-nodes.html +139 -0
  7. package/demo/ajax-datasource.html +46 -45
  8. package/demo/bottom2top.html +12 -9
  9. package/demo/center-on-selected-node.html +21 -17
  10. package/demo/color-coded.html +12 -9
  11. package/demo/css/style.css +28 -0
  12. package/demo/custom-icons.html +12 -9
  13. package/demo/custom-template.html +12 -9
  14. package/demo/data-prop-compact.html +11 -8
  15. package/demo/data-prop-hybrid.html +79 -50
  16. package/demo/default-collapsed.html +12 -9
  17. package/demo/drag-drop-hybrid-chart.html +17 -14
  18. package/demo/drag-drop.html +21 -16
  19. package/demo/edit-chart.html +148 -94
  20. package/demo/edit-hybrid-chart.html +178 -135
  21. package/demo/expand-to-given-depth.html +30 -22
  22. package/demo/export-chart-pdf.html +12 -9
  23. package/demo/export-chart-with-pictures.html +19 -12
  24. package/demo/export-chart.html +12 -9
  25. package/demo/family-tree.html +100 -0
  26. package/demo/familytree-custom-properties.html +108 -0
  27. package/demo/filter-node.html +104 -57
  28. package/demo/get-hierarchy.html +17 -12
  29. package/demo/get-related-nodes.html +27 -17
  30. package/demo/index.html +7 -4
  31. package/demo/integrate-map.html +32 -27
  32. package/demo/left2right.html +12 -9
  33. package/demo/level-offset.html +16 -15
  34. package/demo/link-node.html +12 -9
  35. package/demo/local-datasource.html +11 -8
  36. package/demo/minimap.html +224 -0
  37. package/demo/nodes-of-different-widths.html +11 -8
  38. package/demo/ondemand-loading-data.html +88 -91
  39. package/demo/option-createNode.html +31 -20
  40. package/demo/pan-zoom.html +20 -11
  41. package/demo/reload-data.html +17 -14
  42. package/demo/report-path.html +59 -29
  43. package/demo/responsive-design.html +14 -11
  44. package/demo/right2left.html +12 -9
  45. package/demo/toggle-sibs-resp.html +12 -9
  46. package/demo/ul-datasource.html +11 -8
  47. package/demo/vertical-level.html +12 -9
  48. package/dist/css/{jquery.orgchart.css → orgchart.css} +210 -78
  49. package/dist/css/orgchart.min.css +1 -0
  50. package/dist/js/orgchart.js +4101 -0
  51. package/dist/js/orgchart.min.js +2 -0
  52. package/dist/js/orgchart.min.js.map +1 -0
  53. package/gulpfile.js +37 -26
  54. package/package.json +32 -32
  55. package/src/css/{jquery.orgchart.css → orgchart.css} +210 -78
  56. package/src/js/orgchart.js +4101 -0
  57. package/test/cypress/e2e/demo-interactions.cy.js +91 -0
  58. package/test/cypress/e2e/demo-rendering.cy.js +100 -0
  59. package/test/cypress/e2e/drag-drop-hybrid-chart.cy.js +22 -0
  60. package/test/cypress/e2e/edit-chart.cy.js +20 -0
  61. package/test/cypress/e2e/level-offset.cy.js +21 -0
  62. package/test/cypress/e2e/minimap.cy.js +66 -0
  63. package/test/cypress/e2e/pan-zoom.cy.js +165 -0
  64. package/test/cypress/e2e/report-path.cy.js +20 -0
  65. package/test/cypress/e2e/vertical-vevel.cy.js +5 -3
  66. package/test/e2e/local-datasource/test.js +1 -1
  67. package/test/integration/init-tests.js +168 -62
  68. package/test/integration/tests.js +1034 -56
  69. package/test/unit/lifecycle-builders-export.tests.js +1426 -0
  70. package/test/unit/minimap.tests.js +210 -0
  71. package/test/unit/tests.js +2372 -252
  72. package/demo/multiple-layers.html +0 -128
  73. package/dist/css/jquery.orgchart.min.css +0 -1
  74. package/dist/js/jquery.orgchart.js +0 -1686
  75. package/dist/js/jquery.orgchart.min.js +0 -5
  76. package/dist/js/jquery.orgchart.min.js.map +0 -1
  77. package/src/js/jquery.orgchart.js +0 -1686
package/demo/right2left.html CHANGED
@@ -2,23 +2,25 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart Right to Left Demo</title>
6
6
  <link rel="icon" href="img/logo.png">
7
- <link rel="stylesheet" href="css/jquery.orgchart.css">
7
+ <link rel="stylesheet" href="css/orgchart.css">
8
8
  <link rel="stylesheet" href="css/style.css">
9
9
  <style type="text/css">
10
10
  #chart-container { text-align: right; }
11
11
  </style>
12
12
  </head>
13
13
  <body>
14
+ <section class="demo-notes">
15
+ <h1>Right to Left Demo</h1>
16
+ <p>This demo renders the chart from right to left instead of the default top-to-bottom layout.</p>
17
+ </section>
14
18
  <div id="chart-container"></div>
15
-
16
- <script type="text/javascript" src="js/jquery.min.js"></script>
17
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
19
+ <script type="text/javascript" src="js/orgchart.js"></script>
18
20
  <script type="text/javascript">
19
- $(function() {
21
+ document.addEventListener('DOMContentLoaded', () => {
20
22
 
21
- var datascource = {
23
+ const datasource = {
22
24
  'name': 'Lao Lao',
23
25
  'title': 'general manager',
24
26
  'children': [
@@ -34,8 +36,9 @@
34
36
  ]
35
37
  };
36
38
 
37
- $('#chart-container').orgchart({
38
- 'data' : datascource,
39
+ const oc = new OrgChart({
40
+ chartContainer: '#chart-container',
41
+ 'data' : datasource,
39
42
  'nodeContent': 'title',
40
43
  'direction': 'r2l'
41
44
  });
package/demo/toggle-sibs-resp.html CHANGED
@@ -2,20 +2,22 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart Toggle Siblings Demo</title>
6
6
  <link rel="icon" href="img/logo.png">
7
- <link rel="stylesheet" href="css/jquery.orgchart.css">
7
+ <link rel="stylesheet" href="css/orgchart.css">
8
8
  <link rel="stylesheet" href="css/style.css">
9
9
  </head>
10
10
  <body>
11
+ <section class="demo-notes">
12
+ <h1>Toggle Siblings Demo</h1>
13
+ <p>This demo lets users collapse and expand left and right sibling groups independently.</p>
14
+ </section>
11
15
  <div id="chart-container"></div>
12
-
13
- <script type="text/javascript" src="js/jquery.min.js"></script>
14
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
16
+ <script type="text/javascript" src="js/orgchart.js"></script>
15
17
  <script type="text/javascript">
16
- $(function() {
18
+ document.addEventListener('DOMContentLoaded', () => {
17
19
 
18
- var datascource = {
20
+ const datasource = {
19
21
  'name': 'Lao Lao',
20
22
  'title': 'general manager',
21
23
  'children': [
@@ -35,8 +37,9 @@
35
37
  ]
36
38
  };
37
39
 
38
- $('#chart-container').orgchart({
39
- 'data' : datascource,
40
+ const oc = new OrgChart({
41
+ chartContainer: '#chart-container',
42
+ 'data' : datasource,
40
43
  'nodeContent': 'title',
41
44
  'toggleSiblingsResp': true
42
45
  });
package/demo/ul-datasource.html CHANGED
@@ -2,9 +2,9 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart UL Datasource Demo</title>
6
6
  <link rel="icon" href="img/logo.png">
7
- <link rel="stylesheet" href="css/jquery.orgchart.css">
7
+ <link rel="stylesheet" href="css/orgchart.css">
8
8
  <link rel="stylesheet" href="css/style.css">
9
9
  <style type="text/css">
10
10
  #ul-data { display: inline-block; width: 40%; vertical-align: top; }
@@ -13,6 +13,10 @@
13
13
  </style>
14
14
  </head>
15
15
  <body>
16
+ <section class="demo-notes">
17
+ <h1>UL Datasource Demo</h1>
18
+ <p>This demo renders the chart from nested UL markup so you can compare the source list and generated chart side by side.</p>
19
+ </section>
16
20
  <ul id="ul-data">
17
21
  <li>Lao Lao
18
22
  <ul>
@@ -32,14 +36,13 @@
32
36
  </li>
33
37
  </ul>
34
38
  <div id="chart-container"></div>
35
-
36
- <script type="text/javascript" src="js/jquery.min.js"></script>
37
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
39
+ <script type="text/javascript" src="js/orgchart.js"></script>
38
40
  <script type="text/javascript">
39
- $(function() {
41
+ document.addEventListener('DOMContentLoaded', () => {
40
42
 
41
- $('#chart-container').orgchart({
42
- 'data' : $('#ul-data')
43
+ const oc = new OrgChart({
44
+ chartContainer: '#chart-container',
45
+ 'data' : document.getElementById('ul-data')
43
46
  });
44
47
 
45
48
  });
package/demo/vertical-level.html CHANGED
@@ -2,9 +2,9 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart Vertical Level Demo</title>
6
6
  <link rel="icon" href="img/logo.png">
7
- <link rel="stylesheet" href="css/jquery.orgchart.css">
7
+ <link rel="stylesheet" href="css/orgchart.css">
8
8
  <link rel="stylesheet" href="css/style.css">
9
9
  <style type="text/css">
10
10
  #chart-container { height: 620px; }
@@ -12,14 +12,16 @@
12
12
  </style>
13
13
  </head>
14
14
  <body>
15
+ <section class="demo-notes">
16
+ <h1>Vertical Level Demo</h1>
17
+ <p>This demo switches deeper levels into vertical layout to create a hybrid horizontal and vertical chart.</p>
18
+ </section>
15
19
  <div id="chart-container"></div>
16
-
17
- <script type="text/javascript" src="js/jquery.min.js"></script>
18
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
20
+ <script type="text/javascript" src="js/orgchart.js"></script>
19
21
  <script type="text/javascript">
20
- $(function() {
22
+ document.addEventListener('DOMContentLoaded', () => {
21
23
 
22
- var datascource = {
24
+ const datasource = {
23
25
  'name': 'Lao Lao',
24
26
  'title': 'general manager',
25
27
  'children': [
@@ -60,8 +62,9 @@
60
62
  ]
61
63
  };
62
64
 
63
- $('#chart-container').orgchart({
64
- 'data' : datascource,
65
+ const oc = new OrgChart({
66
+ chartContainer: '#chart-container',
67
+ 'data' : datasource,
65
68
  'nodeContent': 'title',
66
69
  'verticalLevel': 3,
67
70
  'visibleLevel': 4
package/dist/css/{jquery.orgchart.css → orgchart.css} RENAMED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * jQuery OrgChart Plugin
2
+ * JavaScript OrgChart Component
3
3
  * https://github.com/dabeng/OrgChart
4
4
  *
5
5
  * Copyright 2016, dabeng
@@ -51,7 +51,9 @@
51
51
  }
52
52
 
53
53
  .orgchart ~ .mask {
54
- position: absolute;
54
+ position: sticky;
55
+ width: 100%;
56
+ height: 100%;
55
57
  top: 0;
56
58
  right: 0;
57
59
  bottom: 0;
@@ -83,6 +85,75 @@
83
85
  list-style: none;
84
86
  padding-left: 0;
85
87
  margin: 0;
88
+ justify-content: center;
89
+ }
90
+
91
+ .orgchart-minimap {
92
+ position: absolute;
93
+ right: 12px;
94
+ bottom: 12px;
95
+ z-index: 25;
96
+ width: 180px;
97
+ height: 120px;
98
+ padding: 8px;
99
+ border: 1px solid rgba(68, 68, 68, 0.18);
100
+ border-radius: 8px;
101
+ background-color: rgba(255, 255, 255, 0.96);
102
+ box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
103
+ box-sizing: border-box;
104
+ }
105
+
106
+ .orgchart-minimap-stage {
107
+ position: relative;
108
+ width: 100%;
109
+ height: 100%;
110
+ overflow: hidden;
111
+ border-radius: 5px;
112
+ background-image: linear-gradient(rgba(68, 68, 68, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(68, 68, 68, 0.05) 1px, transparent 1px);
113
+ background-size: 10px 10px;
114
+ background-color: #f9fbfc;
115
+ }
116
+
117
+ .orgchart-minimap-content {
118
+ position: absolute;
119
+ top: 0;
120
+ left: 0;
121
+ pointer-events: none;
122
+ }
123
+
124
+ .orgchart-minimap-node {
125
+ position: absolute;
126
+ min-width: 6px;
127
+ height: 18px;
128
+ border-radius: 0;
129
+ opacity: 1;
130
+ box-shadow: none;
131
+ }
132
+
133
+ .orgchart-minimap .orgchart,
134
+ .orgchart-minimap .orgchart ul,
135
+ .orgchart-minimap .orgchart li,
136
+ .orgchart-minimap .orgchart .node,
137
+ .orgchart-minimap .orgchart .edge,
138
+ .orgchart-minimap .orgchart .verticalNodes,
139
+ .orgchart-minimap .orgchart .verticalNode,
140
+ .orgchart-minimap .orgchart .nodes,
141
+ .orgchart-minimap-node {
142
+ pointer-events: none;
143
+ }
144
+
145
+ .orgchart-minimap-viewport {
146
+ position: absolute;
147
+ top: 0;
148
+ left: 0;
149
+ min-width: 12px;
150
+ min-height: 12px;
151
+ border: 2px solid rgba(28, 111, 197, 0.9);
152
+ border-radius: 4px;
153
+ background-color: rgba(28, 111, 197, 0.12);
154
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 999px rgba(255, 255, 255, 0.12);
155
+ box-sizing: border-box;
156
+ cursor: move;
86
157
  }
87
158
 
88
159
  .orgchart .hierarchy {
@@ -91,13 +162,71 @@
91
162
 
92
163
  /* styles of link lines */
93
164
  .orgchart .hierarchy::before {
165
+ box-sizing: border-box;
94
166
  content: "";
95
167
  position: absolute;
96
168
  top: -11px; /* -(background square size + half width of line) */
97
169
  left: 0;
98
170
  width: 100%;
171
+ border-color: rgba(217, 83, 79, 0.8);
172
+ border-style: solid;
173
+ border-width: 2px 0 0 0;
174
+ }
175
+
176
+ /* 本姓人与上一层父母的连线，借助伪元素::before实现 */
177
+ /* 处理同一层中特殊的首节点 */
178
+ .orgchart .couple:first-child:not(:only-child)::before {
179
+ width: calc(100% - 69px); /* half width of hierarchy - half width of node - node's padding - node's border width */
180
+ left: 69px;
181
+ }
182
+
183
+ /* 处理同一层中特殊的末节点 */
184
+ .orgchart .couple:last-child:not(:only-child)::before {
185
+ width: calc(50% + 71px);
186
+ left: 0;
187
+ }
188
+
189
+ .orgchart .hierarchy.couple:only-child::before {
190
+ width: 142px; /* half of node's width + link's width */
191
+ left: calc(50% - 71px); /* half width of node - half of link width */
192
+ }
193
+
194
+ /* 在family tree中，一个夫妻组合里，本姓人只有一个，外姓人可能有多个 */
195
+ /* 我们通过水平的连线来表示他们存在婚姻关系，借助伪元素::after实现 */
196
+ .orgchart .hierarchy.spouse:not(.couple)::after {
197
+ content: "";
198
+ position: absolute;
199
+ border-top: 2px solid rgba(217, 83, 79, 0.8);
200
+ box-sizing: border-box;
201
+ z-index: 0;
202
+ top: 24px;
203
+ width: var(--ft-width);
204
+ left: var(--ft-left-offset);
205
+ }
206
+
207
+ /* 一夫一妻情况下的连线 */
208
+ .orgchart .couple {
209
+ white-space: nowrap;
210
+ }
211
+
212
+ .orgchart .couple:has(> .nodes) > .node:first-child::after {
213
+ content: "";
214
+ position: absolute;
215
+ top: 24px;
216
+ left: calc(100% + 1px);
217
+ width: 2px;
218
+ height: 33px;
219
+ background-color: rgba(217, 83, 79, 0.8);
220
+ }
221
+ .orgchart .couple::after {
222
+ content: "";
223
+ position: absolute;
99
224
  border-top: 2px solid rgba(217, 83, 79, 0.8);
100
225
  box-sizing: border-box;
226
+ z-index: 0;
227
+ top: 24px;
228
+ width: 20px;
229
+ left: calc(50% - 10px); /* half of hierarchy - node's padding width - node's border with */
101
230
  }
102
231
 
103
232
  .orgchart .hierarchy:first-child::before,
@@ -111,7 +240,7 @@
111
240
  width: calc(50% + 1px);
112
241
  }
113
242
 
114
- .orgchart .hierarchy:not(.hidden):only-child::before {
243
+ .orgchart .hierarchy:not(.hidden):not(.spouse):only-child::before {
115
244
  width: 2px;
116
245
  }
117
246
 
@@ -122,17 +251,17 @@
122
251
  .orgchart .isSiblingsCollapsed.left-sibs:last-child:before,
123
252
  .orgchart .isCollapsedSibling::before,
124
253
  .orgchart .isCollapsedSibling .hierarchy::before,
125
- .orgchart .isChildrenCollapsed > .node:not(:only-child)::after,
254
+ .orgchart .hierarchy.isChildrenCollapsed:not(.couple) > .node:has(+ .nodes)::after,
126
255
  .orgchart .isCollapsedDescendant::before,
127
256
  .orgchart .isCollapsedDescendant > .node::before,
128
257
  .orgchart .isCollapsedDescendant > .node::after,
129
258
  .orgchart .isAncestorsCollapsed:only-child::before,
130
- .orgchart .isAncestorsCollapsed > .node::before {
259
+ .orgchart .isAncestorsCollapsed > .node:not(.outsider)::before {
131
260
  content: none;
132
261
  }
133
262
 
134
263
  /* excluding leaf node */
135
- .orgchart .node:not(:only-child)::after {
264
+ .orgchart .hierarchy:not(.couple) > .node:has(+ .nodes)::after {
136
265
  content: "";
137
266
  position: absolute;
138
267
  bottom: -12px; /* -(background square size + node's border width) */
@@ -158,14 +287,24 @@
158
287
  .orgchart > ul > li > ul li > .node::before {
159
288
  content: "";
160
289
  position: absolute;
161
- top: var(--top, -12px); /* -(fallback value = background square size + border width of node) */
162
290
  left: calc(50% - 1px);
163
291
  width: 2px;
164
- height: var(--height, 10px); /* fallback value = background square size */
165
292
  background-color: rgba(217, 83, 79, 0.8);
293
+ top: var(--top, -12px); /* -(fallback value = background square size + border width of node) */
294
+ height: var(--height, 10px); /* fallback value = background square size */
166
295
  }
167
296
 
168
- .orgchart > ul > li > ul li.isSiblingsCollapsed > .node::before {
297
+ .orgchart > ul > li > ul li > .node.outsider::before {
298
+ background-color: unset;
299
+ background-image: repeating-linear-gradient(
300
+ to bottom,
301
+ rgba(217, 83, 79, 0.8) 0 2px,
302
+ transparent 2px 4px
303
+ );
304
+ background-repeat: repeat-y;
305
+ }
306
+
307
+ .orgchart > ul > li > ul .isSiblingsCollapsed > .node::before {
169
308
  top: var(--top-cross-point, -12px);
170
309
  height: var(--height-cross-point, 10px);
171
310
  }
@@ -179,6 +318,8 @@
179
318
  padding: 3px;
180
319
  border: 2px dashed transparent;
181
320
  text-align: center;
321
+ transition: transform 0.3s, opacity 0.3s;
322
+ z-index: 1;
182
323
  }
183
324
 
184
325
  .orgchart.l2r .node, .orgchart.r2l .node {
@@ -190,7 +331,7 @@
190
331
  background-color: rgba(238, 217, 54, 0.5);
191
332
  transition: .5s;
192
333
  cursor: default;
193
- z-index: 20;
334
+ z-index: 2;
194
335
  }
195
336
 
196
337
  .orgchart .node.focused {
@@ -402,28 +543,61 @@
402
543
  bottom: -2px;
403
544
  width: 16px;
404
545
  height: 16px;
546
+ visibility: hidden;
547
+ background-color: rgba(68, 157, 68, 0.6);
548
+ }
549
+
550
+ .orgchart .node:hover .toggleBtn {
551
+ visibility: visible;
405
552
  }
406
553
 
407
554
  .orgchart .node .toggleBtn::before {
408
- background-color: rgba(68, 157, 68, 0.6);
555
+ content: "";
409
556
  position: absolute;
410
- left: 0;
411
- bottom: 0;
557
+ left: 3px;
558
+ top: 7px;
559
+ box-sizing: border-box;
560
+ width: 10px;
561
+ height: 2px;
562
+ border-radius: 1px;
563
+ background-color: #fff;
564
+ display: none;
412
565
  }
413
566
 
414
- .orgchart .node .toggleBtn:hover::before {
567
+ .orgchart .node .toggleBtn:hover {
415
568
  background-color: #449d44;
416
569
  }
417
570
 
571
+ .orgchart .node .toggleBtn::after {
572
+ content: "";
573
+ position: absolute;
574
+ left: 7px;
575
+ top: 3px;
576
+ width: 2px;
577
+ height: 10px;
578
+ border-radius: 1px;
579
+ background-color: #fff;
580
+ display: none;
581
+ }
582
+
583
+ .orgchart .node .toggleBtn.oci-plus-square::before,
584
+ .orgchart .node .toggleBtn.oci-plus-square::after {
585
+ display: block;
586
+ }
587
+
588
+ .orgchart .node .toggleBtn.oci-minus-square::before {
589
+ display: block;
590
+ }
591
+
592
+ .orgchart .node .toggleBtn.oci-minus-square::after {
593
+ display: none;
594
+ }
595
+
418
596
  .oc-export-btn {
419
597
  margin-left: 0.5rem;
420
598
  padding: 0.5rem 1rem;
421
599
  }
422
600
 
423
- .orgchart .node {
424
- transition: transform 0.3s, opacity 0.3s;
425
- }
426
-
427
601
  .orgchart .slide-down {
428
602
  opacity: 0;
429
603
  transform: translateY(40px);
@@ -479,8 +653,8 @@
479
653
  margin-bottom: 0;
480
654
  }
481
655
 
482
- .orgchart .nodes.vertical .node::before,
483
- .orgchart .nodes.vertical .node::after {
656
+ .orgchart .nodes.vertical .hierarchy .node::before,
657
+ .orgchart .nodes.vertical .hierarchy .node::after {
484
658
  content: none;
485
659
  }
486
660
 
@@ -495,20 +669,21 @@
495
669
  content: '';
496
670
  position: absolute;
497
671
  left: -6px; /* -(background square size + half width of line */
672
+ width: 11px; /* background square size + half width of line */
498
673
  border-color: rgba(217, 83, 79, 0.8);
499
674
  border-style: solid;
500
- border-width: 0 0 2px 2px;
501
675
  }
502
676
 
503
677
  .orgchart .nodes.vertical .hierarchy::before {
504
- top: 0px;
505
- height: 26px; /* node top half's height(25px) + half width of line */
506
- width: 11px; /* background square size + half width of line */
678
+ height: 26px;
679
+ top: 0;
680
+ border-width: 0 0 2px 2px;
507
681
  }
508
682
 
509
683
  .orgchart .nodes.vertical .hierarchy::after {
684
+ height: calc(100% - 24px); /* node top half's height(25px) + half width of line */
510
685
  bottom: 0;
511
- height: calc(100% - 24px); /* height of hierarchy - (node top half's height(25px) - half width of line) */
686
+ border-width: 0 0 0 2px;
512
687
  }
513
688
 
514
689
  .orgchart .nodes.vertical .hierarchy:last-child::after {
@@ -516,7 +691,6 @@
516
691
  }
517
692
 
518
693
  .orgchart .nodes.vertical > .hierarchy:first-child::before {
519
- box-sizing: border-box;
520
694
  top: -11px; /* -(background square size + half width of line) */
521
695
  height: 35px; /* node top half's height + node padding + node border width + background square size */
522
696
  width: calc(50% + 2px);
@@ -524,19 +698,16 @@
524
698
  }
525
699
 
526
700
  .orgchart .nodes.vertical > .hierarchy:first-child::after {
527
- box-sizing: border-box;
528
701
  top: 24px; /* node bottom half's height(25px) - half border width of line */
529
- width: 11px; /* backgroud square size + half border width of line */
530
702
  border-width: 2px 0 0 2px;
531
703
  }
532
704
 
533
- .orgchart .nodes.vertical > .hierarchy:first-child:last-child::after {
705
+ .orgchart .nodes.vertical > .hierarchy:only-child::after {
534
706
  border-width: 2px 0 0 0;
535
707
  }
536
708
 
537
709
  /* styles for compact nodes */
538
710
  .orgchart .node.compact {
539
- position: static;
540
711
  display: grid;
541
712
  width: 140px;
542
713
  height: 50px;
@@ -544,7 +715,6 @@
544
715
  }
545
716
 
546
717
  .orgchart .node.compact.looseMode {
547
- display: grid;
548
718
  width: unset;
549
719
  height: unset;
550
720
  }
@@ -587,14 +757,14 @@
587
757
  background-color: #eee;
588
758
  }
589
759
 
590
- .orgchart .node.compact::before {
760
+ /* .orgchart .node.compact::before {
591
761
  top: var(--top-cross-point, -10px);
592
- }
762
+ } */
593
763
 
594
764
  .orgchart .node.compact > .content {
595
765
  position: absolute;
596
- top: 25px;
597
- left: 5px;
766
+ top: 23px;
767
+ left: 3px;
598
768
  }
599
769
 
600
770
  .orgchart .node.compact.looseMode > .title {
@@ -603,8 +773,8 @@
603
773
  }
604
774
 
605
775
  .orgchart .node.compact.looseMode > .content {
606
- top: 30px;
607
- left: 10px;
776
+ top: 28px;
777
+ left: 8px;
608
778
  }
609
779
 
610
780
  .orgchart .node.compact > .node.compact.looseMode > .title {
@@ -627,7 +797,7 @@
627
797
  margin-bottom: 0;
628
798
  }
629
799
 
630
- .orgchart .node.compact .node:not(:only-child)::after {
800
+ .orgchart .node.compact .node:has(+ .nodes)::after {
631
801
  content: unset;
632
802
  }
633
803
 
@@ -637,33 +807,11 @@
637
807
 
638
808
  .orgchart .node.compact > .backToCompactSymbol {
639
809
  position: absolute;
640
- top: 5px;
641
- left: 5px;
642
- }
643
-
644
- .orgchart .node.compact.looseMode > .backToCompactSymbol {
645
- top: 10px;
646
- left: 10px;
647
- }
648
-
649
- .orgchart .node.compact > .node.compact.looseMode > .backToCompactSymbol {
650
810
  top: 8px;
651
811
  left: 8px;
652
812
  }
653
813
 
654
- .orgchart .node.compact > .node.compact > .backToCompactSymbol {
655
- position: absolute;
656
- top: 3px;
657
- left: 3px;
658
- }
659
-
660
814
  .orgchart .node.compact > .backToLooseSymbol {
661
- position: absolute;
662
- top: 25px;
663
- right: 5px;
664
- }
665
-
666
- .orgchart .node.compact > .node.compact > .backToLooseSymbol {
667
815
  position: absolute;
668
816
  top: 23px;
669
817
  right: 3px;
@@ -790,27 +938,11 @@
790
938
  }
791
939
 
792
940
  .oci-plus-square::before {
793
- content: "﹢";
794
- display: inline-block;
795
- width: 16px;
796
- height: 16px;
797
- text-align: center;
798
- line-height: 16px;
799
- background-color: #000;
800
- color: #fff;
801
- font-weight: bold;
941
+ content: "";
802
942
  }
803
943
 
804
944
  .oci-minus-square::before {
805
- content: "﹣";
806
- display: inline-block;
807
- width: 16px;
808
- height: 16px;
809
- text-align: center;
810
- line-height: 16px;
811
- background-color: #000;
812
- color: #fff;
813
- font-weight: bold;
945
+ content: "";
814
946
  }
815
947
 
816
948
  .oci-arrow-square-up::before {