thomas/script-graph
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: thomas:f9aab2b70eef08fa0b61152e30c235d7941e3cd5
Branches Tags
thomas:master
...
compare: thomas:1af5a3f20b46da952aa65166426c283f46715888
Branches Tags
thomas:master

3 Commits
f9aab2b70e ... 1af5a3f20b

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
9 changed files with 699 additions and 394 deletions
Show Stats Expand all files Collapse all files

32
index.html
View File

@ -2,8 +2,6 @@
<html> <html>
<head> <head>
<title>Script graph demo</title> <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> <script src="index.js" type="module" defer></script>
</head> </head>
<body style="margin: 24px"> <body style="margin: 24px">
@ -36,18 +34,34 @@
<div> <div>
<div class="card" id="graph"> <div class="card" id="graph">
</div> </div>
<div class="card code"> <div style="display: inline-flex; flex-direction: column;">
<div class="card code" id="snippet">
<h1> Selected node code </h1> <h1> Selected node code </h1>
<wc-codemirror mode="json" id="snippet"> <wc-codemirror mode="yaml">
</wc-codemirror> </wc-codemirror>
<button id="saveSnippet">Save</button> <div><b>Path: </b><span id="nodepath"></span></div>
<button id="deleteSnippet">Delete</button> <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>
<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> <h1>Full script code</h1>
<wc-codemirror mode="yaml" id="fullcode"> <wc-codemirror mode="yaml">
</wc-codemirror> </wc-codemirror>
<button id="updateButton">Update</button> <button>Update</button>
</div> </div>
</div> </div>
</body> </body>

13
package-lock.json generated
View File

@ -70,6 +70,11 @@
"resolved": "https://registry.npmjs.org/@vanillawc/wc-codemirror/-/wc-codemirror-1.8.10.tgz", "resolved": "https://registry.npmjs.org/@vanillawc/wc-codemirror/-/wc-codemirror-1.8.10.tgz",
"integrity": "sha512-UKMD/UOpF1uRl29nlwvwQqSMBqsl+uDWYlGx82wIYbIBJkeqPrSo1Ez1rGi9jc1CL7/XwUr7u+l/kTwZAEkrEg==" "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": { "async": {
"version": "2.6.3", "version": "2.6.3",
"resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
@ -238,6 +243,14 @@
"integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=", "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
"dev": true "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": { "lit-element": {
"version": "2.3.1", "version": "2.3.1",
"resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.3.1.tgz", "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.3.1.tgz",

1
package.json
View File

@ -22,6 +22,7 @@
"dependencies": { "dependencies": {
"@mdi/js": "^5.5.55", "@mdi/js": "^5.5.55",
"@vanillawc/wc-codemirror": "^1.8.10", "@vanillawc/wc-codemirror": "^1.8.10",
"js-yaml": "^4.0.0",
"lit-element": "^2.3.1" "lit-element": "^2.3.1"
} }
} }

119
src/demo-config.js
View File

@ -1,63 +1,47 @@
export const demoConfig = [ export const demoTrace = {
{ "trigger/2": {},
condition: "state", "condition/0": {},
entity_id: "binary_sensor.dark_outside", "condition/1": {},
state: "on", "condition/2": {},
}, "action/0": {},
{ "action/1": { result: true },
choose: [ "action/2": {},
{ "action/3": {},
conditions: [ "action/4": {},
{ "action/5": { repeats: 1 },
condition: "state", "action/5/sequence/0": {},
entity_id: "binary_sensor.door_open", "action/5/sequence/1": {},
state: "on", "action/6": {},
}, "action/6/": {},
], "action/6/choose/2": {},
sequence: [ "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", 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: { data: {
entity_id: "group.bedroom", entity_id: "group.bedroom",
brightness: 100, brightness: 100,
}, },
}, },
{ condition: "state", {
condition: "state",
entity_id: "device_tracker.paulus", entity_id: "device_tracker.paulus",
state: "home", 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: { event_data: {
name: "Paulus", name: "Paulus",
message: "is waking up", message: "is waking up",
@ -65,12 +49,15 @@ export const demoConfig2 = [
domain: "light", domain: "light",
}, },
}, },
{ repeat: { {
repeat: {
count: "5", count: "5",
sequence: [ sequence: [
{ delay: 2 {
delay: 2,
}, },
{ service: "light.toggle", {
service: "light.toggle",
data: { data: {
entity_id: "light.bed_light", entity_id: "light.bed_light",
}, },
@ -78,30 +65,26 @@ export const demoConfig2 = [
], ],
}, },
}, },
{ choose: [ {
{ conditions: [], choose: [
{
conditions: [],
sequence: [ sequence: [
{ service: "test" }, { service: "test" },
{ service: "test" }, { service: "test" },
{ service: "test" }, { service: "test" },
], ],
}, },
{ conditions: [], {
sequence: [ conditions: [],
{ service: "test"}, sequence: [{ service: "test" }],
],
}, },
{ conditions: [], {
sequence: [ conditions: [],
{ service: "test"}, sequence: [{ service: "test" }, { service: "test" }],
{ service: "test"},
],
}, },
], ],
default: [ default: [{ service: "test" }, { service: "test" }, { service: "test" }],
{ service: "test"},
{ service: "test"},
{ service: "test"},
],
}, },
]; ],
};

143
src/hat-graph/hat-graph-node.ts
View File

@ -1,71 +1,69 @@
import { css, LitElement, property, svg } from "lit-element"; import { css, LitElement, property, svg } from "lit-element";
const NODE_SIZE = 24; const NODE_SIZE = 30;
const SPACING = 10;
export class HatGraphNode extends LitElement { export class HatGraphNode extends LitElement {
@property() iconPath?; @property() iconPath?: string;
dragtarget = undefined; @property({ reflect: true, type: Boolean }) marked?: boolean;
config = undefined; @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() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0"); if (!this.hasAttribute("tabindex") && !this.nofocus)
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;
});
} }
updateNode(config) { updated() {
this.dispatchEvent( const svg = this.shadowRoot.querySelector("svg");
new CustomEvent("update-node", { const bbox = svg.getBBox();
detail: { config }, const extra_height = this.graphstart ? 2 : 1;
bubbles: true, const extra_width = SPACING;
composed: true, 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() { render() {
return svg` return svg`
<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 <circle
cx="0" cx="0"
cy="${this.width / 2}" cy="0"
r="${NODE_SIZE / 2}" r="${NODE_SIZE / 2}"
/> />
<g <g
style="pointer-events: none" style="pointer-events: none"
transform="translate(${-12} ${this.width / 2 - 12})" transform="translate(${-12} ${-12})"
> >
${this.iconPath ? svg`<path d="${this.iconPath}"/>` : ""} ${this.iconPath ? svg`<path d="${this.iconPath}"/>` : ""}
</g> </g>
</g>
</svg> </svg>
`; `;
} }
@ -74,28 +72,65 @@ export class HatGraphNode extends LitElement {
return css` return css`
:host { :host {
display: flex; display: flex;
flex-direction: column;
--stroke-clr: var(--stroke-color, rgb(3, 169, 244)); --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) { :host([marked]) {
--stroke-clr: var(--hover-clr); --stroke-clr: var(--marked-clr);
} }
:host([selected]),
:host(:focus) { :host(:focus) {
--stroke-clr: green; --stroke-clr: var(--selected-clr);
outline: none; outline: none;
} }
:host(.dragging) { :host(:hover) circle {
--stroke-clr: gray; --stroke-clr: var(--hover-clr);
color: gray;
} }
:host(.dragging) path { :host([disabled]) circle {
stroke: gray; stroke: var(--disabled-clr);
fill: gray;
} }
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: var(--stroke-clr);
stroke-width: 2; stroke-width: 2;
fill: none;
}
circle {
fill: white; 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));
}
} }
`; `;
} }

253
src/hat-graph/hat-graph.ts
View File

@ -1,131 +1,138 @@
import { css, html, LitElement, property, svg } from "lit-element"; import { css, html, LitElement, property, svg } from "lit-element";
import { classMap } from "lit-html/directives/class-map";
import "./hat-graph-node";
const BRANCH_HEIGHT = 30; const BRANCH_HEIGHT = 30;
const BRANCH_CURVATURE = 25; 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 { export class HatGraph extends LitElement {
@property() _num_items = 0; @property() _num_items = 0;
@property({ reflect: true }) branching?; @property({ reflect: true, type: Boolean }) branching?: boolean;
config?; @property({ reflect: true, converter: mark_converter }) mark_start?: number[];
@property({ reflect: true, converter: mark_converter }) mark_end?: number[];
updateNode(config) { @property({ reflect: true, type: Boolean }) disabled?: boolean;
this.dispatchEvent( @property({ reflect: true, type: Boolean }) selected?: boolean;
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;
}
async updateChildren() { async updateChildren() {
this._num_items = this.children.length; this._num_items = this.children.length;
} }
render() { render() {
let branch_x = []; let branches = [];
let total = 0; let total_width = 0;
if (this.branching !== undefined) { let max_height = 0;
let min_height = Number.POSITIVE_INFINITY;
if (this.branching) {
for (const c of Array.from(this.children)) { for (const c of Array.from(this.children)) {
if (c.slot === "head") continue; if (c.slot === "head") continue;
const rect = c.getBoundingClientRect(); const rect = c.getBoundingClientRect();
branch_x.push(rect.width / 2 + total); branches.push({
total += rect.width; 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` return html`
<svg width="${this.width}" height="${this.height}"> <slot name="head" @slotchange=${this.updateChildren}> </slot>
<rect ${this.branching
x="0" ? svg`
y="0" <svg
width="${this.width}" id="top"
height="${this.height}" width="${total_width}"
fill="white" height="${BRANCH_HEIGHT}"
/> >
${this.branching !== undefined ${branches.map((branch, i) => {
? branch_x.map((x) => { if (branch.start) return "";
return svg` return svg`
<path <path
class="line" class="${classMap({
line: true,
marked: this.mark_start?.includes(i),
})}"
id="${this.mark_start?.includes(i) ? "mark-start" : ""}"
index=${i}
d=" d="
M ${this.width / 2} 0 M ${total_width / 2} 0
C ${this.width / 2} ${BRANCH_CURVATURE} C ${total_width / 2} ${BRANCH_CURVATURE}
${x} ${BRANCH_HEIGHT - BRANCH_CURVATURE} ${branch.x} ${BRANCH_HEIGHT - BRANCH_CURVATURE}
${x} ${BRANCH_HEIGHT} ${branch.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` <use xlink:href="#mark-start" />
<path
class="line"
d="
M ${this.width / 2} 0
L ${this.width / 2} ${this.height}
"
/>
`}
</svg> </svg>
<slot name="head"> </slot> `
<div : ""}
id="branches" <div id="branches">
class="${this.querySelector(":scope > [slot='head']") ? "" : "no-head"}" ${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> <slot @slotchange=${this.updateChildren}></slot>
</div> </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 { :host {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column;
align-items: center;
--stroke-clr: var(--stroke-color, rgb(3, 169, 244)); --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 { #branches {
position: absolute; position: relative;
left: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
align-items: center; align-items: center;
} }
:host([branching]) #branches { :host([branching]) #branches {
top: ${BRANCH_HEIGHT}px;
flex-direction: row; flex-direction: row;
align-items: start; align-items: start;
} }
:host(:not([branching])) #branches {
top: ${VERTICAL_SPACING + NODE_SIZE}px; /* SHould be something else*/ :host([branching]) ::slotted([slot="head"]) {
flex-direction: column; 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 { path.line {
stroke: var(--stroke-clr); stroke: var(--stroke-clr);
stroke-width: 2; stroke-width: 2;
fill: none; fill: none;
} }
:host(:not([branching])) ::slotted(*) { path.line.marked {
margin-bottom: 10px; stroke: var(--marked-clr);
} }
::slotted(:last-child) { :host([disabled]) path.line {
margin-bottom: 0; stroke: var(--disabled-clr);
} }
::slotted([slot="head"]) { :host([selected]) #top path.line {
position: absolute; stroke: var(--selected-clr);
top: ${BRANCH_HEIGHT / 2}px;
left: 50%;
transform: translate(-50%, -50%);
} }
:host(:focus-within) ::slotted([slot="head"]) { :host(:focus) #top path.line {
--stroke-color: green; stroke: var(--selected-clr);
} }
`; `;
} }

328
src/hat-graph/make-graph.ts
View File

@ -1,6 +1,7 @@
import "./hat-graph"; import "./hat-graph";
import "./hat-graph-node"; import "./hat-graph-node";
import { HatGraphNode } from "./hat-graph-node"; import { HatGraphNode } from "./hat-graph-node";
import { classMap } from "lit-html/directives/class-map";
import { import {
mdiCallSplit, mdiCallSplit,
@ -21,6 +22,11 @@ import {
import { HatGraph } from "./hat-graph"; import { HatGraph } from "./hat-graph";
import { html } from "lit-element"; import { html } from "lit-element";
import { render } from "lit-html"; import { render } from "lit-html";
import {
AutomationActionConfig,
AutomationConfig,
AutomationTrace,
} from "./types";
const OPTIONS = [ const OPTIONS = [
"condition", "condition",
@ -49,6 +55,7 @@ const ICONS = {
chooseChoice: mdiCheckBoxOutline, chooseChoice: mdiCheckBoxOutline,
chooseDefault: mdiCheckboxBlankOutline, chooseDefault: mdiCheckboxBlankOutline,
YAML: mdiCodeJson, YAML: mdiCodeJson,
trigger: mdiAsterisk,
}; };
const SPECIAL_NODES = { const SPECIAL_NODES = {
@ -57,58 +64,125 @@ const SPECIAL_NODES = {
repeat: makeRepeatNode, repeat: makeRepeatNode,
}; };
function makeConditionNode(config) { function makeConditionNode(
config: AutomationActionConfig,
path: string,
trace?: AutomationTrace
) {
const graph = document.createElement("hat-graph") as HatGraph; const graph = document.createElement("hat-graph") as HatGraph;
graph.branching = true; 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( graph.dispatchEvent(
new CustomEvent("node-selected", { detail: { config }, bubbles: true }) new CustomEvent("node-selected", {
detail: { path, config, node: graph },
bubbles: true,
})
); );
});
render( render(
html` 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>
<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 graph
); );
return graph; return graph;
} }
function makeChooseNode(config) { function makeChooseNode(
config: AutomationActionConfig,
path: string,
trace?: AutomationTrace
) {
const graph = document.createElement("hat-graph") as HatGraph; const graph = document.createElement("hat-graph") as HatGraph;
graph.config = config;
graph.branching = true; graph.branching = true;
graph.setAttribute("tabindex", "0");
const focused = () => graph.addEventListener("focus", () => {
graph.dispatchEvent( 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( render(
html` html`
<hat-graph-node <hat-graph-node
slot="head" slot="head"
.iconPath="${mdiCallSplit}" .iconPath="${mdiCallSplit}"
@focus=${focused} nofocus
draggable="true" ?marked=${trace && path in trace}
.dragtarget=${graph}
> >
</hat-graph-node> </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; const head = document.createElement("hat-graph-node") as HatGraphNode;
head.iconPath = mdiCheckBoxOutline; head.iconPath = mdiCheckBoxOutline;
head.addEventListener("focus", focused); head.setAttribute("nofocus", "");
if (trace && pth in trace) {
return makeGraph(branch.sequence, head); head.setAttribute("marked", "");
}
return makeGraph(branch.sequence, `${pth}/sequence`, head, trace);
})} })}
${(() => { ${(() => {
const pth = `${path}/default`;
const head = document.createElement("hat-graph-node") as HatGraphNode; const head = document.createElement("hat-graph-node") as HatGraphNode;
head.iconPath = mdiCheckboxBlankOutline; head.iconPath = mdiCheckboxBlankOutline;
head.addEventListener("focus", focused); head.setAttribute("nofocus", "");
return makeGraph(config.default, head); if (trace && pth in trace) {
head.setAttribute("marked", "");
}
return makeGraph(config.default, pth, head, trace);
})()} })()}
`, `,
graph graph
@ -116,64 +190,88 @@ function makeChooseNode(config) {
return graph; return graph;
} }
function makeRepeatNode(config) { function makeRepeatNode(
config: AutomationActionConfig,
path: string,
trace?: AutomationTrace
) {
const graph = document.createElement("hat-graph") as HatGraph; const graph = document.createElement("hat-graph") as HatGraph;
graph.branching = true; 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( graph.dispatchEvent(
new CustomEvent("node-selected", { detail: { config }, bubbles: true }) new CustomEvent("node-selected", {
detail: { path, config, node: graph },
bubbles: true,
})
); );
});
render( render(
html` html`
<hat-graph-node <hat-graph-node
.iconPath=${mdiArrowUp} slot="head"
@focus=${focused} .iconPath=${mdiRefresh}
nofocus
?marked=${trace && path in trace}
></hat-graph-node> ></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 graph
); );
return graph; return graph;
} }
function makeNode(config) { function makeNode(
if (typeof config === "string") return undefined; config: AutomationActionConfig,
path: string,
trace?: AutomationTrace
) {
const type = OPTIONS.find((key) => key in config) || "yaml"; const type = OPTIONS.find((key) => key in config) || "yaml";
if (type in SPECIAL_NODES) { 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; const node = document.createElement("hat-graph-node") as HatGraphNode;
node.iconPath = ICONS[type]; node.iconPath = ICONS[type];
node.draggable = true; if (trace && path in trace) {
node.setAttribute("marked", "");
node.config = config; }
node.addEventListener("focus", (ev) => { node.addEventListener("focus", (ev) => {
node.dispatchEvent( node.dispatchEvent(
new CustomEvent("node-selected", { detail: { config }, bubbles: true }) new CustomEvent("node-selected", {
detail: { path, config, node },
bubbles: true,
})
); );
}); });
return node; 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; 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) { if (head) {
head.slot = "head"; head.slot = "head";
@ -181,44 +279,7 @@ export function makeGraph(nodes, head = undefined) {
} }
for (const [i, nodeConfig] of nodes.entries()) { for (const [i, nodeConfig] of nodes.entries()) {
const node = makeNode(nodeConfig); const node = makeNode(nodeConfig, `${path}/${i}`, trace);
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);
}
});
node.addEventListener("update-node", (ev) => { node.addEventListener("update-node", (ev) => {
ev.stopPropagation(); ev.stopPropagation();
@ -259,3 +320,108 @@ export function makeGraph(nodes, head = undefined) {
return graph; 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
View 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
View File

@ -1,26 +1,44 @@
import { demoConfig2 } from "./demo-config"; import { demoTrace, demoConfig } from "./demo-config";
import "@vanillawc/wc-codemirror"; 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) { function nodeSelected(ev) {
const code = document.querySelector("#snippet"); if (selectedNode) {
code.value = jsyaml.safeDump(ev.detail.config); 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; code.currentNode = ev.target;
} }
function rebuildGraph(config) { function rebuildGraph(config = undefined) {
const graphCard = document.querySelector("#graph"); 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); 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("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); graphCard.appendChild(graph);
} }
@ -29,7 +47,7 @@ function setup_snippet_editor() {
document.querySelector("#saveSnippet").onclick = () => { document.querySelector("#saveSnippet").onclick = () => {
const code = document.querySelector("#snippet"); const code = document.querySelector("#snippet");
if (code.currentNode) { if (code.currentNode) {
code.currentNode.updateNode(jsyaml.safeLoad(code.value)); code.currentNode.updateNode(jsyaml.load(code.value));
} }
}; };
document.querySelector("#deleteSnippet").onclick = () => { document.querySelector("#deleteSnippet").onclick = () => {
@ -40,21 +58,70 @@ function setup_snippet_editor() {
}; };
} }
function setup() { function setup_trace_editor() {
setup_snippet_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; function setup_fullcode_editor() {
const fullcode = document.querySelector("#fullcode"); const src = demoConfig;
fullcode.mode = "yaml"; const code = document.querySelector("#fullcode");
window.setTimeout(() => (fullcode.value = jsyaml.safeDump(src)), 100);
rebuildGraph(src); window.setTimeout(
() => (code.querySelector("wc-codemirror").value = jsyaml.dump(src)),
100
);
const updateButton = document.querySelector("#updateButton"); code.querySelector("button").addEventListener("click", () => rebuildGraph());
updateButton.addEventListener("click", () => { }
src = jsyaml.safeLoad(fullcode.value);
rebuildGraph(src); 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(); setup();