Remove old code
This commit is contained in:
parent
da9cbbe8a5
commit
f9aab2b70e
@ -1,3 +1,5 @@
|
||||
import "./hat-graph";
|
||||
import "./hat-graph-node";
|
||||
import { HatGraphNode } from "./hat-graph-node";
|
||||
|
||||
import {
|
||||
|
||||
53
src/main.js
53
src/main.js
@ -1,61 +1,8 @@
|
||||
import { demoConfig2 } from "./demo-config";
|
||||
import "@vanillawc/wc-codemirror";
|
||||
|
||||
import "./script-graph";
|
||||
// import "./script-graph3";
|
||||
import "./hat-graph/hat-graph-node";
|
||||
import "./hat-graph/hat-graph";
|
||||
import { makeGraph } from "./hat-graph/make-graph";
|
||||
|
||||
import { ActionHandler } from "./script-to-graph";
|
||||
|
||||
import { mdiAsterisk, mdiArrowUp, mdiArrowDown } from "@mdi/js";
|
||||
|
||||
let index_counter = 0;
|
||||
let nodes = [];
|
||||
|
||||
window.onload = () => {
|
||||
return;
|
||||
//const graph2 = document.createElement("script-graph3");
|
||||
//document.querySelector("#graph2").appendChild(graph2);
|
||||
|
||||
let src = demoConfig;
|
||||
|
||||
const fullcode = document.querySelector("#fullcode");
|
||||
fullcode.mode = "yaml";
|
||||
window.setTimeout(() => (fullcode.value = jsyaml.safeDump(src)), 100);
|
||||
|
||||
const updateButton = document.querySelector("#updateButton");
|
||||
updateButton.addEventListener("click", () => {
|
||||
src = jsyaml.safeLoad(fullcode.value);
|
||||
index_counter = 0;
|
||||
nodes = [];
|
||||
tr.actions = src;
|
||||
graph.tree = tr.graph;
|
||||
});
|
||||
|
||||
const graph = document.createElement("script-graph");
|
||||
const tr = new ActionHandler();
|
||||
window.tr = tr;
|
||||
tr.actions = src;
|
||||
tr.updateCallback = (actions) => {
|
||||
graph.tree = tr.graph;
|
||||
fullcode.value = jsyaml.safeDump(tr.actions);
|
||||
};
|
||||
tr.selectCallback = (idx, action, update) => {
|
||||
graph.tree = tr.graph;
|
||||
const code = document.querySelector("#snippet");
|
||||
code.value = jsyaml.safeDump(action);
|
||||
document.querySelector("#saveSnippet").onclick = () =>
|
||||
update(jsyaml.safeLoad(code.value));
|
||||
document.querySelector("#deleteSnippet").onclick = () =>
|
||||
update(jsyaml.safeLoad(null));
|
||||
};
|
||||
|
||||
graph.tree = tr.graph;
|
||||
document.querySelector("#graph").appendChild(graph);
|
||||
};
|
||||
|
||||
function nodeSelected(ev) {
|
||||
const code = document.querySelector("#snippet");
|
||||
code.value = jsyaml.safeDump(ev.detail.config);
|
||||
|
||||
@ -1,204 +0,0 @@
|
||||
import {
|
||||
LitElement,
|
||||
html,
|
||||
css,
|
||||
svg,
|
||||
property
|
||||
} from "lit-element";
|
||||
|
||||
import { mdiPlus } from "@mdi/js";
|
||||
|
||||
const SIZE = 35;
|
||||
const DIST = 20;
|
||||
|
||||
export interface TreeNode {
|
||||
icon: String;
|
||||
styles?: String;
|
||||
end?: Boolean;
|
||||
children?: (TreeNode | TreeNode[])[];
|
||||
clickCallback?: any;
|
||||
addCallback?: any;
|
||||
}
|
||||
|
||||
class ScriptGraph2 extends LitElement {
|
||||
@property() selected = null;
|
||||
@property() tree: [TreeNode];
|
||||
@property() nodeSize = SIZE;
|
||||
@property() nodeSeparation = DIST;
|
||||
|
||||
private _draw_node(x, y, node) {
|
||||
return svg`
|
||||
<circle
|
||||
cx="${x}"
|
||||
cy="${y + this.nodeSize/2}"
|
||||
r="${this.nodeSize/2}"
|
||||
class="node"
|
||||
@click=${node.clickCallback}
|
||||
style=${node.styles}
|
||||
/>
|
||||
<g style="pointer-events: none" transform="translate(${x - 12} ${y + this.nodeSize/2 - 12})">
|
||||
<path d="${node.icon}"/>
|
||||
</g>
|
||||
`;
|
||||
}
|
||||
|
||||
private _draw_new_node(x, y, node) {
|
||||
return svg`
|
||||
<circle
|
||||
cx="${x}"
|
||||
cy="${y + this.nodeSize/4}"
|
||||
r="${this.nodeSize/4}"
|
||||
class="newnode"
|
||||
@click=${node.addCallback}
|
||||
/>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
private _draw_connector(x1, y1, x2, y2) {
|
||||
return svg`
|
||||
<line
|
||||
x1=${x1}
|
||||
y1=${y1}
|
||||
x2=${x2}
|
||||
y2=${y2}
|
||||
/>
|
||||
`;
|
||||
}
|
||||
|
||||
private _draw_tree(tree: TreeNode | TreeNode[]) {
|
||||
if(!tree) return {svg: `Hello`, width: 0, height: 0};
|
||||
if(!Array.isArray(tree)) {
|
||||
let height = this.nodeSize;
|
||||
let width = this.nodeSize;
|
||||
let pieces = [];
|
||||
|
||||
if(tree.children) {
|
||||
const childTrees = tree.children.map((c) =>this._draw_tree(c));
|
||||
height += childTrees.reduce((a,i) => Math.max(a, i.height), 0);
|
||||
width = childTrees.reduce((a,i) => a+i.width, 0) + this.nodeSeparation*(tree.children.length - 1);
|
||||
const offsets = childTrees.map((sum => value => sum += value.width + this.nodeSeparation)(0));
|
||||
|
||||
let bottomConnectors = false;
|
||||
|
||||
for (const [idx, child] of childTrees.entries()) {
|
||||
const x = -width/2 + (idx? offsets[idx-1] : 0) + child.width/2;
|
||||
// Draw top connectors
|
||||
pieces.push(this._draw_connector(
|
||||
0,
|
||||
this.nodeSize/2,
|
||||
x,
|
||||
this.nodeSize + this.nodeSeparation
|
||||
));
|
||||
|
||||
|
||||
let endNode = tree.children[idx];
|
||||
if(Array.isArray(endNode)) endNode = endNode[endNode.length -1];
|
||||
if(endNode.end !== false) {
|
||||
// Draw bottom fill
|
||||
pieces.push(this._draw_connector(
|
||||
x,
|
||||
this.nodeSeparation + child.height,
|
||||
x,
|
||||
this.nodeSeparation + height
|
||||
));
|
||||
|
||||
// Draw bottom connectors
|
||||
pieces.push(this._draw_connector(
|
||||
x,
|
||||
this.nodeSeparation + height,
|
||||
0,
|
||||
this.nodeSeparation + height + this.nodeSize/2 + this.nodeSeparation
|
||||
));
|
||||
bottomConnectors = true;
|
||||
}
|
||||
|
||||
// Draw child tree
|
||||
pieces.push(svg`
|
||||
<g class="a" transform="translate(${x} ${this.nodeSize + this.nodeSeparation})">
|
||||
${child.svg}
|
||||
</g>
|
||||
`);
|
||||
}
|
||||
if(bottomConnectors)
|
||||
height += this.nodeSize + this.nodeSeparation;
|
||||
|
||||
}
|
||||
if(tree.addCallback) {
|
||||
pieces.push(this._draw_connector(
|
||||
0,
|
||||
height,
|
||||
0,
|
||||
height + this.nodeSeparation
|
||||
));
|
||||
pieces.push(this._draw_new_node(
|
||||
0, height + this.nodeSeparation,
|
||||
tree
|
||||
));
|
||||
height += this.nodeSeparation + this.nodeSize/2;
|
||||
}
|
||||
if(tree.end !== false) {
|
||||
// Draw bottom connector
|
||||
pieces.push(this._draw_connector(
|
||||
0,
|
||||
height,
|
||||
0,
|
||||
height + this.nodeSeparation
|
||||
));
|
||||
height += this.nodeSeparation;
|
||||
}
|
||||
|
||||
// Draw the node itself
|
||||
pieces.push(this._draw_node(0, 0, tree));
|
||||
|
||||
return {svg: pieces, width, height};
|
||||
}
|
||||
|
||||
// Array of trees
|
||||
let pieces = [];
|
||||
let height = 0;
|
||||
const children = tree.map((n) => this._draw_tree(n));
|
||||
const width = children.reduce((a,i) => Math.max(a, i.width), 0);
|
||||
for (const [_, node] of children.entries()) {
|
||||
pieces.push(svg`
|
||||
<g class="b" transform="translate(0, ${height})">
|
||||
${node.svg}
|
||||
</g>
|
||||
`);
|
||||
height += node.height;
|
||||
}
|
||||
|
||||
return {svg: pieces, width, height};
|
||||
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
let tree = this._draw_tree(this.tree);
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
--stroke-clr: var(--stroke-color, rgb(3, 169, 244));
|
||||
--hover-clr: var(--hover-color, rgb(255, 152, 0));
|
||||
}
|
||||
circle, line {
|
||||
stroke: var(--stroke-clr);
|
||||
stroke-width: 5;
|
||||
fill: white;
|
||||
}
|
||||
.newnode:hover {
|
||||
stroke: var(--hover-clr);
|
||||
}
|
||||
</style>
|
||||
<svg width=${tree.width + 32} height=${tree.height + 32}>
|
||||
<g transform="translate(${tree.width/2 + 16} 16)">
|
||||
${tree.svg}
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
customElements.define("script-graph", ScriptGraph2);
|
||||
|
||||
@ -1,298 +0,0 @@
|
||||
import {
|
||||
LitElement,
|
||||
html,
|
||||
css,
|
||||
svg,
|
||||
property,
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
|
||||
import {
|
||||
mdiCallSplit,
|
||||
mdiAbTesting,
|
||||
mdiCheck,
|
||||
mdiClose,
|
||||
mdiChevronRight,
|
||||
mdiExclamation,
|
||||
mdiTimerOutline,
|
||||
mdiTrafficLight,
|
||||
mdiRefresh,
|
||||
mdiArrowUp,
|
||||
mdiCodeJson,
|
||||
mdiCheckBoxOutline,
|
||||
mdiCheckboxBlankOutline,
|
||||
mdiAsterisk,
|
||||
mdiCircleOutline,
|
||||
} from "@mdi/js";
|
||||
|
||||
const ICONS = {
|
||||
"call-split": mdiCallSplit,
|
||||
"ab-testing": mdiAbTesting,
|
||||
check: mdiCheck,
|
||||
close: mdiClose,
|
||||
"chevron-right": mdiChevronRight,
|
||||
exclamation: mdiExclamation,
|
||||
asterisk: mdiAsterisk,
|
||||
};
|
||||
|
||||
const SIZE = 24;
|
||||
|
||||
interface GraphNode extends LitElement {
|
||||
render_svg(): TemplateResult;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
class ScriptGraphNode extends LitElement {
|
||||
@property() icon = "chevron-right";
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
|
||||
}
|
||||
|
||||
get width() {
|
||||
return SIZE + 5;
|
||||
}
|
||||
get height() {
|
||||
return SIZE + 5;
|
||||
}
|
||||
render() {
|
||||
return svg`
|
||||
<svg
|
||||
width="${this.width}"
|
||||
height="${this.height}"
|
||||
viewBox="${-this.width / 2} 0 ${this.width} ${this.height}"
|
||||
>
|
||||
<circle
|
||||
cx="0"
|
||||
cy="${this.width / 2}"
|
||||
r="${SIZE / 2}"
|
||||
/>
|
||||
<g
|
||||
style="pointer-events: none"
|
||||
transform="translate(${-12} ${this.width / 2 - 12})"
|
||||
>
|
||||
${
|
||||
ICONS[this.icon]
|
||||
? svg`
|
||||
<path d="${ICONS[this.icon]}"/>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
display: flex;
|
||||
--stroke-clr: var(--stroke-color, rgb(3, 169, 244));
|
||||
--hover-clr: var(--hover-color, rgb(255, 152, 0));
|
||||
}
|
||||
circle {
|
||||
stroke: var(--stroke-clr);
|
||||
stroke-width: 2;
|
||||
fill: white;
|
||||
}
|
||||
:host(:hover) {
|
||||
--stroke-clr: var(--hover-clr);
|
||||
}
|
||||
:host(:focus) {
|
||||
--stroke-clr: green;
|
||||
outline: none;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class ScriptGraphBranch extends LitElement {
|
||||
@property() _num_items = 0;
|
||||
@property() _branch_height = 30;
|
||||
@property() _branch_curve = 25;
|
||||
|
||||
get width() {
|
||||
let w = 0;
|
||||
for (const c of this.children) {
|
||||
w += (c as any).width ?? 0;
|
||||
}
|
||||
return w;
|
||||
}
|
||||
get height() {
|
||||
let h = 0;
|
||||
for (const c of this.children) {
|
||||
h = Math.max(h, (c as any).height ?? 0);
|
||||
}
|
||||
return h + 2 * this._branch_height;
|
||||
}
|
||||
|
||||
async updateChildren() {
|
||||
this._num_items = this.children.length;
|
||||
}
|
||||
|
||||
render() {
|
||||
let branch_x = [];
|
||||
let total = 0;
|
||||
for (const c of Array.from(this.children)) {
|
||||
const rect = c.getBoundingClientRect();
|
||||
branch_x.push(rect.width / 2 + total);
|
||||
total += rect.width;
|
||||
}
|
||||
|
||||
const line_end = this.height - this._branch_height;
|
||||
|
||||
return html`
|
||||
<svg width="${this.width}" height="${this.height}">
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="${this.width}"
|
||||
height="${this.height}"
|
||||
fill="white"
|
||||
/>
|
||||
${branch_x.map((x) => {
|
||||
return svg`
|
||||
<path
|
||||
class="line"
|
||||
d="
|
||||
M ${this.width / 2} 0
|
||||
C ${this.width / 2} ${this._branch_curve}
|
||||
${x} ${this._branch_height - this._branch_curve}
|
||||
${x} ${this._branch_height}
|
||||
L ${x} ${line_end}
|
||||
C ${x} ${line_end + this._branch_curve}
|
||||
${this.width / 2} ${this.height - this._branch_curve}
|
||||
${this.width / 2} ${this.height}
|
||||
"
|
||||
/>
|
||||
`;
|
||||
})}
|
||||
</svg>
|
||||
<script-graph-node id="head" .icon=${"call-split"}> </script-graph-node>
|
||||
<div id="branches" style="top: ${this._branch_height}px;">
|
||||
<slot @slotchange=${this.updateChildren}></slot>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
position: relative;
|
||||
display: flex;
|
||||
--stroke-clr: var(--stroke-color, rgb(3, 169, 244));
|
||||
--hover-clr: var(--hover-color, rgb(255, 152, 0));
|
||||
}
|
||||
#branches {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
path.line {
|
||||
stroke: var(--stroke-clr);
|
||||
stroke-width: 2;
|
||||
fill: white;
|
||||
}
|
||||
#head {
|
||||
position: Absolute;
|
||||
top: 5px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
:host(:focus-within) #head {
|
||||
--stroke-color: green;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class ScriptGraph3 extends LitElement {
|
||||
@property() content = [];
|
||||
@property() _width = 0;
|
||||
@property() _height = 0;
|
||||
@property() _distance = 20;
|
||||
|
||||
async updateChildren() {
|
||||
return;
|
||||
}
|
||||
|
||||
childrenChangedCallback() {
|
||||
console.log("Children changed");
|
||||
}
|
||||
|
||||
get height() {
|
||||
let h = 0;
|
||||
for (const c of this.children) {
|
||||
h += (c as any).height ?? 0;
|
||||
h += this._distance;
|
||||
}
|
||||
return h + this._distance;
|
||||
}
|
||||
|
||||
get width() {
|
||||
let w = 0;
|
||||
for (const c of this.children) {
|
||||
w = Math.max(w, (c as any).width ?? 0);
|
||||
}
|
||||
return w;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<svg width="${this.width}" height="${this.height}">
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="${this.width}"
|
||||
height="${this.height}"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
class="line"
|
||||
d="
|
||||
M ${this.width / 2} 0
|
||||
L ${this.width / 2} ${this.height}
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
<div id="nodes" style="--distance: ${this._distance}px;">
|
||||
<slot @slotchange=${this.updateChildren}></slot>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
position: relative;
|
||||
display: flex;
|
||||
--stroke-clr: var(--stroke-color, rgb(3, 169, 244));
|
||||
--hover-clr: var(--hover-color, rgb(255, 152, 0));
|
||||
}
|
||||
#nodes {
|
||||
position: absolute;
|
||||
top: var(--distance, 10px);
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
::slotted(*) {
|
||||
padding-bottom: var(--distance, 10px);
|
||||
}
|
||||
path.line {
|
||||
stroke: var(--stroke-clr);
|
||||
stroke-width: 2;
|
||||
fill: white;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
customElements.define("script-graph3", ScriptGraph3);
|
||||
customElements.define("script-graph-node", ScriptGraphNode);
|
||||
customElements.define("script-graph-branch", ScriptGraphBranch);
|
||||
@ -1,262 +0,0 @@
|
||||
import {
|
||||
mdiCallSplit,
|
||||
mdiAbTesting,
|
||||
mdiCheck,
|
||||
mdiClose,
|
||||
mdiChevronRight,
|
||||
mdiExclamation,
|
||||
mdiTimerOutline,
|
||||
mdiTrafficLight,
|
||||
mdiRefresh,
|
||||
mdiArrowUp,
|
||||
mdiCodeJson,
|
||||
mdiCheckBoxOutline,
|
||||
mdiCheckboxBlankOutline,
|
||||
mdiAsterisk,
|
||||
} from "@mdi/js";
|
||||
|
||||
const ICONS = {
|
||||
new: mdiAsterisk,
|
||||
service: mdiChevronRight,
|
||||
condition: mdiAbTesting,
|
||||
TRUE: mdiCheck,
|
||||
FALSE: mdiClose,
|
||||
delay: mdiTimerOutline,
|
||||
wait_template: mdiTrafficLight,
|
||||
event: mdiExclamation,
|
||||
repeat: mdiRefresh,
|
||||
repeatReturn: mdiArrowUp,
|
||||
choose: mdiCallSplit,
|
||||
chooseChoice: mdiCheckBoxOutline,
|
||||
chooseDefault: mdiCheckboxBlankOutline,
|
||||
YAML: mdiCodeJson,
|
||||
};
|
||||
|
||||
import { TreeNode} from "./script-graph";
|
||||
import { Action } from "./types";
|
||||
|
||||
const OPTIONS = [
|
||||
"condition",
|
||||
"delay",
|
||||
"device_id",
|
||||
"event",
|
||||
"scene",
|
||||
"service",
|
||||
"wait_template",
|
||||
"repeat",
|
||||
"choose",
|
||||
];
|
||||
|
||||
interface NodeHandler {
|
||||
(action, selected: any[], select, update): TreeNode;
|
||||
}
|
||||
|
||||
const SPECIAL = {
|
||||
condition: (action, selected, select, update) => {
|
||||
return {
|
||||
icon: ICONS["condition"],
|
||||
clickCallback: () => select([1], action, update),
|
||||
children: [
|
||||
{
|
||||
icon: ICONS["TRUE"],
|
||||
clickCallback: () => select([2], action, update),
|
||||
styles: selected[0]
|
||||
? "stroke: orange;"
|
||||
: undefined,
|
||||
},
|
||||
{
|
||||
icon: ICONS["FALSE"],
|
||||
end: false,
|
||||
clickCallback: () => select([3], action, update),
|
||||
styles: selected[0]
|
||||
? "stroke: orange;"
|
||||
: undefined,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
repeat: (action, selected, select, update) => {
|
||||
let seq = action.repeat.sequence;
|
||||
if(!seq || !seq.length) seq = [{}];
|
||||
const seqHandler = new ActionHandler(seq);
|
||||
if(selected[0] !== undefined && selected[0] !== -1)
|
||||
seqHandler.selected = selected;
|
||||
seqHandler.selectCallback = select;
|
||||
seqHandler.updateCallback = (a) => {
|
||||
action.repeat["sequence"] = a;
|
||||
update(action);
|
||||
}
|
||||
|
||||
return {
|
||||
icon: ICONS["repeat"],
|
||||
clickCallback: () => select([-1], action, update),
|
||||
children: [
|
||||
{
|
||||
icon: ICONS["repeatReturn"],
|
||||
clickCallback: () => select([-1], action, update),
|
||||
styles: selected[0] === -1
|
||||
? "stroke: orange;"
|
||||
: undefined,
|
||||
},
|
||||
seqHandler.graph,
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
choose: (action, selected, select, update) => {
|
||||
|
||||
let def = action.default || [{}];
|
||||
const defaultHandler = new ActionHandler(def);
|
||||
if(selected[0] === -2)
|
||||
defaultHandler.selected = selected.slice(1);
|
||||
defaultHandler.selectCallback = (i, a, u) => {
|
||||
select( [-2].concat(i), a, u);
|
||||
};
|
||||
defaultHandler.updateCallback = (a) => {
|
||||
action.default = defaultHandler.actions;
|
||||
update(action);
|
||||
};
|
||||
|
||||
|
||||
return {
|
||||
icon: ICONS["choose"],
|
||||
clickCallback: () => select([-1], action, update),
|
||||
children: [
|
||||
...action.choose.map((b,idx) => {
|
||||
const handler = new ActionHandler(b.sequence || [{}]);
|
||||
if(selected[0] === idx)
|
||||
handler.selected = selected.slice(1);
|
||||
handler.selectCallback = (i, a, u) => {
|
||||
select([idx].concat(i), a, u);
|
||||
};
|
||||
handler.updateCallback = (a) => {
|
||||
b.sequence = handler.actions;
|
||||
action.choose[idx] = b;
|
||||
update(action);
|
||||
};
|
||||
|
||||
return [
|
||||
{
|
||||
icon: ICONS["chooseChoice"],
|
||||
clickCallback: () => select([idx], b, (a) => {
|
||||
action.choose[idx] = a;
|
||||
update(action);
|
||||
}),
|
||||
styles: selected[0] === idx
|
||||
? "stroke: orange;"
|
||||
: undefined,
|
||||
},
|
||||
handler.graph,
|
||||
];
|
||||
|
||||
}),
|
||||
|
||||
[
|
||||
{
|
||||
icon: ICONS["chooseDefault"],
|
||||
clickCallback: () => select([-2], def, (a) => {
|
||||
action.default = a;
|
||||
update(action);
|
||||
}),
|
||||
styles: selected[0] === -2
|
||||
? "stroke: orange;"
|
||||
: undefined,
|
||||
},
|
||||
defaultHandler.graph,
|
||||
]
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
interface NoAction {
|
||||
}
|
||||
|
||||
export class ActionHandler {
|
||||
_actions: (Action | NoAction)[] = [];
|
||||
updateCallback = null;
|
||||
selectCallback = null;
|
||||
selected: number[] = [];
|
||||
|
||||
constructor(actions: (Action | NoAction)[] = []) {
|
||||
this._actions = actions;
|
||||
}
|
||||
|
||||
set actions(actions) {
|
||||
this._actions = actions;
|
||||
}
|
||||
|
||||
get actions() {
|
||||
if(!this._actions.length) this._actions = [{}];
|
||||
return this._actions;
|
||||
}
|
||||
|
||||
get graph() {
|
||||
return this.actions.map((action, idx) => this._make_graph_node(idx, action));
|
||||
}
|
||||
|
||||
_update_action(idx: number, action) {
|
||||
if(action === null)
|
||||
this.actions.splice(idx, 1);
|
||||
else
|
||||
this.actions[idx] = action;
|
||||
if (this.updateCallback)
|
||||
this.updateCallback(this.actions);
|
||||
}
|
||||
|
||||
_add_action(idx: number) {
|
||||
this.actions.splice(idx, 0, {});
|
||||
if (this.updateCallback)
|
||||
this.updateCallback(this.actions);
|
||||
this._select_node([idx], {}, (a) =>this._update_action(idx, a));
|
||||
}
|
||||
|
||||
_select_node(path: number[], action, update=null) {
|
||||
this.selected = path;
|
||||
if (this.selectCallback)
|
||||
this.selectCallback(path, action, update);
|
||||
}
|
||||
|
||||
_make_graph_node(idx: number, action): TreeNode {
|
||||
let _type = "yaml";
|
||||
if (Object.keys(action).length === 0)
|
||||
_type = "new";
|
||||
else
|
||||
_type = OPTIONS.find((option) => option in action) || "YAML";
|
||||
|
||||
const selected = this.selected.length >= 1 && this.selected[0] == idx;
|
||||
let node: TreeNode = {icon: ""};
|
||||
|
||||
if (_type in SPECIAL) {
|
||||
node = SPECIAL[_type](
|
||||
action,
|
||||
selected ? this.selected.slice(1): [],
|
||||
(i, a, u) => this._select_node([idx].concat(i), a, u),
|
||||
(a) => this._update_action(idx, a),
|
||||
);
|
||||
} else {
|
||||
node = {
|
||||
icon: ICONS[_type],
|
||||
clickCallback: () => {
|
||||
this._select_node(
|
||||
[idx],
|
||||
action,
|
||||
(a) => this._update_action(idx, a)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
...node,
|
||||
addCallback: () => this._add_action(idx+1),
|
||||
styles: selected
|
||||
? "stroke: orange"
|
||||
: _type === "new"
|
||||
? "stroke: lightgreen;"
|
||||
: undefined,
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
70
src/types.ts
70
src/types.ts
@ -1,70 +0,0 @@
|
||||
export interface Condition {
|
||||
condition: string;
|
||||
}
|
||||
|
||||
export interface EventAction {
|
||||
event: string;
|
||||
event_data?: { [key: string]: any };
|
||||
event_data_template?: { [key: string]: any };
|
||||
}
|
||||
|
||||
export interface ServiceAction {
|
||||
service: string;
|
||||
entity_id?: string;
|
||||
data?: { [key: string]: any };
|
||||
}
|
||||
|
||||
export interface DeviceAction {
|
||||
device_id: string;
|
||||
domain: string;
|
||||
entity_id: string;
|
||||
}
|
||||
|
||||
export interface DelayAction {
|
||||
delay: number;
|
||||
}
|
||||
|
||||
export interface SceneAction {
|
||||
scene: string;
|
||||
}
|
||||
|
||||
export interface WaitAction {
|
||||
wait_template: string;
|
||||
timeout?: number;
|
||||
}
|
||||
|
||||
export interface RepeatAction {
|
||||
repeat: CountRepeat | WhileRepeat | UntilRepeat;
|
||||
}
|
||||
|
||||
interface BaseRepeat {
|
||||
sequence: Action[];
|
||||
}
|
||||
|
||||
export interface CountRepeat extends BaseRepeat {
|
||||
count: number;
|
||||
}
|
||||
|
||||
export interface WhileRepeat extends BaseRepeat {
|
||||
while: Condition[];
|
||||
}
|
||||
|
||||
export interface UntilRepeat extends BaseRepeat {
|
||||
until: Condition[];
|
||||
}
|
||||
|
||||
export interface ChooseAction {
|
||||
choose: [{ conditions: Condition[]; sequence: Action[] }];
|
||||
default?: Action[];
|
||||
}
|
||||
|
||||
export type Action =
|
||||
| EventAction
|
||||
| DeviceAction
|
||||
| ServiceAction
|
||||
| Condition
|
||||
| DelayAction
|
||||
| SceneAction
|
||||
| WaitAction
|
||||
| RepeatAction
|
||||
| ChooseAction;
|
||||
Loading…
x
Reference in New Issue
Block a user