consistent ordering of corners

author: Cristobal Sciutto <cristobal.sciutto@gmail.com> 2023-06-09 22:49:43 +0000
committer: Cristobal Sciutto <cristobal.sciutto@gmail.com> 2023-06-10 00:28:38 +0000
commit: d77753a0c054f93d2b6cf399e6b1cd669cead39e (patch)
tree: c90a992ac906c384a7da7ec6b4283268952c3a64 /virtual-programs/new-program-web-editor.folk
parent: README tweaks, put style guide into README (diff)
download: folk-d77753a0c054f93d2b6cf399e6b1cd669cead39e.tar.gz
folk-d77753a0c054f93d2b6cf399e6b1cd669cead39e.zip
1 files changed, 175 insertions, 173 deletions
diff --git a/virtual-programs/new-program-web-editor.folk b/virtual-programs/new-program-web-editor.folk
index 67a18832..692b00e0 100644
--- a/virtual-programs/new-program-web-editor.folk
+++ b/virtual-programs/new-program-web-editor.folk
@@ -1,177 +1,179 @@
 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);
-</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;
+<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 [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>
     }
 }
-}
-};
-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	Cristobal Sciutto <cristobal.sciutto@gmail.com>	2023-06-09 22:49:43 +0000
committer	Cristobal Sciutto <cristobal.sciutto@gmail.com>	2023-06-10 00:28:38 +0000
commit	d77753a0c054f93d2b6cf399e6b1cd669cead39e (patch)
tree	c90a992ac906c384a7da7ec6b4283268952c3a64 /virtual-programs/new-program-web-editor.folk
parent	README tweaks, put style guide into README (diff)
download	folk-d77753a0c054f93d2b6cf399e6b1cd669cead39e.tar.gz folk-d77753a0c054f93d2b6cf399e6b1cd669cead39e.zip