Add add button

src/script-graph2.ts

@@ -6,6 +6,8 @@ import {
   property
 } from "lit-element";
 
+import { mdiPlus } from "@mdi/js";
+
 const SIZE = 35;
 const DIST = 20;
 
@@ -39,6 +41,19 @@ class ScriptGraph2 extends LitElement {
     `;
   }
 
+  private _draw_new_node(x, y, node) {
+    return svg`
+      <circle
+        cx="${x}"
+        cy="${y + this.nodeSize/4}"
+        r="${this.nodeSize/4}"
+        class="newnode"
+        @click=${node.addCallback}
+      />
+    `;
+  }
+
+
   private _draw_connector(x1, y1, x2, y2) {
     return svg`
       <line
@@ -108,6 +123,19 @@ class ScriptGraph2 extends LitElement {
           height += this.nodeSize + this.nodeSeparation;
 
       }
+      if(tree.addCallback) {
+        pieces.push(this._draw_connector(
+          0,
+          height,
+          0,
+          height + this.nodeSeparation
+        ));
+        pieces.push(this._draw_new_node(
+          0, height + this.nodeSeparation,
+          tree
+        ));
+        height += this.nodeSeparation + this.nodeSize/2;
+      }
       if(tree.end !== false) {
         // Draw bottom connector
         pieces.push(this._draw_connector(
@@ -154,6 +182,9 @@ class ScriptGraph2 extends LitElement {
       stroke-width: 5;
       fill: white;
     }
+    .newnode:hover {
+      stroke: rgb(255, 152, 0);
+    }
     </style>
     <svg width=${tree.width + 32} height=${tree.height + 32}>
       <g transform="translate(${tree.width/2 + 16} 16)">