From: Ben Harris <bjh21@bjh21.me.uk>
Date: Wed, 15 Oct 2025 21:46:46 +0000 (+0100)
Subject: webstead: click handler for output side
X-Git-Tag: bedstead-3.261~32
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~bjharris/git?a=commitdiff_plain;h=a9bceeb6e7e3f686d5d4fbb1e6f043f986307881;p=bedstead.git

webstead: click handler for output side

It's kind of ugly because there's no :active, but I can't see a nice
way to fake that.
---

diff --git a/webstead.xhtml b/webstead.xhtml
index 7452ecd..8c2b844 100644
--- a/webstead.xhtml
+++ b/webstead.xhtml
@@ -123,6 +123,18 @@
         target.focus();
         e.preventDefault();
     }
+    function drawing_click(e) {
+        // At least on FF 140, SVGMatrix doesn't have .transformPoint()
+        // so we turn it into a DOMMatrix, which does.
+        var m = DOMMatrix.fromMatrix(this.getScreenCTM().inverse());
+        var pt = m.transformPoint({x: e.clientX, y: e.clientY});
+        var x = Math.floor(pt.x / 100) - 1;
+        var y = Math.floor(pt.y / 100) - 1;
+        var target = document.querySelector('#pixels').rows[y].cells[x]
+                     .querySelector('input');
+        target.click();
+        e.preventDefault();        
+    }
     function init() {
         for (var e of document.querySelectorAll('#pixels input')) {
             e.onchange = e => update_glyph(true);
@@ -132,6 +144,7 @@
             from_c(this.value);
             update_glyph(false);
         };
+        document.querySelector('#drawing').onclick = drawing_click;
         update_glyph(true);
     }
     import("./bedstead.js").then((module) => {
@@ -216,7 +229,8 @@
         </table>
       </form>
       <div id="outpane">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="100 100 500 900">
+        <svg xmlns="http://www.w3.org/2000/svg" id="drawing"
+             viewBox="100 100 500 900">
           <g transform="scale(1,-1) translate(0,-800)">
             <path id="rendered" fill="currentColor"/>
           </g>