thomas/script-graph
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Remove drag and drop for now

Browse Source
This commit is contained in:
Thomas Lovén 2021-03-27 15:43:21 +00:00
parent f9aab2b70e
commit 9dead0c87d
2 changed files with 1 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/hat-graph/hat-graph-node.ts
View File

@ -4,22 +4,11 @@ const NODE_SIZE = 24;
export class HatGraphNode extends LitElement {
@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) {

57
src/hat-graph/make-graph.ts
View File

@ -89,13 +89,7 @@ function makeChooseNode(config) {
render(
html`
<hat-graph-node
slot="head"
.iconPath="${mdiCallSplit}"
@focus=${focused}
draggable="true"
.dragtarget=${graph}
>
<hat-graph-node slot="head" .iconPath="${mdiCallSplit}" @focus=${focused}>
</hat-graph-node>
${config.choose?.map((branch) => {
const head = document.createElement("hat-graph-node") as HatGraphNode;
@ -139,7 +133,6 @@ 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) {
@ -149,7 +142,6 @@ function makeNode(config) {
const node = document.createElement("hat-graph-node") as HatGraphNode;
node.iconPath = ICONS[type];
node.draggable = true;
node.config = config;
@ -164,16 +156,6 @@ function makeNode(config) {
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";
@ -182,43 +164,6 @@ export function makeGraph(nodes, head = undefined) {
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();