Remove drag and drop for now
This commit is contained in:
parent
f9aab2b70e
commit
9dead0c87d
@ -4,22 +4,11 @@ const NODE_SIZE = 24;
|
|||||||
|
|
||||||
export class HatGraphNode extends LitElement {
|
export class HatGraphNode extends LitElement {
|
||||||
@property() iconPath?;
|
@property() iconPath?;
|
||||||
dragtarget = undefined;
|
|
||||||
config = undefined;
|
config = undefined;
|
||||||
|
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
super.connectedCallback();
|
super.connectedCallback();
|
||||||
if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
|
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) {
|
updateNode(config) {
|
||||||
|
@ -89,13 +89,7 @@ function makeChooseNode(config) {
|
|||||||
|
|
||||||
render(
|
render(
|
||||||
html`
|
html`
|
||||||
<hat-graph-node
|
<hat-graph-node slot="head" .iconPath="${mdiCallSplit}" @focus=${focused}>
|
||||||
slot="head"
|
|
||||||
.iconPath="${mdiCallSplit}"
|
|
||||||
@focus=${focused}
|
|
||||||
draggable="true"
|
|
||||||
.dragtarget=${graph}
|
|
||||||
>
|
|
||||||
</hat-graph-node>
|
</hat-graph-node>
|
||||||
${config.choose?.map((branch) => {
|
${config.choose?.map((branch) => {
|
||||||
const head = document.createElement("hat-graph-node") as HatGraphNode;
|
const head = document.createElement("hat-graph-node") as HatGraphNode;
|
||||||
@ -139,7 +133,6 @@ function makeRepeatNode(config) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function makeNode(config) {
|
function makeNode(config) {
|
||||||
if (typeof config === "string") return undefined;
|
|
||||||
const type = OPTIONS.find((key) => key in config) || "yaml";
|
const type = OPTIONS.find((key) => key in config) || "yaml";
|
||||||
|
|
||||||
if (type in SPECIAL_NODES) {
|
if (type in SPECIAL_NODES) {
|
||||||
@ -149,7 +142,6 @@ function makeNode(config) {
|
|||||||
const node = document.createElement("hat-graph-node") as HatGraphNode;
|
const node = document.createElement("hat-graph-node") as HatGraphNode;
|
||||||
|
|
||||||
node.iconPath = ICONS[type];
|
node.iconPath = ICONS[type];
|
||||||
node.draggable = true;
|
|
||||||
|
|
||||||
node.config = config;
|
node.config = config;
|
||||||
|
|
||||||
@ -164,16 +156,6 @@ function makeNode(config) {
|
|||||||
|
|
||||||
export function makeGraph(nodes, head = undefined) {
|
export function makeGraph(nodes, head = undefined) {
|
||||||
const graph = document.createElement("hat-graph") as HatGraph;
|
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) {
|
if (head) {
|
||||||
head.slot = "head";
|
head.slot = "head";
|
||||||
@ -182,43 +164,6 @@ export function makeGraph(nodes, head = undefined) {
|
|||||||
|
|
||||||
for (const [i, nodeConfig] of nodes.entries()) {
|
for (const [i, nodeConfig] of nodes.entries()) {
|
||||||
const node = makeNode(nodeConfig);
|
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) => {
|
node.addEventListener("update-node", (ev) => {
|
||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
|
Loading…
x
Reference in New Issue
Block a user