From 109910d18f379e9a23cfc54f3f209e1d06042d72 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 6 Apr 2021 18:32:30 +0200
Subject: [PATCH] Add spacer for default of choose (#8827)

---
 src/components/trace/hat-graph-node.ts   | 22 +++++++++++++++++++---
 src/components/trace/hat-script-graph.ts |  8 ++++++++
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/trace/hat-graph-node.ts b/src/components/trace/hat-graph-node.ts
index 2bad3be3e3..c9d6b8296f 100644
--- a/src/components/trace/hat-graph-node.ts
+++ b/src/components/trace/hat-graph-node.ts
@@ -10,6 +10,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;
@@ -25,6 +27,12 @@ export class HatGraphNode extends LitElement {
     if (!svgEl) {
       return;
     }
+    if (this.spacer) {
+      svgEl.setAttribute("width", "10px");
+      svgEl.setAttribute("height", "41px");
+      svgEl.setAttribute("viewBox", "-5 -40 10 26");
+      return;
+    }
     const bbox = svgEl.getBBox();
     const extra_height = this.graphstart ? 2 : 1;
     const extra_width = SPACING;
@@ -50,7 +58,11 @@ export class HatGraphNode extends LitElement {
           <path
             class="connector"
             d="
-              M 0 ${-SPACING - NODE_SIZE / 2}
+              M 0 ${
+                this.spacer
+                  ? -SPACING * 2 - NODE_SIZE
+                  : -SPACING - NODE_SIZE / 2
+              }
               L 0 0
             "
             line-caps="round"
@@ -58,11 +70,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`
diff --git a/src/components/trace/hat-script-graph.ts b/src/components/trace/hat-script-graph.ts
index 7b37539cb6..2ed44e22c1 100644
--- a/src/components/trace/hat-script-graph.ts
+++ b/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}`)
           )}