style: adjust tree indentation and add visual indicator for parent nodes

Author: genwolff

src/react-obj-view/components/RenderNode.tsx

@@ -94,7 +94,7 @@ export const RenderNode: React.FC<ObjectViewRenderRowProps> = (props) => {
                 className="tree-indents">
                 {nodeData.parents.slice(0, -1)
                     .map(index => <span style={{ ['--indent-index' as any]: String(index) }}>
-                        {"│ "}
+                        {"  "}
                     </span>)
                 }
             </span>

src/react-obj-view/components/style.css

@@ -88,6 +88,17 @@
             --compare: calc(clamp(0, abs(var(--indent-index, -1) - var(--active-parent, -1)), 1));
             opacity: clamp(0.07, calc(1 - var(--compare)), 0.4);
             transition: opacity 0.3s;
+            position: relative;
+            display: inline-block;
+            &:after {
+                content: "";
+                position: absolute;
+                background-color: currentColor;
+                left: 0.25em;
+                width: 0.1em;
+                top: -0em;
+                bottom: -0em;
+            }
         }
 
     }