Script-to-graph functions added for new method

src/hat-graph/make-graph.ts

@@ -0,0 +1,193 @@
+import { HatGraphNode } from "./hat-graph-node";
+
+import {
+  mdiCallSplit,
+  mdiAbTesting,
+  mdiCheck,
+  mdiClose,
+  mdiChevronRight,
+  mdiExclamation,
+  mdiTimerOutline,
+  mdiTrafficLight,
+  mdiRefresh,
+  mdiArrowUp,
+  mdiCodeJson,
+  mdiCheckBoxOutline,
+  mdiCheckboxBlankOutline,
+  mdiAsterisk,
+} from "@mdi/js";
+import { HatGraph } from "./hat-graph";
+import { html } from "lit-element";
+import { render } from "lit-html";
+
+const OPTIONS = [
+  "condition",
+  "delay",
+  "device_id",
+  "event",
+  "scene",
+  "service",
+  "wait_template",
+  "repeat",
+  "choose",
+];
+
+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,
+};
+
+const SPECIAL_NODES = {
+  condition: makeConditionNode,
+  choose: makeChooseNode,
+  repeat: makeRepeatNode,
+};
+
+function makeConditionNode(config) {
+  const graph = document.createElement("hat-graph") as HatGraph;
+  graph.branching = true;
+  const focused = () =>
+    graph.dispatchEvent(
+      new CustomEvent("node-selected", { detail: { config }, bubbles: true })
+    );
+
+  render(
+    html`
+      <hat-graph-node slot="head" .iconPath=${mdiAbTesting} @focus=${focused}>
+      </hat-graph-node>
+      <hat-graph-node .iconPath=${mdiCheck} @focus=${focused}></hat-graph-node>
+      <hat-graph-node .iconPath=${mdiClose} @focus=${focused}></hat-graph-node>
+    `,
+    graph
+  );
+  return graph;
+}
+
+function makeChooseNode(config) {
+  const graph = document.createElement("hat-graph") as HatGraph;
+  graph.branching = true;
+
+  const focused = () =>
+    graph.dispatchEvent(
+      new CustomEvent("node-selected", { detail: { config }, bubbles: true })
+    );
+
+  render(
+    html`
+      <hat-graph-node slot="head" iconPath="${mdiCallSplit}" @focus=${focused}>
+      </hat-graph-node>
+      ${config.choose?.map((branch) => {
+        return html`
+          <hat-graph>
+            <hat-graph-node
+              slot="head"
+              .iconPath=${mdiCheckBoxOutline}
+              @focus=${focused}
+            ></hat-graph-node>
+            ${branch.sequence.map((node) => makeNode(node))}
+          </hat-graph>
+        `;
+      })}
+      <hat-graph>
+        <hat-graph-node
+          slot="head"
+          .iconPath=${mdiCheckboxBlankOutline}
+          @focus=${focused}
+        ></hat-graph-node>
+        ${config.default.map((node) => makeNode(node))}
+      </hat-graph>
+    `,
+    graph
+  );
+  return graph;
+}
+
+function makeRepeatNode(config) {
+  const graph = document.createElement("hat-graph") as HatGraph;
+  graph.branching = true;
+
+  const focused = () =>
+    graph.dispatchEvent(
+      new CustomEvent("node-selected", { detail: { config }, bubbles: true })
+    );
+
+  render(
+    html`
+      <hat-graph-node
+        .iconPath=${mdiArrowUp}
+        @focus=${focused}
+      ></hat-graph-node>
+      <hat-graph>
+        ${config.repeat.sequence.map((node) => makeNode(node))}
+      </hat-graph>
+    `,
+    graph
+  );
+  return graph;
+}
+
+function makeNode(config) {
+  const type = OPTIONS.find((key) => key in config) || "yaml";
+
+  if (type in SPECIAL_NODES) {
+    return SPECIAL_NODES[type](config);
+  }
+
+  const node = document.createElement("hat-graph-node") as HatGraphNode;
+
+  node.iconPath = ICONS[type];
+
+  node.addEventListener("focus", (ev) => {
+    node.dispatchEvent(
+      new CustomEvent("node-selected", { detail: { config }, bubbles: true })
+    );
+  });
+
+  return node;
+}
+
+export function makeGraph(nodes) {
+  const graph = document.createElement("hat-graph") as HatGraph;
+
+  for (const [i, nodeConfig] of nodes.entries()) {
+    const node = makeNode(nodeConfig);
+
+    node.addEventListener("update-node", (ev) => {
+      ev.stopPropagation();
+
+      const config = [...nodes];
+      config[i] = ev.detail.config;
+
+      graph.dispatchEvent(
+        new CustomEvent("update-node", { detail: { config }, bubbles: true })
+      );
+    });
+
+    node.addEventListener("delete-node", (ev) => {
+      ev.stopPropagation();
+
+      const config = [...nodes];
+      config.splice(i, 1);
+
+      graph.dispatchEvent(
+        new CustomEvent("update-node", { detail: { config }, bubbles: true })
+      );
+    });
+
+    graph.appendChild(node);
+  }
+
+  return graph;
+}