From da9cbbe8a5d27dd044816c92f9bfac7b9784ed25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= Date: Fri, 26 Mar 2021 23:24:09 +0000 Subject: [PATCH] WIP drag and drop --- DragDropTouch.js | 447 ++++++++++++++++++++++++++++++++ index.html | 3 +- src/hat-graph/hat-graph-node.ts | 70 ++--- src/hat-graph/hat-graph.ts | 21 ++ src/hat-graph/make-graph.ts | 112 ++++++-- src/main.js | 35 +-- 6 files changed, 605 insertions(+), 83 deletions(-) create mode 100644 DragDropTouch.js diff --git a/DragDropTouch.js b/DragDropTouch.js new file mode 100644 index 0000000..107825c --- /dev/null +++ b/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 + * HTML Drag and Drop API. + * + * 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 = {})); diff --git a/index.html b/index.html index de2c606..29a38c2 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ Script graph demo + @@ -22,7 +23,7 @@ white-space: pre-wrap; } #graph { - max-width: 400px; + max-width: 600px; overflow: auto; } .code { diff --git a/src/hat-graph/hat-graph-node.ts b/src/hat-graph/hat-graph-node.ts index 1a38428..74c3cf3 100644 --- a/src/hat-graph/hat-graph-node.ts +++ b/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`` - : ICONS[this.icon] - ? svg`` - : "" - } + ${this.iconPath ? 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; + } `; } } diff --git a/src/hat-graph/hat-graph.ts b/src/hat-graph/hat-graph.ts index 81a45b0..7ce25f7 100644 --- a/src/hat-graph/hat-graph.ts +++ b/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; diff --git a/src/hat-graph/make-graph.ts b/src/hat-graph/make-graph.ts index 3aa6c7a..16dcfb8 100644 --- a/src/hat-graph/make-graph.ts +++ b/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` - + ${config.choose?.map((branch) => { - return html` - - - ${branch.sequence.map((node) => makeNode(node))} - - `; + const head = document.createElement("hat-graph-node") as HatGraphNode; + head.iconPath = mdiCheckBoxOutline; + head.addEventListener("focus", focused); + + return makeGraph(branch.sequence, head); })} - - - ${config.default.map((node) => makeNode(node))} - + ${(() => { + const head = document.createElement("hat-graph-node") as HatGraphNode; + head.iconPath = mdiCheckboxBlankOutline; + head.addEventListener("focus", focused); + return makeGraph(config.default, head); + })()} `, graph ); @@ -129,9 +129,7 @@ function makeRepeatNode(config) { .iconPath=${mdiArrowUp} @focus=${focused} > - - ${config.repeat.sequence.map((node) => makeNode(node))} - + ${makeGraph(config.repeat.sequence)} `, 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); } diff --git a/src/main.js b/src/main.js index 3019309..8c3da13 100644 --- a/src/main.js +++ b/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();