WIP drag and drop
This commit is contained in:
parent
ccbe62c0d9
commit
da9cbbe8a5
447
DragDropTouch.js
Normal file
447
DragDropTouch.js
Normal file
@ -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 = {}));
|
||||
@ -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 {
|
||||
|
||||
@ -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}"/>`
|
||||
: ICONS[this.icon]
|
||||
? svg`<path d="${ICONS[this.icon]}"/>`
|
||||
: ""
|
||||
}
|
||||
${this.iconPath ? svg`<path d="${this.iconPath}"/>` : ""}
|
||||
</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;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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`
|
||||
<hat-graph>
|
||||
<hat-graph-node
|
||||
slot="head"
|
||||
.iconPath=${mdiCheckBoxOutline}
|
||||
@focus=${focused}
|
||||
></hat-graph-node>
|
||||
${branch.sequence.map((node) => makeNode(node))}
|
||||
</hat-graph>
|
||||
`;
|
||||
const head = document.createElement("hat-graph-node") as HatGraphNode;
|
||||
head.iconPath = mdiCheckBoxOutline;
|
||||
head.addEventListener("focus", focused);
|
||||
|
||||
return makeGraph(branch.sequence, head);
|
||||
})}
|
||||
<hat-graph>
|
||||
<hat-graph-node
|
||||
slot="head"
|
||||
.iconPath=${mdiCheckboxBlankOutline}
|
||||
@focus=${focused}
|
||||
></hat-graph-node>
|
||||
${config.default.map((node) => makeNode(node))}
|
||||
</hat-graph>
|
||||
${(() => {
|
||||
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}
|
||||
></hat-graph-node>
|
||||
<hat-graph>
|
||||
${config.repeat.sequence.map((node) => makeNode(node))}
|
||||
</hat-graph>
|
||||
${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);
|
||||
}
|
||||
|
||||
|
||||
35
src/main.js
35
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();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user