Traces and triggers

.devcontainer/Dockerfile

@@ -0,0 +1,16 @@
+# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.163.1/containers/javascript-node/.devcontainer/base.Dockerfile
+
+# [Choice] Node.js version: 14, 12, 10
+ARG VARIANT="14-buster"
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
+
+# [Optional] Uncomment this section to install additional OS packages.
+# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+#     && apt-get -y install --no-install-recommends <your-package-list-here>
+
+# [Optional] Uncomment if you want to install an additional version of node using nvm
+# ARG EXTRA_NODE_VERSION=10
+# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
+
+# [Optional] Uncomment if you want to install more global node modules
+# RUN su node -c "npm install -g <your-package-list-here>"

.devcontainer/devcontainer.json

@@ -0,0 +1,29 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.163.1/containers/javascript-node
+{
+	"name": "Node.js",
+	"build": {
+		"dockerfile": "Dockerfile",
+		// Update 'VARIANT' to pick a Node version: 10, 12, 14
+		"args": { "VARIANT": "14" }
+	},
+
+	// Set *default* container specific settings.json values on container create.
+	"settings": { 
+		"terminal.integrated.shell.linux": "/bin/bash"
+	},
+
+	// Add the IDs of extensions you want installed when the container is created.
+	"extensions": [
+		"dbaeumer.vscode-eslint"
+	],
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "yarn install",
+
+	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+	"remoteUser": "node"
+}

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080/index.html",
+            "webRoot": "${workspaceFolder}",
+            "trace": true
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+    "files.eol": "\n",
+      "editor.tabSize": 2,
+      "editor.formatOnPaste": false,
+      "editor.formatOnSave": true,
+      "editor.formatOnType": true,
+      "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+      },
+      "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+      },
+      "files.trimTrailingWhitespace": true
+}

.vscode/tasks.json

@@ -0,0 +1,31 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "npm: build",
+      "type": "npm",
+      "script": "build",
+      "problemMatcher": []
+    },
+    {
+      "label": "npm: watch",
+      "type": "npm",
+      "script": "watch",
+      "problemMatcher": [],
+      "presentation": {
+        "panel": "shared",
+        "group": "test"
+      }
+    },
+    {
+      "label": "npm: serve",
+      "type": "npm",
+      "script": "serve",
+      "problemMatcher": [],
+      "presentation": {
+        "panel": "shared",
+        "group": "test"
+      }
+    }
+  ]
+}

DragDropTouch.js

@@ -0,0 +1,447 @@
+var DragDropTouch;
+(function (DragDropTouch_1) {
+    'use strict';
+    /**
+     * Object used to hold the data that is being dragged during drag and drop operations.
+     *
+     * It may hold one or more data items of different types. For more information about
+     * drag and drop operations and data transfer objects, see
+     * <a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer">HTML Drag and Drop API</a>.
+     *
+     * This object is created automatically by the @see:DragDropTouch singleton and is
+     * accessible through the @see:dataTransfer property of all drag events.
+     */
+    var DataTransfer = (function () {
+        function DataTransfer() {
+            this._dropEffect = 'move';
+            this._effectAllowed = 'all';
+            this._data = {};
+        }
+        Object.defineProperty(DataTransfer.prototype, "dropEffect", {
+            /**
+             * Gets or sets the type of drag-and-drop operation currently selected.
+             * The value must be 'none',  'copy',  'link', or 'move'.
+             */
+            get: function () {
+                return this._dropEffect;
+            },
+            set: function (value) {
+                this._dropEffect = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(DataTransfer.prototype, "effectAllowed", {
+            /**
+             * Gets or sets the types of operations that are possible.
+             * Must be one of 'none', 'copy', 'copyLink', 'copyMove', 'link',
+             * 'linkMove', 'move', 'all' or 'uninitialized'.
+             */
+            get: function () {
+                return this._effectAllowed;
+            },
+            set: function (value) {
+                this._effectAllowed = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(DataTransfer.prototype, "types", {
+            /**
+             * Gets an array of strings giving the formats that were set in the @see:dragstart event.
+             */
+            get: function () {
+                return Object.keys(this._data);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * Removes the data associated with a given type.
+         *
+         * The type argument is optional. If the type is empty or not specified, the data
+         * associated with all types is removed. If data for the specified type does not exist,
+         * or the data transfer contains no data, this method will have no effect.
+         *
+         * @param type Type of data to remove.
+         */
+        DataTransfer.prototype.clearData = function (type) {
+            if (type != null) {
+                delete this._data[type];
+            }
+            else {
+                this._data = null;
+            }
+        };
+        /**
+         * Retrieves the data for a given type, or an empty string if data for that type does
+         * not exist or the data transfer contains no data.
+         *
+         * @param type Type of data to retrieve.
+         */
+        DataTransfer.prototype.getData = function (type) {
+            return this._data[type] || '';
+        };
+        /**
+         * Set the data for a given type.
+         *
+         * For a list of recommended drag types, please see
+         * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Recommended_Drag_Types.
+         *
+         * @param type Type of data to add.
+         * @param value Data to add.
+         */
+        DataTransfer.prototype.setData = function (type, value) {
+            this._data[type] = value;
+        };
+        /**
+         * Set the image to be used for dragging if a custom one is desired.
+         *
+         * @param img An image element to use as the drag feedback image.
+         * @param offsetX The horizontal offset within the image.
+         * @param offsetY The vertical offset within the image.
+         */
+        DataTransfer.prototype.setDragImage = function (img, offsetX, offsetY) {
+            var ddt = DragDropTouch._instance;
+            ddt._imgCustom = img;
+            ddt._imgOffset = { x: offsetX, y: offsetY };
+        };
+        return DataTransfer;
+    }());
+    DragDropTouch_1.DataTransfer = DataTransfer;
+    /**
+     * Defines a class that adds support for touch-based HTML5 drag/drop operations.
+     *
+     * The @see:DragDropTouch class listens to touch events and raises the
+     * appropriate HTML5 drag/drop events as if the events had been caused
+     * by mouse actions.
+     *
+     * The purpose of this class is to enable using existing, standard HTML5
+     * drag/drop code on mobile devices running IOS or Android.
+     *
+     * To use, include the DragDropTouch.js file on the page. The class will
+     * automatically start monitoring touch events and will raise the HTML5
+     * drag drop events (dragstart, dragenter, dragleave, drop, dragend) which
+     * should be handled by the application.
+     *
+     * For details and examples on HTML drag and drop, see
+     * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations.
+     */
+    var DragDropTouch = (function () {
+        /**
+         * Initializes the single instance of the @see:DragDropTouch class.
+         */
+        function DragDropTouch() {
+            this._lastClick = 0;
+            // enforce singleton pattern
+            if (DragDropTouch._instance) {
+                throw 'DragDropTouch instance already created.';
+            }
+            // detect passive event support
+            // https://github.com/Modernizr/Modernizr/issues/1894
+            var supportsPassive = false;
+            document.addEventListener('test', function () { }, {
+                get passive() {
+                    supportsPassive = true;
+                    return true;
+                }
+            });
+            // listen to touch events
+            if ('ontouchstart' in document) {
+                var d = document, ts = this._touchstart.bind(this), tm = this._touchmove.bind(this), te = this._touchend.bind(this), opt = supportsPassive ? { passive: false, capture: false } : false;
+                d.addEventListener('touchstart', ts, opt);
+                d.addEventListener('touchmove', tm, opt);
+                d.addEventListener('touchend', te);
+                d.addEventListener('touchcancel', te);
+            }
+        }
+        /**
+         * Gets a reference to the @see:DragDropTouch singleton.
+         */
+        DragDropTouch.getInstance = function () {
+            return DragDropTouch._instance;
+        };
+        // ** event handlers
+        DragDropTouch.prototype._touchstart = function (e) {
+            var _this = this;
+            if (this._shouldHandle(e)) {
+                // raise double-click and prevent zooming
+                if (Date.now() - this._lastClick < DragDropTouch._DBLCLICK) {
+                    if (this._dispatchEvent(e, 'dblclick', e.target)) {
+                        e.preventDefault();
+                        this._reset();
+                        return;
+                    }
+                }
+                // clear all variables
+                this._reset();
+                // get nearest draggable element
+                var src = this._closestDraggable(e.target);
+                if (src) {
+                    // give caller a chance to handle the hover/move events
+                    if (!this._dispatchEvent(e, 'mousemove', e.target) &&
+                        !this._dispatchEvent(e, 'mousedown', e.target)) {
+                        // get ready to start dragging
+                        this._dragSource = src;
+                        this._ptDown = this._getPoint(e);
+                        this._lastTouch = e;
+                        e.preventDefault();
+                        // show context menu if the user hasn't started dragging after a while
+                        setTimeout(function () {
+                            if (_this._dragSource == src && _this._img == null) {
+                                if (_this._dispatchEvent(e, 'contextmenu', src)) {
+                                    _this._reset();
+                                }
+                            }
+                        }, DragDropTouch._CTXMENU);
+                        if (DragDropTouch._ISPRESSHOLDMODE) {
+                            this._pressHoldInterval = setTimeout(function () {
+                                _this._isDragEnabled = true;
+                                _this._touchmove(e);
+                            }, DragDropTouch._PRESSHOLDAWAIT);
+                        }
+                    }
+                }
+            }
+        };
+        DragDropTouch.prototype._touchmove = function (e) {
+            if (this._shouldCancelPressHoldMove(e)) {
+              this._reset();
+              return;
+            }
+            if (this._shouldHandleMove(e) || this._shouldHandlePressHoldMove(e)) {
+                // see if target wants to handle move
+                var target = this._getTarget(e);
+                if (this._dispatchEvent(e, 'mousemove', target)) {
+                    this._lastTouch = e;
+                    e.preventDefault();
+                    return;
+                }
+                // start dragging
+                if (this._dragSource && !this._img && this._shouldStartDragging(e)) {
+                    this._dispatchEvent(e, 'dragstart', this._dragSource);
+                    this._createImage(e);
+                    this._dispatchEvent(e, 'dragenter', target);
+                }
+                // continue dragging
+                if (this._img) {
+                    this._lastTouch = e;
+                    e.preventDefault(); // prevent scrolling
+                    if (target != this._lastTarget) {
+                        this._dispatchEvent(this._lastTouch, 'dragleave', this._lastTarget);
+                        this._dispatchEvent(e, 'dragenter', target);
+                        this._lastTarget = target;
+                    }
+                    this._moveImage(e);
+                    this._isDropZone = this._dispatchEvent(e, 'dragover', target);
+                }
+            }
+        };
+        DragDropTouch.prototype._touchend = function (e) {
+            if (this._shouldHandle(e)) {
+                // see if target wants to handle up
+                if (this._dispatchEvent(this._lastTouch, 'mouseup', e.target)) {
+                    e.preventDefault();
+                    return;
+                }
+                // user clicked the element but didn't drag, so clear the source and simulate a click
+                if (!this._img) {
+                    this._dragSource = null;
+                    this._dispatchEvent(this._lastTouch, 'click', e.target);
+                    this._lastClick = Date.now();
+                }
+                // finish dragging
+                this._destroyImage();
+                if (this._dragSource) {
+                    if (e.type.indexOf('cancel') < 0 && this._isDropZone) {
+                        this._dispatchEvent(this._lastTouch, 'drop', this._lastTarget);
+                    }
+                    this._dispatchEvent(this._lastTouch, 'dragend', this._dragSource);
+                    this._reset();
+                }
+            }
+        };
+        // ** utilities
+        // ignore events that have been handled or that involve more than one touch
+        DragDropTouch.prototype._shouldHandle = function (e) {
+            return e &&
+                !e.defaultPrevented &&
+                e.touches && e.touches.length < 2;
+        };
+
+        // use regular condition outside of press & hold mode
+        DragDropTouch.prototype._shouldHandleMove = function (e) {
+          return !DragDropTouch._ISPRESSHOLDMODE && this._shouldHandle(e);
+        };
+
+        // allow to handle moves that involve many touches for press & hold
+        DragDropTouch.prototype._shouldHandlePressHoldMove = function (e) {
+          return DragDropTouch._ISPRESSHOLDMODE &&
+              this._isDragEnabled && e && e.touches && e.touches.length;
+        };
+
+        // reset data if user drags without pressing & holding
+        DragDropTouch.prototype._shouldCancelPressHoldMove = function (e) {
+          return DragDropTouch._ISPRESSHOLDMODE && !this._isDragEnabled &&
+              this._getDelta(e) > DragDropTouch._PRESSHOLDMARGIN;
+        };
+
+        // start dragging when specified delta is detected
+        DragDropTouch.prototype._shouldStartDragging = function (e) {
+            var delta = this._getDelta(e);
+            return delta > DragDropTouch._THRESHOLD ||
+                (DragDropTouch._ISPRESSHOLDMODE && delta >= DragDropTouch._PRESSHOLDTHRESHOLD);
+        }
+
+        // clear all members
+        DragDropTouch.prototype._reset = function () {
+            this._destroyImage();
+            this._dragSource = null;
+            this._lastTouch = null;
+            this._lastTarget = null;
+            this._ptDown = null;
+            this._isDragEnabled = false;
+            this._isDropZone = false;
+            this._dataTransfer = new DataTransfer();
+            clearInterval(this._pressHoldInterval);
+        };
+        // get point for a touch event
+        DragDropTouch.prototype._getPoint = function (e, page) {
+            if (e && e.touches) {
+                e = e.touches[0];
+            }
+            return { x: page ? e.pageX : e.clientX, y: page ? e.pageY : e.clientY };
+        };
+        // get distance between the current touch event and the first one
+        DragDropTouch.prototype._getDelta = function (e) {
+            if (DragDropTouch._ISPRESSHOLDMODE && !this._ptDown) { return 0; }
+            var p = this._getPoint(e);
+            return Math.abs(p.x - this._ptDown.x) + Math.abs(p.y - this._ptDown.y);
+        };
+        // get the element at a given touch event
+        DragDropTouch.prototype._getTarget = function (e) {
+            var pt = this._getPoint(e), el = document.elementFromPoint(pt.x, pt.y);
+            while (el && getComputedStyle(el).pointerEvents == 'none') {
+                el = el.parentElement;
+            }
+            return el;
+        };
+        // create drag image from source element
+        DragDropTouch.prototype._createImage = function (e) {
+            // just in case...
+            if (this._img) {
+                this._destroyImage();
+            }
+            // create drag image from custom element or drag source
+            var src = this._imgCustom || this._dragSource;
+            this._img = src.cloneNode(true);
+            this._copyStyle(src, this._img);
+            this._img.style.top = this._img.style.left = '-9999px';
+            // if creating from drag source, apply offset and opacity
+            if (!this._imgCustom) {
+                var rc = src.getBoundingClientRect(), pt = this._getPoint(e);
+                this._imgOffset = { x: pt.x - rc.left, y: pt.y - rc.top };
+                this._img.style.opacity = DragDropTouch._OPACITY.toString();
+            }
+            // add image to document
+            this._moveImage(e);
+            document.body.appendChild(this._img);
+        };
+        // dispose of drag image element
+        DragDropTouch.prototype._destroyImage = function () {
+            if (this._img && this._img.parentElement) {
+                this._img.parentElement.removeChild(this._img);
+            }
+            this._img = null;
+            this._imgCustom = null;
+        };
+        // move the drag image element
+        DragDropTouch.prototype._moveImage = function (e) {
+            var _this = this;
+            requestAnimationFrame(function () {
+                if (_this._img) {
+                    var pt = _this._getPoint(e, true), s = _this._img.style;
+                    s.position = 'absolute';
+                    s.pointerEvents = 'none';
+                    s.zIndex = '999999';
+                    s.left = Math.round(pt.x - _this._imgOffset.x) + 'px';
+                    s.top = Math.round(pt.y - _this._imgOffset.y) + 'px';
+                }
+            });
+        };
+        // copy properties from an object to another
+        DragDropTouch.prototype._copyProps = function (dst, src, props) {
+            for (var i = 0; i < props.length; i++) {
+                var p = props[i];
+                dst[p] = src[p];
+            }
+        };
+        DragDropTouch.prototype._copyStyle = function (src, dst) {
+            // remove potentially troublesome attributes
+            DragDropTouch._rmvAtts.forEach(function (att) {
+                dst.removeAttribute(att);
+            });
+            // copy canvas content
+            if (src instanceof HTMLCanvasElement) {
+                var cSrc = src, cDst = dst;
+                cDst.width = cSrc.width;
+                cDst.height = cSrc.height;
+                cDst.getContext('2d').drawImage(cSrc, 0, 0);
+            }
+            // copy style (without transitions)
+            var cs = getComputedStyle(src);
+            for (var i = 0; i < cs.length; i++) {
+                var key = cs[i];
+                if (key.indexOf('transition') < 0) {
+                    dst.style[key] = cs[key];
+                }
+            }
+            dst.style.pointerEvents = 'none';
+            // and repeat for all children
+            for (var i = 0; i < src.children.length; i++) {
+                this._copyStyle(src.children[i], dst.children[i]);
+            }
+        };
+        DragDropTouch.prototype._dispatchEvent = function (e, type, target) {
+            if (e && target) {
+                var evt = document.createEvent('Event'), t = e.touches ? e.touches[0] : e;
+                evt.initEvent(type, true, true);
+                evt.button = 0;
+                evt.which = evt.buttons = 1;
+                this._copyProps(evt, e, DragDropTouch._kbdProps);
+                this._copyProps(evt, t, DragDropTouch._ptProps);
+                evt.dataTransfer = this._dataTransfer;
+                target.dispatchEvent(evt);
+                return evt.defaultPrevented;
+            }
+            return false;
+        };
+        // gets an element's closest draggable ancestor
+        DragDropTouch.prototype._closestDraggable = function (e) {
+            for (; e; e = e.parentElement) {
+                if (e.hasAttribute('draggable') && e.draggable) {
+                    return e;
+                }
+            }
+            return null;
+        };
+        return DragDropTouch;
+    }());
+    /*private*/ DragDropTouch._instance = new DragDropTouch(); // singleton
+    // constants
+    DragDropTouch._THRESHOLD = 5; // pixels to move before drag starts
+    DragDropTouch._OPACITY = 0.5; // drag image opacity
+    DragDropTouch._DBLCLICK = 500; // max ms between clicks in a double click
+    DragDropTouch._CTXMENU = 900; // ms to hold before raising 'contextmenu' event
+    DragDropTouch._ISPRESSHOLDMODE = false; // decides of press & hold mode presence
+    DragDropTouch._PRESSHOLDAWAIT = 400; // ms to wait before press & hold is detected
+    DragDropTouch._PRESSHOLDMARGIN = 25; // pixels that finger might shiver while pressing
+    DragDropTouch._PRESSHOLDTHRESHOLD = 0; // pixels to move before drag starts
+    // copy styles/attributes from drag source to drag image element
+    DragDropTouch._rmvAtts = 'id,class,style,draggable'.split(',');
+    // synthesize and dispatch an event
+    // returns true if the event has been handled (e.preventDefault == true)
+    DragDropTouch._kbdProps = 'altKey,ctrlKey,metaKey,shiftKey'.split(',');
+    DragDropTouch._ptProps = 'pageX,pageY,clientX,clientY,screenX,screenY,offsetX,offsetY'.split(',');
+    DragDropTouch_1.DragDropTouch = DragDropTouch;
+})(DragDropTouch || (DragDropTouch = {}));

example.html

@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Script graph demo</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.14.0/js-yaml.min.js"></script>
-    <script src="index.js" type="module"></script>
-  </head>
-  <body style="margin: 24px">
-  <style>
-    div.card {
-      display: inline-block;
-      box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
-          0px 1px 1px 0px rgba(0, 0, 0, 0.14),
-          0px 1px 3px 0px rgba(0, 0, 0, 0.12);
-      padding: 16px;
-      font-family: Roboto, Noto, sans-serif;
-      font-size: 14px;
-      vertical-align: top;
-    }
-    code {
-      display: block;
-      white-space: pre-wrap;
-    }
-    #graph {
-      max-width: 400px;
-      overflow: auto;
-    }
-    .code {
-      max-height: 800px;
-      width: 400px;
-      overflow: auto;
-      vertical-align: top;
-    }
-  </style>
-    <div>
-      <div class="card" id="graph">
-      </div>
-      <div class="card" id="graph2">
-        <script-graph3>
-          <script-graph-node></script-graph-node>
-        </script-graph3>
-      </div>
-      <div class="card code">
-        <h1> Selected node code </h1>
-        <wc-codemirror mode="json" id="snippet">
-        </wc-codemirror>
-        <button id="saveSnippet">Save</button>
-        <button id="deleteSnippet">Delete</button>
-      </div>
-      <div class="card code">
-        <h1>Full script code</h1>
-        <wc-codemirror mode="yaml" id="fullcode">
-        </wc-codemirror>
-        <button id="updateButton">Update</button>
-      </div>
-    </div>
-  </body>
-</html>

index.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Script graph demo</title>
+    <script src="index.js" type="module" defer></script>
+  </head>
+  <body style="margin: 24px">
+  <style>
+    div.card {
+      display: inline-block;
+      box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+          0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+          0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+      padding: 16px;
+      font-family: Roboto, Noto, sans-serif;
+      font-size: 14px;
+      vertical-align: top;
+    }
+    code {
+      display: block;
+      white-space: pre-wrap;
+    }
+    #graph {
+      max-width: 600px;
+      overflow: auto;
+    }
+    .code {
+      max-height: 800px;
+      width: 400px;
+      overflow: auto;
+      vertical-align: top;
+    }
+  </style>
+    <div>
+      <div class="card" id="graph">
+      </div>
+      <div style="display: inline-flex; flex-direction: column;">
+        <div class="card code" id="snippet">
+          <h1> Selected node code </h1>
+          <wc-codemirror mode="yaml">
+          </wc-codemirror>
+          <div><b>Path: </b><span id="nodepath"></span></div>
+          <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 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>
+        <wc-codemirror mode="yaml">
+        </wc-codemirror>
+        <button>Update</button>
+      </div>
+    </div>
+  </body>
+</html>

package-lock.json

@@ -70,24 +70,99 @@
       "resolved": "https://registry.npmjs.org/@vanillawc/wc-codemirror/-/wc-codemirror-1.8.10.tgz",
       "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": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
+      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.14"
+      }
+    },
+    "basic-auth": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-1.1.0.tgz",
+      "integrity": "sha1-RSIe5Cn37h5QNb4/UVM/HN/SmIQ=",
+      "dev": true
+    },
     "builtin-modules": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz",
       "integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==",
       "dev": true
     },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
+    "colors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
+      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
+      "dev": true
+    },
+    "corser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
+      "integrity": "sha1-jtolLsqrWEDc2XXOuQ2TcMgZ/4c=",
+      "dev": true
+    },
+    "debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "requires": {
+        "ms": "^2.1.1"
+      }
+    },
     "deepmerge": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
       "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
       "dev": true
     },
+    "ecstatic": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/ecstatic/-/ecstatic-3.3.2.tgz",
+      "integrity": "sha512-fLf9l1hnwrHI2xn9mEDT7KIi22UDqA2jaCwyCbSUJh9a1V+LEUSL/JO/6TIz/QyuBURWUHrFL5Kg2TtO1bkkog==",
+      "dev": true,
+      "requires": {
+        "he": "^1.1.1",
+        "mime": "^1.6.0",
+        "minimist": "^1.1.0",
+        "url-join": "^2.0.5"
+      }
+    },
     "estree-walker": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
       "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
       "dev": true
     },
+    "eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "dev": true
+    },
+    "follow-redirects": {
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.3.tgz",
+      "integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==",
+      "dev": true
+    },
     "fsevents": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
@@ -95,12 +170,87 @@
       "dev": true,
       "optional": true
     },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
+    "get-intrinsic": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      }
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "has-symbols": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
+      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
+      "dev": true
+    },
+    "he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true
+    },
+    "http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "dev": true,
+      "requires": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "http-server": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/http-server/-/http-server-0.12.3.tgz",
+      "integrity": "sha512-be0dKG6pni92bRjq0kvExtj/NrrAd28/8fCXkaI/4piTwQMSDSLMhWyW0NI1V+DBI3aa1HMlQu46/HjVLfmugA==",
+      "dev": true,
+      "requires": {
+        "basic-auth": "^1.0.3",
+        "colors": "^1.4.0",
+        "corser": "^2.0.1",
+        "ecstatic": "^3.3.2",
+        "http-proxy": "^1.18.0",
+        "minimist": "^1.2.5",
+        "opener": "^1.5.1",
+        "portfinder": "^1.0.25",
+        "secure-compare": "3.0.1",
+        "union": "~0.5.0"
+      }
+    },
     "is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
       "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
       "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": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.3.1.tgz",
@@ -114,6 +264,51 @@
       "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.2.1.tgz",
       "integrity": "sha512-GSJHHXMGLZDzTRq59IUfL9FCdAlGfqNp/dEa7k7aBaaWD+JKaCjsAk9KYm2V12ItonVaYx2dprN66Zdm1AuBTQ=="
     },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true
+    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "dev": true
+    },
+    "mkdirp": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
+    "ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
+    },
+    "object-inspect": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz",
+      "integrity": "sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==",
+      "dev": true
+    },
+    "opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true
+    },
     "path-parse": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
@@ -126,6 +321,32 @@
       "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
       "dev": true
     },
+    "portfinder": {
+      "version": "1.0.28",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
+      "integrity": "sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==",
+      "dev": true,
+      "requires": {
+        "async": "^2.6.2",
+        "debug": "^3.1.1",
+        "mkdirp": "^0.5.5"
+      }
+    },
+    "qs": {
+      "version": "6.10.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz",
+      "integrity": "sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==",
+      "dev": true,
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
+    },
+    "requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
+      "dev": true
+    },
     "resolve": {
       "version": "1.17.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
@@ -144,6 +365,23 @@
         "fsevents": "~2.1.2"
       }
     },
+    "secure-compare": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
+      "integrity": "sha1-8aAymzCLIh+uN7mXTz1XjQypmeM=",
+      "dev": true
+    },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
     "tslib": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
@@ -155,6 +393,21 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.2.tgz",
       "integrity": "sha512-e4ERvRV2wb+rRZ/IQeb3jm2VxBsirQLpQhdxplZ2MEzGvDkkMmPglecnNDfSUBivMjP93vRbngYYDQqQ/78bcQ==",
       "dev": true
+    },
+    "union": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
+      "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
+      "dev": true,
+      "requires": {
+        "qs": "^6.4.0"
+      }
+    },
+    "url-join": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-2.0.5.tgz",
+      "integrity": "sha1-WvIvGMBSoACkjXuCxenC4v7tpyg=",
+      "dev": true
     }
   }
 }

package.json

@@ -6,13 +6,15 @@
   "main": "index.js",
   "scripts": {
     "build": "rollup -c",
-    "watch": "rollup -c -w"
+    "watch": "rollup -c --watch",
+    "serve": "http-server ."
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-typescript": "^5.0.2",
+    "http-server": "^0.12.3",
     "rollup": "^2.26.4",
     "tslib": "^2.0.1",
     "typescript": "^4.0.2"
@@ -20,6 +22,7 @@
   "dependencies": {
     "@mdi/js": "^5.5.55",
     "@vanillawc/wc-codemirror": "^1.8.10",
+    "js-yaml": "^4.0.0",
     "lit-element": "^2.3.1"
   }
 }

rollup.config.js

@@ -1,13 +1,11 @@
-import resolve from "@rollup/plugin-node-resolve";
+import nodeResolve from "@rollup/plugin-node-resolve";
 import typescript from "@rollup/plugin-typescript";
 
 export default {
-  input: "./src/main.js",
+  input: "src/main.js",
-  output: [
+  output: {
-    {
     file: "index.js",
-      format: "cjs"
+    format: "es",
-    }
+  },
-  ],
+  plugins: [nodeResolve(), typescript()],
-  plugins: [resolve(), typescript()]
 };

src/demo-config.js

@@ -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",
-            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: {
         entity_id: "group.bedroom",
         brightness: 100,
       },
     },
-  { condition: "state",
+    {
+      condition: "state",
       entity_id: "device_tracker.paulus",
       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: {
         name: "Paulus",
         message: "is waking up",
@@ -65,12 +49,15 @@ export const demoConfig2 = [
         domain: "light",
       },
     },
-  { repeat: {
+    {
+      repeat: {
         count: "5",
         sequence: [
-        { delay: 2
+          {
+            delay: 2,
           },
-        { service: "light.toggle",
+          {
+            service: "light.toggle",
             data: {
               entity_id: "light.bed_light",
             },
@@ -78,30 +65,26 @@ export const demoConfig2 = [
         ],
       },
     },
-  { choose: [
+    {
-      { conditions: [],
+      choose: [
+        {
+          conditions: [],
           sequence: [
             { 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"},
-    ],
     },
-];
+  ],
+};

src/hat-graph/hat-graph-node.ts

@@ -0,0 +1,139 @@
+import { css, LitElement, property, svg } from "lit-element";
+
+const NODE_SIZE = 30;
+const SPACING = 10;
+
+export class HatGraphNode extends LitElement {
+  @property() iconPath?: string;
+  @property({ reflect: true, type: Boolean }) marked?: boolean;
+  @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() {
+    super.connectedCallback();
+    if (!this.hasAttribute("tabindex") && !this.nofocus)
+      this.setAttribute("tabindex", "0");
+  }
+
+  updated() {
+    const svg = this.shadowRoot.querySelector("svg");
+    const bbox = svg.getBBox();
+    const extra_height = this.graphstart ? 2 : 1;
+    const extra_width = SPACING;
+    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}`
+    );
+  }
+
+  render() {
+    return svg`
+    <svg
+    >
+      ${
+        this.graphstart
+          ? ``
+          : svg`
+          <path
+            class="connector"
+            d="
+              M 0 ${-SPACING - NODE_SIZE / 2}
+              L 0 0
+            "
+            line-caps="round"
+          />
+          `
+      }
+    <g class="node">
+      <circle
+        cx="0"
+        cy="0"
+        r="${NODE_SIZE / 2}"
+      />
+      <g
+        style="pointer-events: none"
+        transform="translate(${-12} ${-12})"
+      >
+        ${this.iconPath ? svg`<path d="${this.iconPath}"/>` : ""}
+      </g>
+    </g>
+      </svg>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        --stroke-clr: var(--stroke-color, rgb(3, 169, 244));
+        --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([marked]) {
+        --stroke-clr: var(--marked-clr);
+      }
+      :host([selected]),
+      :host(:focus) {
+        --stroke-clr: var(--selected-clr);
+        outline: none;
+      }
+      :host(:hover) circle {
+        --stroke-clr: var(--hover-clr);
+      }
+      :host([disabled]) circle {
+        stroke: var(--disabled-clr);
+      }
+      :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-width: 2;
+        fill: none;
+      }
+      circle {
+        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));
+        }
+      }
+    `;
+  }
+}
+
+customElements.define("hat-graph-node", HatGraphNode);

src/hat-graph/hat-graph.ts

@@ -0,0 +1,196 @@
+import { css, html, LitElement, property, svg } from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
+
+const BRANCH_HEIGHT = 30;
+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 {
+  @property() _num_items = 0;
+
+  @property({ reflect: true, type: Boolean }) branching?: boolean;
+  @property({ reflect: true, converter: mark_converter }) mark_start?: number[];
+  @property({ reflect: true, converter: mark_converter }) mark_end?: number[];
+  @property({ reflect: true, type: Boolean }) disabled?: boolean;
+  @property({ reflect: true, type: Boolean }) selected?: boolean;
+
+  async updateChildren() {
+    this._num_items = this.children.length;
+  }
+
+  render() {
+    let branches = [];
+    let total_width = 0;
+    let max_height = 0;
+    let min_height = Number.POSITIVE_INFINITY;
+    if (this.branching) {
+      for (const c of Array.from(this.children)) {
+        if (c.slot === "head") continue;
+        const rect = c.getBoundingClientRect();
+        branches.push({
+          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);
+      }
+    }
+
+    return html`
+      <slot name="head" @slotchange=${this.updateChildren}> </slot>
+      ${this.branching
+        ? svg`
+            <svg
+              id="top"
+              width="${total_width}"
+              height="${BRANCH_HEIGHT}"
+            >
+              ${branches.map((branch, i) => {
+                if (branch.start) return "";
+                return svg`
+                  <path
+                    class="${classMap({
+                      line: true,
+                      marked: this.mark_start?.includes(i),
+                    })}"
+                    id="${this.mark_start?.includes(i) ? "mark-start" : ""}"
+                    index=${i}
+                    d="
+                      M ${total_width / 2} 0
+                      C ${total_width / 2} ${BRANCH_CURVATURE}
+                        ${branch.x} ${BRANCH_HEIGHT - BRANCH_CURVATURE}
+                        ${branch.x} ${BRANCH_HEIGHT}
+                      "/>
+                `;
+              })}
+              <use xlink:href="#mark-start" />
+            </svg>
+          `
+        : ""}
+      <div id="branches">
+        ${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>
+      </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>
+          `
+        : ""}
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        --stroke-clr: var(--stroke-color, rgb(3, 169, 244));
+        --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 {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      :host([branching]) #branches {
+        flex-direction: row;
+        align-items: start;
+      }
+
+      :host([branching]) ::slotted([slot="head"]) {
+        margin-bottom: ${-BRANCH_HEIGHT / 2}px;
+        z-index: 1;
+      }
+
+      #lines {
+        position: absolute;
+        z-index: -1;
+      }
+
+      path.line {
+        stroke: var(--stroke-clr);
+        stroke-width: 2;
+        fill: none;
+      }
+      path.line.marked {
+        stroke: var(--marked-clr);
+      }
+      :host([disabled]) path.line {
+        stroke: var(--disabled-clr);
+      }
+      :host([selected]) #top path.line {
+        stroke: var(--selected-clr);
+      }
+      :host(:focus) #top path.line {
+        stroke: var(--selected-clr);
+      }
+    `;
+  }
+}
+
+customElements.define("hat-graph", HatGraph);

src/hat-graph/make-graph.ts

@@ -0,0 +1,427 @@
+import "./hat-graph";
+import "./hat-graph-node";
+import { HatGraphNode } from "./hat-graph-node";
+import { classMap } from "lit-html/directives/class-map";
+
+import {
+  mdiCallSplit,
+  mdiAbTesting,
+  mdiCheck,
+  mdiClose,
+  mdiChevronRight,
+  mdiExclamation,
+  mdiTimerOutline,
+  mdiTrafficLight,
+  mdiRefresh,
+  mdiArrowUp,
+  mdiCodeJson,
+  mdiCheckBoxOutline,
+  mdiCheckboxBlankOutline,
+  mdiAsterisk,
+} from "@mdi/js";
+import { HatGraph } from "./hat-graph";
+import { html } from "lit-element";
+import { render } from "lit-html";
+import {
+  AutomationActionConfig,
+  AutomationConfig,
+  AutomationTrace,
+} from "./types";
+
+const OPTIONS = [
+  "condition",
+  "delay",
+  "device_id",
+  "event",
+  "scene",
+  "service",
+  "wait_template",
+  "repeat",
+  "choose",
+];
+
+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,
+  trigger: mdiAsterisk,
+};
+
+const SPECIAL_NODES = {
+  condition: makeConditionNode,
+  choose: makeChooseNode,
+  repeat: makeRepeatNode,
+};
+
+function makeConditionNode(
+  config: AutomationActionConfig,
+  path: string,
+  trace?: AutomationTrace
+) {
+  const graph = document.createElement("hat-graph") as HatGraph;
+  graph.branching = true;
+  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(
+      new CustomEvent("node-selected", {
+        detail: { path, config, node: graph },
+        bubbles: true,
+      })
+    );
+  });
+
+  render(
+    html`
+      <hat-graph-node
+        slot="head"
+        .iconPath=${mdiAbTesting}
+        ?marked=${trace && path in trace}
+        nofocus
+      >
+      </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
+  );
+  return graph;
+}
+
+function makeChooseNode(
+  config: AutomationActionConfig,
+  path: string,
+  trace?: AutomationTrace
+) {
+  const graph = document.createElement("hat-graph") as HatGraph;
+  graph.branching = true;
+  graph.setAttribute("tabindex", "0");
+
+  graph.addEventListener("focus", () => {
+    graph.dispatchEvent(
+      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(
+    html`
+      <hat-graph-node
+        slot="head"
+        .iconPath="${mdiCallSplit}"
+        nofocus
+        ?marked=${trace && path in trace}
+      >
+      </hat-graph-node>
+      ${config.choose?.map((branch, i) => {
+        const pth = `${path}/choose/${i}`;
+        const head = document.createElement("hat-graph-node") as HatGraphNode;
+        head.iconPath = mdiCheckBoxOutline;
+        head.setAttribute("nofocus", "");
+        if (trace && pth in trace) {
+          head.setAttribute("marked", "");
+        }
+        return makeGraph(branch.sequence, `${pth}/sequence`, head, trace);
+      })}
+      ${(() => {
+        const pth = `${path}/default`;
+        const head = document.createElement("hat-graph-node") as HatGraphNode;
+        head.iconPath = mdiCheckboxBlankOutline;
+        head.setAttribute("nofocus", "");
+        if (trace && pth in trace) {
+          head.setAttribute("marked", "");
+        }
+        return makeGraph(config.default, pth, head, trace);
+      })()}
+    `,
+    graph
+  );
+  return graph;
+}
+
+function makeRepeatNode(
+  config: AutomationActionConfig,
+  path: string,
+  trace?: AutomationTrace
+) {
+  const graph = document.createElement("hat-graph") as HatGraph;
+  graph.branching = true;
+  graph.setAttribute("tabindex", "0");
+
+  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(
+      new CustomEvent("node-selected", {
+        detail: { path, config, node: graph },
+        bubbles: true,
+      })
+    );
+  });
+
+  render(
+    html`
+      <hat-graph-node
+        slot="head"
+        .iconPath=${mdiRefresh}
+        nofocus
+        ?marked=${trace && path in trace}
+      ></hat-graph-node>
+      <hat-graph-node
+        .iconPath=${mdiArrowUp}
+        nofocus
+        ?marked=${trace && trace[path]?.repeats}
+      ></hat-graph-node>
+      ${makeGraph(config.repeat.sequence, `${path}/sequence`, undefined, trace)}
+    `,
+    graph
+  );
+  return graph;
+}
+
+function makeNode(
+  config: AutomationActionConfig,
+  path: string,
+  trace?: AutomationTrace
+) {
+  const type = OPTIONS.find((key) => key in config) || "yaml";
+
+  if (type in SPECIAL_NODES) {
+    return SPECIAL_NODES[type](config, path, trace);
+  }
+
+  const node = document.createElement("hat-graph-node") as HatGraphNode;
+
+  node.iconPath = ICONS[type];
+  if (trace && path in trace) {
+    node.setAttribute("marked", "");
+  }
+
+  node.addEventListener("focus", (ev) => {
+    node.dispatchEvent(
+      new CustomEvent("node-selected", {
+        detail: { path, config, node },
+        bubbles: true,
+      })
+    );
+  });
+
+  return node;
+}
+
+export function makeGraph(
+  nodes: AutomationActionConfig[],
+  path: string,
+  head = undefined,
+  trace?: AutomationTrace
+) {
+  const graph = document.createElement("hat-graph") as HatGraph;
+
+  if (head) {
+    head.slot = "head";
+    graph.appendChild(head);
+  }
+
+  for (const [i, nodeConfig] of nodes.entries()) {
+    const node = makeNode(nodeConfig, `${path}/${i}`, trace);
+
+    node.addEventListener("update-node", (ev) => {
+      ev.stopPropagation();
+
+      const config = [...nodes];
+      config[i] = ev.detail.config;
+
+      graph.dispatchEvent(
+        new CustomEvent("update-node", { detail: { config }, bubbles: true })
+      );
+    });
+
+    node.addEventListener("delete-node", (ev) => {
+      ev.stopPropagation();
+
+      const config = [...nodes];
+      config.splice(i, 1);
+
+      graph.dispatchEvent(
+        new CustomEvent("update-node", { detail: { config }, bubbles: true })
+      );
+    });
+
+    node.addEventListener("place-node", (ev) => {
+      ev.stopPropagation();
+
+      const config = [...nodes];
+      config.splice(i, 0, ev.detail.config);
+      console.log(config);
+
+      graph.dispatchEvent(
+        new CustomEvent("update-node", { detail: { config }, bubbles: true })
+      );
+    });
+
+    graph.appendChild(node);
+  }
+
+  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;
+}

src/hat-graph/types.ts

@@ -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;
+}

src/main.js

@@ -1,53 +1,127 @@
-import {demoConfig} from "./demo-config";
+import { demoTrace, demoConfig } from "./demo-config";
 import "@vanillawc/wc-codemirror";
 
-import "./script-graph";
+import { default as jsyaml } from "js-yaml";
-import "./script-graph3";
 
-import { ActionHandler } from "./script-to-graph";
+import { automationGraph } from "./hat-graph/make-graph";
+import { html } from "lit-element";
+import { render } from "lit-html";
+import { mdiBowTie } from "@mdi/js";
+let selectedNode;
 
-import { mdiAsterisk, mdiArrowUp, mdiArrowDown } from "@mdi/js";
+function nodeSelected(ev) {
+  if (selectedNode) {
+    selectedNode.removeAttribute("selected");
+  }
+  ev.detail.node.setAttribute("selected", "");
+  selectedNode = ev.detail.node;
 
-let index_counter = 0;
+  const snippet = document.querySelector("#snippet");
-let nodes = [];
+  snippet.querySelector("span").innerHTML = ev.detail.path;
+  const code = snippet.querySelector("wc-codemirror");
+  code.value = jsyaml.dump(ev.detail.config);
+  code.currentNode = ev.target;
+}
 
-window.onload = () => {
+function rebuildGraph(config = undefined) {
+  const graphCard = document.querySelector("#graph");
 
-  const graph2 = document.createElement("script-graph3");
+  if (!config) {
-  document.querySelector("#graph2").appendChild(graph2);
+    const codeEl = document.querySelector("#fullcode wc-codemirror");
+    config = jsyaml.load(codeEl.value);
+  }
 
-  let src = demoConfig;
+  while (graphCard.firstChild) graphCard.removeChild(graphCard.firstChild);
 
-  const fullcode = document.querySelector("#fullcode");
+  const traceEl = document.querySelector("#trace wc-codemirror");
-  fullcode.mode = "yaml";
+  const trace = jsyaml.load(traceEl.value);
-  window.setTimeout(()=> fullcode.value = jsyaml.safeDump(src), 100);
 
-  const updateButton = document.querySelector("#updateButton");
+  const graph = automationGraph(config, trace);
-  updateButton.addEventListener('click', () => {
+
-    src = jsyaml.safeLoad(fullcode.value);
+  graph.addEventListener("node-selected", nodeSelected);
-    index_counter = 0;
+
-    nodes = [];
+  graphCard.appendChild(graph);
-    tr.actions = src;
+}
-    graph.tree = tr.graph;
+
+function setup_snippet_editor() {
+  document.querySelector("#saveSnippet").onclick = () => {
+    const code = document.querySelector("#snippet");
+    if (code.currentNode) {
+      code.currentNode.updateNode(jsyaml.load(code.value));
+    }
+  };
+  document.querySelector("#deleteSnippet").onclick = () => {
+    const code = document.querySelector("#snippet");
+    if (code.currentNode) {
+      code.currentNode.deleteNode();
+    }
+  };
+}
+
+function setup_trace_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());
+}
+
+function setup_fullcode_editor() {
+  const src = demoConfig;
+  const code = document.querySelector("#fullcode");
+
+  window.setTimeout(
+    () => (code.querySelector("wc-codemirror").value = jsyaml.dump(src)),
+    100
+  );
+
+  code.querySelector("button").addEventListener("click", () => rebuildGraph());
+}
+
+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,
+        })
+      );
+    });
   });
 
-  const graph = document.createElement("script-graph");
+  btn.querySelectorAll("input").forEach((c, i) => {
-  const tr = new ActionHandler();
+    c.addEventListener("change", () => {
-  window.tr = tr;
+      const condition = ["a", "b", "c"][i];
-  tr.actions = src;
+      console.log(condition, "changed");
-  tr.updateCallback = (actions) => {
+      btn.dispatchEvent(
-    graph.tree = tr.graph;
+        new CustomEvent("states-changed", {
-    fullcode.value = jsyaml.safeDump(tr.actions);
+          detail: {
-  };
+            state: {
-  tr.selectCallback = (idx, action, update) => {
+              a: btn.querySelector("#a").checked,
-    graph.tree = tr.graph;
+              b: btn.querySelector("#b").checked,
-    const code = document.querySelector("#snippet");
+              c: btn.querySelector("#c").checked,
-    code.value = jsyaml.safeDump(action);
+            },
-    document.querySelector("#saveSnippet").onclick = () => update(jsyaml.safeLoad(code.value));
+          },
-    document.querySelector("#deleteSnippet").onclick = () => update(jsyaml.safeLoad(null));
+          bubbles: true,
+        })
+      );
+    });
+  });
 }
 
-  graph.tree = tr.graph;
+function setup() {
-  document.querySelector("#graph").appendChild(graph);
+  setup_snippet_editor();
 
+  setup_fullcode_editor();
+  setup_trace_editor();
+  setup_trigger_buttons();
+
+  window.setTimeout(() => rebuildGraph(), 300);
 }
+
+setup();

src/script-graph.ts

@@ -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);
-

src/script-graph3.ts

@@ -1,110 +0,0 @@
-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`
-      <circle
-        cx="0"
-        cy="${this.width/2}"
-        r="${SIZE/2}"
-      />
-      <g style="pointer-events: none" transform="translate(-12, ${this.width/2-12})">
-      </g>
-    `
-  }
-
-}
-
-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<GraphNode>) {
-      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`
-    <svg width=500 height=500>
-      ${this.content.map(e =>
-        svg`
-          <g transform="translate(${this._width/2} ${e.offset_y})">
-          ${e.svg}
-          </g>
-        `)}
-    </svg>
-    <slot
-    @slotchange=${this.updateChildren}
-    ></slot>
-    <style>
-      slot {
-        display: none;
-      }
-      </style>
-    `
-  }
-
-}
-customElements.define("script-graph3", ScriptGraph3);
-customElements.define("script-graph-node", ScriptGraphNode);

src/script-to-graph.ts

@@ -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,
-    }
-  }
-
-}

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;

tsconfig.json

@@ -1,18 +1,9 @@
 {
   "compilerOptions": {
-    "target": "es6",
+    "target": "es2017",
-    "module": "ESNext",
     "moduleResolution": "node",
-    "sourceMap": true,
+    "resolveJsonModule": true,
-    "emitDecoratorMetadata": true,
+    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
+    "experimentalDecorators": true
-    "removeComments": false,
+  }
-    "noImplicitAny": false
-  },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
 }