diff options
| author | Omar Rizwan <omar@omar.website> | 2024-05-03 18:13:29 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-05-03 18:13:29 +0000 |
| commit | 0e7fe9e3b4db7c5252f58d4bb403adc2b71ffa17 (patch) | |
| tree | 938e2424fed19f0cd397b7b80b77263d59c651ac /virtual-programs | |
| parent | display/text: Add layer support (diff) | |
| parent | Add rotation slider to the web editor (diff) | |
| download | folk-0e7fe9e3b4db7c5252f58d4bb403adc2b71ffa17.tar.gz folk-0e7fe9e3b4db7c5252f58d4bb403adc2b71ffa17.zip | |
Merge pull request #133 from FolkComputer/ac/rotate-web-editor
Add rotation slider to the web editor
Diffstat (limited to 'virtual-programs')
| -rw-r--r-- | virtual-programs/web/new-program-web-editor.folk | 27 |
1 files changed, 19 insertions, 8 deletions
diff --git a/virtual-programs/web/new-program-web-editor.folk b/virtual-programs/web/new-program-web-editor.folk index f972cfc7..bd4fd0d6 100644 --- a/virtual-programs/web/new-program-web-editor.folk +++ b/virtual-programs/web/new-program-web-editor.folk @@ -1,7 +1,9 @@ Wish the web server handles route "/new" with handler { html { -<html> +<html lang="en"> <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { overflow: hidden; } </style> @@ -14,6 +16,9 @@ Wish the web server handles route "/new" with handler { <button onclick="handleSave()">Save</button> <button onclick="handlePrint()">Print</button> <button id="printback" style="font-size: 50%; display: none" onclick="handlePrintBack()">Print Back</button> + + <input id="regionAngleRange" type="range" value="0" min="0" max="360" step="0.1" oninput="this.nextElementSibling.value = `angle: ${this.value}°`; regionAngle = this.value; handleDrag();"> + <output>angle: 0°</output> </p> <pre id="error"></pre> </div> @@ -26,11 +31,14 @@ Wish the web server handles route "/new" with handler { // Query the element const ele = document.getElementById('dragme'); const codeEle = document.getElementById("code"); + const angleEle = document.getElementById("regionAngleRange"); + // Handle the mousedown event // that's triggered when user drags the element const mouseDownHandler = function (e) { if (e.target == codeEle) return; + if (e.target == angleEle) return; // Get the current mouse position x = e.clientX; @@ -91,6 +99,7 @@ Wish the web server handles route "/new" with handler { let ws; let send; + let regionAngle = 0; function wsConnect() { ws = new WebSocket(window.location.origin.replace("http", "ws") + "/ws"); send = function(s) { ws.send(s); } @@ -133,13 +142,15 @@ Wish the web server handles route "/new" with handler { 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] + 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/ + set basicRegion [region create $vertices $edges] + set rotatedRegion [region rotate $basicRegion ${regionAngle * (3.1415 / 180)}] + Assert web claims $program has region $rotatedRegion } handleConfigure {${program}} $left $top {${w}} {${h}} if {$::isLaptop} { Step } |