Add vertical lines that match brackets

MichaelDoyle · MichaelDoyle · commit d79269954ee6 · 2025-05-24T23:16:10.000-04:00
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
@@ -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
@@ -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 {
+      content: "";
+      position: absolute;
+      left: 0.2em;
+      top: 0;
+      bottom: 0;
+      width: 1px;
+      background-color: var(--ngx-json-tree-line, #dcdbdb);
     }
   }
 

Original file line number	Diff line number	Diff line change
`@@ -54,8 +54,23 @@ $type-colors: (`
`54`	`54`	`}`
`55`	`55`	`}`
`56`	`56`
`57`		`- .children {`
	`57`	`+ .children-container {`
`58`	`58`	`margin-left: 12px;`
	`59`	`+`
	`60`	`+ .children {`
	`61`	`+ position: relative;`
	`62`	`+ }`
	`63`	`+ }`
	`64`	`+`
	`65`	`+ // Vertical line for connecting child segments`
	`66`	`+ .children-container > .children::before {`
	`67`	`+ content: "";`
	`68`	`+ position: absolute;`
	`69`	`+ left: 0.2em;`
	`70`	`+ top: 0;`
	`71`	`+ bottom: 0;`
	`72`	`+ width: 1px;`
	`73`	`+ background-color: var(--ngx-json-tree-line, #dcdbdb);`
`59`	`74`	`}`
`60`	`75`	`}`
`61`	`76`