Update hat-graph-node.ts

src/components/trace/hat-graph-node.ts

@@ -1,4 +1,5 @@
 import { css, customElement, LitElement, property, svg } from "lit-element";
+import { ifDefined } from "lit-html/directives/if-defined";
 
 import { NODE_SIZE, SPACING } from "./hat-graph";
 
@@ -10,6 +11,8 @@ export class HatGraphNode extends LitElement {
 
   @property({ reflect: true, type: Boolean }) graphstart?: boolean;
 
+  @property({ reflect: true, type: Boolean }) spacer?: boolean;
+
   @property({ reflect: true, type: Boolean }) nofocus?: boolean;
 
   @property({ reflect: true, type: Number }) badge?: number;
@@ -22,7 +25,7 @@ export class HatGraphNode extends LitElement {
 
   updated() {
     const svgEl = this.shadowRoot?.querySelector("svg");
-    if (!svgEl) {
+    if (!svgEl || this.spacer) {
       return;
     }
     const bbox = svgEl.getBBox();
@@ -42,6 +45,15 @@ export class HatGraphNode extends LitElement {
   render() {
     return svg`
     <svg
+    width=${ifDefined(this.spacer ? `${SPACING}px` : undefined)}
+    height=${ifDefined(
+      this.spacer ? `${SPACING + NODE_SIZE + 1}px` : undefined
+    )}
+    viewBox=${ifDefined(
+      this.spacer
+        ? `-${SPACING / 2} 0 10 ${SPACING + NODE_SIZE + 1}`
+        : undefined
+    )}
     >
       ${
         this.graphstart
@@ -50,7 +62,9 @@ export class HatGraphNode extends LitElement {
           <path
             class="connector"
             d="
-              M 0 ${-SPACING - NODE_SIZE / 2}
+              M 0 ${
+                this.spacer ? SPACING + NODE_SIZE + 1 : -SPACING - NODE_SIZE / 2
+              }
               L 0 0
             "
             line-caps="round"
@@ -58,11 +72,15 @@ export class HatGraphNode extends LitElement {
           `
       }
     <g class="node">
-      <circle
+      ${
+        !this.spacer
+          ? svg`<circle
         cx="0"
         cy="0"
         r="${NODE_SIZE / 2}"
-      />
+      />`
+          : ""
+      }
       ${
         this.badge
           ? svg`

src/components/trace/hat-script-graph.ts

@@ -192,6 +192,14 @@ class HatScriptGraph extends LitElement {
           `;
         })}
         <hat-graph>
+          <hat-graph-node
+            nofocus
+            spacer
+            class=${classMap({
+              track:
+                trace !== undefined && trace[0].result?.choice === "default",
+            })}
+          ></hat-graph-node>
           ${ensureArray(config.default)?.map((action, i) =>
             this.render_node(action, `${path}/default/${i}`)
           )}