Add vertical lines that match brackets

Author: MichaelDoyle

projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html

@@ -66,16 +66,18 @@
           }
         </div>
         @if (expandable && segment.expanded) {
-          <div class="children">
-            <ngx-json-treeview
-              [json]="segment.value"
-              [expanded]="expanded()"
-              [depth]="depth()"
-              [isClickableValue]="isClickableValue()"
-              [enableClickableValues]="enableClickableValues()"
-              [_parent]="segment"
-              [_currentDepth]="_currentDepth() + 1"
-              (onValueClick)="onValueClickHandler($event)" />
+          <div class="children-container">
+            <div class="children">
+              <ngx-json-treeview
+                [json]="segment.value"
+                [expanded]="expanded()"
+                [depth]="depth()"
+                [isClickableValue]="isClickableValue()"
+                [enableClickableValues]="enableClickableValues()"
+                [_parent]="segment"
+                [_currentDepth]="_currentDepth() + 1"
+                (onValueClick)="onValueClickHandler($event)" />
+            </div>
             <span class="punctuation">
               {{ closingBrace }}{{ needsComma ? ',' : '' }}
             </span>

projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.scss

@@ -54,8 +54,23 @@ $type-colors: (
       }
     }
 
-    .children {
+    .children-container {
       margin-left: 12px;
+
+      .children {
+        position: relative;
+      }
+    }
+
+    // Vertical line for connecting child segments
+    .children-container > .children::before {
+      background-color: var(--ngx-json-tree-line, #dcdbdb);
+      bottom: 0;
+      content: '';
+      left: 0.2em;
+      position: absolute;
+      top: 0;
+      width: 1px;
     }
   }