WIP drag and drop

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 = {}));

index.html

@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Script graph demo</title>
+    <script src="DragDropTouch.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.14.0/js-yaml.min.js"></script>
     <script src="index.js" type="module" defer></script>
   </head>
@@ -22,7 +23,7 @@
       white-space: pre-wrap;
     }
     #graph {
-      max-width: 400px;
+      max-width: 600px;
       overflow: auto;
     }
     .code {

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

@@ -1,41 +1,25 @@
 import { css, LitElement, property, svg } from "lit-element";
-import {
-  mdiCallSplit,
-  mdiAbTesting,
-  mdiCheck,
-  mdiClose,
-  mdiChevronRight,
-  mdiExclamation,
-  mdiTimerOutline,
-  mdiTrafficLight,
-  mdiRefresh,
-  mdiArrowUp,
-  mdiCodeJson,
-  mdiCheckBoxOutline,
-  mdiCheckboxBlankOutline,
-  mdiAsterisk,
-  mdiCircleOutline,
-} from "@mdi/js";
 
 const NODE_SIZE = 24;
 
-const ICONS = {
-  "call-split": mdiCallSplit,
-  "ab-testing": mdiAbTesting,
-  check: mdiCheck,
-  close: mdiClose,
-  "chevron-right": mdiChevronRight,
-  exclamation: mdiExclamation,
-  asterisk: mdiAsterisk,
-};
-
 export class HatGraphNode extends LitElement {
-  @property() icon = "chevron-right";
   @property() iconPath?;
+  dragtarget = undefined;
+  config = undefined;
 
   connectedCallback() {
     super.connectedCallback();
     if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
+
+    this.addEventListener("dragstart", () => {
+      this.classList.add("dragging");
+      (window as any)._dragElement = this.dragtarget ?? this;
+      this.updateNode("");
+    });
+    this.addEventListener("dragend", () => {
+      this.classList.remove("dragging");
+      (window as any)._dragElement = undefined;
+    });
   }
 
   updateNode(config) {
@@ -52,9 +36,9 @@ export class HatGraphNode extends LitElement {
     this.dispatchEvent(new CustomEvent("delete-node", { bubbles: true }));
   }
 
-  prependNode(config) {
+  placeNode(config) {
     this.dispatchEvent(
-      new CustomEvent("prepend-node", { detail: { config }, bubbles: true })
+      new CustomEvent("place-node", { detail: { config }, bubbles: true })
     );
   }
 
@@ -80,13 +64,7 @@ export class HatGraphNode extends LitElement {
         style="pointer-events: none"
         transform="translate(${-12} ${this.width / 2 - 12})"
       >
-        ${
+        ${this.iconPath ? svg`<path d="${this.iconPath}"/>` : ""}
-          this.iconPath
-            ? svg`<path d="${this.iconPath}"/>`
-            : ICONS[this.icon]
-            ? svg`<path d="${ICONS[this.icon]}"/>`
-            : ""
-        }
       </g>
       </svg>
     `;
@@ -99,11 +77,6 @@ export class HatGraphNode extends LitElement {
         --stroke-clr: var(--stroke-color, rgb(3, 169, 244));
         --hover-clr: var(--hover-color, rgb(255, 152, 0));
       }
-      circle {
-        stroke: var(--stroke-clr);
-        stroke-width: 2;
-        fill: white;
-      }
       :host(:hover) {
         --stroke-clr: var(--hover-clr);
       }
@@ -111,6 +84,19 @@ export class HatGraphNode extends LitElement {
         --stroke-clr: green;
         outline: none;
       }
+      :host(.dragging) {
+        --stroke-clr: gray;
+        color: gray;
+      }
+      :host(.dragging) path {
+        stroke: gray;
+        fill: gray;
+      }
+      circle {
+        stroke: var(--stroke-clr);
+        stroke-width: 2;
+        fill: white;
+      }
     `;
   }
 }

src/hat-graph/hat-graph.ts

@@ -11,6 +11,27 @@ export class HatGraph extends LitElement {
   @property() _num_items = 0;
 
   @property({ reflect: true }) branching?;
+  config?;
+
+  updateNode(config) {
+    this.dispatchEvent(
+      new CustomEvent("update-node", {
+        detail: { config },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  deleteNode() {
+    this.dispatchEvent(new CustomEvent("delete-node", { bubbles: true }));
+  }
+
+  placeNode(config) {
+    this.dispatchEvent(
+      new CustomEvent("place-node", { detail: { config }, bubbles: true })
+    );
+  }
 
   get width() {
     let w = 0;

src/hat-graph/make-graph.ts

@@ -77,6 +77,7 @@ function makeConditionNode(config) {
 
 function makeChooseNode(config) {
   const graph = document.createElement("hat-graph") as HatGraph;
+  graph.config = config;
   graph.branching = true;
 
   const focused = () =>
@@ -86,28 +87,27 @@ function makeChooseNode(config) {
 
   render(
     html`
-      <hat-graph-node slot="head" iconPath="${mdiCallSplit}" @focus=${focused}>
+      <hat-graph-node
+        slot="head"
+        .iconPath="${mdiCallSplit}"
+        @focus=${focused}
+        draggable="true"
+        .dragtarget=${graph}
+      >
       </hat-graph-node>
       ${config.choose?.map((branch) => {
-        return html`
+        const head = document.createElement("hat-graph-node") as HatGraphNode;
-          <hat-graph>
+        head.iconPath = mdiCheckBoxOutline;
-            <hat-graph-node
+        head.addEventListener("focus", focused);
-              slot="head"
+
-              .iconPath=${mdiCheckBoxOutline}
+        return makeGraph(branch.sequence, head);
-              @focus=${focused}
-            ></hat-graph-node>
-            ${branch.sequence.map((node) => makeNode(node))}
-          </hat-graph>
-        `;
       })}
-      <hat-graph>
+      ${(() => {
-        <hat-graph-node
+        const head = document.createElement("hat-graph-node") as HatGraphNode;
-          slot="head"
+        head.iconPath = mdiCheckboxBlankOutline;
-          .iconPath=${mdiCheckboxBlankOutline}
+        head.addEventListener("focus", focused);
-          @focus=${focused}
+        return makeGraph(config.default, head);
-        ></hat-graph-node>
+      })()}
-        ${config.default.map((node) => makeNode(node))}
-      </hat-graph>
     `,
     graph
   );
@@ -129,9 +129,7 @@ function makeRepeatNode(config) {
         .iconPath=${mdiArrowUp}
         @focus=${focused}
       ></hat-graph-node>
-      <hat-graph>
+      ${makeGraph(config.repeat.sequence)}
-        ${config.repeat.sequence.map((node) => makeNode(node))}
-      </hat-graph>
     `,
     graph
   );
@@ -139,6 +137,7 @@ function makeRepeatNode(config) {
 }
 
 function makeNode(config) {
+  if (typeof config === "string") return undefined;
   const type = OPTIONS.find((key) => key in config) || "yaml";
 
   if (type in SPECIAL_NODES) {
@@ -148,6 +147,9 @@ function makeNode(config) {
   const node = document.createElement("hat-graph-node") as HatGraphNode;
 
   node.iconPath = ICONS[type];
+  node.draggable = true;
+
+  node.config = config;
 
   node.addEventListener("focus", (ev) => {
     node.dispatchEvent(
@@ -158,11 +160,63 @@ function makeNode(config) {
   return node;
 }
 
-export function makeGraph(nodes) {
+export function makeGraph(nodes, head = undefined) {
   const graph = document.createElement("hat-graph") as HatGraph;
+  graph.addEventListener("dragenter", (ev) => {
+    ev.stopPropagation();
+    ev.preventDefault();
+    try {
+      graph.appendChild((window as any)._dragElement);
+    } catch (e) {
+      if (!(e instanceof DOMException)) throw e;
+    }
+  });
+  (graph as any).test = "Hello!";
+
+  if (head) {
+    head.slot = "head";
+    graph.appendChild(head);
+  }
 
   for (const [i, nodeConfig] of nodes.entries()) {
     const node = makeNode(nodeConfig);
+    if (!node) {
+      window.setTimeout(() => {
+        const config = [...nodes];
+        config.splice(i, 1);
+
+        graph.dispatchEvent(
+          new CustomEvent("update-node", { detail: { config }, bubbles: true })
+        );
+      }, 100);
+      continue;
+    }
+
+    node.addEventListener("dragover", (ev) => {
+      ev.stopPropagation();
+      ev.preventDefault();
+    });
+    node.addEventListener("dragenter", (ev) => {
+      ev.stopPropagation();
+      ev.preventDefault();
+      if (node === (window as any)._dragElement) return;
+      try {
+        graph.insertBefore((window as any)._dragElement, node);
+        (window as any)._dragTarget = node;
+      } catch (e) {
+        if (!(e instanceof DOMException)) throw e;
+      }
+    });
+
+    node.addEventListener("drop", (ev) => {
+      ev.stopPropagation();
+      ev.preventDefault();
+      if ((window as any)._dragTarget) {
+        console.log("Drop onto ", (window as any)._dragTarget);
+        const config = { ...(window as any)._dragElement.config };
+        (window as any)._dragTarget.placeNode(config);
+      }
+    });
 
     node.addEventListener("update-node", (ev) => {
       ev.stopPropagation();
@@ -186,6 +240,18 @@ export function makeGraph(nodes) {
       );
     });
 
+    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);
   }
 

src/main.js

@@ -57,7 +57,6 @@ window.onload = () => {
 };
 
 function nodeSelected(ev) {
-  console.log(ev);
   const code = document.querySelector("#snippet");
   code.value = jsyaml.safeDump(ev.detail.config);
   code.currentNode = ev.target;
@@ -73,13 +72,30 @@ function rebuildGraph(config) {
   graph.addEventListener("update-node", (ev) => {
     const code = document.querySelector("#fullcode");
     code.value = jsyaml.safeDump(ev.detail.config);
-    rebuildGraph(ev.detail.config);
+    window.setTimeout(() => rebuildGraph(ev.detail.config), 100);
   });
 
   graphCard.appendChild(graph);
 }
 
+function setup_snippet_editor() {
+  document.querySelector("#saveSnippet").onclick = () => {
+    const code = document.querySelector("#snippet");
+    if (code.currentNode) {
+      code.currentNode.updateNode(jsyaml.safeLoad(code.value));
+    }
+  };
+  document.querySelector("#deleteSnippet").onclick = () => {
+    const code = document.querySelector("#snippet");
+    if (code.currentNode) {
+      code.currentNode.deleteNode();
+    }
+  };
+}
+
 function setup() {
+  setup_snippet_editor();
+
   let src = demoConfig2;
   const fullcode = document.querySelector("#fullcode");
   fullcode.mode = "yaml";
@@ -92,21 +108,6 @@ function setup() {
     src = jsyaml.safeLoad(fullcode.value);
     rebuildGraph(src);
   });
-
-  document.querySelector("#saveSnippet").onclick = () => {
-    const code = document.querySelector("#snippet");
-    console.log(code.currentNode);
-    if (code.currentNode) {
-      code.currentNode.updateNode(jsyaml.safeLoad(code.value));
-    }
-  };
-  document.querySelector("#deleteSnippet").onclick = () => {
-    const code = document.querySelector("#snippet");
-    console.log(code.currentNode);
-    if (code.currentNode) {
-      code.currentNode.deleteNode();
-    }
-  };
 }
 
 setup();