A bit of cleanup

src/script-graph3.ts

@@ -36,7 +36,6 @@ const ICONS = {
 };
 
 const SIZE = 24;
-const DIST = 20;
 
 interface GraphNode extends LitElement{
   render_svg(): TemplateResult;
@@ -48,6 +47,12 @@ class ScriptGraphNode extends LitElement {
 
   @property() icon = "chevron-right";
 
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('tabindex'))
+      this.setAttribute('tabindex', "0");
+  }
+
   get width() {
     return SIZE + 5;
   }
@@ -56,7 +61,10 @@ class ScriptGraphNode extends LitElement {
   }
   render() {
     return svg`
-    <svg width="${this.width}" height="${this.height}" viewBox="${-this.width/2} 0 ${this.width} ${this.height}">
+    <svg
+      width="${this.width}"
+      height="${this.height}"
+      viewBox="${-this.width/2} 0 ${this.width} ${this.height}">
       <circle
         cx="0"
         cy="${this.width/2}"
@@ -85,8 +93,12 @@ class ScriptGraphNode extends LitElement {
         stroke-width: 2;
         fill: white;
       }
-      circle:hover {
+      :host(:hover) {
-        stroke: var(--hover-clr);
+        --stroke-clr: var(--hover-clr);
+      }
+      :host(:focus) {
+        --stroke-clr: green;
+        outline: none;
       }
     `;
   }
@@ -97,6 +109,8 @@ class ScriptGraphNode extends LitElement {
 class ScriptGraphBranch extends LitElement {
 
   @property() _num_items = 0;
+  @property() _branch_height = 30;
+  @property() _branch_curve = 25;
 
   get width() {
     let w = 0;
@@ -110,7 +124,7 @@ class ScriptGraphBranch extends LitElement {
     for(const c of this.children) {
       h = Math.max(h, (c as any).height ?? 0);
     }
-    return h + 40;
+    return h + 2*this._branch_height;
   }
 
   async updateChildren() {
@@ -118,26 +132,32 @@ class ScriptGraphBranch extends LitElement {
   }
 
   render() {
-    let xs = [];
+    let branch_x = [];
-    let x1 = 0;
+    let total = 0;
     for (const c of Array.from(this.children)) {
       const rect = c.getBoundingClientRect();
-      xs.push(rect.width/2+x1);
+      branch_x.push(rect.width/2+total);
-      x1 += rect.width;
+      total += rect.width;
     }
+
+    const line_end = this.height-this._branch_height;
     
     return html`
     <svg width="${this.width}" height="${this.height}">
     <rect x=0 y=0 width="${this.width}" height="${this.height}" fill="white" />
-    ${xs.map((x) => {
+    ${branch_x.map((x) => {
       return svg`
         <path
           class="line"
           d="
             M ${this.width/2} 0
-            C ${this.width/2} 10 ${x} 10 ${x} 20
+            C ${this.width/2} ${this._branch_curve}
-            L ${x} ${this.height-20}
+              ${x} ${this._branch_height-this._branch_curve}
-            C ${x} ${this.height-5} ${this.width/2} ${this.height-15} ${this.width/2} ${this.height}
+              ${x} ${this._branch_height}
+            L ${x} ${line_end}
+            C ${x} ${line_end+this._branch_curve}
+              ${this.width/2} ${this.height-this._branch_curve}
+              ${this.width/2} ${this.height}
           "
         />
       `
@@ -148,7 +168,7 @@ class ScriptGraphBranch extends LitElement {
     .icon=${"call-split"}
     >
     </script-graph-node>
-    <div id="branches">
+    <div id="branches" style="top: ${this._branch_height}px;">
       <slot
         @slotchange=${this.updateChildren}
       ></slot>
@@ -164,24 +184,28 @@ class ScriptGraphBranch extends LitElement {
       --stroke-clr: var(--stroke-color, rgb(3, 169, 244));
       --hover-clr: var(--hover-color, rgb(255, 152, 0));
     }
-    #head {
-      position: Absolute;
-      top: 5px;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
     #branches {
       position: absolute;
       top: 20px;
       left: 0;
       display: flex;
       flex-direction: row;
+      align-items: center;
     }
     path.line {
       stroke: var(--stroke-clr);
       stroke-width: 2;
       fill: white;
     }
+    #head {
+      position: Absolute;
+      top: 5px;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    :host(:focus-within) #head {
+      --stroke-color: green;
+    }
     `;
   }
 
@@ -192,6 +216,7 @@ class ScriptGraph3 extends LitElement {
   @property() content = [];
   @property() _width = 0;
   @property() _height = 0;
+  @property() _distance = 20;
 
   async updateChildren() {
     return;
@@ -205,9 +230,9 @@ class ScriptGraph3 extends LitElement {
     let h = 0;
     for(const c of this.children) {
       h += (c as any).height ?? 0;
-      h += 10;
+      h += this._distance;
     }
-    return h + 10;
+    return h + this._distance;
   }
 
   get width() {
@@ -230,7 +255,7 @@ class ScriptGraph3 extends LitElement {
       "
     />
     </svg>
-    <div id="nodes">
+    <div id="nodes" style="--distance: ${this._distance}px;">
       <slot
         @slotchange=${this.updateChildren}
       ></slot>
@@ -248,14 +273,14 @@ class ScriptGraph3 extends LitElement {
     }
     #nodes {
       position: absolute;
-      top: 10px;
+      top: var(--distance, 10px);
       left: 0;
       display: flex;
       flex-direction: column;
       align-items: center;
     }
     ::slotted(*) {
-      padding-bottom: 10px;
+      padding-bottom: var(--distance, 10px);
     }
     path.line {
       stroke: var(--stroke-clr);