Moved DnD event handlers to event.js file; wired clear button up

1 - Blockcode/resources/js/events.js

@@ -1,3 +1,32 @@
+const dragStartHandler = (eve) => {
+    draggedElm = eve.target;
+    console.debug("Node: ", draggedElm);
+    eve.dataTransfer.setData("text", eve.target.tagName.toLowerCase());
+}
+
+const dragOverHandler = (eve) => { eve.preventDefault(); }
+
+const dragDropHandler = (eve) => {
+    eve.preventDefault();
+    eve.stopPropagation();
+
+    const tagTarget = eve.currentTarget;
+
+    if (
+        eve.currentTarget.id.toLowerCase() === "header"     ||
+        eve.currentTarget.classList.contains("flex-parent")
+    ) {
+        if ( draggedElm.parentNode.id.toLowerCase() !== "menu" ) {
+            destroyScriptBlock(draggedElm, tagTarget);
+        }
+
+        return;
+    }
+
+    addBlockToScript(draggedElm, tagTarget);
+}
+
+
 window.onload = (eve) => {
     setupMenuBlocks();
     setupDragAndDrop();
@@ -5,7 +34,8 @@ window.onload = (eve) => {
 }
 
 clearBttn.onclick = (eve) => {
-    console.log("Clear");
+    clearScriptNode();
+    clearCanvas();
 }
 
 saveBttn.onclick  = (eve) => {
@@ -20,5 +50,3 @@ runBttn.onclick  = (eve) => {
     console.log("Run");
     runScript();
 }
-
-

1 - Blockcode/resources/js/ui.js

@@ -22,32 +22,10 @@ const setupDragAndDrop = () => {
     }
 }
 
-const dragStartHandler = (eve) => {
+const clearScriptNode = () => {
-    draggedElm = eve.target;
+    for (const elm of script.children) {
-    console.debug("Node: ", draggedElm);
+        elm.remove();
-    eve.dataTransfer.setData("text", eve.target.tagName.toLowerCase());
-}
-
-const dragOverHandler = (eve) => { eve.preventDefault(); }
-
-const dragDropHandler = (eve) => {
-    eve.preventDefault();
-    eve.stopPropagation();
-
-    const tagTarget = eve.currentTarget;
-
-    if (
-        eve.currentTarget.id.toLowerCase() === "header"     ||
-        eve.currentTarget.classList.contains("flex-parent")
-    ) {
-        if ( draggedElm.parentNode.id.toLowerCase() !== "menu" ) {
-            destroyScriptBlock(draggedElm, tagTarget);
     }
-
-        return;
-    }
-
-    addBlockToScript(draggedElm, tagTarget);
 }
 
 const addBlockToScript = (draggedTarget, tagTarget) => {