Traces and triggers

Stability improvements and cleanup
Remove drag and drop for now
2021-03-28 23:37:54 +00:00 · 2021-03-28 09:52:37 +00:00 · 2021-03-27 15:43:21 +00:00 · 2021-03-27 00:36:53 +01:00
13 changed files with 700 additions and 1280 deletions
--- a/index.html
+++ b/index.html
@@ -2,8 +2,6 @@
 <html>
  <head>
    <title>Script graph demo</title>
-    <script src="DragDropTouch.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.14.0/js-yaml.min.js"></script>
    <script src="index.js" type="module" defer></script>
  </head>
  <body style="margin: 24px">
@@ -36,18 +34,34 @@
    <div>
      <div class="card" id="graph">
      </div>
-      <div class="card code">
+      <div style="display: inline-flex; flex-direction: column;">
+        <div class="card code" id="snippet">
          <h1> Selected node code </h1>
-        <wc-codemirror mode="json" id="snippet">
+          <wc-codemirror mode="yaml">
          </wc-codemirror>
-        <button id="saveSnippet">Save</button>
-        <button id="deleteSnippet">Delete</button>
+          <div><b>Path: </b><span id="nodepath"></span></div>
+          <button id="saveSnippet" disabled>Save</button>
+          <button id="deleteSnippet" disabled>Delete</button>
+        </div><br>
+        <div class="card" id="triggers">
+          <button>Trigger 1</button>
+          <button>Trigger 2</button>
+          <button>Trigger 3</button>
+          <div><input type="checkbox" id="a" checked> Condition A</div>
+          <div><input type="checkbox" id="b" checked> Condition B</div>
+          <div><input type="checkbox" id="c" checked> Condition C</div>
        </div>
-      <div class="card code">
+        <div class="card" id="trace">
+          <h1>Trace</h1>
+          <wc-codemirror mode="yaml"></wc-codemirror>
+          <button>Update trace</button>
+        </div>
+      </div>
+      <div class="card code" id="fullcode">
        <h1>Full script code</h1>
-        <wc-codemirror mode="yaml" id="fullcode">
+        <wc-codemirror mode="yaml">
        </wc-codemirror>
-        <button id="updateButton">Update</button>
+        <button>Update</button>
      </div>
    </div>
  </body>
--- a/package-lock.json
+++ b/package-lock.json
@@ -70,6 +70,11 @@
      "resolved": "https://registry.npmjs.org/@vanillawc/wc-codemirror/-/wc-codemirror-1.8.10.tgz",
      "integrity": "sha512-UKMD/UOpF1uRl29nlwvwQqSMBqsl+uDWYlGx82wIYbIBJkeqPrSo1Ez1rGi9jc1CL7/XwUr7u+l/kTwZAEkrEg=="
    },
+    "argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
    "async": {
      "version": "2.6.3",
      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
@@ -238,6 +243,14 @@
      "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
      "dev": true
    },
+    "js-yaml": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.0.0.tgz",
+      "integrity": "sha512-pqon0s+4ScYUvX30wxQi3PogGFAlUyH0awepWvwkj4jD4v+ova3RiYw8bmA6x2rDrEaj8i/oWKoRxpVNW+Re8Q==",
+      "requires": {
+        "argparse": "^2.0.1"
+      }
+    },
    "lit-element": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.3.1.tgz",
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
  "dependencies": {
    "@mdi/js": "^5.5.55",
    "@vanillawc/wc-codemirror": "^1.8.10",
+    "js-yaml": "^4.0.0",
    "lit-element": "^2.3.1"
  }
 }
--- a/src/demo-config.js
+++ b/src/demo-config.js
@@ -1,63 +1,47 @@
-export const demoConfig = [
-  {
-    condition: "state",
-    entity_id: "binary_sensor.dark_outside",
-    state: "on",
-  },
-  {
-    choose: [
-      {
-        conditions: [
-          {
-            condition: "state",
-            entity_id: "binary_sensor.door_open",
-            state: "on",
-          },
-        ],
-        sequence: [
+export const demoTrace = {
+  "trigger/2": {},
+  "condition/0": {},
+  "condition/1": {},
+  "condition/2": {},
+  "action/0": {},
+  "action/1": { result: true },
+  "action/2": {},
+  "action/3": {},
+  "action/4": {},
+  "action/5": { repeats: 1 },
+  "action/5/sequence/0": {},
+  "action/5/sequence/1": {},
+  "action/6": {},
+  "action/6/": {},
+  "action/6/choose/2": {},
+  "action/6/choose/2/sequence/0": {},
+  "action/6/choose/2/sequence/1": {},
+};
+
+export const demoConfig = {
+  trigger: ["trigger1", "trigger2", "trigger3"],
+  condition: ["a", "b", "c"],
+  action: [
    {
      service: "light.turn_on",
-            entity_id: "light.outdoors",
-          }
-        ],
-      },
-      {
-        conditions: [
-          {
-            condition: "state",
-            entity_id: "input_select.time_of_day",
-            state: "night",
-          },
-        ],
-        sequence: [
-          {
-            service: "light.turn_off",
-            entity_id: "light.outdoors",
-          }
-        ],
-      },
-    ],
-    default: [
-    ],
-  },
-]
-
-export const demoConfig2 = [
-  { service: "light.turn_on",
      data: {
        entity_id: "group.bedroom",
        brightness: 100,
      },
    },
-  { condition: "state",
+    {
+      condition: "state",
      entity_id: "device_tracker.paulus",
      state: "home",
    },
-  { delay: "01:00",
+    {
+      delay: "01:00",
    },
-  { wait_template: "{{ is_state(media_player.floor', 'stop') }}",
+    {
+      wait_template: "{{ is_state(media_player.floor', 'stop') }}",
    },
-  { event: "LOGBOOK_ENTRY",
+    {
+      event: "LOGBOOK_ENTRY",
      event_data: {
        name: "Paulus",
        message: "is waking up",
@@ -65,12 +49,15 @@ export const demoConfig2 = [
        domain: "light",
      },
    },
-  { repeat: {
+    {
+      repeat: {
        count: "5",
        sequence: [
-        { delay: 2
+          {
+            delay: 2,
          },
-        { service: "light.toggle",
+          {
+            service: "light.toggle",
            data: {
              entity_id: "light.bed_light",
            },
@@ -78,30 +65,26 @@ export const demoConfig2 = [
        ],
      },
    },
-  { choose: [
-      { conditions: [],
+    {
+      choose: [
+        {
+          conditions: [],
          sequence: [
-          { service: "test"},
-          { service: "test"},
-          { service: "test"},
+            { service: "test" },
+            { service: "test" },
+            { service: "test" },
          ],
        },
-      { conditions: [],
-        sequence: [
-          { service: "test"},
-        ],
+        {
+          conditions: [],
+          sequence: [{ service: "test" }],
        },
-      { conditions: [],
-        sequence: [
-          { service: "test"},
-          { service: "test"},
-        ],
+        {
+          conditions: [],
+          sequence: [{ service: "test" }, { service: "test" }],
        },
      ],
-    default: [
-      { service: "test"},
-      { service: "test"},
-      { service: "test"},
-    ],
+      default: [{ service: "test" }, { service: "test" }, { service: "test" }],
    },
-];
+  ],
+};
--- a/src/hat-graph/hat-graph-node.ts
+++ b/src/hat-graph/hat-graph-node.ts
@@ -1,71 +1,69 @@
 import { css, LitElement, property, svg } from "lit-element";

-const NODE_SIZE = 24;
+const NODE_SIZE = 30;
+const SPACING = 10;

 export class HatGraphNode extends LitElement {
-  @property() iconPath?;
-  dragtarget = undefined;
-  config = undefined;
+  @property() iconPath?: string;
+  @property({ reflect: true, type: Boolean }) marked?: boolean;
+  @property({ reflect: true, type: Boolean }) selected?: boolean;
+  @property({ reflect: true, type: Boolean }) disabled?: boolean;
+  @property({ reflect: true, type: Boolean }) graphstart?: boolean;
+  @property({ reflect: true, type: Boolean }) nofocus?: boolean;

  connectedCallback() {
    super.connectedCallback();
-    if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
-
-    this.addEventListener("dragstart", () => {
-      this.classList.add("dragging");
-      (window as any)._dragElement = this.dragtarget ?? this;
-      this.updateNode("");
-    });
-    this.addEventListener("dragend", () => {
-      this.classList.remove("dragging");
-      (window as any)._dragElement = undefined;
-    });
+    if (!this.hasAttribute("tabindex") && !this.nofocus)
+      this.setAttribute("tabindex", "0");
  }

-  updateNode(config) {
-    this.dispatchEvent(
-      new CustomEvent("update-node", {
-        detail: { config },
-        bubbles: true,
-        composed: true,
-      })
+  updated() {
+    const svg = this.shadowRoot.querySelector("svg");
+    const bbox = svg.getBBox();
+    const extra_height = this.graphstart ? 2 : 1;
+    const extra_width = SPACING;
+    svg.setAttribute("width", `${bbox.width + extra_width}px`);
+    svg.setAttribute("height", `${bbox.height + extra_height}px`);
+    svg.setAttribute(
+      "viewBox",
+      `${Math.ceil(bbox.x - extra_width / 2)}
+      ${Math.ceil(bbox.y - extra_height / 2)}
+      ${bbox.width + extra_width}
+      ${bbox.height + extra_height}`
    );
  }

-  deleteNode() {
-    this.dispatchEvent(new CustomEvent("delete-node", { bubbles: true }));
-  }
-
-  placeNode(config) {
-    this.dispatchEvent(
-      new CustomEvent("place-node", { detail: { config }, bubbles: true })
-    );
-  }
-
-  get width() {
-    return NODE_SIZE + 5;
-  }
-  get height() {
-    return NODE_SIZE + 5;
-  }
  render() {
    return svg`
    <svg
-      width="${this.width}"
-      height="${this.height}"
-      viewBox="${-this.width / 2} 0 ${this.width} ${this.height}"
    >
+      ${
+        this.graphstart
+          ? ``
+          : svg`
+          <path
+            class="connector"
+            d="
+              M 0 ${-SPACING - NODE_SIZE / 2}
+              L 0 0
+            "
+            line-caps="round"
+          />
+          `
+      }
+    <g class="node">
      <circle
        cx="0"
-        cy="${this.width / 2}"
+        cy="0"
        r="${NODE_SIZE / 2}"
      />
      <g
        style="pointer-events: none"
-        transform="translate(${-12} ${this.width / 2 - 12})"
+        transform="translate(${-12} ${-12})"
      >
        ${this.iconPath ? svg`<path d="${this.iconPath}"/>` : ""}
      </g>
+    </g>
      </svg>
    `;
  }
@@ -74,28 +72,65 @@ export class HatGraphNode extends LitElement {
    return css`
      :host {
        display: flex;
+        flex-direction: column;
        --stroke-clr: var(--stroke-color, rgb(3, 169, 244));
-        --hover-clr: var(--hover-color, rgb(255, 152, 0));
+        --selected-clr: var(--selected-color, rgb(255, 152, 0));
+        --marked-clr: var(--marked-color, springgreen);
+        --hover-clr: var(--hover-color, red);
+        --disabled-clr: var(--disabled-color, gray);
+        --default-trigger-color: 3, 169, 244;
+        --rgb-trigger-color: var(--trigger-color, var(--default-trigger-color));
      }
-      :host(:hover) {
-        --stroke-clr: var(--hover-clr);
+      :host([marked]) {
+        --stroke-clr: var(--marked-clr);
      }
+      :host([selected]),
      :host(:focus) {
-        --stroke-clr: green;
+        --stroke-clr: var(--selected-clr);
        outline: none;
      }
-      :host(.dragging) {
-        --stroke-clr: gray;
-        color: gray;
+      :host(:hover) circle {
+        --stroke-clr: var(--hover-clr);
      }
-      :host(.dragging) path {
-        stroke: gray;
-        fill: gray;
+      :host([disabled]) circle {
+        stroke: var(--disabled-clr);
      }
-      circle {
+      :host-context([disabled]) {
+        --stroke-clr: var(--disabled-clr);
+      }
+
+      :host([nofocus]):host-context([selected]),
+      :host([nofocus]):host-context(:focus) {
+        --stroke-clr: var(--selected-clr);
+      }
+
+      circle,
+      path.connector {
        stroke: var(--stroke-clr);
        stroke-width: 2;
+        fill: none;
+      }
+      circle {
        fill: white;
+        stroke: var(--circle-clr, var(--stroke-clr));
+      }
+
+      :host(.triggered) svg {
+        overflow: visible;
+      }
+      :host(.triggered) circle {
+        animation: glow 10s;
+      }
+      @keyframes glow {
+        0% {
+          filter: drop-shadow(0px 0px 5px rgba(var(--rgb-trigger-color), 0));
+        }
+        10% {
+          filter: drop-shadow(0px 0px 10px rgba(var(--rgb-trigger-color), 1));
+        }
+        100% {
+          filter: drop-shadow(0px 0px 5px rgba(var(--rgb-trigger-color), 0));
+        }
      }
    `;
  }
--- a/src/hat-graph/hat-graph.ts
+++ b/src/hat-graph/hat-graph.ts
@@ -1,131 +1,138 @@
 import { css, html, LitElement, property, svg } from "lit-element";
-
-import "./hat-graph-node";
+import { classMap } from "lit-html/directives/class-map";

 const BRANCH_HEIGHT = 30;
 const BRANCH_CURVATURE = 25;
-const VERTICAL_SPACING = 10;
-const NODE_SIZE = 24;
+
+const mark_converter = {
+  fromAttribute: (value, type) => value.split(",").map((v) => parseInt(v)),
+  toAttribute: (value, type) =>
+    value instanceof Array ? value.join(",") : `${value}`,
+};

 export class HatGraph extends LitElement {
  @property() _num_items = 0;

-  @property({ reflect: true }) branching?;
-  config?;
-
-  updateNode(config) {
-    this.dispatchEvent(
-      new CustomEvent("update-node", {
-        detail: { config },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  deleteNode() {
-    this.dispatchEvent(new CustomEvent("delete-node", { bubbles: true }));
-  }
-
-  placeNode(config) {
-    this.dispatchEvent(
-      new CustomEvent("place-node", { detail: { config }, bubbles: true })
-    );
-  }
-
-  get width() {
-    let w = 0;
-    if (this.branching !== undefined) {
-      for (const c of this.children) {
-        if (c.slot === "head") continue;
-        w += (c as any).width;
-      }
-    } else {
-      for (const c of this.children) {
-        w = Math.max(w, (c as any).width);
-      }
-    }
-    return w;
-  }
-  get height() {
-    let h = 0;
-    if (this.branching !== undefined) {
-      for (const c of this.children) {
-        if (c.slot === "head") continue;
-        h = Math.max(h, (c as any).height);
-      }
-      h += 2 * BRANCH_HEIGHT;
-    } else {
-      for (const c of this.children) {
-        h += (c as any).height + VERTICAL_SPACING;
-      }
-      h;
-    }
-    return h;
-  }
+  @property({ reflect: true, type: Boolean }) branching?: boolean;
+  @property({ reflect: true, converter: mark_converter }) mark_start?: number[];
+  @property({ reflect: true, converter: mark_converter }) mark_end?: number[];
+  @property({ reflect: true, type: Boolean }) disabled?: boolean;
+  @property({ reflect: true, type: Boolean }) selected?: boolean;

  async updateChildren() {
    this._num_items = this.children.length;
  }

  render() {
-    let branch_x = [];
-    let total = 0;
-    if (this.branching !== undefined) {
+    let branches = [];
+    let total_width = 0;
+    let max_height = 0;
+    let min_height = Number.POSITIVE_INFINITY;
+    if (this.branching) {
      for (const c of Array.from(this.children)) {
        if (c.slot === "head") continue;
        const rect = c.getBoundingClientRect();
-        branch_x.push(rect.width / 2 + total);
-        total += rect.width;
+        branches.push({
+          x: rect.width / 2 + total_width,
+          height: rect.height,
+          start: c.getAttribute("graphStart") != null,
+          end: c.getAttribute("graphEnd") != null,
+        });
+        total_width += rect.width;
+        max_height = Math.max(max_height, rect.height);
+        min_height = Math.min(min_height, rect.height);
      }
    }

-    const line_end = this.height - BRANCH_HEIGHT;
-
    return html`
-      <svg width="${this.width}" height="${this.height}">
-        <rect
-          x="0"
-          y="0"
-          width="${this.width}"
-          height="${this.height}"
-          fill="white"
-        />
-        ${this.branching !== undefined
-          ? branch_x.map((x) => {
+      <slot name="head" @slotchange=${this.updateChildren}> </slot>
+      ${this.branching
+        ? svg`
+            <svg
+              id="top"
+              width="${total_width}"
+              height="${BRANCH_HEIGHT}"
+            >
+              ${branches.map((branch, i) => {
+                if (branch.start) return "";
                return svg`
                  <path
-                  class="line"
+                    class="${classMap({
+                      line: true,
+                      marked: this.mark_start?.includes(i),
+                    })}"
+                    id="${this.mark_start?.includes(i) ? "mark-start" : ""}"
+                    index=${i}
                    d="
-                    M ${this.width / 2} 0
-                    C ${this.width / 2} ${BRANCH_CURVATURE}
-                      ${x} ${BRANCH_HEIGHT - BRANCH_CURVATURE}
-                      ${x} ${BRANCH_HEIGHT}
-                    L ${x} ${line_end}
-                    C ${x} ${line_end + BRANCH_CURVATURE}
-                      ${this.width / 2} ${this.height - BRANCH_CURVATURE}
-                      ${this.width / 2} ${this.height}
-                  "
-                />
+                      M ${total_width / 2} 0
+                      C ${total_width / 2} ${BRANCH_CURVATURE}
+                        ${branch.x} ${BRANCH_HEIGHT - BRANCH_CURVATURE}
+                        ${branch.x} ${BRANCH_HEIGHT}
+                      "/>
                `;
-            })
-          : svg`
-              <path
-              class="line"
-              d="
-                M ${this.width / 2} 0
-                L ${this.width / 2} ${this.height}
-              "
-              />
-            `}
+              })}
+              <use xlink:href="#mark-start" />
            </svg>
-      <slot name="head"> </slot>
-      <div
-        id="branches"
-        class="${this.querySelector(":scope > [slot='head']") ? "" : "no-head"}"
+          `
+        : ""}
+      <div id="branches">
+        ${this.branching
+          ? svg`
+              <svg
+                id="lines"
+                width="${total_width}"
+                height="${max_height}"
              >
+                ${branches.map((branch, i) => {
+                  if (branch.end) return "";
+                  return svg`
+                    <path
+                      class="${classMap({
+                        line: true,
+                        marked: this.mark_end?.includes(i),
+                      })}"
+                      index=${i}
+                      d="
+                        M ${branch.x} ${branch.height}
+                        l 0 ${max_height - branch.height}
+                        "/>
+                  `;
+                })}
+              </svg>
+            `
+          : ""}
        <slot @slotchange=${this.updateChildren}></slot>
      </div>
+
+      ${this.branching
+        ? svg`
+            <svg
+              id="bottom"
+              width="${total_width}"
+              height="${BRANCH_HEIGHT}"
+            >
+              ${branches.map((branch, i) => {
+                if (branch.end) return "";
+                return svg`
+                  <path
+                    class="${classMap({
+                      line: true,
+                      marked: this.mark_end?.includes(i),
+                    })}"
+                    id="${this.mark_end?.includes(i) ? "mark-end" : ""}"
+                    index=${i}
+                    d="
+                      M ${branch.x} 0
+                      C ${branch.x} ${BRANCH_CURVATURE}
+                        ${total_width / 2} ${BRANCH_HEIGHT - BRANCH_CURVATURE}
+                        ${total_width / 2} ${BRANCH_HEIGHT}
+                      "/>
+                `;
+              })}
+              <use xlink:href="#mark-end" />
+            </svg>
+          `
+        : ""}
    `;
  }

@@ -134,47 +141,53 @@ export class HatGraph extends LitElement {
      :host {
        position: relative;
        display: flex;
+        flex-direction: column;
+        align-items: center;
        --stroke-clr: var(--stroke-color, rgb(3, 169, 244));
-        --hover-clr: var(--hover-color, rgb(255, 152, 0));
+        --selected-clr: var(--selected-color, rgb(255, 152, 0));
+        --marked-clr: var(--marked-color, springgreen);
+        --disabled-clr: var(--disabled-color, gray);
+      }
+      :host(:focus) {
+        outline: none;
      }
      #branches {
-        position: absolute;
-        left: 0;
+        position: relative;
        display: flex;
-        flex-direction: row;
+        flex-direction: column;
        align-items: center;
      }
      :host([branching]) #branches {
-        top: ${BRANCH_HEIGHT}px;
        flex-direction: row;
        align-items: start;
      }
-      :host(:not([branching])) #branches {
-        top: ${VERTICAL_SPACING + NODE_SIZE}px; /* SHould be something else*/
-        flex-direction: column;
+
+      :host([branching]) ::slotted([slot="head"]) {
+        margin-bottom: ${-BRANCH_HEIGHT / 2}px;
+        z-index: 1;
      }
-      :host(:not([branching])) #branches.no-head {
-        top: 0;
+
+      #lines {
+        position: absolute;
+        z-index: -1;
      }
+
      path.line {
        stroke: var(--stroke-clr);
        stroke-width: 2;
        fill: none;
      }
-      :host(:not([branching])) ::slotted(*) {
-        margin-bottom: 10px;
+      path.line.marked {
+        stroke: var(--marked-clr);
      }
-      ::slotted(:last-child) {
-        margin-bottom: 0;
+      :host([disabled]) path.line {
+        stroke: var(--disabled-clr);
      }
-      ::slotted([slot="head"]) {
-        position: absolute;
-        top: ${BRANCH_HEIGHT / 2}px;
-        left: 50%;
-        transform: translate(-50%, -50%);
+      :host([selected]) #top path.line {
+        stroke: var(--selected-clr);
      }
-      :host(:focus-within) ::slotted([slot="head"]) {
-        --stroke-color: green;
+      :host(:focus) #top path.line {
+        stroke: var(--selected-clr);
      }
    `;
  }
--- a/src/hat-graph/make-graph.ts
+++ b/src/hat-graph/make-graph.ts
@@ -1,4 +1,7 @@
+import "./hat-graph";
+import "./hat-graph-node";
 import { HatGraphNode } from "./hat-graph-node";
+import { classMap } from "lit-html/directives/class-map";

 import {
  mdiCallSplit,
@@ -19,6 +22,11 @@ import {
 import { HatGraph } from "./hat-graph";
 import { html } from "lit-element";
 import { render } from "lit-html";
+import {
+  AutomationActionConfig,
+  AutomationConfig,
+  AutomationTrace,
+} from "./types";

 const OPTIONS = [
  "condition",
@@ -47,6 +55,7 @@ const ICONS = {
  chooseChoice: mdiCheckBoxOutline,
  chooseDefault: mdiCheckboxBlankOutline,
  YAML: mdiCodeJson,
+  trigger: mdiAsterisk,
 };

 const SPECIAL_NODES = {
@@ -55,58 +64,125 @@ const SPECIAL_NODES = {
  repeat: makeRepeatNode,
 };

-function makeConditionNode(config) {
+function makeConditionNode(
+  config: AutomationActionConfig,
+  path: string,
+  trace?: AutomationTrace
+) {
  const graph = document.createElement("hat-graph") as HatGraph;
  graph.branching = true;
-  const focused = () =>
+  graph.setAttribute("tabindex", "0");
+
+  let marked_branch;
+  if (trace && path in trace) {
+    marked_branch = trace[path].result ? "0" : "1";
+    graph.setAttribute("mark_start", marked_branch);
+    graph.setAttribute("mark_end", marked_branch);
+  }
+
+  graph.addEventListener("focus", () => {
    graph.dispatchEvent(
-      new CustomEvent("node-selected", { detail: { config }, bubbles: true })
+      new CustomEvent("node-selected", {
+        detail: { path, config, node: graph },
+        bubbles: true,
+      })
    );
+  });

  render(
    html`
-      <hat-graph-node slot="head" .iconPath=${mdiAbTesting} @focus=${focused}>
+      <hat-graph-node
+        slot="head"
+        .iconPath=${mdiAbTesting}
+        ?marked=${trace && path in trace}
+        nofocus
+      >
      </hat-graph-node>
-      <hat-graph-node .iconPath=${mdiCheck} @focus=${focused}></hat-graph-node>
-      <hat-graph-node .iconPath=${mdiClose} @focus=${focused}></hat-graph-node>
+
+      <hat-graph-node
+        .iconPath=${mdiCheck}
+        nofocus
+        ?marked=${marked_branch === "0"}
+      ></hat-graph-node>
+      <hat-graph-node
+        .iconPath=${mdiClose}
+        graphEnd
+        nofocus
+        ?marked=${marked_branch === "1"}
+      ></hat-graph-node>
    `,
    graph
  );
  return graph;
 }

-function makeChooseNode(config) {
+function makeChooseNode(
+  config: AutomationActionConfig,
+  path: string,
+  trace?: AutomationTrace
+) {
  const graph = document.createElement("hat-graph") as HatGraph;
-  graph.config = config;
  graph.branching = true;
+  graph.setAttribute("tabindex", "0");

-  const focused = () =>
+  graph.addEventListener("focus", () => {
    graph.dispatchEvent(
-      new CustomEvent("node-selected", { detail: { config }, bubbles: true })
+      new CustomEvent("node-selected", {
+        detail: { path, config, node: graph },
+        bubbles: true,
+      })
    );
+  });
+
+  if (trace && path in trace) {
+    for (const [i, _] of Object.entries(config.choose)) {
+      if (`${path}/choose/${i}` in trace) {
+        graph.setAttribute("mark_start", `${i}`);
+        console.log(config.choose[i], config.choose[i].length);
+        if (
+          `${path}/choose/${i}/sequence/${
+            config.choose[i].sequence.length - 1
+          }` in trace
+        )
+          graph.setAttribute("mark_end", `${i}`);
+        break;
+      }
+    }
+    if (`${path}/default` in trace) {
+      graph.setAttribute("mark_start", `${config.choose.length}`);
+      if (`${path}/default/${config.default.length - 1}` in trace)
+        graph.setAttribute("mark_end", `${config.choose.length}`);
+    }
+  }

  render(
    html`
      <hat-graph-node
        slot="head"
        .iconPath="${mdiCallSplit}"
-        @focus=${focused}
-        draggable="true"
-        .dragtarget=${graph}
+        nofocus
+        ?marked=${trace && path in trace}
      >
      </hat-graph-node>
-      ${config.choose?.map((branch) => {
+      ${config.choose?.map((branch, i) => {
+        const pth = `${path}/choose/${i}`;
        const head = document.createElement("hat-graph-node") as HatGraphNode;
        head.iconPath = mdiCheckBoxOutline;
-        head.addEventListener("focus", focused);
-
-        return makeGraph(branch.sequence, head);
+        head.setAttribute("nofocus", "");
+        if (trace && pth in trace) {
+          head.setAttribute("marked", "");
+        }
+        return makeGraph(branch.sequence, `${pth}/sequence`, head, trace);
      })}
      ${(() => {
+        const pth = `${path}/default`;
        const head = document.createElement("hat-graph-node") as HatGraphNode;
        head.iconPath = mdiCheckboxBlankOutline;
-        head.addEventListener("focus", focused);
-        return makeGraph(config.default, head);
+        head.setAttribute("nofocus", "");
+        if (trace && pth in trace) {
+          head.setAttribute("marked", "");
+        }
+        return makeGraph(config.default, pth, head, trace);
      })()}
    `,
    graph
@@ -114,64 +190,88 @@ function makeChooseNode(config) {
  return graph;
 }

-function makeRepeatNode(config) {
+function makeRepeatNode(
+  config: AutomationActionConfig,
+  path: string,
+  trace?: AutomationTrace
+) {
  const graph = document.createElement("hat-graph") as HatGraph;
  graph.branching = true;
+  graph.setAttribute("tabindex", "0");

-  const focused = () =>
+  if (trace && path in trace) {
+    const marks = trace[path].repeats ? "0,1" : "1";
+    graph.setAttribute("mark_start", marks);
+    if (`${path}/sequence/${config.repeat.sequence.length - 1}` in trace)
+      graph.setAttribute("mark_end", marks);
+  }
+
+  graph.addEventListener("focus", () => {
    graph.dispatchEvent(
-      new CustomEvent("node-selected", { detail: { config }, bubbles: true })
+      new CustomEvent("node-selected", {
+        detail: { path, config, node: graph },
+        bubbles: true,
+      })
    );
+  });

  render(
    html`
      <hat-graph-node
-        .iconPath=${mdiArrowUp}
-        @focus=${focused}
+        slot="head"
+        .iconPath=${mdiRefresh}
+        nofocus
+        ?marked=${trace && path in trace}
      ></hat-graph-node>
-      ${makeGraph(config.repeat.sequence)}
+      <hat-graph-node
+        .iconPath=${mdiArrowUp}
+        nofocus
+        ?marked=${trace && trace[path]?.repeats}
+      ></hat-graph-node>
+      ${makeGraph(config.repeat.sequence, `${path}/sequence`, undefined, trace)}
    `,
    graph
  );
  return graph;
 }

-function makeNode(config) {
-  if (typeof config === "string") return undefined;
+function makeNode(
+  config: AutomationActionConfig,
+  path: string,
+  trace?: AutomationTrace
+) {
  const type = OPTIONS.find((key) => key in config) || "yaml";

  if (type in SPECIAL_NODES) {
-    return SPECIAL_NODES[type](config);
+    return SPECIAL_NODES[type](config, path, trace);
  }

  const node = document.createElement("hat-graph-node") as HatGraphNode;

  node.iconPath = ICONS[type];
-  node.draggable = true;
-
-  node.config = config;
+  if (trace && path in trace) {
+    node.setAttribute("marked", "");
+  }

  node.addEventListener("focus", (ev) => {
    node.dispatchEvent(
-      new CustomEvent("node-selected", { detail: { config }, bubbles: true })
+      new CustomEvent("node-selected", {
+        detail: { path, config, node },
+        bubbles: true,
+      })
    );
  });

  return node;
 }

-export function makeGraph(nodes, head = undefined) {
+export function makeGraph(
+  nodes: AutomationActionConfig[],
+  path: string,
+  head = undefined,
+  trace?: AutomationTrace
+) {
  const graph = document.createElement("hat-graph") as HatGraph;
-  graph.addEventListener("dragenter", (ev) => {
-    ev.stopPropagation();
-    ev.preventDefault();
-    try {
-      graph.appendChild((window as any)._dragElement);
-    } catch (e) {
-      if (!(e instanceof DOMException)) throw e;
-    }
-  });
-  (graph as any).test = "Hello!";

  if (head) {
    head.slot = "head";
@@ -179,44 +279,7 @@ export function makeGraph(nodes, head = undefined) {
  }

  for (const [i, nodeConfig] of nodes.entries()) {
-    const node = makeNode(nodeConfig);
-    if (!node) {
-      window.setTimeout(() => {
-        const config = [...nodes];
-        config.splice(i, 1);
-
-        graph.dispatchEvent(
-          new CustomEvent("update-node", { detail: { config }, bubbles: true })
-        );
-      }, 100);
-      continue;
-    }
-
-    node.addEventListener("dragover", (ev) => {
-      ev.stopPropagation();
-      ev.preventDefault();
-    });
-    node.addEventListener("dragenter", (ev) => {
-      ev.stopPropagation();
-      ev.preventDefault();
-      if (node === (window as any)._dragElement) return;
-      try {
-        graph.insertBefore((window as any)._dragElement, node);
-        (window as any)._dragTarget = node;
-      } catch (e) {
-        if (!(e instanceof DOMException)) throw e;
-      }
-    });
-
-    node.addEventListener("drop", (ev) => {
-      ev.stopPropagation();
-      ev.preventDefault();
-      if ((window as any)._dragTarget) {
-        console.log("Drop onto ", (window as any)._dragTarget);
-        const config = { ...(window as any)._dragElement.config };
-        (window as any)._dragTarget.placeNode(config);
-      }
-    });
+    const node = makeNode(nodeConfig, `${path}/${i}`, trace);

    node.addEventListener("update-node", (ev) => {
      ev.stopPropagation();
@@ -257,3 +320,108 @@ export function makeGraph(nodes, head = undefined) {

  return graph;
 }
+
+export function automationGraph(
+  automation: AutomationConfig,
+  trace: AutomationTrace = {}
+) {
+  const graph = document.createElement("hat-graph");
+
+  const selected = (config, path: string) => {
+    return (ev) => {
+      const node = ev.target;
+      graph.dispatchEvent(
+        new CustomEvent("node-selected", {
+          detail: { path, config, node },
+          bubbles: true,
+        })
+      );
+    };
+  };
+
+  let marked_trigger = [];
+  // This part finds which trigger trace to colorize
+  for (const [i, trigger] of Object.entries(automation.trigger)) {
+    if (trace && `trigger/${i}` in trace) {
+      marked_trigger.push(i);
+    }
+
+    // This would be a real ws event listener, I guess.
+    // Inspired by the animations when tags are scanned.
+    // Could be added to wait-for-trigger nodes and stuff too
+    document.addEventListener("event-triggered", (ev: CustomEvent) => {
+      if (ev.detail.trigger === trigger) {
+        const el = graph.querySelector(
+          `#trigger hat-graph-node:nth-of-type(${parseInt(i) + 1})`
+        ) as any;
+        if (el) {
+          if (el._timeout) {
+            clearTimeout(el._timeout);
+            el._timeout = undefined;
+            el.classList.remove("triggered");
+            void el.offsetWidth;
+          }
+          el.classList.add("triggered");
+
+          el._timeout = window.setTimeout(() => {
+            el.classList.remove("triggered");
+            el._timeout = undefined;
+          }, 10000);
+        }
+      }
+    });
+  }
+
+  for (const [i, condition] of Object.entries(automation.condition)) {
+    document.addEventListener("states-changed", (ev: CustomEvent) => {
+      const el = graph.querySelector(
+        `#condition hat-graph-node:nth-of-type(${parseInt(i) + 1})`
+      ) as any;
+      console.log(ev.detail);
+      if (ev.detail.state[condition]) {
+        el.iconPath = mdiCheck;
+      } else {
+        el.iconPath = mdiClose;
+      }
+    });
+  }
+
+  render(
+    html`
+      <hat-graph branching mark_end=${marked_trigger.join(",")} id="trigger">
+        ${automation.trigger.map((trigger, i) => {
+          const path = `trigger/${i}`;
+          return html`
+            <hat-graph-node
+              .iconPath=${mdiAsterisk}
+              graphStart
+              @focus=${selected(trigger, path)}
+              ?marked=${trace && path in trace}
+            ></hat-graph-node>
+          `;
+        })}
+      </hat-graph>
+
+      <hat-graph id="condition">
+        ${automation.condition.map((condition, i) => {
+          const path = `condition/${i}`;
+          return html`
+            <hat-graph-node
+              .iconPath=${mdiCheck}
+              @focus=${selected(condition, path)}
+              ?marked=${trace && path in trace}
+            ></hat-graph-node>
+          `;
+        })}
+      </hat-graph>
+
+      <hat-graph>
+        ${automation.action.map((action, i) => {
+          return makeNode(action, `action/${i}`, trace);
+        })}
+      </hat-graph>
+    `,
+    graph
+  );
+  return graph;
+}
--- a/src/hat-graph/types.ts
+++ b/src/hat-graph/types.ts
@@ -0,0 +1,13 @@
+export interface AutomationConfig {
+  trigger: string[];
+  condition: string[];
+  action: AutomationActionConfig[];
+}
+
+export interface AutomationActionConfig {
+  [key: string]: any;
+}
+
+export interface AutomationTrace {
+  [key: string]: any;
+}
--- a/src/main.js
+++ b/src/main.js
@@ -1,79 +1,44 @@
-import { demoConfig2 } from "./demo-config";
+import { demoTrace, demoConfig } from "./demo-config";
 import "@vanillawc/wc-codemirror";

-import "./script-graph";
-// import "./script-graph3";
-import "./hat-graph/hat-graph-node";
-import "./hat-graph/hat-graph";
-import { makeGraph } from "./hat-graph/make-graph";
+import { default as jsyaml } from "js-yaml";

-import { ActionHandler } from "./script-to-graph";
-
-import { mdiAsterisk, mdiArrowUp, mdiArrowDown } from "@mdi/js";
-
-let index_counter = 0;
-let nodes = [];
-
-window.onload = () => {
-  return;
-  //const graph2 = document.createElement("script-graph3");
-  //document.querySelector("#graph2").appendChild(graph2);
-
-  let src = demoConfig;
-
-  const fullcode = document.querySelector("#fullcode");
-  fullcode.mode = "yaml";
-  window.setTimeout(() => (fullcode.value = jsyaml.safeDump(src)), 100);
-
-  const updateButton = document.querySelector("#updateButton");
-  updateButton.addEventListener("click", () => {
-    src = jsyaml.safeLoad(fullcode.value);
-    index_counter = 0;
-    nodes = [];
-    tr.actions = src;
-    graph.tree = tr.graph;
-  });
-
-  const graph = document.createElement("script-graph");
-  const tr = new ActionHandler();
-  window.tr = tr;
-  tr.actions = src;
-  tr.updateCallback = (actions) => {
-    graph.tree = tr.graph;
-    fullcode.value = jsyaml.safeDump(tr.actions);
-  };
-  tr.selectCallback = (idx, action, update) => {
-    graph.tree = tr.graph;
-    const code = document.querySelector("#snippet");
-    code.value = jsyaml.safeDump(action);
-    document.querySelector("#saveSnippet").onclick = () =>
-      update(jsyaml.safeLoad(code.value));
-    document.querySelector("#deleteSnippet").onclick = () =>
-      update(jsyaml.safeLoad(null));
-  };
-
-  graph.tree = tr.graph;
-  document.querySelector("#graph").appendChild(graph);
-};
+import { automationGraph } from "./hat-graph/make-graph";
+import { html } from "lit-element";
+import { render } from "lit-html";
+import { mdiBowTie } from "@mdi/js";
+let selectedNode;

 function nodeSelected(ev) {
-  const code = document.querySelector("#snippet");
-  code.value = jsyaml.safeDump(ev.detail.config);
+  if (selectedNode) {
+    selectedNode.removeAttribute("selected");
+  }
+  ev.detail.node.setAttribute("selected", "");
+  selectedNode = ev.detail.node;
+
+  const snippet = document.querySelector("#snippet");
+  snippet.querySelector("span").innerHTML = ev.detail.path;
+  const code = snippet.querySelector("wc-codemirror");
+  code.value = jsyaml.dump(ev.detail.config);
  code.currentNode = ev.target;
 }

-function rebuildGraph(config) {
+function rebuildGraph(config = undefined) {
  const graphCard = document.querySelector("#graph");

+  if (!config) {
+    const codeEl = document.querySelector("#fullcode wc-codemirror");
+    config = jsyaml.load(codeEl.value);
+  }
+
  while (graphCard.firstChild) graphCard.removeChild(graphCard.firstChild);

-  const graph = makeGraph(config);
+  const traceEl = document.querySelector("#trace wc-codemirror");
+  const trace = jsyaml.load(traceEl.value);
+
+  const graph = automationGraph(config, trace);
+
  graph.addEventListener("node-selected", nodeSelected);
-  graph.addEventListener("update-node", (ev) => {
-    const code = document.querySelector("#fullcode");
-    code.value = jsyaml.safeDump(ev.detail.config);
-    window.setTimeout(() => rebuildGraph(ev.detail.config), 100);
-  });

  graphCard.appendChild(graph);
 }
@@ -82,7 +47,7 @@ function setup_snippet_editor() {
  document.querySelector("#saveSnippet").onclick = () => {
    const code = document.querySelector("#snippet");
    if (code.currentNode) {
-      code.currentNode.updateNode(jsyaml.safeLoad(code.value));
+      code.currentNode.updateNode(jsyaml.load(code.value));
    }
  };
  document.querySelector("#deleteSnippet").onclick = () => {
@@ -93,21 +58,70 @@ function setup_snippet_editor() {
  };
 }

-function setup() {
-  setup_snippet_editor();
+function setup_trace_editor() {
+  const src = demoTrace;
+  const trace = document.querySelector("#trace");
+  window.setTimeout(
+    () => (trace.querySelector("wc-codemirror").value = jsyaml.dump(src)),
+    100
+  );
+  trace.querySelector("button").addEventListener("click", () => rebuildGraph());
+}

-  let src = demoConfig2;
-  const fullcode = document.querySelector("#fullcode");
-  fullcode.mode = "yaml";
-  window.setTimeout(() => (fullcode.value = jsyaml.safeDump(src)), 100);
+function setup_fullcode_editor() {
+  const src = demoConfig;
+  const code = document.querySelector("#fullcode");

-  rebuildGraph(src);
+  window.setTimeout(
+    () => (code.querySelector("wc-codemirror").value = jsyaml.dump(src)),
+    100
+  );

-  const updateButton = document.querySelector("#updateButton");
-  updateButton.addEventListener("click", () => {
-    src = jsyaml.safeLoad(fullcode.value);
-    rebuildGraph(src);
+  code.querySelector("button").addEventListener("click", () => rebuildGraph());
+}
+
+function setup_trigger_buttons() {
+  const btn = document.querySelector("#triggers");
+  btn.querySelectorAll("button").forEach((b, i) => {
+    b.addEventListener("click", () => {
+      console.log(i, "clicked");
+      btn.dispatchEvent(
+        new CustomEvent("event-triggered", {
+          detail: { trigger: `trigger${i + 1}` },
+          bubbles: true,
+        })
+      );
+    });
+  });
+
+  btn.querySelectorAll("input").forEach((c, i) => {
+    c.addEventListener("change", () => {
+      const condition = ["a", "b", "c"][i];
+      console.log(condition, "changed");
+      btn.dispatchEvent(
+        new CustomEvent("states-changed", {
+          detail: {
+            state: {
+              a: btn.querySelector("#a").checked,
+              b: btn.querySelector("#b").checked,
+              c: btn.querySelector("#c").checked,
+            },
+          },
+          bubbles: true,
+        })
+      );
+    });
  });
 }

+function setup() {
+  setup_snippet_editor();
+
+  setup_fullcode_editor();
+  setup_trace_editor();
+  setup_trigger_buttons();
+
+  window.setTimeout(() => rebuildGraph(), 300);
+}
+
 setup();
--- a/src/script-graph.ts
+++ b/src/script-graph.ts
@@ -1,204 +0,0 @@
-import {
-  LitElement,
-  html,
-  css,
-  svg,
-  property
-} from "lit-element";
-
-import { mdiPlus } from "@mdi/js";
-
-const SIZE = 35;
-const DIST = 20;
-
-export interface TreeNode {
-  icon: String;
-  styles?: String;
-  end?: Boolean;
-  children?: (TreeNode | TreeNode[])[];
-  clickCallback?: any;
-  addCallback?: any;
-}
-
-class ScriptGraph2 extends LitElement {
-  @property() selected = null;
-  @property() tree: [TreeNode];
-  @property() nodeSize = SIZE;
-  @property() nodeSeparation = DIST;
-
-  private _draw_node(x, y, node) {
-    return svg`
-      <circle
-        cx="${x}"
-        cy="${y + this.nodeSize/2}"
-        r="${this.nodeSize/2}"
-        class="node"
-        @click=${node.clickCallback}
-        style=${node.styles}
-      />
-      <g style="pointer-events: none" transform="translate(${x - 12} ${y + this.nodeSize/2 - 12})">
-        <path d="${node.icon}"/>
-      </g>
-    `;
-  }
-
-  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
-        x1=${x1}
-        y1=${y1}
-        x2=${x2}
-        y2=${y2}
-      />
-    `;
-  }
-
-  private _draw_tree(tree: TreeNode | TreeNode[]) {
-    if(!tree) return {svg: `Hello`, width: 0, height: 0};
-    if(!Array.isArray(tree)) {
-      let height = this.nodeSize;
-      let width = this.nodeSize;
-      let pieces = [];
-
-      if(tree.children) {
-        const childTrees = tree.children.map((c) =>this._draw_tree(c));
-        height += childTrees.reduce((a,i) => Math.max(a, i.height), 0);
-        width = childTrees.reduce((a,i) => a+i.width, 0) + this.nodeSeparation*(tree.children.length - 1);
-        const offsets = childTrees.map((sum => value => sum += value.width + this.nodeSeparation)(0));
-
-        let bottomConnectors = false;
-
-        for (const [idx, child] of childTrees.entries()) {
-          const x = -width/2 + (idx? offsets[idx-1] : 0) + child.width/2;
-          // Draw top connectors
-          pieces.push(this._draw_connector(
-            0,
-            this.nodeSize/2,
-            x,
-            this.nodeSize + this.nodeSeparation
-          ));
-
-
-          let endNode = tree.children[idx];
-          if(Array.isArray(endNode)) endNode = endNode[endNode.length -1];
-          if(endNode.end !== false) {
-            // Draw bottom fill
-            pieces.push(this._draw_connector(
-              x,
-              this.nodeSeparation + child.height,
-              x,
-              this.nodeSeparation + height
-            ));
-
-            // Draw bottom connectors
-            pieces.push(this._draw_connector(
-              x,
-              this.nodeSeparation + height,
-              0,
-              this.nodeSeparation + height + this.nodeSize/2 + this.nodeSeparation
-            ));
-            bottomConnectors = true;
-          }
-
-          // Draw child tree
-          pieces.push(svg`
-            <g class="a" transform="translate(${x} ${this.nodeSize + this.nodeSeparation})">
-            ${child.svg}
-            </g>
-          `);
-        }
-        if(bottomConnectors)
-          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(
-          0,
-          height,
-          0,
-          height + this.nodeSeparation
-        ));
-        height += this.nodeSeparation;
-      }
-
-      // Draw the node itself
-      pieces.push(this._draw_node(0, 0, tree));
-
-      return {svg: pieces, width, height};
-    }
-
-    // Array of trees
-    let pieces = [];
-    let height = 0;
-    const children = tree.map((n) => this._draw_tree(n));
-    const width = children.reduce((a,i) => Math.max(a, i.width), 0);
-    for (const [_, node] of children.entries()) {
-      pieces.push(svg`
-        <g class="b" transform="translate(0, ${height})">
-          ${node.svg}
-        </g>
-      `);
-      height += node.height;
-    }
-
-    return {svg: pieces, width, height};
-
-  }
-
-
-  render() {
-    let tree = this._draw_tree(this.tree);
-    return html`
-    <style>
-    :host {
-      --stroke-clr: var(--stroke-color, rgb(3, 169, 244));
-      --hover-clr: var(--hover-color, rgb(255, 152, 0));
-    }
-    circle, line {
-      stroke: var(--stroke-clr);
-      stroke-width: 5;
-      fill: white;
-    }
-    .newnode:hover {
-      stroke: var(--hover-clr);
-    }
-    </style>
-    <svg width=${tree.width + 32} height=${tree.height + 32}>
-      <g transform="translate(${tree.width/2 + 16} 16)">
-        ${tree.svg}
-      </g>
-    </svg>
-    `;
-  }
-
-}
-
-customElements.define("script-graph", ScriptGraph2);
-
--- a/src/script-graph3.ts
+++ b/src/script-graph3.ts
@@ -1,298 +0,0 @@
-import {
-  LitElement,
-  html,
-  css,
-  svg,
-  property,
-  TemplateResult,
-} from "lit-element";
-
-import {
-  mdiCallSplit,
-  mdiAbTesting,
-  mdiCheck,
-  mdiClose,
-  mdiChevronRight,
-  mdiExclamation,
-  mdiTimerOutline,
-  mdiTrafficLight,
-  mdiRefresh,
-  mdiArrowUp,
-  mdiCodeJson,
-  mdiCheckBoxOutline,
-  mdiCheckboxBlankOutline,
-  mdiAsterisk,
-  mdiCircleOutline,
-} from "@mdi/js";
-
-const ICONS = {
-  "call-split": mdiCallSplit,
-  "ab-testing": mdiAbTesting,
-  check: mdiCheck,
-  close: mdiClose,
-  "chevron-right": mdiChevronRight,
-  exclamation: mdiExclamation,
-  asterisk: mdiAsterisk,
-};
-
-const SIZE = 24;
-
-interface GraphNode extends LitElement {
-  render_svg(): TemplateResult;
-  width: number;
-  height: number;
-}
-
-class ScriptGraphNode extends LitElement {
-  @property() icon = "chevron-right";
-
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
-  }
-
-  get width() {
-    return SIZE + 5;
-  }
-  get height() {
-    return SIZE + 5;
-  }
-  render() {
-    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})"
-      >
-        ${
-          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;
-      }
-      :host(:hover) {
-        --stroke-clr: var(--hover-clr);
-      }
-      :host(:focus) {
-        --stroke-clr: green;
-        outline: none;
-      }
-    `;
-  }
-}
-
-class ScriptGraphBranch extends LitElement {
-  @property() _num_items = 0;
-  @property() _branch_height = 30;
-  @property() _branch_curve = 25;
-
-  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 + 2 * this._branch_height;
-  }
-
-  async updateChildren() {
-    this._num_items = this.children.length;
-  }
-
-  render() {
-    let branch_x = [];
-    let total = 0;
-    for (const c of Array.from(this.children)) {
-      const rect = c.getBoundingClientRect();
-      branch_x.push(rect.width / 2 + total);
-      total += rect.width;
-    }
-
-    const line_end = this.height - this._branch_height;
-
-    return html`
-      <svg width="${this.width}" height="${this.height}">
-        <rect
-          x="0"
-          y="0"
-          width="${this.width}"
-          height="${this.height}"
-          fill="white"
-        />
-        ${branch_x.map((x) => {
-          return svg`
-              <path
-                class="line"
-                d="
-                  M ${this.width / 2} 0
-                  C ${this.width / 2} ${this._branch_curve}
-                    ${x} ${this._branch_height - this._branch_curve}
-                    ${x} ${this._branch_height}
-                  L ${x} ${line_end}
-                  C ${x} ${line_end + this._branch_curve}
-                    ${this.width / 2} ${this.height - this._branch_curve}
-                    ${this.width / 2} ${this.height}
-                "
-              />
-            `;
-        })}
-      </svg>
-      <script-graph-node id="head" .icon=${"call-split"}> </script-graph-node>
-      <div id="branches" style="top: ${this._branch_height}px;">
-        <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));
-      }
-      #branches {
-        position: absolute;
-        top: 20px;
-        left: 0;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-      }
-      path.line {
-        stroke: var(--stroke-clr);
-        stroke-width: 2;
-        fill: white;
-      }
-      #head {
-        position: Absolute;
-        top: 5px;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
-      :host(:focus-within) #head {
-        --stroke-color: green;
-      }
-    `;
-  }
-}
-
-class ScriptGraph3 extends LitElement {
-  @property() content = [];
-  @property() _width = 0;
-  @property() _height = 0;
-  @property() _distance = 20;
-
-  async updateChildren() {
-    return;
-  }
-
-  childrenChangedCallback() {
-    console.log("Children changed");
-  }
-
-  get height() {
-    let h = 0;
-    for (const c of this.children) {
-      h += (c as any).height ?? 0;
-      h += this._distance;
-    }
-    return h + this._distance;
-  }
-
-  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="${this.width}" height="${this.height}">
-        <rect
-          x="0"
-          y="0"
-          width="${this.width}"
-          height="${this.height}"
-          fill="white"
-        />
-        <path
-          class="line"
-          d="
-            M ${this.width / 2} 0
-            L ${this.width / 2} ${this.height}
-          "
-        />
-      </svg>
-      <div id="nodes" style="--distance: ${this._distance}px;">
-        <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));
-      }
-      #nodes {
-        position: absolute;
-        top: var(--distance, 10px);
-        left: 0;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      }
-      ::slotted(*) {
-        padding-bottom: var(--distance, 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);
--- a/src/script-to-graph.ts
+++ b/src/script-to-graph.ts
@@ -1,262 +0,0 @@
-import {
-  mdiCallSplit,
-  mdiAbTesting,
-  mdiCheck,
-  mdiClose,
-  mdiChevronRight,
-  mdiExclamation,
-  mdiTimerOutline,
-  mdiTrafficLight,
-  mdiRefresh,
-  mdiArrowUp,
-  mdiCodeJson,
-  mdiCheckBoxOutline,
-  mdiCheckboxBlankOutline,
-  mdiAsterisk,
-} from "@mdi/js";
-
-const ICONS = {
-  new: mdiAsterisk,
-  service: mdiChevronRight,
-  condition: mdiAbTesting,
-  TRUE: mdiCheck,
-  FALSE: mdiClose,
-  delay: mdiTimerOutline,
-  wait_template: mdiTrafficLight,
-  event: mdiExclamation,
-  repeat: mdiRefresh,
-  repeatReturn: mdiArrowUp,
-  choose: mdiCallSplit,
-  chooseChoice: mdiCheckBoxOutline,
-  chooseDefault: mdiCheckboxBlankOutline,
-  YAML: mdiCodeJson,
-};
-
-import { TreeNode} from "./script-graph";
-import { Action } from "./types";
-
-const OPTIONS = [
-  "condition",
-  "delay",
-  "device_id",
-  "event",
-  "scene",
-  "service",
-  "wait_template",
-  "repeat",
-  "choose",
-];
-
-interface NodeHandler {
-  (action, selected: any[], select, update): TreeNode;
-}
-
-const SPECIAL = {
-  condition: (action, selected, select, update) => {
-    return {
-      icon: ICONS["condition"],
-      clickCallback: () => select([1], action, update),
-      children: [
-        {
-          icon: ICONS["TRUE"],
-          clickCallback: () => select([2], action, update),
-          styles: selected[0]
-            ? "stroke: orange;"
-            : undefined,
-        },
-        {
-          icon: ICONS["FALSE"],
-          end: false,
-          clickCallback: () => select([3], action, update),
-          styles: selected[0]
-            ? "stroke: orange;"
-            : undefined,
-        },
-      ],
-    }
-  },
-
-  repeat: (action, selected, select, update) => {
-    let seq = action.repeat.sequence;
-    if(!seq || !seq.length) seq = [{}];
-    const seqHandler = new ActionHandler(seq);
-    if(selected[0] !== undefined && selected[0] !== -1)
-      seqHandler.selected = selected;
-    seqHandler.selectCallback = select;
-    seqHandler.updateCallback = (a) => {
-      action.repeat["sequence"] = a;
-      update(action);
-    }
-
-    return {
-      icon: ICONS["repeat"],
-      clickCallback: () => select([-1], action, update),
-      children: [
-        {
-          icon: ICONS["repeatReturn"],
-          clickCallback: () => select([-1], action, update),
-          styles: selected[0] === -1
-            ? "stroke: orange;"
-            : undefined,
-        },
-        seqHandler.graph,
-      ],
-    };
-  },
-
-  choose: (action, selected, select, update) => {
-
-    let def = action.default || [{}];
-    const defaultHandler = new ActionHandler(def);
-    if(selected[0] === -2)
-      defaultHandler.selected = selected.slice(1);
-    defaultHandler.selectCallback = (i, a, u) => {
-      select( [-2].concat(i), a, u);
-    };
-    defaultHandler.updateCallback = (a) => {
-      action.default = defaultHandler.actions;
-      update(action);
-    };
-
-
-    return {
-      icon: ICONS["choose"],
-      clickCallback: () => select([-1], action, update),
-      children: [
-        ...action.choose.map((b,idx) => {
-          const handler = new ActionHandler(b.sequence || [{}]);
-          if(selected[0] === idx)
-            handler.selected = selected.slice(1);
-          handler.selectCallback = (i, a, u) => {
-            select([idx].concat(i), a, u);
-          };
-          handler.updateCallback = (a) => {
-            b.sequence = handler.actions;
-            action.choose[idx] = b;
-            update(action);
-          };
-
-          return [
-            {
-              icon: ICONS["chooseChoice"],
-              clickCallback: () => select([idx], b, (a) => {
-                action.choose[idx] = a;
-                update(action);
-              }),
-              styles: selected[0] === idx
-                ? "stroke: orange;"
-                : undefined,
-            },
-            handler.graph,
-          ];
-
-        }),
-
-        [
-          {
-            icon: ICONS["chooseDefault"],
-            clickCallback: () => select([-2], def, (a) => {
-              action.default = a;
-              update(action);
-            }),
-            styles: selected[0] === -2
-              ? "stroke: orange;"
-              : undefined,
-          },
-          defaultHandler.graph,
-        ]
-      ],
-    };
-  },
-
-};
-
-interface NoAction {
-}
-
-export class ActionHandler {
-  _actions: (Action | NoAction)[] = [];
-  updateCallback = null;
-  selectCallback = null;
-  selected: number[] = [];
-
-  constructor(actions: (Action | NoAction)[] = []) {
-    this._actions = actions;
-  }
-
-  set actions(actions) {
-    this._actions = actions;
-  }
-
-  get actions() {
-    if(!this._actions.length) this._actions =  [{}];
-    return this._actions;
-  }
-
-  get graph() {
-    return this.actions.map((action, idx) => this._make_graph_node(idx, action));
-  }
-
-  _update_action(idx: number, action) {
-    if(action === null)
-      this.actions.splice(idx, 1);
-    else
-      this.actions[idx] = action;
-    if (this.updateCallback)
-      this.updateCallback(this.actions);
-  }
-
-  _add_action(idx: number) {
-    this.actions.splice(idx, 0, {});
-    if (this.updateCallback)
-      this.updateCallback(this.actions);
-    this._select_node([idx], {}, (a) =>this._update_action(idx, a));
-  }
-
-  _select_node(path: number[], action, update=null) {
-    this.selected = path;
-    if (this.selectCallback)
-      this.selectCallback(path, action, update);
-  }
-
-  _make_graph_node(idx: number, action): TreeNode {
-    let _type = "yaml";
-    if (Object.keys(action).length === 0)
-      _type = "new";
-    else
-      _type = OPTIONS.find((option) => option in action) || "YAML";
-
-    const selected = this.selected.length >= 1 && this.selected[0] == idx;
-    let node: TreeNode = {icon: ""};
-
-    if (_type in SPECIAL) {
-      node = SPECIAL[_type](
-        action,
-        selected ? this.selected.slice(1): [],
-        (i, a, u) => this._select_node([idx].concat(i), a, u),
-        (a) => this._update_action(idx, a),
-      );
-    } else {
-      node = {
-        icon: ICONS[_type],
-        clickCallback: () => {
-          this._select_node(
-            [idx],
-            action,
-            (a) => this._update_action(idx, a)
-          )
-        }
-      }
-    }
-    return {
-      ...node,
-      addCallback: () => this._add_action(idx+1),
-      styles: selected
-        ? "stroke: orange"
-        : _type === "new"
-          ? "stroke: lightgreen;"
-          : undefined,
-    }
-  }
-
-}
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,70 +0,0 @@
-export interface Condition {
-  condition: string;
-}
-
-export interface EventAction {
-  event: string;
-  event_data?: { [key: string]: any };
-  event_data_template?: { [key: string]: any };
-}
-
-export interface ServiceAction {
-  service: string;
-  entity_id?: string;
-  data?: { [key: string]: any };
-}
-
-export interface DeviceAction {
-  device_id: string;
-  domain: string;
-  entity_id: string;
-}
-
-export interface DelayAction {
-  delay: number;
-}
-
-export interface SceneAction {
-  scene: string;
-}
-
-export interface WaitAction {
-  wait_template: string;
-  timeout?: number;
-}
-
-export interface RepeatAction {
-  repeat: CountRepeat | WhileRepeat | UntilRepeat;
-}
-
-interface BaseRepeat {
-  sequence: Action[];
-}
-
-export interface CountRepeat extends BaseRepeat {
-  count: number;
-}
-
-export interface WhileRepeat extends BaseRepeat {
-  while: Condition[];
-}
-
-export interface UntilRepeat extends BaseRepeat {
-  until: Condition[];
-}
-
-export interface ChooseAction {
-  choose: [{ conditions: Condition[]; sequence: Action[] }];
-  default?: Action[];
-}
-
-export type Action =
-  | EventAction
-  | DeviceAction
-  | ServiceAction
-  | Condition
-  | DelayAction
-  | SceneAction
-  | WaitAction
-  | RepeatAction
-  | ChooseAction;
Author	SHA1	Message	Date
Thomas Lovén	1af5a3f20b	Traces and triggers	2021-03-28 23:37:54 +00:00
Thomas Lovén	24954fddd2	Stability improvements and cleanup	2021-03-28 09:52:37 +00:00
Thomas Lovén	9dead0c87d	Remove drag and drop for now	2021-03-27 15:43:21 +00:00
Thomas Lovén	f9aab2b70e	Remove old code	2021-03-27 00:36:53 +01:00