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
9 changed files with 699 additions and 394 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">
-        <h1> Selected node code </h1>
-        <wc-codemirror mode="json" id="snippet">
-        </wc-codemirror>
-        <button id="saveSnippet">Save</button>
-        <button id="deleteSnippet">Delete</button>
+      <div style="display: inline-flex; flex-direction: column;">
+        <div class="card code" id="snippet">
+          <h1> Selected node code </h1>
+          <wc-codemirror mode="yaml">
+          </wc-codemirror>
+          <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" id="trace">
+          <h1>Trace</h1>
+          <wc-codemirror mode="yaml"></wc-codemirror>
+          <button>Update trace</button>
+        </div>
      </div>
-      <div class="card code">
+      <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,107 +1,90 @@
-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: [
-          {
-            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 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 demoConfig2 = [
-  { service: "light.turn_on",
-    data: {
-      entity_id: "group.bedroom",
-      brightness: 100,
+export const demoConfig = {
+  trigger: ["trigger1", "trigger2", "trigger3"],
+  condition: ["a", "b", "c"],
+  action: [
+    {
+      service: "light.turn_on",
+      data: {
+        entity_id: "group.bedroom",
+        brightness: 100,
+      },
    },
-  },
-  { condition: "state",
-    entity_id: "device_tracker.paulus",
-    state: "home",
-  },
-  { delay: "01:00",
-  },
-  { wait_template: "{{ is_state(media_player.floor', 'stop') }}",
-  },
-  { event: "LOGBOOK_ENTRY",
-    event_data: {
-      name: "Paulus",
-      message: "is waking up",
+    {
+      condition: "state",
      entity_id: "device_tracker.paulus",
-      domain: "light",
+      state: "home",
    },
-  },
-  { repeat: {
-      count: "5",
-      sequence: [
-        { delay: 2
-        },
-        { service: "light.toggle",
-          data: {
-            entity_id: "light.bed_light",
+    {
+      delay: "01:00",
+    },
+    {
+      wait_template: "{{ is_state(media_player.floor', 'stop') }}",
+    },
+    {
+      event: "LOGBOOK_ENTRY",
+      event_data: {
+        name: "Paulus",
+        message: "is waking up",
+        entity_id: "device_tracker.paulus",
+        domain: "light",
+      },
+    },
+    {
+      repeat: {
+        count: "5",
+        sequence: [
+          {
+            delay: 2,
          },
+          {
+            service: "light.toggle",
+            data: {
+              entity_id: "light.bed_light",
+            },
+          },
+        ],
+      },
+    },
+    {
+      choose: [
+        {
+          conditions: [],
+          sequence: [
+            { service: "test" },
+            { service: "test" },
+            { service: "test" },
+          ],
+        },
+        {
+          conditions: [],
+          sequence: [{ service: "test" }],
+        },
+        {
+          conditions: [],
+          sequence: [{ service: "test" }, { service: "test" }],
        },
      ],
+      default: [{ service: "test" }, { service: "test" }, { service: "test" }],
    },
-  },
-  { choose: [
-      { conditions: [],
-        sequence: [
-          { service: "test"},
-          { service: "test"},
-          { service: "test"},
-        ],
-      },
-      { conditions: [],
-        sequence: [
-          { service: "test"},
-        ],
-      },
-      { conditions: [],
-        sequence: [
-          { 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) => {
-              return svg`
-                <path
-                  class="line"
-                  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}
-                  "
-                />
-              `;
-            })
-          : svg`
-              <path
-              class="line"
-              d="
-                M ${this.width / 2} 0
-                L ${this.width / 2} ${this.height}
-              "
-              />
-            `}
-      </svg>
-      <slot name="head"> </slot>
-      <div
-        id="branches"
-        class="${this.querySelector(":scope > [slot='head']") ? "" : "no-head"}"
-      >
+      <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="${classMap({
+                      line: true,
+                      marked: this.mark_start?.includes(i),
+                    })}"
+                    id="${this.mark_start?.includes(i) ? "mark-start" : ""}"
+                    index=${i}
+                    d="
+                      M ${total_width / 2} 0
+                      C ${total_width / 2} ${BRANCH_CURVATURE}
+                        ${branch.x} ${BRANCH_HEIGHT - BRANCH_CURVATURE}
+                        ${branch.x} ${BRANCH_HEIGHT}
+                      "/>
+                `;
+              })}
+              <use xlink:href="#mark-start" />
+            </svg>
+          `
+        : ""}
+      <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,6 +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,
@ -21,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",
@ -49,6 +55,7 @@ const ICONS = {
  chooseChoice: mdiCheckBoxOutline,
  chooseDefault: mdiCheckboxBlankOutline,
  YAML: mdiCodeJson,
+  trigger: mdiAsterisk,
 };

 const SPECIAL_NODES = {
@ -57,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
@ -116,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";
@ -181,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();
@ -259,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,26 +1,44 @@
-import { demoConfig2 } from "./demo-config";
+import { demoTrace, demoConfig } from "./demo-config";
 import "@vanillawc/wc-codemirror";

-import { makeGraph } from "./hat-graph/make-graph";
+import { default as jsyaml } from "js-yaml";
+
+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);
 }
@ -29,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 = () => {
@ -40,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();
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