summaryrefslogtreecommitdiffstats
path: root/virtual-programs/new-program-web-editor.folk
diff options
context:
space:
mode:
authorOmar Rizwan <omar@omar.website>2024-04-09 22:20:51 +0000
committerOmar Rizwan <omar@omar.website>2024-04-09 22:20:51 +0000
commitb21b59570f426c1c7c09a5aa99420e750127f0b3 (patch)
tree95ee57550f52fbfb90a71187609ec6a77b71a71c /virtual-programs/new-program-web-editor.folk
parentRemove program-positions.tcl (diff)
downloadfolk-b21b59570f426c1c7c09a5aa99420e750127f0b3.tar.gz
folk-b21b59570f426c1c7c09a5aa99420e750127f0b3.zip
Move web endpoints into subfolder
Diffstat (limited to 'virtual-programs/new-program-web-editor.folk')
-rw-r--r--virtual-programs/new-program-web-editor.folk184
1 files changed, 0 insertions, 184 deletions
diff --git a/virtual-programs/new-program-web-editor.folk b/virtual-programs/new-program-web-editor.folk
deleted file mode 100644
index f972cfc7..00000000
--- a/virtual-programs/new-program-web-editor.folk
+++ /dev/null
@@ -1,184 +0,0 @@
-Wish the web server handles route "/new" with handler {
- 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);
-
- 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 [expr {$x+$w}] $y] \
- [list $x $y] \
- [list $x [expr {$y+$h}]] \
- [list [expr {$x+$w}] [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 [region create $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 }
- `);
- [500, 1000, 3000].forEach(timeout => {
- setTimeout(() => {
- send(`
-set errors [Statements::findMatches [list {${program}} has error /err/ with info /errorInfo/]]
-::websocket::send $chan text [join [list "Error:" {*}[lmap e $errors {dict get $e errorInfo}]] "\n"]
-`);
- }, timeout);
- });
- }
- 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>
- }
-}