From 5384861b5822e84ec02075f4571f54aa6814a349 Mon Sep 17 00:00:00 2001
From: Michael Doyle <michael.james.doyle@gmail.com>
Date: Sat, 24 May 2025 23:12:03 -0400
Subject: [PATCH] Add vertical lines that match brackets

---
 .../src/lib/ngx-json-treeview.component.html  | 22 ++++++++++---------
 .../src/lib/ngx-json-treeview.component.scss  | 17 +++++++++++++-
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html b/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html
index 93fa637..6b6eabd 100644
--- a/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html
+++ b/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>
diff --git a/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.scss b/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.scss
index 155d93d..c149a31 100644
--- a/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.scss
+++ b/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;
     }
   }