130 lines
No EOL
3.1 KiB
JavaScript
130 lines
No EOL
3.1 KiB
JavaScript
import { unparser } from "./unparser.mjs";
|
|
import { parser, runner, openers } from "./parser.mjs";
|
|
import objsI from "./objs.mjs";
|
|
|
|
let data = parser(`
|
|
on(
|
|
[compile]
|
|
{
|
|
echo(add([2][3]))
|
|
echo([Hello World!])
|
|
echo(add([2][3]))
|
|
echo([Hello World!])
|
|
}
|
|
)
|
|
`);
|
|
|
|
async function runWrap() {
|
|
let objs = Object.assign({}, objsI);
|
|
objs.events = new EventTarget();
|
|
await runner(data, objs);
|
|
let ev = new Event('compile'); // TODO: more events
|
|
|
|
objs.events.dispatchEvent(ev);
|
|
}
|
|
|
|
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 = [];
|
|
for (let i in args) {
|
|
args[i] = await createBlocks(args[i])
|
|
}
|
|
|
|
let o = dat.op ? dat.op.charCodeAt() : 'nil';
|
|
|
|
let div = document.createElement('div');
|
|
div.classList.add(`op-${o}`)
|
|
div.classList.add(`block-${dat.context}`)
|
|
div.classList.add(`block`)
|
|
div.textContent = dat.str || dat.context;
|
|
parent.appendChild(div);
|
|
|
|
if (dat.op == '{') {
|
|
//todo: clean
|
|
let button = document.createElement('div');
|
|
button.classList.add(`block`)
|
|
button.classList.add(`block-push`)
|
|
button.textContent = 'push a block';
|
|
div.appendChild(button)
|
|
|
|
button.onclick = function(e) {
|
|
dat.args.push(parser(`comment([placeholder])`));
|
|
bodyThing.innerHTML = '';
|
|
|
|
createBlocks(data);
|
|
|
|
e.stopPropagation();
|
|
}
|
|
}
|
|
|
|
for (let i in args) {
|
|
let arg = args[i];
|
|
if (arg) div.appendChild(arg);
|
|
}
|
|
|
|
|
|
div.onclick = function (e) {
|
|
if (clickedBlock) {
|
|
if (clickedArea != dat) {
|
|
let swap = {};
|
|
console.log(clickedArea, dat)
|
|
Object.assign(swap, clickedArea);
|
|
Object.assign(clickedArea, dat);
|
|
Object.assign(dat, swap);
|
|
|
|
bodyThing.innerHTML = '';
|
|
|
|
createBlocks(data);
|
|
|
|
runWrap();
|
|
}
|
|
|
|
clickedClone.remove();
|
|
clickedClone = false;
|
|
clickedBlock = false;
|
|
clickedArea = false;
|
|
} else {
|
|
clickedClone = div.cloneNode(true);
|
|
document.body.appendChild(clickedClone);
|
|
clickedBlock = div;
|
|
clickedArea = dat;
|
|
}
|
|
e.stopPropagation();
|
|
}
|
|
|
|
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); |