From 65d391e050115938483daa33bb9f4d98775b6741 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= Date: Tue, 9 Mar 2021 15:07:31 +0100 Subject: [PATCH] Comitt of all things done before I forgot about it. beginnings of a restructuring, I think... --- example.html | 5 ++ src/main.js | 4 ++ src/script-graph.ts | 4 +- src/script-graph3.ts | 110 +++++++++++++++++++++++++++++++++++++++++ src/script-to-graph.ts | 35 ++++++++----- src/types.ts | 70 ++++++++++++++++++++++++++ 6 files changed, 213 insertions(+), 15 deletions(-) create mode 100644 src/script-graph3.ts create mode 100644 src/types.ts diff --git a/example.html b/example.html index 2e2c5dc..eb3cd3b 100644 --- a/example.html +++ b/example.html @@ -35,6 +35,11 @@
+
+ + + +

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` + + ${this.content.map(e => + svg` + + ${e.svg} + + `)} + + + + ` + } + +} +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;