+
+
+
+
+
Selected node code
diff --git a/src/main.js b/src/main.js
index 4b752ea..e2e48e7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,6 +2,7 @@ import {demoConfig} from "./demo-config";
import "@vanillawc/wc-codemirror";
import "./script-graph";
+import "./script-graph3";
import { ActionHandler } from "./script-to-graph";
@@ -12,6 +13,9 @@ let nodes = [];
window.onload = () => {
+ const graph2 = document.createElement("script-graph3");
+ document.querySelector("#graph2").appendChild(graph2);
+
let src = demoConfig;
const fullcode = document.querySelector("#fullcode");
diff --git a/src/script-graph.ts b/src/script-graph.ts
index b01bd79..6f2095f 100644
--- a/src/script-graph.ts
+++ b/src/script-graph.ts
@@ -11,9 +11,9 @@ import { mdiPlus } from "@mdi/js";
const SIZE = 35;
const DIST = 20;
-interface TreeNode {
+export interface TreeNode {
icon: String;
- styles: String;
+ styles?: String;
end?: Boolean;
children?: (TreeNode | TreeNode[])[];
clickCallback?: any;
diff --git a/src/script-graph3.ts b/src/script-graph3.ts
new file mode 100644
index 0000000..392e5e8
--- /dev/null
+++ b/src/script-graph3.ts
@@ -0,0 +1,110 @@
+import {
+ LitElement,
+ html,
+ css,
+ svg,
+ property,
+ TemplateResult
+} from "lit-element";
+
+import { mdiAsterisk } from "@mdi/js";
+
+const SIZE = 35;
+const DIST = 20;
+
+interface GraphNode extends LitElement{
+ render_svg(): TemplateResult;
+ width: number;
+ height: number;
+}
+
+class ScriptGraphNode extends LitElement {
+
+ @property() icon = mdiAsterisk;
+
+ get width() {
+ return SIZE;
+ }
+ get height() {
+ return SIZE + DIST;
+ }
+
+ render_svg() {
+ return svg`
+
+
+
+ `
+ }
+
+}
+
+class ScriptGraph3 extends LitElement {
+
+ @property() content = [];
+ @property() _width = 0;
+ @property() _height = 0;
+
+ connectedCallback() {
+ super.connectedCallback();
+ console.log(this.querySelectorAll('*'))
+
+ }
+
+ async updateChildren() {
+ this.content = [];
+ let y = 0;
+ let w = 0;
+ for (const e of this.querySelectorAll('*') as NodeListOf) {
+ this.content.push({
+ svg: e.render_svg(),
+ offset_y: y,
+ });
+ y += e.height;
+ w = Math.max(w, e.width);
+ }
+ this._width = w;
+ this._height = y;
+ this.requestUpdate();
+ }
+
+ childrenChangedCallback() {
+ console.log("Children changed");
+ }
+
+ render() {
+
+
+ let y = 0;
+ let nodes = [];
+ for (const e of this.content) {
+
+ }
+
+ return html`
+
+
+
+ `
+ }
+
+}
+customElements.define("script-graph3", ScriptGraph3);
+customElements.define("script-graph-node", ScriptGraphNode);
diff --git a/src/script-to-graph.ts b/src/script-to-graph.ts
index cbbe9eb..200c0f3 100644
--- a/src/script-to-graph.ts
+++ b/src/script-to-graph.ts
@@ -32,6 +32,9 @@ const ICONS = {
YAML: mdiCodeJson,
};
+import { TreeNode} from "./script-graph";
+import { Action } from "./types";
+
const OPTIONS = [
"condition",
"delay",
@@ -44,10 +47,14 @@ const OPTIONS = [
"choose",
];
+interface NodeHandler {
+ (action, selected: any[], select, update): TreeNode;
+}
+
const SPECIAL = {
condition: (action, selected, select, update) => {
return {
- icon: ICONS["choose"],
+ icon: ICONS["condition"],
clickCallback: () => select([1], action, update),
children: [
{
@@ -164,13 +171,16 @@ const SPECIAL = {
};
+interface NoAction {
+}
+
export class ActionHandler {
- _actions = [];
+ _actions: (Action | NoAction)[] = [];
updateCallback = null;
selectCallback = null;
- selected = [];
+ selected: number[] = [];
- constructor(actions = []) {
+ constructor(actions: (Action | NoAction)[] = []) {
this._actions = actions;
}
@@ -184,10 +194,10 @@ export class ActionHandler {
}
get graph() {
- return this.actions.map((_, idx) => this._make_graph_node(idx));
+ return this.actions.map((action, idx) => this._make_graph_node(idx, action));
}
- _update_action(idx, action) {
+ _update_action(idx: number, action) {
if(action === null)
this.actions.splice(idx, 1);
else
@@ -196,21 +206,20 @@ export class ActionHandler {
this.updateCallback(this.actions);
}
- _add_action(idx) {
+ _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(idx, action, update=null) {
- this.selected = idx;
+ _select_node(path: number[], action, update=null) {
+ this.selected = path;
if (this.selectCallback)
- this.selectCallback(idx, action, update);
+ this.selectCallback(path, action, update);
}
- _make_graph_node(idx) {
- const action = this.actions[idx] || {};
+ _make_graph_node(idx: number, action): TreeNode {
let _type = "yaml";
if (Object.keys(action).length === 0)
_type = "new";
@@ -218,7 +227,7 @@ export class ActionHandler {
_type = OPTIONS.find((option) => option in action) || "YAML";
const selected = this.selected.length >= 1 && this.selected[0] == idx;
- let node = {};
+ let node: TreeNode = {icon: ""};
if (_type in SPECIAL) {
node = SPECIAL[_type](
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..2881f17
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,70 @@
+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;