move new-program-web-editor to virtual-programs

author: Jacob Haip <jhaip@users.noreply.github.com> 2023-03-23 02:52:46 +0000
committer: Jacob Haip <jhaip@users.noreply.github.com> 2023-03-23 02:52:46 +0000
commit: de21137ee316e90211da0e5db00c7bdb36f0e168 (patch)
tree: 37eb6546334c05bd472bff4caf3bc7b271a36086 /virtual-programs/new-program-web-editor.folk
parent: remove extra debug logs in web.tcl (diff)
download: folk-de21137ee316e90211da0e5db00c7bdb36f0e168.tar.gz
folk-de21137ee316e90211da0e5db00c7bdb36f0e168.zip
1 files changed, 177 insertions, 0 deletions
diff --git a/virtual-programs/new-program-web-editor.folk b/virtual-programs/new-program-web-editor.folk
new file mode 100644
index 00000000..da148230
--- /dev/null
+++ b/virtual-programs/new-program-web-editor.folk
@@ -0,0 +1,177 @@
+Wish the Web server handles route "/new" with handler {
+    set html {
+        <html>
+        <head>
+        <style>
+        body { overflow: hidden; }
+        </style>
+        </head>
+        <body>
+        <span id="status">Status</span>
+        <div id="dragme" style="cursor: move; position: absolute; user-select: none; background-color: #ccc; padding: 1em">
+        <textarea id="code" cols="50" rows="20" style="font-family: monospace">Wish $this is outlined blue</textarea>
+        <p><button onclick="handleSave()">Save</button> <button onclick="handlePrint()">Print</button><button id="printback" style="font-size: 50%; display: none" onclick="handlePrintBack()">Print Back</button></p>
+        <pre id="error"></pre>
+        </div>
+
+        <script>
+// The current position of mouse
+let x = 0;
+let y = 0;
+
+// Query the element
+const ele = document.getElementById('dragme');
+const codeEle = document.getElementById("code");
+
+// Handle the mousedown event
+// that's triggered when user drags the element
+const mouseDownHandler = function (e) {
+if (e.target == codeEle) return;
+
+// Get the current mouse position
+x = e.clientX;
+y = e.clientY;
+
+// Attach the listeners to `document`
+document.addEventListener('pointermove', mouseMoveHandler);
+document.addEventListener('pointerup', mouseUpHandler);
+};
+
+const mouseMoveHandler = function (e) {
+if (e.target == codeEle) return;
+
+// How far the mouse has been moved
+const dx = e.clientX - x;
+const dy = e.clientY - y;
+
+// Set the position of element
+const [top, left] = [ele.offsetTop + dy, ele.offsetLeft + dx];
+ele.style.top = `${top}px`;
+ele.style.left = `${left}px`;
+handleDrag();
+
+// Reassign the position of mouse
+x = e.clientX;
+y = e.clientY;
+};
+
+const mouseUpHandler = function () {
+// Remove the handlers of `mousemove` and `mouseup`
+document.removeEventListener('pointermove', mouseMoveHandler);
+document.removeEventListener('pointerup', mouseUpHandler);
+};
+
+// Cmd + S || Ctrl + S => Save
+document.addEventListener('keydown', function(e) {
+if ((window.navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)  && e.keyCode == 83) {
+e.preventDefault();
+handleSave();
+}
+}, false);
+// Cmd + P || Ctrl + P => Print
+document.addEventListener('keydown', function(e) {
+if ((window.navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)  && e.keyCode == 80) {
+e.preventDefault();
+handlePrint();
+}
+}, false);
+
+ele.addEventListener('pointerdown', mouseDownHandler);
+</script>
+
+<script>
+function uuidv4() {
+return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
+(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+);
+}
+const program = "web-program-" + uuidv4();
+
+let ws;
+let send;
+function wsConnect() {
+ws = new WebSocket(window.location.origin.replace("http", "ws") + "/ws");
+send = function(s) { ws.send(s); }
+
+ws.onopen = () => {
+    document.getElementById('status').innerHTML = "<span style=background-color:seagreen;color:white;>Connnected</span>";
+
+    handleDrag();
+};
+ws.onclose = window.onbeforeunload = () => {
+    document.getElementById('status').innerHTML = "<span style=background-color:red;color:white;>Disconnnected</span>";
+
+    send(`Retract web claims {${program}} has region /something/`);
+    send(`Retract web claims {${program}} has program code /something/`);
+    setTimeout(() => { wsConnect(); }, 1000);
+};
+ws.onerror = (err) => {
+    document.getElementById('status').innerText = "Error";
+    console.error('Socket encountered error: ', err.message, 'Closing socket');
+    ws.close();
+}
+ws.onmessage = (msg) => {
+if (msg.data.startsWith("ERROR:")) {
+    const errorEl = document.getElementById("error");
+    if (msg.data == "ERROR: {}") {
+    errorEl.style.backgroundColor = "";
+    errorEl.innerText = "";
+    } else {
+    errorEl.style.backgroundColor = "#f55";
+    errorEl.innerText = msg.data;
+    }
+}
+}
+};
+wsConnect();
+
+function handleDrag() {
+let [top, left, w, h] = [ele.offsetTop, ele.offsetLeft, ele.offsetWidth, ele.offsetHeight];
+send(`
+set top [expr {int(double(${(top + (top/window.innerHeight) * h)}) * (double($Display::HEIGHT) / ${window.innerHeight}))}]
+set left [expr {int(double(${(left + (left/window.innerWidth) * w)}) * (double($Display::WIDTH) / ${window.innerWidth}))}]
+proc handleConfigure {program x y w h} {
+    set vertices [list [list $x $y] \
+                        [list [expr {$x+$w}] $y] \
+                        [list [expr {$x+$w}] [expr {$y+$h}]] \
+                        [list $x [expr {$y+$h}]]]
+    set edges [list [list 0 1] [list 1 2] [list 2 3] [list 3 0]]
+    Retract web claims $program has region /something/
+    Assert web claims $program has region [list $vertices $edges]
+}
+handleConfigure {${program}} $left $top {${w}} {${h}}
+if {$::isLaptop} { Step }
+`);
+}
+function handleSave() {
+const code = document.getElementById("code").value;
+send(`
+Retract web claims {${program}} has program code /something/
+Assert web claims {${program}} has program code {${code}}
+if {$::isLaptop} { Step }
+`);
+setTimeout(() => {
+    send(`list ERROR: [Statements::findMatches [list {${program}} has error /err/ with info /errorInfo/]]`);
+}, 500);
+}
+let jobid;
+function handlePrint() {
+const code = document.getElementById("code").value;
+jobid = String(Math.random());
+send(`Assert web wishes to print {${code}} with job id {${jobid}}`);
+setTimeout(500, () => {
+    send(`Retract web wishes to print {${code}} with job id {${jobid}}`);
+});
+document.getElementById('printback').style.display = '';
+}
+function handlePrintBack() {
+send(`Assert web wishes to print the back of job id {${jobid}}`);
+setTimeout(500, () => {
+    send(`Retract web wishes to print the back of job id {${jobid}}`);
+});
+}
+</script>
+        </body>
+        </html>
+    }
+}
+\ No newline at end of file
author	Jacob Haip <jhaip@users.noreply.github.com>	2023-03-23 02:52:46 +0000
committer	Jacob Haip <jhaip@users.noreply.github.com>	2023-03-23 02:52:46 +0000
commit	de21137ee316e90211da0e5db00c7bdb36f0e168 (patch)
tree	37eb6546334c05bd472bff4caf3bc7b271a36086 /virtual-programs/new-program-web-editor.folk
parent	remove extra debug logs in web.tcl (diff)
download	folk-de21137ee316e90211da0e5db00c7bdb36f0e168.tar.gz folk-de21137ee316e90211da0e5db00c7bdb36f0e168.zip