Add devcontainer and stuff

src/script-graph3.ts

@@ -4,7 +4,7 @@ import {
   css,
   svg,
   property,
-  TemplateResult
+  TemplateResult,
 } from "lit-element";
 
 import {
@@ -28,29 +28,27 @@ import {
 const ICONS = {
   "call-split": mdiCallSplit,
   "ab-testing": mdiAbTesting,
-  "check": mdiCheck,
-  "close": mdiClose,
+  check: mdiCheck,
+  close: mdiClose,
   "chevron-right": mdiChevronRight,
-  "exclamation": mdiExclamation,
-  "asterisk": mdiAsterisk,
+  exclamation: mdiExclamation,
+  asterisk: mdiAsterisk,
 };
 
 const SIZE = 24;
 
-interface GraphNode extends LitElement{
+interface GraphNode extends LitElement {
   render_svg(): TemplateResult;
   width: number;
   height: number;
 }
 
 class ScriptGraphNode extends LitElement {
-
   @property() icon = "chevron-right";
 
   connectedCallback() {
     super.connectedCallback();
-    if(!this.hasAttribute('tabindex'))
-      this.setAttribute('tabindex', "0");
+    if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
   }
 
   get width() {
@@ -64,21 +62,27 @@ class ScriptGraphNode extends LitElement {
     <svg
       width="${this.width}"
       height="${this.height}"
-      viewBox="${-this.width/2} 0 ${this.width} ${this.height}">
+      viewBox="${-this.width / 2} 0 ${this.width} ${this.height}"
+    >
       <circle
         cx="0"
-        cy="${this.width/2}"
-        r="${SIZE/2}"
+        cy="${this.width / 2}"
+        r="${SIZE / 2}"
       />
-      <g style="pointer-events: none" transform="translate(${- 12} ${this.width/2 - 12})">
-      ${ICONS[this.icon] ?
-        svg`
-        <path d="${ICONS[this.icon]}"/>
-        `
-        : ""}
+      <g
+        style="pointer-events: none"
+        transform="translate(${-12} ${this.width / 2 - 12})"
+      >
+        ${
+          ICONS[this.icon]
+            ? svg`
+          <path d="${ICONS[this.icon]}"/>
+          `
+            : ""
+        }
       </g>
       </svg>
-    `
+    `;
   }
 
   static get styles() {
@@ -102,29 +106,26 @@ 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;
-    for(const c of this.children) {
+    for (const c of this.children) {
       w += (c as any).width ?? 0;
     }
     return w;
   }
   get height() {
     let h = 0;
-    for(const c of this.children) {
+    for (const c of this.children) {
       h = Math.max(h, (c as any).height ?? 0);
     }
-    return h + 2*this._branch_height;
+    return h + 2 * this._branch_height;
   }
 
   async updateChildren() {
@@ -136,83 +137,81 @@ class ScriptGraphBranch extends LitElement {
     let total = 0;
     for (const c of Array.from(this.children)) {
       const rect = c.getBoundingClientRect();
-      branch_x.push(rect.width/2+total);
+      branch_x.push(rect.width / 2 + total);
       total += rect.width;
     }
 
-    const line_end = this.height-this._branch_height;
-    
+    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" />
-    ${branch_x.map((x) => {
-      return svg`
-        <path
-          class="line"
-          d="
-            M ${this.width/2} 0
-            C ${this.width/2} ${this._branch_curve}
-              ${x} ${this._branch_height-this._branch_curve}
-              ${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}
-          "
+      <svg width="${this.width}" height="${this.height}">
+        <rect
+          x="0"
+          y="0"
+          width="${this.width}"
+          height="${this.height}"
+          fill="white"
         />
-      `
-    })}
-    </svg>
-    <script-graph-node
-    id="head"
-    .icon=${"call-split"}
-    >
-    </script-graph-node>
-    <div id="branches" style="top: ${this._branch_height}px;">
-      <slot
-        @slotchange=${this.updateChildren}
-      ></slot>
-    </div>
-    `
+        ${branch_x.map((x) => {
+          return svg`
+              <path
+                class="line"
+                d="
+                  M ${this.width / 2} 0
+                  C ${this.width / 2} ${this._branch_curve}
+                    ${x} ${this._branch_height - this._branch_curve}
+                    ${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}
+                "
+              />
+            `;
+        })}
+      </svg>
+      <script-graph-node id="head" .icon=${"call-split"}> </script-graph-node>
+      <div id="branches" style="top: ${this._branch_height}px;">
+        <slot @slotchange=${this.updateChildren}></slot>
+      </div>
+    `;
   }
 
   static get styles() {
     return css`
-    :host {
-      position: relative;
-      display: flex;
-      --stroke-clr: var(--stroke-color, rgb(3, 169, 244));
-      --hover-clr: var(--hover-color, rgb(255, 152, 0));
-    }
-    #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;
-    }
+      :host {
+        position: relative;
+        display: flex;
+        --stroke-clr: var(--stroke-color, rgb(3, 169, 244));
+        --hover-clr: var(--hover-color, rgb(255, 152, 0));
+      }
+      #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;
+      }
     `;
   }
-
 }
 
 class ScriptGraph3 extends LitElement {
-
   @property() content = [];
   @property() _width = 0;
   @property() _height = 0;
@@ -228,7 +227,7 @@ class ScriptGraph3 extends LitElement {
 
   get height() {
     let h = 0;
-    for(const c of this.children) {
+    for (const c of this.children) {
       h += (c as any).height ?? 0;
       h += this._distance;
     }
@@ -237,7 +236,7 @@ class ScriptGraph3 extends LitElement {
 
   get width() {
     let w = 0;
-    for(const c of this.children) {
+    for (const c of this.children) {
       w = Math.max(w, (c as any).width ?? 0);
     }
     return w;
@@ -245,52 +244,54 @@ class ScriptGraph3 extends LitElement {
 
   render() {
     return html`
-    <svg width="${this.width}" height="${this.height}">
-    <rect x=0 y=0 width="${this.width}" height="${this.height}" fill="white" />
-    <path
-      class="line"
-      d="
-        M ${this.width/2} 0
-        L ${this.width/2} ${this.height}
-      "
-    />
-    </svg>
-    <div id="nodes" style="--distance: ${this._distance}px;">
-      <slot
-        @slotchange=${this.updateChildren}
-      ></slot>
-    </div>
-    `
+      <svg width="${this.width}" height="${this.height}">
+        <rect
+          x="0"
+          y="0"
+          width="${this.width}"
+          height="${this.height}"
+          fill="white"
+        />
+        <path
+          class="line"
+          d="
+            M ${this.width / 2} 0
+            L ${this.width / 2} ${this.height}
+          "
+        />
+      </svg>
+      <div id="nodes" style="--distance: ${this._distance}px;">
+        <slot @slotchange=${this.updateChildren}></slot>
+      </div>
+    `;
   }
 
   static get styles() {
     return css`
-    :host {
-      position: relative;
-      display: flex;
-      --stroke-clr: var(--stroke-color, rgb(3, 169, 244));
-      --hover-clr: var(--hover-color, rgb(255, 152, 0));
-    }
-    #nodes {
-      position: absolute;
-      top: var(--distance, 10px);
-      left: 0;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-    ::slotted(*) {
-      padding-bottom: var(--distance, 10px);
-    }
-    path.line {
-      stroke: var(--stroke-clr);
-      stroke-width: 2;
-      fill: white;
-    }
+      :host {
+        position: relative;
+        display: flex;
+        --stroke-clr: var(--stroke-color, rgb(3, 169, 244));
+        --hover-clr: var(--hover-color, rgb(255, 152, 0));
+      }
+      #nodes {
+        position: absolute;
+        top: var(--distance, 10px);
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      ::slotted(*) {
+        padding-bottom: var(--distance, 10px);
+      }
+      path.line {
+        stroke: var(--stroke-clr);
+        stroke-width: 2;
+        fill: white;
+      }
     `;
-
   }
-
 }
 customElements.define("script-graph3", ScriptGraph3);
 customElements.define("script-graph-node", ScriptGraphNode);