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