feat(tree): added lines to denote branching

added lines to denote branching while making tree always symmetrical

src/components/tree/index.tsx

@@ -12,9 +12,27 @@ const Additional = lazy(
   () => import(`./additional.${VIEW}.tsx`) as Promise<{ default: Component }>
 );
 
+const findDepth = (nodes: SemanticTreeType["nodes"], index: number, end: number): number => {
+
+  if(index === end) return 0;
+
+  const current = nodes[index]
+
+  if(current.right) {
+    const left =  findDepth(nodes, index + 1, current.right - 1)
+    const right = findDepth(nodes, current.right, end)
+    if(left > right) return left + 1;
+    return right + 1;
+  }
+
+  return findDepth(nodes, index + 1, end);
+} 
+
 const Tree = () => {
   const [tree] = useStoreContext<SemanticTreeType>();
 
+  const maxDepth = () => tree.nodes.length > 0 ? findDepth(tree.nodes, 0, tree.nodes.length - 1) : 0
+
   return (
     <>
       <div class="flex flex-col gap-1 justify-start items-center">
@@ -23,6 +41,8 @@ const Tree = () => {
             line={tree.nodes[0]}
             index={0}
             end={tree.nodes.length - 1}
+            depth={0}
+            maxDepth={maxDepth()}
           />
         </Show>
       </div>

src/components/tree/node/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { lazy, ParentComponent, Show } from "solid-js";
+import { Index, lazy, ParentComponent, Show } from "solid-js";
 import useStoreContext from "../../../context";
 import { SemanticTreeType } from "../../../schemas/tree";
 import TreeLine from "../line";
@@ -8,6 +8,8 @@ export interface TreeNodeProps {
   line: SemanticTreeType["nodes"][number];
   index: number;
   end: number;
+  depth: number;
+  maxDepth: number;
 }
 
 const TreeLineWrapper = lazy(
@@ -29,8 +31,17 @@ const TreeNode = (props: TreeNodeProps) => {
         <Show
           when={props.line.right}
           fallback={
-            <Show when={props.index !== props.end}>
+            <Show when={props.index !== props.end} fallback={
+              <div class="flex gap-8">
+                <Index each={Array((props.maxDepth - props.depth) * 2).fill(0)}>
+                  {() => <div class="m-1 h-px w-[35rem]"/>}
+                </Index>
+
+              </div>
+            }>
               <TreeNode
+                depth={props.depth}
+                maxDepth={props.maxDepth}
                 index={props.index + 1}
                 line={tree.nodes[props.index + 1]}
                 end={props.end}
@@ -40,17 +51,35 @@ const TreeNode = (props: TreeNodeProps) => {
         >
           <div class="flex gap-8">
             <div class="flex flex-col gap-1 justify-start items-center">
+              <div class="self-stretch h-10">
+                  <svg class="h-full w-full">
+                    <line x1="50%" x2="90%" y1="90%" y2="10%" stroke="rgb(0,0,0)" stroke-width={2}>
+
+                    </line>
+                  </svg>
+              </div>
               <TreeNode
                 index={props.index + 1}
                 line={tree.nodes[props.index + 1]}
                 end={props.line.right! - 1}
+                depth={props.depth + 1}
+                maxDepth={props.maxDepth}
               />
             </div>
             <div class="flex flex-col gap-1 justify-start items-center">
+              <div class="self-stretch h-10">
+                  <svg class="h-full w-full">
+                    <line x1="10%" x2="50%" y1="10%" y2="90%" stroke="rgb(0,0,0)" stroke-width={2}>
+
+                    </line>
+                  </svg>
+              </div>
               <TreeNode
                 index={props.line.right!}
                 line={tree.nodes[props.line.right!]}
                 end={props.end}
+                maxDepth={props.maxDepth}
+                depth={props.depth + 1}
               />
             </div>
           </div>