Traces and triggers
This commit is contained in:
parent
24954fddd2
commit
1af5a3f20b
32
index.html
32
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>
|
||||
|
||||
13
package-lock.json
generated
13
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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" }],
|
||||
},
|
||||
];
|
||||
],
|
||||
};
|
||||
|
||||
@ -1,29 +1,35 @@
|
||||
import { css, LitElement, property, svg } from "lit-element";
|
||||
|
||||
const NODE_SIZE = 24;
|
||||
const VERTICAL_SPACING = 10;
|
||||
const NODE_SIZE = 30;
|
||||
const SPACING = 10;
|
||||
|
||||
export class HatGraphNode extends LitElement {
|
||||
@property() iconPath?;
|
||||
@property({ reflect: true }) marked?;
|
||||
@property({ reflect: true }) selected?;
|
||||
@property({ reflect: true }) disabled?;
|
||||
@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("focusin", () => this.setAttribute("selected", ""));
|
||||
this.addEventListener("focusout", () => this.removeAttribute("selected"));
|
||||
if (!this.hasAttribute("tabindex") && !this.nofocus)
|
||||
this.setAttribute("tabindex", "0");
|
||||
}
|
||||
|
||||
updated() {
|
||||
const svg = this.shadowRoot.querySelector("svg");
|
||||
const bbox = svg.getBBox();
|
||||
svg.setAttribute("width", `${bbox.width + 2}px`);
|
||||
svg.setAttribute("height", `${bbox.height + 1}px`);
|
||||
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",
|
||||
`${bbox.x - 1} ${bbox.y} ${bbox.width + 2} ${bbox.height + 1}`
|
||||
`${Math.ceil(bbox.x - extra_width / 2)}
|
||||
${Math.ceil(bbox.y - extra_height / 2)}
|
||||
${bbox.width + extra_width}
|
||||
${bbox.height + extra_height}`
|
||||
);
|
||||
}
|
||||
|
||||
@ -31,17 +37,21 @@ export class HatGraphNode extends LitElement {
|
||||
return svg`
|
||||
<svg
|
||||
>
|
||||
${
|
||||
this.graphstart
|
||||
? ``
|
||||
: svg`
|
||||
<path
|
||||
class="connector"
|
||||
d="
|
||||
M 0 ${-VERTICAL_SPACING}
|
||||
M 0 ${-SPACING - NODE_SIZE / 2}
|
||||
L 0 0
|
||||
"
|
||||
line-caps="round"
|
||||
/>
|
||||
<g class="node"
|
||||
transform="translate(0 ${VERTICAL_SPACING})"
|
||||
>
|
||||
`
|
||||
}
|
||||
<g class="node">
|
||||
<circle
|
||||
cx="0"
|
||||
cy="0"
|
||||
@ -65,18 +75,20 @@ export class HatGraphNode extends LitElement {
|
||||
flex-direction: column;
|
||||
--stroke-clr: var(--stroke-color, rgb(3, 169, 244));
|
||||
--selected-clr: var(--selected-color, rgb(255, 152, 0));
|
||||
--marked-clr: var(--marked-color, green);
|
||||
--marked-clr: var(--marked-color, springgreen);
|
||||
--hover-clr: var(--hover-color, red);
|
||||
--disabled-clr: var(--disabled-color, gray);
|
||||
}
|
||||
:host([selected]),
|
||||
:host(:focus) {
|
||||
--circle-clr: var(--selected-clr);
|
||||
outline: none;
|
||||
--default-trigger-color: 3, 169, 244;
|
||||
--rgb-trigger-color: var(--trigger-color, var(--default-trigger-color));
|
||||
}
|
||||
:host([marked]) {
|
||||
--stroke-clr: var(--marked-clr);
|
||||
}
|
||||
:host([selected]),
|
||||
:host(:focus) {
|
||||
--stroke-clr: var(--selected-clr);
|
||||
outline: none;
|
||||
}
|
||||
:host(:hover) circle {
|
||||
--stroke-clr: var(--hover-clr);
|
||||
}
|
||||
@ -87,6 +99,11 @@ export class HatGraphNode extends LitElement {
|
||||
--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);
|
||||
@ -97,6 +114,24 @@ export class HatGraphNode extends LitElement {
|
||||
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));
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,13 +4,20 @@ import { classMap } from "lit-html/directives/class-map";
|
||||
const BRANCH_HEIGHT = 30;
|
||||
const BRANCH_CURVATURE = 25;
|
||||
|
||||
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?;
|
||||
@property({ reflect: true }) mark_start?;
|
||||
@property({ reflect: true }) mark_end?;
|
||||
@property({ reflect: true }) disabled?;
|
||||
@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;
|
||||
@ -21,15 +28,15 @@ export class HatGraph extends LitElement {
|
||||
let total_width = 0;
|
||||
let max_height = 0;
|
||||
let min_height = Number.POSITIVE_INFINITY;
|
||||
if (this.branching !== undefined) {
|
||||
if (this.branching) {
|
||||
for (const c of Array.from(this.children)) {
|
||||
if (c.slot === "head") continue;
|
||||
const rect = c.getBoundingClientRect();
|
||||
branches.push({
|
||||
x: rect.width / 2 + total_width,
|
||||
height: rect.height,
|
||||
start: c.getAttribute("graph-start") != null,
|
||||
end: c.getAttribute("graph-end") != null,
|
||||
start: c.getAttribute("graphStart") != null,
|
||||
end: c.getAttribute("graphEnd") != null,
|
||||
});
|
||||
total_width += rect.width;
|
||||
max_height = Math.max(max_height, rect.height);
|
||||
@ -39,7 +46,7 @@ export class HatGraph extends LitElement {
|
||||
|
||||
return html`
|
||||
<slot name="head" @slotchange=${this.updateChildren}> </slot>
|
||||
${this.branching !== undefined
|
||||
${this.branching
|
||||
? svg`
|
||||
<svg
|
||||
id="top"
|
||||
@ -52,9 +59,9 @@ export class HatGraph extends LitElement {
|
||||
<path
|
||||
class="${classMap({
|
||||
line: true,
|
||||
marked: this.mark_start === i,
|
||||
marked: this.mark_start?.includes(i),
|
||||
})}"
|
||||
id="${this.mark_start === i ? "mark-start" : ""}"
|
||||
id="${this.mark_start?.includes(i) ? "mark-start" : ""}"
|
||||
index=${i}
|
||||
d="
|
||||
M ${total_width / 2} 0
|
||||
@ -69,7 +76,7 @@ export class HatGraph extends LitElement {
|
||||
`
|
||||
: ""}
|
||||
<div id="branches">
|
||||
${this.branching !== undefined
|
||||
${this.branching
|
||||
? svg`
|
||||
<svg
|
||||
id="lines"
|
||||
@ -82,7 +89,7 @@ export class HatGraph extends LitElement {
|
||||
<path
|
||||
class="${classMap({
|
||||
line: true,
|
||||
marked: this.mark_end === i,
|
||||
marked: this.mark_end?.includes(i),
|
||||
})}"
|
||||
index=${i}
|
||||
d="
|
||||
@ -97,7 +104,7 @@ export class HatGraph extends LitElement {
|
||||
<slot @slotchange=${this.updateChildren}></slot>
|
||||
</div>
|
||||
|
||||
${this.branching !== undefined
|
||||
${this.branching
|
||||
? svg`
|
||||
<svg
|
||||
id="bottom"
|
||||
@ -110,9 +117,9 @@ export class HatGraph extends LitElement {
|
||||
<path
|
||||
class="${classMap({
|
||||
line: true,
|
||||
marked: this.mark_end === i,
|
||||
marked: this.mark_end?.includes(i),
|
||||
})}"
|
||||
id="${this.mark_end === i ? "mark-end" : ""}"
|
||||
id="${this.mark_end?.includes(i) ? "mark-end" : ""}"
|
||||
index=${i}
|
||||
d="
|
||||
M ${branch.x} 0
|
||||
@ -137,9 +144,13 @@ export class HatGraph extends LitElement {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--stroke-clr: var(--stroke-color, rgb(3, 169, 244));
|
||||
--marked-clr: var(--marked-color, green);
|
||||
--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: relative;
|
||||
display: flex;
|
||||
@ -151,6 +162,11 @@ export class HatGraph extends LitElement {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
:host([branching]) ::slotted([slot="head"]) {
|
||||
margin-bottom: ${-BRANCH_HEIGHT / 2}px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#lines {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
@ -167,6 +183,12 @@ export class HatGraph extends LitElement {
|
||||
:host([disabled]) path.line {
|
||||
stroke: var(--disabled-clr);
|
||||
}
|
||||
:host([selected]) #top path.line {
|
||||
stroke: var(--selected-clr);
|
||||
}
|
||||
:host(:focus) #top path.line {
|
||||
stroke: var(--selected-clr);
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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",
|
||||
@ -58,24 +64,51 @@ 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=${mdiCheck}
|
||||
nofocus
|
||||
?marked=${marked_branch === "0"}
|
||||
></hat-graph-node>
|
||||
<hat-graph-node
|
||||
.iconPath=${mdiClose}
|
||||
@focus=${focused}
|
||||
graph-end
|
||||
graphEnd
|
||||
nofocus
|
||||
?marked=${marked_branch === "1"}
|
||||
></hat-graph-node>
|
||||
`,
|
||||
graph
|
||||
@ -83,31 +116,73 @@ function makeConditionNode(config) {
|
||||
return graph;
|
||||
}
|
||||
|
||||
function makeChooseNode(config) {
|
||||
function makeChooseNode(
|
||||
config: AutomationActionConfig,
|
||||
path: string,
|
||||
trace?: AutomationTrace
|
||||
) {
|
||||
const graph = document.createElement("hat-graph") as HatGraph;
|
||||
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}>
|
||||
<hat-graph-node
|
||||
slot="head"
|
||||
.iconPath="${mdiCallSplit}"
|
||||
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
|
||||
@ -115,49 +190,87 @@ 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) {
|
||||
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];
|
||||
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;
|
||||
|
||||
if (head) {
|
||||
@ -166,7 +279,7 @@ export function makeGraph(nodes, head = undefined) {
|
||||
}
|
||||
|
||||
for (const [i, nodeConfig] of nodes.entries()) {
|
||||
const node = makeNode(nodeConfig);
|
||||
const node = makeNode(nodeConfig, `${path}/${i}`, trace);
|
||||
|
||||
node.addEventListener("update-node", (ev) => {
|
||||
ev.stopPropagation();
|
||||
@ -207,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;
|
||||
}
|
||||
|
||||
13
src/hat-graph/types.ts
Normal file
13
src/hat-graph/types.ts
Normal file
@ -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;
|
||||
}
|
||||
113
src/main.js
113
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();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user