blockd eletion

js/index.mjs

@@ -25,9 +25,12 @@ async function runWrap() {
 
 let clickedBlock = false;
 let clickedArea = false;
+let clickedClone = false;
 let bodyThing = document.body;
 
 async function createBlocks(dat, parent = bodyThing) {
+    if (dat.canDelete) return false;
+
     let args = Object.assign([], dat.args);
     if (!args || !args[0]) args = [dat.args];
     if (!args || !args[0]) args = [];
@@ -52,54 +55,45 @@ async function createBlocks(dat, parent = bodyThing) {
         button.textContent = 'push a block';
         div.appendChild(button)
 
-        button.onclick = function() {
+        button.onclick = function(e) {
             dat.args.push(parser(`comment([placeholder])`));
             bodyThing.innerHTML = '';
 
             createBlocks(data);
-        }
 
-        button = document.createElement('div');
-        button.classList.add(`block`)
-        button.classList.add(`block-pop`)
-        button.textContent = 'pop a block';
-        div.appendChild(button)
-
-        button.onclick = function() {
-            dat.args.pop();
-
-            bodyThing.innerHTML = '';
-
-            createBlocks(data);
+            e.stopPropagation();
         }
     }
 
-    for (let arg of args) {
+    for (let i in args) {
+        let arg = args[i];
         if (arg) div.appendChild(arg);
     }
 
+
     div.onclick = function (e) {
         if (clickedBlock) {
             if (clickedArea != dat) {
-                let next1 = clickedBlock.nextSibling;
-                let next2 = div.nextSibling;
-
-                let p = clickedBlock.parentElement;
-                div.parentElement.insertBefore(clickedBlock, next2);
-                p.insertBefore(div, next1);
-
                 let swap = {};
                 console.log(clickedArea, dat)
                 Object.assign(swap, clickedArea);
                 Object.assign(clickedArea, dat);
                 Object.assign(dat, swap);
+
+                bodyThing.innerHTML = '';
+
+                createBlocks(data);
+
+                runWrap();
             }
 
-            runWrap();
-
+            clickedClone.remove();
+            clickedClone = false;
             clickedBlock = false;
             clickedArea = false;
         } else {
+            clickedClone = div.cloneNode(true);
+            document.body.appendChild(clickedClone);
             clickedBlock = div;
             clickedArea = dat;
         }
@@ -109,5 +103,28 @@ async function createBlocks(dat, parent = bodyThing) {
     return div;
 }
 
+document.onmousemove = function(e) {
+    if (!clickedClone) return;
+
+    clickedClone.style.position = 'fixed';
+    clickedClone.style.top = `${e.pageY}px`;
+    clickedClone.style.left = `${e.pageX}px`;
+}
+
+document.onclick = function(e) {
+    clickedArea.canDelete = true;
+
+    clickedClone.remove();
+    clickedClone = false;
+    clickedBlock = false;
+    clickedArea = false;
+
+    bodyThing.innerHTML = '';
+
+    createBlocks(data);
+
+    runWrap();
+}
+
 runWrap();
 createBlocks(data);

js/parser.mjs

@@ -47,6 +47,8 @@ function parser(str, context = '(') {
 }
 
 async function runner(script, objects) {
+    if (script.canDelete) return;
+
     let { op, context } = script;
     let obj = objects[context.trim()];