WIP drag and drop

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`
-          <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);
   }