Some work on a more DOM-centered tree

example.html

@@ -38,6 +38,31 @@
       <div class="card" id="graph2">
         <script-graph3>
           <script-graph-node></script-graph-node>
+          <script-graph-node
+            icon="check"
+          ></script-graph-node>
+          <script-graph-branch>
+            <script-graph-node
+              icon="check"
+            ></script-graph-node>
+            <script-graph3>
+              <script-graph-node
+                icon="check"
+              ></script-graph-node>
+              <script-graph-node
+                icon="check"
+              ></script-graph-node>
+            </script-graph3>
+            <script-graph-branch>
+              <script-graph-node
+                icon="check"
+              ></script-graph-node>
+              <script-graph-node
+                icon="check"
+              ></script-graph-node>
+            </script-graph-branch>
+          </script-graph-branch>
+          <script-graph-node></script-graph-node>
         </script-graph3>
       </div>
       <div class="card code">

package-lock.json

@@ -1,8 +1,215 @@
 {
   "name": "script-graph",
   "version": "1.0.0",
-  "lockfileVersion": 1,
+  "lockfileVersion": 2,
   "requires": true,
+  "packages": {
+    "": {
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "@mdi/js": "^5.5.55",
+        "@vanillawc/wc-codemirror": "^1.8.10",
+        "lit-element": "^2.3.1"
+      },
+      "devDependencies": {
+        "@rollup/plugin-node-resolve": "^9.0.0",
+        "@rollup/plugin-typescript": "^5.0.2",
+        "rollup": "^2.26.4",
+        "tslib": "^2.0.1",
+        "typescript": "^4.0.2"
+      }
+    },
+    "node_modules/@mdi/js": {
+      "version": "5.5.55",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-5.5.55.tgz",
+      "integrity": "sha512-vbw1QW3M9A4vObU9WmTETTG7n7feC9HSn/3up8ZYk/M3K9fGL9FPtw0+bdASRu1UOBgEsqC9eBhNW10IOcwMIg=="
+    },
+    "node_modules/@rollup/plugin-node-resolve": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-9.0.0.tgz",
+      "integrity": "sha512-gPz+utFHLRrd41WMP13Jq5mqqzHL3OXrfj3/MkSyB6UBIcuNt9j60GCbarzMzdf1VHFpOxfQh/ez7wyadLMqkg==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^3.1.0",
+        "@types/resolve": "1.17.1",
+        "builtin-modules": "^3.1.0",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.17.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@rollup/plugin-typescript": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-5.0.2.tgz",
+      "integrity": "sha512-CkS028Itwjqm1uLbFVfpJgtVtnNvZ+og/m6UlNRR5wOOnNTWPcVQzOu5xGdEX+WWJxdvWIqUq2uR/RBt2ZipWg==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^3.0.1",
+        "resolve": "^1.14.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+      "dev": true
+    },
+    "node_modules/@types/node": {
+      "version": "14.6.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.6.0.tgz",
+      "integrity": "sha512-mikldZQitV94akrc4sCcSjtJfsTKt4p+e/s0AGscVA6XArQ9kFclP+ZiYUMnq987rc6QlYxXv/EivqlfSLxpKA==",
+      "dev": true
+    },
+    "node_modules/@types/resolve": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
+      "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@vanillawc/wc-codemirror": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/@vanillawc/wc-codemirror/-/wc-codemirror-1.8.10.tgz",
+      "integrity": "sha512-UKMD/UOpF1uRl29nlwvwQqSMBqsl+uDWYlGx82wIYbIBJkeqPrSo1Ez1rGi9jc1CL7/XwUr7u+l/kTwZAEkrEg=="
+    },
+    "node_modules/builtin-modules": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz",
+      "integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+      "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
+      "dev": true
+    },
+    "node_modules/fsevents": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
+      "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
+      "dev": true
+    },
+    "node_modules/lit-element": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.3.1.tgz",
+      "integrity": "sha512-tOcUAmeO3BzwiQ7FGWdsshNvC0HVHcTFYw/TLIImmKwXYoV0E7zCBASa8IJ7DiP4cen/Yoj454gS0qqTnIGsFA==",
+      "dependencies": {
+        "lit-html": "^1.1.1"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.2.1.tgz",
+      "integrity": "sha512-GSJHHXMGLZDzTRq59IUfL9FCdAlGfqNp/dEa7k7aBaaWD+JKaCjsAk9KYm2V12ItonVaYx2dprN66Zdm1AuBTQ=="
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "dev": true
+    },
+    "node_modules/picomatch": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
+      "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
+      "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
+      "dev": true,
+      "dependencies": {
+        "path-parse": "^1.0.6"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "2.26.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.4.tgz",
+      "integrity": "sha512-6+qsGuP0MXGd7vlYmk72utm1MrgZj5GfXibGL+cRkKQ9+ZL/BnFThDl0D5bcl7AqlzMjAQXRAwZX1HVm22M/4Q==",
+      "dev": true,
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.1.2"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+      "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==",
+      "dev": true
+    },
+    "node_modules/typescript": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.2.tgz",
+      "integrity": "sha512-e4ERvRV2wb+rRZ/IQeb3jm2VxBsirQLpQhdxplZ2MEzGvDkkMmPglecnNDfSUBivMjP93vRbngYYDQqQ/78bcQ==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    }
+  },
   "dependencies": {
     "@mdi/js": {
       "version": "5.5.55",

src/main.js

@@ -13,8 +13,8 @@ let nodes = [];
 
 window.onload = () => {
 
-  const graph2 = document.createElement("script-graph3");
+  //const graph2 = document.createElement("script-graph3");
-  document.querySelector("#graph2").appendChild(graph2);
+  //document.querySelector("#graph2").appendChild(graph2);
 
   let src = demoConfig;
 

src/script-graph3.ts

@@ -7,9 +7,35 @@ import {
   TemplateResult
 } from "lit-element";
 
-import { mdiAsterisk } from "@mdi/js";
+import {
+  mdiCallSplit,
+  mdiAbTesting,
+  mdiCheck,
+  mdiClose,
+  mdiChevronRight,
+  mdiExclamation,
+  mdiTimerOutline,
+  mdiTrafficLight,
+  mdiRefresh,
+  mdiArrowUp,
+  mdiCodeJson,
+  mdiCheckBoxOutline,
+  mdiCheckboxBlankOutline,
+  mdiAsterisk,
+  mdiCircleOutline,
+} from "@mdi/js";
 
-const SIZE = 35;
+const ICONS = {
+  "call-split": mdiCallSplit,
+  "ab-testing": mdiAbTesting,
+  "check": mdiCheck,
+  "close": mdiClose,
+  "chevron-right": mdiChevronRight,
+  "exclamation": mdiExclamation,
+  "asterisk": mdiAsterisk,
+};
+
+const SIZE = 24;
 const DIST = 20;
 
 interface GraphNode extends LitElement{
@@ -20,25 +46,143 @@ interface GraphNode extends LitElement{
 
 class ScriptGraphNode extends LitElement {
 
-  @property() icon = mdiAsterisk;
+  @property() icon = "chevron-right";
 
   get width() {
-    return SIZE;
+    return SIZE + 5;
   }
   get height() {
-    return SIZE + DIST;
+    return SIZE + 5;
   }
-
+  render() {
-  render_svg() {
     return svg`
+    <svg width="${this.width}" height="${this.height}" viewBox="${-this.width/2} 0 ${this.width} ${this.height}">
       <circle
         cx="0"
         cy="${this.width/2}"
         r="${SIZE/2}"
       />
-      <g style="pointer-events: none" transform="translate(-12, ${this.width/2-12})">
+      <g style="pointer-events: none" transform="translate(${- 12} ${this.width/2 - 12})">
-      </g>
+      ${ICONS[this.icon] ?
+        svg`
+        <path d="${ICONS[this.icon]}"/>
         `
+        : ""}
+      </g>
+      </svg>
+    `
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        --stroke-clr: var(--stroke-color, rgb(3, 169, 244));
+        --hover-clr: var(--hover-color, rgb(255, 152, 0));
+      }
+      circle {
+        stroke: var(--stroke-clr);
+        stroke-width: 2;
+        fill: white;
+      }
+      circle:hover {
+        stroke: var(--hover-clr);
+      }
+    `;
+  }
+  
+
+}
+
+class ScriptGraphBranch extends LitElement {
+
+  @property() _num_items = 0;
+
+  get width() {
+    let w = 0;
+    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) {
+      h = Math.max(h, (c as any).height ?? 0);
+    }
+    return h + 40;
+  }
+
+  async updateChildren() {
+    this._num_items = this.children.length;
+  }
+
+  render() {
+    let xs = [];
+    let x1 = 0;
+    for (const c of Array.from(this.children)) {
+      const rect = c.getBoundingClientRect();
+      xs.push(rect.width/2+x1);
+      x1 += rect.width;
+    }
+    
+    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) => {
+      return svg`
+        <path
+          class="line"
+          d="
+            M ${this.width/2} 0
+            C ${this.width/2} 10 ${x} 10 ${x} 20
+            L ${x} ${this.height-20}
+            C ${x} ${this.height-5} ${this.width/2} ${this.height-15} ${this.width/2} ${this.height}
+          "
+        />
+      `
+    })}
+    </svg>
+    <script-graph-node
+    id="head"
+    .icon=${"call-split"}
+    >
+    </script-graph-node>
+    <div id="branches">
+      <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));
+    }
+    #head {
+      position: Absolute;
+      top: 5px;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    #branches {
+      position: absolute;
+      top: 20px;
+      left: 0;
+      display: flex;
+      flex-direction: row;
+    }
+    path.line {
+      stroke: var(--stroke-clr);
+      stroke-width: 2;
+      fill: white;
+    }
+    `;
   }
 
 }
@@ -49,62 +193,80 @@ class ScriptGraph3 extends LitElement {
   @property() _width = 0;
   @property() _height = 0;
 
-  connectedCallback() {
-    super.connectedCallback();
-    console.log(this.querySelectorAll('*'))
-
-  }
-
   async updateChildren() {
-    this.content = [];
+    return;
-    let y = 0;
-    let w = 0;
-    for (const e of this.querySelectorAll('*') as NodeListOf<GraphNode>) {
-      this.content.push({
-        svg: e.render_svg(),
-        offset_y: y,
-      });
-      y += e.height;
-      w = Math.max(w, e.width);
-    }
-    this._width = w;
-    this._height = y;
-    this.requestUpdate();
   }
 
   childrenChangedCallback() {
     console.log("Children changed");
   }
 
-  render() {
+  get height() {
-
+    let h = 0;
-
+    for(const c of this.children) {
-    let y = 0;
+      h += (c as any).height ?? 0;
-    let nodes = [];
+      h += 10;
-    for (const e of this.content) {
+    }
-
+    return h + 10;
   }
 
+  get width() {
+    let w = 0;
+    for(const c of this.children) {
+      w = Math.max(w, (c as any).width ?? 0);
+    }
+    return w;
+  }
+
+  render() {
     return html`
-    <svg width=500 height=500>
+    <svg width="${this.width}" height="${this.height}">
-      ${this.content.map(e =>
+    <rect x=0 y=0 width="${this.width}" height="${this.height}" fill="white" />
-        svg`
+    <path
-          <g transform="translate(${this._width/2} ${e.offset_y})">
+      class="line"
-          ${e.svg}
+      d="
-          </g>
+        M ${this.width/2} 0
-        `)}
+        L ${this.width/2} ${this.height}
+      "
+    />
     </svg>
+    <div id="nodes">
       <slot
         @slotchange=${this.updateChildren}
       ></slot>
-    <style>
+    </div>
-      slot {
-        display: none;
-      }
-      </style>
     `
   }
 
+  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: 10px;
+      left: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    ::slotted(*) {
+      padding-bottom: 10px;
+    }
+    path.line {
+      stroke: var(--stroke-clr);
+      stroke-width: 2;
+      fill: white;
+    }
+    `;
+
+  }
+
 }
 customElements.define("script-graph3", ScriptGraph3);
 customElements.define("script-graph-node", ScriptGraphNode);
+customElements.define("script-graph-branch", ScriptGraphBranch);