Remove dynamic height/width calcs on graph nodes (#8832)

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

@@ -10,8 +10,6 @@ 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,34 +20,18 @@ export class HatGraphNode extends LitElement {
       this.setAttribute("tabindex", "0");
   }
 
-  updated() {
-    const svgEl = this.shadowRoot?.querySelector("svg");
-    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;
-    svgEl.setAttribute("width", `${bbox.width + extra_width}px`);
-    svgEl.setAttribute("height", `${bbox.height + extra_height}px`);
-    svgEl.setAttribute(
-      "viewBox",
-      `${Math.ceil(bbox.x - extra_width / 2)}
-      ${Math.ceil(bbox.y - extra_height / 2)}
-      ${bbox.width + extra_width}
-      ${bbox.height + extra_height}`
-    );
-  }
-
   render() {
+    const height = NODE_SIZE + (this.graphstart ? 2 : SPACING + 1);
+    const width = SPACING + NODE_SIZE;
     return svg`
     <svg
+    width="${width}px"
+    height="${height}px"
+    viewBox="-${Math.ceil(width / 2)} -${
+      this.graphstart
+        ? Math.ceil(height / 2)
+        : Math.ceil((NODE_SIZE + SPACING * 2) / 2)
+    } ${width} ${height}"
     >
       ${
         this.graphstart
@@ -58,11 +40,7 @@ export class HatGraphNode extends LitElement {
           <path
             class="connector"
             d="
-              M 0 ${
-                this.spacer
-                  ? -SPACING * 2 - NODE_SIZE
-                  : -SPACING - NODE_SIZE / 2
-              }
+              M 0 ${-SPACING - NODE_SIZE / 2}
               L 0 0
             "
             line-caps="round"
@@ -70,14 +48,11 @@ export class HatGraphNode extends LitElement {
           `
       }
     <g class="node">
-      ${
-        !this.spacer
-          ? svg`<circle
+      <circle
         cx="0"
         cy="0"
         r="${NODE_SIZE / 2}"
-      />`
-          : ""
+      />
       }
       ${
         this.badge
@@ -114,16 +89,6 @@ export class HatGraphNode extends LitElement {
       :host {
         display: flex;
         flex-direction: column;
-        --stroke-clr: var(--stroke-color, var(--secondary-text-color));
-        --active-clr: var(--active-color, var(--primary-color));
-        --track-clr: var(--track-color, var(--accent-color));
-        --hover-clr: var(--hover-color, var(--primary-color));
-        --disabled-clr: var(--disabled-color, var(--disabled-text-color));
-        --default-trigger-color: 3, 169, 244;
-        --rgb-trigger-color: var(--trigger-color, var(--default-trigger-color));
-        --background-clr: var(--background-color, white);
-        --default-icon-clr: var(--icon-color, black);
-        --icon-clr: var(--stroke-clr);
       }
       :host(.track) {
         --stroke-clr: var(--track-clr);
@@ -146,13 +111,11 @@ export class HatGraphNode extends LitElement {
       :host-context([disabled]) {
         --stroke-clr: var(--disabled-clr);
       }
-
       :host([nofocus]):host-context(.active),
       :host([nofocus]):host-context(:focus) {
         --circle-clr: var(--active-clr);
         --icon-clr: var(--default-icon-clr);
       }
-
       circle,
       path.connector {
         stroke: var(--stroke-clr);

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

@@ -0,0 +1,55 @@
+import { css, customElement, LitElement, property, svg } from "lit-element";
+
+import { NODE_SIZE, SPACING } from "./hat-graph";
+
+@customElement("hat-graph-spacer")
+export class HatGraphSpacer extends LitElement {
+  @property({ reflect: true, type: Boolean }) disabled?: boolean;
+
+  render() {
+    return svg`
+    <svg
+    width="${SPACING}px"
+    height="${SPACING + NODE_SIZE + 1}px"
+    viewBox="-${SPACING / 2} 0 10 ${SPACING + NODE_SIZE + 1}"
+    >
+          <path
+            class="connector"
+            d="
+              M 0 ${SPACING + NODE_SIZE + 1}
+              L 0 0
+            "
+            line-caps="round"
+          />
+      }
+      </svg>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
+      :host(.track) {
+        --stroke-clr: var(--track-clr);
+        --icon-clr: var(--default-icon-clr);
+      }
+      :host-context([disabled]) {
+        --stroke-clr: var(--disabled-clr);
+      }
+      path.connector {
+        stroke: var(--stroke-clr);
+        stroke-width: 2;
+        fill: none;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hat-graph-spacer": HatGraphSpacer;
+  }
+}

src/components/trace/hat-graph.ts

@@ -171,7 +171,13 @@ export class HatGraph extends LitElement {
         --stroke-clr: var(--stroke-color, var(--secondary-text-color));
         --active-clr: var(--active-color, var(--primary-color));
         --track-clr: var(--track-color, var(--accent-color));
-        --disabled-clr: var(--disabled-color, gray);
+        --hover-clr: var(--hover-color, var(--primary-color));
+        --disabled-clr: var(--disabled-color, var(--disabled-text-color));
+        --default-trigger-color: 3, 169, 244;
+        --rgb-trigger-color: var(--trigger-color, var(--default-trigger-color));
+        --background-clr: var(--background-color, white);
+        --default-icon-clr: var(--icon-color, black);
+        --icon-clr: var(--stroke-clr);
       }
       :host(:focus) {
         outline: none;

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

@@ -49,6 +49,7 @@ import {
   WaitForTriggerAction,
 } from "../../data/script";
 import { ensureArray } from "../../common/ensure-array";
+import "./hat-graph-spacer";
 
 declare global {
   interface HASSDomEvents {
@@ -192,14 +193,12 @@ class HatScriptGraph extends LitElement {
           `;
         })}
         <hat-graph>
-          <hat-graph-node
-            nofocus
-            spacer
+          <hat-graph-spacer
             class=${classMap({
               track:
                 trace !== undefined && trace[0].result?.choice === "default",
             })}
-          ></hat-graph-node>
+          ></hat-graph-spacer>
           ${ensureArray(config.default)?.map((action, i) =>
             this.render_node(action, `${path}/default/${i}`)
           )}